/* ============================================================
   SHORTCUT.CLICK — site agence
   VOLTAGE étendu à l'échelle site. Tokens = source de vérité.
   Ordre : tokens > base > grille > motion > sections > responsive
   ============================================================ */

/* ---- 1. Tokens (VOLTAGE, inchangés) ---- */
:root{
  --bg:#0A0B0D;
  --panel:#101216;
  --ink:#F3F5EF;
  --muted:#878C92;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --volt:#D8FF34;
  --volt-dim:rgba(216,255,52,.13);
  --on-volt:#0A0B0D;

  --disp:"Bricolage Grotesque",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --r-sm:3px; --r-md:8px; --r-band:4px;

  /* échelle site : un seul retrait horizontal, deux valeurs verticales */
  --gut:clamp(20px,4vw,64px);
  --sp-block:clamp(84px,11vw,160px);
  --sp-sec:clamp(120px,16.5vw,240px);
  --maxw:1560px;
  --nav-h:56px;
  --ease:cubic-bezier(.22,.75,.2,1);
}

/* ---- 2. Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--bg);color:var(--ink);
  /* corps de page : 17 / 27px. C'est la matière qui fait respirer les vides. */
  font-size:17px;line-height:1.6;letter-spacing:0;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* anti-orphelines : aucune dernière ligne ne descend seule, aucune césure */
p{text-wrap:pretty;hyphens:none}
h1,h2,h3{text-wrap:balance;hyphens:none}
::selection{background:var(--volt);color:var(--on-volt)}

.shell{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);position:relative}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9AA0A7;margin-bottom:14px}
.volt{color:var(--volt)}
.rule{height:1px;background:var(--line);width:100%}

/* colonnes hairline en fond : lecture "plan technique" */
/* les bords sont posés en bordure transparente, pas en padding : les enfants absolus
   se calent alors sur la boîte de contenu du .shell. Les 8 filets tombent exactement
   sur les colonnes de la page, plus à 12,5 % du viewport. Une seule grille. */
.grid-lines{position:fixed;inset:0;z-index:3;pointer-events:none;
  max-width:var(--maxw);margin:0 auto;padding:0;
  border-left:var(--gut) solid transparent;border-right:var(--gut) solid transparent}
/* filets de colonne : UNE seule valeur sur toute la hauteur. Ils structurent, ils ne décorent pas. */
.grid-lines i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.05)}
.grid-lines i.q{background:rgba(255,255,255,.05)}

/* ---- 3. Motion ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}
.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}
.rv[data-d="4"]{transition-delay:.28s}

/* révélation de titre par lignes masquées */
.mask{display:block;overflow:hidden}
.mask > span{display:block;transform:translateY(105%);transition:transform .95s var(--ease)}
.in .mask > span,.mask.in > span{transform:none}
.mask:nth-child(2) > span{transition-delay:.08s}
.mask:nth-child(3) > span{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .mask > span{transform:none}
}

/* ---- 4. Nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s,backdrop-filter .4s}
.nav.stuck{background:rgba(10,11,13,.78);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.nav.open{background:var(--bg)}
.nav .shell{display:flex;align-items:center;gap:28px;width:100%}
.brand{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.03em;white-space:nowrap}
.brand .pt{color:var(--volt)}
.nav ul{list-style:none;display:flex;gap:26px;margin-left:auto;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav ul a{position:relative;padding:4px 0;transition:color .3s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav ul a:hover{color:var(--ink)}
.nav ul a:hover::after{transform:scaleX(1)}
.nav .navcta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line2);padding:7px 14px;border-radius:var(--r-sm);transition:.35s var(--ease)}
.nav .navcta:hover{background:var(--volt);color:var(--on-volt);border-color:var(--volt)}
.burger{display:none;margin-left:auto;width:34px;height:34px;border:1px solid var(--line2);
  border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1px;background:currentColor;transition:.35s var(--ease)}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){bottom:13px}
.burger.open span:nth-child(1){top:16px;transform:rotate(45deg)}
.burger.open span:nth-child(2){bottom:17px;transform:rotate(-45deg)}

/* ---- 5. Hero ---- */
/* Le hero est UN bloc, pas trois bandes. Deux filets de marge à marge le bornent
   (haut : eyebrow, bas : paragraphe + chiffres), l'instrument de droite ferme le cadre.
   La couche visuelle, elle, touche les quatre bords et passe sous la nav. */
.hero{position:relative;min-height:100svh;display:grid;overflow:hidden;isolation:isolate;
  /* le cadre du premier écran : 96 en haut, 72 en bas. Les couches visuelles restent
     full-bleed (elles se positionnent sur la boîte de padding). */
  padding-block:96px 72px}
#sig{position:absolute;top:0;left:-6%;width:112%;height:100%;z-index:0;
  mix-blend-mode:screen;will-change:transform;animation:sigdrift 24s linear infinite}
@keyframes sigdrift{0%{transform:translate3d(-2%,0,0)}50%{transform:translate3d(2%,0,0)}100%{transform:translate3d(-2%,0,0)}}
/* grille de mesure : plein cadre, quatre bords, remontée continue. Pas de masque,
   pas de zone privilégiée : c'est le papier millimétré du plan, pas un ornement. */
