:root {
    --bg-color: #030305;
    --neon-green: #30ff66;
    --neon-purple: #721fff;
    --neon-blue: #1fb6ff;
    --neon-red: #ff2d55;
    --white: #f5f5f7;
    --font-display: 'Bebas Neue', sans-serif;
    --font-text: 'Rajdhani', sans-serif;
    --font-tech: 'Space Grotesk', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Curseur système masqué uniquement sur ordinateur */
@media (hover: hover) and (pointer: fine) {
    body, a, button {
        cursor: none;
    }
}

/* overflow-x: clip (pas "hidden") : bloque le débordement horizontal sans casser
   position: sticky sur les descendants (hidden crée un conteneur de scroll qui
   désactive sticky sur Safari/iOS notamment ; clip évite ce problème). */
html {
    overflow-x: clip;
}

body {
    background-color: var(--bg-color);
    color: var(--white);
    font-family: var(--font-text);
    overflow-x: clip;
    scroll-behavior: smooth;
}

/* =========================================
   CURSEUR FUTURISTE SUR-MESURE
   ========================================= */
#cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    background-color: var(--neon-green);
    border-radius: 50%;
    pointer-events: none;
    z-index: 200002;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--neon-green);
}

#cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 34px; height: 34px;
    border: 1px solid rgba(114, 31, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 200001;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

body.hovering #cursor-ring {
    width: 55px;
    height: 55px;
    border-color: var(--neon-green);
    background: rgba(48, 255, 102, 0.05);
}

/* =========================================
   SÉLECTEUR DE LANGUE (drapeaux ronds, FR/EN/ES)
   Fixe en haut centré. Au repos, seul le drapeau actif est visible ;
   au survol (ou focus clavier), les deux autres apparaissent à côté.
   ========================================= */
.lang-switcher {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.lang-switcher:hover,
.lang-switcher:focus-within {
    opacity: 1;
}

.lang-flag {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: rgba(8, 8, 12, 0.5);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, margin 0.25s ease;
}

.lang-flag svg {
    display: block;
    border-radius: 50%;
}

.lang-flag.active {
    border-color: var(--neon-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.5), 0 0 16px rgba(48, 255, 102, 0.5);
}

/* Sur ordinateur : seul le drapeau actif est visible au repos, les autres se révèlent au survol du groupe */
@media (hover: hover) and (pointer: fine) {
    .lang-flag:not(.active) {
        opacity: 0;
        transform: scale(0.4);
        pointer-events: none;
        margin-left: -46px;
    }
    .lang-switcher:hover .lang-flag:not(.active),
    .lang-switcher:focus-within .lang-flag:not(.active) {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        margin-left: 0;
    }
    .lang-flag:hover {
        transform: scale(1.12) !important;
    }
}

/* Sur mobile/tactile : pas de hover fiable, les 3 drapeaux restent visibles en permanence */
@media (hover: none), (pointer: coarse) {
    .lang-flag {
        width: 30px;
        height: 30px;
    }
    .lang-switcher {
        top: 12px;
        gap: 8px;
    }
}

/* =========================================
   BLOC 1 : HERO (NOIR ABYSSAL PUR)
   ========================================= */
.hero {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000000;
    display: flex; justify-content: center; align-items: center;
    z-index: 1; pointer-events: none;
    will-change: opacity, transform;
}

.hero-logos {
    position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    pointer-events: auto;
}

.logo-bg-wrapper {
    position: absolute; width: 70%; max-width: 850px;
    display: flex; justify-content: center; align-items: center;
}

.logo-bg {
    width: 100%; opacity: 0.85;
    animation: bgZoomInfinite 6s ease-in-out infinite alternate;
}

@keyframes bgZoomInfinite {
    0% { transform: scale(0.95); }
    100% { transform: scale(1.08); }
}

.logo-fg {
    position: absolute; width: 80%; max-width: 660px; z-index: 2;
    display: block; height: auto;
    margin-top: 62px;
    animation: jeezFloat 3.5s ease-in-out infinite alternate;
}

@keyframes jeezFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-18px); }
}

.scroll-indicator {
    position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-tech); font-size: 0.9rem; letter-spacing: 5px;
    color: rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-indicator::after {
    content: ''; width: 1px; height: 35px;
    background: linear-gradient(to bottom, var(--neon-green), transparent);
}

/* =========================================
   BLOC 2 : STICKY + FOND DÉGRADÉ VIOLET/VERT
   ========================================= */
