:root{--c-dark:#050208;--c-dark-card:#0d0a11;--c-orange:#F2441D;--c-gold:#E69724;--c-klein:#002FA7;--c-purple:#9b51e0;--c-creme:#F0E8D8;--c-text-sec:#808080;--f-disp:"Bricolage Grotesque",sans-serif;--f-sans:"Manrope",sans-serif;--f-serif:"Playfair Display",serif;--f-hand:"Caveat",cursive;--ease:cubic-bezier(0.16,1,0.3,1);--chameleon-palette:linear-gradient(90deg,#CC5500,#E2725B,#FFA500,#FFB347,#FFD700,#D4C96A,#C7EA46,#9FFF00,#8DB600,#77DD77,#9CAF88,#8A9A5B,#6B8E23,#808000,#228B22,#0B3D0B,#228B22,#808000,#6B8E23,#8A9A5B,#9CAF88,#77DD77,#8DB600,#9FFF00,#C7EA46,#D4C96A,#FFD700,#FFB347,#FFA500,#E2725B,#CC5500);--chameleon-blocks:linear-gradient(90deg,#CC5500 0%,#CC5500 12.5%,#E69724 12.5%,#E69724 25%,#C7EA46 25%,#C7EA46 37.5%,#6B8E23 37.5%,#6B8E23 50%,#0B3D0B 50%,#0B3D0B 62.5%,#002FA7 62.5%,#002FA7 75%,#9b51e0 75%,#9b51e0 87.5%,#F2441D 87.5%,#F2441D 100%);--scales-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M-7 10 Q-3.5 3 0 10 T7 10 T14 10 T21 10' fill='none' stroke='rgba(0,0,0,0.4)' stroke-width='.7'/%3E%3Cpath d='M-7 5 Q-3.5 -2 0 5 T7 5 T14 5 T21 5' fill='none' stroke='rgba(0,0,0,0.28)' stroke-width='.6'/%3E%3C/svg%3E")}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--c-dark)}
body{font-family:var(--f-sans);color:#fff;font-size:.9375rem;line-height:1.6;overflow-x:hidden;background:var(--c-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1400px;margin:0 auto;padding:0 clamp(20px,5vw,60px);position:relative;z-index:2}

/* Curseur custom */
@media(pointer:fine){body,a,button,input,textarea,label,.portfolio-card,.marquee-track img,.prest-wrapper,.prisme-item{cursor:none!important}}
.custom-cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:#fff;border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),border .3s var(--ease);display:flex;justify-content:center;align-items:center}
.cursor-trail{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid rgba(255,255,255,.3);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:opacity .3s var(--ease),border-color .3s var(--ease), transform 0.1s linear}
.cursor-trail.hidden{opacity:0}
.custom-cursor.link-hover{background:var(--c-orange);width:12px;height:12px;box-shadow:0 0 10px rgba(242,68,29,.5)}
.cursor-trail.link-hover{border-color:rgba(242,68,29,.5)}
.custom-cursor.video-hover,.custom-cursor.prest-hover{width:64px;height:64px;background:#FF4E2E;box-shadow:0 0 30px rgba(255,78,46,.55),inset 0 0 10px rgba(255,106,80,.5)}
.cursor-text{color:#fff;font-family:var(--f-sans);font-size:.8rem;font-weight:800;letter-spacing:.1em;opacity:0;transition:opacity .3s;display:none;text-align:center}
.custom-cursor.video-hover .cursor-text,.custom-cursor.prest-hover .cursor-text{opacity:1;display:block;font-size:.5rem;line-height:1.1;letter-spacing:.08em}
.custom-cursor.prisme-hover { width: 75px; height: 75px; background: rgba(0,0,0,0.2); backdrop-filter: blur(4px); border: 2px solid var(--prisme-c, var(--c-orange)); box-shadow: 0 0 20px var(--prisme-c, var(--c-orange)), inset 0 0 10px rgba(255,255,255,0.1); }
.custom-cursor.prisme-hover .cursor-text { opacity: 1; display: block; font-size: 0.55rem; line-height: 1.1; letter-spacing: 0.15em; color: var(--prisme-c, var(--c-orange)); text-shadow: 0 0 5px var(--prisme-c, var(--c-orange)); }

/* Ambiance Cinématique */
.cinematic-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0c0814}
.ambient-blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;z-index:1}
.blob-klein{width:45vw;height:45vw;background:var(--c-klein);top:-5%;right:-10%;opacity:.45;animation:driftKlein 30s infinite alternate ease-in-out}
.blob-orange{width:40vw;height:40vw;background:var(--c-orange);bottom:-10%;left:-5%;opacity:.35;animation:driftOrange 25s infinite alternate-reverse ease-in-out}
.blob-gold{width:35vw;height:35vw;background:var(--c-gold);top:35%;left:25%;opacity:.25;animation:driftGold 35s infinite alternate ease-in-out}
@keyframes driftKlein{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8vw,8vh) scale(1.1)}}
@keyframes driftOrange{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,-6vh) scale(1.2)}}
@keyframes driftGold{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6vw,6vh) scale(.9)}}
.cinematic-glass-overlay{position:absolute;inset:0;z-index:2;backdrop-filter:blur(80px);-webkit-backdrop-filter:blur(80px);background:rgba(18,12,28,.3)}
.glass-section{background:rgba(10,8,15,.1);position:relative;z-index:2}

/* --- NAVIGATION REFONDUE --- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:30px 0 20px 0 !important;background-color:transparent;border-bottom:1px solid transparent;transition:background-color .6s var(--ease),backdrop-filter .6s var(--ease),padding .6s var(--ease),border-color .6s var(--ease);color:#fff}
nav.scrolled{padding:15px 0 !important;background-color:rgba(5,2,8,.85);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom-color:rgba(255,255,255,.05)}
.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 clamp(20px,4vw,60px);transition:transform .6s var(--ease)}
.nav-brand{display:flex;align-items:center;}

.nav-logo-k {
    font-family: var(--f-disp);
    font-weight: 900;
    font-size: 2.8rem;
    line-height: 1;
    color: #fff;
    letter-spacing: 0;
    position: relative;
    transition: transform .5s var(--ease), text-shadow .6s var(--ease), filter .6s var(--ease);
}
.nav-logo-k:hover {
    transform: scale(1.05);
    text-shadow:
        -1.5px 0 6px rgba(0, 220, 255, .55),
         1.5px 0 6px rgba(255, 40, 200, .55),
         0 0 14px rgba(230, 151, 36, .35);
    filter: drop-shadow(0 0 6px rgba(255,255,255,.15));
}

.nav-links{display:flex;gap:2rem;align-items:center;}
.nav-links a:not(.btn){
    position:relative;
    font-size:.8125rem;
    font-weight:700;
    padding:8px 0;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#fff;
    background: linear-gradient(90deg, #fff, #fff, var(--c-orange), var(--c-gold), #fff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: 0% 0%;
    transition: background-position 0.6s var(--ease);
}
.nav-links a:not(.btn):hover {
    background-position: 100% 0%;
}

/* ============================================
   CTA PREMIUM — Orange vif #FF4E2E
   ============================================ */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 2.2rem;
    font-family: var(--f-sans);
    font-weight: 700;
    border-radius: 12px;
    border: none;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .06em;
    text-align: center;
    cursor: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    will-change: transform;
    transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease),
        background-position .9s var(--ease),
        filter .4s var(--ease);
}
.btn:focus-visible{
    outline: 2px solid #FF4E2E;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(255,78,46,.25);
}
.btn:active{
    transform: translateY(0) scale(.97);
    transition-duration: .12s;
}

/* ---- CTA PRIMAIRE : Orange vif, gradient animé + light sweep ---- */
.btn-primary{
    background: linear-gradient(135deg,
        #FF4E2E 0%,
        #FF6B50 45%,
        #FF8A72 55%,
        #FF4E2E 100%);
    background-size: 220% auto;
    background-position: 0% center;
    color: #fff !important;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 18px -4px rgba(255,78,46,.45),
        0 2px 6px rgba(0,0,0,.15);
    animation: orangeBreathe 7s ease-in-out infinite;
}
@keyframes orangeBreathe {
    0%,100% { background-position: 0% center; }
    50%     { background-position: 100% center; }
}
/* Light sweep — reflet doré qui passe au hover */
.btn-primary::before{
    content:"";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255,255,255,.55) 50%,
        transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s var(--ease);
    pointer-events: none;
    z-index: 1;
}
.btn-primary > *{ position: relative; z-index: 2; }
.btn-primary:hover{
    transform: translateY(-2px);
    background-position: 100% center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 12px 28px -6px rgba(255,78,46,.6),
        0 4px 10px rgba(0,0,0,.18);
    color: #fff !important;
}
.btn-primary:hover::before{
    transform: translateX(120%);
}
.btn-primary:active{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 3px 8px -2px rgba(255,78,46,.4);
}

/* ---- CTA SECONDAIRE : même famille Orange, discret (outline + fond léger) ---- */
.btn-outline{
    background: rgba(255,78,46,.07);
    color: #FF8A72;
    border: 1px solid rgba(255,78,46,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 2px 10px -4px rgba(0,0,0,.3);
}
.btn-outline::before{
    content:"";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        #FF4E2E 0%,
        #FF6B50 50%,
        #FF4E2E 100%);
    background-size: 220% auto;
    opacity: 0;
    transition: opacity .5s var(--ease);
    z-index: -1;
}
.btn-outline:hover{
    color: #fff;
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        0 10px 24px -6px rgba(255,78,46,.4);
}
.btn-outline:hover::before{
    opacity: 1;
    animation: orangeBreathe 7s ease-in-out infinite;
}

/* --- SECTION HERO REFONDUE --- */
.hero {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background: transparent;
    z-index: 10;
    overflow: hidden;
}
/* ─────────────────────────────────────────────────────────────
   SECTION HERO — Smart Poster Overlay
   Stratégie anti-flash noir en 3 couches (z-index croissant) :
     z-index 1 → iframe Vimeo (fond, pointer-events:none)
     z-index 3 → hero-overlay (dégradé sombre permanent)
     z-index 5 → hero-poster-overlay (poster HD, disparaît via JS)
     z-index 10 → hero-content (texte et CTAs)
   ───────────────────────────────────────────────────────────── */
.hero-video-wrap {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: 24px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Couleur de fond de dernier recours (ne doit jamais être visible) */
    background-color: #030105;
    box-shadow:
        0 20px 60px -20px rgba(0,0,0,.55),
        0 8px 24px -12px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
    transition: box-shadow .6s var(--ease);
}
.hero-video-wrap:hover {
    box-shadow:
        0 28px 70px -20px rgba(0,0,0,.65),
        0 12px 32px -12px rgba(0,0,0,.45);
}

/*
 * IFRAME HERO — object-fit: cover simulé pour iframes.
 *
 * L'iframe Vimeo ignore object-fit, on utilise donc la technique
 * du centrage absolu avec min-width/min-height calculés depuis le ratio 16/9 :
 *   min-width:  177.78vh  = (16/9) × 100vh  → couvre les écrans hauts/portrait
 *   min-height: 56.25vw   = (9/16) × 100vw  → couvre les écrans larges/paysage
 *
 * Le scale(1.04) supprime d'éventuels artefacts de 1px sur les bords
 * qui peuvent apparaître selon les navigateurs/GPU.
 *
 * overflow:hidden sur .hero-video-wrap recadre ce qui dépasse → couverture totale.
 */
.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 177.78vh;
    min-height: 56.25vw;
    transform: translate(-50%, -50%) scale(1.04);
    z-index: 1;
    pointer-events: none;
    border: none;
    /* Vidéo neutre, sans filtre — rendu d'origine */
}