.hero::after{content:"";position:absolute;left:0;right:0;top:-80px;bottom:-80px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:100% 80px,80px 100%;
  will-change:transform;animation:gridfall 24s linear infinite}
@keyframes gridfall{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-80px,0)}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}
/* le voile ne coupe plus le champ en bas : il creuse là où le texte se pose, c'est tout */
.hero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(125% 82% at 6% 88%,rgba(10,11,13,.92) 0%,rgba(10,11,13,.46) 44%,rgba(10,11,13,0) 76%),
    linear-gradient(to bottom,rgba(10,11,13,.16) 0%,rgba(10,11,13,.06) 22%,
      rgba(10,11,13,.24) 58%,rgba(10,11,13,.62) 100%)}

/* une seule grille 12 colonnes, le bloc calé en bas : la marge basse répond à la nav */
.hero .shell{position:relative;z-index:2;width:100%;
  /* deux colonnes : la mesure du titre, un couloir de 96px, le panneau de 420px.
     Trois rangées seulement, l'air restant réparti à parts égales entre elles :
     plus de vide mort en tête, plus d'étranglement en pied. */
  display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:96px;
  grid-template-rows:auto auto auto;align-content:space-between;
  padding-top:0;padding-bottom:0}

/* filet haut du bloc : de marge à marge, exactement comme celui du bas */
.hero-kick{grid-column:1/-1;grid-row:1;
  display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;
  line-height:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--volt);
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.hero-kick .dash{width:38px;height:1px;background:var(--volt)}

.hero-lede{grid-column:1;grid-row:2;align-self:center;
  padding-top:0;padding-bottom:0}
/* interligne .90 : ~104px au lieu de ~145px. Les trois lignes rendent 120px au premier écran. */
.hero h1{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:.90;
  font-size:clamp(84px,min(8vw,13.6vh),116px);max-width:13ch}
.hero h1 .mask{padding:.12em 0;margin:-.12em 0}
.hero h1 em{font-style:normal;color:var(--volt)}

/* ---- instrument de droite ----
   Il porte les trois étages de la méthode et les mesure. Bord droit calé au pixel
   sur celui du bouton de nav (même .shell, même colonne 13), pas de débord.
   Ni haut ni bas : les deux filets du bloc lui servent d'arêtes. */
.hero-rig{grid-column:2;grid-row:2;align-self:center;justify-self:end;
  width:100%;max-width:none;max-block-size:calc(100svh - 168px);
  display:flex;flex-direction:column;min-height:0;
  border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(11,13,16,.58) 0%,rgba(11,13,16,.88) 100%)}
.rig-head{display:flex;align-items:center;gap:10px;padding:14px 16px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9AA0A7}
.rig-head i{width:5px;height:5px;flex:none;background:var(--volt);transform:rotate(45deg);
  animation:rigpulse 2.6s var(--ease) infinite}
.rig-head b{margin-left:auto;font-weight:400;color:rgba(243,245,239,.42)}
@keyframes rigpulse{0%,100%{opacity:1}50%{opacity:.22}}
.rig-view{position:relative;flex:1 1 auto;min-height:176px}
#rig{position:absolute;inset:0;width:100%;height:100%}
/* trois strates mesurées, 24px d'air entre elles et 24px de talon :
   le pied du panneau respire, il ne finit plus au ras du filet. */
.rig-idx{list-style:none;flex:none;display:grid;row-gap:24px;padding-block-end:24px}
/* la colonne 01/02/03 est une vraie colonne : trois lignes, un seul bord gauche de texte */
.rig-idx li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:baseline;
  column-gap:10px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.rig-idx li span{color:rgba(243,245,239,.42)}
.rig-idx li em{font-style:normal;color:#E6E9E2}
.rig-idx li b{font-weight:400;color:var(--muted);text-align:right}

/* filet bas du bloc : de marge à marge. Paragraphe et chiffres le partagent, même ligne de base. */
.hero-foot{grid-column:1/-1;grid-row:3;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;
  border-top:1px solid rgba(255,255,255,.10);padding:clamp(18px,2.6vh,32px) 0 0}
/* mesure resserrée à 34ch : la dernière ligne se remplit, l'orpheline de trois mots disparaît */
.hero-foot .lead{grid-column:1/6;max-width:34ch;text-wrap:pretty;color:#C4C9CC;font-size:16.5px;line-height:1.55;font-weight:500}
.hero-foot .lead b{color:var(--ink);font-weight:500}
.hero-foot .meta{grid-column:8/13;display:grid;grid-template-columns:repeat(3,1fr);align-items:end}
.hero-foot .meta div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding-left:clamp(16px,1.7vw,26px);
  font-family:var(--mono);font-size:clamp(9.5px,.72vw,10.5px);letter-spacing:.12em;line-height:1;
  text-transform:uppercase;color:var(--muted)}
.hero-foot .meta div::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:64px;
  background:rgba(255,255,255,.10)}
.hero-foot .meta b{display:block;font-family:var(--disp);font-size:clamp(30px,2.9vw,42px);line-height:1;
  font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}