.about-sticky-wrapper {
    position: relative;
    margin-top: 100vh;
    height: 260vh;
    background: 
        radial-gradient(circle at 15% 20%, rgba(114, 31, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(48, 255, 102, 0.08) 0%, transparent 45%),
        #040407;
    z-index: 10;
}

.about-sticky-content {
    position: sticky;
    top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px 5vw; overflow: hidden;
}

/* TITRE PERMANENT LUMINEUX */
.huge-text {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 4.5rem);
    line-height: 1.08; text-transform: uppercase; text-align: center;
    max-width: 1200px; margin: 0 auto 35px auto;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

.highlight-green {
    color: var(--neon-green) !important;
    text-shadow: 0 0 18px rgba(48, 255, 102, 0.5) !important;
}

.highlight-purple {
    display: inline-block;
    font-weight: 700;
    color: var(--neon-purple);
    background: linear-gradient(100deg, var(--neon-purple) 42%, #ffffff 50%, var(--neon-purple) 58%);
    background-size: 260% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px rgba(114, 31, 255, 0.55);
    animation: premiumTitleShine 4s ease-in-out infinite;
}
@keyframes premiumTitleShine {
    0% { background-position: 200% 0; }
    55% { background-position: -60% 0; }
    100% { background-position: -60% 0; }
}

.title-period-white {
    color: var(--white);
}

/* BANDEAU SOUS-TITRE EN VERRE FUMÉ HUD */
.sub-text {
    font-family: var(--font-tech);
    font-size: clamp(0.75rem, 1.2vw, 1.1rem); display: block; margin-top: 20px; padding: 14px 24px;
    background: rgba(12, 12, 18, 0.75);
    color: var(--white);
    border-radius: 4px;
    border: 1px solid rgba(114, 31, 255, 0.35);
    letter-spacing: 1.2px; font-weight: 600; position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(48, 255, 102, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    line-height: 1.45;
    text-transform: none;
}

.sub-text::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(48, 255, 102, 0.4), transparent);
    transform: skewX(-25deg); animation: premiumShine 4s infinite ease-in-out;
}

@keyframes premiumShine {
    0% { left: -100%; } 25% { left: 200%; } 100% { left: 200%; }
}

.about-content {
    display: flex; align-items: center; justify-content: center; gap: 40px;
    max-width: 1200px; width: 100%;
}

.about-desc {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    max-width: 580px; color: #aaa; line-height: 1.6;
}

/* MOTS DE LA BIO QUI S'ILLUMINENT AU SCROLL */
.word-span {
    display: inline-block;
    opacity: 0.25;
    transition: opacity 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
    will-change: opacity;
}
.word-span.active {
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Phrase en gras avec scintillement premium (même famille d'effet que "L'ŒIL" du titre) */
/* Le texte est redécoupé en .word-span par le JS de reveal : la règle vise donc aussi
   les mots enfants pour que le dégradé/scintillement s'applique malgré ce découpage. */
.text-shine-premium,
.text-shine-premium .word-span {
    font-weight: 700;
    background: linear-gradient(100deg, #ffffff 38%, rgba(190, 255, 220, 0.95) 50%, #ffffff 62%);
    background-size: 260% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
    animation: premiumTitleShine 4s ease-in-out infinite;
}

/* Phrase en gras simple (sans scintillement) */
.bold-emphasis,
.bold-emphasis .word-span {
    font-weight: 700;
}

/* Question finale du bloc "L'ŒIL" : chaque lettre flotte légèrement, en décalé */
.letter-float {
    display: inline-block;
    animation: letterFloatBob 2.4s ease-in-out infinite;
}
@keyframes letterFloatBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ENCART TRANSITION AVEC COINS HUD TECH */
.about-compare-container {
    position: relative; width: 340px; height: 420px;
    border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background-color: #000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

.about-compare-container .compare-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    /* Si l'image doit être recadrée pour remplir le cadre, on garde le haut plutôt que
       de centrer le recadrage (le centrage coupait le haut sur les formats plus larges). */
    object-position: center top;
}

.hud-corner {
    position: absolute; width: 12px; height: 12px;
    border-color: var(--neon-green); border-style: solid;
    z-index: 10; pointer-events: none; opacity: 0.8;
}
.hud-corner.top-left { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.hud-corner.top-right { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.hud-corner.bottom-left { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.hud-corner.bottom-right { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* =========================================
   BLOC 3 : YEUX
   ========================================= */
.eyes-loop-section {
    position: relative; width: 100vw; height: 100vh; overflow: hidden;
    background-color: #000; z-index: 10;
}

.eyes-loop-video {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover;
}

/* =========================================
   OPTIMISATION RESPONSIVE AVANCÉE (SMARTPHONES & TABLETTES)
   ========================================= */
@media (max-width: 1024px) {
    /* .about-sticky-wrapper garde sa hauteur de bureau (260vh, voir plus haut) : c'est cette
       distance de scroll qui permet au bloc de rester figé (position: sticky) le temps que
       le texte se révèle et que les images se croisent. Sans ça, l'animation se jouait "dans
       le vide" pendant que le contenu défilait normalement, hors de l'écran. */
    .about-sticky-content {
        /* Plus de marge en haut : sur mobile, le sélecteur de langue est fixe en haut de
           l'écran (~18-58px) et se retrouvait à moitié sur le titre sans ce dégagement. */
        padding: 64px 5vw 20px;
        /* Sur un petit écran, le titre + le texte + l'image dépassent facilement 100vh :
           "overflow: hidden" (réglage bureau) rognait alors le haut du titre et le bas de
           l'image. "visible" + hauteur libre laisse "position: sticky" gérer nativement le
           dépassement (le bloc reste figé le plus longtemps possible, puis défile normalement
           pour le reste), sans jamais couper visuellement le contenu. */
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .huge-text {
        margin-bottom: 16px;
    }
    .about-content {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }
    .about-desc {
        max-width: 100%;
    }
    .about-compare-container {
        /* Même proportion (à peu près) que la version bureau (340x420, portrait) au lieu d'un
           format proche du carré : évite de recadrer une bien plus grande partie de l'image. */
        width: 100%;
        max-width: 210px;
        height: 260px;
    }
    .sub-text {
        padding: 10px 16px;
        margin-top: 12px;
    }
}

/* Curseur masqué uniquement sur les vrais appareils tactiles (pas de souris), pas selon la largeur
   de la fenêtre : sur PC/Mac, même une fenêtre étroite (format 9:16 ou carré) garde le curseur. */
@media (hover: none), (pointer: coarse) {
    #cursor-dot, #cursor-ring {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .logo-bg-wrapper { width: 90%; }
    .logo-fg { width: 75%; }
    .huge-text {
        font-size: 2.1rem;
        margin-bottom: 25px;
    }
    .sub-text {
        font-size: 0.8rem;
    }
    .about-desc {
        font-size: 1rem;
    }
}
/* =========================================
   BLOC 3 & 4 : SCROLL DES YEUX & EXPERTISE
   ========================================= */
.eyes-and-expertise-wrapper {
    position: relative;
    height: 320vh; /* Hauteur de scroll : zoom du titre + révélation bio + bandeau plein écran/glitch (court) + CTA final */
    background-color: #000;
}

.eyes-loop-section {
    position: sticky; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    overflow: hidden;
    z-index: 1;
    will-change: filter, opacity;
}

.expertise-content-sticky {
    position: sticky;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 5;
    pointer-events: none; /* Laisse le scroll couler */
}

/* Titre Zoomé "RARE SONT CEUX..." */
.zoom-title {
    position: absolute;
    top: 60%; left: 50%;
    transform: translate(-50%, -50%) scale(4);
    filter: blur(20px);
    opacity: 0;
    margin: 0; width: 100%; text-align: center;
    will-change: transform, filter, opacity;
}

.expertise-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%); /* Centrage vertical parfait */
    width: 100%;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px; /* Écart compact pour ne pas toucher le bandeau du bas */
    opacity: 0;
    pointer-events: auto;
    padding: 0 5vw;
    z-index: 8; /* Place le texte au-dessus du fond */
}

.expertise-text-container .about-desc {
    text-align: center;
    max-width: 100%;
}

/* Groupe de boutons carrés */
.square-media-btn-group {
    display: flex;
    gap: 24px;
}

/* Bouton Carré */
.square-media-btn {
    width: 130px; height: 130px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(135deg, rgba(114, 31, 255, 0.24) 0%, rgba(114, 31, 255, 0.05) 45%, rgba(114, 31, 255, 0.18) 100%);
    border: 1px solid rgba(114, 31, 255, 0.5);
    color: var(--white);
    font-family: var(--font-tech); font-weight: 600; font-size: 1.1rem; letter-spacing: 1px;
    text-decoration: none;
    cursor: none; /* Car tu as ton propre curseur */
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -8px 14px -8px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.25);
}
.square-media-btn:hover {
    transform: scale(1.15);
    background: linear-gradient(135deg, rgba(114, 31, 255, 0.4) 0%, rgba(114, 31, 255, 0.14) 45%, rgba(114, 31, 255, 0.3) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -8px 14px -8px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(114, 31, 255, 0.5);
}

.square-media-btn.btn-red {
    border-color: rgba(255, 45, 85, 0.5);
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.24) 0%, rgba(255, 45, 85, 0.05) 45%, rgba(255, 45, 85, 0.18) 100%);
}
.square-media-btn.btn-red:hover {
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.4) 0%, rgba(255, 45, 85, 0.14) 45%, rgba(255, 45, 85, 0.3) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -8px 14px -8px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(255, 45, 85, 0.5);
}

.square-media-btn.btn-blue {
    border-color: rgba(31, 182, 255, 0.5);
    background: linear-gradient(135deg, rgba(31, 182, 255, 0.24) 0%, rgba(31, 182, 255, 0.05) 45%, rgba(31, 182, 255, 0.18) 100%);
}
.square-media-btn.btn-blue:hover {
    background: linear-gradient(135deg, rgba(31, 182, 255, 0.4) 0%, rgba(31, 182, 255, 0.14) 45%, rgba(31, 182, 255, 0.3) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -8px 14px -8px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(31, 182, 255, 0.5);
}

/* Scintillement premium du texte des boutons, même effet que le "L'ŒIL" du titre */
.square-media-btn.btn-red span {
    display: inline-block;
    font-weight: 700;
    background: linear-gradient(100deg, var(--neon-red) 42%, #ffffff 50%, var(--neon-red) 58%);
    background-size: 260% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(255, 45, 85, 0.55);
    animation: premiumTitleShine 4s ease-in-out infinite;
}
.square-media-btn.btn-blue span {
    display: inline-block;
    font-weight: 700;
    background: linear-gradient(100deg, var(--neon-blue) 42%, #ffffff 50%, var(--neon-blue) 58%);
    background-size: 260% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(31, 182, 255, 0.55);
    animation: premiumTitleShine 4s ease-in-out infinite;
}

/* =========================================
   BLOC 5 : TRANSITION CINÉMATIQUE VERS LE CTA FINAL
   Le titre, la bio et le bandeau de logos partent vers le viewer (zoom + flou + fondu)
   pendant que le fond devient noir ; le bloc final émerge du centre, flou puis net.
   ========================================= */

.zoom-title, .expertise-text-container, .logos-marquee {
    will-change: transform, filter, opacity;
}

/* Fond doux du CTA final : dots vert fluo en haut, noir au milieu, violet fluo en bas, qui flottent */
.cta-final-bg {
    position: absolute; inset: 0;
    z-index: 8;
    background: #030305;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.6s ease;
}
.cta-final-bg::before,
.cta-final-bg::after {
    content: '';
    position: absolute; left: -5%; width: 110%; height: 65%;
    background-image: radial-gradient(circle, currentColor 1.6px, transparent 1.8px);
    background-size: 28px 28px;
    animation: ctaDotsFloat 9s ease-in-out infinite alternate;
}
.cta-final-bg::before {
    top: -12%;
    color: rgba(48, 255, 102, 0.5);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 88%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 88%);
}
.cta-final-bg::after {
    bottom: -12%;
    color: rgba(114, 31, 255, 0.5);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 25%, transparent 88%);
    mask-image: linear-gradient(to top, black 0%, black 25%, transparent 88%);
    animation-delay: -4.5s;
}
@keyframes ctaDotsFloat {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-16px) translateX(6px); }
}

/* Contenu final centré (superposé au centre de la même zone sticky, comme le titre et la bio) */
.cta-final-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 900px;
    padding: 0 5vw;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.cta-final-content.revealed {
    pointer-events: auto;
}

.cta-final-title {
    color: var(--neon-green);
    text-shadow: 0 0 15px rgba(48, 255, 102, 0.5), 0 0 40px rgba(48, 255, 102, 0.25);
}

.cta-points {
    display: flex; gap: 44px; flex-wrap: wrap; justify-content: center;
    max-width: 780px;
}
.cta-point {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: 200px;
}
.cta-point p {
    font-family: var(--font-text);
    font-size: 0.95rem; line-height: 1.5;
    color: #ccc;
}

.cta-icon {
    position: relative;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    color: var(--neon-green);
}
/* Les 3 icônes (satellite, globe, tête) partagent : flottement doux + effet CRT premium
   (scintillement, franges chromatiques, scanlines qui défilent) façon vieux moniteur néon rétro.
   Pas de overflow:hidden ici : ça coupait le glow/les franges en carré, très moche. Les scanlines
   utilisent un masque doux à la place pour s'estomper sur les bords sans clipper le reste. */
.cta-icon-crt-img {
    width: 100%; height: 100%; object-fit: contain;
    animation: iconFloat 3s ease-in-out infinite alternate, iconCrtFlicker 2.6s ease-in-out infinite;
}
/* Chaque icône flotte et scintille à son propre rythme, jamais synchronisées entre elles */
.cta-icon-satellite .cta-icon-crt-img {
    animation-duration: 3.4s, 2.3s;
    animation-delay: 0s, 0s;
}
.cta-icon-globe .cta-icon-crt-img {
    animation-duration: 2.6s, 3.1s;
    animation-delay: -1.3s, -0.6s;
}
.cta-icon-head .cta-icon-crt-img {
    animation-duration: 3.9s, 2.7s;
    animation-delay: -2.1s, -1.4s;
}
@keyframes iconFloat {
    0% { transform: translateY(-6px); }
    100% { transform: translateY(6px); }
}
@keyframes iconCrtFlicker {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(48, 255, 102, 0.55))
                drop-shadow(1.5px 0 0 rgba(114, 31, 255, 0.35))
                drop-shadow(-1.5px 0 0 rgba(48, 255, 102, 0.4))
                brightness(1);
    }
    45% {
        filter: drop-shadow(0 0 15px rgba(48, 255, 102, 0.9))
                drop-shadow(2px 0 0 rgba(114, 31, 255, 0.55))
                drop-shadow(-2px 0 0 rgba(48, 255, 102, 0.6))
                brightness(1.15);
    }
    52% {
        filter: drop-shadow(0 0 5px rgba(48, 255, 102, 0.4)) brightness(0.92);
    }
}

/* Scanlines qui défilent doucement par-dessus les 3 icônes, avec un fondu doux sur les bords (pas de carré net) */
.cta-icon::after {
    content: '';
    position: absolute;
    top: -35%; left: -35%; width: 170%; height: 170%;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0px, transparent 1.5px, transparent 3.5px);
    -webkit-mask-image: radial-gradient(circle, black 45%, transparent 72%);
    mask-image: radial-gradient(circle, black 45%, transparent 72%);
    mix-blend-mode: overlay;
    opacity: 0.55;
    pointer-events: none;
    animation: iconScanlineDrift 5s linear infinite;
}
@keyframes iconScanlineDrift {
    0% { background-position: 0 0; }
    100% { background-position: 0 24px; }
}