.hero-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    background: radial-gradient(circle at center, rgba(5,2,8,0.10) 0%, rgba(5,2,8,0.42) 100%);
}
.hero-content{
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-content > .hero-eyebrow{
    position: absolute;
    top: clamp(80px, 10vh, 130px);
    left: 50%;
    transform: translateX(-50%);
}
.hero-content > .hero-actions{
    position: absolute;
    bottom: clamp(60px, 8vh, 110px);
    left: 50%;
    transform: translateX(-50%);
}
.hero-eyebrow{
    width: auto;
    font-family: var(--f-sans);
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--c-creme);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: default;
    padding: 2px 0;
}
.eyebrow-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.35rem;
    line-height:1.35;
    text-align:center;
}
.eyebrow-line {
    display: block;
    height: 2px;
    width: 0px; 
    border-radius: 2px;
    background-size: 300% 100%;
    background-position: 50% 50%;
    box-shadow: 0 0 8px rgba(242,68,29,.2);
    transition:
        width .7s var(--ease),
        box-shadow .7s var(--ease),
        filter .7s var(--ease);
}
/* DEMANDE 4 : fade harmonieux côté extérieur, symétrique sur les 2 côtés */
.eyebrow-line-left {
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
            mask-image: linear-gradient(to left, #000 30%, transparent 100%);
}
.eyebrow-line-right {
    -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 100%);
            mask-image: linear-gradient(to right, #000 30%, transparent 100%);
}
.eyebrow-line.eyebrow-line-left {
    --c1:#FFA500;
    --c2:#8DB600;
    background-image: linear-gradient(90deg, var(--c1), var(--c2));
    animation: chameleonDuo 32s linear infinite;
    /* Fade vers l'EXTÉRIEUR (gauche), plein vers le texte */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 70%, #000 100%);
}
.eyebrow-line.eyebrow-line-right {
    --c1:#FFA500;
    --c2:#8DB600;
    background-image: linear-gradient(90deg, var(--c1), var(--c2));
    /* animation-delay négatif → cycle inversé pour un effet miroir avec le trait gauche */
    animation: chameleonDuo 32s linear -16s infinite;
    /* Fade vers l'EXTÉRIEUR (droite), plein vers le texte */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
}

.hero-eyebrow:hover .eyebrow-line-left  { animation: shimmerLeft  2.4s ease-in-out infinite; }
.hero-eyebrow:hover .eyebrow-line-right { animation: shimmerRight 2.4s ease-in-out infinite; }

@keyframes shimmerLeft {
    0%   { background-position: 300% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes shimmerRight {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.hero-eyebrow:hover .eyebrow-line {
    width: 64px !important;
    box-shadow:
        0 0 12px rgba(242,68,29,.45),
        0 0 28px rgba(155,81,224,.25);
    filter: brightness(1.2);
}
.hero-eyebrow:hover {
    animation: eyebrowBreathe 2.4s ease-in-out infinite;
}
@keyframes eyebrowBreathe {
    0%,100% { letter-spacing: .2em; }
    50%     { letter-spacing: .24em; }
}

.hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}
.ht-wrapper {
    position: relative;
    display: inline-block;
    font-family: var(--f-disp);
    font-weight: 800;
    font-size: clamp(5rem, 14vw, 13rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}

/* Squelette fantôme — invisible au rendu, sert uniquement à figer la taille */
.ht-ghost {
    display: block;
    color: transparent;
}
/* Calque couleur — se superpose au fantôme, se révèle L→R, puis cycle chromatique infini */
/* Titre KAMÉLÉON — dégradé bi-color fluide entre 2 teintes qui morphent en cycle */
@property --c1 {syntax:'<color>';initial-value:#FFA500;inherits:false;}
@property --c2 {syntax:'<color>';initial-value:#8DB600;inherits:false;}
.ht-fill {
    position: absolute;
    inset: 0;
    display: block;
    --c1:#FFA500;
    --c2:#8DB600;
    background-image: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    clip-path: inset(0 100% 0 0);
    animation:
        ht-fill-reveal 2s cubic-bezier(.45,.05,.25,1) forwards,
        chameleonDuo 32s linear 2s infinite;
}
@keyframes ht-fill-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0   0% 0 0); }
}
/* Cycle bi-color : c1 et c2 morphent en douceur, toujours offset de 8 teintes (warm/cool dynamique) */
@keyframes chameleonDuo {
    0%      { --c1:#FFA500; --c2:#8DB600; }
    6.25%   { --c1:#FFB347; --c2:#77DD77; }
    12.5%   { --c1:#CC5500; --c2:#9CAF88; }
    18.75%  { --c1:#E2725B; --c2:#6B8E23; }
    25%     { --c1:#FFD700; --c2:#808000; }
    31.25%  { --c1:#D4C96A; --c2:#8A9A5B; }
    37.5%   { --c1:#C7EA46; --c2:#228B22; }
    43.75%  { --c1:#9FFF00; --c2:#0B3D0B; }
    50%     { --c1:#8DB600; --c2:#FFA500; }
    56.25%  { --c1:#77DD77; --c2:#FFB347; }
    62.5%   { --c1:#9CAF88; --c2:#CC5500; }
    68.75%  { --c1:#6B8E23; --c2:#E2725B; }
    75%     { --c1:#808000; --c2:#FFD700; }
    81.25%  { --c1:#8A9A5B; --c2:#D4C96A; }
    87.5%   { --c1:#228B22; --c2:#C7EA46; }
    93.75%  { --c1:#0B3D0B; --c2:#9FFF00; }
    100%    { --c1:#FFA500; --c2:#8DB600; }
}

/* --- ANIMATION CAMÉLÉON BI-COLOR DUO — système harmonisé sur tout le site --- */
/* Réalisations, ADN, etc. — gradient bi-color text */
.chameleon-text {
    --c1: #FFA500;
    --c2: #8DB600;
    background-image: linear-gradient(135deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: chameleonDuo 32s linear infinite;
    filter: drop-shadow(0 2px 20px rgba(255, 255, 255, 0.08));
}
/* Compat ancien keyframe (utilisé ailleurs encore) */
@keyframes chameleonSpectrum {
    from { background-position:   0% center; }
    to   { background-position: 300% center; }
}

.gradient-text {
    background-image: linear-gradient(90deg,
        var(--c-gold),
        var(--c-orange),
        var(--c-purple),
        var(--c-klein),
        var(--c-gold));
    background-size: 200vw 100%;
    background-repeat: repeat-x;
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientMove 12s linear infinite;
}
@keyframes gradientMove {
    from { background-position: 0 center; }
    to   { background-position: -200vw center; }
}

.gradient-text--local {
    background-image: linear-gradient(90deg,
        var(--c-gold),
        var(--c-orange),
        var(--c-purple),
        var(--c-klein),
        var(--c-gold));
    background-size: 200% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientMoveLocal 6s linear infinite;
}
@keyframes gradientMoveLocal {
    from { background-position: 0% center; }
    to   { background-position: -200% center; }
}

.hero-actions{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.hero-actions .btn{padding:1rem 2.2rem;}

/* Clients Marquee */
.marquee-section{padding:5rem 0 10rem 0;overflow:hidden}
.marquee-intro{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 1.5rem;
}
/* Titre unique "+350 projets réalisés" — typographie .pt-solid + coloris/effet orange du CTA .btn-primary (clippé sur le texte) */
.marquee-title-text {
    display: block;
    font-family: var(--f-disp);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    background: linear-gradient(135deg,
        #FF4E2E 0%,
        #FF6B50 45%,
        #FF8A72 55%,
        #FF4E2E 100%);
    background-size: 220% auto;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: orangeBreathe 7s ease-in-out infinite;
    filter: drop-shadow(0 2px 10px rgba(255,78,46,.45));
}

/* Marquee logos — boucle infinie parfaite */
.marquee-container-infinite{
    overflow: hidden;
    width: 100%;
}
.marquee-inner{
    display: flex;
    width: max-content;
    flex-shrink: 0;
    will-change: transform;
    animation: marquee-perfect 40s linear infinite;
}
.marquee-inner:hover{ animation-play-state: paused; }
.marquee-track{display:flex;align-items:center;gap:5rem;padding-right:5rem;flex-shrink:0}
.marquee-track img{width:140px;height:40px;object-fit:contain;flex-shrink:0;filter:grayscale(100%) brightness(200%) opacity(.3);transition:all .4s var(--ease)}
.marquee-track img:hover{filter:grayscale(0%) brightness(100%) opacity(.8);transform:scale(1.05)}
/* Translate de exactement -50% = largeur d'un seul track → rebouclage parfait */
@keyframes marquee-perfect{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Réalisations / GSAP Scroll Section */
.mutation-section{background:var(--c-dark);color:#fff;padding:6vw 0 3vw 0;position:relative;z-index:20;overflow:hidden;clip-path:polygon(0 5vw,100% 0,100% calc(100% + 1px),0 calc(100% + 1px));margin-top:-5vw;margin-bottom:-1px}
.mutation-pin{width:100%;display:flex;flex-direction:column;justify-content:center;position:relative}
.m-content-viewport{position:relative;width:100%;overflow:hidden;padding-bottom:0}
.m-content-track{display:flex;flex-wrap:nowrap;width:max-content;align-items:center;will-change:transform}
.m-panel{width:100vw;flex:0 0 100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 clamp(20px,4vw,60px)}
.m-panel.m-panel-services{padding:0 clamp(10px,2vw,30px)}
.m-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2rem;width:100%;max-width:1400px;margin-bottom:3rem}
.m-header-left{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.pt-solid{font-family:var(--f-disp);font-size:clamp(2rem,4vw,4rem);font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.pt-elegant{font-family:var(--f-hand);font-weight:700;font-size:clamp(3rem,6vw,6rem);line-height:1;--c1:#FFA500;--c2:#8DB600;background-image:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:chameleonDuo 32s linear infinite;transform:rotate(-3deg);display:inline-block;margin-left:0;padding:.18em .18em 0 0;position:relative;top:0}
/* .chameleon-text combiné à .pt-elegant : harmonisation déjà héritée du sélecteur de base */
.pt-elegant.chameleon-text{color:transparent;-webkit-text-fill-color:transparent}

/* ── Grille Réalisations ─────────────────────────────────────── */
.portfolio-grid-fw{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;width:100%;max-width:1400px}
.portfolio-card{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-dark-card);border-radius:12px;transition:all .5s var(--ease);transform:translateZ(0);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);opacity:.8;filter:saturate(.8)}
.portfolio-card:hover{box-shadow:0 0 30px rgba(242,68,29,.4),0 0 60px rgba(230,151,36,.2);transform:translateY(-5px) translateZ(0);z-index:10}
.portfolio-card:hover img{transform:scale(1.05);filter:saturate(1.2);opacity:1}

/* Overlay info — visible au hover uniquement */
.portfolio-card-info{
    position:absolute;inset:0;
    padding:2rem 2rem;
    background:linear-gradient(to top,rgba(0,47,167,.55) 0%,transparent 65%);
    display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    opacity:0;transition:opacity .5s var(--ease);
}
.portfolio-card:hover .portfolio-card-info{opacity:1}
.portfolio-card-info>*{transform:translateY(12px);transition:transform .4s var(--ease)}
.portfolio-card:hover .portfolio-card-info>*{transform:translateY(0);color:#fff}

/* Badge catégorie — dégradé caméléon animé (fil rouge global, Live, Brand Content, Événementiel, Social Media, etc.) */
.p-badge{
    --c1: #FFA500;
    --c2: #8DB600;
    background-color: transparent;
    background-image: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    padding: 4px 14px;
    border-radius: 99px;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,.35);
    animation: chameleonDuo 32s linear infinite;
    flex-shrink: 0;
}

/*
 * Titre client — augmenté à 1.75rem, monoligne garanti.
 * white-space:nowrap + overflow:hidden + text-overflow:ellipsis
 * empêchent tout retour à la ligne même sur les titres longs.
 */
.portfolio-card-info h4{
    font-family: var(--f-disp);
    font-size: 1.75rem;
    margin-bottom: 0;
    letter-spacing: .01em;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =====================================================
   PRESTATIONS v6 — Overlay pur style Apple
   Le conteneur est en aspect-ratio:16/9 avec overflow:hidden.
   Les vidéos sont en position:absolute et couvrent tout (object-fit:cover).
   Les boutons-pilules flottent PAR-DESSUS via position:absolute z-index:10.
   ===================================================== */

/* Panel : marges généreuses autour du module */
#prestations.m-panel{
  padding: clamp(32px,5vh,72px) clamp(24px,6vw,80px);
  width:100%;
}

/* Conteneur principal : 16:9 strict, centré, avec marges */
.prest-wrapper{
  position:relative;
  width:100%;
  max-width:1300px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  background:#000;
}

/* Suppression du label "Notre savoir-faire" */
.prest-label{ display:none; }

/* --- VIDÉOS : fond absolu couvrant tout le conteneur --- */
.prest-video-col{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

.prest-video-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .75s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:1;
  border:none;
}
.prest-video-layer.active{
  opacity:1;
  z-index:2;
}

/* --- DÉGRADÉ de lisibilité derrière les boutons --- */
.prest-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(
    to right,
    rgba(3,1,5,.72) 0%,
    rgba(3,1,5,.45) 32%,
    transparent 58%
  );
}

/* --- NAV : pilules flottantes PAR-DESSUS la vidéo --- */
.prest-nav{
  position:absolute;
  top:50%;
  left:clamp(28px,5%,56px);
  transform:translateY(-50%);
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(.65rem,.9vw,1rem);
}

/* --- BOUTONS PILULES --- */
.prest-btn{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:clamp(.65rem,.9vw,1rem) clamp(1rem,1.6vw,1.6rem);
  border-radius:99px;
  width:max-content;
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(.9rem,1.3vw,1.25rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  will-change:transform;
  /* État inactif — glassmorphisme discret */
  background:rgba(10,8,15,.45);
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 14px -4px rgba(0,0,0,.55);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    color .3s var(--ease),
    border-color .3s var(--ease),
    background .3s var(--ease);
  white-space:nowrap;
}

/* Fond orange animé caché (pseudo) */
.prest-btn::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 45%,#FF8A72 55%,#FF4E2E 100%);
  background-size:220% auto;
  opacity:0;
  z-index:-1;
  transition:opacity .45s var(--ease);
}
/* Reflet lumineux au hover/actif */
.prest-btn::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
  pointer-events:none;
  z-index:1;
}

.prest-btn:hover{
  color:#fff;
  transform:translateX(6px);
  background:rgba(10,8,15,.6);
  border-color:rgba(255,255,255,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 22px -6px rgba(0,0,0,.6);
}
.prest-btn:hover::before{ opacity:.4; }
.prest-btn:hover::after{ transform:translateX(120%); }

.prest-btn.active{
  color:#fff !important;
  border-color:transparent;
  transform:translateX(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 14px 36px -8px rgba(255,78,46,.65),
    0 4px 10px rgba(0,0,0,.3);
  animation:orangeBreathe 7s ease-in-out infinite;
}
.prest-btn.active::before{
  opacity:1;
  animation:orangeBreathe 7s ease-in-out infinite;
}
.prest-btn.active::after{ transform:translateX(120%); }

/* Point LIVE pulsant */
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--c-orange);
  flex-shrink:0;
  animation:livePulse 1.6s ease-in-out infinite;
}
.prest-btn.active .live-dot{
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.6);
}
@keyframes livePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,68,29,.8); }
  55%    { box-shadow:0 0 0 8px rgba(242,68,29,0); }
}

/* Badge NEW */
.badge-new{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:99px;
  font-family:var(--f-sans);
  font-size:.52rem;font-weight:900;letter-spacing:.1em;
  background:var(--c-orange);color:#fff;
  box-shadow:0 2px 10px rgba(242,68,29,.5);
  flex-shrink:0;line-height:1.4;
  transition:background .3s,box-shadow .3s;
}
.prest-btn.active .badge-new{
  background:#fff;color:var(--c-orange);
  box-shadow:0 2px 10px rgba(255,255,255,.3);
}

/* Mobile */
@media(max-width:768px){
  #prestations.m-panel{ padding:20px 12px; }
  .prest-wrapper{
    aspect-ratio:auto;
    min-height:480px;
    border-radius:18px;
  }
  .prest-nav{
    left:16px;
    gap:.55rem;
  }
  .prest-btn{
    font-size:clamp(.78rem,3.8vw,.95rem);
    padding:.6rem 1rem;
  }
}

/* Modal Vidéo */
.video-modal{position:fixed;inset:0;z-index:200;background:rgba(3,1,5,.98);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.4s ease}
.video-modal.active{opacity:1;pointer-events:all}
.video-modal-content{position:relative;width:95%;max-width:1400px;background:#08050c;display:grid;grid-template-columns:1.8fr 1fr;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.8);transform:scale(.95);transition:.5s var(--ease);border:1px solid rgba(255,255,255,.1)}
.video-modal.active .video-modal-content{transform:scale(1)}
.modal-left-video{width:100%;aspect-ratio:16/9;background:#000;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}
.modal-left-video video{width:100%;height:100%;object-fit:cover;border:none;outline:none;background:#000}
#modalVideoContainer{position:absolute;inset:0;width:100%;height:100%}
#modalVideoContainer iframe{width:100%;height:100%;border:none;display:block}
/* Couche transparente par-dessus l'iframe : capte les mousemove pour le curseur
   mais laisse passer les clics vers la vidéo via pointer-events:none */
.modal-iframe-guard{position:absolute;inset:0;z-index:2;pointer-events:none;cursor:none}
.modal-right-info{padding:4rem 3rem;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent);color:#fff;position:relative;z-index:5}
.modal-badge{--c1:#FFA500;--c2:#8DB600;background-color:transparent;background-image:linear-gradient(135deg,var(--c1),var(--c2));animation:chameleonDuo 32s linear infinite;display:inline-block;padding:6px 14px;border-radius:50px;font-size:.7rem;color:#fff;font-weight:800;text-transform:uppercase;margin-bottom:1.5rem;width:max-content;box-shadow:0 4px 15px rgba(0,0,0,.35)}
.modal-right-info h3{font-family:var(--f-disp);font-size:2.5rem;margin-bottom:1.5rem;line-height:1.1}
.modal-right-info p{color:rgba(255,255,255,.7);font-size:.95rem;margin-bottom:2.5rem;line-height:1.7}
.modal-actions{display:flex;gap:1rem;flex-wrap:wrap}
.modal-actions .btn{padding:1rem 1.5rem;font-size:.75rem}
.close-modal{position:absolute;top:1.5rem;right:2rem;color:rgba(255,255,255,.5);font-size:2.5rem;font-weight:300;background:none;border:none;transition:.2s;z-index:10;cursor:pointer}
.close-modal:hover{color:#fff;transform:scale(1.1)}

/* --- SECTION ÉQUIPE --- */
#agence { background-color: var(--c-creme); padding: 2vw 0 6vw 0; position: relative; overflow: hidden; z-index: 5; }
#agence .eq-grid { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); position: relative; }
#agence .eq-title-col { position: absolute; left: 50%; top: 12%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; width: 100%; pointer-events: none; }
#agence .agence-title-t1 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(3.5rem, 8vw, 8rem); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; color: var(--c-orange); display: block; text-align: center; text-shadow: 0 4px 25px rgba(240, 232, 216, 0.9), 0 0 15px rgba(255,255,255,0.6); }
#agence .agence-title-t2 { font-family: var(--f-hand); font-weight: 700; font-size: clamp(3.5rem, 8vw, 8rem); line-height: .8; color: var(--c-dark); display: inline-block; margin: -1rem auto 0; transform: rotate(-3deg); text-align: center; text-shadow: 0 4px 25px rgba(240, 232, 216, 0.9), 0 0 15px rgba(255,255,255,0.6); }
#agence .eq-anim-wrapper { width: clamp(220px, 26vw, 380px); z-index: 2; will-change: transform; }
#agence .eq-left-slide { transform: translateX(-20vw); opacity: 0; transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
#agence .eq-right-slide { transform: translateX(20vw); opacity: 0; transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
#agence .eq-grid.visible .eq-left-slide, #agence .eq-grid.visible .eq-right-slide { transform: translateX(0); opacity: 1; }
#agence .eq-scroll-parallax { will-change: transform; }
#agence .eq-member { display: flex; flex-direction: column; gap: 15px; width: 100%; cursor: none; transition: filter 0.6s var(--ease), opacity 0.6s var(--ease); }
#agence .eq-photo { width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); transition: transform 0.6s var(--ease); pointer-events: none; }
#agence .eq-info { display: flex; flex-direction: column; transition: transform 0.6s var(--ease); }
#agence .align-left { align-items: flex-start; text-align: left; }
#agence .align-right { align-items: flex-end; text-align: right; }
#agence .eq-name { color: var(--c-orange); font-family: var(--f-hand); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; line-height: 0.9; transform: rotate(-2deg); margin-bottom: 5px; }
#agence .eq-role { color: var(--c-dark); font-family: var(--f-sans); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .15em; position: relative; display: inline-block; white-space: nowrap; }
#agence .eq-role::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
#agence .align-right .eq-role::after { transform-origin: right; }
#agence .eq-element { color: var(--c-orange); font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.2rem, 1.5vw, 1.4rem); display: block; margin-top: .5rem; letter-spacing: .02em; opacity: .95; }
#agence .eq-anim-wrapper:hover .eq-photo { transform: scale(1.03); }
#agence .eq-anim-wrapper:hover .eq-info { transform: translateY(-8px); }
#agence .eq-anim-wrapper:hover .eq-role::after { transform: scaleX(1); }

/* --- SECTION PRISME CAMÉLÉON --- */
/* ═══════════════════════════════════════════════════════════════════
   DEMANDE 11 — Section Notre ADN : refonte visuelle.
   Contenus (titres h3 + paragraphes) ET visuels de gauche CONSERVÉS.
   Seul l'agencement change : titre plus impactant, layout compacté,
   numérotation décorative moderne, hauteur globale réduite.
   ═══════════════════════════════════════════════════════════════════ */
.chameleon-section{background-color:var(--c-dark);padding:5.5vw 0 4vw;position:relative;z-index:5;clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%);margin-top:-5vw;overflow:hidden;}
.prisme-ambient-glow{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:65vw;height:65vw;border-radius:50%;filter:blur(130px);opacity:0.18;z-index:0;transition:background 1.5s var(--ease);pointer-events:none;}

/* Header centré : NOTRE ADN sur une ligne, typo/couleurs d'origine conservées */
.cham-header{display:flex;justify-content:center;align-items:baseline;gap:clamp(0.8rem,2vw,1.8rem);max-width:1300px;margin:0 auto 1.75rem;padding:0 clamp(20px,3vw,48px);position:relative;z-index:2;flex-wrap:wrap;text-align:center;}
.adn-title-stack{display:flex;justify-content:center;align-items:baseline;gap:clamp(0.8rem,2vw,1.8rem);line-height:1;position:relative;flex-wrap:nowrap;min-width:0;}
.adn-title-stack .pt-solid{font-family:var(--f-sans);font-size:clamp(0.85rem,1.05vw,1rem);font-weight:800;color:rgba(240,232,216,0.75);letter-spacing:0.35em;text-transform:uppercase;line-height:1;white-space:nowrap;flex-shrink:0;}
.adn-title-stack .adn-word{display:inline-block;position:relative;font-size:clamp(4.5rem,11vw,10rem);line-height:0.9;transform:rotate(-2.5deg);margin:0 !important;top:0 !important;padding:0 0.15em;}

/* Nav d'onglets horizontale + barre de progression sync autoplay */
.adn-tabs-wrap{max-width:1300px;margin:0 auto 2.25rem;padding:0 clamp(20px,3vw,48px);position:relative;z-index:2;}
.adn-tabs{display:flex;gap:0;margin:0;padding:0;list-style:none;position:relative;border-bottom:1px solid rgba(255,255,255,0.08);}
.adn-tab{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:0.7rem;padding:1rem 0.6rem 1.1rem;background:none;border:0;cursor:pointer;font-family:var(--f-disp);color:rgba(255,255,255,0.42);transition:color 0.5s var(--ease);text-align:left;position:relative;}
.adn-tab:hover{color:rgba(255,255,255,0.85);}
.adn-tab.active{color:#fff;}
.adn-tab-num{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:800;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:inherit;line-height:1;flex-shrink:0;transition:color 0.5s var(--ease),text-shadow 0.5s var(--ease);}
.adn-tab.active .adn-tab-num{color:var(--item-c);text-shadow:0 0 16px color-mix(in srgb,var(--item-c) 45%,transparent);}
.adn-tab-label{font-family:var(--f-sans);font-size:clamp(0.7rem,0.82vw,0.8rem);font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:color 0.5s var(--ease);}
.adn-progress-track{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;}
.adn-progress-fill{position:absolute;left:var(--adn-pos,0%);top:0;height:100%;width:25%;background:var(--item-c,var(--c-orange));box-shadow:0 0 10px var(--item-c,var(--c-orange));transform-origin:left;transform:scaleX(0);transition:left 0.5s var(--ease),background 0.5s var(--ease);}

/* Layout centré en colonne : canvas au-dessus, texte du pilier actif en dessous */
.prisme-layout{display:block;max-width:1300px;margin:0 auto;position:relative;z-index:2;padding:0 clamp(20px,3vw,48px);}
.prisme-visual-col{perspective:1200px;width:100%;max-width:300px;margin:0 auto 2rem;}
.prisme-canvas{position:relative;width:100%;aspect-ratio:3/4;background:rgba(20,15,25,0.3);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,0.05);border-radius:24px;box-shadow:0 40px 80px rgba(0,0,0,0.6),inset 0 0 30px rgba(255,255,255,0.02);overflow:hidden;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d;will-change:transform;transition:transform 0.2s ease-out;}

.visual-layer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity 0.8s var(--ease);pointer-events:none;}
.visual-layer.active{opacity:1;}

.vis-orange .orb{width:45%;height:45%;background:radial-gradient(circle at 30% 30%,#fff,var(--c-orange) 60%,#8a1c0b 100%);border-radius:50%;filter:blur(4px);box-shadow:0 0 60px var(--c-orange),inset 0 0 30px rgba(255,255,255,0.5);animation:floatOrb 6s infinite ease-in-out alternate;}
@keyframes floatOrb{0%{transform:scale(0.9) translateY(10px);}100%{transform:scale(1.1) translateY(-10px);box-shadow:0 0 100px var(--c-orange),inset 0 0 30px rgba(255,255,255,0.8);}}

.vis-gold .gold-wave-container{position:relative;width:150%;height:150%;background:#000;filter:contrast(15);display:flex;justify-content:center;align-items:center;mix-blend-mode:screen;}
.vis-gold .gold-blob{position:absolute;width:40%;height:40%;background:var(--c-gold);border-radius:50%;filter:blur(25px);animation:moveGold 8s infinite alternate ease-in-out;}
.vis-gold .gold-blob:nth-child(2){animation-duration:12s;animation-direction:alternate-reverse;width:35%;height:35%;background:#fff;}
@keyframes moveGold{0%{transform:translate(-30%,-30%) scale(1);}100%{transform:translate(30%,30%) scale(1.5);}}

.vis-klein .shockwave-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
.vis-klein .shock-ring{position:absolute;border:2px solid var(--c-klein);border-radius:50%;box-shadow:0 0 20px var(--c-klein),inset 0 0 10px var(--c-klein);animation:rippleShock 3s infinite cubic-bezier(0.1,0.8,0.3,1);opacity:0;}
.vis-klein .shock-ring:nth-child(2){animation-delay:1s;}
.vis-klein .shock-ring:nth-child(3){animation-delay:2s;}
@keyframes rippleShock{0%{width:0;height:0;opacity:1;border-width:8px;}100%{width:90%;height:90%;opacity:0;border-width:1px;}}

.vis-purple .light-path{width:70%;height:70%;}
.vis-purple .path-stroke{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawPath 4s infinite linear;filter:drop-shadow(0 0 15px var(--c-purple));}
@keyframes drawPath{0%{stroke-dashoffset:1000;}50%{stroke-dashoffset:0;}100%{stroke-dashoffset:-1000;}}

/* Colonne texte centrée : slides empilés en absolute pour isolation stricte entre piliers */
.prisme-text-col{position:relative;max-width:720px;margin:0 auto;min-height:clamp(440px,48vw,540px);padding-top:0.25rem;}
.prisme-item{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity 0.55s var(--ease),transform 0.55s var(--ease),visibility 0s 0.55s;pointer-events:none;}
.prisme-item.active{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 0.55s var(--ease),transform 0.55s var(--ease),visibility 0s 0s;pointer-events:auto;}
.prisme-item h3{font-family:var(--f-disp);font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;color:var(--item-c);line-height:1;margin:0 0 1.4rem;text-transform:uppercase;letter-spacing:-0.01em;text-shadow:0 0 30px color-mix(in srgb,var(--item-c) 22%,transparent);text-align:center;}
.prisme-item p{font-family:var(--f-sans);font-size:0.95rem;color:rgba(255,255,255,0.85);line-height:1.75;margin:0;}

/* ═══════════════════════════════════════════════════════════════════
   DEMANDE 12 — Section "Paroles de Kaméléons"
   Fond identique à #adn-prisme (var(--c-dark)), animation scroll conservée.
   ═══════════════════════════════════════════════════════════════════ */
.kom-section{overflow:hidden;padding:5vw 0 4vw;background:#020104;background-image:radial-gradient(circle at 50% 0,rgba(242,68,29,.05) 0,transparent 50%),radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,30px 30px;position:relative;z-index:10;}
.kom-header{text-align:center;margin-bottom:3.5rem;position:relative;z-index:5}
.kom-header-title{font-family:var(--f-disp);font-weight:800;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.02em;text-transform:uppercase;color:#fff;line-height:1}
.kom-header-title em{font-family:var(--f-hand);font-style:normal;font-weight:700;color:#FF4E2E;text-transform:none;font-size:1.5em;display:inline-block;transform:rotate(-2deg);margin:0;padding:0 .05em;line-height:.85;vertical-align:-0.08em;text-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 0 rgba(150,30,10,.18),0 0 18px rgba(255,78,46,.4)}

/* Masque vertical + largeur confortable pour éviter toute coupure latérale */
.scroll-wrapper{position:relative;max-width:1100px;margin:0 auto;height:580px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:flex-start;padding:20px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%)}
.scroll-track{display:flex;flex-direction:column;gap:20px;will-change:transform;transition:filter .4s ease}
.scroll-group{display:flex;flex-direction:column;gap:20px}
.scroll-down{animation:animDown 42s linear infinite}
.scroll-up{animation:animUp 42s linear infinite}
@keyframes animDown{0%{transform:translateY(calc(-50% - 10px))}100%{transform:translateY(0)}}
@keyframes animUp{0%{transform:translateY(0)}100%{transform:translateY(calc(-50% - 10px))}}
.scroll-wrapper:hover .scroll-track{animation-play-state:paused}
.scroll-wrapper:hover .review-card:not(:hover){filter:brightness(.55) blur(2px);opacity:.7}

/* ─── Carte témoignage : gabarit complet ─── */
.review-card{
  background:linear-gradient(135deg,rgba(30,25,35,.85) 0,rgba(15,12,20,.92) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:2px solid rgba(0,0,0,.5);
  border-radius:14px;
  padding:1.7rem 1.6rem 1.4rem;
  box-shadow:
    0 15px 35px rgba(0,0,0,.55),
    inset 0 -8px 20px rgba(0,0,0,.4),
    inset 0 2px 10px rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
  cursor:none;
}
/* DEMANDE 12 — fix bug overflow : plus de scale(), uniquement translateY
   → le texte ne peut plus être coupé par .scroll-wrapper à cause d'un débordement */
.review-card:hover{
  transform:translateY(-4px);
  border-color:rgba(242,68,29,.35);
  border-top-color:rgba(242,68,29,.7);
  box-shadow:
    0 25px 50px rgba(0,0,0,.75),
    0 0 30px rgba(242,68,29,.18),
    inset 0 -8px 20px rgba(0,0,0,.4),
    inset 0 2px 10px rgba(255,255,255,.08);
  z-index:10;
}

/* Header de la carte : nom client (gauche, plus grand) + capsule colorée (droite) */
.review-card .rc-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  position:relative;
  z-index:1;
  min-height:42px;
}
.review-card .rc-logo{
  display:block;
  max-height:38px;
  max-width:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:left center;
  flex:0 1 auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
/* Capsule = .p-badge existant (hérité — spectre caméléon animé) */
.review-card .rc-head .p-badge{ margin:0; }

/* Corps : citation */
.review-card .rc-quote{
  font-family:var(--f-sans);
  font-size:.95rem;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  margin:0;
  position:relative;
  z-index:1;
  font-style:italic;
}
.review-card .rc-q{
  display:inline-block;
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:600;
  font-size:1.45em;
  line-height:.6;
  vertical-align:-.22em;
  background:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 45%,#FF8A72 55%,#FF4E2E 100%);
  background-size:220% auto;
  background-position:0% center;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:orangeBreathe 7s ease-in-out infinite;
  filter:drop-shadow(0 1px 8px rgba(255,78,46,.4));
}
.review-card .rc-q-open{margin-right:.1em}
.review-card .rc-q-close{margin-left:.1em}

/* Bouton "Voir le projet" — effet CTA primaire (gradient breathe + light sweep) */
.review-card .rc-cta{
  appearance:none;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--f-sans);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 45%,#FF8A72 55%,#FF4E2E 100%);
  background-size:220% auto;
  background-position:0% center;
  animation:orangeBreathe 7s ease-in-out infinite;
  border:none;
  padding:.7rem 1.2rem;
  border-radius:99px;
  cursor:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 18px -4px rgba(255,78,46,.45),0 2px 6px rgba(0,0,0,.15);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-position .9s var(--ease);
  z-index:1;
}
.review-card .rc-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
  pointer-events:none;
  z-index:1;
  border-radius:inherit;
}
.review-card .rc-cta > *{position:relative;z-index:2}
.review-card .rc-cta-arrow{
  width:18px;
  height:18px;
  flex-shrink:0;
  transition:transform .4s var(--ease);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
  transform-origin:center;
  overflow:visible;
}
.review-card .rc-cta-arrow .eye-pupil{
  transform-origin:12px 12px;
  transition:transform .4s var(--ease);
}
@keyframes rcEyeBlink{
  0%,92%,100%{transform:scaleY(1)}
  96%{transform:scaleY(.08)}
}
.review-card .rc-cta:hover{
  transform:translateY(-2px);
  background-position:100% center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),0 12px 28px -6px rgba(255,78,46,.6),0 4px 10px rgba(0,0,0,.18);
}
.review-card .rc-cta:hover::before{transform:translateX(120%)}
.review-card .rc-cta:hover .rc-cta-arrow{animation:rcEyeBlink 2.4s ease-in-out infinite}
.review-card .rc-cta:hover .rc-cta-arrow .eye-pupil{transform:scale(1.25)}
.review-card .rc-cta:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 3px 8px -2px rgba(255,78,46,.4)}

/* Footer : auteur + fonction */
.review-card .rc-author{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:1;
}
.review-card .rc-author .rc-name{
  font-weight:800;
  font-size:.92rem;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.review-card .rc-author .rc-role{
  font-size:.72rem;
  color:var(--c-text-sec);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}

/* --- SECTION KOULISSES DE NOS RÉSEAUX --- */
.social-section{background:var(--c-creme);padding:clamp(60px,8vw,90px) 0 clamp(70px,9vw,100px);text-align:center;position:relative;transition:background .8s ease;z-index:4;overflow:hidden}
.social-section.is-focused{background-color:transparent!important}
.social-section-overlay{position:absolute;inset:0;background:rgba(5,2,8,0);transition:0.8s var(--ease);z-index:1;pointer-events:none}
.social-section.is-focused .social-section-overlay{background:rgba(0,0,0,.4)}

/* Header : grand titre + accent script + descriptif + boutons réseaux */
.social-header{position:relative;z-index:2;max-width:820px;margin:0 auto 2.75rem;transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);}
.social-section.is-focused .social-header{opacity:0;transform:translateY(-20px);pointer-events:none;}
.social-header-title{font-family:var(--f-disp);font-size:clamp(2.8rem,5.5vw,4.3rem);font-weight:800;line-height:1;margin:0 0 1rem;text-transform:uppercase;color:var(--c-dark);letter-spacing:-0.01em;}
.social-header-title em{font-family:var(--f-hand);font-style:normal;font-weight:700;color:var(--c-orange);text-transform:none;font-size:1.15em;display:inline-block;transform:rotate(-2deg);margin-left:0.3em;line-height:0.9;vertical-align:baseline;}
.social-desc{font-family:var(--f-sans);font-size:clamp(0.92rem,1.05vw,1.02rem);color:rgba(5,2,8,0.68);line-height:1.65;margin:0 auto 1.75rem;max-width:560px;font-weight:500;}

.social-links-wrap{display:flex;justify-content:center;align-items:center;gap:0.9rem;flex-wrap:wrap;}
.social-link{display:inline-flex;align-items:center;gap:0.6rem;padding:0.7rem 1.3rem 0.7rem 1rem;border-radius:99px;background:rgba(5,2,8,0.035);border:1.5px solid rgba(5,2,8,0.13);color:var(--c-dark);text-decoration:none;font-family:var(--f-sans);font-weight:800;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.14em;transition:transform 0.4s var(--ease),background 0.4s var(--ease),color 0.4s var(--ease),border-color 0.4s var(--ease),box-shadow 0.4s var(--ease);cursor:none;}
.social-link svg{width:18px;height:18px;fill:currentColor;transition:fill 0.4s var(--ease);flex-shrink:0;}
.social-link:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.15);}
.social-link.is-instagram:hover{background:linear-gradient(45deg,#833AB4 0%,#FD1D1D 50%,#F77737 100%);border-color:transparent;color:#fff;}
.social-link.is-linkedin:hover{background:#0A66C2;border-color:#0A66C2;color:#fff;}

/* Galerie "fan" étendue à 8 cards — cards elles-mêmes INTOUCHÉES */
.fan-gallery { position: relative; height: clamp(370px, 42vw, 580px); display: flex; align-items: center; justify-content: center; margin: 1.5rem 0 4.5rem 0; perspective: 1200px; z-index: 10; }
.fan-card { position: absolute; width: clamp(160px, 20vw, 260px); aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.2); opacity: 0; transform: translate(0, 100px) rotate(0deg) scale(0.6); transition: all 0.5s cubic-bezier(0.25, 1, 0.4, 1); transform-style: preserve-3d; cursor: none; }
.fan-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: saturate(1.1); transition: 0.4s ease; }
.fan-card:nth-child(1) { --tx: -520px; --ty: 95px; --rot: -22deg; z-index: 1; }
.fan-card:nth-child(2) { --tx: -380px; --ty: 50px; --rot: -15deg; z-index: 2; }
.fan-card:nth-child(3) { --tx: -230px; --ty: 18px; --rot: -9deg;  z-index: 3; }
.fan-card:nth-child(4) { --tx: -78px;  --ty: 0px;  --rot: -3deg;  z-index: 4; }
.fan-card:nth-child(5) { --tx: 78px;   --ty: 0px;  --rot: 3deg;   z-index: 4; }
.fan-card:nth-child(6) { --tx: 230px;  --ty: 18px; --rot: 9deg;   z-index: 3; }
.fan-card:nth-child(7) { --tx: 380px;  --ty: 50px; --rot: 15deg;  z-index: 2; }
.fan-card:nth-child(8) { --tx: 520px;  --ty: 95px; --rot: 22deg;  z-index: 1; }
.fan-gallery:not(.is-open).visible .fan-card { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
.fan-gallery:not(.is-open).visible .fan-card:hover { transform: translate(var(--tx), calc(var(--ty) - 30px)) rotate(0deg) scale(1.15) rotateX(5deg) rotateY(-5deg); z-index: 10; box-shadow: 20px 30px 60px rgba(0,0,0,0.4); }
.fan-gallery:not(.is-open).visible:hover .fan-card:not(:hover) { filter: brightness(0.8) grayscale(20%); }
.fan-gallery.is-open .fan-card { opacity: 0; pointer-events: none; transform: translate(var(--tx), 150px) scale(0.5); }
.fan-gallery.is-open .fan-card.active { opacity: 1; pointer-events: auto; z-index: 50; transform: translate(calc(-15vw - 50px), -5vh) rotate(0deg) scale(1.4); box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 50px rgba(242,68,29,0.4); border: 1px solid rgba(255,255,255,0.2); }
.gallery-details { position: absolute; right: 5%; top: 50%; transform: translateY(-40%) translateX(50px); width: clamp(300px, 35vw, 500px); opacity: 0; pointer-events: none; transition: all 0.6s var(--ease); z-index: 40; text-align: left; color: #fff; }
.fan-gallery.is-open .gallery-details { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; transition-delay: 0.2s; }
.gd-meta { font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--c-orange); margin-bottom: 0.5rem; }
.gd-title { font-family: var(--f-disp); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1; margin-bottom: 1rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.gd-desc { font-family: var(--f-serif); font-size: clamp(1rem, 1.5vw, 1.2rem); font-style: italic; color: rgba(255,255,255,0.9); margin-bottom: 2.5rem; line-height: 1.5; }
.gd-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.gd-close { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 0.8rem 1.5rem; border-radius: 99px; color: #fff; font-family: var(--f-sans); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.3s var(--ease); backdrop-filter: blur(10px); cursor: none; }
.gd-close:hover { background: var(--c-orange); border-color: var(--c-orange); transform: translateX(-5px); box-shadow: 0 10px 20px rgba(242,68,29,0.4); }

/* Bouton "Voir le post" — refonte premium, gradient orange→gold avec inversion au hover */
.gd-link{display:inline-flex;align-items:center;gap:0.6rem;padding:0.85rem 1.5rem;border-radius:99px;font-family:var(--f-sans);font-weight:800;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.14em;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--c-orange) 0%,var(--c-gold) 100%);box-shadow:0 8px 22px rgba(242,68,29,0.38),inset 0 1px 0 rgba(255,255,255,0.2);transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease);cursor:none;position:relative;overflow:hidden;isolation:isolate;}
.gd-link::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--c-gold) 0%,var(--c-orange) 100%);opacity:0;transition:opacity 0.4s var(--ease);z-index:-1;}
.gd-link:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(242,68,29,0.52),inset 0 1px 0 rgba(255,255,255,0.25);}
.gd-link:hover::before{opacity:1;}
.gd-link-arrow{display:inline-flex;align-items:center;transition:transform 0.4s var(--ease);}
.gd-link:hover .gd-link-arrow{transform:translate(3px,-3px);}

/* --- CONTACT --- */
.sharp-separator{width:100%;height:1px;background:var(--c-orange);box-shadow:0 0 10px var(--c-orange),0 0 20px var(--c-orange);position:relative;z-index:20}
/* DEMANDE 14 — Formulaire compact + titre personnalisé + Cal.com modal */
.contact-neumorphic{min-height:auto;display:flex;align-items:center;justify-content:center;background:#020104;background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:30px 30px;padding:clamp(50px,6vh,90px) 0 clamp(60px,7vh,100px);position:relative;z-index:10}
.contact-neumorphic > .container{width:100%}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3.5rem,7vw,7rem);align-items:center}
.cn-title{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:0.95;text-transform:uppercase;color:#fff;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.8),0 0 40px rgba(242,68,29,0.08);margin-bottom:2rem;max-width:100%;word-break:break-word;overflow-wrap:anywhere}
.cn-title em{font-family:var(--f-hand);font-style:normal;font-weight:700;font-size:1.4em;text-transform:none;letter-spacing:0;display:inline-block;transform:rotate(-2deg);margin:.35em 0 0 0;line-height:0.88;color:#FF4E2E;text-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 0 rgba(150,30,10,.18),0 0 18px rgba(255,78,46,.4);max-width:100%}
.cn-title{white-space:normal}
.contact-actions{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.75rem}
.btn-neo-out,.btn-neo-in{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--f-sans);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:0.95rem 1.8rem;border-radius:99px;transition:all .3s ease;color:#fff;text-decoration:none;cursor:none}
.btn-neo-out{background:#110d14;border:1px solid rgba(255,255,255,.05);box-shadow:6px 6px 15px rgba(0,0,0,.8),-6px -6px 15px rgba(255,255,255,.02),inset 1px 1px 2px rgba(255,255,255,.05)}
.btn-neo-out:hover{color:var(--c-orange);box-shadow:8px 8px 20px rgba(0,0,0,.9),-8px -8px 20px rgba(255,255,255,.05),inset 1px 1px 2px rgba(255,255,255,.1)}
.wa-icon{width:16px;height:16px;fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.45));transition:.3s}
.btn-wa{position:relative;isolation:isolate;overflow:hidden;border:none;background:linear-gradient(135deg,#128C7E 0%,#25D366 45%,#4ED882 55%,#128C7E 100%);background-size:220% auto;background-position:0% center;animation:orangeBreathe 7s ease-in-out infinite;color:#fff;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 18px -4px rgba(37,211,102,.5),0 2px 6px rgba(0,0,0,.15);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-position .9s var(--ease),filter .4s var(--ease)}
.btn-wa::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none;z-index:1;border-radius:inherit}
.btn-wa > *{position:relative;z-index:2}
.btn-wa:hover{color:#fff;transform:translateY(-2px);background-position:100% center;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),0 12px 28px -6px rgba(37,211,102,.65),0 4px 10px rgba(0,0,0,.18)}
.btn-wa:hover::before{transform:translateX(120%)}
.btn-wa:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 3px 8px -2px rgba(37,211,102,.4)}
.btn-neo-in{background:#0b080d;width:max-content;color:rgba(255,255,255,.8);box-shadow:inset 5px 5px 10px rgba(0,0,0,.8),inset -5px -5px 10px rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);padding:0.75rem 1.5rem;font-size:.72rem;letter-spacing:.12em}
.btn-neo-in:hover{color:#fff;background:#0f0b12}
.contact-form-side{position:relative}
.contact-form-side::before{content:'';position:absolute;inset:-30px;background:radial-gradient(circle at center,rgba(255,78,46,.22) 0,transparent 60%);z-index:0;pointer-events:none;filter:blur(30px);animation:pulseGlow 4s infinite alternate;transition:.5s ease}
@keyframes pulseGlow{0%{opacity:.7;transform:scale(.95)}100%{opacity:1;transform:scale(1.05)}}
.contact-form-side:focus-within::before{background:radial-gradient(circle at center,rgba(255,78,46,.35) 0,transparent 70%)}
.neo-card{position:relative;z-index:1;border-radius:26px;padding:1.5rem;background:linear-gradient(145deg,rgba(22,18,26,.95) 0,rgba(13,10,17,.95) 100%);border:1px solid rgba(255,78,46,.3);box-shadow:0 20px 50px rgba(0,0,0,.9),0 0 30px rgba(255,78,46,.1),inset 0 2px 20px rgba(255,255,255,.02);backdrop-filter:blur(20px)}
.neo-input-row{display:grid;grid-template-columns:1fr 1fr;gap:0.65rem;margin-bottom:0.65rem}
.neo-input-group{margin-bottom:0.75rem}
.neo-input{width:100%;background:rgba(0,0,0,.4);outline:none;padding:0.8rem 1.2rem;border-radius:99px;font-family:var(--f-sans);font-size:0.92rem;font-weight:600;color:#fff;transition:.3s;border:1px solid rgba(255,255,255,.05);cursor:none;box-shadow:inset 3px 3px 8px rgba(0,0,0,.8)}
textarea.neo-input{border-radius:18px;resize:none;font-weight:500}
.neo-input::placeholder{color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em}
.neo-input:focus{border-color:rgba(255,78,46,.55);box-shadow:inset 3px 3px 8px rgba(0,0,0,1),0 0 12px rgba(255,78,46,.28)}
.neo-input:valid:not(:placeholder-shown){border-color:rgba(255,255,255,.2)}
.neo-select{width:100%;appearance:none;-webkit-appearance:none;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="rgba(255,255,255,0.55)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 1.1rem center no-repeat,rgba(0,0,0,.4);outline:none;padding:0.8rem 2.8rem 0.8rem 1.2rem;border-radius:99px;font-family:var(--f-sans);font-size:0.82rem;font-weight:700;color:#fff;transition:.3s;border:1px solid rgba(255,255,255,.05);cursor:pointer;box-shadow:inset 3px 3px 8px rgba(0,0,0,.8);text-transform:uppercase;letter-spacing:.08em}
.neo-select:focus{border-color:rgba(255,78,46,.55);box-shadow:inset 3px 3px 8px rgba(0,0,0,1),0 0 12px rgba(255,78,46,.28)}
.neo-select option{background:#0d0a11;color:#fff;padding:0.6rem}
.neo-select:invalid{color:rgba(255,255,255,.4)}
.neo-file-group{margin-bottom:0.75rem;display:flex;flex-direction:column;gap:0.4rem}
.neo-file-hint{font-size:.78rem;font-family:var(--f-sans);color:rgba(255,255,255,.75);display:block;font-weight:600;margin:0}
.neo-file-display{display:inline-flex;align-items:center;gap:0.6rem;padding:0.5rem 0.55rem 0.5rem 1rem;border-radius:99px;background:rgba(255,78,46,0.14);border:1px solid rgba(255,78,46,0.38);color:#fff;font-family:var(--f-sans);font-size:0.78rem;font-weight:700;width:max-content;max-width:100%}
.neo-file-display[hidden]{display:none}
.neo-file-display .neo-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;color:#FF8A72;text-transform:none;letter-spacing:0}
.neo-file-remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.85);font-size:1.15rem;line-height:1;cursor:pointer;transition:background 0.3s,color 0.3s,transform 0.3s;flex-shrink:0;padding:0}
.neo-file-remove:hover{background:#FF4E2E;color:#fff;transform:rotate(90deg)}
.neo-sliders-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;transition:grid-template-columns 0.4s var(--ease)}
.neo-sliders-row.solo-budget{grid-template-columns:1fr}
.neo-sliders-row.solo-budget .duree-group{display:none}
.neo-slider-group label{font-size:.7rem;font-weight:800;color:rgba(255,255,255,0.9);text-transform:uppercase;letter-spacing:.12em;margin-bottom:0.5rem;display:block}
.neo-range{-webkit-appearance:none;width:100%;height:6px;border-radius:4px;background:rgba(0,0,0,.5);outline:none;margin-bottom:0.5rem;box-shadow:inset 2px 2px 5px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.02);background-image:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 50%,#FF8A72 100%);background-size:var(--val,50%) 100%;background-repeat:no-repeat;cursor:none}
.neo-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 50%,#FF8A72 100%);box-shadow:0 0 15px rgba(255,78,46,.65),inset 2px 2px 4px rgba(255,255,255,.4)}
.neo-slider-val{font-family:var(--f-disp);font-weight:800;font-size:1rem;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.5)}
.btn-neo-submit{width:100%;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 45%,#FF8A72 55%,#FF4E2E 100%);background-size:220% auto;background-position:0% center;animation:orangeBreathe 7s ease-in-out infinite;border:none;border-radius:99px;padding:0.95rem;font-family:var(--f-disp);font-weight:800;font-size:1.05rem;color:#fff;text-transform:uppercase;letter-spacing:.12em;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-position .9s var(--ease),filter .4s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 18px -4px rgba(255,78,46,.45),0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:10px;cursor:none}
.btn-neo-submit::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none;z-index:1;border-radius:inherit}
.btn-neo-submit > *{position:relative;z-index:2}
.btn-neo-submit:hover{transform:translateY(-2px);background-position:100% center;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),0 12px 28px -6px rgba(255,78,46,.6),0 4px 10px rgba(0,0,0,.18)}
.btn-neo-submit:hover::before{transform:translateX(120%)}
.btn-neo-submit:disabled{opacity:.6;transform:none;cursor:not-allowed;animation:none}
.cal-modal{position:fixed;inset:0;z-index:300;opacity:0;pointer-events:none;transition:opacity 0.45s var(--ease);display:flex;align-items:center;justify-content:center;padding:20px}
.cal-modal.is-open{opacity:1;pointer-events:auto}
.cal-modal-backdrop{position:absolute;inset:0;background:rgba(5,2,8,0.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cal-modal-content{position:relative;width:100%;max-width:1100px;height:min(90vh,800px);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.8);transform:scale(0.95);transition:transform 0.45s var(--ease)}
.cal-modal.is-open .cal-modal-content{transform:scale(1)}
.cal-modal-close{position:absolute;top:0.75rem;right:0.75rem;z-index:10;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,0.92);color:#050208;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.3s,transform 0.3s}
.cal-modal-close:hover{background:var(--c-orange);color:#fff;transform:scale(1.08)}
#my-cal-inline-brief30min{width:100%;height:100%;overflow:auto}

/* ============================================================
   CONTACT MODAL — modale unifiée (formulaire → Cal.com)
   Reprend l'esthétique cinématique de .kou-lb (background #030105
   + blobs animés bleu klein/orange + couche glassmorphism).
   ============================================================ */
.contact-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.contact-modal.is-open{pointer-events:auto;opacity:1}
.contact-modal-bg{position:absolute;inset:0;background:#030105;overflow:hidden;cursor:none}
.contact-modal-bg::before{content:'';position:absolute;width:55vw;height:55vw;background:rgba(0,47,167,.45);border-radius:50%;filter:blur(110px);top:-12%;right:-15%;animation:kouLbDriftA 24s ease-in-out infinite alternate}
.contact-modal-bg::after{content:'';position:absolute;width:50vw;height:50vw;background:rgba(242,68,29,.35);border-radius:50%;filter:blur(110px);bottom:-15%;left:-10%;animation:kouLbDriftB 22s ease-in-out infinite alternate-reverse}
.contact-modal-glass{position:absolute;inset:0;backdrop-filter:blur(80px);-webkit-backdrop-filter:blur(80px);background:rgba(5,2,8,.42);pointer-events:none}
.contact-modal-shell{position:relative;z-index:10;width:min(96vw,1100px);max-height:92vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem;transform:scale(.92) translateY(20px);transition:transform .55s var(--ease)}
.contact-modal.is-open .contact-modal-shell{transform:scale(1) translateY(0)}
.contact-modal-x{position:absolute;top:-2.6rem;right:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:none;font-size:1rem;line-height:1;transition:all .3s;z-index:11;padding:0}
.contact-modal-x:hover{background:rgba(255,255,255,.2);color:#fff}
.contact-modal-stage{width:100%;transition:opacity .35s var(--ease)}
.contact-modal-stage[hidden]{display:none}
.contact-modal-stage--form{max-width:560px;margin:0 auto}
.contact-modal-stage--cal{height:min(82vh,800px);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.contact-modal-stage--cal #my-cal-inline-brief30min{width:100%;height:100%;overflow:auto;background:#fff}
@media(max-width:600px){
  .contact-modal-shell{padding:.75rem;max-height:96vh}
  .contact-modal-x{top:.4rem;right:.4rem;background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.2)}
  .contact-modal-stage--cal{height:min(78vh,700px)}
}

.footer-shell{background:#020104;position:relative;z-index:19}
.site-footer{position:relative;padding:3.25rem 0 1.5rem;z-index:20;background:transparent;border-radius:50px 50px 0 0}
.footer-bg{position:absolute;inset:0;border-radius:50px 50px 0 0;overflow:hidden;background:#0a0512;z-index:-1;isolation:isolate;pointer-events:none}
.footer-bg::before{content:"";position:absolute;inset:-120px -80px -160px -80px;--c1:#FFA500;--c2:#8DB600;background-image:linear-gradient(135deg,var(--c1),var(--c2));animation:chameleonDuo 90s linear infinite;filter:blur(70px) saturate(1.35);opacity:1;z-index:0}
@keyframes footerChameleon{0%{background-position:0% 50%}100%{background-position:400% 50%}}
.footer-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:1}
.footer-blob.b1{width:38vw;height:38vw;background:var(--c-orange);top:5%;left:-8%;opacity:.42;animation:fbDrift1 24s ease-in-out infinite alternate}
.footer-blob.b2{width:34vw;height:34vw;background:var(--c-klein);bottom:-18%;right:-8%;opacity:.45;animation:fbDrift2 28s ease-in-out infinite alternate}
.footer-blob.b3{width:30vw;height:30vw;background:var(--c-purple);top:20%;right:18%;opacity:.38;animation:fbDrift3 32s ease-in-out infinite alternate}
.footer-blob.b4{width:26vw;height:26vw;background:var(--c-gold);bottom:-18%;left:28%;opacity:.35;animation:fbDrift4 30s ease-in-out infinite alternate}
@keyframes fbDrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.22)}}
@keyframes fbDrift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vw,-9vh) scale(1.18)}}
@keyframes fbDrift3{from{transform:translate(0,0) scale(1)}to{transform:translate(-11vw,6vh) scale(.85)}}
@keyframes fbDrift4{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,-5vh) scale(1.12)}}
.footer-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;margin-bottom:2rem}
.footer-tagline{font-family:var(--f-sans);font-size:clamp(.95rem,1.15vw,1.05rem);font-weight:400;color:rgba(240,232,216,.92);max-width:580px;line-height:1.65;letter-spacing:.005em;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.footer-email{display:inline-block;font-family:var(--f-disp);font-size:clamp(1.2rem,1.8vw,1.45rem);font-weight:700;letter-spacing:-.01em;cursor:none;margin-top:.5rem;background:linear-gradient(90deg,var(--c-creme),#fff,var(--c-orange),var(--c-gold),var(--c-creme));background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-position:0% 0%;transition:background-position .8s var(--ease);filter:drop-shadow(0 1px 14px rgba(0,0,0,.55))}
.footer-email:hover{background-position:100% 0%}
.footer-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,.2);padding-top:1.75rem}
.fb-left{font-family:var(--f-sans);font-size:.72rem;color:rgba(240,232,216,.85);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.fb-right{display:flex;gap:1.75rem;flex-wrap:wrap}
.fb-right a{font-family:var(--f-sans);font-size:.72rem;color:rgba(240,232,216,.85);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:none;background-image:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 45%,#FF8A72 55%,#FF4E2E 100%);background-size:220% auto;background-position:0% center;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;transition:color .35s var(--ease),text-shadow .45s var(--ease),-webkit-text-fill-color .35s var(--ease)}
.fb-right a:hover{color:transparent;-webkit-text-fill-color:transparent;animation:orangeBreathe 7s ease-in-out infinite;text-shadow:0 0 20px rgba(255,78,46,.6)}
@media (prefers-reduced-motion:reduce){.site-footer::before,.footer-blob{animation:none!important}}

@media(max-width:1024px){
  .portfolio-grid-fw{grid-template-columns:repeat(2,1fr)}
  .prisme-visual-col{max-width:280px;}
  .adn-title-stack{flex-wrap:wrap;justify-content:center;gap:0.7rem 1.2rem;}
  .adn-title-stack .adn-word{margin:0 !important;}
}
@media(max-width:900px){
  .adn-tab-label{display:none;}
  .adn-tab{justify-content:center;gap:0;padding:0.9rem 0.3rem 1rem;}
  .adn-tab-num{font-size:clamp(1.4rem,4vw,1.8rem);}
}
@media(max-width:600px){
  .prisme-visual-col{max-width:240px;}
  .prisme-text-col{min-height:clamp(500px,120vw,640px);}
}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:3rem}
  .contact-text-side{text-align:center;display:flex;flex-direction:column;align-items:center}
  .neo-card{padding:2rem 1.5rem}
  .neo-sliders-row{gap:1rem}
  .contact-actions{justify-content:center}
  .footer-grid{grid-template-columns:1fr 1fr}
  #agence .eq-grid { flex-direction: column; gap: 4rem; }
  #agence .eq-title-col { position: relative; left: auto; top: auto; transform: none; order: -1; margin-bottom: 3rem; }
  #agence .agence-title-t2 { margin-left: 0; margin-top: -1rem; }
  #agence .eq-anim-wrapper { width: 100%; max-width: 450px; }
  #agence .eq-left-slide, #agence .eq-right-slide { transform: translateY(40px); }
  #agence .eq-grid.visible .eq-left-slide, #agence .eq-grid.visible .eq-right-slide { transform: translateY(0); }
  #agence .eq-grid.visible .eq-member.float-1, #agence .eq-grid.visible .eq-member.float-2 { animation: none; }
  #agence .align-left, #agence .align-right { align-items: center; text-align: center; }
  #agence .align-right .eq-role::after, #agence .align-left .eq-role::after { transform-origin: center; }
}
@media(max-width:768px){
  .hero { padding: 0 !important; }
  .hero-video-wrap {
      top: 12px;
      bottom: 12px;
      left: 12px;
      right: 12px;
      border-radius: 16px;
  }
  nav { padding: 15px 0 15px 0 !important; }

  .mutation-section{clip-path:polygon(0 8vw,100% 0,100% 100%,0 100%);margin-top:-8vw;padding-bottom:4vw}
  .m-header{flex-direction:column;text-align:center;justify-content:center;margin-bottom:2rem}
  .m-header-left{justify-content:center}
  .m-content-track{flex-direction:column;width:100%;transform:none!important;gap:4rem}
  .m-panel{width:100%;padding:0 20px}
  .portfolio-grid-fw{grid-template-columns:1fr;gap:2rem}
  
  .video-modal-content{grid-template-columns:1fr;height:auto;max-height:90vh;overflow-y:auto}
  .modal-left-video{width:100%;aspect-ratio:16/9}
  .modal-right-info{padding:2rem}
  .scroll-wrapper{grid-template-columns:1fr;height:500px}
  .scroll-track.scroll-down{animation:animUp 30s linear infinite}
  .scroll-track.scroll-up{display:none}
  
  .fan-card:nth-child(1){--tx:-155px;--ty:45px;--rot:-16deg}
  .fan-card:nth-child(2){--tx:-105px;--ty:22px;--rot:-11deg}
  .fan-card:nth-child(3){--tx:-58px;--ty:6px;--rot:-6deg}
  .fan-card:nth-child(4){--tx:-20px;--ty:0px;--rot:-2deg}
  .fan-card:nth-child(5){--tx:20px;--ty:0px;--rot:2deg}
  .fan-card:nth-child(6){--tx:58px;--ty:6px;--rot:6deg}
  .fan-card:nth-child(7){--tx:105px;--ty:22px;--rot:11deg}
  .fan-card:nth-child(8){--tx:155px;--ty:45px;--rot:16deg}
  .fan-gallery.is-open .fan-card.active{transform:translate(0,-15vh) rotate(0) scale(1.1)}
  .gallery-details{top:60%;right:0;left:0;width:90%;margin:0 auto;text-align:center;transform:translateY(0) translateX(0)}
  .fan-gallery.is-open .gallery-details{transform:translateY(0) translateX(0)}
  .chameleon-section{border-radius:0;padding:3rem 0;margin-top:0;clip-path:none}
  .neo-input-row{grid-template-columns:1fr;gap:1.5rem}
  .nav-links{display:none}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
}

/* ============================================================
   RESPONSIVE — Optimisations globales (tablette / mobile paysage / overflow)
   N'altère pas la logique GSAP ScrollTrigger ni les z-index critiques.
   ============================================================ */

/* Anti-overflow horizontal des grilles internes (sans toucher à html/body, qui ont
   déjà leur propre overflow-x:hidden ligne 18 et créaient un double conteneur de scroll
   responsable d'une marge fantôme à droite). */
.contact-grid,.portfolio-grid-fw,.kou-grid{max-width:100%;min-width:0}
.contact-grid > *,.portfolio-grid-fw > *,.kou-grid > *{min-width:0}
/* Anti-stripe bleu : le .cinematic-bg est en position:fixed z-index:0 avec un blob-klein
   bleu profond. Une fois le hero scrollé, plus aucune section n'est transparente — le bg
   cinématique n'a plus de raison d'être affiché. On le fade-out via JS (IntersectionObserver
   sur .hero) pour qu'aucun sub-pixel/clip-path ne puisse exposer le bleu en arrière-plan. */
.cinematic-bg{transition:opacity .45s var(--ease)}
.cinematic-bg.is-faded{opacity:0}

/* TABLETTE (1024 → 901px) — réduit la verticalité des sections */
@media(max-width:1024px){
  .mutation-section{padding:5vw 0 3vw 0}
  #agence{padding:6vw 0 5vw 0}
  .kom-section{padding:4vw 0 3vw}
  .contact-neumorphic{padding:clamp(50px,5vh,80px) 0 clamp(60px,6vh,90px)}
  .adn{padding:clamp(90px,12vw,160px) 20px;min-height:auto}
}

/* TABLETTE / MOBILE (≤900px) — empilement et compacité */
@media(max-width:900px){
  #agence{padding:7vw 0 6vw 0}
  .kom-section{padding:5vw 0 4vw}
  .scroll-wrapper{height:520px}
}

/* MOBILE PAYSAGE — viewport court : aucune hauteur fixe ne doit déborder */
@media(max-width:900px) and (orientation:landscape){
  .hero-video-wrap{aspect-ratio:auto;height:auto;min-height:100vh}
  .scroll-wrapper{height:70vh;min-height:380px}
  .adn{padding:clamp(60px,9vw,120px) 20px;min-height:auto}
  .adn .cards{height:clamp(360px,62vh,560px)}
  .prest-wrapper{aspect-ratio:16/9;min-height:0}
  .video-modal-content{max-height:95vh;overflow-y:auto}
  .contact-neumorphic{min-height:auto;padding:5vh 0 5vh}
  .kom-section{padding:5vh 0 4vh}
  .mutation-section{padding:6vh 0 3vh 0}
  #agence{padding:6vh 0 5vh 0}
}

/* MOBILE PORTRAIT (≤600px) — finitions paddings + grilles full-bleed safe */
@media(max-width:600px){
  .mutation-section{padding:5vw 0 2vw 0}
  #agence{padding:9vw 0 7vw 0}
  .kom-section{padding:6vw 0 4vw}
  .contact-neumorphic{padding:50px 0 56px;min-height:auto}
  .adn{padding:clamp(60px,14vw,110px) 18px;min-height:auto}
  .scroll-wrapper{height:480px}
  .container{padding:0 16px}
}

/* PERFORMANCE — atténue les backdrop-filter coûteux sur petit viewport
   (Safari iOS et GPU mobile bas de gamme). Visuel quasi identique, repaint allégé. */
@media(max-width:768px){
  .cinematic-glass-overlay{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px)}
  .kou-lb-glass{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px)}
}
.reveal{opacity:0;transform:translateY(40px);transition:all 1s var(--ease)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-d1{transition-delay:.15s}.reveal-d2{transition-delay:.3s}.reveal-d3{transition-delay:.45s}

/* ─── Hero : eyebrow + actions masqués jusqu'à la fin du loader (le titre reste visible, match cut parfait) ─── */
#heroContent .hero-eyebrow,
#heroContent .hero-actions {
  opacity: 0;
  pointer-events: none;
}
#heroContent.revealed .hero-eyebrow,
#heroContent.revealed .hero-actions {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .6s ease;
}

/* ─── LOADER KAMÉLÉON ──────────────────────────────────────────────────────── */
/* Placé à l'INTÉRIEUR de .hero-video-wrap, z-index entre la vidéo (z=1) et le hero-content (z=10).
 * Le titre (dans .hero-content) est donc naturellement au-dessus : aucun fade, aucun saut. */
#kamelon-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: auto;
}
#kamelon-loader .kl-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 85% 15%, rgba(0,47,167,.32) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 15% 85%, rgba(242,68,29,.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 50% 52%, rgba(230,151,36,.10) 0%, transparent 70%),
    var(--c-dark);
  transition: opacity .75s ease;
  will-change: opacity;
}
#kamelon-loader.fade-bg .kl-bg { opacity: 0; }

/* ============================================
   FAB WhatsApp — bouton flottant bas-droite
   Charte officielle WhatsApp + effet CTA charter
   Visible uniquement section #contact + footer
   ============================================ */
.fab-whatsapp{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:99;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    cursor:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px) scale(.85);
    pointer-events:none;
    transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;
}
.fab-whatsapp.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s;
}
.fab-label{
    position:relative;
    margin-right:14px;
    background:#0d0a11;
    color:#fff;
    padding:.6rem 1.05rem;
    border-radius:99px;
    font-family:var(--f-sans);
    font-size:.74rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.08);
    opacity:0;
    transform:translateX(8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.fab-label::after{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-left:6px solid #0d0a11;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
}
.fab-whatsapp:hover .fab-label{
    opacity:1;
    transform:translateX(0);
}
.fab-circle{
    position:relative;
    width:62px;
    height:62px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#128C7E 0%,#25D366 45%,#4ED882 55%,#128C7E 100%);
    background-size:220% auto;
    background-position:0% center;
    animation:orangeBreathe 7s ease-in-out infinite;
    box-shadow:0 10px 30px rgba(37,211,102,.45),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15),0 0 0 0 rgba(37,211,102,.55);
    transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-position .9s var(--ease);
    isolation:isolate;
    overflow:hidden;
}
.fab-whatsapp.is-visible .fab-circle{
    animation:orangeBreathe 7s ease-in-out infinite,fabPulse 2.4s cubic-bezier(.66,0,0,1) infinite;
}
@keyframes fabPulse{
    0%{box-shadow:0 10px 30px rgba(37,211,102,.45),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15),0 0 0 0 rgba(37,211,102,.55)}
    100%{box-shadow:0 10px 30px rgba(37,211,102,.45),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15),0 0 0 22px rgba(37,211,102,0)}
}
.fab-circle::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .9s var(--ease);
    pointer-events:none;
    z-index:1;
}
.fab-circle svg{
    width:30px;
    height:30px;
    fill:#fff;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.25));
}
.fab-whatsapp:hover .fab-circle{
    transform:translateY(-3px) scale(1.06);
    background-position:100% center;
}
.fab-whatsapp:hover .fab-circle::before{transform:translateX(120%)}
.fab-whatsapp:active .fab-circle{transform:translateY(-1px) scale(1.02)}
@media(max-width:600px){
    .fab-whatsapp{bottom:16px;right:16px}
    .fab-circle{width:54px;height:54px}
    .fab-circle svg{width:26px;height:26px}
    .fab-label{display:none}
}
@media (prefers-reduced-motion:reduce){
    .fab-whatsapp,.fab-circle{animation:none!important;transition:opacity .3s,visibility 0s!important}
}

/* ============================================================
   ACCESSIBILITÉ — prefers-reduced-motion (élargi)
   Fige toutes les animations continues (blobs, polaroïds, dégradés
   chromatiques, marquee logos) tout en conservant l'état visuel
   courant. Aucune disparition d'élément, juste l'arrêt du mouvement.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    /* Blobs ambient hero */
    .ambient-blob{animation:none!important}
    /* Polaroïds flottants koulisses */
    .kou-floater{animation:none!important}
    /* Cycles chromatiques caméléon / orangeBreathe sur titres et capsules */
    .ht-fill,
    .pt-elegant,
    .adn-t,
    .chameleon-text,
    .p-badge,
    .modal-badge,
    .marquee-title-text,
    .footer-email,
    .gradient-text,
    .gradient-text--local{animation:none!important}
    /* Marquee logos infini */
    .marquee-inner{animation:none!important}
    /* Lignes shimmer eyebrow hero */
    .hero-eyebrow .eyebrow-line-left,
    .hero-eyebrow .eyebrow-line-right{animation:none!important}
}


/* === BLOCK BREAK === */


/* Ancrage : la nav est position:fixed (≈ 90px en état initial, ≈ 70px scrolled).
   scroll-margin-top compense cette hauteur pour que le saut #adn-prisme dépose
   le haut de la section juste sous la navbar (saut instantané, pas de smooth). */
#adn-prisme{scroll-margin-top:90px}
/* P4 : vrai #000 comme socle */
.adn{background:#000;padding:clamp(150px,17vw,240px) 20px clamp(150px,17vw,240px);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;position:relative;overflow:hidden;min-height:720px;clip-path:polygon(0 5vw,100% 0,100% calc(100% - 5vw),0 100%);margin:-5vw 0;z-index:6;}
/* P8 : un seul radial pour l'ambient (au lieu de 2) */
.adn-glow{position:absolute;inset:0;pointer-events:none;z-index:0;transition:background 1.3s ease;background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(242,68,29,.06) 0%,transparent 70%);}
.adn-hdr{text-align:center;margin-bottom:clamp(2.5rem,4.5vw,4rem);position:relative;z-index:2;}
.adn-t{display:block;font-family:var(--f-disp);font-size:clamp(3.5rem,8vw,8rem);font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:-.02em;text-align:center;--c1:#FFA500;--c2:#8DB600;background-image:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:chameleonDuo 32s linear infinite;}
@keyframes tshimmer{from{background-position:0% center}to{background-position:300% center}}

.adn .cards{display:flex;gap:7px;height:clamp(520px,58vw,660px);max-height:80vh;max-width:1280px;margin:0 auto;position:relative;z-index:2;}
/* P1 : plus de filter brightness/saturate. P5 : bordure thématique nette quand active. P8 : background #000 sur la carte */
.adn .card{flex:1;position:relative;border-radius:20px;overflow:hidden;transition:flex .8s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s;isolation:isolate;border:1px solid rgba(255,255,255,.06);cursor:none;min-width:60px;background:#000;}
.adn .card.is-on{flex:3.8;cursor:default;border-color:color-mix(in srgb,var(--clr) 55%,rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--clr) 30%,transparent),0 30px 70px -20px rgba(0,0,0,.75),0 0 60px -10px color-mix(in srgb,var(--clr) 28%,transparent);}

/* P1 : opacité directe sur l'art (au lieu de filter brightness) */
.adn .adn-art{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:.3;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .55s cubic-bezier(.16,1,.3,1);}
.adn .card:not(.is-on):hover .adn-art{opacity:.6;}
.adn .card.is-on .adn-art{transform:scale(1.04);opacity:1;}

/* P2 : voile binaire 2-stop + P6 : vignette interne via box-shadow */
.adn .adn-card-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,#000 0%,transparent 55%);box-shadow:inset 0 -90px 100px -50px #000,inset 0 0 80px -30px #000;transition:background .5s cubic-bezier(.16,1,.3,1);}
.adn .card.is-on .adn-card-veil{background:linear-gradient(to top,#000 0%,transparent 62%);}

/* Ghost — un peu plus présent quand actif (point d'ancrage chromatique) */
.adn .c-ghost{position:absolute;right:-.06em;bottom:-.22em;z-index:2;font-family:var(--f-disp);font-weight:800;font-size:clamp(130px,28vw,320px);line-height:1;color:var(--clr);opacity:0;user-select:none;pointer-events:none;transition:opacity .7s cubic-bezier(.16,1,.3,1);white-space:nowrap;letter-spacing:-.04em;}
.adn .card.is-on .c-ghost{opacity:.1;}

/* Numéro badge — gros + glow themed identique au titre vertical */
.adn .c-num{position:absolute;top:22px;left:22px;z-index:5;font-family:var(--f-disp);font-weight:900;font-size:clamp(1.5rem,2.4vw,2.4rem);letter-spacing:.02em;line-height:1;color:var(--clr);opacity:.85;text-shadow:0 2px 6px rgba(0,0,0,.55);transition:opacity .35s;}
.adn .card:not(.is-on):hover .c-num{opacity:1;}
.adn .card.is-on .c-num{opacity:1;}

/* Titre vertical (état fermé) */
.adn .c-vlabel{position:absolute;bottom:32px;left:50%;z-index:5;font-family:var(--f-disp);font-weight:900;font-size:clamp(1rem,1.4vw,1.3rem);text-transform:uppercase;letter-spacing:.18em;color:var(--clr);text-shadow:0 2px 6px rgba(0,0,0,.55);white-space:nowrap;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);}
.adn .card.is-on .c-vlabel{opacity:0;transform:translateX(-50%) rotate(180deg) translateY(12px);pointer-events:none;}

/* Body — apparaît à DROITE quand ouvert (visuel reste à gauche en background) */
.adn .c-back{position:absolute;top:0;bottom:0;right:0;width:clamp(310px,52%,500px);z-index:4;padding:clamp(28px,3.4vw,48px) clamp(24px,3vw,44px);background:linear-gradient(to right,transparent 0%,#000 55%,#000 100%);display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateX(20px);pointer-events:none;transition:opacity .5s cubic-bezier(.16,1,.3,1) .18s,transform .5s cubic-bezier(.16,1,.3,1) .18s;}
.adn .card.is-on .c-back{opacity:1;transform:translateX(0);pointer-events:auto;}

/* ════════════════════════════════════════════════════════
   PANNEAU TEXTE — typographie éditoriale premium
   Hiérarchie : kicker → lead → body → list → tagline
   ════════════════════════════════════════════════════════ */

/* Stagger reveal — chaque enfant s'introduit en cascade */
.adn .c-back > *{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);}
.adn .card.is-on .c-back > *:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.35s;}
.adn .card.is-on .c-back > *:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.45s;}
.adn .card.is-on .c-back > *:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.55s;}
.adn .card.is-on .c-back > *:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.65s;}
.adn .card.is-on .c-back > *:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.75s;}
.adn .card.is-on .c-back > *:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.85s;}

/* Kicker / eyebrow — entrée typographique (numéro + nom du pilier + trait dégradé) */
.adn .adn-kicker{display:flex;align-items:center;gap:.85em;font-family:var(--f-sans);font-weight:700;font-size:clamp(.68rem,.78vw,.78rem);text-transform:uppercase;letter-spacing:.32em;color:var(--clr);text-shadow:0 0 14px color-mix(in srgb,var(--clr) 50%,transparent),0 1px 4px rgba(0,0,0,.5);margin-bottom:clamp(1rem,1.4vw,1.3rem);white-space:nowrap;}
.adn .adn-kicker::after{content:"";flex:1;height:1px;background:linear-gradient(to right,color-mix(in srgb,var(--clr) 70%,transparent) 0%,transparent 100%);}

/* Lead — phrase d'accroche en Bricolage Grotesque + lettrine themed */
.adn .adn-lead{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.25rem,1.7vw,1.65rem);line-height:1.32;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.75),0 0 30px rgba(0,0,0,.4);margin:0 0 clamp(1rem,1.4vw,1.3rem) 0;}
.adn .adn-lead::first-letter{font-family:var(--f-disp);font-weight:800;font-size:1.35em;color:var(--clr);text-shadow:0 0 22px color-mix(in srgb,var(--clr) 70%,transparent),0 0 6px rgba(0,0,0,.6);padding-right:.04em;line-height:1;}
.adn .adn-lead strong{font-weight:700;color:var(--clr);}

/* Paragraphes body — Manrope, bien lisible, contraste élevé */
.adn .c-back p{font-family:var(--f-sans);font-size:clamp(.92rem,1.05vw,1.02rem);font-weight:400;line-height:1.78;color:rgba(255,255,255,.92);letter-spacing:.005em;text-shadow:0 1px 8px rgba(0,0,0,.7);margin:0 0 .75rem 0;}
.adn .c-back p:last-of-type{margin-bottom:0;}

/* Em — Playfair Display italique (accent éditorial charter) */
.adn .c-back em{font-family:var(--f-serif);font-style:italic;color:#fff;font-weight:500;font-size:1.06em;letter-spacing:.005em;}
.adn .c-back strong{font-weight:600;color:#fff;}

/* Liste structurée — vraie <ul> avec puces themed et stagger */
.adn .adn-list{display:block;list-style:none;margin:clamp(1rem,1.4vw,1.3rem) 0;padding:.4rem 0;position:relative;}
.adn .adn-list::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(to bottom,var(--clr) 0%,color-mix(in srgb,var(--clr) 40%,transparent) 60%,transparent 100%);border-radius:2px;box-shadow:0 0 10px color-mix(in srgb,var(--clr) 40%,transparent);}
.adn .adn-list li{font-family:var(--f-sans);font-size:clamp(.86rem,.98vw,.95rem);line-height:1.55;color:rgba(255,255,255,.9);padding:.4rem 0 .4rem 1.45rem;text-shadow:0 1px 6px rgba(0,0,0,.6);position:relative;}
.adn .adn-list li::before{content:"";position:absolute;left:.55rem;top:.95em;width:5px;height:5px;border-radius:50%;background:var(--clr);box-shadow:0 0 8px var(--clr);}
.adn .adn-list li strong{display:inline;color:var(--clr);font-weight:700;margin-right:.4em;letter-spacing:.01em;text-shadow:0 0 12px color-mix(in srgb,var(--clr) 50%,transparent);}
.adn .card.is-on .adn-list li{animation:liReveal .55s cubic-bezier(.16,1,.3,1) backwards;}
.adn .card.is-on .adn-list li:nth-child(1){animation-delay:.7s;}
.adn .card.is-on .adn-list li:nth-child(2){animation-delay:.82s;}
.adn .card.is-on .adn-list li:nth-child(3){animation-delay:.94s;}
.adn .card.is-on .adn-list li:nth-child(4){animation-delay:1.06s;}
@keyframes liReveal{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}

/* Tagline — déclaration finale type pull-quote */
.adn .adn-tagline{display:block;margin-top:clamp(1.3rem,1.8vw,1.6rem);padding-top:1.1rem;border-top:1px solid color-mix(in srgb,var(--clr) 38%,transparent);font-family:var(--f-disp);font-weight:800;font-size:clamp(.9rem,1.1vw,1.05rem);text-transform:uppercase;letter-spacing:.18em;color:var(--clr);text-shadow:0 0 22px color-mix(in srgb,var(--clr) 55%,transparent),0 1px 6px rgba(0,0,0,.65);position:relative;}
.adn .adn-tagline::before{content:"✦";display:inline-block;margin-right:.6em;font-size:.9em;color:var(--clr);opacity:.95;text-shadow:0 0 14px color-mix(in srgb,var(--clr) 70%,transparent);vertical-align:.04em;}

/* Bottom bar : strictement invisible quand fermée, révélée uniquement à l'ouverture */
.adn .c-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--clr);box-shadow:0 0 14px var(--clr),0 0 32px color-mix(in srgb,var(--clr) 35%,transparent);z-index:6;transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
.adn .card.is-on .c-bar{transform:scaleX(1);opacity:1;}

/* === COULEURS THÉMATIQUES === */
.adn .k1{--clr:#F2441D;}
.adn .k2{--clr:#E69724;}
.adn .k3{--clr:#5b89f7;}
.adn .k4{--clr:#9b51e0;}

/* === ART CARTE 1 : Vision 360 — orange === */
.adn .k1 .adn-art{background:radial-gradient(circle at 50% 28%,#220a03 0%,#100301 45%,#050208 100%);}
.adn .c1-orb{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,#FF6B50 25%,rgba(242,68,29,.75) 55%,transparent 75%);border-radius:50%;filter:blur(8px);animation:c1Breath 4s ease-in-out infinite alternate;}
@keyframes c1Breath{0%{transform:translate(-50%,-50%) scale(.82);opacity:.75}100%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.adn .c1-rings{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);}
.adn .c1-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(242,68,29,.55);animation:c1Ring 4.5s ease-in-out infinite alternate;}
.adn .c1-ring:nth-child(1){width:70px;height:70px;animation-delay:0s;border-color:rgba(242,68,29,.6);}
.adn .c1-ring:nth-child(2){width:130px;height:130px;animation-delay:.4s;border-color:rgba(242,68,29,.45);}
.adn .c1-ring:nth-child(3){width:200px;height:200px;animation-delay:.8s;border-color:rgba(242,68,29,.3);}
.adn .c1-ring:nth-child(4){width:290px;height:290px;animation-delay:1.2s;border-color:rgba(242,68,29,.18);}
.adn .c1-ring:nth-child(5){width:400px;height:400px;animation-delay:1.6s;border-color:rgba(242,68,29,.08);}
@keyframes c1Ring{0%{transform:translate(-50%,-50%) scale(.95);opacity:.5}100%{transform:translate(-50%,-50%) scale(1.05);opacity:1}}
.adn .c1-cross{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);width:260px;height:260px;}
.adn .c1-cross::before,.adn .c1-cross::after{content:"";position:absolute;background:rgba(242,68,29,.22);}
.adn .c1-cross::before{width:100%;height:1px;top:50%;left:0;}
.adn .c1-cross::after{width:1px;height:100%;left:50%;top:0;}

/* === ART CARTE 2 : Maîtrise — gold === */
.adn .k2 .adn-art{background:radial-gradient(circle at 40% 25%,#1c1001 0%,#0c0800 50%,#050208 100%);}
.adn .c2-lava{position:absolute;inset:-20%;background:#000;filter:contrast(10) blur(0px);display:flex;justify-content:center;align-items:center;mix-blend-mode:screen;}
.adn .c2-blob{position:absolute;border-radius:50%;background:#E69724;filter:blur(12px);}
.adn .c2-blob:nth-child(1){width:160px;height:160px;top:20%;left:35%;animation:blob1 9s ease-in-out infinite alternate;}
.adn .c2-blob:nth-child(2){width:120px;height:120px;top:35%;left:55%;animation:blob2 11s ease-in-out infinite alternate-reverse;background:#FFC44D;}
.adn .c2-blob:nth-child(3){width:90px;height:90px;top:50%;left:40%;animation:blob3 7s ease-in-out infinite alternate;background:#fff;}
.adn .c2-blob:nth-child(4){width:110px;height:110px;top:15%;left:50%;animation:blob4 13s ease-in-out infinite alternate;}
@keyframes blob1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,50px) scale(1.3)}}
@keyframes blob2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(25px,-35px) scale(.8)}}
@keyframes blob3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-20px,40px) scale(1.4)}}
@keyframes blob4{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,30px) scale(.9)}}

/* === ART CARTE 3 : Capture — klein bleu === */
.adn .k3 .adn-art{background:radial-gradient(ellipse at 50% 35%,#010a28 0%,#010510 55%,#050208 100%);}
.adn .c3-grid{position:absolute;inset:0;width:100%;height:100%;}
.adn .c3-flash{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 12px 4px rgba(91,137,247,.9),0 0 40px 15px rgba(0,47,167,.6),0 0 90px 30px rgba(0,47,167,.25);animation:c3Flash 3.5s ease-in-out infinite alternate;}
@keyframes c3Flash{0%{opacity:.7;box-shadow:0 0 8px 3px rgba(91,137,247,.8),0 0 30px 10px rgba(0,47,167,.5)}100%{opacity:1;box-shadow:0 0 18px 6px rgba(91,137,247,1),0 0 60px 25px rgba(0,47,167,.7),0 0 120px 50px rgba(0,47,167,.2)}}
.adn .c3-wave{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(91,137,247,.5);border-radius:50%;animation:c3Wave 3s ease-out infinite;pointer-events:none;}
.adn .c3-wave:nth-child(1){animation-delay:0s;}
.adn .c3-wave:nth-child(2){animation-delay:1s;}
.adn .c3-wave:nth-child(3){animation-delay:2s;}
@keyframes c3Wave{0%{width:0;height:0;opacity:1;border-width:4px;}100%{width:350px;height:350px;opacity:0;border-width:1px;}}

/* === ART CARTE 4 : Signature — purple === */
.adn .k4 .adn-art{background:radial-gradient(ellipse at 65% 25%,#130825 0%,#080415 50%,#050208 100%);}
.adn .c4-orb{position:absolute;top:25%;left:55%;transform:translate(-50%,-50%);width:180px;height:180px;background:radial-gradient(circle,rgba(155,81,224,.95) 0%,rgba(100,40,180,.45) 50%,transparent 72%);border-radius:50%;filter:blur(14px);animation:c4Orb 7s ease-in-out infinite alternate;}
@keyframes c4Orb{0%{transform:translate(-50%,-50%) scale(.85);opacity:.7}100%{transform:translate(-42%,-58%) scale(1.15);opacity:1}}
.adn .c4-svg{position:absolute;top:10%;left:5%;right:5%;height:55%;z-index:2;}
.adn .c4-path-1{stroke-dasharray:600;stroke-dashoffset:600;animation:c4Draw1 4s ease-in-out infinite;}
.adn .c4-path-2{stroke-dasharray:400;stroke-dashoffset:400;animation:c4Draw2 4s ease-in-out .5s infinite;}
.adn .c4-path-3{stroke-dasharray:250;stroke-dashoffset:250;animation:c4Draw3 4s ease-in-out 1s infinite;}
@keyframes c4Draw1{0%{stroke-dashoffset:600;opacity:.9}45%{stroke-dashoffset:0;opacity:.9}75%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:-600;opacity:0}}
@keyframes c4Draw2{0%{stroke-dashoffset:400;opacity:.7}45%{stroke-dashoffset:0;opacity:.7}75%{stroke-dashoffset:0;opacity:.7}100%{stroke-dashoffset:-400;opacity:0}}
@keyframes c4Draw3{0%{stroke-dashoffset:250;opacity:.5}45%{stroke-dashoffset:0;opacity:.5}75%{stroke-dashoffset:0;opacity:.5}100%{stroke-dashoffset:-250;opacity:0}}

/* === SIMPLIFICATION ADN — rendu minimaliste, plat et professionnel ===
   - Halo global de section désactivé
   - Décorations animées (orbes, anneaux, blobs, flashes, vagues, SVG) masquées
   - .adn-art reçoit un dégradé fixe et subtil basé sur --clr de chaque carte
   - État fermé / ouvert (.is-on) partagent le même fond plat */
.adn-glow{display:none!important;}
.adn .adn-art{background:linear-gradient(160deg,color-mix(in srgb,var(--clr) 28%,#0a0612) 0%,color-mix(in srgb,var(--clr) 10%,#050208) 60%,#050208 100%)!important;opacity:1!important;transform:none!important;}
.adn .c1-orb,.adn .c1-rings,.adn .c1-cross,
.adn .c2-lava,.adn .c2-blob,
.adn .c3-grid,.adn .c3-flash,.adn .c3-wave,
.adn .c4-orb,.adn .c4-svg{display:none!important;}

/* === RESPONSIVE MOBILE === */
@media(max-width:900px){
  .adn .cards{flex-direction:column;height:auto;gap:8px;}
  .adn .card{flex:none!important;height:90px;min-width:unset;transition:height .75s cubic-bezier(.16,1,.3,1),filter .4s;border-radius:14px;}
  .adn .card.is-on{flex:none!important;height:auto;min-height:480px;}
  .adn .c-vlabel{writing-mode:horizontal-tb;text-orientation:mixed;bottom:auto;top:50%;left:70px;transform:translateY(-50%);font-size:.82rem;letter-spacing:.18em;opacity:1;}
  .adn .card.is-on .c-vlabel{opacity:0;}
  .adn .c-num{top:50%;transform:translateY(-50%);left:20px;}
  .adn .card.is-on .c-num{top:18px;left:20px;transform:none;}
  .adn .card.is-on .c-ghost{font-size:200px;opacity:.06;}
  .adn .c-back{position:relative;width:100%;background:linear-gradient(to top,rgba(5,2,8,.95) 0%,rgba(5,2,8,.6) 80%,transparent 100%);padding:80px 22px 30px;height:auto;}
  .adn .c-back h3{font-size:1.55rem;}
  .adn .c-back p{font-size:.85rem;}
}


/* === BLOCK BREAK === */


/* Section : fond crème charter, dim ciblé sur le contenu (lightbox épargnée) */
.kou-section{position:relative;background:var(--c-creme);padding:clamp(100px,13vw,170px) 0 clamp(80px,11vw,140px);overflow:hidden;}
.kou-section .container,.kou-section .kou-blob,.kou-section .kou-topline{transition:opacity .55s var(--ease),filter .55s var(--ease);}
.kou-section.is-dimmed .container,.kou-section.is-dimmed .kou-blob,.kou-section.is-dimmed .kou-topline{opacity:.32;filter:blur(2px);}
.kou-section::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;mix-blend-mode:multiply;}
.kou-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.kou-blob.b1{width:50vw;height:50vw;background:rgba(242,68,29,.16);top:-18%;left:-15%;}
.kou-blob.b2{width:40vw;height:40vw;background:rgba(230,151,36,.14);bottom:-15%;right:-12%;}
.kou-blob.b3{width:32vw;height:32vw;background:rgba(155,81,224,.08);top:38%;left:40%;}
.kou-topline{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,68,29,.6) 30%,rgba(155,81,224,.5) 70%,transparent);z-index:1;}
.kou-section .container{position:relative;z-index:2;}

/* === HEADER === */
.kou-header{text-align:center;margin-bottom:2.6rem;}
.kou-title{font-family:var(--f-disp);font-size:clamp(2.8rem,5.5vw,5rem);font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:-.02em;color:var(--c-dark);margin-bottom:1.4rem;text-shadow:0 2px 20px rgba(240,232,216,.7);display:flex;align-items:center;justify-content:center;gap:.35em;flex-wrap:nowrap;}
@media(max-width:560px){.kou-title{flex-wrap:wrap;}}
/* "De nos réseaux" : style 1:1 identique à .kom-header-title em (Kaméléons) */
.kou-title em{font-family:var(--f-hand);font-style:normal;font-weight:700;color:#FF4E2E;text-transform:none;font-size:1em;display:inline-block;margin:0;padding:0;line-height:1;vertical-align:baseline;text-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 0 rgba(150,30,10,.18),0 0 18px rgba(255,78,46,.4);}
.kou-socials{display:flex;justify-content:center;gap:.85rem;flex-wrap:wrap;}
.kou-slink{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.5rem;border-radius:99px;font-family:var(--f-sans);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;text-decoration:none;border:1.5px solid;transition:all .45s var(--ease);position:relative;overflow:hidden;cursor:none;}
.kou-slink svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
.kou-slink.ig{background:rgba(255,255,255,.55);border-color:rgba(253,29,29,.35);color:#D63939;backdrop-filter:blur(8px);}
.kou-slink.ig:hover{background:linear-gradient(45deg,#833AB4 0%,#FD1D1D 50%,#F77737 100%);border-color:transparent;color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px rgba(253,29,29,.35);}
.kou-slink.li{background:rgba(255,255,255,.55);border-color:rgba(10,102,194,.4);color:#0A66C2;backdrop-filter:blur(8px);}
.kou-slink.li:hover{background:#0A66C2;border-color:#0A66C2;color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px rgba(10,102,194,.35);}

/* === HINT === */
.kou-hint{text-align:center;margin:2rem 0 1.8rem;}
.kou-hint-inner{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-sans);font-size:.66rem;font-weight:700;color:rgba(26,13,34,.5);letter-spacing:.18em;text-transform:uppercase;}
.kou-hint-inner::before,.kou-hint-inner::after{content:'';display:block;width:24px;height:1px;background:rgba(26,13,34,.18);}

/* === GRILLE POLAROÏDS — ligne unique de 6, format généreux === */
.kou-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;max-width:1980px;margin:0 auto;padding:2rem clamp(20px,3vw,40px) 4rem;perspective:1600px;}

/* === Stagger Y déstructuré + flottement organique par carte === */
.kou-floater{position:relative;will-change:transform;}
.kou-floater:nth-child(1){margin-top:0;}
.kou-floater:nth-child(2){margin-top:54px;}
.kou-floater:nth-child(3){margin-top:18px;}
.kou-floater:nth-child(4){margin-top:72px;}
.kou-floater:nth-child(5){margin-top:28px;}
.kou-floater:nth-child(6){margin-top:48px;}
.kou-floater:nth-child(1){animation:kouFloat1 7s ease-in-out infinite alternate;animation-delay:1s;}
.kou-floater:nth-child(2){animation:kouFloat2 8.2s ease-in-out infinite alternate;animation-delay:1.2s;}
.kou-floater:nth-child(3){animation:kouFloat3 6.8s ease-in-out infinite alternate;animation-delay:1.4s;}
.kou-floater:nth-child(4){animation:kouFloat4 9s ease-in-out infinite alternate;animation-delay:1.6s;}
.kou-floater:nth-child(5){animation:kouFloat5 7.5s ease-in-out infinite alternate;animation-delay:1.8s;}
.kou-floater:nth-child(6){animation:kouFloat6 8.5s ease-in-out infinite alternate;animation-delay:2s;}
@keyframes kouFloat1{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
@keyframes kouFloat2{from{transform:translateY(6px)}to{transform:translateY(-9px)}}
@keyframes kouFloat3{from{transform:translateY(-9px)}to{transform:translateY(6px)}}
@keyframes kouFloat4{from{transform:translateY(8px)}to{transform:translateY(-8px)}}
@keyframes kouFloat5{from{transform:translateY(-6px)}to{transform:translateY(10px)}}
@keyframes kouFloat6{from{transform:translateY(9px)}to{transform:translateY(-7px)}}

/* === CARTE EDITORIAL — frame sombre, rotation subtile, identité forte === */
.kou-card{--rot:0deg;position:relative;background:#0a0712;border-radius:8px;overflow:hidden;cursor:none;transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .55s var(--ease),border-color .45s var(--ease);opacity:0;border:1px solid rgba(255,255,255,.07);box-shadow:0 24px 50px rgba(0,0,0,.55),0 8px 16px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.02);isolation:isolate;transform:rotate(var(--rot));}
.kou-card:hover{will-change:transform}
.kou-floater:nth-child(1) .kou-card{--rot:-1.4deg;--accent:#FFA500;--tag:"BTS";}
.kou-floater:nth-child(2) .kou-card{--rot:1deg;--accent:#FFD700;--tag:"EVENT";}
.kou-floater:nth-child(3) .kou-card{--rot:-.6deg;--accent:#C7EA46;--tag:"LIVE";}
.kou-floater:nth-child(4) .kou-card{--rot:1.3deg;--accent:#8DB600;--tag:"POST";}
.kou-floater:nth-child(5) .kou-card{--rot:-1.1deg;--accent:#6B8E23;--tag:"AERIAL";}
.kou-floater:nth-child(6) .kou-card{--rot:.7deg;--accent:#228B22;--tag:"SHOOT";}

/* Image full-bleed — 9:16 cinéma + vignette interne pour profondeur */
.kou-card-img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .65s var(--ease);filter:saturate(.92) contrast(1.06) brightness(.92);}
.kou-card:hover .kou-card-img{transform:scale(1.07);filter:saturate(1.12) contrast(1.08) brightness(1);}
/* Vignette cinéma — assombrit subtilement les bords pour focus image */
.kou-card .kou-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.45) 100%);opacity:.85;transition:opacity .45s var(--ease);}
.kou-card:hover .kou-vignette{opacity:.5;}

/* Numéro éditorial — XXL en haut-gauche, semi-transparent, rentre dans l'image */
.kou-card-num{position:absolute;top:14px;left:18px;z-index:6;font-family:var(--f-disp);font-weight:800;font-size:clamp(2.6rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.92);text-shadow:0 0 24px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5);font-variant-numeric:tabular-nums;mix-blend-mode:difference;transition:transform .55s var(--ease),color .45s var(--ease);}
.kou-card:hover .kou-card-num{transform:translateY(-2px);color:var(--accent);}

/* Tag chip — petit, themed, bottom-right de l'image (pas dans le strip) */
.kou-card-tag{position:absolute;top:22px;right:18px;z-index:6;font-family:var(--f-sans);font-weight:800;font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:#fff;padding:5px 11px 5px 13px;border-radius:99px;background:rgba(13,10,20,.55);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.1));box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--accent) 14%,transparent);transition:all .4s var(--ease);}
.kou-card-tag::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);margin-right:.5em;vertical-align:.05em;}
.kou-card:hover .kou-card-tag{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 30px color-mix(in srgb,var(--accent) 28%,transparent);transform:translateY(-1px);}

/* Strip bas — texte premium avec hiérarchie claire */
.kou-card-strip{position:absolute;left:0;right:0;bottom:0;padding:90px 22px 22px;background:linear-gradient(to top,rgba(5,2,8,.97) 0%,rgba(5,2,8,.78) 30%,rgba(5,2,8,.4) 70%,transparent 100%);z-index:4;display:flex;flex-direction:column;gap:7px;}
.kou-card-caption{font-family:var(--f-disp);font-size:clamp(1rem,1.18vw,1.2rem);font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.015em;text-shadow:0 2px 14px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;}
.kou-card-date{font-family:var(--f-sans);font-size:.62rem;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:.7em;}
.kou-card-date::before{content:'';display:inline-block;width:18px;height:1px;background:var(--accent,#FFA500);box-shadow:0 0 8px var(--accent,#FFA500);flex-shrink:0;}

/* Liseré accent en bas — révélé en hover, indique la couleur signature */
.kou-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;z-index:7;background:var(--accent,#FFA500);box-shadow:0 0 18px var(--accent,#FFA500),0 0 32px color-mix(in srgb,var(--accent) 40%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.16,1,.3,1);}
.kou-card:hover::after{transform:scaleX(1);}

/* Hover : lift, rotation se redresse, glow themed */
.kou-card:hover{transform:rotate(0deg) translateY(-18px);z-index:10;box-shadow:0 50px 90px rgba(0,0,0,.7),0 18px 36px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 90px color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 50%,rgba(255,255,255,.07));}

/* === ENTRÉE ANIMÉE — fade up + rotation depuis l'angle === */
@keyframes kouCardIn{from{opacity:0;transform:rotate(var(--rot)) translateY(60px) scale(.94);}to{opacity:1;transform:rotate(var(--rot)) translateY(0) scale(1);}}
.kou-grid.revealed .kou-floater:nth-child(1) .kou-card{animation:kouCardIn .85s cubic-bezier(.16,1,.3,1) .05s forwards;}
.kou-grid.revealed .kou-floater:nth-child(2) .kou-card{animation:kouCardIn .85s cubic-bezier(.16,1,.3,1) .15s forwards;}
.kou-grid.revealed .kou-floater:nth-child(3) .kou-card{animation:kouCardIn .85s cubic-bezier(.16,1,.3,1) .25s forwards;}
.kou-grid.revealed .kou-floater:nth-child(4) .kou-card{animation:kouCardIn .85s cubic-bezier(.16,1,.3,1) .35s forwards;}
.kou-grid.revealed .kou-floater:nth-child(5) .kou-card{animation:kouCardIn .85s cubic-bezier(.16,1,.3,1) .45s forwards;}
.kou-grid.revealed .kou-floater:nth-child(6) .kou-card{animation:kouCardIn .85s cubic-bezier(.16,1,.3,1) .55s forwards;}

/* === LIGHTBOX — arrière-plan cinématique inspiré du hero === */
.kou-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);}
.kou-lb.open{pointer-events:auto;opacity:1;}
.kou-lb-bg{position:absolute;inset:0;background:#030105;cursor:none;overflow:hidden;}
/* Blobs ambient — même palette que .cinematic-bg du hero (klein/orange/gold) */
.kou-lb-bg::before{content:'';position:absolute;width:55vw;height:55vw;background:rgba(0,47,167,.45);border-radius:50%;filter:blur(110px);top:-12%;right:-15%;animation:kouLbDriftA 24s ease-in-out infinite alternate;}
.kou-lb-bg::after{content:'';position:absolute;width:50vw;height:50vw;background:rgba(242,68,29,.35);border-radius:50%;filter:blur(110px);bottom:-15%;left:-10%;animation:kouLbDriftB 22s ease-in-out infinite alternate-reverse;}
@keyframes kouLbDriftA{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,8vh) scale(1.15)}}
@keyframes kouLbDriftB{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,-6vh) scale(1.18)}}
/* Calque verre (glassmorphism) qui floute & adoucit le fond */
.kou-lb-glass{position:absolute;inset:0;backdrop-filter:blur(80px);-webkit-backdrop-filter:blur(80px);background:rgba(5,2,8,.42);pointer-events:none;}

.kou-lb-shell{position:relative;z-index:10;display:grid;grid-template-columns:auto 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;max-width:1100px;width:90vw;padding:2rem;transform:scale(.88) translateY(30px);transition:transform .55s var(--ease);}
.kou-lb.open .kou-lb-shell{transform:scale(1) translateY(0);}

/* Grande polaroid lightbox — format 9:16 cinéma, paper cream */
.kou-lb-pol{background:var(--c-creme);padding:18px 18px 100px;border-radius:4px;width:clamp(240px,26vw,340px);flex-shrink:0;box-shadow:0 60px 120px rgba(0,0,0,.85),0 20px 40px rgba(0,0,0,.5),0 0 100px rgba(242,68,29,.2);position:relative;}
.kou-lb-pol::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);width:80px;height:18px;background:linear-gradient(135deg,rgba(242,68,29,.45) 0%,rgba(242,68,29,.3) 50%,rgba(242,68,29,.45) 100%);box-shadow:0 3px 10px rgba(0,0,0,.35);border-radius:1px;mix-blend-mode:multiply;z-index:5;}
.kou-lb-pol::after{content:'';position:absolute;inset:0;border-radius:4px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.4'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.1;pointer-events:none;z-index:6;}
.kou-lb.open .kou-lb-pol{animation:kouPolSwing .7s var(--ease) forwards;}
@keyframes kouPolSwing{0%{transform:rotate(-6deg)}55%{transform:rotate(2.5deg)}100%{transform:rotate(0deg)}}
.kou-lb-pol-img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:2px;display:block;filter:saturate(1.02) contrast(1.03);}
.kou-lb-pol-strip{position:absolute;bottom:0;left:0;right:0;height:100px;display:flex;flex-direction:column;justify-content:center;padding:0 22px;z-index:7;}
.kou-lb-pol-caption{font-family:var(--f-hand);font-size:1.4rem;font-weight:700;color:#1a0d22;line-height:1.05;margin-bottom:4px;}
.kou-lb-pol-num{font-family:var(--f-sans);font-size:.62rem;font-weight:800;color:rgba(26,13,34,.4);letter-spacing:.22em;text-transform:uppercase;}

/* Détails panel */
.kou-lb-info{color:#fff;position:relative;}
.kou-lb-dots{display:flex;gap:.5rem;margin-bottom:1.6rem;}
.kou-lb-dot{height:5px;width:5px;border-radius:3px;background:rgba(255,255,255,.18);transition:all .4s var(--ease);cursor:none;}
.kou-lb-dot.active{background:var(--c-orange);width:24px;box-shadow:0 0 10px rgba(242,68,29,.6);}
.kou-lb-meta{display:block;font-family:var(--f-sans);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:var(--c-orange);margin-bottom:.85rem;text-shadow:0 0 14px rgba(242,68,29,.4);}
.kou-lb-ttl{font-family:var(--f-disp);font-size:clamp(2rem,3.8vw,3.2rem);font-weight:800;line-height:1.02;text-transform:uppercase;letter-spacing:-.012em;margin-bottom:1.1rem;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6);transition:opacity .3s,transform .35s var(--ease);}
.kou-lb-dsc{font-family:var(--f-serif);font-size:clamp(.95rem,1.3vw,1.1rem);font-style:italic;color:rgba(255,255,255,.78);line-height:1.65;margin-bottom:2rem;max-width:420px;transition:opacity .3s,transform .35s var(--ease);}
.kou-lb-acts{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;}
.kou-lb-cta{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.7rem;border-radius:99px;background:linear-gradient(135deg,#FF4E2E 0%,#FF6B50 45%,#FF8A72 55%,#FF4E2E 100%);background-size:220% auto;animation:orangeBreathe 7s ease-in-out infinite;color:#fff;font-family:var(--f-sans);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;text-decoration:none;box-shadow:0 8px 24px rgba(242,68,29,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease);cursor:none;}
.kou-lb-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(242,68,29,.55);}
.kou-lb-cta svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;flex-shrink:0;}
.kou-lb-cls{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.65);font-family:var(--f-sans);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;cursor:none;transition:all .35s var(--ease);backdrop-filter:blur(10px);}
.kou-lb-cls:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateX(-4px);}

/* Nav prev/next */
.kou-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;cursor:none;transition:all .35s var(--ease);backdrop-filter:blur(10px);z-index:20;font-size:1.1rem;}
.kou-lb-nav:hover{background:var(--c-orange);border-color:var(--c-orange);color:#fff;box-shadow:0 8px 24px rgba(242,68,29,.45);}
.kou-lb-prev{left:-72px;}
.kou-lb-next{right:-72px;}

/* Close X */
.kou-lb-x{position:absolute;top:-2.6rem;right:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:none;font-size:.9rem;transition:all .3s;}
.kou-lb-x:hover{background:rgba(255,255,255,.2);color:#fff;}

.kou-lb-info.changing .kou-lb-ttl,
.kou-lb-info.changing .kou-lb-dsc{opacity:0;transform:translateX(-12px);}

/* === RESPONSIVE === */
@media(max-width:1100px){
  .kou-grid{grid-template-columns:repeat(3,1fr);gap:2rem 1.4rem;}
}
@media(max-width:700px){
  .kou-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem;}
  .kou-floater{animation:none!important;}
  .kou-grid.revealed .kou-floater .kou-card{animation:none;opacity:1;}
  .kou-lb-shell{grid-template-columns:1fr;gap:1.8rem;padding:1.5rem;}
  .kou-lb-pol{width:min(240px,65vw);margin:0 auto;}
  .kou-lb-prev{left:.5rem;}
  .kou-lb-next{right:.5rem;}
  .kou-lb-acts{flex-direction:column;align-items:flex-start;}
}
@media(max-width:500px){
  .kou-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding:1rem .5rem 2rem;scrollbar-width:none;}
  .kou-grid::-webkit-scrollbar{display:none;}
  .kou-floater{flex-shrink:0;width:200px;scroll-snap-align:center;animation:none!important;}
}
@media (prefers-reduced-motion:reduce){
  .kou-card,.kou-grid.revealed .kou-card{animation:none!important;opacity:1;transition:none;}
  .kou-eyebrow-dot{animation:none;}
  .kou-lb.open .kou-lb-pol{animation:none;}
  .kou-lb-cta{animation:none;}
}


/* === BLOCK BREAK === */