@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}
  .video-frame:after{content:"";position:absolute;inset:0;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;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%)}
  .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)}
  /* Deux colonnes, donc deux enfants. `.what-demo` tient la fenetre et sa
     legende ensemble : quand les trois blocs etaient enfants directs, la
     legende partait seule dans la colonne de droite et la liste tombait a la
     ligne, laissant la moitie de la section vide. */
  .what-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:44px}
  .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. */
  .what-chute{text-align:center;margin-top:20px;font-size:19px;font-weight:800;color:var(--noir)}
  .what-chute em{display:block;margin-top:6px;font-style:normal;font-size:15.5px;font-weight:500;color:var(--gris)}
  @media(max-width:900px){.what-grid{grid-template-columns:1fr}}

  /* ---------- 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}