.cta-buttons {
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 34px;
    border-radius: 50px;
    font-family: var(--font-tech); font-weight: 600; font-size: 1rem; letter-spacing: 1px;
    text-decoration: none; text-transform: uppercase;
    cursor: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background 0.25s ease;
}
.cta-btn-emoji {
    font-size: 1.15rem;
}
.cta-btn-rdv {
    background: linear-gradient(135deg, rgba(48, 255, 102, 0.26) 0%, rgba(48, 255, 102, 0.06) 45%, rgba(48, 255, 102, 0.2) 100%);
    border: 1px solid rgba(48, 255, 102, 0.5);
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(48, 255, 102, 0.6);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -6px 12px -8px rgba(0, 0, 0, 0.4),
        0 6px 16px rgba(0, 0, 0, 0.2);
}
.cta-btn-rdv:hover {
    transform: scale(1.06);
    background: linear-gradient(135deg, rgba(48, 255, 102, 0.4) 0%, rgba(48, 255, 102, 0.16) 45%, rgba(48, 255, 102, 0.32) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -6px 12px -8px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(48, 255, 102, 0.5);
}
.cta-btn-devis {
    background: linear-gradient(135deg, rgba(245, 245, 247, 0.2) 0%, rgba(245, 245, 247, 0.04) 45%, rgba(245, 245, 247, 0.14) 100%);
    border: 1px solid rgba(245, 245, 247, 0.4);
    color: var(--white);
    text-shadow: 0 0 10px rgba(245, 245, 247, 0.35);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -6px 12px -8px rgba(0, 0, 0, 0.4),
        0 6px 16px rgba(0, 0, 0, 0.2);
}
.cta-btn-devis:hover {
    transform: scale(1.06);
    background: linear-gradient(135deg, rgba(245, 245, 247, 0.32) 0%, rgba(245, 245, 247, 0.12) 45%, rgba(245, 245, 247, 0.24) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -6px 12px -8px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(245, 245, 247, 0.35);
}

/* Mini navigation en bas du bloc final : accès rapide aux murs, aux articles, et retour en haut */
.site-mini-footer {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.mini-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    background: linear-gradient(135deg, rgba(245, 245, 247, 0.1) 0%, rgba(245, 245, 247, 0.02) 50%, rgba(245, 245, 247, 0.07) 100%);
    border: 1px solid rgba(245, 245, 247, 0.25);
    color: rgba(245, 245, 247, 0.75);
    font-family: var(--font-tech); font-size: 0.72rem; font-weight: 600; letter-spacing: 1px;
    text-decoration: none; text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 30px;
    cursor: none;
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mini-nav-btn:hover {
    transform: translateY(-2px);
}
/* Chaque bouton du mini-footer garde sa propre couleur de survol */
.mini-nav-btn.mini-nav-tournages:hover {
    color: var(--neon-red);
    border-color: rgba(255, 45, 85, 0.5);
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.22) 0%, rgba(255, 45, 85, 0.06) 50%, rgba(255, 45, 85, 0.16) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 45, 85, 0.3);
}
.mini-nav-btn.mini-nav-studio:hover {
    color: var(--neon-blue);
    border-color: rgba(31, 182, 255, 0.5);
    background: linear-gradient(135deg, rgba(31, 182, 255, 0.22) 0%, rgba(31, 182, 255, 0.06) 50%, rgba(31, 182, 255, 0.16) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(31, 182, 255, 0.3);
}
.mini-nav-btn.mini-nav-articles:hover {
    color: rgba(245, 245, 247, 0.95);
    border-color: rgba(245, 245, 247, 0.4);
    background: linear-gradient(135deg, rgba(245, 245, 247, 0.22) 0%, rgba(245, 245, 247, 0.06) 50%, rgba(245, 245, 247, 0.16) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(245, 245, 247, 0.2);
}
.mini-nav-btn.mini-nav-top:hover {
    color: #ffffff;
    border-color: rgba(114, 31, 255, 0.5);
    background: linear-gradient(135deg, rgba(114, 31, 255, 0.22) 0%, rgba(114, 31, 255, 0.06) 50%, rgba(114, 31, 255, 0.16) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(114, 31, 255, 0.3);
}

/* Scintillement d'ambiance : rappelle discrètement que ces boutons sont cliquables
   (utile sans souris/curseur personnalisé, ex. tactile). Décalé par bouton pour que
   ça ne clignote pas tout en même temps. Coupé pendant le survol réel. */
@keyframes navPulseGlow {
    0%, 85%, 100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4);
        border-color: rgba(245, 245, 247, 0.25);
    }
    92% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 16px var(--nav-pulse-color);
        border-color: var(--nav-pulse-color);
    }
}
.mini-nav-btn.mini-nav-tournages { --nav-pulse-color: rgba(255, 45, 85, 0.55); animation: navPulseGlow 7s ease-in-out infinite; animation-delay: 0s; }
.mini-nav-btn.mini-nav-studio { --nav-pulse-color: rgba(31, 182, 255, 0.55); animation: navPulseGlow 7s ease-in-out infinite; animation-delay: 1.8s; }
.mini-nav-btn.mini-nav-articles { --nav-pulse-color: rgba(245, 245, 247, 0.5); animation: navPulseGlow 7s ease-in-out infinite; animation-delay: 3.6s; }
.mini-nav-btn.mini-nav-top { --nav-pulse-color: rgba(114, 31, 255, 0.55); animation: navPulseGlow 7s ease-in-out infinite; animation-delay: 5.4s; }
.mini-nav-btn.mini-nav-tournages:hover,
.mini-nav-btn.mini-nav-studio:hover,
.mini-nav-btn.mini-nav-articles:hover,
.mini-nav-btn.mini-nav-top:hover {
    animation: none;
}

/* Bouton coeur "easter egg" (clin d'œil V1), placé à côté de "↑ HAUT DE PAGE" */
.heart-btn {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 45, 85, 0.4);
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.22) 0%, rgba(255, 45, 85, 0.05) 45%, rgba(255, 45, 85, 0.16) 100%);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 45, 85, 0.2);
    cursor: none;
    padding: 0;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.heart-btn:hover {
    transform: scale(1.12);
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.36) 0%, rgba(255, 45, 85, 0.14) 45%, rgba(255, 45, 85, 0.28) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 45, 85, 0.45);
}
.heart-btn svg { width: 18px; height: 18px; pointer-events: none; }