@media(max-width:1000px){
  .hero .shell{grid-template-columns:minmax(0,1fr)}
  .hero-rig{display:none}
  .hero-lede{grid-column:1}
  .hero-foot .lead{grid-column:1/8;max-width:44ch}
  .hero-foot .meta{grid-column:8/13}
}
@media(max-width:760px){
  /* en dessous de 760 le premier écran reprend son gabarit propre : le 1fr de tête
     repousse la matière typographique en bas, le cadre du desktop est neutralisé. */
  :root{--nav-h:40px}
  .hero{padding-block:0}
  /* UN SEUL objet porte le pli : la rangée de tête prend tout ce que le titre ne
     réclame pas. Paragraphe et chiffres passent sous le pli. */
  .hero .shell{grid-template-columns:1fr;grid-template-rows:minmax(max(44svh,100svh - 330px),1fr) auto auto auto;
    align-content:stretch;padding-top:calc(var(--nav-h) + 8px);padding-bottom:36px}
  /* une seule trame dans le pli : la grille orthogonale sort du cadre mobile */
  .hero::after{content:none}
  .hero-kick,.hero-lede,.hero-foot{grid-column:1}
  .hero-kick{grid-row:2}
  .hero-foot{grid-row:4}
  .hero-lede{grid-row:3;align-self:start;
    padding-top:clamp(18px,3vh,28px);padding-bottom:clamp(24px,3.6vh,34px)}
  .hero h1{font-size:clamp(38px,10.2vw,78px);max-width:none}
  .hero-foot{grid-template-columns:1fr;gap:26px}
  .hero-foot .lead{grid-column:1;max-width:40ch;font-size:16px}
  .hero-foot .meta{grid-column:1}
  .hero-foot .meta div{padding-left:0}
  .hero-foot .meta div::before{display:none}
  .hero-foot .meta b{font-size:30px}
}
.scrollhint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollhint i{width:1px;height:26px;background:linear-gradient(var(--volt),transparent);animation:drip 2.2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- 6. Marquee ---- */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;overflow:hidden;
  background:var(--bg);position:relative;z-index:2}
.marq-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq span{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.marq span::after{content:"";width:5px;height:5px;background:var(--volt);transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- 7. Section chrome ---- */
section{position:relative;z-index:2;background:var(--bg);
  /* Rythme vertical : TROIS intervalles, plus un seul. L'écart porte de la hiérarchie :
     court sous un titre, moyen entre deux sections, long avant un pic de densité. */
  --gap-s:clamp(52px,6.7vw,96px);
  --gap-m:clamp(112px,14vw,200px);
  --gap-l:clamp(150px,22.5vw,320px)}
.sec{padding:0}
.sec#preuves{margin-top:var(--gap-m)}
/* #preuves porte son propre padding-bottom : on le retranche pour que l'écart reste exactement --gap-m */
.sec#methode{margin-top:calc(var(--gap-m) - clamp(20px,2.1vw,34px))}
/* respiration longue avant le bloc le plus dense, puis avant la bande d'accent */
.sec#cas{margin-top:var(--gap-l)}
/* la bande clients est désormais une masse bordée : elle n'a plus besoin d'un trou
   pour exister. Même palier au-dessus (pied de la citation) et en dessous. */
.sec#clients{margin-top:0;margin-bottom:0;padding-bottom:var(--gap-m);z-index:4}

/* L'élément le plus lourd de la page démarre sur le même bord gauche que le filet,
   l'intro et les cartes. L'index sort du flux et se pose au-dessus du titre. */
.sechead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  column-gap:clamp(12px,1.5vw,26px);
  position:relative;isolation:isolate;
  padding-top:30px;
  padding-bottom:clamp(14px,1.5vw,24px);border-bottom:2px solid var(--volt);
  margin-bottom:clamp(18px,2vw,30px)}
/* la bande ouverte par le filet porte de la matière à droite */
.sechead::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;
  width:min(42%,460px);pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 72%);
  mask-image:linear-gradient(90deg,transparent,#000 72%)}
.sechead .num{position:absolute;left:0;top:0;line-height:1;
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--volt)}
.sechead h2{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.88;
  font-size:clamp(84px,8.2vw,118px);min-width:0;margin-left:0;text-wrap:balance}
.sechead .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9AA0A7;padding-bottom:6px;white-space:nowrap;justify-self:end}

/* Chapeau de bloc : l'étage qui manquait entre le titre géant et le corps. */
/* Chapeau de bloc : le palier manquant entre le titre géant (~117px) et le corps (17px).
   31 / 39px, colonne courte de 22ch, graisse 400 : du poids optique, pas du bruit. */
.seclede{font-family:var(--body);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.22;
  letter-spacing:-.005em;color:rgba(255,255,255,.72);max-width:26ch;
  text-wrap:balance;margin:0 0 var(--gap-s)}

/* Pic typographique unique du ventre de page : ni carte, ni bordure.
   Seul endroit de la page qui prend le palier long en ouverture. */
.pivot{padding-top:var(--gap-l);padding-bottom:var(--gap-m)}
.pivot p{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(38px,6.7vw,96px);max-width:22ch;color:var(--ink);text-wrap:balance}

