/**
 * page.css — NMC Creator Page Layout
 * CSS extrait de page.html (VAP 2.2 — 2026-04-04)
 * Chargé via <link rel="stylesheet"> pour cache navigateur
 * Les CSS vars --primary etc. sont définies ici comme valeurs par défaut
 * et overridées dynamiquement par nmc-theme-engine.js
 */

        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #8B5CF6;
            --primary-light: #A78BFA;
            --secondary: #EC4899;
            --accent: #06B6D4;
            --bg: #0F0F23;
            --bg-card: #1A1A2E;
            --bg-elevated: #252542;
            --text: #FFFFFF;
            --text-dim: #A1A1AA;
            --border: rgba(139, 92, 246, 0.2);
            --success: #10B981;
        }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
        body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 40%); pointer-events: none; z-index: 0; }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; position: relative; z-index: 1; }
        
        /* Loading state */
        .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; }
        .loading-spinner { width: 50px; height: 50px; border: 4px solid var(--bg-elevated); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-text { margin-top: 20px; color: var(--text-dim); }
        
        /* Error state */
        .error-state { text-align: center; padding: 100px 20px; }
        .error-state h1 { font-size: 4rem; margin-bottom: 20px; }
        .error-state p { color: var(--text-dim); margin-bottom: 30px; }
        .error-state a { color: var(--primary); text-decoration: none; }
        
        /* Creator Header — CSS déplacé dans js/components/nmc-creator-header.js (Shadow DOM) */

        /* Navigation Sections — CSS déplacé dans js/components/nmc-media-grid.js (Shadow DOM) */
        
        /* Media Grid */
        .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; }
        .media-card { background: var(--bg-card); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); transition: all 0.3s ease; }
        .media-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(139, 92, 246, 0.2); border-color: var(--primary); }
        .media-card.vertical { max-width: 320px; justify-self: center; }
        
        .media-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--bg-elevated); }
        .media-wrapper.vertical { padding-bottom: 177.78%; }
        .media-wrapper.spotify { padding-bottom: 0; height: 352px; }
        .media-wrapper.suno { padding-bottom: 0; height: auto; min-height: 200px; }
        .media-wrapper.tiktok { padding-bottom: 0; height: 700px; max-height: 75vh; }
        .media-wrapper.twitch { padding-bottom: 56.25%; }
        .media-wrapper.instagram { padding-bottom: 0; min-height: 450px; }
        .media-wrapper.instagram iframe { position: relative; width: 100%; min-height: 450px; border: none; }
        .media-wrapper.instagram.vertical { min-height: 600px; }
        .media-wrapper.instagram.vertical iframe { min-height: 600px; }
        .media-wrapper.other { padding-bottom: 56.25%; }
        .media-wrapper.other.link-only { padding-bottom: 0; height: auto; }
        .media-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
        .media-wrapper.spotify iframe, .media-wrapper.tiktok iframe { position: relative; border-radius: 12px; }
        
        /* Suno Audio Player */
        .suno-player { display: flex; flex-direction: column; padding: 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 16px; }
        .suno-player-header { display: flex; gap: 16px; margin-bottom: 16px; }
        .suno-cover { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,0.4); flex-shrink: 0; background: var(--bg-elevated); }
        .suno-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        .suno-title { color: white; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
        .suno-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; color: #a78bfa; font-weight: 600; width: fit-content; }
        .suno-badge img { width: 16px; height: 16px; }
        .suno-audio-container { margin-top: 12px; }
        .suno-audio { width: 100%; height: 48px; border-radius: 24px; }
        .suno-audio::-webkit-media-controls-panel { background: rgba(255,255,255,0.1); border-radius: 24px; }
        .suno-audio::-webkit-media-controls-play-button { background-color: #8b5cf6; border-radius: 50%; }
        .suno-audio::-webkit-media-controls-current-time-display,
        .suno-audio::-webkit-media-controls-time-remaining-display { color: white; }
        
        .other-link-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg-elevated); border-radius: 12px; text-align: center; }
        .other-link-card .link-icon { font-size: 3rem; margin-bottom: 15px; }
        .other-link-card a { color: var(--primary-light); text-decoration: none; font-weight: 600; word-break: break-all; }
        .other-link-card a:hover { text-decoration: underline; }
        
        .media-wrapper.instagram-card { padding-bottom: 0; height: auto; min-height: 0; position: relative; }
        .instagram-link-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: linear-gradient(135deg, #833AB4, #FD1D1D, #F77737); border-radius: 12px; text-align: center; }
        .instagram-link-card .instagram-icon { font-size: 3.5rem; margin-bottom: 10px; }
        .instagram-link-card .instagram-label { color: white; font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
        .external-link.instagram-link { background: linear-gradient(135deg, #833AB4, #FD1D1D); }
        .external-link.instagram-link:hover { background: linear-gradient(135deg, #6d2f96, #d41818); }
        
        /* Vidéos uploadées */
        .media-wrapper.upload { padding-bottom: 0; height: auto; }
        .media-wrapper.upload video { width: 100%; max-height: 500px; border-radius: 12px; background: #000; }
        .media-wrapper.upload.vertical video { max-height: 70vh; }
        
        /* Articles */
        .media-wrapper.article { padding-bottom: 0; height: auto; min-height: 200px; position: relative; overflow: hidden; }
        .article-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; background: linear-gradient(135deg, #1A1A1A 0%, #333333 100%); border-radius: 12px; text-align: center; min-height: 180px; }
        .article-preview.with-thumb { padding: 0; position: relative; overflow: hidden; min-height: auto; }
        .article-preview .article-thumbnail { width: 100%; height: auto; object-fit: contain; display: block; }
        .article-preview .article-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
        .article-preview:hover .article-overlay { opacity: 1; }
        .article-preview .read-icon { font-size: 1.2rem; color: white; background: rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 25px; }
        .article-preview .article-icon { font-size: 3rem; margin-bottom: 15px; }
        .article-preview .article-title { color: white; font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
        .article-preview .article-excerpt { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.5; max-height: 60px; overflow: hidden; }
        .article-card { cursor: pointer; }
        
        /* Photos */
        .media-wrapper.photo { padding-bottom: 0; height: auto; }
        .photo-preview { position: relative; border-radius: 12px; overflow: hidden; }
        .photo-preview .photo-thumbnail { width: 100%; height: auto; max-height: 400px; object-fit: cover; display: block; }
        .photo-preview .photo-placeholder { display: flex; align-items: center; justify-content: center; height: 200px; background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); font-size: 4rem; }
        .photo-preview .photo-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
        .photo-preview:hover .photo-overlay { opacity: 1; }
        .photo-preview .view-icon { font-size: 2.5rem; }
        .photo-card { cursor: pointer; }
        
        /* Galeries */
        .media-wrapper.gallery { padding-bottom: 0; height: auto; }
        .gallery-preview { position: relative; border-radius: 12px; overflow: hidden; }
        .gallery-preview .gallery-thumbnail { width: 100%; height: auto; max-height: 400px; object-fit: cover; display: block; }
        .gallery-preview .gallery-placeholder { display: flex; align-items: center; justify-content: center; height: 200px; background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); font-size: 4rem; }
        .gallery-preview .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); display: flex; align-items: center; justify-content: center; }
        .gallery-preview .gallery-count { color: white; font-weight: 600; background: rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; }
        .gallery-card { cursor: pointer; }
        
        /* Articles en mode Reels */
        .reel-article { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg, #1A1A1A 0%, #252525 100%); position: relative; overflow: hidden; }
        .reel-article-scroll { flex: 1; padding: 60px 20px 20px; overflow-y: auto; }
        .reel-article-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 20px 25px; background: linear-gradient(to top, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.7) 50%, transparent 100%); z-index: 5; }
        .reel-article-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
        .reel-article-thumbnail { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; }
        .reel-article-title { font-size: 1.8rem; font-weight: 700; color: var(--primary-light, #ff6b6b); margin-bottom: 20px; line-height: 1.2; word-wrap: break-word; }
        .reel-article-content { color: white; font-size: 1.1rem; line-height: 1.8; word-wrap: break-word; overflow-wrap: break-word; padding-bottom: 100px; }
        .reel-article-content h2 { font-size: 1.4rem; color: var(--primary-light, #ff6b6b); margin: 20px 0 10px; }
        .reel-article-content h3 { font-size: 1.2rem; color: #ccc; margin: 15px 0 8px; }
        .reel-article-content p { margin-bottom: 15px; word-wrap: break-word; }
        .reel-article-content ul, .reel-article-content ol { margin: 15px 0; padding-left: 25px; }
        .reel-article-content li { margin-bottom: 8px; }
        .reel-article-content a { color: var(--primary-light, #ff6b6b); text-decoration: underline; }
        @media (max-width: 768px) {
            .reel-article-scroll { padding: 50px 15px 20px; }
            .reel-article-title { font-size: 1.4rem; }
            .reel-article-content { font-size: 1rem; line-height: 1.6; }
            .reel-article-thumbnail { max-height: 200px; }
        }
        
        /* Photos en mode Reels */
        .reel-photo { display: flex; flex-direction: column; height: 100%; max-height: 100vh; background: #000; position: relative; overflow: hidden; align-items: center; justify-content: center; }
        .reel-photo-img { max-width: 100%; max-height: 70vh; object-fit: contain; padding: 10px; box-sizing: border-box; }
        .reel-photo-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 15px 25px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%); color: white; z-index: 5; }
        .reel-platform-badge { display: inline-block; background: rgba(255,255,255,0.15); padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; color: white; text-decoration: none; margin-bottom: 10px; backdrop-filter: blur(5px); cursor: pointer; }
        .reel-platform-badge:hover { background: rgba(255,255,255,0.25); }
        
        /* Galeries en mode Reels */
        .reel-gallery { display: flex; flex-direction: column; height: 100%; max-height: 100vh; background: #000; position: relative; overflow: hidden; }
        .reel-gallery-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 60px 15px 15px; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%); z-index: 5; }
        .reel-gallery-counter { margin-left: auto; background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; color: white; }
        .reel-gallery-slides { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .reel-gallery-slides::-webkit-scrollbar { display: none; }
        .reel-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 60px 10px 100px; box-sizing: border-box; }
        .reel-gallery-slide img { max-width: 100%; max-height: calc(100vh - 180px); object-fit: contain; }
        .reel-gallery-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 80px 15px 30px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%); color: white; z-index: 5; }
        
        /* Responsive mobile */
        @media (max-width: 768px) {
            .reel-photo-img { max-height: 60vh; }
            .reel-gallery-slide { padding: 80px 5px 120px; }
            .reel-gallery-slide img { max-height: calc(100vh - 220px); }
        }
        
        /* Lazy loading placeholder */
        .video-placeholder:hover .play-button { transform: scale(1.1); }
        
        .media-info { padding: 20px; }
        .media-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
        .media-description { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; margin-bottom: 12px; }
        .media-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .media-tag { padding: 4px 12px; background: rgba(139, 92, 246, 0.1); border-radius: 15px; font-size: 0.75rem; color: var(--primary-light); text-decoration: none; transition: all 0.3s; }
        .media-tag:hover { background: var(--primary); color: white; }

        /* AI Enrichment CSS — VAP 2.5 — Déplacé dans js/components/nmc-ai-enrichment.js */

        .media-platform { padding: 4px 12px; background: rgba(6, 182, 212, 0.1); border-radius: 15px; font-size: 0.7rem; color: var(--accent); text-transform: uppercase; font-weight: 700; }
        
        .external-link { display: block; text-align: center; padding: 12px; background: var(--bg-elevated); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: all 0.3s; }
        .external-link:hover { background: var(--primary); }
        
        /* Empty state */
        .empty-state { text-align: center; padding: 80px 20px; grid-column: 1 / -1; }
        .empty-state-icon { font-size: 4rem; margin-bottom: 20px; opacity: 0.5; }
        .empty-state p { color: var(--text-dim); }
        
        /* Footer - hauteur fixe pour éviter CLS */
        footer { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 0.85rem; margin-top: 60px; border-top: 1px solid var(--border); min-height: 100px; }
        footer a { color: var(--primary-light); text-decoration: none; }
        
        /* Fallback font pendant chargement */
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        
        /* Back to home / Share button */
        .site-header { position: fixed; top: 20px; left: 20px; z-index: 100; }
        .site-header a { display: flex; align-items: center; gap: 10px; text-decoration: none; background: var(--bg-card); border: 2px solid var(--border); border-radius: 30px; padding: 8px 16px 8px 8px; transition: all 0.3s; }
        .site-header a:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2); }
        .site-header img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
        .site-header span { color: var(--text); font-weight: 700; font-size: 0.9rem; }
        
        .share-button { position: fixed; bottom: 30px; right: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 2px solid var(--border); border-radius: 50%; padding: 10px; cursor: pointer; transition: all 0.3s; z-index: 100; }
        .share-button:hover { border-color: var(--primary); transform: scale(1.1); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3); }
        .share-button img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
        .share-button.copied { background: var(--success); border-color: var(--success); }
        .copy-tooltip { position: absolute; bottom: 70px; right: 0; background: var(--success); color: white; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; animation: fadeInUp 0.3s ease; }
        .copy-tooltip::after { content: ''; position: absolute; bottom: -6px; right: 20px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--success); }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Search Bar — CSS déplacé dans js/components/nmc-media-grid.js (Shadow DOM) */
        
        /* Ads styles - Système simplifié */
        /* .ad-header + .ad-header-spacer → déplacés dans nmc-ads-engine.js (Shadow DOM VAP 2.7) */

        /* In-feed pleine largeur - image couvre toute la largeur */
        .ad-infeed { 
            margin: 15px -20px; 
            grid-column: 1 / -1; 
            background: #000;
            border-radius: 0;
            padding: 0;
            border: none;
            overflow: hidden;
            width: calc(100% + 40px);
            position: relative;
        }
        .ad-infeed a { 
            display: block;
            text-decoration: none;
            width: 100%;
        }
        .ad-infeed img, .ad-infeed video { 
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 0;
        }
        .ad-infeed-label {
            text-align: center;
            padding: 8px;
            font-size: 0.7rem;
            color: rgba(255,255,255,0.7);
            background: rgba(0,0,0,0.8);
        }
        @media (max-width: 768px) {
            .ad-infeed { margin: 10px -20px; width: calc(100% + 40px); }
        }
        
        /* .ad-overlay + .ad-overlay-content + .ad-overlay-close → déplacés dans nmc-ads-engine.js (Shadow DOM VAP 2.7) */

        /* Pre-roll player */
        .preroll-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .preroll-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .preroll-controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: rgba(0,0,0,0.7);
            border-radius: 8px;
        }
        .preroll-label {
            color: #FFD700;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .preroll-countdown {
            color: #fff;
            font-size: 0.85rem;
        }
        .preroll-skip {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .preroll-skip:hover {
            background: var(--primary-light);
            transform: scale(1.05);
        }
        .preroll-cta {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255,255,255,0.9);
            color: #000;
            padding: 8px 15px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 600;
            transition: all 0.2s;
        }
        .preroll-cta:hover {
            background: #fff;
            transform: scale(1.05);
        }
        
        /* Video overlay - pour contenus propriétaires (upload/ugc) */
        .ad-video-overlay { 
            position: absolute; 
            z-index: 10; 
            padding: 5px;
            pointer-events: auto;
        }
        .ad-video-overlay a {
            display: block;
            text-decoration: none;
        }
        .ad-video-overlay img { 
            max-width: 100px; 
            border-radius: 8px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: transform 0.2s;
        }
        .ad-video-overlay img:hover { transform: scale(1.05); }
        .ad-video-overlay.top-left { top: 10px; left: 10px; }
        .ad-video-overlay.top-right { top: 10px; right: 10px; }
        .ad-video-overlay.bottom-left { bottom: 50px; left: 10px; }
        .ad-video-overlay.bottom-right { bottom: 50px; right: 10px; }
        .ad-video-overlay-close {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background: rgba(0,0,0,0.8);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @media (max-width: 768px) {
            .ad-video-overlay img { max-width: 70px; }
            .ad-video-overlay.bottom-left, .ad-video-overlay.bottom-right { bottom: 80px; }
        }
        
        /* Reel ad in feed - pour mode mobile - image centrée pleine largeur */
        .reel-item.reel-ad { 
            background: #000; 
        }
        .reel-item.reel-ad .reel-info {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            padding: 0;
            background: none;
        }
        .reel-ad-content { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            width: 100%; 
            height: 100%; 
            padding: 20px;
        }
        .reel-ad-content a { 
            display: block; 
            width: 100%;
            max-width: 100%;
        }
        .reel-ad-content img, .reel-ad-content video { 
            width: 100%; 
            height: auto; 
            object-fit: contain;
            border-radius: 12px;
        }
        
        /* Overlay dans le feed reels */
        .reel-overlay-ad {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 20;
        }
        .reel-overlay-ad.top-left { top: 10px; left: 10px; right: auto; }
        .reel-overlay-ad.top-right { top: 10px; right: 10px; left: auto; }
        .reel-overlay-ad.bottom-left { bottom: 80px; left: 10px; top: auto; right: auto; }
        .reel-overlay-ad.bottom-right { bottom: 80px; right: 10px; top: auto; left: auto; }
        .reel-overlay-ad img {
            max-width: 80px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .reel-overlay-close {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background: rgba(0,0,0,0.8);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
        }
        
        @media (max-width: 768px) {
            .media-grid { grid-template-columns: 1fr; }
        }
        
        /* ============================================ */
        /* MODE REELS - FULLSCREEN SWIPE               */
        /* ============================================ */
        
        .reels-container {
            display: none;
        }
        
        .reels-mode body {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        .reels-mode .container,
        .reels-mode .site-header,
        .reels-mode .share-button,
        .reels-mode footer {
            display: none !important;
        }
        
        /* .reels-mode .ad-header / .ad-header-spacer / .ad-overlay → déplacés dans nmc-ads-engine.js (:host-context VAP 2.7) */

        .reels-mode .reels-container {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            background: #000;
            z-index: 9999;
        }
        
        .reels-wrapper {
            height: 100%;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .reels-wrapper::-webkit-scrollbar {
            display: none;
        }
        
        .reel-item {
            height: 100vh;
            height: 100dvh;
            width: 100%;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
        }
        
        .reel-item .reel-media {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            cursor: pointer;
        }
        
        /* Style pour les vidéos uploadées dans le mode Reels */
        .reel-item .reel-media.reel-upload {
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }
        
        .reel-item .reel-media.reel-upload video {
            width: 100%;
            height: 100%;
            max-width: 100vw;
            max-height: 100vh;
            max-height: 100dvh;
            object-fit: contain;
            position: relative;
            z-index: 5;
        }
        
        /* Indicateur play/pause pour vidéos uploadées */
        .reel-play-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            z-index: 20;
        }
        
        .reel-play-indicator.visible {
            opacity: 1;
        }
        
        .reel-item video {
            pointer-events: none;
        }
        
        .reel-item iframe {
            width: 100%;
            height: 100%;
            max-height: 100vh;
            max-height: 100dvh;
            border: none;
        }
        
        .reel-item.vertical iframe {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .reel-item.horizontal iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;
            max-height: 50vh;
        }
        
        .reel-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 80px 15px 30px;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
            color: white;
            z-index: 10;
            pointer-events: none;
        }
        
        .reel-info * {
            pointer-events: auto;
        }
        
        .reel-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .reel-description {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.8);
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .reel-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .reel-tag {
            padding: 4px 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 12px;
            font-size: 0.75rem;
            color: white;
            text-decoration: none;
        }
        
        .reels-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
            pointer-events: none;
        }
        
        .reels-header > * {
            pointer-events: auto;
        }
        
        .reels-back {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.3rem;
            cursor: pointer;
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .reels-logo {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .reels-logo img {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .reels-creator {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            text-decoration: none;
        }
        
        .reels-creator img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .reels-creator span {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        /* Bouton share en bas à droite */
        .reels-share-btn {
            position: fixed;
            bottom: 30px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.3);
            transition: all 0.3s;
        }
        
        .reels-share-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }
        
        .reels-share-btn.copied {
            background: var(--success);
            border-color: var(--success);
        }
        
        .reels-share-btn img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* Boutons fixes pour réponses (mobile) */
        .fixed-response-actions {
            position: fixed;
            bottom: 140px;
            right: 15px;
            z-index: 150;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .fixed-action-btn {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: none;
            border-radius: 15px;
            padding: 6px 12px;
            cursor: pointer;
            color: white;
            font-size: 0.75rem;
        }
        
        .fixed-action-btn:active {
            transform: scale(0.95);
            background: rgba(139,92,246,0.8);
        }
        
        .fixed-action-btn .action-icon {
            font-size: 0.9rem;
        }
        
        .fixed-action-btn .action-label {
            font-size: 0.7rem;
            font-weight: 600;
        }
        
        .reel-counter {
            position: fixed;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.5);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            color: white;
            z-index: 100;
            backdrop-filter: blur(10px);
        }
        
        .reel-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
            cursor: pointer;
        }
        
        .reel-placeholder .play-icon {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
        
        .reel-placeholder .play-icon svg {
            width: 35px;
            height: 35px;
            fill: var(--primary);
            margin-left: 5px;
        }
        
        .reel-platform {
            display: inline-block;
            padding: 6px 14px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            color: white;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 10px;
            text-decoration: none;
            cursor: pointer;
        }
        
        .reel-platform:hover {
            background: rgba(255,255,255,0.3);
        }
        
        /* Pub in-feed dans Reels - Fullscreen 9:16 */
        .reel-item.reel-ad {
            background: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .reel-ad-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
        
        .reel-ad-content a {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        .reel-ad-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
        }
        
        /* Pub overlay dans Reels */
        .reel-overlay-ad {
            position: absolute;
            bottom: 200px;
            right: 10px;
            z-index: 50;
            display: block;
        }
        .reel-overlay-ad.top-left { top: 10px; left: 10px; right: auto; bottom: auto; }
        .reel-overlay-ad.top-right { top: 10px; right: 10px; left: auto; bottom: auto; }
        .reel-overlay-ad.bottom-left { bottom: 200px; left: 10px; top: auto; right: auto; }
        .reel-overlay-ad.bottom-right { bottom: 200px; right: 10px; top: auto; left: auto; }
        
        .reel-overlay-ad img {
            max-width: 100px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }
        
        .reel-overlay-close {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 22px;
            height: 22px;
            background: rgba(0,0,0,0.7);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 0.7rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* ============================================
           VIDEO RESPONSES STYLES
           ============================================ */
        
        /* Side Actions dans Reels */
        .reel-actions {
            position: absolute;
            right: 10px;
            bottom: 180px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 18px;
            align-items: center;
            pointer-events: auto;
        }
        
        .reel-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            background: none;
            border: none;
            cursor: pointer;
            color: white;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(255,255,255,0.2);
            text-decoration: none;
            touch-action: manipulation;
            /* Zone de toucher plus grande */
            padding: 10px;
            margin: -10px;
            position: relative;
            z-index: 101;
        }
        
        .reel-action-btn .action-icon {
            width: 46px;
            height: 46px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            transition: all 0.3s;
        }
        
        .reel-action-btn:hover .action-icon,
        .reel-action-btn:active .action-icon {
            background: rgba(255,255,255,0.25);
            transform: scale(1.1);
        }
        
        .reel-action-btn .action-count {
            font-size: 0.7rem;
            font-weight: 600;
        }
        
        .reel-action-btn.responses .action-icon {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }
        
        .reel-action-btn.responses.has-responses .action-icon {
            animation: pulse-responses 2s infinite;
        }
        
        @keyframes pulse-responses {
            0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
            50% { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
        }
        
        /* Responses Feed Header */
        .responses-header {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 110;
            padding: 15px 20px;
            padding-top: max(15px, env(safe-area-inset-top));
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px);
            align-items: center;
            justify-content: space-between;
        }
        
        .responses-header.active {
            display: flex;
        }
        
        .responses-back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
            background: rgba(255,255,255,0.15);
            border: none;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        
        .responses-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--primary-light);
        }
        
        /* Response Badge on video */
        .response-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(139,92,246,0.3);
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            margin-bottom: 10px;
            width: fit-content;
            cursor: pointer;
        }
        
        .response-badge:hover {
            background: rgba(139,92,246,0.5);
        }
        
        /* Submit Response Modal */
        .submit-modal-overlay {
            z-index: 10010 !important;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.95);
            z-index: 10010;
            display: none;
            align-items: flex-end;
            justify-content: center;
        }
        
        .submit-modal-overlay.active {
            display: flex;
        }
        
        .submit-modal {
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            background: var(--bg-card);
            border-radius: 24px 24px 0 0;
            overflow: hidden;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .submit-modal-overlay.active .submit-modal {
            transform: translateY(0);
        }
        
        .submit-modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .submit-modal-header h3 {
            font-size: 1.1rem;
            margin: 0;
        }
        
        .submit-modal-close {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px;
        }
        
        .submit-modal-body {
            padding: 20px;
            overflow-y: auto;
            max-height: calc(90vh - 80px);
        }
        
        .submit-parent-info {
            background: rgba(139,92,246,0.15);
            border: 1px solid rgba(139,92,246,0.3);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 20px;
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .submit-parent-info .icon { font-size: 1.5rem; }
        .submit-parent-info .text { flex: 1; }
        .submit-parent-info .label { font-size: 0.75rem; color: var(--text-dim); }
        .submit-parent-info .title { font-weight: 600; font-size: 0.9rem; }
        
        .submit-form-group {
            margin-bottom: 18px;
        }
        
        .submit-form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
        
        .submit-form-group input,
        .submit-form-group textarea {
            width: 100%;
            padding: 14px;
            background: var(--bg-elevated);
            border: 2px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-family: inherit;
            font-size: 1rem;
        }
        
        .submit-form-group input:focus,
        .submit-form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .submit-form-group textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .submit-upload-zone {
            border: 2px dashed var(--border);
            border-radius: 16px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .submit-upload-zone:hover {
            border-color: var(--primary);
            background: rgba(139,92,246,0.1);
        }
        
        .submit-upload-zone.has-file {
            border-color: var(--success);
            background: rgba(16,185,129,0.1);
        }
        
        .submit-upload-zone .upload-icon { font-size: 2.5rem; margin-bottom: 10px; }
        .submit-upload-zone .upload-text { font-weight: 600; }
        .submit-upload-zone .upload-hint { font-size: 0.8rem; color: var(--text-dim); margin-top: 5px; }
        
        .submit-video-preview {
            display: none;
            margin-top: 15px;
            border-radius: 12px;
            overflow: hidden;
            background: #000;
        }
        
        .submit-video-preview.active { display: block; }
        
        .submit-video-preview video {
            width: 100%;
            max-height: 200px;
            object-fit: contain;
        }
        
        .submit-video-preview .preview-info {
            padding: 10px;
            background: var(--bg-elevated);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .submit-video-preview .remove-btn {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.8rem;
            cursor: pointer;
        }
        
        .submit-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 14px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            margin-top: 10px;
        }
        
        .submit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .submit-progress-bar {
            display: none;
            height: 6px;
            background: var(--bg-elevated);
            border-radius: 3px;
            margin-top: 15px;
            overflow: hidden;
        }
        
        .submit-progress-bar.active { display: block; }
        
        .submit-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            width: 0%;
            transition: width 0.3s;
        }
        
        /* Response count badge on grid cards */
        .media-responses-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-left: 8px;
        }

/* ============================================
   TERMS MODAL (resp-terms)
   ============================================ */

        .resp-terms-overlay { display:none; position:fixed; inset:0; z-index:10020; background:rgba(0,0,0,0.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); align-items:center; justify-content:center; padding:16px; }
        .resp-terms-overlay.active { display:flex; }
        .resp-terms-modal { width:100%; max-width:540px; max-height:85vh; max-height:85dvh; background:var(--bg-card,#12121a); border-radius:24px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.6); }
        .resp-terms-modal-header { padding:20px 24px; border-bottom:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
        .resp-terms-modal-header h3 { font-size:1.15rem; font-weight:600; color:#fff; margin:0; }
        .resp-terms-body { flex:1; overflow-y:auto; padding:24px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; font-size:0.85rem; line-height:1.6; min-height:0; }
        .resp-terms-body h4 { margin:18px 0 6px; font-size:0.95rem; color:#fff; }
        .resp-terms-body p { color:rgba(255,255,255,0.7); margin:0 0 10px; }
        .resp-terms-body ul { color:rgba(255,255,255,0.7); padding-left:20px; margin:0 0 10px; }
        .resp-terms-body li { margin-bottom:4px; }
        .resp-terms-footer { padding:12px 24px; flex-shrink:0; }