@keyframes heartShake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-14deg) scale(1.15); }
    40% { transform: rotate(10deg) scale(1.15); }
    60% { transform: rotate(-8deg) scale(1.08); }
    80% { transform: rotate(4deg) scale(1.05); }
}
.heart-btn.shaking { animation: heartShake 0.6s ease; }

@keyframes heartGlowPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 45, 85, 0.35); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 8px -6px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 45, 85, 0.9); }
}
.heart-btn.glow-active-red { animation: heartGlowPulse 1s ease; }

@keyframes floatUpFade {
    0% { opacity: 0; transform: translateY(0) rotate(-4deg) scale(0.8); }
    15% { opacity: 1; transform: translateY(-10px) rotate(-9deg) scale(1); }
    80% { opacity: 1; transform: translateY(-48px) rotate(-7deg) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) rotate(-9deg) scale(1); }
}
.floating-msg {
    position: fixed;
    z-index: 200010;
    pointer-events: none;
    font-family: var(--font-tech);
    font-size: 1rem;
    color: var(--white);
    background: rgba(10, 10, 14, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    animation-name: floatUpFade;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@media (max-width: 700px) {
    .cta-points { gap: 30px; }
    .cta-point { width: 42%; }
}

/* Modale Pinterest Plein Écran */
.gallery-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(3, 3, 5, 0.98);
    z-index: 99999;
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(15px);
}
.gallery-modal.open {
    opacity: 1; pointer-events: auto;
}

.gallery-modal-header {
    position: relative;
    z-index: 6;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px;
    padding: 34px 40px 22px;
    flex-shrink: 0;
}
.gallery-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gallery-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 30px 100px;
}