@media(max-width:900px){
  .sechead{grid-template-columns:minmax(0,1fr);row-gap:12px;padding-top:24px}
  .sechead h2{font-size:clamp(40px,10.4vw,88px);line-height:.9}
  .sechead .tag{grid-column:1;justify-self:start;white-space:normal;padding-bottom:0}
  .sechead::before{width:34%}
  .seclede{font-size:19px;line-height:1.35;max-width:32ch;margin-bottom:30px}
}

/* ---- 8. Preuves (chiffres) ---- */
/* le panneau passe au-dessus des colonnes hairline de la page : une seule trame
   verticale dans la section, celle des cellules. Deux rythmes s'annulaient. */
#preuves{padding-bottom:clamp(20px,2.1vw,34px);z-index:4}
/* UN corps de chiffre pour les trois cellules. Le chiffre ne s'ajuste jamais
   à la largeur de son run : trois pairs éditoriaux se comparent, ils ne se concurrencent pas. */
.proof{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  --line:rgba(255,255,255,.14);--num-size:104px}
/* La cellule est une grille de quatre rangées : libellé, chiffre, texte, client.
   Le texte prend le 1fr, le tag est ancré en pied. Plus aucun intervalle mort :
   les trois zones forment un bloc au lieu de flotter chacune dans sa boîte. */
.proof article{display:grid;grid-template-rows:auto auto 1fr auto;
  padding:32px 32px 24px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.proof article:first-child{border-left:1px solid var(--line)}
/* l'accent enjambe les filets verticaux : une ligne continue, pas trois segments */
.proof article::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.proof article.in::before{transform:scaleX(1)}
.proof article:hover{background:var(--panel)}
.proof .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* corps fixe, pas de clamp, pas de fit-to-width : hauteur de capitale identique
   sur les trois cellules. L'interligne à .82 ferme la boîte du chiffre sur sa propre
   hauteur de capitale : le texte se colle dessous à 18px au lieu de 52px de vide.
   Aucune translation, aucun align-items : la ligne de base est celle du bloc. */
.proof .n{font-family:var(--disp);font-weight:700;font-size:var(--num-size);
  line-height:.82;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums lining-nums;
  display:block;white-space:nowrap;margin:22px 0 18px}
/* unité posée SUR la ligne de base des chiffres : ni exposant, ni reste tombé dessous.
   Une seule règle pour % et €, même corps relatif, même approche. */
.proof .n .u{font-size:.40em;line-height:1;letter-spacing:0;margin-left:6px;
  vertical-align:baseline;color:var(--volt)}
/* la particule sort du registre display : le bloc numérique redevient 8 / 11.
   Gouttières optiquement égales à 14px : les 3,6px de plus à gauche annulent
   exactement le letter-spacing de -.035em que le chiffre précédent traîne derrière lui. */
.proof .n .x{font-size:.30em;font-weight:400;letter-spacing:0;vertical-align:baseline;
  margin-left:17.6px;margin-right:14px;
  color:color-mix(in srgb,currentColor 55%,transparent)}
/* mesure resserrée : quatre lignes pleines sous le chiffre, jamais trois lignes courtes
   suivies d'un vide. min-height garantit la même masse de texte dans les trois cellules. */
.proof p{margin:0;align-self:start;font-size:15px;line-height:1.45;color:#C4C9CC;max-width:36ch;
  min-height:calc(4*1.45em);text-wrap:pretty;hyphens:manual}
.proof .who{align-self:end;padding-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--volt)}
/* si le run le plus long ne rentre plus, les trois descendent ensemble, jamais une seule */
@media(max-width:400px){
  .proof{--num-size:84px}
  .proof article{padding:26px 22px 22px}
  .proof .n{margin:16px 0 14px}
  .proof .n .x{margin-left:14px;margin-right:11px}
  .proof .who{padding-top:18px}
}

/* ---- 9. Méthode ---- */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.method article{padding:clamp(28px,3vw,46px) clamp(20px,2.2vw,36px);border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.method article:first-child{border-left:1px solid var(--line)}
.method article:hover{background:var(--panel)}
.method .st{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--volt);display:flex;align-items:center;gap:10px}
.method .st i{width:6px;height:6px;background:var(--volt);transform:rotate(45deg);
  box-shadow:0 0 12px rgba(216,255,52,.6);flex:none}
.method h3{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.1vw,29px);
  letter-spacing:-.02em;line-height:1.08;margin:16px 0 12px}
