/*
Theme Name: NEEQ Native
Author: Yan Haltey Brands
Description: Theme WordPress genere depuis le prototype neequist gele le 27.07.2026. Ne pas editer a la main : toute retouche serait ecrasee au build suivant.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Text Domain: neeq-native
*/

/* Archivo 400 · latin-ext */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-400-latin-ext.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;
  }
  /* Archivo 400 · latin */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-400-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;
  }
  /* Archivo 600 · latin-ext */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-600-latin-ext.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;
  }
  /* Archivo 600 · latin */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-600-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;
  }
  /* Archivo 700 · latin-ext */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-700-latin-ext.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;
  }
  /* Archivo 700 · latin */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-700-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;
  }
  /* Archivo 800 · latin-ext */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-800-latin-ext.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;
  }
  /* Archivo 800 · latin */
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/archivo-800-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;
  }
  /* Space Mono 400 · latin-ext */
  @font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/space-mono-400-latin-ext.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;
  }
  /* Space Mono 400 · latin */
  @font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/space-mono-400-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;
  }
  /* Space Mono 700 · latin-ext */
  @font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/space-mono-700-latin-ext.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;
  }
  /* Space Mono 700 · latin */
  @font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/wp-content/themes/neeq-native/assets/fonts/space-mono-700-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{
    --ink:#ECEEF4; --paper:#0C1016; --onyx:#14181F; --panel:#1E2530;
    --muted:#9AA0AE; --slate:#6E7688; --slate-txt:#8A93A6;
    --line:rgba(236,238,244,.10); --line-2:rgba(236,238,244,.22);
    --cyan:#14BEC9; --halo:#74E6EC;
    --accent-soft:rgba(20,190,201,.15); --accent-glow:rgba(20,190,201,.45);
    --card:#14181F; --card-line:rgba(236,238,244,.10);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.45);
    --ease-mech:cubic-bezier(.2,.85,.28,1.22);
    --ease-press:cubic-bezier(.32,0,.4,1);
    --ease-out:cubic-bezier(.22,.61,.36,1);
    --screws:
      radial-gradient(circle at 12px 12px, #465468 0 1.7px, #0d1118 2px 3.5px, transparent 3.8px),
      radial-gradient(circle at calc(100% - 12px) 12px, #465468 0 1.7px, #0d1118 2px 3.5px, transparent 3.8px),
      radial-gradient(circle at 12px calc(100% - 12px), #465468 0 1.7px, #0d1118 2px 3.5px, transparent 3.8px),
      radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #465468 0 1.7px, #0d1118 2px 3.5px, transparent 3.8px);
  }
  /* Les contrôles natifs (lecteurs audio, champs, ascenseurs) suivent le thème sombre
     sur tous les navigateurs, pas seulement ceux qui le devinent. */
  :root{color-scheme:dark}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:92px}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Archivo',ui-sans-serif,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .num{font-family:'Space Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
  a{color:var(--ink); text-decoration:none}
  a:hover{color:var(--halo)}
  button{font:inherit; color:inherit}
  .wrap{max-width:1060px; margin:0 auto; padding:0 24px}
  section{padding:74px 0}
  section.tight{padding:50px 0}
  .skiplink{position:absolute; left:-9999px; top:0; z-index:100; background:var(--cyan); color:#04181a; font-weight:700; padding:12px 20px; border-radius:0 0 10px 0}
  .skiplink:focus{left:0; color:#04181a}
  .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

  .kicker{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); display:flex; align-items:center; gap:10px; margin:0}
  .kicker::before{content:""; width:22px; height:1px; background:var(--cyan)}
  .sectiontitle{font-size:clamp(22px,3vw,32px); font-weight:800; letter-spacing:-.015em; margin:0 0 12px; text-wrap:balance}
  /* Plafond retiré : mesuré, ces textes tenaient sur une ligne mais un max-width en ch
     les bridait à ~60 %% de leur conteneur. Un plafond protège le retour de l'œil d'une
     ligne à l'autre ; sans retour, il ne protège rien et coûte un repli. C'est .wrap qui
     fixe la mesure. Les plafonds conservés ailleurs (hero, .about) sont volontaires. */
  p.lede{font-size:16px; color:var(--muted); line-height:1.6; margin:0 0 32px}

  /* ===== SYSTÈME D'INTERACTION — une matière, quatre états, valable partout ===== */

  .fv:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:12px; }
  .fv{outline:none}

  .pulsept{animation:monopulse 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box}
  @keyframes monopulse{0%,100%{opacity:.55; transform:scale(.88)} 30%{opacity:1; transform:scale(1.12)} 60%{opacity:.8; transform:scale(1)}}

  /* ===== header ===== */
  header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:24px}
  .logolockup{display:flex; align-items:center; gap:11px; flex:none; min-height:44px}
  .logolockup svg.symbol{height:42px; width:42px; display:block}
  .logolockup svg.wordmark{height:27px; width:auto; display:block}
  /* descripteur : masqué sous 900px, où le H1 dit déjà « podcast » et où
     la largeur d'en-tête est comptée (cf. correctif du débordement à 320px) */
  .lockupline{display:none; width:1px; height:22px; background:var(--line-2); flex:none; margin:0 3px}
  .baseline{display:none; font-family:'Space Mono',ui-monospace,monospace; font-size:12px;
    letter-spacing:.1em; text-transform:lowercase; color:var(--slate-txt); white-space:nowrap; padding-top:2px}
  /* 900px suffisait pour la place du descripteur, mais l'en-tête complet
     (logo + 5 liens + bouton) demande 955px : il apparaît donc à 1100px. */
  @media (min-width:1100px){ .lockupline, .baseline{display:block} }
  .navlinks{display:flex; gap:18px; flex:1; justify-content:center}
  .navlinks a{white-space:nowrap; font-size:14px; font-weight:600; color:var(--muted); transition:color .15s; padding:4px 2px; border-radius:6px}
  .navlinks a:hover{color:var(--cyan)}
  .navgroup{display:flex; align-items:center; gap:10px; flex:none}
  .navcta{font-family:'Space Mono',ui-monospace,monospace; font-size:13.5px; font-weight:700; letter-spacing:.03em; color:var(--ink); border:1px solid var(--line-2); border-radius:999px; height:44px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; flex:none; background:transparent;
    transition:transform .13s var(--ease-press), border-color .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out)}
  .navcta:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px); box-shadow:0 4px 12px -4px var(--accent-glow)}
  .navcta:active{transform:translateY(1px); filter:brightness(.94)}
  .navburger{display:none; flex:none; width:44px; height:44px; padding:0; border-radius:999px; border:1px solid var(--line-2); background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; box-sizing:border-box; transition:border-color .18s var(--ease-out), background .18s var(--ease-out)}
  .navburger span{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px; transition:transform .22s var(--ease-mech), opacity .16s var(--ease-out)}
  .navburger span:nth-child(2){width:12px; position:relative}
  .navburger span:nth-child(2)::after{content:''; position:absolute; top:50%; right:-6px; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--cyan)}
  .navburger:hover{border-color:var(--cyan)}
  .navburger.open{border-color:var(--cyan); background:var(--accent-soft)}
  .navburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navburger.open span:nth-child(2){opacity:0}
  .navburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ===== boutons ===== */
  .btn{display:inline-flex; align-items:center; gap:10px; background:var(--cyan); color:#04181a; font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px; border:1px solid var(--cyan); cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px -6px var(--accent-glow);
    transition:transform .13s var(--ease-press), filter .15s var(--ease-out), box-shadow .18s var(--ease-out)}
  .btn:hover{filter:brightness(1.07); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -6px var(--accent-glow)}
  .btn:active{transform:translateY(1px); filter:brightness(.97); box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .btn.ghost:hover{border-color:var(--cyan); color:var(--cyan); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px -6px var(--accent-glow)}
  .btn.small{padding:9px 18px; font-size:14.5px}

  /* ===== hero ===== */
  .hero{position:relative; overflow:hidden; padding:90px 0 74px}
  .hero::before{content:""; position:absolute; top:-220px; right:-220px; width:560px; height:560px; background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); pointer-events:none}
  .hero .wrap{position:relative; display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:center}
  .eyebrow{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); display:flex; align-items:center; gap:10px; margin:0 0 18px}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--cyan)}
  .hero h1{font-size:clamp(30px,4.6vw,50px); font-weight:800; letter-spacing:-.02em; margin:0 0 20px; max-width:16ch; text-wrap:balance}
  .hero p.sub{font-size:18px; color:var(--ink); max-width:46ch; line-height:1.55; margin:0 0 32px}

  .heroSignal{justify-self:center; width:100%; max-width:380px}
  .heroSignal svg{width:100%; height:auto; display:block}
  .wavepath{stroke-dasharray:7 7; animation:waveflow 3.2s linear infinite}
  @keyframes waveflow{to{stroke-dashoffset:-28}}
  .samplept{transform-origin:center; transform-box:fill-box}
  .samplept.up{animation:sampleup 2.4s ease-in-out infinite}
  .samplept.down{animation:sampledown 2.4s ease-in-out infinite}
  /* Amplitudes divisées par deux avec la hauteur des barres (50 → 25 u.) : à ±10 le rebond
     dépassait la courbe de 40 % et défaisait l'alignement sur les extremums. */
  @keyframes sampleup{0%,100%{opacity:.35; transform:translateY(5px) scale(.8)} 30%{opacity:1; transform:translateY(-3px) scale(1.12)} 60%{opacity:.65; transform:translateY(0) scale(1)}}
  @keyframes sampledown{0%,100%{opacity:.35; transform:translateY(-5px) scale(.8)} 30%{opacity:1; transform:translateY(3px) scale(1.12)} 60%{opacity:.65; transform:translateY(0) scale(1)}}

  /* ===== POUR QUI (cas d'usage, entrée narrative) ===== */


  /* ===== CE QUE NOUS LIVRONS — modules façon rack ===== */
  .modgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
  .module{display:flex; flex-direction:column; gap:12px; padding:18px 15px 16px; border-radius:14px;
    background:var(--screws), linear-gradient(180deg,#1b222d,#12161d); background-repeat:no-repeat; border:1px solid var(--card-line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px -10px rgba(0,0,0,.6);
    transition:transform .16s var(--ease-out), border-color .2s var(--ease-out)}
  .module:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--cyan) 34%,var(--card-line))}
  .modtop{display:flex; align-items:center; justify-content:space-between}
  .modicon{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--cyan);
    background:radial-gradient(circle at 38% 28%, rgba(20,190,201,.20), rgba(20,190,201,.04));
    border:1px solid color-mix(in srgb,var(--cyan) 30%, var(--card-line))}
  .modicon svg{width:21px; height:21px}
  .modlabel{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-txt)}
  .modname{font-size:16.5px; font-weight:800; line-height:1.3; margin:0; min-height:2.6em}
  .moddesc{font-size:15.5px; color:var(--muted); line-height:1.5; margin:0; flex:1}

  /* ===== comment ca marche ===== */
  .softintro{font-size:16px; color:var(--ink); font-weight:600; margin:0 0 20px}
  .stepicon{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--cyan); color:var(--cyan); flex:none}
  .stepicon svg{width:16px; height:16px}

  /* ===== pourquoi ===== */
  .whygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:6px}
  .whogrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px}

  /* ===== CATALOGUE — un seul appareil ===== */
  .subhead{font-family:'Space Mono',ui-monospace,monospace; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:6px}
  .subhead.sep{margin-top:44px; padding-top:26px; border-top:1px solid var(--line)}

  .console{
    position:relative; border-radius:20px; padding:26px 28px 24px; margin-bottom:22px;
    background:linear-gradient(176deg, #232c3a 0%, #191f2b 46%, #12171f 100%);
    border:1px solid var(--line-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 6px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,.8);
  }
  .console .screw{position:absolute; width:9px; height:9px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #3a4657, #10141c 78%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.5)}
  .console .screw::after{content:""; position:absolute; inset:2px; border-top:1px solid rgba(0,0,0,.5); transform:rotate(34deg)}
  .console .screw.tl{top:11px; left:12px} .console .screw.tr{top:11px; right:12px}
  .console .screw.bl{bottom:11px; left:12px} .console .screw.br{bottom:11px; right:12px}
  .engraved{font-family:'Space Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--slate-txt); text-shadow:0 1px 0 rgba(0,0,0,.55)}

  .consolebay{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:stretch}
  .baytop{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px}
  .baytop .bayttl{font-size:12px}
  .bancnote{font-size:12px; letter-spacing:.14em}

  .ctrlbay{display:flex; gap:20px; align-items:stretch; min-height:250px}

  /* afficheur */
  .readout{flex:1; min-width:220px; border-radius:14px; padding:20px 22px; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
    background:radial-gradient(120% 120% at 20% 0%, #0f151d 0%, #090c11 100%);
    border:1px solid rgba(0,0,0,.7);
    box-shadow:inset 0 2px 10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(20,190,201,.08)}
  .readout .rlabel{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-txt)}
  .readout .rname{font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1; transition:opacity .18s}
  .readout .rforwho{font-size:15.5px; color:var(--ink); line-height:1.5}
  .readout .rforwho .rfw{display:block; font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:5px}
  .rlevel{display:flex; align-items:flex-end; gap:3px; height:16px}
  .rlevel span{flex:1; border-radius:1px; background:#1c2531; transition:background .25s var(--ease-out)}
  .rlevel span.on{background:var(--cyan); box-shadow:0 0 6px var(--accent-glow)}

  /* cartes-tranches */
  .offer3col{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; align-items:stretch}
  .offercard{position:relative; background:linear-gradient(180deg,#171d27,#12161d); border:1px solid var(--card-line); border-radius:16px; padding:22px 20px 20px; display:flex; flex-direction:column; gap:14px; cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px -8px rgba(0,0,0,.6);
    transition:transform .16s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s}
  .offercard:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--cyan) 40%, var(--card-line)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -12px rgba(0,0,0,.7)}
  .offercard.hi{border-color:var(--cyan); border-width:2px; padding:21px 19px 19px;
    background:linear-gradient(180deg,#14545c,#102830);
    transform:translateY(-4px);
    box-shadow:0 0 0 4px rgba(20,190,201,.13), 0 0 46px -12px var(--accent-glow), 0 20px 38px -16px rgba(0,0,0,.8)}
  .offercard.hi .nm{color:#fff}
  .offercard.hi .amt{color:var(--halo); text-shadow:0 0 18px rgba(116,230,236,.45)}
  .offercard.hi .incl li{color:#fff}
  .offercard.hi .inclhead{color:rgba(255,255,255,.72)}
  .offercard.hi .forwho{color:rgba(255,255,255,.82); border-top-color:rgba(116,230,236,.3)}
  .offercard.hi .forwho b{color:var(--halo)}
  .offercard.hi:hover{transform:translateY(-5px)}
  .offercard.hi::after{content:""; position:absolute; left:20px; right:20px; top:0; height:2px; background:var(--cyan); box-shadow:0 0 10px var(--accent-glow); border-radius:0 0 2px 2px}
  .offerhead{display:flex; flex-direction:column; gap:8px}

  .offercard .nm{font-size:20px; font-weight:800; letter-spacing:-.01em}
  .offercard .priceline{display:flex; align-items:baseline; gap:7px}
  .offercard .amt{font-family:'Space Mono',ui-monospace,monospace; font-weight:800; font-size:30px; letter-spacing:-.02em}
  .offercard .unit{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
  .incl{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
  .inclhead{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:1px}
  .inclhead.plus{color:var(--cyan)}
  .incl li{position:relative; padding-left:19px; font-size:15.5px; color:var(--ink); line-height:1.4}
  .incl li::before{content:""; position:absolute; left:0; top:7px; width:9px; height:2px; border-radius:2px; background:var(--cyan); box-shadow:0 0 6px var(--accent-glow)}
  .forwho{font-size:15px; color:var(--muted); line-height:1.5; border-top:1px solid var(--line); padding-top:13px; margin-top:auto}
  .forwho b{display:block; color:var(--cyan); font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; font-weight:700}

  /* abonnement — fader horizontal */
  .packbay{display:grid; grid-template-columns:1fr 250px; gap:28px; align-items:center}
  .packfaderzone{padding:6px 4px}
  .hfaderslot{position:relative; height:48px; border-radius:12px;
    background:linear-gradient(180deg,#0c1016,#161c26); border:1px solid rgba(0,0,0,.6);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
  .hfaderrail{position:absolute; top:50%; left:18px; right:18px; height:6px; transform:translateY(-50%); border-radius:999px; background:#0a0e13; box-shadow:inset 0 0 0 1px rgba(0,0,0,.8)}
  .hfaderfill{position:absolute; top:50%; left:18px; height:6px; transform:translateY(-50%); border-radius:999px; background:linear-gradient(90deg,var(--cyan),var(--halo)); box-shadow:0 0 8px var(--accent-glow); transition:width .34s var(--ease-mech)}
  .hfadercap{position:absolute; top:50%; width:34px; height:44px; border-radius:6px; transform:translate(-50%,-50%); cursor:grab; touch-action:none;
    background:linear-gradient(90deg,#eef1f6,#c3c9d4 42%,#9aa2b0 43%,#d3d9e2);
    box-shadow:0 3px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9); transition:left .34s var(--ease-mech), box-shadow .18s, transform .18s}
  .hfadercap::before{content:""; position:absolute; top:6px; bottom:6px; left:50%; width:2px; transform:translateX(-50%); background:var(--cyan); box-shadow:0 0 6px var(--accent-glow); border-radius:2px}
  .hfadercap::after{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:9px; border-radius:2px; background:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1.5px, transparent 1.5px 4px)}
  .hfadercap.grab{transform:translate(-50%,-50%) scale(1.08); cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,.7), 0 0 0 3px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.9); transition:box-shadow .12s, transform .12s}
  .hfaderlabels{display:flex; justify-content:space-between; margin-top:12px; padding:0 6px}
  .hfaderlabels button{font-family:'Space Mono',ui-monospace,monospace; font-size:13px; color:var(--slate-txt); background:none; border:none; cursor:pointer; padding:13px 7px; min-height:44px; min-width:26px; border-radius:8px; transition:color .18s, background .18s}
  .hfaderlabels button:hover{background:rgba(255,255,255,.04)}
  .hfaderlabels button:hover{color:var(--ink)}
  .hfaderlabels button.on{color:var(--cyan); font-weight:700}
  .packreadout{border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:8px;
    background:radial-gradient(120% 120% at 20% 0%, #0f151d 0%, #090c11 100%);
    border:1px solid rgba(0,0,0,.7); box-shadow:inset 0 2px 10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(20,190,201,.08)}
  .packreadout .rlabel{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-txt)}
  .packeps{font-size:19px; font-weight:800}
  .packpe{font-family:'Space Mono',ui-monospace,monospace; font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--cyan); text-shadow:0 0 14px var(--accent-glow); line-height:1}
  .packpe .runit{font-size:12px; color:var(--muted); text-shadow:none; margin-left:4px}
  .packtot{font-family:'Space Mono',ui-monospace,monospace; font-size:14.5px; color:var(--muted)}
  .packsum{margin-top:13px; padding-top:12px; border-top:1px solid rgba(20,190,201,.24); font-size:15.5px; color:var(--ink); line-height:1.35}
  .packsum b{font-family:'Space Mono',ui-monospace,monospace; font-size:20px; color:var(--cyan); margin-right:5px}
  .packsum span{display:block; font-size:13px; color:var(--slate-txt); margin-top:3px; line-height:1.4}
  .packtot b{color:var(--ink)}
  .addon{font-size:14.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:12px; margin-top:16px}
  .addon b{color:var(--ink)}

  /* Le test offert n'est pas une quatrième formule : cadre en pointillé, jamais
     l'aplat des cartes d'offre, et un badge qui dit tout de suite ce que c'est. */
  /* Le traitillé disait « brouillon, à compléter » sur l'offre d'entrée. Remplacé par le
     traitement de carte mise en avant déjà utilisé pour .demobox.after et .cmpcard.us :
     bordure cyan pleine + voile cyan léger. Jamais d'aplat pur : la teinte d'accent reste
     réservée à l'interaction, et le bouton est hors de l'encadré. */
  /* Même teinte que les cartes .choix de « Où en êtes-vous ? » : fond pétrole cyanté. */
  .testbox.essai{margin-top:44px; padding:22px 26px; border-radius:14px;
    background:linear-gradient(180deg,#123e46,#101c22);
    border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--card-line));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.7)}
  .testbox.essai .th{font-size:17px}
  .essaibadge{display:inline-block; font-family:'Space Mono',ui-monospace,monospace; font-size:11.5px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); font-weight:700;
    border:1px solid color-mix(in srgb,var(--cyan) 45%,var(--line-2)); background:var(--accent-soft);
    border-radius:999px; padding:3px 11px; margin-bottom:13px}
  .testbox{background:var(--screws), linear-gradient(176deg, #232c3a 0%, #191f2b 46%, #12171f 100%); background-repeat:no-repeat; border:1px solid var(--line-2); border-radius:16px; padding:22px 26px; margin-top:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 6px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75)}
  .testbox .th{font-size:16px; font-weight:800; margin:0 0 4px}
  .testbox .th::before{content:"// "; font-family:'Space Mono',ui-monospace,monospace; color:var(--cyan); font-weight:700}
  .testbox .ts{font-size:15px; color:var(--muted); margin:0; max-width:70ch; line-height:1.5}
  .catalogcta{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:28px}

  /* ===== a propos ===== */
  .aboutrack{padding:24px 28px}
  .aboutgrid{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center}
  .avatarphoto{width:118px; max-width:118px; height:118px; border-radius:14px; object-fit:cover; flex:none; filter:grayscale(1); border:1px solid var(--card-line)}
  .statbadge{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 20px; border-radius:14px; flex:none; background:var(--panel); border:1px solid color-mix(in srgb,var(--cyan) 35%, var(--card-line)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .statnum{font-family:'Space Mono',ui-monospace,monospace; font-size:46px; font-weight:700; letter-spacing:-.02em; color:var(--cyan); line-height:1; text-shadow:0 0 18px var(--accent-glow)}
  .statlbl{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:8px; line-height:1.4}
  .about p{font-size:16.5px; color:var(--muted); line-height:1.65; max-width:56ch; margin:0}

  /* ===== contact / footer ===== */
  footer{background:var(--panel); color:var(--ink); padding:74px 0 32px; border-top:1px solid var(--line)}
  footer .sectiontitle{color:inherit}
  .contactgrid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
  .contactform{display:flex; flex-direction:column; gap:12px}
  .contactform input, .contactform textarea{font-family:inherit; font-size:15.5px; min-height:44px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:12px 14px; color:inherit; outline:none; transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s}
  .contactform input::placeholder, .contactform textarea::placeholder{color:rgba(255,255,255,.62)}
  .contactform input:focus, .contactform textarea:focus{border-color:var(--cyan); background:rgba(20,190,201,.06); box-shadow:0 0 0 3px var(--accent-soft)}
  .contactform textarea{resize:vertical; min-height:100px}
  .contactform .btn{align-self:flex-start; margin-top:4px}
  .contactform .btn[disabled]{opacity:.6; cursor:default}
  .formstatus{font-size:15px; line-height:1.55; margin:8px 0 0; padding:12px 14px; border-radius:10px; border:1px solid var(--line-2); color:var(--ink)}
  .formstatus.ok{border-color:var(--cyan); background:var(--accent-soft)}
  .formstatus.err{border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.06)}

  .contactdirect{display:flex; flex-direction:column; gap:16px}
  .contactlink{display:flex; align-items:center; gap:12px; color:inherit; font-size:15px; font-weight:600; border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px 18px;
    transition:transform .13s var(--ease-press), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out)}
  .contactlink:hover{border-color:var(--cyan); color:var(--ink); transform:translateY(-1px); box-shadow:0 6px 16px -8px var(--accent-glow)}
  .contactlink:active{transform:translateY(1px)}
  .contactlink .ic{color:var(--cyan); flex:none}
  .footerbottom{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12)}
  .legalband{background:var(--paper); border-top:1px solid rgba(255,255,255,.12); margin-top:56px; padding:32px 0 8px}
  .legalband-head{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-txt); max-width:760px; margin:0 auto 2px}
  .legal a{color:var(--halo); text-decoration:none}
  .legal a:hover{text-decoration:underline}
  .footerlegalnav{display:flex; flex-wrap:wrap; gap:20px}
  .footerlegalnav a, .footerlegalnav button{font-family:'Space Mono',ui-monospace,monospace; font-size:12.5px; letter-spacing:.02em; color:rgba(255,255,255,.62); background:none; border:none; padding:12px 4px; margin:-12px -4px; cursor:pointer; transition:color .15s}
  .footerlegalnav a:hover, .footerlegalnav button:hover{color:var(--cyan)}
  .legal{margin:0; font-family:'Space Mono',ui-monospace,monospace; font-size:12px; color:rgba(255,255,255,.62); letter-spacing:.02em; white-space:nowrap}

  /* ===== cookies ===== */
  .cookiebanner{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; background:var(--card); border:1px solid var(--card-line); border-radius:12px; box-shadow:var(--shadow); padding:10px 16px; display:none}
  .cookiebanner.show{display:block}
  .cookiebanner-inner{display:flex; align-items:center; gap:14px; flex-wrap:wrap; max-width:1040px; margin:0 auto}
  .cookieicon{flex:none; color:var(--cyan)}
  .cookiebanner p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.4; flex:1; min-width:220px}
  .cookiebanner p a{color:var(--cyan)}
  .cookiebanner-actions{display:flex; gap:8px; flex:none}
  .cookiemodal{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:20px}
  .cookiemodal.show{display:flex}
  .cookiemodal-panel{background:var(--card); border:1px solid var(--card-line); border-radius:16px; padding:30px; max-width:440px; width:100%; max-height:85vh; overflow:auto; position:relative; box-shadow:var(--shadow)}
  .cookiemodal-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; padding:4px}
  .cookiemodal-close:hover{color:var(--cyan)}
  .cookiemodal-eyebrow{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; color:var(--cyan); letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px}
  .cookiemodal h3{font-size:21px; font-weight:800; margin:0 0 10px}
  .cookiemodal-desc{font-size:14.5px; color:var(--muted); line-height:1.6; margin:0 0 6px}
  .cookiemodal-desc a{color:var(--cyan)}
  .cookierow{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
  .cookierow-title{font-size:14.5px; font-weight:700; margin-bottom:2px}
  .cookierow-desc{font-size:13px; color:var(--muted); line-height:1.5}
  .toggle{width:38px; height:22px; border-radius:999px; background:var(--panel); border:1px solid var(--card-line); position:relative; flex:none; cursor:pointer; padding:0; transition:background .18s, border-color .18s}
  .toggle::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .18s var(--ease-mech), background .18s}
  .toggle.on::after{transform:translateX(16px); background:var(--cyan)}
  .toggle.on{background:var(--accent-soft); border-color:var(--cyan)}
  .toggle.disabled{opacity:.55; cursor:default}
  .cookiemodal-actions{display:flex; gap:10px; margin-top:22px}
  .cookiemodal-actions .btn{white-space:nowrap}
  .cookiemodal-actions .btn{flex:1; justify-content:center}
  .legalacc{max-width:760px; margin:8px auto 0}
  .legalitem{border-top:1px solid rgba(255,255,255,.12)}
  .legaltrigger{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; padding:18px 0; cursor:pointer; text-align:left; color:var(--ink); font-family:'Archivo',sans-serif; font-size:17px; font-weight:700; letter-spacing:-.01em; transition:color .16s}
  .legaltrigger:hover{color:var(--cyan)}
  .legaltrigger .caret{width:15px; height:15px; flex:none; color:var(--cyan); transition:transform .25s var(--ease-out)}
  .legaltrigger[aria-expanded="true"] .caret{transform:rotate(90deg)}
  .legalpanel{overflow:hidden; max-height:0; transition:max-height .32s var(--ease-out)}
  .legalpanel-inner{padding:0 0 22px}
  .legalpanel-inner p{font-size:15.5px; color:var(--muted); line-height:1.7; margin:0 0 12px}
  .legalpanel-inner p:last-child{margin-bottom:0}
  .legalpanel-inner b{color:var(--ink); font-weight:700}
  .legalpanel-inner em{color:var(--slate-txt); font-style:italic}
  .legalpanel-inner a{color:var(--cyan)}

  /* ===== RACK : façade Reason (vis d'angle via background, sans markup) ===== */
  .rack{position:relative; border:1px solid var(--line-2); border-radius:16px;
    background:var(--screws), linear-gradient(176deg, #232c3a 0%, #191f2b 46%, #12171f 100%); background-repeat:no-repeat;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 6px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75)}
  .steplabel{font-family:'Space Mono',ui-monospace,monospace; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--slate-txt); display:flex; align-items:center; gap:10px; margin-bottom:3px}
  .stepno{color:#04181a; background:var(--cyan); font-weight:700; font-size:12px; padding:3px 9px; border-radius:999px; letter-spacing:.06em; box-shadow:0 0 12px -2px var(--accent-glow); white-space:nowrap; flex:none}
  .steplabel{flex-wrap:wrap; row-gap:6px}


  /* Par où commencer — questionnaire guidé */
  .guided{display:flex; flex-direction:column; gap:22px}
  .glabel{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-txt); margin-bottom:11px; display:flex; align-items:center; gap:9px}
  .gnum{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:700; color:var(--slate-txt); background:#2a3340; box-shadow:inset 0 1px 1px rgba(0,0,0,.5); transition:background .2s, color .2s, box-shadow .2s}
  .gnum.on{color:#04181a; background:var(--cyan); box-shadow:0 0 12px -2px var(--accent-glow)}
  .gsep{display:flex; justify-content:center; color:var(--cyan); opacity:.7; margin:-6px 0}
  .gsep svg{width:16px; height:16px}
  .gopts{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .gbtn{display:flex; align-items:center; gap:13px; text-align:left; padding:16px 20px; border-radius:12px; cursor:pointer; color:var(--ink);
    background:linear-gradient(180deg,#242d3b,#171d27); border:1px solid var(--line-2);
    font-family:'Space Mono',ui-monospace,monospace; font-size:15px; font-weight:700; line-height:1.35;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.4);
    transition:transform .13s var(--ease-press), box-shadow .18s var(--ease-out), border-color .18s, background .18s}
  .gicon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; color:var(--slate-txt); background:rgba(0,0,0,.25); border:1px solid var(--line-2); transition:color .18s, background .18s, border-color .18s, box-shadow .18s}
  .gicon svg{width:18px; height:18px}
  .gbtn:hover{transform:translateY(-1px); border-color:color-mix(in srgb,var(--cyan) 45%,var(--line-2))}
  .gbtn:hover .gicon{color:var(--ink)}
  .gbtn:active{transform:translateY(1px)}
  .gbtn.on{border-color:var(--cyan); background:linear-gradient(180deg, color-mix(in srgb,var(--accent-soft) 60%,#1a2230), #141a24); box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px var(--accent-soft), 0 0 22px -8px var(--accent-glow)}
  .gbtn.on .gicon{color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 55%,var(--line-2)); background:var(--accent-soft); box-shadow:0 0 12px -3px var(--accent-glow)}
  .gbtn.hint{animation:gbtnhint 2.3s ease-in-out infinite; border-color:color-mix(in srgb,var(--cyan) 42%,var(--line-2))}
  .gbtn.hint .gicon{color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 45%,var(--line-2))}
  .gchev{margin-left:auto; width:17px; height:17px; flex:none; color:var(--slate-txt); transition:color .18s var(--ease-out), transform .18s var(--ease-out)}
  .gbtn:hover .gchev{color:var(--cyan); transform:translateX(3px)}
  .gbtn.on .gchev{color:var(--cyan)}
  .gbtn.hint .gchev{color:var(--cyan); animation:chevnudge 1.5s ease-in-out infinite}
  @keyframes chevnudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)}}
  .gclickhint{display:inline-flex; align-items:center; gap:8px; margin:-2px 0 13px; font-family:'Space Mono',ui-monospace,monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); animation:hintblink 2s ease-in-out infinite}
  .gclickhint svg{width:15px; height:15px; flex:none}
  @keyframes hintblink{0%,100%{opacity:.5} 50%{opacity:1}}
  @keyframes gbtnhint{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.4), 0 0 0 0 rgba(20,190,201,0)} 50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.4), 0 0 0 3px var(--accent-soft), 0 0 24px -6px var(--accent-glow)}}
  [hidden]{display:none !important}

  /* Comment ça marche — compact */
  .ccm{display:flex; flex-direction:column; gap:10px}
  .ccmrack{padding:15px 20px}
  .stepcapinline{font-family:'Space Mono',ui-monospace,monospace; font-weight:400; color:var(--slate-txt); text-transform:none; letter-spacing:.02em; font-size:12px}
  .stepdesc{font-size:15.5px; color:var(--muted); line-height:1.55; margin:10px 0 0}
  .stepflow{display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; margin-top:12px}
  .stepf{flex:1; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
    background:linear-gradient(180deg,#1b222d,#141a23); border:1px solid var(--line-2); border-radius:10px; padding:13px 8px}
  /* même recette de voile que les autres mises en avant de la page — une seule matière */
  .stepf.nous{background:linear-gradient(180deg,#123e46,#101c22); border-color:color-mix(in srgb,var(--cyan) 45%,var(--card-line));
    box-shadow:inset 0 1px 0 rgba(116,230,236,.12), 0 0 26px -14px var(--accent-glow)}
  .stepftxt{font-size:13.5px; font-weight:600; line-height:1.25}
  .flowarr{display:flex; align-items:center; color:var(--slate-txt); flex:none}
  .flowarr svg{width:15px; height:15px}

  /* Estimation du budget */
  .totalrows{display:flex; flex-direction:column}
  .totalrow{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted)}
  .totalrow b{color:var(--ink); font-weight:700}
  .totalrow .num{font-family:'Space Mono',ui-monospace,monospace; font-weight:700; color:var(--ink)}
  .totalrow.grand{border-bottom:none; border-top:1px solid var(--line-2); margin-top:4px; padding-top:14px; font-size:16px; color:var(--ink); font-weight:700}



  .inclmark{display:inline-block; font-family:'Space Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); border:1px solid color-mix(in srgb,var(--cyan) 45%,var(--line-2)); background:var(--accent-soft); border-radius:999px; padding:2px 9px; margin-left:6px; vertical-align:1px}
  .totalrow.grand .num{font-size:22px; color:var(--cyan); text-shadow:0 0 14px var(--accent-glow)}
  /* 70ch bridait le texte à 561 px dans un conteneur de 964 : la phrase tombait sur
     3 lignes alors que 2 suffisaient. Le confort de lecture reste assuré (~100 ch),
     et la limite continue de jouer sur les écrans larges. */
  .totalnote{font-size:14px; color:var(--slate-txt); line-height:1.55; margin:12px 0 0; max-width:100ch}

  /* écoute avant / après */
  .demogrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
  .demotag{display:inline-block; font-family:'Space Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--slate-txt); border:1px solid var(--line-2);
    border-radius:999px; padding:2px 10px; margin-right:9px}
  .demobox.after .demotag{color:#04181a; background:var(--cyan); border-color:var(--cyan)}
  .demonote{font-size:13.5px; color:var(--slate-txt); line-height:1.45; margin:12px 0 0}
  .demobox.after .demonote{color:rgba(255,255,255,.7)}
  .demofoot{font-size:13.5px; color:var(--slate-txt); line-height:1.5; margin:16px 0 0}
  .demobox{padding:18px 20px; border-radius:14px; background:linear-gradient(180deg,#171d27,#12161d); border:1px solid var(--card-line)}
  .demobox.after{border-color:color-mix(in srgb,var(--cyan) 50%,var(--card-line)); background:linear-gradient(180deg, color-mix(in srgb,var(--accent-soft) 45%, #171d27), #12161d)}
  .demolab{font-family:'Space Mono',ui-monospace,monospace; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-txt); font-weight:700; margin-bottom:10px}
  .demobox.after .demolab{color:var(--cyan)}
  .demobox audio{width:100%; height:40px; display:block}
  /* CIBLES TACTILES — plancher WCAG 2.5.5 à 44 px. Mesuré : les boutons du bandeau
     cookies tombaient à 42, le lien de préférences à 43, les boutons de nombre
     d'épisodes à 26–30 de large. Un ou deux pixels manquants suffisent à rater. */
  .cookiebanner .btn, #openCookiePrefs, .gbtn{min-height:44px}
  /* Les graduations sous le curseur de pack restent à 26 px de large : les porter à 44
     déborde à 320 px (8 × 44 = 352) et casse leur alignement sur les crans du fader.
     Exception WCAG 2.5.5 : la même fonction est offerte par le curseur lui-même,
     48 px de haut sur toute la largeur. Le harnais les signalera : c'est voulu. */
  #packcap{min-width:44px}
  /* REGRESSION CORRIGEE : `button.fv{min-height:44px}` etirait les interrupteurs de la
     modale cookies de 38x22 a 38x44 — ils devenaient des ovales. Celui de « Necessaires »
     etant un <span>, il restait juste : c'est ce qui rendait le defaut visible.
     Les interrupteurs gardent leur taille visuelle et gagnent une zone tactile de 44 px
     par pseudo-element, ce qui est la bonne facon de faire pour un commutateur. */
  @media (pointer:coarse){ .btn, button.fv:not(.toggle){min-height:44px} }
  .toggle::before{content:""; position:absolute; inset:-11px -4px; border-radius:999px}
  .stepopts{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px}
  .stepopts li{font-size:14px; line-height:1.5; color:var(--slate-txt);
    padding-left:13px; border-left:2px solid var(--card-line)}
  .optlab{font-family:'Space Mono',ui-monospace,monospace; font-size:10.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-right:7px}
  /* Durée annoncée en dur : la lire sur le fichier obligerait à le précharger. */
  .demodur{float:right; font-weight:400; letter-spacing:.06em; opacity:.72}


  /* ===== SURFACES CYAN — trois intensités, jamais l'aplat pur hors bouton =====
     nuit  : surface teintée sombre, texte ivoire — pour un bloc qui doit gagner
     voile : voile léger sur carte sombre — pour distinguer sans écraser
     L'aplat cyan plein reste réservé aux boutons d'action : c'est ce qui garde
     au cyan sa valeur de signal. */
  .nuit{background:linear-gradient(176deg,#0f4a51 0%,#0b3439 54%,#082a2e 100%);
        border:1px solid rgba(116,230,236,.24);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 48px -26px rgba(0,0,0,.85)}
  .nuit .engraved{color:var(--halo); text-shadow:none}
  .nuit .invtitle{color:#fff; font-size:clamp(22px,2.7vw,29px); font-weight:800; letter-spacing:-.018em; margin:0 0 10px; text-wrap:balance}
  .nuit .invtext{color:rgba(255,255,255,.86); font-size:16.5px; line-height:1.6; margin:0}

  .nuit .invlink:hover{border-color:var(--halo); gap:12px; color:var(--halo)}

  /* ===== « OÙ EN ÊTES-VOUS ? » — la couleur marque ce sur quoi on peut agir ===== */
  .choix{background:linear-gradient(180deg,#123e46,#101c22) !important;
         border-color:color-mix(in srgb,var(--cyan) 40%,var(--card-line)) !important;
         color:inherit; cursor:pointer}
  .choix:hover{transform:translateY(-3px); border-color:var(--cyan) !important;
               box-shadow:0 0 30px -12px var(--accent-glow), 0 16px 34px -14px rgba(0,0,0,.75)}
  .choix .modicon{color:var(--halo); border-color:color-mix(in srgb,var(--cyan) 45%,var(--card-line))}
  .choix .moddesc{color:rgba(255,255,255,.78)}
  .choix{position:relative; padding-right:52px}
  .choixarrow{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:28px; height:28px;
    border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--halo);
    border:1px solid rgba(116,230,236,.35); transition:background .18s var(--ease-out), transform .18s var(--ease-out)}
  .choixarrow svg{width:13px; height:13px}
  .choix:hover .choixarrow{background:var(--accent-soft); transform:translateY(-50%) translateX(3px)}

  /* ===== COMPARATIF — QUATRE COLONNES =====
     Empilés, les quatre encadrés faisaient 760 px de haut pour une information
     qui se compare mieux côte à côte. En colonnes, l'œil balaie une seule fois. */
  .vu{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px}
  /* Fond encre plutôt que blanc translucide : le texte respire, et deux contrastes
     qui échouaient au seuil AA passent (libellés 3.93 → 5.36, notes 4.40 → 6.21). */
  .vucard{padding:15px 16px 16px; border-radius:12px; background:var(--paper);
          border:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column}
  .vucard.us{background:linear-gradient(180deg, rgba(20,190,201,.10), rgba(20,190,201,.04)), var(--paper);
             border-color:var(--cyan); box-shadow:0 0 30px -12px rgba(116,230,236,.6)}
  .vunom{font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.08em;
         text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:700; margin-bottom:12px}
  .vucard.us .vunom{color:var(--halo)}
  .vumesure{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:11px}
  .vulab{font-family:'Space Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.06em;
         text-transform:uppercase; color:rgba(255,255,255,.5)}
  .vuval{font-family:'Space Mono',ui-monospace,monospace; font-size:13px; color:#fff; white-space:nowrap}
  .vucard.us .vuval{color:#eafeff; font-weight:700}
  .vutrack{height:8px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:5px}
  .vutrack i{display:block; height:100%; border-radius:3px; background:rgba(255,255,255,.45)}
  .vucard.us .vutrack i{background:var(--halo); box-shadow:0 0 9px rgba(116,230,236,.6)}
  .vunote{font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.45; margin:14px 0 0; padding-top:12px;
          border-top:1px solid rgba(255,255,255,.09)}
  .vucard.us .vunote{color:rgba(234,254,255,.8); border-top-color:rgba(116,230,236,.22)}

  /* ===== carte mise en avant : un voile, plus un aplat ===== */


  /* Le menu bascule en burger dès 900px : à six liens, la barre horizontale
     demande 871px avec le logo et le bouton Contact. */
  @media (max-width:900px){
    .navburger{display:inline-flex}
    .navlinks{
      display:flex; flex-direction:column; gap:2px;
      position:absolute; left:0; right:0; top:100%;
      background:var(--card); border-bottom:1px solid var(--card-line);
      box-shadow:var(--shadow);
      padding:6px 24px 14px; max-height:0; overflow:hidden;
      opacity:0; visibility:hidden;
      transition:max-height .28s var(--ease-out), opacity .18s var(--ease-out), visibility 0s .28s;
    }
    .navlinks.open{
      max-height:420px; opacity:1; visibility:visible;
      transition:max-height .32s var(--ease-mech), opacity .22s var(--ease-out), visibility 0s;
    }
    .navlinks a{padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px}
    .navlinks a:last-child{border-bottom:none}

    .consolebay{grid-template-columns:1fr}
    .packbay{grid-template-columns:1fr}
  }
  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr}
    .heroSignal{max-width:280px; margin-top:12px}
    .modgrid{grid-template-columns:repeat(2,1fr)}
    .gopts{grid-template-columns:1fr}
    .offer3col{grid-template-columns:1fr}
    .whygrid{grid-template-columns:1fr}
    .whogrid{grid-template-columns:1fr}
    .vu{grid-template-columns:repeat(2,1fr)}
    .demogrid{grid-template-columns:1fr}
    .contactgrid{grid-template-columns:1fr; gap:32px}
    /* En colonne unique, la photo et le badge sont centrés : alignés à gauche sous un
       titre pleine largeur, ils paraissaient posés de travers. Le texte reste à gauche,
       centrer un paragraphe de six lignes nuirait à la lecture. */
    .aboutgrid{grid-template-columns:1fr; gap:18px; text-align:left; justify-items:center}
    .aboutgrid .about{justify-self:stretch}
    .statbadge{align-self:center; width:100%}
    .ctrlbay{flex-direction:column}
    .footerbottom{justify-content:flex-start}
    .legal{white-space:normal}
    .baytop{flex-direction:column; align-items:flex-start}
  }
  @media (max-width:400px){
    header .wrap{gap:10px; padding-left:16px; padding-right:16px}
    .logolockup{gap:8px}
    .logolockup svg.symbol{height:34px; width:34px}
    .logolockup svg.wordmark{height:21px}
    .navcta{padding:0 13px; font-size:12.5px}
    .wrap{padding:0 16px}
  }
  @media (max-width:430px){
    /* « Tout refuser » et « Enregistrer » réunis demandent 295px, le panneau n'en
       offre que 280 à 320px de large. Empilés, comme ceux du bandeau. */
    .cookiemodal-panel{padding:24px 20px}
    .cookiemodal-actions{flex-direction:column}
    .cookiemodal-actions .btn{width:100%}
  }
  @media (max-width:560px){
    .modgrid{grid-template-columns:1fr}
    .stepf{min-width:64px; padding:11px 5px}
    .stepftxt{font-size:12.5px}
    .flowarr{display:none}
    /* sous 560px, le nom passe au-dessus de ses deux mesures :
       96px + deux colonnes de chiffres monospacés ne tiennent pas dans 224px */

    .vu{grid-template-columns:1fr}

    .rack.nuit{padding:20px 18px !important}
    section{padding:52px 0}
    .console{padding:22px 16px 20px}
    /* Trois boutons — Refuser, Personnaliser, Accepter — ne tiennent pas sur une
       ligne sous 560px. Empilés, ils restent lisibles et le refus reste aussi
       accessible que l'acceptation. */
    .cookiebanner-actions{width:100%; flex-direction:column; gap:8px}
    .cookiebanner-actions .btn{width:100%; justify-content:center}
  }
  @media (prefers-reduced-motion:reduce){
    .pulsept, .samplept, .wavepath, .vumeter .vubar, .needle, .axistrend span, .gbtn.hint, .gbtn.hint .gchev, .gclickhint{animation:none}
    *{transition-duration:.001s !important}
    :root{--ease-mech:var(--ease-out)}
  }

/* --- Habillage fluentform, sur les jetons de la marque -------------------
   Le formulaire du prototype est stylise par .contactform. Fluent Forms pose
   sa propre structure : on la ramene aux memes jetons plutot que de laisser
   deux formulaires d aspect different sur le meme site. */
.contactform--ff .ff-el-group { margin-bottom: 14px; }
.contactform--ff label { font-family: var(--font-mono, monospace); font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate-txt); }
.contactform--ff input, .contactform--ff textarea, .contactform--ff select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--onyx); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 13px 14px; min-height: 48px;
}
.contactform--ff textarea { min-height: 132px; }
.contactform--ff input:focus, .contactform--ff textarea:focus, .contactform--ff select:focus {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan);
}
.contactform--ff .ff-btn-submit {
  border: 0 !important; border-radius: 999px !important; min-height: 48px !important;
  background: var(--cyan) !important; color: #06222A !important;
  font-family: var(--font-display, inherit) !important; font-weight: 700 !important;
  padding: 14px 28px !important; cursor: pointer;
}