@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/outfit-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pressstart2p-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pressstart2p-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/titanone-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/titanone-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

  :root{
    --creme:#FAF1DF;
    --creme2:#FFE7BF;
    --bleu:#97DDE9;
    --noir:#191919;
    --gris:#3F3F3F;
    --jaune:#FDBB47;
    --orange:#FC7D34;
    --corail:#FE5F55;
    --blanc:#FFFFFF;
    --orange-txt:#C2410C;
    --corail-txt:#C0322A;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{font-family:'Outfit',sans-serif;background:var(--creme);color:var(--noir);line-height:1.6;overflow-x:hidden}
  h1,h2,.display{font-family:'Titan One',cursive;font-weight:400;line-height:1.16;letter-spacing:.8px}
  h1,h2,h3{text-wrap:balance}
  p,li,q,.a,.ctx,.qhint,.qtitle,.implic-punch,.dmore-txt,.win-cap,.bigquote{text-wrap:pretty}
  /* Sous-titres et intros : lignes equilibrees, jamais de derniere ligne moignon */
  .sub,.sub2,.pain-sub,.lead,.sys-p,.ddesc,.hero-team p,.parcours-note{text-wrap:balance}
  /* Tetes de section centrees : kicker + titre + intro, le contenu reste aligne a gauche */
  section>.wrap>.kicker,section>.wrap>h2,section>.wrap>.sys-h2{text-align:center}
  section>.wrap>.sub,section>.wrap>.sub2,section>.wrap>.pain-sub,section>.wrap>.lead{
    text-align:center;margin-left:auto;margin-right:auto}
  section>.wrap>h2{max-width:820px;margin-left:auto;margin-right:auto}
  .pixel{font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:1px}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  section{padding:88px 0}

  /* ---------- NAV ---------- */
  nav{position:sticky;top:0;z-index:50;background:var(--creme);border-bottom:2px solid var(--noir)}
  /* La flamme du logo s'anime depuis l'interieur de logo-brulance.svg et de
     logo-brulance-footer.svg : le CSS d'une page n'entre pas dans un SVG
     charge en <img>. Ne pas remettre de regles ici, elles seraient inertes.
     Les keyframes flick-* ci-dessous servent aux flammes inlinees du hero
     (.orbit-flame) et de la fenetre systeme (.os-flame), elles restent. */
  @keyframes flick-a{0%,100%{fill:#FDBB47}33%{fill:#FC7D34}66%{fill:#FE5F55}}
  @keyframes flick-b{0%,100%{fill:#FC7D34}33%{fill:#FE5F55}66%{fill:#FDBB47}}
  @keyframes flick-c{0%,100%{fill:#FE5F55}33%{fill:#FDBB47}66%{fill:#FC7D34}}
  .nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:12px 24px;max-width:1120px;margin:0 auto}
  .nav-logo svg{height:52px;width:auto;display:block}
  .nav-links{display:flex;gap:32px;align-items:center;justify-content:center}
  .nav-links a{color:var(--noir);text-decoration:none;font-weight:600;font-size:15px}
  .nav-links a:not(.btn):hover{color:var(--orange-txt)}
  /* CTA dropdown : router par intention */
  .nav-cta{position:relative}
  .nav-cta .btn{cursor:pointer;font-family:'Outfit',sans-serif}
  .caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
         border-top:6px solid var(--noir);display:inline-block;transition:transform .15s}
  .nav-cta.open .caret{transform:rotate(180deg)}
  .cta-menu{position:absolute;top:calc(100% + 14px);left:0;width:min(340px,88vw);background:var(--creme);
            border:2px solid var(--noir);border-radius:14px;box-shadow:5px 5px 0 rgba(25,25,25,.16);
            padding:10px;z-index:60}
  .cta-menu a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--noir)}
  .cta-menu a:hover{background:var(--creme2)}
  .cta-menu a strong{display:block;font-size:15px;font-weight:800}
  .cta-menu a span{display:block;font-size:13px;color:var(--gris);font-weight:500;margin-top:2px}
  .cta-menu a + a{margin-top:2px;border-top:2px dashed rgba(25,25,25,.15);border-radius:0 0 10px 10px}
  /* L'action rapide : seance payante, mise en avant jaune + eclair */
  .cta-menu a.fast{display:flex;gap:11px;align-items:flex-start;background:var(--blanc);
                   border:2px solid var(--noir);border-radius:10px;margin-top:8px;
                   box-shadow:3px 3px 0 rgba(25,25,25,.2);transition:background .15s}
  .cta-menu a.fast:hover{background:var(--creme2)}
  .cta-menu .zap{width:18px;height:18px;flex:none;margin-top:3px}
  .cta-menu .zap rect{fill:var(--orange)}

  /* ---------- VUE "UN OS ?" (serviette Dilhan) ---------- */
  .os-hero{background:var(--noir);border-bottom:2px solid var(--noir);padding:80px 0 60px;text-align:center}
  .os-hero h1{font-size:clamp(30px,4.2vw,48px);color:var(--blanc);max-width:860px;margin:0 auto 18px}
  .os-lead{font-size:18px;font-weight:500;color:#d8d8d8;max-width:680px;margin:0 auto;text-wrap:balance}
  .os-lead strong{color:var(--jaune)}
  .os-scene{position:relative;width:min(680px,92vw);height:380px;margin:26px auto 0}
  .os-flame{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:200px;height:200px;
            filter:drop-shadow(0 0 36px rgba(252,125,52,.35))}
  .os-flame svg{width:100%;height:100%}
  .os-flame .z9_st2{animation:flick-a 1.05s steps(1) infinite}
  .os-flame .z9_st3{animation:flick-b 1.05s steps(1) infinite}
  .os-flame .z9_st4{animation:flick-c 1.05s steps(1) infinite}
  .os-word{position:absolute;font-weight:800;color:var(--creme);font-size:17px;opacity:0;animation:osw .6s ease forwards}
  @keyframes osw{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(max-width:700px){
    .os-scene{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding-top:230px;min-height:280px}
    .os-word{position:static !important}
    .os-flame{top:0;transform:translateX(-50%)}
  }
  .foyer-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
  .fstep{background:var(--blanc);border:2px solid var(--noir);border-radius:14px;padding:24px 16px 20px;position:relative;
         box-shadow:5px 5px 0 rgba(25,25,25,.12)}
  .fstep h3{font-family:'Outfit';font-weight:800;font-size:17px;margin:8px 0 6px}
  .fstep p{font-size:14.5px;color:var(--gris);font-weight:500}
  .fstep .mtag{margin-top:14px;display:inline-block}
  .fcredit{display:block;font-size:12px;font-weight:700;color:var(--gris);margin-top:8px}
  .fstep.f1{border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;transform:rotate(-.6deg)}
  .fstep.f2{background-color:#F4FBFD;
            background-image:linear-gradient(rgba(151,221,233,.45) 1px,transparent 1px),
                             linear-gradient(90deg,rgba(151,221,233,.45) 1px,transparent 1px);
            background-size:18px 18px}
  .fstep.f3:before{content:"";position:absolute;top:0;left:0;right:0;height:9px;
                   background:repeating-linear-gradient(45deg,var(--jaune) 0 10px,var(--noir) 10px 20px);
                   border-radius:11px 11px 0 0;border-bottom:2px solid var(--noir)}
  @media(max-width:900px){.foyer-row{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.foyer-row{grid-template-columns:1fr}}
  .osx-sec{background:var(--blanc);border-top:2px solid var(--noir)}
  .osx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
  .osx{border:2px solid var(--noir);border-radius:14px;overflow:hidden;background:var(--blanc);
       box-shadow:6px 6px 0 rgba(25,25,25,.12);text-decoration:none;color:var(--noir);transition:transform .15s}
  .osx:hover{transform:translateY(-5px)}
  .osx-body{padding:16px 18px}
  .osx-body strong{display:block;font-size:15.5px}
  .osx-body span{display:block;font-size:13px;color:var(--gris);font-weight:600;margin-top:3px}
  @media(max-width:800px){.osx-grid{grid-template-columns:1fr}}

  /* ---------- PILIER SUR MESURE : la scene marche/sur-mesure ---------- */
  .fit-scene{position:relative;width:250px;height:238px;margin:0 auto}
  .fit-frame{position:absolute;left:-12px;top:-12px;width:184px;height:184px;border:2px solid var(--noir);
             border-radius:12px;background:rgba(255,255,255,.5);transition:opacity .5s,transform .5s}
  .fit-scene.mesure .fit-frame{opacity:0;transform:scale(.92)}
  .fit-tile{position:absolute;width:46px;height:46px;border:2px solid var(--noir);border-radius:8px;background:var(--blanc);
            display:flex;align-items:center;justify-content:center;
            left:calc(var(--c) * 52px);top:calc(var(--r) * 52px);
            transition:background .45s,border-color .45s,transform .45s;box-shadow:2px 2px 0 rgba(25,25,25,.15)}
  .fit-tile i{width:11px;height:11px;border-radius:3px;border:2px solid var(--noir);display:block}
  .fit-tile.out{background:var(--corail);transform:rotate(-5deg) translate(4px,2px)}
  .fit-scene.mesure .fit-tile{background:var(--jaune);border-color:var(--noir);transform:none}
  .fit-scene.mesure .fit-tile.out{background:var(--jaune);transform:none}
  .fit-status{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);white-space:nowrap;
              font-size:8px;background:var(--corail);color:var(--noir);border:2px solid var(--noir);
              border-radius:6px;padding:7px 9px;transition:background .3s}
  .fit-status.ok{background:var(--noir);color:var(--jaune)}
  .fit-toggle{display:flex;width:max-content;margin:68px auto 0;border:2px solid var(--noir);border-radius:10px;
              overflow:hidden;cursor:pointer;box-shadow:4px 4px 0 rgba(25,25,25,.85);user-select:none}
  .ft-opt{font-size:7px;padding:11px 12px;background:var(--blanc);color:var(--gris);transition:background .2s,color .2s}
  .ft-opt.on{background:var(--noir);color:var(--jaune)}
  .fit-toggle:hover .ft-opt:not(.on){background:var(--creme2)}
  @media(max-width:900px){.fit-scene{margin-top:26px}}

  /* Frise des delais */
  .tl{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  .tl-step{flex:1;min-width:150px;background:var(--blanc);border:2px solid var(--noir);border-radius:12px;
           padding:14px 15px;box-shadow:4px 4px 0 rgba(25,25,25,.12);
           opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s}
  .tl-step b{display:flex;align-items:center;font-family:'Press Start 2P',monospace;font-weight:400;font-size:10px;
             color:var(--orange-txt);margin-bottom:8px;letter-spacing:1px}
  .tl-step span{font-size:13.5px;font-weight:600;line-height:1.4;display:block}
  .tl.on .tl-step{opacity:1;transform:none}
  .tl.on .tl-step:nth-child(2){transition-delay:.15s}
  .tl.on .tl-step:nth-child(3){transition-delay:.3s}
  .tl.on .tl-step:nth-child(4){transition-delay:.45s}
  .tl.on .tl-step:nth-child(5){transition-delay:.6s}
  .tl.on .tl-step:nth-child(6){transition-delay:.75s}
  .tl-step.live-step{background:var(--creme2)}

  /* Realisations : on ecoute le metier, on pose une brique. En boucle. */
  .build-wrap{max-width:420px;margin:0 auto;width:100%}
  .build-box .os-bar{animation:bw-drop .4s both}
  @keyframes bw-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  .bw-hear{font-size:13.5px;font-weight:600;font-style:italic;color:var(--gris);min-height:42px;
           opacity:0;transition:opacity .35s;text-wrap:pretty}
  .bw-hear.show{opacity:1}
  .os-item.brick{opacity:0}
  .os-item.brick.landed{animation:brick-drop .45s forwards}
  @keyframes brick-drop{0%{opacity:0;transform:translateY(-16px)}70%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}
  .bw-status{opacity:0;transition:opacity .4s;display:inline-flex;align-items:center;gap:8px}
  .bw-status.show{opacity:1}
  @media (prefers-reduced-motion: reduce){
    .build-box .os-bar{animation:none}
    .os-item.brick{opacity:1}
    .bw-hear,.bw-status{opacity:1}
  }
  .btn{display:inline-block;background:var(--noir);color:var(--blanc);font-weight:700;text-decoration:none;
       padding:13px 24px;border-radius:6px;border:2px solid var(--noir);
       box-shadow:3px 3px 0 rgba(25,25,25,.3);transition:transform .12s,box-shadow .12s;font-size:15px}
  .btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(25,25,25,.3)}
  .btn.fire{background:var(--corail);color:var(--noir);display:inline-flex;align-items:center;gap:10px}
  .btn.fire .pxa{font-family:'Press Start 2P',monospace;font-size:11px;line-height:1;flex:none}
  .btn.fire:hover .pxa{transform:translateX(2px)}
  .btn.fire .pxa{transition:transform .12s}
  .btn.white{background:var(--blanc);color:var(--noir)}
  .btn.light{background:var(--creme);color:var(--noir)}

  /* ---------- HERO ---------- */
  .hero{background:var(--blanc);border-bottom:2px solid var(--noir);position:relative;padding:96px 0 110px}
  .hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
  .eyebrow{display:inline-block;background:var(--noir);color:var(--creme2);padding:8px 14px;border-radius:8px;margin-bottom:22px}
  .hero h1{font-size:clamp(34px,4.3vw,54px);margin-bottom:20px}
  .hero h1 .flam{color:var(--creme2);text-shadow:3px 3px 0 var(--noir)}
  /* Roulette de verbes. Le verbe occupe sa propre ligne : pas besoin de reserver
     une largeur calee sur le plus long, donc rien ne saute a la rotation.
     `overflow:hidden` sur le bloc coupe le mot pendant sa translation. */
  .hero h1 .verbe{display:inline-block;will-change:transform,opacity}
  .hero h1 .verbe.out{animation:verbe-sort .28s cubic-bezier(.4,0,1,1) forwards}
  .hero h1 .verbe.in{animation:verbe-entre .36s cubic-bezier(0,0,.2,1) backwards}
  @keyframes verbe-sort{to{transform:translateY(-.5em);opacity:0}}
  @keyframes verbe-entre{from{transform:translateY(.5em);opacity:0}}
  @media (prefers-reduced-motion: reduce){
    .hero h1 .verbe.out,.hero h1 .verbe.in{animation:none}
  }
  .hero p.lead{font-size:19px;font-weight:500;max-width:560px;margin-bottom:30px;color:var(--noir)}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .hero-team{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
  .avstack{display:flex;align-items:center}
  .avpx{width:48px;height:48px;border-radius:50%;border:2px solid var(--noir);
        display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
        margin-left:-12px;box-shadow:2px 2px 0 rgba(25,25,25,.25)}
  .avpx svg{width:34px;height:34px;display:block}
  .avpx:first-child{margin-left:0}
  .avstack .avmore{width:48px;height:48px;border-radius:50%;border:2px solid var(--noir);background:var(--jaune);
                   display:flex;align-items:center;justify-content:center;font-family:'Outfit';font-weight:800;font-size:13px;
                   color:var(--noir);margin-left:-12px;box-shadow:2px 2px 0 rgba(25,25,25,.25)}
  .hero-team p{font-size:14px;font-weight:700;color:var(--noir);max-width:280px;line-height:1.4}
  .hero-video{position:relative}
  .video-frame{position:relative;aspect-ratio:9/16;width:100%;background:var(--noir);
               border:2px solid var(--noir);border-radius:22px;
               box-shadow:6px 6px 0 rgba(25,25,25,.16);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .video-frame iframe,
  .video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
    object-fit:cover;background:var(--noir)}
  .vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .video-frame .play{position:relative;z-index:2}
  /* Voile et halo sont purement decoratifs et couvrent toute la surface du
     cadre. Sans `pointer-events:none` ils passent devant la video inseree au
     clic et avalent chaque clic sur les controles natifs : plus moyen de
     lancer, de mettre en pause ni de retablir le son. Ne pas les retirer. */
  .video-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(25,25,25,.18);transition:background .15s}
  .video-frame:hover:after{background:rgba(25,25,25,.05)}
  .video-frame:before{content:"";position:absolute;inset:0;pointer-events:none;background:
      radial-gradient(circle at 30% 30%, rgba(151,221,233,.16), transparent 55%),
      radial-gradient(circle at 75% 70%, rgba(252,125,52,.14), transparent 50%)}
  /* Video lancee : l'habillage disparait, il assombrissait l'image, et le
     curseur main n'a plus de sens puisque la cible cliquable est la video. */
  .video-frame.joue{cursor:default}
  .video-frame.joue:before,
  .video-frame.joue:after{display:none}
  /* Repli affiche quand le navigateur refuse la lecture avec le son. */
  .video-son{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:4;
             display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
             border:2px solid var(--noir);border-radius:999px;background:var(--jaune);color:var(--noir);
             font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:13px;line-height:1;
             cursor:pointer;box-shadow:2px 2px 0 rgba(25,25,25,.25)}
  .play{width:74px;height:74px;border-radius:50%;background:var(--corail);border:2px solid var(--blanc);
        display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform .15s}
  .video-frame:hover .play{transform:scale(1.08)}
  .play:after{content:"";display:block;width:0;height:0;border-left:22px solid var(--blanc);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
  .video-label{position:relative;z-index:1;color:var(--creme2)}
  /* Halo de flamme statique + flamme qui brûle dans le coin haut-droit */
  .orbit-flame{position:absolute;top:-30px;right:-26px;width:60px;height:60px;z-index:3;pointer-events:none;
               filter:drop-shadow(3px 3px 0 rgba(25,25,25,.3))}
  .orbit-flame svg{width:100%;height:100%;display:block}
  @keyframes burn-sway{
    0%,100%{transform:scale(1) rotate(-1.5deg)}
    30%{transform:scale(1.04,1.07) rotate(1.2deg)}
    55%{transform:scale(.98,.97) rotate(-1deg)}
    80%{transform:scale(1.02,1.04) rotate(1.5deg)}
  }
  .orbit-flame .z1_st2{animation:flick-a 1.05s steps(1) infinite}
  .orbit-flame .z1_st3{animation:flick-b 1.05s steps(1) infinite}
  .orbit-flame .z1_st4{animation:flick-c 1.05s steps(1) infinite}
  @media (prefers-reduced-motion: reduce){
    .orbit-flame svg,.orbit-flame .z1_st2,.orbit-flame .z1_st3,.orbit-flame .z1_st4{animation:none}
  }
  .hero-video{position:relative}
  .hero-video:before{content:"";position:absolute;inset:-10px;border-radius:32px;z-index:0;
    background:conic-gradient(from 210deg,var(--jaune),var(--orange),var(--corail),var(--orange),var(--jaune));
    filter:blur(26px);opacity:.18;animation:halo-breathe 4.5s ease-in-out infinite}
  @keyframes halo-breathe{0%,100%{opacity:.26;transform:scale(1)}50%{opacity:.4;transform:scale(1.015)}}
  @media (prefers-reduced-motion: reduce){.hero-video:before{animation:none}}
  .hero-video .video-frame{z-index:1}

  /* ---------- PROOF BAR ---------- */
  .proof{background:var(--noir);color:var(--creme);padding:22px 0;border-bottom:2px solid var(--noir);overflow:hidden}
  .proof-head{text-align:center;margin-bottom:16px}
  .proof .pixel{color:var(--jaune)}
  .marquee{display:flex;width:max-content;animation:scroll 28s linear infinite}
  .marquee:hover{animation-play-state:paused}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){.marquee{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
  .clogo{display:flex;align-items:center;gap:12px;background:#242424;border:2px solid #3F3F3F;border-radius:12px;
         padding:10px 18px;margin:0 12px;cursor:pointer;transition:transform .12s,border-color .12s;flex:none}
  .clogo:hover{transform:translateY(-3px);border-color:var(--jaune)}
  .clogo .mono{width:34px;height:34px;border-radius:8px;border:2px solid var(--noir);display:flex;align-items:center;justify-content:center;
               font-family:'Outfit';font-weight:800;font-size:16px;color:var(--noir)}
  .clogo .cname{font-weight:800;font-size:15px;letter-spacing:.5px;color:var(--creme)}
  .clogo .csec{display:block;font-size:11px;font-weight:600;color:#9a9a9a}
  /* modal */
  .modal-back{position:fixed;inset:0;background:rgba(25,25,25,.72);z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
  .modal-back.open{display:flex}
  .modal{background:var(--creme);border:2px solid var(--noir);border-radius:20px;box-shadow:10px 10px 0 rgba(0,0,0,.35);
         max-width:860px;width:100%;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;position:relative}
  .modal-video{background:var(--noir);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:320px;cursor:pointer}
  .modal-video .play{width:64px;height:64px}
  .modal-video .play:after{border-left-width:18px;border-top-width:12px;border-bottom-width:12px}
  .modal-video .video-label{font-size:9px}
  .modal-txt{padding:34px 30px}
  .modal-txt .pixel{color:var(--orange-txt);display:block;margin-bottom:16px}
  .modal-txt q{font-size:19px;font-weight:700;quotes:"« " " »";line-height:1.5;display:block;margin-bottom:22px}
  .modal-txt .who{font-size:14px;font-weight:600;color:var(--gris)}
  .modal-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:10px;border:2px solid var(--noir);
               background:var(--corail);color:var(--noir);font-family:'Titan One';font-size:18px;cursor:pointer;line-height:1;z-index:2;
               box-shadow:3px 3px 0 rgba(25,25,25,.6)}
  .modal-close:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(25,25,25,.6)}
  @media(max-width:760px){.modal{grid-template-columns:1fr}.modal-video{min-height:220px}}

  /* ---------- DOULEUR ---------- */
  .pain h2{font-size:clamp(28px,3.6vw,42px);max-width:760px;margin-bottom:14px}
  .pain-sub{max-width:680px;font-size:17px;font-weight:500;color:var(--gris)}
  .kicker{font-weight:800;color:var(--orange-txt);text-transform:uppercase;letter-spacing:2px;font-size:13px;margin-bottom:12px}
  .pain-carousel{position:relative}
  .parrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:12px;
          border:2px solid var(--noir);background:var(--jaune);
          font-family:'Press Start 2P';font-size:14px;color:var(--noir);cursor:pointer;
          box-shadow:4px 4px 0 rgba(25,25,25,.85);transition:background .12s}
  .parrow:hover{background:var(--orange);color:var(--blanc)}
  .parrow:active{transform:translateY(-50%) translate(2px,2px);box-shadow:1px 1px 0 rgba(25,25,25,.85)}
  .parrow.prev{left:-26px}
  .parrow.next{right:-26px}
  @media(max-width:900px){.parrow.prev{left:-10px}.parrow.next{right:-10px}}
  /* Mobile : les fleches passent SOUS le carrousel au lieu de se superposer au texte */
  @media(max-width:760px){
    .pain-carousel{padding-bottom:60px}
    .parrow{position:absolute;top:auto;bottom:0;transform:none;width:48px;height:48px}
    .parrow:active{transform:translate(2px,2px)}
    .parrow.prev{left:calc(50% - 56px)}
    .parrow.next{right:calc(50% - 56px)}
  }
  .pain-track{display:flex;gap:26px;margin-top:38px;overflow-x:auto;scroll-snap-type:x mandatory;
              padding:14px 6px 30px;scrollbar-width:none;
              -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
  .pain-track::-webkit-scrollbar{display:none}
  .bubble{flex:0 0 min(295px,82vw);scroll-snap-align:start;background:var(--blanc);border:2px solid var(--noir);
          border-radius:16px;padding:26px;position:relative;box-shadow:6px 6px 0 rgba(25,25,25,.12);
          transition:transform .15s}
  .bubble:hover{transform:translateY(-5px) rotate(0deg) !important}
  .pain-track .bubble:nth-child(odd){transform:rotate(-1.3deg)}
  .pain-track .bubble:nth-child(even){transform:rotate(1.1deg)}
  .pain-track .bubble:nth-child(3n+2){background:var(--creme2)}
  .pain-track .bubble:nth-child(3n){background:var(--bleu)}
  .bubble:after{content:"";position:absolute;bottom:-14px;left:34px;width:22px;height:22px;background:inherit;
                border-right:2px solid var(--noir);border-bottom:2px solid var(--noir);transform:rotate(45deg)}
  .btag{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px;display:inline-block;
        border:2px solid var(--noir);border-radius:6px;padding:6px 9px;margin-bottom:16px;color:var(--noir);background:var(--blanc)}
  .bubble q{font-size:17px;font-weight:600;quotes:"« " " »";display:block}
  .bubble .ctx{display:block;font-size:13.5px;font-style:italic;color:var(--gris);font-weight:500;
               margin-top:16px;padding-top:12px;border-top:2px dashed rgba(25,25,25,.28)}
  .bubble .who{display:block;margin-top:14px;font-size:14px;color:var(--gris);font-weight:600}
  .diag{margin:28px 0 8px;border-top:2px dashed var(--noir)}
  .diag-row{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:15px 6px;border-bottom:2px dashed var(--noir)}
  .dbox{width:30px;height:30px;border:2px solid var(--noir);border-radius:8px;background:var(--blanc);
        display:flex;align-items:center;justify-content:center;flex:none}
  .dbox svg{width:22px;height:22px;opacity:0;transform:scale(.3);transition:opacity .3s,transform .3s}
  .diag-row.checked .dbox svg{opacity:1;transform:scale(1)}
  .diag-row{cursor:pointer;transition:background .12s;user-select:none}
  .diag-row:hover{background:rgba(255,231,191,.55)}
  .diag-row:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
  .diag-row .dtxt{font-size:15.5px;color:var(--gris);font-weight:500;max-width:880px}
  .diag-row .dtxt strong{color:var(--noir)}
  .diag-row.dark{background:var(--noir);border-radius:14px;border-bottom:none;
                 margin:14px -16px 0;padding:20px 22px}
  .diag-row.dark h3{color:var(--jaune)}
  .diag-row.dark .dtxt{color:#d8d8d8}
  .diag-row.dark .dtxt strong{color:var(--jaune)}
  .diag-row.dark:hover{background:#242424}
  .diag-row.dark .dbox{background:var(--blanc);border-color:var(--corail)}
  .diag-score{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
              background:var(--blanc);border:2px solid var(--noir);border-radius:12px;
              padding:10px 18px;margin-top:20px;box-shadow:6px 6px 0 rgba(25,25,25,.12)}
  .score-left{display:flex;align-items:center;gap:22px;flex:1;min-width:260px}
  .score-num{font-family:'Titan One';font-size:26px;color:var(--orange-txt);flex:none;min-width:60px}
  .faq-score .score-num{font-size:40px;min-width:96px}
  #scoreMsg{font-size:16px;font-weight:600}
  /* Pivot : bande sombre pleine largeur, le moment OS de la page */
  .pivot{text-align:center;width:100vw;margin:70px 0 -88px calc(50% - 50vw);
         background:var(--noir);padding:72px 24px 80px}
  /* pflame masquee mais conservee dans le DOM : elle sert de source au clone du curseur-flamme */
  .pivot .pflame{display:none}
  .pivot h3{font-family:'Titan One';font-size:clamp(24px,3.2vw,34px);margin:16px 0 14px;color:var(--blanc)}
  .pivot p{font-size:17.5px;font-weight:500;color:#d8d8d8;max-width:680px;margin:0 auto}
  .pivot .pv-os{font-family:'Titan One';font-size:clamp(24px,3.4vw,38px);color:var(--blanc);
                line-height:1.2;margin:30px auto 0;max-width:820px}
  .pivot .punch{font-family:'Outfit';font-weight:800;font-size:19px;color:var(--blanc);margin-top:26px}
  .pivot .pv-def{font-size:15.5px;font-weight:500;color:#bdbdbd;margin-top:12px}
  /* Demo OS : le curseur devient la vraie flamme Brulance (clone du SVG officiel qui suit la souris) */
  .pivot{position:relative}
  @media (hover: hover){.pivot{cursor:none}}
  .flame-cursor{position:absolute;top:-40px;left:-40px;width:80px;height:80px;pointer-events:none;z-index:6;
                opacity:0;transition:opacity .15s;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.45));will-change:transform}
  .flame-cursor svg{width:100%;height:100%;display:block}
  .flame-cursor .z9_st2{animation:flick-a 1.05s steps(1) infinite}
  .flame-cursor .z9_st3{animation:flick-b 1.05s steps(1) infinite}
  .flame-cursor .z9_st4{animation:flick-c 1.05s steps(1) infinite}
  @media (prefers-reduced-motion: reduce){
    .flame-cursor .z9_st2,.flame-cursor .z9_st3,.flame-cursor .z9_st4{animation:none}
  }
  .os-demo{position:relative;width:min(470px,90vw);height:168px;margin:34px auto 0}
  .od-frame{position:absolute;inset:0;border:3px dashed rgba(250,241,223,.22);border-radius:14px;
            transition:border-color .5s .3s,border-style .1s .3s}
  .os-demo.on .od-frame{border-color:var(--jaune);border-style:solid}
  .od-bar{position:absolute;top:0;left:0;right:0;height:26px;display:flex;align-items:center;gap:6px;
          padding:0 12px;border-bottom:2px solid var(--jaune);opacity:0;transition:opacity .5s .5s}
  .od-bar i{width:8px;height:8px;border-radius:50%}
  .od-bar b{font-size:7px;color:var(--jaune);margin-left:8px;font-weight:400}
  .os-demo.on .od-bar{opacity:1}
  .od-sq{width:9px;height:9px;border-radius:2px;border:2px solid var(--noir);flex:none}
  .od-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
           padding:7px 13px;border:2px solid var(--noir);border-radius:8px;background:var(--creme);color:var(--noir);
           white-space:nowrap;transition:all .7s cubic-bezier(.5,1.3,.4,1);box-shadow:3px 3px 0 rgba(0,0,0,.4)}
  .od-chip:nth-of-type(1){top:-6px;left:2%;transform:rotate(-9deg)}
  .od-chip:nth-of-type(2){top:26px;right:0;transform:rotate(7deg)}
  .od-chip:nth-of-type(3){bottom:2px;left:8%;transform:rotate(5deg)}
  .od-chip:nth-of-type(4){bottom:-10px;right:14%;transform:rotate(-7deg)}
  .od-chip:nth-of-type(5){top:60px;left:36%;transform:rotate(11deg)}
  /* Le 6e mot, invisible tant que la flamme ne l'a pas trouvé */
  .od-chip.secret{opacity:0;box-shadow:none;bottom:34px;left:30%;transform:rotate(-4deg);transition:all .7s cubic-bezier(.5,1.3,.4,1),opacity .3s}
  .od-chip.secret.lit,.od-chip.secret.placed{opacity:1;box-shadow:3px 3px 0 rgba(0,0,0,.4)}
  .od-chip.lit{background:var(--corail);color:var(--noir);border-color:var(--noir);transform:scale(1.15) rotate(0)}
  .od-chip.lit .od-sq{border-color:var(--blanc)}
  .od-chip.placed{background:var(--jaune);color:var(--noir);transform:rotate(0)}
  .od-chip.placed:nth-of-type(1){top:38px;left:14px}
  .od-chip.placed:nth-of-type(2){top:38px;right:14px}
  .od-chip.placed:nth-of-type(3){bottom:14px;left:14px}
  .od-chip.placed:nth-of-type(4){bottom:14px;right:14px}
  .od-chip.placed:nth-of-type(5){top:38px;left:50%;transform:translateX(-50%) rotate(0)}
  .od-chip.placed:nth-of-type(6){bottom:14px;left:50%;transform:translateX(-50%) rotate(0)}
  .od-hint{font-size:7px;color:#8a8a8a;margin-top:30px;letter-spacing:1px;transition:opacity .4s;padding:0 12px}
  .od-hint.off{opacity:0}
  .words-label{font-family:'Titan One';font-size:22px;margin-bottom:6px}
  .pain-cost{margin-top:52px;background:var(--creme2);border:2px dashed var(--noir);border-radius:16px;padding:22px 28px;
             font-size:17px;font-weight:600;display:flex;gap:16px;align-items:center}
  .coin{width:26px;height:26px;background:var(--jaune);border:2px solid var(--noir);border-radius:50%;flex:none;box-shadow:inset -4px -4px 0 rgba(0,0,0,.15)}

  /* ---------- CE QU'ON CONSTRUIT ---------- */
  .what{background:var(--blanc);border-top:2px solid var(--noir)}
  .what h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px}
  .what .lead{max-width:760px;font-size:17.5px;font-weight:500;color:var(--gris)}
  .what .lead strong{color:var(--noir)}
  /* Trois colonnes, la fenetre au centre et quatre attributs en satellites.
     Les colonnes laterales sont bornees a 250px : une grille a colonnes
     souples aurait ramene la fenetre de 537px a 390px, donc retreci de 27%
     l'animation que cette mise en page est censee mettre en avant.
     `.what-demo` tient la fenetre et sa legende ensemble : enfants directs,
     la legende partait seule dans une colonne voisine. */
  .what-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;
             grid-template-rows:0.82fr 1.18fr;
             column-gap:34px;row-gap:48px;align-items:center;margin-top:52px}
  .what-demo{grid-column:2;grid-row:1 / span 2}
  .what-sat{position:relative}
  .what-sat--hg{grid-column:1;grid-row:1}
  .what-sat--bg{grid-column:1;grid-row:2}
  .what-sat--hd{grid-column:3;grid-row:1;text-align:right}
  .what-sat--bd{grid-column:3;grid-row:2;text-align:right}
  .what-sat strong{display:block;font-family:'Outfit';font-weight:800;font-size:17px;line-height:1.25}
  .what-sat em{display:block;margin-top:7px;font-style:normal;font-weight:500;
               font-size:14px;line-height:1.45;color:var(--gris)}
  /* Une fleche par satellite, dans son propre repere : elle suit son texte si
     celui-ci s'allonge, et disparait seule sous 1000px. Un calque unique aurait
     fige les quatre pointes sur des coordonnees absolues. */
  .what-arrow{position:absolute;width:150px;height:66px;overflow:visible;pointer-events:none;
              fill:none;stroke:var(--noir);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .what-arrow--haut{height:84px}
  /* Chaque satellite est cale sur la hauteur de la zone qu'il designe, et non
     centre dans sa rangee : centres, les deux du bas tombaient sous leur propre
     ancre et la fleche n'avait plus qu'un trajet traversant son paragraphe.
     La rangee du haut est volontairement plus courte que celle du bas. */
  .what-sat--hd{align-self:end}
  .what-sat--bg,.what-sat--bd{align-self:start}
  .what-sat--hg .what-arrow{top:calc(100% + 6px);right:-54px}
  .what-sat--bg .what-arrow{top:calc(100% + 5px);right:-54px}
  .what-sat--hd .what-arrow{top:calc(100% + 26px);left:-48px;transform:scaleX(-1)}
  .what-sat--bd .what-arrow{top:calc(100% - 28px);left:-58px;transform:scaleX(-1)}
  /* La barre de statut descend au fond du panneau et occupe toute sa largeur :
     c'est l'ancre de "Vos regles metier". Flottante au milieu et calee a
     gauche, elle etait hors de portee du satellite qui la designe, et sa
     largeur changeait a chaque tour de l'animation. */
  .what .os-main > .os-chip{margin-top:auto;align-self:stretch}
  /* Ancre de la fleche "Bureau et terrain" : sans ce bandeau, la maquette
     n'expose aucune notion de lieu et la fleche pointerait dans le vide. */
  .os-foot{display:flex;align-items:center;justify-content:center;
           border-top:2px solid var(--noir);background:var(--creme2);padding:9px 12px}
  .os-foot span{font-family:'Press Start 2P';font-size:7px;color:var(--gris);letter-spacing:1px}
  .os-foot span + span:before{content:"\00B7";margin:0 11px;color:var(--noir)}
  .os-win{border:2px solid var(--noir);border-radius:14px;background:var(--blanc);box-shadow:8px 8px 0 rgba(25,25,25,.15);overflow:hidden}
  .os-bar{display:flex;gap:7px;align-items:center;background:var(--noir);padding:10px 14px}
  .os-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--noir)}
  .os-bar .pixel{color:var(--creme2);margin-left:10px;font-size:8px}
  .os-body{display:grid;grid-template-columns:132px 1fr;min-height:264px}
  .os-side{background:var(--creme2);border-right:2px solid var(--noir);padding:12px 10px;display:flex;flex-direction:column;gap:7px}
  .os-item{font-size:12.5px;font-weight:800;padding:7px 9px;border-radius:7px;display:flex;align-items:center;gap:7px;cursor:pointer;transition:background .1s}
  .os-item:hover{background:rgba(253,187,71,.4)}
  .os-item.secret{background:var(--noir);color:var(--jaune);border:2px solid var(--noir);animation:eggpop .35s ease}
  .os-item.secret:hover{background:var(--gris)}
  @keyframes eggpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
  /* Pastille rouge cliquable (easter egg) : zone tactile 44px sans changer l'aspect */
  .os-dot{cursor:pointer;position:relative}
  .os-bar .os-dot:first-child:after{content:"";position:absolute;left:50%;top:50%;
        width:44px;height:44px;transform:translate(-50%,-50%)}
  .os-closed{display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;
             font-family:'Titan One';font-size:19px;grid-column:1/-1;min-height:264px;background:var(--noir);color:var(--creme2)}
  .os-item span{width:9px;height:9px;border-radius:2px;border:2px solid var(--noir);flex:none}
  .os-item.on{background:var(--jaune);border:2px solid var(--noir)}
  .os-main{padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--creme)}
  .os-row{display:flex;gap:10px;align-items:center}
  .os-bloc{height:15px;border-radius:5px;border:2px solid var(--noir)}
  .os-lab{font-family:'Press Start 2P';font-size:7px;color:var(--gris);letter-spacing:1px}
  .os-chips{display:flex;flex-wrap:wrap;gap:7px}
  .chip{font-size:12.5px;font-weight:700;padding:5px 11px;border:2px solid var(--noir);border-radius:20px;background:var(--blanc)}
  .chip.alt{background:var(--creme2)}
  .chip.link{border-style:dashed;background:transparent;color:var(--gris)}
  .os-chip{font-family:'Press Start 2P';font-size:7px;padding:6px 8px;border-radius:6px;border:2px solid var(--noir);
           background:var(--corail);color:var(--noir);align-self:flex-start;margin-top:2px}
  .what-list{list-style:none;display:flex;flex-direction:column;gap:16px}
  .what-list li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;font-weight:600}
  .wdot{width:10px;height:10px;background:var(--noir);border-radius:3px;flex:none;margin-top:8px}
  .what-list li em{font-style:normal;color:var(--gris);font-weight:500;display:block;font-size:14.5px}
  .what-name{text-align:center;margin-top:48px;font-size:17px;font-weight:500;color:var(--gris)}
  /* La graisse etait declaree deux fois, et c'est le 400 qui gagnait : les mots
     des clients ressortaient plus fins que le texte autour. */
  .what-name strong{font-family:'Outfit';font-weight:800;color:var(--noir);font-size:19px}
  /* La propriete du code ferme la section et repond au "Le votre" du titre. */
  /* Encadree, elle cesse d'etre le troisieme paragraphe centre d'affilee :
     elle devient le point d'arret du lecteur en diagonale, et elle detache le
     bouton qui la suit au lieu de se confondre avec lui. */
  .what-chute{max-width:680px;margin:34px auto 0;padding:26px 30px;text-align:center;
              background:var(--creme);border:2px solid var(--noir);border-radius:14px;
              box-shadow:6px 6px 0 rgba(25,25,25,.15);
              font-size:21px;font-weight:800;color:var(--noir)}
  .what-chute em{display:block;margin-top:10px;font-style:normal;font-size:15.5px;font-weight:500;color:var(--gris)}
  /* Sous 1000px les satellites ne tiennent plus a cote de la fenetre : celle-ci
     prend toute la largeur, les attributs deviennent quatre cartes, et les
     fleches se retirent faute de trajet. */
  @media(max-width:1000px){
    .what-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;
               column-gap:22px;row-gap:22px;margin-top:40px}
    /* La fenetre reste bornee : etiree sur toute la largeur, son panneau se
       vide et la maquette cesse de ressembler a un ecran. */
    .what-demo{grid-column:1 / -1;grid-row:1;margin-bottom:12px;
               width:100%;max-width:560px;justify-self:center}
    .what-sat{align-self:stretch;padding:16px 18px;
              border:2px solid var(--noir);border-radius:12px;background:var(--creme)}
    .what-sat--hg{grid-column:1;grid-row:2}
    .what-sat--hd{grid-column:2;grid-row:2;text-align:left}
    .what-sat--bg{grid-column:1;grid-row:3}
    .what-sat--bd{grid-column:2;grid-row:3;text-align:left}
    .what-arrow{display:none}
  }
  @media(max-width:600px){
    .what-grid{grid-template-columns:1fr}
    .what-sat--hg{grid-column:1;grid-row:2}
    .what-sat--hd{grid-column:1;grid-row:3}
    .what-sat--bg{grid-column:1;grid-row:4}
    .what-sat--bd{grid-column:1;grid-row:5}
    .what-chute{padding:22px 20px;font-size:19px}
  }

  /* ---------- PARCOURS ---------- */
  .parcours{background:var(--creme2);border-top:2px solid var(--noir);border-bottom:2px solid var(--noir)}
  .parcours h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
  .parcours .sub{max-width:640px;font-size:17px;font-weight:500;margin-bottom:52px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
  .step{background:var(--blanc);border:2px solid var(--noir);border-radius:16px;padding:26px 22px 24px;margin:0 11px;position:relative;
        box-shadow:6px 6px 0 rgba(25,25,25,.12);display:flex;flex-direction:column}
  .step .lvl{position:absolute;top:-16px;left:18px;background:var(--noir);color:var(--jaune);padding:7px 10px;border-radius:8px;
             display:inline-flex;align-items:center;gap:8px}
  .btag .livedot{display:inline-block;vertical-align:middle;margin-left:7px;margin-top:-2px}
  .step h3{font-family:'Titan One';font-size:22px;margin:14px 0 8px}
  .step p{font-size:15px;color:var(--gris);flex:1}
  .step .tag{margin-top:16px;font-size:13px;font-weight:800;color:var(--noir);background:var(--creme);border:2px solid var(--noir);
             border-radius:8px;padding:6px 10px;align-self:flex-start}
  .step.s1 .lvl{color:var(--jaune)} .step.s2 .lvl{color:var(--bleu)} .step.s3 .lvl{color:var(--orange)} .step.s4 .lvl{color:var(--corail)}
  /* Esquisse : bord dessiné a main levée, redessiné au survol */
  .step.s1{border-radius:255px 18px 225px 18px / 18px 225px 18px 255px;transform:rotate(-.7deg)}
  .step.s1:hover{transform:rotate(0deg);animation:sketchy .9s steps(1) infinite}
  @keyframes sketchy{
    0%,100%{border-radius:255px 18px 225px 18px / 18px 225px 18px 255px}
    33%{border-radius:18px 255px 18px 225px / 225px 18px 255px 18px}
    66%{border-radius:225px 18px 255px 18px / 18px 225px 18px 255px}
  }
  /* Étude : papier millimétré des plans, qui dérive au survol */
  .step.s2{background-color:#F4FBFD;
           background-image:linear-gradient(rgba(151,221,233,.45) 1px,transparent 1px),
                            linear-gradient(90deg,rgba(151,221,233,.45) 1px,transparent 1px);
           background-size:18px 18px}
  .step.s2:hover{animation:millimetre 1.4s linear infinite}
  @keyframes millimetre{from{background-position:0 0}to{background-position:18px 18px}}
  /* Chantier : bandes + grue */
  .step.s3{overflow:visible}
  .step.s3:before{content:"";position:absolute;top:0;left:0;right:0;height:11px;
                  background:repeating-linear-gradient(45deg,var(--jaune) 0 12px,var(--noir) 12px 24px);
                  border-radius:13px 13px 0 0;border-bottom:2px solid var(--noir)}
  .step.s3 .crane{position:absolute;top:-52px;right:8px;width:58px;height:auto;z-index:1}
  .step.s3 .lvl{z-index:2}
  /* Chantier au survol : les bandes défilent, le fil de la grue se balance */
  .step.s3:hover:before{animation:chantier-bandes .6s linear infinite}
  @keyframes chantier-bandes{from{background-position:0 0}to{background-position:33.94px 0}}
  .crane .cable{transform-origin:18.5px 6px}
  .step.s3:hover .crane .cable{animation:grue-swing 1.4s ease-in-out infinite}
  @keyframes grue-swing{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
  /* Entretien : livré, nickel, en vie */
  .step.s4{background:var(--blanc);box-shadow:6px 6px 0 rgba(25,25,25,.15)}
  .live{position:absolute;top:-16px;right:16px;display:flex;align-items:center;gap:7px;
        background:var(--noir);color:var(--creme);padding:7px 10px;border-radius:8px;
        font-family:'Press Start 2P';font-size:8px;letter-spacing:1px}
  .livedot{width:9px;height:9px;border-radius:50%;background:#3ECF6E;animation:pulse 1.8s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,110,.7)}70%{box-shadow:0 0 0 9px rgba(62,207,110,0)}100%{box-shadow:0 0 0 0 rgba(62,207,110,0)}}
  @media (prefers-reduced-motion: reduce){
    .livedot{animation:none}
    .step.s1:hover,.step.s2:hover,.step.s3:hover:before,.step.s3:hover .crane .cable{animation:none}
  }
  .step{transition:transform .15s}
  .step .arrow{position:absolute;right:-26px;top:50%;transform:translateY(-50%);z-index:2;color:var(--noir);font-family:'Press Start 2P';font-size:14px}
  .parcours-note{margin-top:44px;font-size:15px;font-weight:600;color:var(--gris);text-align:center}

  /* ---------- L'APRES (miroir du diagnostic) ---------- */
  .apres{background:var(--blanc);border-bottom:2px solid var(--noir)}
  .apres h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
  .apres .sub{max-width:640px;font-size:17px;font-weight:500;color:var(--gris)}
  .mirror{margin-top:34px;border-top:2px dashed var(--noir)}
  .mirror-row{display:grid;grid-template-columns:250px 1fr;gap:8px 28px;align-items:baseline;
              padding:15px 6px;border-bottom:2px dashed var(--noir)}
  .mirror-row .old{font-size:15px;font-weight:600;color:var(--gris);opacity:.8;
                   text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(254,95,85,.55)}
  .mirror-row .new{font-size:16.5px;font-weight:500;color:var(--gris);max-width:720px}
  .mirror-row .new strong{color:var(--noir)}
  .mirror-row.dark{background:var(--noir);border-radius:14px;border-bottom:none;
                   margin:16px -18px 0;padding:26px 24px}
  .mirror-row.dark .old{color:#9a9a9a;opacity:1}
  .mirror-row.dark .new{color:#d8d8d8;font-size:18px}
  .mirror-row.dark .new strong{color:var(--jaune)}
  /* Repercussion du diagnostic : les symptomes coches s'allument dans le miroir */
  .mirror-row{transition:background .25s}
  .mirror-row.checked{background:var(--creme2)}
  .mirror-row.checked .new strong{color:var(--orange-txt)}
  .vcas{display:none;font-family:'Press Start 2P',monospace;font-size:7px;letter-spacing:1px;
        background:var(--noir);color:var(--jaune);border-radius:6px;padding:5px 7px;margin-right:10px;
        vertical-align:middle;white-space:nowrap}
  .mirror-row.checked .vcas{display:inline-block}
  .mirror-row.dark.checked{background:#242424;outline:3px solid var(--jaune);outline-offset:-3px}
  .mirror-row.dark.checked .new strong{color:var(--jaune)}
  .mirror-row.dark .vcas{background:var(--jaune);color:var(--noir)}
  .apres-echo{display:none;margin-top:22px;background:var(--creme2);border:2px dashed var(--noir);
              border-radius:12px;padding:14px 20px;font-size:15.5px;font-weight:600}
  .apres-chute{max-width:760px;margin:48px auto 0;text-align:center}
  .apres-chute p{font-size:17.5px;font-weight:500;color:var(--gris)}
  .apres-chute .honest{margin-top:14px;font-weight:700;color:var(--noir)}
  @media(max-width:700px){
    .mirror-row{grid-template-columns:1fr;gap:6px}
    .diag-row.dark,.mirror-row.dark{margin-left:0;margin-right:0}
  }

  /* ---------- REFRAME ---------- */
  .reframe{background:var(--noir);color:var(--creme);position:relative}
  .reframe .kicker{color:var(--corail-txt)}
  .reframe h2{font-size:clamp(28px,3.6vw,42px);max-width:720px;margin-bottom:36px;color:var(--blanc)}
  .bigquote{font-family:'Titan One';font-size:clamp(26px,3.4vw,40px);line-height:1.25;max-width:860px;color:var(--jaune);margin-bottom:18px}
  .bigquote .mark{color:var(--corail-txt)}
  .reframe .who{font-size:15px;color:#bdbdbd;font-weight:600;margin-bottom:36px;display:block}
  .reframe p.body{max-width:680px;font-size:18px;font-weight:500;margin-bottom:34px}
  .reframe p.body strong{color:var(--bleu)}

  /* ---------- PREUVE ---------- */
  .preuve h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:44px}
  .cases{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
  .case{border:2px solid var(--noir);border-radius:18px;padding:34px;box-shadow:6px 6px 0 rgba(25,25,25,.12);display:flex;flex-direction:column}
  .case.fontaine{background:var(--bleu)}
  .case.psi{background:var(--blanc)}
  .case .pixel{margin-bottom:18px;color:var(--noir);opacity:.75}
  .case q{font-size:20px;font-weight:700;quotes:"« " " »";line-height:1.45}
  .case .who{margin-top:20px;font-size:14px;font-weight:600;color:var(--gris)}
  .metrics{display:flex;gap:18px;margin-top:8px;flex-wrap:wrap}
  .metric{background:var(--creme2);border:2px solid var(--noir);border-radius:12px;padding:16px 20px;flex:1;min-width:130px}
  .metric .num{font-family:'Titan One';font-size:34px;color:var(--orange-txt)}
  .metric .lab{font-size:13px;font-weight:700}
  .case .link{margin-top:auto;padding-top:22px;font-weight:800;color:var(--noir)}

  /* ---------- CAS D'USAGE : DOSSIERS A ONGLETS ---------- */
  .dossier{margin-top:38px}
  .dtabs{display:flex;gap:8px;padding:0 18px;position:relative;z-index:2;flex-wrap:wrap}
  .dtab{flex:1;text-align:center;border:2px solid var(--noir);border-radius:12px 12px 0 0;margin-bottom:-2px;
        background:var(--creme2);padding:11px 10px 13px;font-family:'Outfit';font-weight:800;font-size:15px;
        cursor:pointer;transition:background .12s;color:var(--noir);white-space:nowrap}
  .dtab:hover:not(.on){background:var(--jaune)}
  .dtab.on{background:var(--blanc);border-bottom-color:var(--blanc)}
  .dtab.more{background:var(--noir);color:var(--blanc)}
  .dtab.more:hover:not(.on){background:var(--gris)}
  .dtab.more.on{background:var(--blanc);color:var(--noir)}
  .dbody{border:2px solid var(--noir);border-radius:14px;background:var(--blanc);
         box-shadow:6px 6px 0 rgba(25,25,25,.12);padding:28px 30px;min-height:196px}
  .dbody.swap{animation:dfade .28s ease}
  @keyframes dfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  .dhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
  .dhead h3{font-family:'Titan One';font-size:26px;line-height:1.1}
  .ldom{display:inline-flex;align-items:center;gap:7px;font-size:8px;border:2px solid var(--noir);
        border-radius:6px;padding:5px 7px;background:var(--blanc);color:var(--noir)}
  .dcols{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;margin-bottom:20px}
  .lkpis{display:flex}
  .lk{width:150px;flex:none}
  .lk .num{font-family:'Titan One';font-size:24px;color:var(--orange-txt);display:block;line-height:1.1}
  .lk .lab{font-size:12px;font-weight:700;display:block;max-width:130px}
  .lquote q{font-size:14.5px;font-weight:600;quotes:"« " " »";display:block;line-height:1.5;max-width:480px;text-wrap:pretty}
  .lquote .who{display:block;font-size:12.5px;color:var(--gris);font-weight:600;margin-top:5px}
  .lsee{font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
        color:var(--noir);text-decoration:none}
  .lsee .pxa{font-family:'Press Start 2P',monospace;font-size:10px;transition:transform .12s}
  .lsee:hover{color:var(--orange-txt)}
  .lsee:hover .pxa{transform:translateX(3px)}
  .ddesc{font-size:15px;font-weight:500;color:var(--gris);max-width:700px;margin:-6px 0 20px}
  .ddesc strong{color:var(--noir)}
  .dmore-txt{font-size:16.5px;font-weight:600;margin:16px 0 20px;max-width:640px}
  .dbody-grid{display:grid;grid-template-columns:1fr 400px;gap:34px;align-items:start}
  .dbody-grid .dcols{grid-template-columns:1fr;gap:18px;margin-bottom:18px}
  .dbody-grid .lquote q{max-width:none}
  .win-cap{font-size:12.5px;font-weight:600;color:var(--gris);text-align:center;margin-top:10px}
  .dossier .os-item{cursor:default}
  .dossier .os-item:hover{background:transparent}
  .dossier .os-item.on:hover{background:var(--jaune)}
  @media(max-width:1000px){.dbody-grid{grid-template-columns:1fr;gap:24px}.dbody-grid .os-win{max-width:440px}}
  @media(max-width:800px){.dcols{grid-template-columns:1fr;gap:18px}.dtab{padding:9px 12px 11px;font-size:13.5px}.dbody{padding:22px 20px}}
  @media (prefers-reduced-motion: reduce){.dbody.swap{animation:none}}

  /* ---------- CAS D'USAGE (compact) ---------- */
  .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
  .ccard{background:var(--blanc);border:2px solid var(--noir);border-radius:16px;padding:26px;position:relative;
         box-shadow:6px 6px 0 rgba(25,25,25,.12);display:flex;flex-direction:column;transition:transform .15s}
  .ccard:hover{transform:translateY(-5px)}
  .ccard .live{top:-16px;right:16px}
  .ccard h3{font-family:'Titan One';font-size:22px;margin:12px 0 8px}
  .ccard .cdesc{font-size:14.5px;font-weight:500;color:var(--gris);margin-bottom:16px}
  .ccard .cdesc strong{color:var(--noir)}
  .cmetrics{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .cm{background:var(--creme2);border:2px solid var(--noir);border-radius:10px;padding:8px 12px}
  .cm .num{font-family:'Titan One';font-size:19px;color:var(--orange-txt);display:block;line-height:1.1}
  .cm .lab{font-size:11px;font-weight:700}
  .ccard q{display:block;font-size:14.5px;font-weight:600;quotes:"« " " »";line-height:1.5;flex:1}
  .ccard .who{display:block;margin-top:8px;font-size:12.5px;color:var(--gris);font-weight:600}
  .ccard .csee{margin-top:18px;font-weight:800;color:var(--noir);text-decoration:none;font-size:15px}
  .ccard .csee:hover{color:var(--orange-txt)}
  @media(max-width:900px){.cgrid{grid-template-columns:1fr}}

  .preuve .sub2{max-width:680px;font-size:17px;font-weight:500;color:var(--gris);margin-bottom:14px}
  .case2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:52px 0;border-bottom:2px dashed var(--noir)}
  .case2:last-of-type{border-bottom:none}
  .case2.flip .case2-win{order:2}
  .case2-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
  .case2-head h3{font-family:'Titan One';font-size:24px}
  .case2 .phase{font-family:'Press Start 2P';font-size:10px;letter-spacing:1px;color:var(--orange-txt);display:block;margin:16px 0 6px}
  .case2 .phase:first-of-type{margin-top:0}
  .case2 p.txt{font-size:15.5px;font-weight:500;color:var(--gris)}
  .case2 p.txt strong{color:var(--noir)}
  .case2-metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
  .m2{background:var(--blanc);border:2px solid var(--noir);border-radius:12px;padding:10px 16px;box-shadow:4px 4px 0 rgba(25,25,25,.12)}
  .m2 .num{font-family:'Titan One';font-size:24px;color:var(--orange-txt);display:block;line-height:1.1}
  .m2 .lab{font-size:12px;font-weight:700}
  .case2 q{display:block;font-size:16.5px;font-weight:700;quotes:"« " " »";margin-top:20px;line-height:1.5}
  .case2 .who{display:block;margin-top:8px;font-size:13.5px;color:var(--gris);font-weight:600}
  .case2-win{position:relative}
  .case2-win .live{top:-16px;right:14px}
  .os-win.mini .os-body{min-height:212px;grid-template-columns:118px 1fr}
  .os-win.mini .os-item{font-size:11px;padding:6px 7px}
  .os-win.mini .os-main{padding:13px;gap:9px}
  .case2-more{margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
              background:var(--creme2);border:2px dashed var(--noir);border-radius:14px;padding:18px 24px}
  .case2-more p{font-size:15px;font-weight:600}
  @media(max-width:900px){.case2{grid-template-columns:1fr}.case2.flip .case2-win{order:0}}

  /* ---------- ÉQUIPE ---------- */
  .team{background:var(--creme2);border-top:2px solid var(--noir);border-bottom:2px solid var(--noir)}
  .team h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
  .team .sub{max-width:620px;font-size:17px;font-weight:500;margin-bottom:46px}
  .faces{display:flex;gap:22px;flex-wrap:wrap}
  .face{background:var(--blanc);border:2px solid var(--noir);border-radius:16px;padding:20px;width:190px;text-align:center;box-shadow:5px 5px 0 rgba(25,25,25,.12)}
  .avphoto{width:84px;height:84px;margin:0 auto 14px;border-radius:14px;border:2px solid var(--noir);
           display:block;object-fit:cover;background:var(--bleu)}
  .avatar-px{align-items:flex-end !important;overflow:hidden}
  .avatar-px svg{width:58px;height:58px;display:block}
  .avatar{width:84px;height:84px;margin:0 auto 14px;border-radius:14px;border:2px solid var(--noir);
          display:flex;align-items:center;justify-content:center;font-family:'Titan One';font-size:30px;color:var(--blanc)}
  .face h4{font-size:16px;font-weight:800}
  .face span{font-size:13px;color:var(--gris);font-weight:600}

  /* ---------- CARTES RPG ---------- */
  .tcard{flex:0 0 min(272px,82vw);scroll-snap-align:start;background:var(--blanc);border:2px solid var(--noir);
         border-radius:14px;box-shadow:6px 6px 0 rgba(25,25,25,.12);
         transition:transform .15s;cursor:pointer;perspective:1200px}
  .tcard:hover{transform:translateY(-5px)}
  .tflip{display:grid;transform-style:preserve-3d;transition:transform .45s;height:100%}
  .tcard.flipped .tflip{transform:rotateY(180deg)}
  .tface{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
         display:flex;flex-direction:column;border-radius:11px;overflow:hidden;background:var(--blanc)}
  .tback{transform:rotateY(180deg)}
  .tfront{align-items:center;text-align:center;padding-bottom:14px}
  .tband{height:10px;width:100%;border-bottom:2px solid var(--noir)}
  .tavatar{width:74px;height:74px;border-radius:14px;border:2px solid var(--noir);background:var(--creme);
           display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin:20px auto 12px;flex:none}
  .tavatar svg{width:54px;height:54px;display:block}
  .tavatar img,.tav img,.avpx img{width:100%;height:100%;object-fit:cover;display:block}
  /* Les photos embarquent une flamme decorative en bas-droite : on cadre serre sur le visage */
  .tavatar img{transform:scale(1.35);transform-origin:50% 12%}
  .tav img{transform:scale(1.55);transform-origin:50% 8%}
  .avpx img{transform:scale(1.25);transform-origin:50% 25%}
  .tfront h4{font-family:'Outfit';font-weight:800;font-size:18px}
  .tfront .trole{font-size:12.5px;font-weight:700;color:var(--gris);margin-top:2px;padding:0 14px}
  .tfront .txp{margin:12px auto 0}
  .thint{margin-top:auto;padding-top:16px;font-size:7px;color:var(--gris);letter-spacing:1px}
  .tback .thint{margin-top:0;padding:10px 14px;text-align:center}
  .tback .tstats{flex:1}
  @media (prefers-reduced-motion: reduce){.tflip{transition:none}}
  .thead{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:2px solid var(--noir)}
  .tav{width:44px;height:44px;border-radius:10px;border:2px solid var(--noir);background:var(--creme);
       display:flex;align-items:flex-end;justify-content:center;overflow:hidden;flex:none}
  .tav svg{width:32px;height:32px;display:block}
  .thead h4{font-family:'Outfit';font-weight:800;font-size:16px;line-height:1.1}
  .trole{font-size:11.5px;font-weight:700;color:rgba(25,25,25,.75)}
  .txp{margin-left:auto;background:var(--noir);color:var(--jaune);padding:6px 7px;border-radius:6px;font-size:7px;flex:none}
  .tstats{padding:14px;display:flex;flex-direction:column;gap:9px;background:var(--creme)}
  .srow{display:flex;align-items:center;gap:10px}
  .slab{font-family:'Press Start 2P';font-size:7px;width:64px;flex:none;color:var(--gris)}
  .statbar{display:flex;gap:3px;flex:1}
  .cell{width:9%;height:11px;border:2px solid var(--noir);border-radius:3px;background:var(--blanc)}
  .cell.full{background:var(--orange)}
  .tfoot{padding:13px 14px;border-top:2px solid var(--noir);font-size:12.5px;font-weight:500;color:var(--gris);
         display:flex;flex-direction:column;gap:6px}
  .tfoot strong{color:var(--noir)}
  .tfoot .weak strong{color:var(--corail-txt)}

  /* ---------- FAQ ---------- */
  .faq h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:40px}
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .faq-item{border:2px solid var(--noir);border-radius:14px;background:var(--blanc);overflow:hidden}
  @media(max-width:800px){.faq-grid{grid-template-columns:1fr}}
  .faq-item summary{cursor:pointer;list-style:none;padding:15px 20px;font-weight:800;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary .plus{font-family:'Titan One';color:var(--orange-txt);font-size:22px;flex:none}
  .faq-item[open]{background:var(--creme2)}
  .faq-item .a{padding:0 20px 18px;font-size:15.5px;color:var(--gris);font-weight:500;max-width:820px}

  .qnum{background:var(--noir);color:var(--jaune);padding:6px 7px;border-radius:6px;font-size:8px;flex:none}
  .faq-item summary .q{flex:1;transition:opacity .2s}
  .faq-item.done:not([open]) .q{text-decoration:line-through;text-decoration-thickness:3px;
                                text-decoration-color:var(--corail-txt);opacity:.65}
  .faq-item.done:not([open]) .qnum{background:var(--corail);color:var(--noir)}
  .faq-item.done summary .plus{color:var(--corail-txt)}
  .faq-score{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
             background:var(--noir);border:2px solid var(--noir);border-radius:16px;
             padding:20px 26px;margin-top:26px;box-shadow:5px 5px 0 rgba(25,25,25,.16)}
  .faq-score .score-num{color:var(--jaune)}
  .faq-score p{color:var(--creme);font-size:15.5px;font-weight:600}

  /* ---------- CTA FINAL ---------- */
  .final{background:var(--bleu);border-top:2px solid var(--noir);text-align:center}
  .final h2{font-size:clamp(30px,4.4vw,52px);max-width:820px;margin:0 auto 18px}
  .final p{max-width:600px;margin:0 auto 34px;font-size:18px;font-weight:500}
  .final .pixel{display:block;margin-top:26px;color:var(--noir);opacity:.6}
  .final .eyebrow{display:inline-block;margin-top:0;color:var(--creme2);opacity:1}

  /* ---------- EASTER EGG ECHECS ---------- */
  .chessTrig{background:none;border:none;font-size:15px;cursor:pointer;color:rgba(25,25,25,.35);padding:0 2px;line-height:1}
  .chessTrig:hover{color:var(--noir)}
  .chess-modal{background:var(--creme);border:2px solid var(--noir);border-radius:20px;box-shadow:10px 10px 0 rgba(0,0,0,.35);
               padding:32px;position:relative;text-align:center;max-width:400px;width:100%}
  .board{display:grid;grid-template-columns:repeat(8,1fr);border:2px solid var(--noir);border-radius:8px;overflow:hidden;
         aspect-ratio:1;max-width:312px;margin:0 auto}
  .sq{display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;user-select:none;line-height:1}
  .sq.light{background:var(--creme2)} .sq.darksq{background:var(--bleu)}
  .sq.sel{outline:3px solid var(--corail);outline-offset:-3px}
  .sq.win{background:var(--jaune)}
  .chess-msg{margin-top:16px;font-size:14.5px;font-weight:700}
  .board.shake{animation:bshake .3s}
  @keyframes bshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

  /* ---------- QUIZ ---------- */
  .quiz{max-width:660px;margin:8px auto 0;background:var(--blanc);border:2px solid var(--noir);border-radius:16px;
        box-shadow:8px 8px 0 rgba(25,25,25,.2);padding:30px 32px;text-align:left}
  .qprog{display:flex;gap:5px;margin-bottom:26px}
  .qprog span{flex:1;height:10px;border:2px solid var(--noir);border-radius:4px;background:var(--blanc)}
  .qprog span.on{background:var(--orange)}
  .qtitle{font-family:'Titan One';font-size:21px;margin-bottom:6px}
  .qhint{font-size:14px;color:var(--gris);font-weight:500;margin-bottom:18px}
  .qopts{display:flex;flex-direction:column;gap:10px}
  .qopt{border:2px solid var(--noir);border-radius:10px;background:var(--creme);padding:13px 16px;font-size:15.5px;
        font-weight:700;cursor:pointer;text-align:left;transition:transform .1s,background .1s;font-family:'Outfit';
        display:flex;align-items:center;gap:12px}
  .qopt:hover{background:var(--creme2);transform:translateX(3px)}
  .qopt.sel{background:var(--jaune)}
  .qkey{font-family:'Press Start 2P',monospace;font-size:8px;border:2px solid var(--noir);border-radius:6px;
        padding:5px 6px;background:var(--blanc);flex:none;line-height:1}
  .qopt.sel .qkey{background:var(--noir);color:var(--jaune);border-color:var(--noir)}
  .qico{height:17px;width:auto;flex:none}
  .qstep-lab{display:block;color:var(--orange-txt);font-size:10px;margin-bottom:12px}
  .qtxt{width:100%;border:2px solid var(--noir);border-radius:10px;padding:13px 15px;font-family:'Outfit';
        font-size:15.5px;font-weight:500;min-height:96px;resize:vertical;background:var(--creme)}
  .qin{width:100%;border:2px solid var(--noir);border-radius:10px;padding:12px 15px;font-family:'Outfit';
       font-size:15.5px;font-weight:600;background:var(--creme);margin-bottom:10px}
  .qnav{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
  .qback{font-size:14px;font-weight:700;color:var(--gris);cursor:pointer;background:none;border:none;font-family:'Outfit'}
  .qback:hover{color:var(--noir)}
  .qresult{text-align:center;padding:8px 0}
  .qresult .rlab{font-family:'Press Start 2P';font-size:9px;color:var(--orange-txt);display:block;margin-bottom:14px}
  .qresult h3{font-family:'Titan One';font-size:24px;margin-bottom:12px}
  .qresult p{font-size:16px;font-weight:500;color:var(--gris);margin-bottom:20px}

  /* ---------- FOOTER ---------- */
  footer{background:var(--noir);color:#cfcfcf;padding:36px 0;font-size:14px}
  .foot-line{display:flex;align-items:center;gap:24px}
  .foot-sep{flex:1;height:0;border-top:3px dashed #3F3F3F}
  .foot-logo{flex:none}
  .foot-logo svg{height:40px;width:auto;display:block}
  .foot-copy{white-space:nowrap}
  .foot-line a{color:#cfcfcf;text-decoration:none;white-space:nowrap}
  .foot-line a:hover{color:var(--jaune)}
  @media(max-width:760px){
    .foot-line{flex-direction:column;gap:14px}
    .foot-sep{flex:none;width:56%;max-width:220px}
  }

  /* ---------- VUE "NOTRE APPROCHE" (même document, deuxième vue) ---------- */
  .ahero{background:var(--blanc);border-bottom:2px solid var(--noir);padding:92px 0 88px}
  .ahero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
  @media(max-width:900px){.ahero-grid{grid-template-columns:1fr}.ahero-grid .hero-video{order:-1}}

  /* ---------- LA METHODE EN 4 SCENES ---------- */
  .met-stage{width:min(360px,90vw);margin:0 auto;position:relative}
  .met-lvl{display:inline-block;background:var(--noir);color:var(--jaune);border-radius:8px;padding:8px 10px;
           font-size:8px;margin-bottom:12px}
  .met-canvas{position:relative;height:300px;border:2px solid var(--noir);border-radius:16px;background:var(--blanc);
              box-shadow:6px 6px 0 rgba(25,25,25,.15);overflow:hidden}
  .met-scene{display:none;position:absolute;inset:0;animation:met-fade .4s ease}
  @keyframes met-fade{from{opacity:0}to{opacity:1}}
  [data-met="0"] .m1{display:block}
  [data-met="1"] .m2{display:block}
  [data-met="2"] .m3{display:block}
  [data-met="3"] .m4{display:block}
  .met-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
  .met-dots i{width:9px;height:9px;border-radius:50%;border:2px solid var(--noir);background:var(--blanc);
              transition:background .3s;cursor:pointer}
  .met-dots i.on{background:var(--orange)}
  .met-prev,.met-next{width:44px;height:44px;font-size:12px;top:calc(50% + 8px)}
  .met-prev{left:-20px}
  .met-next{right:-20px}
  /* Scene 1 : wireframe main levee */
  .m1 .wf{position:absolute;border:2px dashed var(--gris);background:transparent;opacity:0;animation:wf-pop .35s forwards}
  .m1 .wf-bar{top:18px;left:18px;right:18px;height:26px;border-radius:8px 3px 9px 3px;transform:rotate(-.6deg);animation-delay:.2s}
  .m1 .wf-img{top:60px;left:18px;width:130px;height:96px;border-radius:4px 10px 4px 8px;transform:rotate(.7deg);animation-delay:.6s}
  .m1 .wf-img:before,.m1 .wf-img:after{content:"";position:absolute;top:50%;left:-6%;width:112%;height:2px;background:rgba(63,63,63,.55)}
  .m1 .wf-img:before{transform:rotate(35deg)}
  .m1 .wf-img:after{transform:rotate(-35deg)}
  .m1 .wf-line{left:166px;right:18px;height:10px;border-radius:6px 2px 6px 3px}
  .m1 .l1{top:66px;transform:rotate(-.8deg);animation-delay:1s}
  .m1 .l2{top:88px;transform:rotate(.5deg);animation-delay:1.25s}
  .m1 .l3{top:110px;right:60px;transform:rotate(-.4deg);animation-delay:1.5s}
  .m1 .wf-btn{bottom:34px;left:18px;width:120px;height:30px;border-radius:9px 3px 8px 4px;transform:rotate(-1deg);
              border-style:solid;border-color:var(--noir);animation-delay:1.9s}
  @keyframes wf-pop{from{opacity:0;transform:scale(.92)}to{opacity:1}}
  .m1 .pencil{position:absolute;width:30px;height:30px;right:26px;bottom:26px;animation:pencil-run 3.4s ease-in-out infinite alternate}
  @keyframes pencil-run{0%{transform:translate(0,0) rotate(-8deg)}100%{transform:translate(-40px,-30px) rotate(6deg)}}
  /* Scene 2 : les briques decortiquees, papier millimetre */
  .m2{background-color:#F4FBFD;
      background-image:linear-gradient(rgba(151,221,233,.45) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(151,221,233,.45) 1px,transparent 1px);background-size:18px 18px}
  .m2 .br{position:absolute;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
          padding:7px 12px;border:2px solid var(--noir);border-radius:8px;background:var(--blanc);box-shadow:2px 2px 0 rgba(25,25,25,.2)}
  .m2 .b1{top:36px;left:22px}
  .m2 .b2{top:36px;left:118px}
  .m2 .b3{top:36px;left:232px}
  .m2 .loupe{position:absolute;top:24px;left:30px;width:34px;height:34px;border:5px solid var(--noir);border-radius:50%;
             background:rgba(151,221,233,.25);animation:loupe-slide 3.9s ease-in-out infinite}
  .m2 .loupe:after{content:"";position:absolute;bottom:-14px;right:-8px;width:16px;height:6px;background:var(--noir);
                   border-radius:3px;transform:rotate(45deg)}
  @keyframes loupe-slide{0%,26%{transform:translate(0,0)}36%,60%{transform:translate(96px,0)}72%,100%{transform:translate(212px,0)}}
  .m2 .note{position:absolute;font-size:13px;font-style:italic;font-weight:600;color:var(--gris);
            border-bottom:2px dashed var(--gris);opacity:0;animation:wf-pop .3s forwards}
  .m2 .n1{top:110px;left:26px;animation-delay:.9s}
  .m2 .n2{top:150px;left:122px;animation-delay:2.1s}
  .m2 .n3{top:190px;left:200px;animation-delay:3.3s}
  /* Scene 3 : le chantier */
  .m3{background:var(--creme)}
  .m3:before{content:"";position:absolute;top:0;left:0;right:0;height:12px;
             background:repeating-linear-gradient(45deg,var(--jaune) 0 12px,var(--noir) 12px 24px);border-bottom:2px solid var(--noir)}
  .m3 .mcrane{position:absolute;top:22px;right:16px;width:64px;height:auto}
  .m3 .mcrane .cable{transform-origin:18.5px 6px;animation:grue-swing 1.6s ease-in-out infinite}
  .met-scene .blk{position:absolute;width:64px;height:34px;border:2px solid var(--noir);border-radius:6px;background:var(--jaune)}
  .met-scene .k1{left:24px;bottom:52px}
  .met-scene .k2{left:92px;bottom:52px;background:var(--bleu)}
  .met-scene .k3{left:160px;bottom:52px;background:var(--corail)}
  .met-scene .k4{left:58px;bottom:90px;background:var(--orange)}
  .met-scene .k5{left:126px;bottom:90px}
  .met-scene .k6{left:92px;bottom:128px;background:var(--bleu)}
  .m3 .blk{opacity:0;animation:brick-drop .45s forwards}
  .m3 .k1{animation-delay:.3s}
  .m3 .k2{animation-delay:.75s}
  .m3 .k3{animation-delay:1.2s}
  .m3 .k4{animation-delay:1.7s}
  .m3 .k5{animation-delay:2.2s}
  .m3 .k6{animation-delay:2.7s}
  .m3 .cone{position:absolute;width:24px;height:24px;bottom:14px}
  .m3 .c1{left:14px}
  .m3 .c2{right:18px}
  .m3 .truck{position:absolute;width:56px;height:28px;bottom:8px;left:-70px;animation:truck-pass 3.6s linear .6s forwards}
  @keyframes truck-pass{from{transform:translateX(0)}to{transform:translateX(480px)}}
  /* Scene 4 : l'entretien */
  .m4{background:var(--blanc)}
  .m4 .blk{opacity:1}
  .m4 .k7{left:160px;bottom:128px;background:var(--corail);opacity:0;animation:blk-new 4.4s ease infinite .9s}
  @keyframes blk-new{
    0%{opacity:0;transform:translateY(-20px)}
    12%{opacity:1;transform:translateY(2px)}
    16%,82%{opacity:1;transform:none}
    94%,100%{opacity:0}
  }
  .m4 .m4-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;
                background:var(--noir);color:var(--creme);border-radius:8px;padding:8px 10px;font-size:8px}
  .m4 .wrench{position:absolute;width:34px;height:34px;bottom:158px;left:60px;transform-origin:85% 15%;
              animation:wrench-work 1.4s ease-in-out infinite}
  @keyframes wrench-work{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-30deg)}}
  .m4 .upd{position:absolute;font-size:7px;background:var(--creme2);border:2px solid var(--noir);border-radius:6px;
           padding:6px 8px;color:var(--noir);opacity:0;animation:upd-pop 4.6s infinite}
  .m4 .u1{top:52px;right:22px;animation-delay:.4s}
  .m4 .u2{top:120px;left:20px;animation-delay:1.9s}
  .m4 .u3{top:88px;right:56px;animation-delay:3.2s}
  @keyframes upd-pop{0%{opacity:0;transform:translateY(8px)}8%,58%{opacity:1;transform:none}72%,100%{opacity:0}}
  @media (prefers-reduced-motion: reduce){
    .met-scene,.m1 .wf,.m2 .note,.m3 .blk,.m4 .upd{animation:none;opacity:1}
    .m1 .pencil,.m2 .loupe,.m3 .mcrane .cable,.m3 .truck,.m4 .wrench{animation:none}
  }
  .ahero h1{font-size:clamp(32px,4.2vw,52px);max-width:820px;margin-bottom:20px}
  .ahero p.lead{font-size:18.5px;font-weight:500;max-width:680px;margin-bottom:16px;color:var(--gris)}
  .ahero p.lead strong{color:var(--noir)}
  .ahero .hero-ctas{margin-top:28px}
  .conv h2,.niveaux h2,.implic h2,.vals h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
  .conv .sub,.niveaux .sub,.implic .sub,.vals .sub{max-width:680px;font-size:17px;font-weight:500;color:var(--gris);margin-bottom:44px}
  .conv-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .conv-item{background:var(--blanc);border:2px solid var(--noir);border-radius:16px;padding:26px;
             box-shadow:6px 6px 0 rgba(25,25,25,.12);transition:transform .15s}
  .conv-item:hover{transform:translateY(-5px)}
  .conv-item .cnum{font-family:'Press Start 2P';font-size:9px;color:var(--blanc);background:var(--noir);
                   border-radius:6px;padding:6px 8px;display:inline-block;margin-bottom:16px}
  .conv-item h3{font-family:'Titan One';font-size:21px;line-height:1.2;margin-bottom:10px}
  .conv-item p{font-size:15px;font-weight:500;color:var(--gris)}
  .conv-item p strong{color:var(--noir)}
  .conv-item:nth-child(2){background:var(--creme2)}
  .conv-item:nth-child(3){background:var(--bleu)}
  .niveaux{background:var(--creme2);border-top:2px solid var(--noir);border-bottom:2px solid var(--noir)}
  .niv{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;padding:44px 0;border-top:2px dashed var(--noir)}
  .niv:first-of-type{border-top:none;padding-top:0}
  .niv .step{margin:0}
  .niv-txt h4{font-family:'Outfit';font-weight:800;font-size:19px;margin:20px 0 8px}
  .niv-txt h4:first-child{margin-top:0}
  .niv-txt p{font-size:16px;font-weight:500;color:var(--gris);max-width:640px}
  .niv-txt p strong{color:var(--noir)}
  .niv-meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 4px}
  .mtag{font-size:13.5px;font-weight:800;background:var(--creme);border:2px solid var(--noir);border-radius:8px;padding:6px 11px}
  .mtag.price{background:var(--jaune)}
  .sortie{margin-top:20px;border:2px dashed var(--noir);border-radius:12px;background:var(--creme);max-width:640px}
  .sortie summary{cursor:pointer;list-style:none;padding:14px 18px;display:flex;align-items:center;gap:12px}
  .sortie summary::-webkit-details-marker{display:none}
  .sortie summary .pixel{font-size:8px;color:var(--noir)}
  .sortie summary .plus{font-family:'Titan One';color:var(--corail-txt);font-size:18px;margin-left:auto}
  .sortie[open]{background:var(--blanc)}
  .sortie .sbody{padding:0 18px 16px;font-size:15px;font-weight:500;color:var(--gris)}
  .sortie .sbody li{margin-left:18px;margin-bottom:6px}
  .sortie .sbody strong{color:var(--noir)}
  .implic-list{border-top:2px dashed var(--noir);max-width:860px}
  .implic-row{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;padding:20px 6px;border-bottom:2px dashed var(--noir)}
  .ibox{width:36px;height:36px;border:2px solid var(--noir);border-radius:8px;background:var(--jaune);
        display:flex;align-items:center;justify-content:center;font-family:'Titan One';font-size:16px;flex:none;margin-top:2px}
  .implic-row p{font-size:16px;font-weight:500;color:var(--gris);margin-top:5px}
  .implic-row p strong{color:var(--noir)}
  .implic-punch{margin-top:28px;max-width:860px;background:var(--noir);color:var(--creme);border-radius:14px;
                padding:22px 26px;font-size:16.5px;font-weight:600}
  .implic-punch strong{color:var(--jaune)}
  .ia{background:var(--noir);color:var(--creme);border-top:2px solid var(--noir)}
  .ia .kicker{color:var(--corail-txt)}
  .ia h2{font-size:clamp(28px,3.6vw,42px);color:var(--blanc);max-width:760px;margin-bottom:22px}
  .ia p{max-width:680px;font-size:17.5px;font-weight:500;margin-bottom:18px;color:#d8d8d8}
  .ia p strong{color:var(--bleu)}
  .ia .punchline{font-family:'Titan One';font-size:clamp(20px,2.6vw,26px);color:var(--jaune);margin-top:26px;max-width:720px;line-height:1.3}
  .val-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .val{border:2px solid var(--noir);border-radius:16px;padding:26px;background:var(--blanc);box-shadow:6px 6px 0 rgba(25,25,25,.12)}
  .val .pixel{display:inline-block;background:var(--noir);color:var(--jaune);border-radius:6px;padding:6px 8px;font-size:8px;margin-bottom:16px}
  .val h3,.val h2.val-t{font-family:'Titan One';font-size:20px;margin-bottom:10px;line-height:1.2;letter-spacing:normal}
  .val p{font-size:15px;font-weight:500;color:var(--gris)}
  .val p strong{color:var(--noir)}
  .parcours-note a{color:var(--noir);font-weight:800}
  .parcours-note a:hover{color:var(--orange-txt)}
  /* Pages satellites */
  .crumb{display:inline-block;font-size:14px;font-weight:700;color:var(--gris);text-decoration:none;margin-bottom:14px}
  .crumb:hover{color:var(--orange-txt)}
  .cmp-wrap{overflow-x:auto;margin-top:38px}
  .cmp{width:100%;min-width:820px;border:2px solid var(--noir);border-radius:14px;border-spacing:0;border-collapse:separate;
       overflow:hidden;background:var(--blanc);box-shadow:6px 6px 0 rgba(25,25,25,.12)}
  .cmp th,.cmp td{padding:14px 16px;font-size:14.5px;text-align:left;border-bottom:2px solid rgba(25,25,25,.15);vertical-align:top}
  .cmp thead th{background:var(--noir);color:var(--creme);font-weight:800;font-size:14px}
  .cmp thead th.hus{background:var(--jaune);color:var(--noir)}
  .cmp td.us{border-left:2px solid var(--noir)}
  .cmp tbody th{font-weight:800;width:170px;background:var(--creme)}
  .cmp td.us{background:var(--creme2);font-weight:600}
  .cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
  .cmp-note{margin-top:22px;font-size:15.5px;font-weight:600;color:var(--gris);max-width:720px}
  .avenir{font-family:'Press Start 2P',monospace;font-size:7px;background:var(--noir);color:var(--jaune);
          border-radius:6px;padding:5px 7px;margin-left:8px;vertical-align:middle}
  /* Template page systeme client */
  .sys-h2{font-family:'Titan One';font-size:clamp(26px,3.4vw,40px);margin-bottom:16px;max-width:780px;line-height:1.1}
  .sys-p{font-size:17px;font-weight:500;color:var(--gris);max-width:680px}
  .sys-p strong{color:var(--noir)}
  .sys-strip{background:var(--noir);border-bottom:2px solid var(--noir);padding:24px 0}
  .sys-strip .wrap{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
  .sys-strip .lk{width:auto}
  .sys-strip .lk .num{font-size:30px}
  .sys-strip .lk .lab{color:#bdbdbd;max-width:160px}
  .sys-strip .prod{margin-left:auto;display:inline-flex;align-items:center;gap:9px;
                   font-family:'Press Start 2P',monospace;font-size:8px;color:var(--creme);letter-spacing:1px}
  .sys-apres{list-style:none;max-width:720px;margin-top:26px}
  .sys-apres li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;font-weight:600;
                padding:13px 0;border-bottom:2px dashed rgba(25,25,25,.25)}
  .sys-apres li:last-child{border-bottom:none}
  .sys-nav{display:flex;justify-content:space-between;gap:16px;margin-top:38px;flex-wrap:wrap}
  .sys-nav a{font-weight:800;color:var(--noir);text-decoration:none}
  .sys-nav a:hover{color:var(--orange-txt)}
  .lien-int{color:var(--noir);font-weight:800}
  .lien-int:hover{color:var(--orange-txt)}
  .legal h3{font-family:'Outfit';font-weight:800;font-size:19px;margin:30px 0 10px}
  .legal p{font-size:15.5px;font-weight:500;color:var(--gris);max-width:760px;margin-bottom:10px}
  .legal p strong{color:var(--noir)}

  /* ---------- CONTACT : la carte reseau ---------- */
  .cmap-sec{background:var(--noir);border-top:2px solid var(--noir);text-align:center}
  .cmap-sec .kicker{color:var(--corail-txt)}
  .cmap-sec h2{color:var(--blanc)}
  .cmap-sub{color:#c9c9c9;font-size:16.5px;font-weight:500;max-width:620px;margin:0 auto;text-wrap:balance}
  .cmap{position:relative;max-width:640px;margin:38px auto 0;aspect-ratio:640/300;
        border:2px solid rgba(250,241,223,.18);border-radius:16px;
        background-image:radial-gradient(rgba(250,241,223,.14) 1.5px,transparent 1.5px);background-size:18px 18px}
  .cmap-lines{position:absolute;inset:0;width:100%;height:100%}
  .cmap-lines path{fill:none;stroke:rgba(250,241,223,.3);stroke-width:2;stroke-dasharray:4 7}
  .mnode{position:absolute;transform:translate(-50%,-50%)}
  .mdot{display:block;width:12px;height:12px;border-radius:50%;background:var(--corail);border:2px solid var(--noir);
        box-shadow:0 0 0 2px rgba(250,241,223,.35);position:relative;z-index:2}
  .mnode.hub .mdot{width:16px;height:16px;background:var(--jaune)}
  .ring{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
        border:2px solid var(--jaune);opacity:0;animation:map-ping 2.6s ease-out infinite}
  @keyframes map-ping{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(3.2);opacity:0}}
  .mnode b{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--creme);
           white-space:nowrap;letter-spacing:1px}
  .mnode.hub b{color:var(--jaune);top:16px}
  .cmap-strip{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
  .cmap-strip .mtag{background:transparent;color:var(--creme);border-color:rgba(250,241,223,.4);
                    display:inline-flex;align-items:center;gap:9px;font-weight:600}
  .copy-mail{cursor:pointer;font-family:'Outfit',sans-serif;font-size:13.5px;transition:border-color .15s,color .15s}
  .copy-mail b{font-size:7px;background:var(--jaune);color:var(--noir);border-radius:5px;padding:4px 6px;font-weight:400}
  .copy-mail:hover{border-color:var(--jaune);color:var(--jaune)}
  @media (prefers-reduced-motion: reduce){.ring{animation:none}.trav{display:none}}
  @media(max-width:700px){.mnode b{font-size:8px}}
  @media(max-width:700px){.sys-strip .prod{margin-left:0}}
  @media(max-width:900px){
    .conv-list,.val-list{grid-template-columns:1fr}
    .niv{grid-template-columns:1fr;gap:56px}
    .niv .step{max-width:320px}
  }

  /* ---------- RESPONSIVE ---------- */
  /* Palier tablette : 2 colonnes, au lieu de tomber de 3 a 1 d'un coup */
  @media(min-width:701px) and (max-width:1000px){
    .conv-list,.val-list,.osx-grid,.cgrid,.foyer-row{grid-template-columns:1fr 1fr}
    .faq-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .step{margin-bottom:30px}
  }
  @media(max-width:900px){
    .hero .wrap{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr;gap:34px}
    .step{margin:0}
    .step .arrow{right:auto;left:50%;top:auto;bottom:-30px;transform:translateX(-50%) rotate(90deg)}
    .cases{grid-template-columns:1fr}
    .nav-inner{gap:10px;padding:10px 14px}
    .nav-logo svg,.nav-logo img{height:38px}
    .step.s3{margin-top:24px}
  }
  /* ===== v15 : lean pass ===== */
  .testi .ctx{display:none}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange-txt);outline-offset:2px}
  .dtab-dom{display:block;font-size:11px;font-weight:600;color:var(--gris);margin-top:2px;letter-spacing:.2px}
  .dtab{white-space:normal;line-height:1.25}
  .sec-next{text-align:center;margin-top:38px}
  .sec-next a{display:inline-block;background:var(--blanc);border:2px solid var(--noir);border-radius:10px;
    padding:12px 20px;font-weight:800;color:var(--noir);text-decoration:none;box-shadow:3px 3px 0 rgba(25,25,25,.15);
    transition:transform .12s,box-shadow .12s,background .12s}
  .sec-next a:hover{background:var(--creme2);transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(25,25,25,.15)}
  .sec-cta{text-align:center;margin-top:44px}
  .score-reset{background:none;border:2px solid rgba(25,25,25,.25);border-radius:8px;padding:8px 14px;
    font-family:'Outfit';font-weight:700;font-size:13px;color:var(--gris);cursor:pointer}
  .score-reset:hover{border-color:var(--noir);color:var(--noir)}
  .faq-score .score-reset{border-color:rgba(255,255,255,.35);color:#d8d8d8}
  .faq-score .score-reset:hover{border-color:var(--blanc);color:var(--blanc)}
  /* nav : le routeur devient un lien texte en tete de menu */
  .nav-start{background:none;border:none;font-family:'Outfit';font-weight:600;font-size:15px;color:var(--noir);
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:0}
  .nav-start:hover{color:var(--orange-txt)}
  .nav-start .caret{border-top-color:var(--noir)}
  .cta-menu a:hover{background:var(--creme2)}
  /* pivot : un seul accent */
  .pv-hl{font-style:normal;color:var(--jaune)}
  /* portraits sous la video */
  .hero-video .hero-team{margin-top:18px;justify-content:center;gap:12px;flex-wrap:nowrap;position:relative;z-index:2}
  .hero-video .hero-team .avpx,.hero-video .hero-team .avmore{width:34px;height:34px}
  .hero-video .hero-team .avmore{font-size:11px}
  .hero-video .hero-team p{font-size:12.5px;max-width:200px;font-weight:600;color:var(--gris)}
  /* contact : hierarchie par la couleur, pas par les labels */
  .contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:stretch}
  .cdoor{display:flex;flex-direction:column;gap:10px;border:2px solid var(--noir);border-radius:16px;padding:26px;
    text-decoration:none;color:inherit;box-shadow:4px 4px 0 rgba(25,25,25,.14);transition:transform .12s,box-shadow .12s}
  a.cdoor:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(25,25,25,.14)}
  .cdoor h2.cdoor-t,.cdoor h3{font-family:'Outfit';font-weight:800;font-size:20px}
  .cdoor p{font-size:15px;color:var(--gris);font-weight:500}
  .cdoor-1{background:var(--creme2)}
  .cdoor-1 .btn{align-self:flex-start;margin-top:auto}
  .cdoor-2{background:var(--noir);color:var(--blanc)}
  .cdoor-2 h3{color:var(--blanc)}
  .cdoor-2 p{color:#d8d8d8}
  .cdoor-3{background:var(--blanc)}
  .cdoor-side{display:flex;flex-direction:column;gap:22px}
  .cdoor-side .cdoor{flex:1;justify-content:center}
  @media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
  /* menu mobile */
  .burger{display:none;flex-direction:column;gap:4px;background:none;border:2px solid var(--noir);border-radius:8px;padding:9px 8px;cursor:pointer}
  .burger span{display:block;width:18px;height:2px;background:var(--noir);border-radius:2px}
  .nav-mobile{position:absolute;top:100%;left:0;right:0;background:var(--creme);border-bottom:2px solid var(--noir);padding:6px 20px 14px;z-index:55}
  .nav-mobile a{display:block;padding:13px 6px;font-weight:700;font-size:16px;color:var(--noir);text-decoration:none;border-bottom:1px dashed rgba(25,25,25,.18)}
  .nav-mobile a:last-child{border-bottom:none}
  @media(min-width:901px){.nav-mobile{display:none}}
  @media(max-width:760px){.burger{display:flex}.nav-start{display:none}}
  /* Un libelle de nav ne se coupe jamais en deux lignes : il retrecit ou il disparait.
     Enfants directs uniquement : les descriptions du menu deroulant doivent, elles, se replier. */
  .nav-links>a,.nav-start{white-space:nowrap}
  /* Tablette : on garde les liens, on resserre au lieu de basculer en burger */
  @media(min-width:761px) and (max-width:1040px){
    .nav-inner{gap:14px;padding:11px 18px}
    .nav-logo svg,.nav-logo img{height:42px}
    .nav-links{gap:18px}
    .nav-links a:not(.btn),.nav-start{font-size:14px}
    .nav-links .btn{padding:11px 17px;font-size:14px}
  }
  /* Palier serre : sous 900px les cinq libelles ne tiennent plus a l'aise */
  @media(min-width:761px) and (max-width:900px){
    .nav-inner{gap:10px;padding:10px 14px}
    .nav-logo svg,.nav-logo img{height:36px}
    .nav-links{gap:14px;justify-content:flex-end}
    .nav-links a:not(.btn),.nav-start{font-size:13.5px}
    .nav-links .btn{padding:10px 14px;font-size:13.5px}
    .nav-start{gap:6px}
  }
  @media(max-width:760px){
    .nav-links{gap:10px;justify-content:flex-end}
    .nav-links a:not(.btn){display:none}
    .nav-links .btn{padding:10px 15px;font-size:13.5px;box-shadow:2px 2px 0 rgba(25,25,25,.9)}
  }
  @media(max-width:430px){
    .nav-logo svg,.nav-logo img{height:32px}
    .nav-links{gap:8px}
    .nav-links .btn{padding:9px 12px;font-size:12.5px}
    .burger{padding:8px 7px}
  }

.nav-logo img{height:52px;width:auto;display:block}
.foot-logo img{height:40px;width:auto;display:block}
.cnsnt{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--noir);color:var(--creme);
       border-top:2px solid var(--jaune);padding:18px 24px}
.cnsnt-in{max-width:1120px;margin:0 auto;display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cnsnt strong{display:block;font-size:16px;color:var(--blanc);margin-bottom:6px}
.cnsnt p{font-size:14px;color:#c9c9c9;max-width:720px;margin:0}
.cnsnt a{color:var(--jaune)}
.cnsnt-btns{display:flex;gap:12px;flex:none}
.cnsnt-btns .btn{padding:11px 22px;font-size:14.5px}
@media(max-width:700px){.cnsnt-in{flex-direction:column;align-items:stretch}.cnsnt-btns .btn{flex:1;text-align:center}}
.maj{margin-top:24px;font-size:13px;font-weight:600;color:var(--gris);opacity:.85}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--noir);color:var(--jaune);
           padding:12px 18px;border-radius:0 0 10px 0;font-weight:800;text-decoration:none}
.skip-link:focus{left:0}
main{display:block}