/* Bouton "retour en haut" du mur, façon site (semi-transparent, glow vert fluo) */
.back-to-top-btn {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(48, 255, 102, 0.22) 0%, rgba(48, 255, 102, 0.04) 50%, rgba(48, 255, 102, 0.16) 100%);
    border: 1px solid rgba(48, 255, 102, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -5px 10px -6px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(48, 255, 102, 0.25);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    display: flex; align-items: center; justify-content: center;
    cursor: none;
    /* Sous la vue focus (z-index 10) : passe à l'arrière-plan flou avec le mur quand elle est ouverte */
    z-index: 4;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background 0.25s ease, filter 0.4s ease, opacity 0.4s ease;
}
.back-to-top-btn.blurred {
    filter: blur(10px) brightness(0.4);
    opacity: 0.6;
    pointer-events: none;
}
.back-to-top-btn:hover {
    transform: translateX(-50%) scale(1.14);
    background: linear-gradient(135deg, rgba(48, 255, 102, 0.36) 0%, rgba(48, 255, 102, 0.12) 50%, rgba(48, 255, 102, 0.28) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px -6px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(48, 255, 102, 0.55);
}
.back-to-top-arrow {
    width: 22px; height: 22px;
}
.back-to-top-btn:hover .back-to-top-arrow {
    animation: arrowPointUp 0.55s ease-in-out infinite alternate, crtArrowFlicker 0.5s steps(2) infinite;
}
@keyframes arrowPointUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}
@keyframes crtArrowFlicker {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
        opacity: 1;
    }
    50% {
        filter: drop-shadow(0 2px 0 rgba(48, 255, 102, 0.85)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7));
        opacity: 0.82;
    }
}