.method p{font-size:15px;color:#C4C9CC;max-width:38ch}
.method ul{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:6px}
.method li{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:var(--r-sm);
  transition:.35s var(--ease)}
.method article:hover li{border-color:var(--line2);color:#C4C9CC}

/* ---- 10. Cas ---- */
/* L'image porte la ligne : ~55 % de la largeur de contenu, toute la hauteur de ligne.
   Le panneau est opaque : il passe au-dessus des colonnes hairline de la page,
   qui traversaient le graphe. Seule la section Cas est relevée. */
#cas{z-index:4}
.case{display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,.72fr) minmax(236px,.76fr);
  column-gap:clamp(20px,2.2vw,34px);align-items:start;
  padding:0;border-bottom:1px solid rgba(255,255,255,.12)}
.case:first-of-type{border-top:1px solid rgba(255,255,255,.12)}

/* le panneau : plein cadre, collé au filet du haut et à celui du bas.
   Il doit avoir une MASSE : fond relevé (delta de luminance franc avec la page, pas 2 %),
   cadre teinté accent à 14 %, et une inclinaison de dégradé propre à chaque ligne.
   Deux lignes voisines ne partagent jamais le même couple angle / densité d'aire. */
.case .viz{position:relative;z-index:1;display:flex;flex-direction:column;
  aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(158deg,#151a0e 0%,#0b0d09 100%);
  border:1px solid rgba(216,255,52,.14);border-radius:2px;
  transition:border-color .5s var(--ease),background .5s var(--ease)}
.case:nth-of-type(2) .viz{background:linear-gradient(172deg,#141a11 0%,#0b0d09 100%)}
.case:nth-of-type(3) .viz{background:linear-gradient(146deg,#181d0d 0%,#0b0d09 100%)}
.case:hover .viz{border-color:rgba(216,255,52,.30)}
/* un seul filet horizontal par ligne : le séparateur. L'en-tête de panneau perd le sien,
   les deux traits distants de 24px n'en font plus qu'un. */
.case .vhead{flex:none;display:flex;align-items:center;gap:9px;padding:14px 14px 12px;
  border-bottom:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.case .vhead i{width:5px;height:5px;flex:none;background:var(--volt);transform:rotate(45deg)}
.case .vhead b{margin-left:auto;font-weight:400;color:rgba(243,245,239,.42)}
.case .vplot{position:relative;flex:1 1 auto;min-height:0}
.case .vplot canvas{position:absolute;inset:0;width:100%;height:100%}

/* le padding de ligne est reporté sur les colonnes texte : même ligne de départ pour les deux */
.case .txt,.case .side{padding-top:clamp(26px,2.8vw,42px);padding-bottom:clamp(24px,2.6vw,38px)}
.case .txt p{font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:#C4C9CC}
.case .txt p b{color:var(--ink);font-weight:600}
/* deux vraies colonnes de stat : le bord gauche de la seconde ne bouge plus d'une ligne à l'autre */
.case .txt .kpi{margin-top:clamp(22px,2.4vw,32px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;row-gap:18px}
.case .txt .kpi div{max-width:176px;padding-right:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,245,239,.55)}
.case .txt .kpi b{display:block;font-family:var(--disp);font-size:clamp(17px,1.45vw,20px);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--volt);margin-bottom:6px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* un seul chiffre en vert par ligne : le second retombe en texte, l'accent ne dispute plus le nom */
.case .txt .kpi div:nth-child(2) b{color:#EDEDED}
/* nom client : la seule dominante de la ligne. Rapport nom/corps 3,3 et nom/KPI 2,8.
   La colonne devient une vraie colonne : le nom ouvre en haut, le secteur ferme en bas,
   sa ligne de base calée sur le filet inférieur du panneau graphique. Plus de vide non résolu. */
.case .side{text-align:right;align-self:stretch;display:grid;grid-template-rows:auto 1fr auto;
  padding-bottom:0}
.case .side h3{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:.86;
  font-size:clamp(30px,4.1vw,60px);text-wrap:balance;margin-top:-.08em}
.case .side .sect{grid-row:3;align-self:end;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(243,245,239,.55)}

/* ---- 11. Clients ---- */
/* La preuve client passe au régime de la page : une grille bordée, UN seul filet de 1px
   sur les quatre côtés, gouttières fusionnées par le gap (aucun trait doublé).
   Quatre colonnes calées sur les hairlines de fond (25 / 50 / 75 %), deux rangées de 132px :
   la bande passe de 110px à 267px. Le nom n'est plus du texte courant, c'est une signature. */
.clients{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:132px;
  gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}
.clients div{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:20px 16px;background:var(--bg);
  font-family:var(--disp);font-weight:600;font-size:26px;letter-spacing:-.012em;
  line-height:1.12;text-transform:none;color:rgba(245,245,240,.82);
  transition:color .45s var(--ease),background .45s var(--ease)}
/* la cellule entière réagit, pas le mot */
.clients div:hover{color:var(--volt);background:var(--panel)}
@media(max-width:1100px){.clients{grid-auto-rows:118px}.clients div{font-size:22px}}
@media(max-width:760px){.clients{grid-auto-rows:96px}.clients div{font-size:19px;padding:16px 10px}}

/* ---- 12. Band (LE moment fort, un seul) ---- */
.band{background:var(--volt);color:var(--on-volt);border-radius:var(--r-band);
  padding:clamp(30px,4vw,60px);position:relative;overflow:hidden}
.band::after{content:"\26A1";position:absolute;right:2%;top:-14%;font-size:clamp(170px,26vw,420px);
  opacity:.09;line-height:1;pointer-events:none}
.band .lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.66}
.band h3{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(28px,4.6vw,62px);margin:14px 0 20px;max-width:19ch}
.band p{font-size:clamp(15px,1.2vw,17px);max-width:56ch;color:#171a10}
.band .bl{margin-top:30px;padding-top:24px;border-top:1px solid rgba(10,11,13,.22);
  display:flex;gap:clamp(20px,4vw,54px);flex-wrap:wrap;align-items:flex-end}
.band .bl div{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.band .bl b{display:block;font-family:var(--disp);font-size:clamp(20px,2.2vw,32px);font-weight:800;
  letter-spacing:-.03em;opacity:1;margin-bottom:4px}
.band .go{margin-left:auto;background:var(--on-volt);color:var(--volt);font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 22px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:10px;transition:.4s var(--ease)}
.band .go:hover{gap:18px}

/* ---- 13. Contact ---- */
.contact{padding:clamp(72px,9vw,140px) 0 clamp(50px,6vw,90px)}
.contact .big{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(34px,7.4vw,110px);max-width:14ch}
.contact .mailto{display:inline-block;margin-top:clamp(26px,3vw,46px);font-family:var(--disp);
  font-weight:700;letter-spacing:-.03em;font-size:clamp(22px,3.6vw,54px);position:relative}
.contact .mailto::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.contact .mailto:hover::after{transform:scaleX(1)}
.contact .lines{margin-top:clamp(34px,4vw,60px);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)}
.contact .lines div{padding:20px 0;border-bottom:1px solid var(--line);padding-right:24px}
.contact .lines .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contact .lines .v{margin-top:8px;font-size:15.5px}

/* ---- 14. Footer ---- */
.foot{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;gap:18px;flex-wrap:wrap;
  align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#4d525a}
.foot .sp{margin-left:auto}

/* ---- 15. Responsive ---- */
@media(max-width:1080px){
  .proof,.method{grid-template-columns:1fr 1fr}
  .proof article:nth-child(3){border-left:1px solid var(--line)}
  .method article:nth-child(3){border-left:1px solid var(--line)}
  .case{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);column-gap:26px}
  .case .side{grid-column:1/-1;text-align:left;order:-1;padding-bottom:0}
  .case .side h3{font-size:clamp(30px,4.4vw,46px)}
  .case .txt{padding-top:0}
  .case .viz{aspect-ratio:16/10}
}
@media(max-width:760px){
  :root{--nav-h:52px}
  .nav ul,.nav .navcta{display:none}
  .burger{display:block}
  .nav.open ul{display:flex;position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;margin:0}
  .nav.open ul li{border-bottom:1px solid var(--line)}
  .nav.open ul a{display:block;padding:16px 0;font-size:12px;color:var(--ink)}
  .grid-lines{display:none}
  .hero{min-height:92svh}
  .hero-foot .meta{margin-left:0;width:100%;padding-top:20px;border-top:1px solid var(--line);gap:26px}
  .proof,.method,.clients,.contact .lines{grid-template-columns:1fr}
  .proof article,.method article{border-left:1px solid var(--line)}
  .clients{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr;padding-bottom:clamp(28px,6vw,40px)}
  .case .viz{aspect-ratio:16/10;order:-1}
  .case .side{order:-2;padding-top:clamp(24px,5vw,32px);padding-bottom:16px}
  .case .side h3{white-space:normal;font-size:clamp(30px,7.2vw,44px)}
  .case .txt{padding-top:24px;padding-bottom:0}
  .band .go{margin-left:0;width:100%;justify-content:center}
  .scrollhint{display:none}
}

/* --- Téléphone : le hero est composé pour 390px, pas réduit à 390px --- */
@media(max-width:560px){
  /* UN seul écran : nav, eyebrow, titre, paragraphe, chiffres. Rien d'autre au-dessus du pli.
     Le 1fr de tête pousse toute la matière typographique en bas : le champ filaire tient le haut. */
  .hero{align-content:stretch;min-height:100svh;padding-block:0}
  .hero .shell{grid-template-rows:minmax(0,1fr) auto auto auto;
    padding:calc(var(--nav-h) + 14px) var(--gut) clamp(30px,4.4vh,44px)}

  /* grain de la bande haute : trame de points serrée, densité maximale au point de fuite.
     C'est ce qui donne de la matière au champ : ce n'est plus un tracé nu. */
  .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:74svh;z-index:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);
    background-size:3px 3px;
    -webkit-mask-image:radial-gradient(126% 76% at 33% 7%,#000 0,rgba(0,0,0,.40) 50%,transparent 84%);
    mask-image:radial-gradient(126% 76% at 33% 7%,#000 0,rgba(0,0,0,.40) 50%,transparent 84%)}
  /* le point de fuite sort de l'axe médian : centre du champ à 33 % de la largeur.
     Horizon calé en svh, il reste au même endroit quelle que soit la hauteur du hero. */
  #sig{top:-19svh;bottom:auto;height:89svh;left:-44%;width:154%}
  /* le voile est plein AVANT le texte : plus une seule ligne du champ ne traverse un libellé */
  .hero .veil{background:linear-gradient(to bottom,rgba(10,11,13,.55) 0,rgba(10,11,13,.10) 10svh,
    rgba(10,11,13,.24) 30svh,rgba(10,11,13,.62) 46svh,rgba(10,11,13,.93) 56svh,
    var(--bg) 64svh,var(--bg) 100%)}

  /* UNE seule spec mono pour tout le mobile : eyebrow, libellés de chiffres, marquee.
     Trois usages, une seule valeur : un registre au lieu de trois. */
  .hero-kick,.hero-foot .meta div,.marq span{font-size:clamp(8.5px,2.55vw,10px);
    letter-spacing:.13em;line-height:1}
  .hero-kick{gap:10px;padding-bottom:13px;margin-bottom:0}
  .hero-kick .dash{width:22px}

  /* le titre : un bloc justifié sur la mesure, pas trois lignes empilées.
     Chaque ligne est dimensionnée sur la largeur réelle de la colonne (cqw) :
     les trois lignes finissent à la même abscisse, le creux de rag passe de ~110px à ~1px.
     Sans support des container queries, les masques héritent du corps de h1 : dégradation propre. */
  .hero-lede{container-type:inline-size;padding-top:clamp(16px,2.6vh,24px);padding-bottom:0}
  .hero h1{font-size:clamp(44px,13.6vw,60px);line-height:.9;letter-spacing:-.035em;
    max-width:none;padding-bottom:0}
  .hero h1 .mask{padding:.16em 0;margin:-.16em 0}
  .hero h1 .mask:nth-child(1){font-size:calc(100cqw/6.08)}
  .hero h1 .mask:nth-child(2){font-size:calc(100cqw/4.95)}
  .hero h1 .mask:nth-child(3){font-size:calc(100cqw/5.06)}

  /* une seule couleur dans le paragraphe : le run blanc gras disparaît, un registre de moins.
     padding:0 supprime aussi les 72px morts hérités du bandeau desktop. */
  /* le corps ne dispute plus le titre : 15 / 21,75 px, et un gris plus bas dans l'échelle */
  .hero-foot{border-top:0;gap:0;margin-top:clamp(18px,2.4vh,24px);padding:0}
  .hero-foot .lead{font-size:15px;line-height:1.45;color:rgba(255,255,255,.64);
    max-width:none;text-wrap:pretty}
  .hero-foot .lead b{color:inherit;font-weight:inherit}

  /* trois colonnes de chiffres : libellés sur UNE ligne, une seule ligne de base basse.
     Le filet du haut est le seul de ce bloc. */
  /* les chiffres quittent le pli : ils tombent sous le paragraphe, à 72px de lui.
     Trois colonnes égales : le libellé le plus long passe sur deux lignes DANS sa
     colonne au lieu de courir jusqu'à la marge droite. */
  .hero-foot .meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:stretch;align-items:start;gap:0 14px;
    margin-top:clamp(56px,8vh,76px);padding-top:20px}
  .hero-foot .meta div{white-space:normal;text-wrap:balance;line-height:1.25;color:var(--muted)}
  /* unités : le signe est collé au chiffre, partout, sans exception (+119%, 10J, 0H) */
  .hero-foot .meta b{font-size:clamp(27px,8.2vw,34px);line-height:1;margin-bottom:10px;
    word-spacing:-.26em}
  .hero-foot .meta div:last-child b::after{content:"h"}

  /* barre de nav à 40px, deux valeurs typographiques et rien d'autre : le cadre 34×34
     du bouton, l'élément le plus générique de la page, disparaît. */
  .brand{font-size:15px}
  .burger{width:24px;height:24px;border:0;border-radius:0;padding:0;transform:none}
  .burger span{left:2px;right:2px}
  .burger span:nth-child(1){top:8px}
  .burger span:nth-child(2){bottom:8px}
  .burger.open span:nth-child(1){top:11px}
  .burger.open span:nth-child(2){bottom:12px}

  /* le pli tombe sur le filet du marquee : la section 01 est hors du premier écran */
  .marq{padding:13px 0}
  .sec#preuves{margin-top:52px}

  /* une seule règle d'unité pour les trois cartes : % et € au même corps relatif,
     calés en haut de capitale, collés au chiffre. Plus de % petit / € gros. */
  .proof .n{display:block;white-space:nowrap}
  .proof .n .u{font-size:.38em;vertical-align:.92em;margin-left:.04em}
  .proof .n .x{font-size:.40em;vertical-align:baseline;margin-inline:.16em}
}

/* ---- 16. Formulaire ---- */
.form-sec{margin-top:24px;padding-bottom:clamp(40px,3.8vw,60px)}
.fwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(32px,5vw,88px);align-items:stretch;
  margin-top:clamp(40px,5vw,72px)}

/* Une seule dominante dans le bloc : l'énoncé au-dessus des champs.
   60px contre 13,5px de corps courant, soit 4,4:1. Le panneau latéral n'occupe
   que la rangée 2 : il démarre sur la ligne du premier libellé et, la rangée étant
   étirée, les deux colonnes finissent au même pied. */
.ftitle{grid-column:1;grid-row:1;font-family:var(--disp);font-weight:700;
  font-size:clamp(40px,4.2vw,60px);line-height:.96;letter-spacing:-.02em;color:var(--ink);
  max-width:14ch;text-wrap:balance;margin:0 0 clamp(34px,3.9vw,56px)}
.ftitle .s{display:block;font-family:var(--body);font-weight:400;font-size:15.5px;
  line-height:1.5;letter-spacing:0;color:var(--muted);max-width:36ch;margin-top:20px}
.fform{grid-column:1;grid-row:2}
.faside{grid-column:2;grid-row:2}

.fform{display:grid;gap:clamp(24px,2.6vw,34px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px)}
.fld{display:grid;position:relative}
.fld label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:12px;transition:color .3s var(--ease)}
.fld:focus-within label{color:var(--volt)}

.fld input,.fld select,.fld textarea{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;
  color:var(--ink);font-family:var(--body);font-size:17px;font-weight:500;
  line-height:1.4;padding:0 0 13px;width:100%;transition:border-color .35s var(--ease)}
.fld textarea{resize:vertical;min-height:96px;line-height:1.55}
/* le texte d'exemple cesse d'être le plus gros caractère du bloc : 15px, très en retrait */
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.26);font-size:15px;font-weight:400}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--volt)}
.fld select{color:var(--ink);cursor:pointer;padding-right:26px}
.fld select:invalid{color:rgba(255,255,255,.26);font-size:15px}
.fld option{background:var(--panel);color:var(--ink)}
/* chevron mono, dessiné en filet */
.fld:has(select)::after{content:"";position:absolute;right:2px;bottom:20px;width:7px;height:7px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg);pointer-events:none;transition:border-color .35s var(--ease)}
.fld:has(select):focus-within::after{border-color:var(--volt)}

.fld.bad input,.fld.bad select,.fld.bad textarea{border-bottom-color:#ff8a6a}
.err{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#ff8a6a;margin-top:9px;min-height:0;opacity:0;transition:opacity .3s}
.fld.bad .err{opacity:1}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* plus de filet horizontal orphelin sous le message : il ne bordait rien.
   L'écart entre le bas de la zone de texte et la ligne du bouton passe de 68 à 40px. */
.fbot{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  margin-top:-16px;padding-top:0}
.fnote{font-size:13.5px;color:var(--muted);max-width:40ch;line-height:1.5}
.fbtn{margin-left:auto;display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--volt);color:var(--on-volt);border:0;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  height:56px;padding:0 30px;transition:gap .4s var(--ease),filter .3s var(--ease)}
.fbtn:hover{gap:22px;filter:brightness(1.08)}
.fbtn:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.fbtn[disabled]{opacity:.55;cursor:progress}
.fstate{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  min-height:1em;margin-top:-6px}
.fstate.ok{color:var(--volt)}
.fstate.ko{color:#ff8a6a}

/* colonne de droite : ce qui se passe ensuite */
.faside{border:1px solid var(--line);background:var(--panel);padding:clamp(22px,2.2vw,32px)}
.fa-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--volt);padding-bottom:16px;border-bottom:1px solid var(--line)}
.fa-steps{list-style:none;display:grid}
.fa-steps li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.5}
.fa-steps li span{font-family:var(--mono);font-size:11px;color:var(--volt);padding-top:2px}
.fa-steps li div{grid-column:2;min-width:0}
.fa-steps li b{display:block;font-family:var(--body);font-weight:600;font-size:15.5px;
  color:var(--ink);margin-bottom:5px;text-wrap:pretty}
.fa-alt{padding-top:20px}
.fa-alt .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fa-alt .v{display:inline-block;margin-top:9px;font-family:var(--disp);font-weight:600;font-size:19px;
  letter-spacing:-.02em;position:relative}
.fa-alt .v::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fa-alt .v:hover::after{transform:scaleX(1)}

@media(max-width:1080px){
  .fwrap{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(34px,4vw,52px)}
  .ftitle,.fform,.faside{grid-column:1;grid-row:auto}
  .ftitle{order:-2;margin-bottom:0}
  .faside{order:-1}
}
@media(max-width:640px){
  .frow{grid-template-columns:1fr}
  .fbtn{margin-left:0;width:100%;justify-content:center}
  .fnote{max-width:none}
}

/* ---- Bandeau de consentement ----
   Barre basse, pas de voile modal : elle informe, elle ne prend pas la page
   en otage. Refuser et accepter ont le même poids visuel côté surface, seul
   l'accent distingue l'action par défaut. */
.cbar{
  position:fixed;left:var(--gut);right:var(--gut);bottom:16px;z-index:210;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  max-width:920px;margin:0 auto;padding:16px 18px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-md);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)
}
.cbar.in{opacity:1;transform:none}
.cbar p{flex:1 1 320px;min-width:0;font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.cbtns{display:flex;gap:10px;flex:0 0 auto}
.cbar button{
  font-family:var(--body);font-weight:600;font-size:13.5px;line-height:1;cursor:pointer;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:transparent;color:var(--ink);transition:border-color .3s var(--ease),background .3s var(--ease)
}
.cbar .cno:hover{border-color:var(--ink)}
.cbar .cok{background:var(--volt);border-color:var(--volt);color:var(--on-volt)}
.cbar .cok:hover{background:#E6FF5C;border-color:#E6FF5C}
@media(max-width:640px){
  .cbar{left:12px;right:12px;bottom:12px;padding:14px}
  .cbtns{width:100%}
  .cbar button{flex:1}
}