.gallery-modal-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.05;
    text-transform: uppercase;
    text-align: left;
}
/* Effet bioluminescent : couleur pleine + halo lumineux qui respire doucement, pas de contour */
.gallery-modal-title.tournages {
    color: var(--neon-red);
    text-shadow: 0 0 10px rgba(255, 45, 85, 0.85), 0 0 26px rgba(255, 45, 85, 0.6), 0 0 50px rgba(255, 45, 85, 0.4), 0 0 90px rgba(255, 45, 85, 0.25);
    animation: titleBioGlow 3.2s ease-in-out infinite;
}
.gallery-modal-title.studio {
    color: var(--neon-blue);
    text-shadow: 0 0 10px rgba(31, 182, 255, 0.85), 0 0 26px rgba(31, 182, 255, 0.6), 0 0 50px rgba(31, 182, 255, 0.4), 0 0 90px rgba(31, 182, 255, 0.25);
    animation: titleBioGlow 3.2s ease-in-out infinite;
}
@keyframes titleBioGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

.gallery-modal-subtitle {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.85;
    max-width: 640px;
}

.gallery-return-btn {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(48, 255, 102, 0.24) 0%, rgba(48, 255, 102, 0.05) 45%, rgba(48, 255, 102, 0.18) 100%);
    border: 1px solid rgba(48, 255, 102, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -6px 10px -7px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(48, 255, 102, 0.2);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 40px;
    padding: 10px 20px 10px 16px;
    color: var(--neon-green);
    font-family: var(--font-tech); font-size: 1rem; letter-spacing: 1px;
    cursor: none;
    text-shadow: 0 0 10px var(--neon-green);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.gallery-return-btn:hover {
    transform: scale(1.06);
    background: linear-gradient(135deg, rgba(48, 255, 102, 0.38) 0%, rgba(48, 255, 102, 0.14) 45%, rgba(48, 255, 102, 0.3) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -6px 10px -7px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(48, 255, 102, 0.5);
}
.return-arrow {
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.gallery-return-btn:hover .return-arrow {
    animation: returnArrowNudge 0.5s ease-in-out infinite alternate;
}
@keyframes returnArrowNudge {
    0% { transform: translateX(0); }
    100% { transform: translateX(-5px); }
}

/* Mur façon Pinterest : toutes les images et vidéos de la catégorie, mélangées, sans recadrage.
   Grille "masonry" : la hauteur de chaque case suit le format réel du média (voir script.js),
   un média large (16:9+) prend 2 colonnes pour rester lisible.
   Nombre de colonnes selon le format d'écran plutôt que la seule largeur. */
.pinterest-wall {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* écran plutôt carré */
    grid-auto-rows: 4px;
    gap: 16px;
    width: 100%; max-width: 1800px; margin: 0 auto;
    transition: filter 0.4s ease;
}
.pinterest-wall.blurred {
    filter: blur(30px) brightness(0.35);
    pointer-events: none;
}
@media (min-aspect-ratio: 4/3) {
    .pinterest-wall { grid-template-columns: repeat(7, 1fr); } /* écran large 16:9 */
}
@media (max-aspect-ratio: 3/4) {
    .pinterest-wall { grid-template-columns: repeat(2, 1fr); } /* smartphone 9:16 */
}
.wall-tile {
    position: relative;
    width: 100%;
    grid-row-end: span 60; /* valeur de départ, ajustée en JS une fois le média chargé */
    border-radius: 8px;
    overflow: hidden;
    cursor: none;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.25s ease;
}
.wall-tile:hover {
    transform: scale(1.02);
}
.wall-tile img, .wall-tile video {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Vue focus : média sélectionné en grand + reste du projet en carrousel, par-dessus le mur flouté.
   Une seule mise en page en colonne pour tous les écrans (juste les tailles s'adaptent via clamp/vw/vh) :
   avant, une mise en page bureau (rangée) et une mise en page mobile (colonne) totalement différentes
   se cassaient l'une sans casser l'autre à chaque retouche. "overflow-y: auto" en filet de sécurité :
   si le contenu (long titre/description) dépasse quand même la hauteur d'écran, il devient scrollable
   au lieu d'être rogné. */
.focus-overlay {
    position: fixed; inset: 0;
    /* Doit passer au-dessus du header (z-index: 6) : sinon le gros titre bioluminescent
       (plus haut que l'ancien header compact) se retrouve rendu par-dessus l'image/la vidéo. */
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2.5vh, 26px);
    /* Padding du haut généreux et responsive : laisse toujours assez de place sous le header,
       quelle que soit sa hauteur réelle (titre + sous-titre) sur le viewport courant. */
    padding: clamp(130px, 19vh, 210px) 5vw 30px;
    opacity: 0;
    transition: opacity 0.35s ease;
    overflow-y: auto;
}
.focus-overlay.open {
    display: flex;
    opacity: 1;
}
.focus-main {
    width: 100%;
    max-width: 720px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.focus-main img, .focus-main video {
    max-width: 100%;
    max-height: clamp(220px, 46vh, 560px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}
.focus-info {
    width: 100%;
    max-width: 720px;
    flex: 0 0 auto;
    text-align: center;
}
.focus-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    letter-spacing: 1px;
    color: var(--white);
    text-transform: uppercase;
}
.focus-desc {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: #ccc;
    margin-top: 8px;
}
/* Carrousel horizontal "tambour" 3D pour le reste du groupe (façon gabrielbeaugonin.com) :
   les cases sont disposées autour d'un axe vertical, celle du centre est nette et de face,
   les autres s'inclinent (rotateY) et rétrécissent en s'éloignant. Molette ou swipe tactile
   horizontal pour faire tourner. */
.focus-carousel {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: clamp(130px, 20vh, 220px);
    flex: 0 0 auto;
    perspective: 1300px;
    cursor: none;
    overflow: hidden;
}
.focus-carousel-track {
    position: relative;
    width: 100%; height: 100%;
    list-style: none;
    margin: 0; padding: 0;
    transform-style: preserve-3d;
}
.focus-carousel-item {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--carousel-item-w, 150px);
    height: var(--carousel-item-w, 150px);
    margin-left: calc(var(--carousel-item-w, 150px) / -2);
    margin-top: calc(var(--carousel-item-w, 150px) / -2);
    border-radius: 14px;
    overflow: hidden;
    cursor: none;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    transform-origin: center center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.focus-carousel-item img, .focus-carousel-item video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.focus-carousel-item.active {
    border: 2px solid rgba(255, 255, 255, 0.95);
    animation: carouselActiveGlow 2.2s ease-in-out infinite;
}
@keyframes carouselActiveGlow {
    0%, 100% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
            0 0 12px rgba(255, 255, 255, 0.8),
            0 0 26px rgba(48, 255, 102, 0.55),
            0 0 40px rgba(114, 31, 255, 0.4);
    }
    50% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
            0 0 18px rgba(255, 255, 255, 0.95),
            0 0 36px rgba(114, 31, 255, 0.6),
            0 0 54px rgba(48, 255, 102, 0.45);
    }
}

/* Sur petit écran, le header restait en rangée (titre+sous-titre à gauche, RETOUR à droite) :
   le sous-titre n'avait qu'une étroite colonne pour lui, et se retrouvait à retourner à la
   ligne sur 5-6 lignes minuscules. On empile à la place, et on plafonne le sous-titre à
   2 lignes (avec "..." si besoin) pour rester lisible et propre. */
@media (max-width: 700px) {
    .gallery-modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 20px 16px;
    }
    .gallery-modal-title-group {
        width: 100%;
    }
    .gallery-modal-subtitle {
        font-size: 0.72rem;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .gallery-return-btn {
        align-self: flex-end;
    }
}

/* Marquee Logos (Bandeau fin ancré en bas de l'écran) */
/* BANDEAU FIN AVEC DÉGRADÉ ET FLOU EN HAUT */
.logos-marquee {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 180px; /* Hauteur fixe compacte */
    display: flex;
    align-items: center;
    /* Dégradé : Noir pur en bas, transparent en haut */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%, #000000 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Masque de transition douce sur le bord supérieur du bandeau */
    mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
    overflow: hidden;
    opacity: 0;
    z-index: 7;
    pointer-events: auto;
}

.marquee-track {
    display: flex; gap: 80px; width: max-content;
    /* Le défilement est piloté en JS (requestAnimationFrame), pas par une animation CSS en boucle :
       une animation CSS qui boucle sur elle-même provoque un micro-à-coup perceptible à chaque
       redémarrage d'itération. Voir initSmoothMarquee() dans script.js. */
    will-change: transform;
}

/* Logos plus petits pour tenir dans le bandeau fin */
/* CONTENEUR ET LOGOS */
.logo-item-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-logo {
    height: 110px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    will-change: transform;
}

/* HALO NÉON BASÉ SUR LA COULEUR RÉELLE DU LOGO (OLED LIGHT) — derrière le logo net */
/* Le filtre (blur/saturate/brightness) reste FIXE : ré-animer un filtre coûteux sur les 34 halos
   à la fois (un par logo, x2 pour la boucle infinie) en même temps que le défilement provoquait
   des à-coups de repaint périodiques. Seule l'opacité respire désormais (compositing pur, sans repaint). */
.logo-glow-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Le blur + la saturation projettent la vraie couleur de l'image en halo */
    filter: blur(12px) saturate(260%) brightness(1.25);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
    animation: oledGlowPulse 3s ease-in-out infinite alternate;
    will-change: opacity;
}

@keyframes oledGlowPulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

/* Logo LWDJ : léger balancement sur lui-même avec une traînée d'aberration chromatique vert/violet fluo */
.lwdj-tracking-logo {
    transform-origin: center center;
    animation: lwdjSwing 4.5s ease-in-out infinite;
}
@keyframes lwdjSwing {
    0%   { transform: rotate(-14deg); filter: drop-shadow(7px 0 5px rgba(48, 255, 102, 0.6)) drop-shadow(-7px 0 5px rgba(114, 31, 255, 0.6)); }
    50%  { transform: rotate(14deg);  filter: drop-shadow(-7px 0 5px rgba(48, 255, 102, 0.6)) drop-shadow(7px 0 5px rgba(114, 31, 255, 0.6)); }
    100% { transform: rotate(-14deg); filter: drop-shadow(7px 0 5px rgba(48, 255, 102, 0.6)) drop-shadow(-7px 0 5px rgba(114, 31, 255, 0.6)); }
}