/* ====================================================
   FONTS SELF-HOSTED - Geist + Geist Mono (variable, latin + latin-ext)
   H11 mission 2 (2026-06-10) : privacy Loi 25 (zero requete Google) + perf
   ==================================================== */
/* Geist · latin-ext · self-hosted (H11, 2026-06-10) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/geist-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;
}
/* Geist · latin · self-hosted (H11, 2026-06-10) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/geist-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;
}
/* Geist Mono · latin-ext · self-hosted (H11, 2026-06-10) */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/geist-mono-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;
}
/* Geist Mono · latin · self-hosted (H11, 2026-06-10) */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/geist-mono-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;
}

/* ====================================================
   TOKENS — Silicium Bleu 1.9
   Source de vérité : DICTIONNAIRE_VARIABLES_SILICIUM.md
   ==================================================== */
:root{
  /* === Backgrounds === */
  --bg:#F5F4F0;
  --surface:#EAE7DE;
  --surface-2:#E0DDCE;

  /* === Text === */
  --ink:#0F1419;
  --tx-1:#0F1419;
  --tx-2:rgba(15,20,25,0.70);
  --tx-3:rgba(15,20,25,0.62);   /* a11y P0 : relevé de 0.50 → contraste AA texte */
  --tx-4:rgba(15,20,25,0.32);

  /* === Borders === */
  --hairline:rgba(15,20,25,0.08);
  --border-1:rgba(15,20,25,0.14);

  /* === Accent (bleu Horizon NS) === */
  --accent:#0D9AE0;
  --accent-mid:#1E5A8A;
  --accent-deep:#0A2540;
  --accent-2:#758FFF;
  --accent-tint:rgba(13,154,224,0.10);
  --accent-line:rgba(13,154,224,0.32);
  --accent-glow:rgba(13,154,224,0.22);
  --accent-text:#1E5A8A;                 /* a11y P0 : texte accent (eyebrows) ~6:1 sur fond clair */
  --border-strong:rgba(15,20,25,0.30);   /* a11y P1 : bordure de contrôle interactif ≥3:1 */

  /* === Buttons === */
  --btn-text:#0F1419;

  /* === Status === */
  --signal:#4E7A4D;
  --alert:#8E5A2B;
  --fail:#8B2E2E;

  /* === Easing === */
  --ease-std:cubic-bezier(0.22,1,0.36,1);
  --ease-in:cubic-bezier(0.16,1,0.3,1);
  --ease-smooth:cubic-bezier(0.83,0,0.17,1);

  /* === Layout === */
  --max-w:1360px;
  --gutter:32px;
  --grain:0.05;

  /* === Typographie fluide (clamp 478px → 1440px) === */
  --display-xl:clamp(52px, 4.5vw + 30px, 108px);   /* CTA final H2 géant */
  --display:clamp(42px, 2.5vw + 30px, 72px);       /* Hero H1 */
  --heading-lg:clamp(36px, 2.3vw + 25px, 64px);    /* H2 sections principales */
  --heading-md:clamp(36px, 1.3vw + 30px, 52px);    /* H2 secondaires (Outro) */
  --heading:clamp(32px, 1vw + 27px, 44px);         /* H2 standard (Trust, Process) */
  --heading-sm:clamp(28px, 0.8vw + 24px, 38px);    /* H3 */
  --title:clamp(18px, 0.5vw + 16px, 24px);         /* Sous-titres, titres de cartes */
  --body-lg:clamp(17px, 0.3vw + 15px, 20px);       /* Paragraphes d'accroche */

  /* === Espacement fluide (clamp 478px → 1440px) === */
  --section-xl:clamp(80px, 8vw + 40px, 180px);     /* Padding sections Hero, CTA */
  --section:clamp(72px, 5.5vw + 40px, 140px);      /* Padding sections standard */
  --section-gap:clamp(40px, 4.5vw + 18px, 96px);   /* Espace header section → contenu */
  --gap-lg:clamp(24px, 2vw + 14px, 48px);          /* Gaps de grille larges */
  --gap:clamp(16px, 0.7vw + 12px, 24px);           /* Gaps standard */
  --gap-sm:clamp(10px, 0.5vw + 7px, 16px);         /* Gaps internes (petits) */

  /* === Rythme vertical des sections (polish 29 mai — resserré) === */
  --sec-pt:clamp(52px, 5vw + 18px, 96px);          /* padding haut de section */
  --sec-pb:clamp(44px, 4vw + 16px, 80px);          /* padding bas de section */

  /* === Radius === */
  --radius-card:20px;     /* Coins arrondis des cartes */
  --radius-cert:10px;     /* Coins badges certifications */
  --radius-pill:999px;    /* Boutons pill (arrondis complets) */

  /* === Cartes empilées (Solutions) === */
  --card-header-shadow:0 1px 0 rgba(15,20,25,0.06), 0 -8px 24px -6px rgba(15,20,25,0.08);
  --card-1:#EFECE4;--card-2:#E2E5E9;--card-3:#DDE1E5;--card-4:#D2D7DC;  /* a11y : cartes 3-4 éclaircies (étaient #CFD5DC/#B8C1CB) → texte AA en thème clair */
  --card-1-text:#0F1419;--card-2-text:#0F1419;--card-3-text:#0F1419;--card-4-text:#0F1419;
}

[data-theme="dark"]{
  --bg:#0A0A0B;
  --surface:#16161A;
  --surface-2:#1E1E24;
  --ink:#F5F4F0;
  --tx-1:#F5F4F0;
  --tx-2:rgba(245,244,240,0.70);
  --tx-3:rgba(245,244,240,0.62);   /* a11y P0 : relevé de 0.48 → contraste AA texte */
  --tx-4:rgba(245,244,240,0.32);
  --hairline:rgba(245,244,240,0.08);
  --border-1:rgba(245,244,240,0.14);
  --accent:#0D9AE0;
  --accent-mid:#5FA8D8;
  --accent-deep:#1A4468;
  --accent-2:#9EADFF;
  --accent-tint:rgba(13,154,224,0.14);
  --accent-line:rgba(13,154,224,0.38);
  --accent-glow:rgba(13,154,224,0.35);
  --accent-text:#5FA8D8;                 /* a11y P0 : texte accent lisible sur fond sombre */
  --border-strong:rgba(245,244,240,0.34);
  --btn-text:#0A0A0B;
  --grain:0.12;
  --card-header-shadow:0 1px 0 rgba(245,244,240,0.06), 0 -10px 40px -4px rgba(0,0,0,0.6);
  --card-1:#22272F;--card-2:#1B2230;--card-3:#141A28;--card-4:#0E1420;
  --card-1-text:#F5F4F0;--card-2-text:#F5F4F0;--card-3-text:#F5F4F0;--card-4-text:#F5F4F0;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Geist',system-ui,sans-serif;
  background:var(--bg);color:var(--tx-1);
  font-size:17px;font-weight:400;line-height:1.6;
  font-feature-settings:"ss01","cv01";overflow-x:hidden;
  /* transition activée seulement après le 1er rendu (classe .theme-ready ajoutée par JS) — empêche le flash au chargement */
}
body.theme-ready{transition:background 600ms var(--ease-smooth),color 600ms var(--ease-smooth)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.mono{font-family:'Geist Mono',ui-monospace,monospace;font-feature-settings:"tnum"}

/* ====================================================
   EYEBROW · CANONIQUE
   Une seule classe globale .eyebrow réutilisée partout (Trust, Pain, Sol, Process, Proof).
   Chaque section peut overrider UNIQUEMENT : margin-bottom, color (si emphasis change).
   NE PAS redéfinir font, letter-spacing, text-transform, ou ::before content par section.
   ==================================================== */
.eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:12px;font-weight:600;line-height:1;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent-text);               /* a11y P0 : était var(--accent) (2.84:1 sur clair) */
  display:inline-flex;align-items:baseline;column-gap:0.6em;  /* flex : le texte wrappe dans SA colonne, jamais sous les // (revue Lamine 2026-06-11) */
  line-height:1.5;                          /* multi-ligne possible -> interligne lisible (etait 1) */
  margin-bottom:20px;
}
.eyebrow::before{content:'//';color:var(--accent-text);flex:none}

body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:var(--grain);pointer-events:none;z-index:1;mix-blend-mode:multiply;
  transition:opacity 600ms var(--ease-smooth);
}
[data-theme="dark"] body::before{mix-blend-mode:overlay}

/* ====================================================
   CUSTOM CURSOR · lerp 0.55
   ==================================================== */
@media (hover:hover) and (pointer:fine){
  html,body,a,button,input,textarea,select,label,summary,[role="button"]{cursor:none !important}
  .cursor{position:fixed;pointer-events:none;z-index:9999;will-change:transform;mix-blend-mode:difference;opacity:0}
  .cursor.visible{opacity:1}
  .cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;transition:transform 200ms var(--ease-std)}
  .cursor-ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);transition:width 300ms var(--ease-std),height 300ms var(--ease-std),left 300ms var(--ease-std),top 300ms var(--ease-std),border-color 300ms var(--ease-std),background 300ms var(--ease-std)}
  .cursor.magnetized .cursor-ring{width:60px;height:60px;left:-30px;top:-30px;border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.08)}
  .cursor.magnetized .cursor-dot{transform:scale(0)}
}

/* ====================================================
   NAV STICKY
   ==================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:72px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:background 400ms var(--ease-smooth),border-color 400ms var(--ease-smooth),box-shadow 400ms var(--ease-smooth);
}
/* État "scrolled" : opacity background renforcée + border-bottom visible + shadow subtile.
   Cette classe est togglée par silicium.js (window scroll > 40px). */
.nav.is-scrolled{
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 rgba(15,20,25,0.04),0 8px 24px -12px rgba(15,20,25,0.08);
}
[data-theme="dark"] .nav.is-scrolled{
  box-shadow:0 1px 0 rgba(245,244,240,0.04),0 8px 24px -12px rgba(0,0,0,0.5);
}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-0.01em}
/* NAV LOGO IMAGE — swap light/dark variants */
.nav-logo img{height:40px;width:auto}
.nav-logo .logo-dark{display:none}
[data-theme="dark"] .nav-logo .logo-light{display:none}
[data-theme="dark"] .nav-logo .logo-dark{display:block}
.nav-menu{display:flex;gap:32px;font-size:15px;font-weight:500;color:var(--tx-2)}
.nav-menu a{position:relative;padding:4px 0}
.nav-menu a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--accent);transition:width 400ms var(--ease-std)}
.nav-menu a:hover{color:var(--tx-1)}
.nav-menu a:hover::after{width:100%}
@media(max-width:860px){.nav-menu{display:none}}

/* Menu hamburger toggle (visible ≤860px) */
.menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--surface);border:1px solid var(--border-1);border-radius:12px;
  cursor:pointer;color:var(--tx-2);
  transition:border-color 240ms var(--ease-std),color 240ms var(--ease-std);
}
.menu-toggle:hover{border-color:var(--accent-line);color:var(--accent)}
.menu-toggle svg{width:22px;height:22px}
@media(max-width:860px){.menu-toggle{display:inline-flex}}
@media(max-width:860px){.nav-cta{display:none}}

.nav-right{display:flex;align-items:center;gap:16px}
/* THEME TOGGLE · bouton rond icônes SVG (soleil/lune) · porté de chrysocolle 2026-06-11 (§8.22 silicium)
   Remplace la pill texte LIGHT/DARK. Easing adapté aux tokens silicium (--ease-std). Taille fixe 40px. */
.toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:1px solid var(--border-1);border-radius:50%;cursor:pointer;transition:color .2s,border-color .2s,transform .3s var(--ease-std);color:var(--tx-2)}
.toggle:hover{color:var(--accent);border-color:var(--accent);transform:rotate(15deg)}
.toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ====================================================
   BUTTONS — Silicium Bleu 1.9
   Primary : fill sort au hover (miroir inversé) · texte constant
   Secondary : fill entre au hover
   ==================================================== */
.btn-primary{text-align:center;/* robustesse : libelle sur 2 lignes reste centre (revue Lamine 2026-06-11) */
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 32px;
  background:transparent;color:var(--tx-1);
  border:0;outline:1px solid var(--accent);outline-offset:-1px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:'Geist',sans-serif;font-size:16px;font-weight:600;letter-spacing:0.01em;
  transition:box-shadow 650ms var(--ease-smooth);
  transform:translateZ(0);
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);transform:translateX(0);
  transition:transform 650ms var(--ease-smooth);
  z-index:-1;will-change:transform;
}
.btn-primary:hover::before{transform:translateX(101%)}
.btn-primary:hover{box-shadow:0 0 40px var(--accent-glow)}

.btn-secondary{text-align:center;/* robustesse : libelle sur 2 lignes reste centre (revue Lamine 2026-06-11) */
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 28px;
  background:transparent;color:var(--tx-1);
  border:1px solid var(--border-1);border-radius:0;cursor:pointer;
  font-family:'Geist',sans-serif;font-size:15px;font-weight:500;
  transition:border-color 650ms var(--ease-smooth),color 400ms var(--ease-std) 200ms;
}
.btn-secondary::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);transform:translateX(-101%);
  transition:transform 650ms var(--ease-smooth);
  z-index:-1;
}
.btn-secondary:hover::before{transform:translateX(0)}
.btn-secondary:hover{border-color:var(--accent);color:var(--btn-text)}

.nav-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;
  padding:10px 20px;
  background:transparent;color:var(--tx-1);
  border:0;outline:1px solid var(--accent);outline-offset:-1px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:'Geist',sans-serif;font-size:14px;font-weight:600;
  transition:box-shadow 500ms var(--ease-smooth);
  transform:translateZ(0);
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);transform:translateX(0);
  transition:transform 500ms var(--ease-smooth);
  z-index:-1;will-change:transform;
}
.nav-cta:hover::before{transform:translateX(101%)}
.nav-cta:hover{box-shadow:0 0 24px var(--accent-glow)}

.link-inline{position:relative;display:inline-block;color:var(--tx-1);padding-bottom:2px}
.link-inline::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width 400ms var(--ease-std)}
.link-inline:hover::after{width:100%}

/* ====================================================
   HERO SCENE · pin scrub 5 chapitres · 400vh total
   Aura = blob coloré flouté (pas gradient) → aucune frontière visible
   ==================================================== */
.hero{position:relative;height:100vh;width:100%;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:var(--bg);
  overflow:hidden;
}
.aura-blob{
  position:absolute;
  width:720px;height:560px;
  border-radius:50%;
  background:rgba(13,154,224,0.22);
  filter:blur(140px);
  left:70%;top:45%;
  transform:translate(-50%,-50%);
  transition:
    left 1400ms var(--ease-smooth),
    top 1400ms var(--ease-smooth),
    background 1400ms var(--ease-smooth);
  pointer-events:none;
  will-change:left,top,background;
}
[data-theme="dark"] .aura-blob{filter:blur(160px)}
@media(max-width:960px){
  .aura-blob{width:480px;height:380px;filter:blur(100px)}
}

/* CONTAINER · max-width, centré horizontal, padding pour nav · ROW centrée verticalement */
.hero-canvas{
  position:relative;z-index:1;
  max-width:var(--max-w);margin:0 auto;height:100%;
  padding:96px var(--gutter) 64px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:center;         /* chaque item centré vertical dans la row */
  align-content:center;       /* la row elle-même centrée vertical dans le container */
  justify-items:center;       /* items centrés horizontal dans leur cell */
}
/* Tablet et mobile : hero sans portrait — CENTRAGE SÛR du bloc texte (revue Lamine, mission 2, 2026-06-10).
   margin auto vertical = centré quand il y a de la place, dégrade AUTOMATIQUEMENT en alignement haut
   si le contenu remplit l'écran (les marges auto tombent à 0 en débordement, contrairement à
   justify-content:center qui clippe le haut). Le padding-top 96px protège le chapter-meter de la nav. */
@media(max-width:960px){
  .hero-canvas{
    display:flex;flex-direction:column;
    justify-content:flex-start;align-items:center;
    padding:96px var(--gutter) 48px;
    max-width:680px;
  }
  .hero-stage{max-width:none;width:100%;margin-top:auto;margin-bottom:auto}
}
@media(max-width:540px){
  /* HERO RECO mobile : alignement haut (titre toujours visible sous la nav) + chef compact,
     car texte + 2 CTA + portrait dépassent 100vh si centrés. */
  .hero-canvas{justify-content:flex-start;padding:88px 20px 32px;gap:18px}
  .hero-stage{gap:18px}
  .hero-figure{margin-top:0}
  .stage-title{font-size:34px !important}
  .stage-cta-row{flex-direction:column;align-items:stretch}
  .stage-cta-row .btn-primary,.stage-cta-row .btn-secondary{width:100%;justify-content:center}
  .nav-menu{display:none}
  .nav{padding:0 20px}
  .nav-cta{padding:8px 14px;font-size:13px}
/* Téléphones COURTS (ex. iPhone SE/mini) : le contenu remplit le 100vh et atteint la zone du hint
   → réserver le bas (détecteur spatial multi-tailles, 2026-06-11 : seul cas sur 42 combinaisons). */
@media(max-width:540px) and (max-height:740px){
  .hero-canvas{padding-bottom:116px}
}  /* placé APRÈS le bloc 540 (ordre-source : son shorthand padding écrasait ce padding-bottom) */
}

/* ====================================================
   SECTION PORTRAIT MOBILE-ONLY · visible uniquement ≤960px
   Compense l'absence du chef dans le hero mobile.
   ==================================================== */
.portrait-mobile{
  display:none;
  padding:80px var(--gutter);
  border-top:1px solid var(--hairline);
  position:relative;
  overflow:hidden;
}
/* HERO RECO (29 mai) — chef intégré au hero à tous les breakpoints → section masquée.
   Le markup est aussi retiré d'index.html ; cette règle protège tout résidu. */
@media(max-width:960px){
  .portrait-mobile{display:none !important}
}
.portrait-mobile .wrap{
  position:relative;width:100%;max-width:360px;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.portrait-mobile .img-holder{
  position:relative;width:100%;aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  animation:floatIdle 6s ease-in-out infinite;
}
.portrait-mobile img{width:100%;height:100%;object-fit:contain}
.portrait-mobile .caption{
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--tx-3);text-align:center;
}
.portrait-mobile .caption em{font-style:normal;color:var(--accent);margin-left:6px}
.portrait-mobile-aura{
  position:absolute;z-index:0;pointer-events:none;
  width:420px;height:320px;border-radius:50%;
  background:rgba(13,154,224,0.14);filter:blur(110px);
  left:50%;top:50%;transform:translate(-50%,-50%);
}

/* COL STAGE · texte naturel (pas de min-height forcé) · largeur bornée */
.hero-stage{
  position:relative;
  width:100%;max-width:580px;
  display:flex;flex-direction:column;
  gap:28px;
}

.chapter-meter{
  display:flex;align-items:center;
  font-family:'Geist',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text);
}
/* Label wrap (gauche) : taille naturelle du texte, peut shrinker si manque de place */
.chapter-meter-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapter-meter-label::before{content:'// ';color:var(--accent)}
/* Meta wrap (droite) : taille fixe, toujours collé à droite indépendamment de la longueur du label */
.chapter-meter-meta{flex:0 0 auto;display:flex;align-items:center;gap:14px;margin-left:auto;padding-left:16px}
.chapter-meter .bar{position:relative;flex:0 0 60px;width:60px;height:2px;background:var(--hairline)}
.chapter-meter .bar-fill{position:absolute;left:0;top:-0.5px;height:3px;background:var(--accent);width:0%;transition:width 700ms var(--ease-smooth)}
.chapter-meter .count{font-family:'Geist Mono',ui-monospace,monospace;color:var(--tx-3);letter-spacing:0.1em}

/* Slots · grid overlay (tous empilés dans la même cell) → hauteur naturelle = plus grand slot */
.stage-slots{
  position:relative;
  display:grid;
  grid-template-areas:"stack";
}
.stage-slot{
  grid-area:stack;
  display:flex;flex-direction:column;gap:24px;
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity 800ms var(--ease-smooth),transform 800ms var(--ease-smooth);
}
.stage-slot.active{opacity:1;transform:translateY(0);pointer-events:auto}

.stage-title{
  font-family:'Geist',sans-serif;
  font-size:var(--display);
  font-weight:500;line-height:0.98;letter-spacing:-0.03em;color:var(--tx-1);
}
.stage-title em{font-style:normal;color:var(--accent-mid)}
[data-theme="dark"] .stage-title em{color:var(--accent-mid)}
.stage-lede{font-size:var(--body-lg);line-height:1.55;color:var(--tx-2);max-width:52ch}
.stage-cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:8px}
.stage-fineprint{font-family:'Geist Mono',monospace;font-size:12px;color:var(--tx-3);letter-spacing:0.08em}

/* ====================================================
   HERO REVEAL · animation CSS au chargement (pages de service + FAQ + contact)
   Pas de .sr / ScrollTrigger — animation pure qui joue une seule fois au load.
   ==================================================== */
.hero-srv-stage .eyebrow,
.hero-srv-stage .hero-srv-title,
.hero-srv-stage .hero-srv-lede,
.hero-srv-stage .hero-srv-cta-row,
.hero-c-stage .eyebrow,
.hero-c-stage h1,
.hero-c-stage .lede,
.hero-c-stage .hero-srv-cta-row,
.hero-figure{opacity:0;transform:translateY(30px);animation:heroReveal 900ms var(--ease-smooth) forwards}
.hero-srv-stage .hero-srv-title,
.hero-c-stage h1{animation-delay:80ms}
.hero-srv-stage .hero-srv-lede,
.hero-c-stage .lede{animation-delay:160ms}
.hero-srv-stage .hero-srv-cta-row,
.hero-c-stage .hero-srv-cta-row{animation-delay:260ms}
.hero-figure{animation-delay:200ms}
@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .hero-srv-stage .eyebrow,.hero-srv-stage .hero-srv-title,.hero-srv-stage .hero-srv-lede,.hero-srv-stage .hero-srv-cta-row,
  .hero-c-stage .eyebrow,.hero-c-stage h1,.hero-c-stage .lede,.hero-c-stage .hero-srv-cta-row,
  .hero-figure{opacity:1;transform:none;animation:none}
}

/* ====================================================
   PORTRAIT FLOTTANT · taille en width (décorrélée du VH)
   .hero-figure remplit sa cell · .portrait-float borne la taille
   ==================================================== */
/* COL FIGURE · taille naturelle (= taille du portrait) · centrée dans sa cell */
.hero-figure{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
/* HERO RECO (29 mai) — le chef est désormais intégré au hero AUSSI en tablette/mobile
   (empilé sous le texte), ce qui rend la section « Portrait mobile » redondante. */
@media(max-width:960px){.hero-figure{display:none}}

/* NUAGE MATIÈRE NOIRE 0/1 (Three.js, optionnel) — canvas DANS .hero-figure, derrière le portrait.
   translateZ(-60px) : marge 3D large → nuage TOUJOURS derrière le portrait (tilt max ~15px).
   Inerte si le canvas n'est pas dans le DOM. */
#heroCloud{
  position:absolute;top:50%;left:50%;
  width:182%;height:162%;
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;opacity:0;transition:opacity 700ms ease;
  -webkit-mask-image:radial-gradient(150% 130% at 50% 50%,#000 60%,transparent 92%);
          mask-image:radial-gradient(150% 130% at 50% 50%,#000 60%,transparent 92%);
}

/* PORTRAIT · taille FIXE (ne change jamais entre chapitres) */
.portrait-float{
  width:clamp(360px, 38vw, 520px);
  aspect-ratio:3/4;
  animation:floatIdle 6s ease-in-out infinite;
}
@keyframes floatIdle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

/* Parallax + tilt 3D — driven par JS */
.portrait-tilt{
  width:100%;height:100%;
}

.portrait-tilt img{
  width:100%;height:100%;object-fit:contain;
}

/* ====================================================
   WATERMARK LOGO — bottom-left · signature discrète
   ==================================================== */
.hero-watermark{
  position:absolute;
  bottom:-120px;left:-80px;
  width:640px;height:auto;
  z-index:0;
  pointer-events:none;
  opacity:0.55;
  mix-blend-mode:multiply;
}
[data-theme="dark"] .hero-watermark{
  opacity:0.22;
  mix-blend-mode:screen;
  filter:invert(1) hue-rotate(180deg);
}
.hero-watermark img{width:100%;height:auto;display:block}
@media(max-width:960px){.hero-watermark{display:none}}

/* Scroll hint */
.scroll-hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--tx-3);
  z-index:10;
}
.scroll-hint .line{width:2px;height:42px;border-radius:2px;background:linear-gradient(180deg,transparent 0%,var(--accent) 50%,transparent 100%);box-shadow:0 0 10px var(--accent-glow);animation:scrollPulse 2.4s var(--ease-smooth) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(0.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* Mobile : le hint passe au-dessus du chef (image sombre) → texte blanc lisible */
@media(max-width:540px){.scroll-hint{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.45)}}

/* ====================================================
   OUTRO
   ==================================================== */
.outro{padding:var(--sec-pt) 0 calc(var(--sec-pb) + 16px);border-top:1px solid var(--hairline);position:relative}
.outro-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.outro-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;flex-wrap:wrap;gap:24px}
.outro h2{font-family:'Geist',sans-serif;font-size:var(--heading-md);font-weight:500;line-height:1.02;letter-spacing:-0.025em;max-width:22ch}
.outro h2 em{font-style:normal;color:var(--accent-mid)}
.outro-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--hairline);padding-top:40px}
@media(max-width:860px){.outro-stats{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;flex-direction:column;gap:8px}
.stat .num{font-family:'Geist Mono',monospace;font-size:clamp(38px,4vw,52px);font-weight:500;line-height:1;letter-spacing:-0.02em;color:var(--tx-1);font-feature-settings:"tnum"}
.stat .num .unit{color:var(--accent);font-size:0.62em;margin-left:2px}
.stat .label{font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3)}
@media(max-width:540px){.outro-header{flex-direction:column;align-items:center;text-align:center}.outro-header h2{max-width:none}.outro-header .btn-primary{align-self:center}.stat{align-items:center;text-align:center}}

/* [DEV PLACEHOLDER] .filler — non utilisé en production. À supprimer avant build final.
   Utilisé pendant le dev pour combler des espaces entre sections en cours d'intégration. */
.filler{padding:120px 0;text-align:center;color:var(--tx-3);font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;border-top:1px solid var(--hairline)}

/* ====================================================
   SECTION TRUST v3 · Fond dark forcé · marquee single row
   Toujours dark même en light theme (section contrastée)
   ==================================================== */
.trust{
  position:relative;
  background:#0A0A0B;color:#F5F4F0;
  padding:calc(var(--sec-pt) + 14px) 0 var(--sec-pb);
  overflow:hidden;
}

/* Transition light → dark · gradient propre (pas de vagues template) */
.trust::before{
  content:'';position:absolute;top:-120px;left:0;right:0;height:120px;
  background:linear-gradient(180deg, var(--bg) 0%, #0A0A0B 100%);
  pointer-events:none;z-index:2;
}
/* Hairline accent qui traverse la zone de transition */
.trust::after{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:80px;height:3px;background:var(--accent);z-index:3;
}

/* Aura blob bleue subtile en background */
.trust-aura{
  position:absolute;width:720px;height:520px;border-radius:50%;
  background:rgba(13,154,224,0.18);filter:blur(160px);
  top:35%;left:70%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;
}

/* Watermark logo Horizon NS · bottom-left · signature discrète */
.trust-watermark{
  position:absolute;bottom:-60px;left:-80px;
  width:680px;height:auto;z-index:1;
  pointer-events:none;
  opacity:0.35;
  mix-blend-mode:lighten;
}
.trust-watermark img{width:100%;height:auto;display:block}
@media(max-width:960px){.trust-watermark{display:none}}

.trust-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:4}

/* Eyebrow Trust : hérite de .eyebrow canonique. Aucun override nécessaire. */

.trust-header{
  display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:48px;
  margin-bottom:96px;
}
@media(max-width:860px){.trust-header{grid-template-columns:1fr;gap:32px}}
.trust-header h2{
  font-family:'Geist',sans-serif;
  font-size:var(--heading);font-weight:500;line-height:1.08;letter-spacing:-0.02em;
  max-width:24ch;color:#F5F4F0;
}
.trust-header h2 em{font-style:normal;color:#5FA8D8}

.trust-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding-top:24px;border-top:1px solid rgba(245,244,240,0.12);
  font-family:'Geist Mono',monospace;
}
.trust-kpi{display:flex;flex-direction:column;gap:6px}
.trust-kpi .num{
  font-size:var(--heading-sm);font-weight:500;line-height:1;letter-spacing:-0.015em;
  color:#F5F4F0;font-feature-settings:"tnum";
}
.trust-kpi .num .unit{color:#0D9AE0;margin-left:2px;font-size:0.62em}
.trust-kpi .label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(245,244,240,0.5)}
@media(max-width:540px){.trust-header{text-align:center}.trust-kpis{grid-template-columns:1fr;gap:20px}.trust-kpi{align-items:center;text-align:center}}

/* Marquee single row avec fade mask côtés */
.marquee-wrap{
  position:relative;width:100%;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.marquee-row{
  display:flex;gap:24px;width:max-content;
  animation:marqueeSlide 55s linear infinite;
  will-change:transform;
}
.marquee-row:hover{animation-play-state:paused}
@keyframes marqueeSlide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 12px))}}

/* ====================================================
   MARQUEE-CELL · pattern canonique logos partenaires/clients
   Une seule règle. Théorie : silhouette monochrome adaptative au thème + couleurs au hover.
   Override par contexte spécifique : .trust (always-dark forcé), .pi-track (dimensions custom).
   ==================================================== */
.marquee-cell{
  position:relative;flex:0 0 auto;
  width:200px;height:110px;
  display:flex;align-items:center;justify-content:center;
  padding:16px 24px;
  cursor:default;
}
.marquee-cell img{
  max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
  /* Light theme : silhouette GRIS FONCÉ sur fond cream (≈#404040) — assez sombre pour rester lisible, jamais noir pur */
  filter:brightness(0) invert(0.25);
  opacity:0.6;
  transition:opacity 500ms var(--ease-smooth),transform 500ms var(--ease-smooth),filter 500ms var(--ease-smooth);
}
.marquee-cell:hover img{filter:none;opacity:1;transform:scale(1.06)}
/* Dark theme : silhouette BLANCHE sur fond Carbon */
[data-theme="dark"] .marquee-cell img{filter:brightness(0) invert(1);opacity:0.65}
[data-theme="dark"] .marquee-cell:hover img{filter:none;opacity:1;transform:scale(1.06)}

/* Override .trust : section ALWAYS-dark (background forcé même en light theme).
   Donc les logos doivent être always-white (peu importe le thème global du site). */
.trust .marquee-cell img{filter:brightness(0) invert(1);opacity:0.72}
.trust .marquee-cell:hover img{filter:none;opacity:1;transform:scale(1.08)}

/* Footnote éditoriale */
.trust-footnote{
  max-width:var(--max-w);margin:72px auto 0;padding:0 var(--gutter);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.1em;color:rgba(245,244,240,0.5);
  position:relative;z-index:4;
}
.trust-footnote a{color:#F5F4F0;border-bottom:1px solid rgba(13,154,224,0.45);transition:border-color 400ms var(--ease-std);padding-bottom:2px}
.trust-footnote a:hover{border-color:#0D9AE0}

@media(prefers-reduced-motion:reduce){.marquee-row{animation:none}}

/* Scroll reveal · 1200ms ease-in-out-quint (cohérence Silicium 1.9) */
.sr{opacity:0;transform:translateY(40px);transition:opacity 1200ms var(--ease-smooth),transform 1200ms var(--ease-smooth)}
.sr.in{opacity:1;transform:translateY(0)}

/* ====================================================
   SECTION PAIN · Juste milieu · Split Q/A numérotée
   ==================================================== */
.pain-d{
  position:relative;padding:var(--sec-pt) 0 var(--sec-pb);
  background:var(--bg);
  border-top:1px solid var(--hairline);
}
/* paddings .pain-d gérés par --sec-pt/--sec-pb (clamp) */
@media(max-width:960px){.pain-d-list{border-top:none}}  /* A10 : éviter la double ligne tête→liste sur mobile */

.pain-d-container{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start;
}
@media(max-width:960px){.pain-d-container{grid-template-columns:1fr;gap:40px;padding:0 24px}}
@media(max-width:540px){.pain-d-container{gap:32px;padding:0 20px}}

.pain-d-head{position:sticky;top:120px;align-self:start}
@media(max-width:960px){.pain-d-head{position:static}}

/* Eyebrow Pain : hérite de .eyebrow canonique. Aucun override nécessaire. */

.pain-d-head h2{
  font-family:'Geist',sans-serif;
  font-size:var(--heading-lg);font-weight:500;line-height:1.02;letter-spacing:-0.025em;
  color:var(--tx-1);margin-bottom:28px;
  max-width:18ch;
}
.pain-d-head h2 em{font-style:normal;color:var(--accent-mid)}
@media(max-width:540px){.pain-d-head h2{font-size:30px;line-height:1.05;margin-bottom:20px}}

.pain-d-head .intro{
  font-family:'Geist',sans-serif;
  font-size:17px;line-height:1.6;color:var(--tx-2);max-width:44ch;
  margin-bottom:40px;
}

.pain-d-head .signature{
  padding-top:28px;border-top:1px solid var(--hairline);
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx-3);
  display:flex;gap:16px;align-items:center;
}
.pain-d-head .signature .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:painDPulse 2.4s var(--ease-std) infinite}
@keyframes painDPulse{0%,100%{opacity:0.5}50%{opacity:1}}

.pain-d-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}

.pain-d-item{
  position:relative;
  display:grid;grid-template-columns:80px 1fr;gap:20px;
  padding:36px 0 36px 8px;
  border-bottom:1px solid var(--hairline);
  cursor:default;
  /* Transform translateX au lieu de padding-left → vraie translation sans repaint layout */
  transition:transform 550ms var(--ease-smooth);
  will-change:transform;
}
/* Overlay gradient via ::after avec opacity (CSS ne sait pas interpoler les gradients via transition:background) */
.pain-d-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, var(--accent-tint) 0%, transparent 80%);
  opacity:0;
  transition:opacity 550ms var(--ease-smooth);
  pointer-events:none;
}
.pain-d-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:top;
  transition:transform 600ms var(--ease-smooth);
}
/* Hover : override la transition lente héritée de .sr (1200ms) avec une transition rapide spécifique au hover.
   Sélecteur plus spécifique (.pain-d-list .pain-d-item:hover = 0,0,3,0 > .sr = 0,0,2,0) pour gagner la cascade. */
.pain-d-list .pain-d-item:hover{
  transform:translateX(12px);
  transition:transform 380ms var(--ease-smooth);
}
.pain-d-item:hover::after{opacity:1}
.pain-d-item:hover::before{transform:scaleY(1)}
@media(max-width:540px){
  .pain-d-item{grid-template-columns:60px 1fr;gap:14px;padding:24px 0 24px 4px}
  .pain-d-list .pain-d-item:hover{transform:translateX(6px)}
}

.pain-d-item .num{
  font-family:'Geist Mono',monospace;
  font-size:var(--display);
  font-weight:500;letter-spacing:-0.02em;line-height:0.9;
  color:var(--accent-tint);
  -webkit-text-stroke:1px var(--accent-line);
  /* Transition explicite sur webkit-text-stroke-color (mieux supporté maintenant en specs modernes) */
  transition:color 550ms var(--ease-smooth),-webkit-text-stroke-color 550ms var(--ease-smooth);
  padding-top:4px;
  position:relative;z-index:1;
}
.pain-d-item:hover .num{-webkit-text-stroke-color:var(--accent)}
@media(max-width:540px){.pain-d-item .num{font-size:38px;padding-top:2px}}

.pain-d-item .content{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
@media(max-width:540px){.pain-d-item .content{gap:8px}}

.pain-d-item .question{
  font-family:'Geist',sans-serif;
  font-size:var(--title);font-weight:500;line-height:1.3;letter-spacing:-0.01em;
  color:var(--tx-1);transition:color 400ms var(--ease-smooth);
  max-width:36ch;
}
.pain-d-item:hover .question{color:var(--accent-deep)}
[data-theme="dark"] .pain-d-item:hover .question{color:var(--accent-mid)}
@media(max-width:540px){.pain-d-item .question{font-size:17px;line-height:1.35}}

.pain-d-item .sub{
  font-family:'Geist',sans-serif;font-style:italic;
  font-size:15px;line-height:1.55;color:var(--tx-3);
  max-width:42ch;
}
.pain-d-item .sub strong{font-style:normal;font-weight:500;color:var(--accent-mid)}
@media(max-width:540px){.pain-d-item .sub{font-size:14px;line-height:1.5}}

.pain-d-footer{
  max-width:var(--max-w);margin:80px auto 0;padding:40px var(--gutter) 0;
  border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--tx-3);
}
.pain-d-footer a{color:var(--tx-1);border-bottom:1px solid var(--accent-line);padding-bottom:2px;transition:border-color 400ms var(--ease-std)}
.pain-d-footer a:hover{border-color:var(--accent)}

/* ====================================================
   SECTION SOLUTIONS · Variant G · Stacked collapse
   Cards soeurs sticky staggered · Apple/Arc pattern
   ==================================================== */
.sol-g{padding:var(--sec-pt) 0 var(--sec-pb);background:var(--bg)}
/* paddings .sol-g gérés par --sec-pt/--sec-pb (clamp) */

.sol-g-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:540px){.sol-g-container{padding:0 20px}}

.sol-g-head{margin-bottom:96px;max-width:820px}
/* Eyebrow Solutions : hérite de .eyebrow canonique. Aucun override nécessaire. */
.sol-g-head h2{font-family:'Geist',sans-serif;font-size:var(--heading-lg);font-weight:500;line-height:1.04;letter-spacing:-0.025em;color:var(--tx-1);margin-bottom:24px;max-width:22ch}
.sol-g-head h2 em{font-style:normal;color:var(--accent-mid)}
.sol-g-head p{font-size:18px;line-height:1.55;color:var(--tx-2);max-width:60ch}
@media(max-width:540px){.sol-g-head h2{font-size:30px}.sol-g-head p{font-size:16px}}
.sol-g-head .hint{margin-top:24px;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:var(--radius-pill);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--accent)}
.sol-g-head .hint::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulseG 2s ease-in-out infinite}
@keyframes pulseG{0%,100%{opacity:0.4}50%{opacity:1}}

.sol-g-stack{position:relative;padding-bottom:4vh}  /* vide après dernière carte resserré (était 60vh→14vh→4vh) */
.sol-g{--stack-header-h:96px;--stack-top-base:96px}
@media(max-width:860px){.sol-g{--stack-header-h:80px;--stack-top-base:88px}}
@media(max-width:540px){.sol-g{--stack-header-h:72px;--stack-top-base:80px}}

.stack-card{
  position:sticky;
  border:1px solid var(--border-1);border-radius:var(--radius-card);overflow:hidden;
  transition:background 400ms var(--ease-smooth);
}
.stack-card:nth-of-type(1){top:var(--stack-top-base);background:var(--card-1);color:var(--card-1-text)}
.stack-card:nth-of-type(2){top:calc(var(--stack-top-base) + var(--stack-header-h));background:var(--card-2);color:var(--card-2-text)}
.stack-card:nth-of-type(3){top:calc(var(--stack-top-base) + var(--stack-header-h) * 2);background:var(--card-3);color:var(--card-3-text)}
.stack-card:nth-of-type(4){top:calc(var(--stack-top-base) + var(--stack-header-h) * 3);background:var(--card-4);color:var(--card-4-text)}
@media(max-width:540px){.stack-card{border-radius:14px}}

.stack-header{
  position:relative;z-index:2;
  height:var(--stack-header-h);padding:0 40px;
  display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:center;
  border-bottom:1px solid var(--hairline);background:inherit;
  box-shadow:var(--card-header-shadow);cursor:default;
}
@media(max-width:860px){.stack-header{padding:0 24px;grid-template-columns:48px 1fr auto;gap:16px}}
@media(max-width:540px){.stack-header{padding:0 20px;grid-template-columns:40px 1fr auto;gap:12px}}

.stack-header .num{
  font-family:'Geist Mono',monospace;font-size:clamp(24px,2vw,32px);font-weight:500;letter-spacing:-0.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--accent-line);
}
.stack-card.in-view .stack-header .num{-webkit-text-stroke:1.5px var(--accent);color:rgba(13,154,224,0.38)}

.stack-header .title{
  font-family:'Geist',sans-serif;font-size:var(--title);font-weight:500;line-height:1.1;letter-spacing:-0.015em;color:var(--tx-1);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stack-header .title em{font-style:normal;color:var(--accent-mid)}
@media(max-width:540px){.stack-header .title{font-size:15px}}

.stack-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;min-width:180px;
  background:transparent;color:var(--tx-1);
  border:0;outline:1px solid var(--accent);outline-offset:-1px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:'Geist',sans-serif;font-size:13px;font-weight:600;
  text-decoration:none;transition:box-shadow 500ms var(--ease-smooth);
  transform:translateZ(0);
}
.stack-cta::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(0);transition:transform 600ms var(--ease-smooth);z-index:-1;will-change:transform}
.stack-cta:hover::before{transform:translateX(101%)}
.stack-cta:hover{box-shadow:0 0 24px var(--accent-tint)}
.stack-cta .cta-arrow{display:none;font-size:18px;font-weight:800;line-height:1}
@media(max-width:860px){.stack-cta{min-width:160px;padding:11px 18px}}
@media(max-width:540px){
  .stack-cta{min-width:0;width:44px;height:44px;padding:0;font-size:11px;flex-shrink:0}
  .stack-cta .cta-text{display:none}
  .stack-cta .cta-arrow{display:inline-block;font-size:20px;font-weight:900}
}

.stack-body{
  position:relative;z-index:1;padding:56px 56px 64px;
  display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:center;min-height:440px;
}
@media(max-width:860px){.stack-body{padding:32px 28px 40px;grid-template-columns:1fr;gap:24px;min-height:360px}}
@media(max-width:540px){.stack-body{padding:24px 20px 32px;gap:20px;min-height:320px}}

.stack-body .content{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px}
.stack-body .meta-top{display:flex;gap:14px;align-items:center;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx-3)}
.stack-body .meta-top .bar{width:28px;height:1px;background:var(--accent)}
.stack-body .meta-top .val{color:var(--accent-text)}
/* A12 — listes à puces des cartes Solutions : même style que Process (tiret, 14px) */
.stack-body .bullets{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--hairline);max-width:54ch}
.stack-body .bullets li{list-style:none;padding-left:22px;position:relative;font-size:14px;line-height:1.55;color:var(--tx-2)}
.stack-body .bullets li::before{content:'';position:absolute;left:0;top:10px;width:10px;height:1px;background:var(--accent)}
.stack-body .lede{font-size:17px;line-height:1.6;color:var(--tx-2);max-width:54ch}
@media(max-width:540px){.stack-body .lede{font-size:15px}}
.stack-body .meta-bar{
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  padding-top:16px;border-top:1px solid var(--hairline);
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-3);
}
.stack-body .meta-bar .val{color:var(--accent-text);font-size:12px;font-weight:500;letter-spacing:-0.01em}
@media(max-width:540px){.stack-body .meta-bar{gap:16px}}

/* LOT C v3 (revue Lamine pass 3) — Solutions : grande image tronquée par UN bord de la carte.
   SANS bordure ni ombre. Desktop : tronquée à DROITE (image ×2.5 absolue, translate au survol/apparition).
   Tablette + cell : tronquée par le BAS (on ne voit pas le bas de l'objet). Casque : 0° partout. */
.stack-body .visual{
  position:relative;z-index:2;align-self:stretch;overflow:hidden;   /* z-index 2 : l'image passe AU-DESSUS du texte (jamais dessous) */
  margin:-56px -56px -64px 8px;            /* atteint les bords haut/droite/bas de la carte */
  min-height:340px;
}
.stack-body .visual img{
  position:absolute;top:50%;left:0;
  width:250%;height:auto;max-width:none;    /* image ×2.5 */
  object-fit:contain;
  transform:translate(-4%,-50%);            /* ~40 % débordent à droite (clippé par la carte) */
  transition:transform 1100ms var(--ease-smooth);
  will-change:transform;
}
.stack-card.in-view .stack-body .visual img,
.stack-card:hover .stack-body .visual img{transform:translate(-15%,-50%)}

@media(max-width:860px){
  /* carte 1 colonne → HAUT ancré (jamais coupé en haut) ; l'image grande dépasse par le BAS
     et est coupée par le bord inférieur de la carte. Réf. consigne Lamine pass 4. */
  .stack-body .visual{
    margin:8px 0 -40px;align-self:auto;overflow:hidden;
    height:225px;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;
  }
  .stack-body .visual img{position:static;height:300px;width:auto;max-width:88%;max-height:none;transform:none}
  .stack-card.in-view .stack-body .visual img,
  .stack-card:hover .stack-body .visual img{transform:scale(1.12)}   /* zoom plus marqué à l'apparition */
}
@media(max-width:540px){
  .stack-body .visual{height:210px}
  .stack-body .visual img{height:280px;max-width:94%}   /* cell : objets un peu plus grands */
  /* Remontée image (revue Lamine, mission 2, 2026-06-11) : vide artificiel supprimé (min-height,
     gap) + l'objet est CENTRÉ verticalement dans sa fenêtre de troncature (au lieu d'être ancré
     en haut et coupé seulement par le bas) → son centre tombe au milieu de l'espace entre la
     ligne sous le texte et la fin de carte. Design pass 4 (grande image tronquée) intact.
     Placé APRÈS les règles de base 540 (ordre-source). */
  .stack-body{min-height:0;gap:12px}
  .stack-body .visual{margin-top:0;align-items:center;padding-top:0}
  /* En-têtes empilés affinés (72→60) : libère ~52px pour que la carte 4 (sous 3 en-têtes)
     ait un instant de visibilité COMPLÈTE (corps ~528px ≤ fenêtre 844-244-60=540). */
  .sol-g{--stack-header-h:60px;--stack-top-base:64px}
}

/* [DEV PLACEHOLDER] .visual-ph + .big-num — utilisés en dev pour montrer un emplacement vide
   en attente de la vraie illustration. En production, remplacer par <img> ou autre asset.
   À supprimer du CSS final quand tous les visuals sont en place. */
.stack-body .visual-ph{
  position:relative;width:280px;height:240px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(15,20,25,0.18);border-radius:12px;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--tx-3);
  transition:border-color 600ms var(--ease-smooth),background 600ms var(--ease-smooth);
}
[data-theme="dark"] .stack-body .visual-ph{border-color:rgba(245,244,240,0.18)}
.stack-card.in-view .stack-body .visual-ph{border-color:var(--accent-line);background:var(--accent-tint)}
.stack-body .visual-ph .big-num{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Geist Mono',monospace;font-size:140px;font-weight:500;letter-spacing:-0.04em;line-height:0.85;
  color:transparent;-webkit-text-stroke:1.5px var(--accent-line);
  transition:-webkit-text-stroke-color 700ms var(--ease-smooth);
}
.stack-card.in-view .stack-body .visual-ph .big-num{-webkit-text-stroke-color:var(--accent)}
.stack-body .visual-ph .label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%)}
@media(max-width:860px){.stack-body .visual{min-height:180px}.stack-body .visual-ph{width:200px;height:160px}.stack-body .visual-ph .big-num{font-size:96px}}

.sol-g-footer{
  margin-top:96px;padding-top:40px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--tx-3);
}
.sol-g-footer a{color:var(--tx-1);border-bottom:1px solid var(--accent-line);padding-bottom:2px;transition:border-color 400ms var(--ease-std)}
.sol-g-footer a:hover{border-color:var(--accent)}

/* ====================================================
   SECTION PROCESS · Variant B · Vertical pinned
   Compteur sticky J01→J30 + 5 chapters · scrub continu
   ==================================================== */
.pb{position:relative;background:var(--bg);overflow-x:clip}
.pb::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 30% 40%, var(--accent-glow) 0%, transparent 65%);
  opacity:0.4;pointer-events:none;
}

.pb-header{
  max-width:var(--max-w);margin:0 auto;padding:var(--sec-pt) var(--gutter) 48px;
  /* mêmes colonnes/gap que .pb-layout → le sous-titre s'aligne verticalement sur les chapitres */
  display:grid;grid-template-columns:0.42fr 0.58fr;gap:72px;align-items:end;position:relative;
}
@media(max-width:960px){.pb-header{grid-template-columns:1fr;gap:28px;padding:110px var(--gutter) 56px}}
/* Eyebrow Process : hérite de .eyebrow canonique + override color en accent-mid (denim) pour distinction */
.pb-header .eyebrow{margin-bottom:18px;color:var(--accent-mid)}
.pb-header .eyebrow::before{color:var(--accent-mid)}
.pb-h2{
  font-family:'Geist',sans-serif;
  font-size:var(--heading);font-weight:500;line-height:1.08;letter-spacing:-0.02em;
  color:var(--tx-1);max-width:22ch;
}
.pb-h2 em{font-style:normal;color:var(--accent-mid)}
.pb-sub{
  font-size:15px;line-height:1.65;color:var(--tx-2);
  max-width:42ch;padding-top:18px;border-top:1px solid var(--hairline);
}
.pb-sub strong{color:var(--tx-1);font-weight:500}

.pb-pin-wrap{position:relative}
.pb-layout{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter) var(--sec-pb);
  display:grid;grid-template-columns:0.42fr 0.58fr;gap:72px;align-items:start;
}
@media(max-width:960px){.pb-layout{grid-template-columns:1fr;gap:0}}

/* Sticky day counter — desktop = grosse colonne · mobile = mini-bandeau */
.pb-sticky{position:sticky;top:120px;padding-top:0;min-height:60vh}
@media(max-width:960px){
  .pb-sticky{
    position:sticky;top:72px;z-index:5;
    margin:0 calc(-1 * var(--gutter));
    padding:14px var(--gutter);
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hairline);
    min-height:0;
  }
  .pb-counter{flex-direction:row;align-items:center;gap:14px 18px;flex-wrap:wrap}
  .pb-counter-head{display:none}
  .pb-counter-value{gap:6px}
  .pb-counter-value .day{font-size:32px}
  .pb-counter-value .sep,.pb-counter-value .total{font-size:22px}
  .pb-counter-value .unit{display:none}
  .pb-progress{margin-top:0;order:99;flex:1 1 100%;max-width:none}
  .pb-current{padding-top:0;border-top:none;font-size:10px;letter-spacing:0.12em}
  .pb-current-dot{width:6px;height:6px;box-shadow:0 0 0 3px var(--accent-tint)}
  .pb-sticky-caption{display:none}
}

.pb-counter{display:flex;flex-direction:column;gap:28px}
.pb-counter-head{
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--tx-3);
}
.pb-counter-value{display:flex;align-items:baseline;gap:12px;font-family:'Geist Mono',monospace;line-height:0.95}
.pb-counter-value .day{
  font-size:clamp(80px,10vw,140px);font-weight:500;color:var(--tx-1);letter-spacing:-0.04em;
  font-feature-settings:"tnum";transition:color 500ms var(--ease-std);
}
.pb-counter-value .sep{font-size:clamp(40px,5vw,72px);color:var(--tx-4);font-weight:300}
.pb-counter-value .total{font-size:clamp(40px,5vw,72px);color:var(--tx-3);font-weight:400}
.pb-counter-value .unit{font-family:'Geist Mono',monospace;font-size:14px;color:var(--tx-3);letter-spacing:0.1em;margin-left:8px}

.pb-progress{
  margin-top:8px;width:100%;max-width:360px;height:2px;
  background:var(--hairline);position:relative;overflow:hidden;
}
.pb-progress-fill{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-mid) 100%);
  transition:width 600ms var(--ease-std);
}

.pb-current{
  display:flex;align-items:center;gap:10px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-mid);padding-top:18px;border-top:1px solid var(--hairline);
}
.pb-current-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.pb-current-label{color:var(--tx-1);font-weight:500}

.pb-sticky-caption{
  margin-top:32px;font-size:14px;line-height:1.55;color:var(--tx-3);
  max-width:34ch;padding-top:18px;border-top:1px solid var(--hairline);
}
.pb-sticky-caption strong{color:var(--tx-1);font-weight:500}

.pb-chapters{display:flex;flex-direction:column;gap:0}
.pb-chapter{
  min-height:34vh;padding:26px 0;
  display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--hairline);position:relative;
}
.pb-chapter:first-child{border-top:none;padding-top:0}
@media(max-width:960px){.pb-chapter{min-height:auto;padding:32px 0}}
@media(max-width:960px){.pb-chapter:first-child{padding-top:32px}}  /* A9b : décoller l'eyebrow « Étape 01 » du compteur sur mobile */

.pb-chapter-num{
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.pb-chapter-range{
  font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.1em;color:var(--tx-3);margin-bottom:14px;
}
.pb-chapter-title{
  font-family:'Geist',sans-serif;
  font-size:var(--heading-sm);font-weight:500;line-height:1.1;letter-spacing:-0.018em;
  color:var(--tx-1);margin-bottom:22px;max-width:20ch;
}
.pb-chapter-title em{font-style:normal;color:var(--accent-mid)}
.pb-chapter-lead{font-size:16px;line-height:1.62;color:var(--tx-2);max-width:52ch;margin-bottom:26px}
.pb-chapter-bullets{
  display:flex;flex-direction:column;gap:12px;
  padding-top:20px;border-top:1px solid var(--hairline);max-width:52ch;
}
.pb-chapter-bullets li{list-style:none;padding-left:22px;position:relative;font-size:14px;line-height:1.55;color:var(--tx-2)}
.pb-chapter-bullets li::before{content:'';position:absolute;left:0;top:10px;width:10px;height:1px;background:var(--accent)}

.pb-chapter-deliv{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:6px 12px 6px 8px;
  background:var(--accent-tint);border:1px solid var(--accent-line);
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--accent-mid);
}
.pb-chapter-deliv::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent)}

.pb-cta-tail{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter) var(--sec-pb);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  padding-top:28px;border-top:1px solid var(--hairline);
  font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.08em;color:var(--tx-3);
}
.pb-cta-tail a{color:var(--tx-1);border-bottom:1px solid var(--accent-line);padding-bottom:2px;transition:border-color 400ms var(--ease-std)}
.pb-cta-tail a:hover{border-color:var(--accent)}

/* ====================================================
   SECTION PROOF · Variant I · Marquee partenaires + clients
   2 lignes marquee : certifications + clients anonymisés
   KPI band centered en bas
   ==================================================== */
.pi{position:relative;padding:var(--sec-pt) 0 calc(var(--sec-pb) - 8px);overflow:hidden;background:var(--bg)}
.pi::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:1100px;height:520px;border-radius:50%;
  background:var(--accent-glow);filter:blur(180px);opacity:0.5;
  pointer-events:none;
}
.pi-inner{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}

.pi-head{text-align:center;max-width:780px;margin:0 auto 72px}
/* Eyebrow Proof : hérite de .eyebrow canonique + override margin-bottom 18px (au lieu de 20px) */
.pi-head .eyebrow{margin-bottom:18px}
.pi-head h2{
  font-family:'Geist',sans-serif;font-size:var(--heading-md);font-weight:500;line-height:1.04;letter-spacing:-0.025em;
  color:var(--tx-1);
}
.pi-head h2 em{font-style:normal;color:var(--accent-mid)}
.pi-head .sub{
  margin-top:24px;font-size:16px;line-height:1.55;color:var(--tx-2);
  max-width:56ch;margin-left:auto;margin-right:auto;
}
.pi-head .sub strong{color:var(--tx-1);font-weight:500}

.pi-marquees{
  position:relative;
  display:flex;flex-direction:column;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

.pi-row-label{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  z-index:3;
  padding:8px 18px;
  background:var(--bg);border:1px solid var(--hairline);
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--tx-3);
}
.pi-row-label .num{color:var(--accent);margin-right:8px;font-weight:500}

.pi-row{
  position:relative;padding:42px 0;
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.pi-row:last-child{border-bottom:none}

/* VITESSE calée sur la barre trust (~45 px/s, référence Lamine 12 juin) : la durée se calcule
   depuis la LARGEUR de la demi-piste (durée = largeur ÷ 45). Ligne 1 = 11 logos ≈ 2684 px → 60 s.
   Ligne 2 (clients, set ×2) ≈ 3840 px → 85 s. Dupliquer le contenu d'une piste = recalculer la durée,
   sinon la vitesse double (incident 11 juin). */
.pi-track{display:flex;gap:64px;width:max-content;animation:piMarquee 60s linear infinite;will-change:transform}
.pi-track:hover{animation-play-state:paused}
.pi-row.reverse .pi-track{animation-direction:reverse;animation-duration:85s}

/* Override .pi-track : dimensions custom (180x80 au lieu de 200x110 du canonique).
   Le filter/hover logos est hérité de .marquee-cell img canonique (pas de duplication). */
.pi-track .marquee-cell{width:180px;height:80px;padding:8px 16px}
.pi-track .marquee-cell img{max-height:60px}
@keyframes piMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Adaptation par device (APRÈS la base — ordre-source) : sur écran étroit, le même px/s
   paraît plus pressé → ~38 px/s ≤860px, ~30 px/s ≤540px. */
@media(max-width:860px){
  .pi-track{animation-duration:71s}
  .pi-row.reverse .pi-track{animation-duration:101s}
}
@media(max-width:540px){
  .pi-track{animation-duration:89s}
  .pi-row.reverse .pi-track{animation-duration:128s}
}

/* Cert chips */
.pi-cert{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 22px;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  border:1px solid var(--hairline);border-radius:var(--radius-cert);
  flex-shrink:0;min-width:280px;
  transition:border-color 400ms var(--ease-std), background 400ms var(--ease-std);
}
.pi-cert:hover{border-color:var(--accent-line);background:var(--accent-tint)}

.pi-cert-mark{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Geist',sans-serif;font-size:18px;font-weight:600;letter-spacing:-0.02em;
  background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--tx-1);
  flex-shrink:0;
  border:1px solid var(--border-1);
}
.pi-cert-mark.ms{background:linear-gradient(135deg,#00A4EF 0%,#7FBA00 50%,#FFB900 100%);color:#0A0A0B;border-color:transparent}
.pi-cert-mark.ft{background:#EE3124;color:#fff;border-color:transparent}
.pi-cert-mark.cs{background:#1BA0D7;color:#fff;border-color:transparent}
.pi-cert-mark.dl{background:#007DB8;color:#fff;border-color:transparent}
.pi-cert-mark.iso{background:linear-gradient(135deg,#2E7D32 0%,#66BB6A 100%);color:#fff;border-color:transparent;font-size:11px;letter-spacing:0;font-weight:700}

.pi-cert-text{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.pi-cert-name{font-family:'Geist',sans-serif;font-size:16px;font-weight:500;color:var(--tx-1);letter-spacing:-0.01em}
.pi-cert-tier{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}

/* Client tiles */
.pi-client{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:18px 28px;min-width:240px;height:88px;
  background:color-mix(in srgb, var(--ink) 2%, transparent);
  border:1px solid var(--hairline);
  flex-shrink:0;
  transition:border-color 400ms var(--ease-std), background 400ms var(--ease-std);
}
.pi-client:hover{border-color:var(--accent-line);background:var(--accent-tint)}
.pi-client-sigil{
  width:36px;height:36px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Geist',sans-serif;font-size:13px;font-weight:600;letter-spacing:-0.02em;
  background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--tx-1);
  flex-shrink:0;
  border:1px solid var(--border-1);
}
.pi-client-text{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.pi-client-name{font-family:'Geist',sans-serif;font-size:14px;font-weight:500;letter-spacing:-0.005em;color:var(--tx-1)}
.pi-client-sector{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx-3)}

/* KPI band centered */
.pi-kpis{
  margin-top:80px;
  display:grid;grid-template-columns:repeat(4,1fr);
  text-align:center;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
@media(max-width:860px){.pi-kpis{grid-template-columns:repeat(2,1fr)}}

.pi-kpi-cell{
  padding:36px 24px;
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:8px;
}
.pi-kpi-cell:last-child{border-right:none}
@media(max-width:860px){
  .pi-kpi-cell:nth-child(2){border-right:none}
  .pi-kpi-cell:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
}
.pi-kpi-cell .v{
  font-family:'Geist Mono',monospace;font-size:clamp(32px,3vw,42px);font-weight:500;line-height:1;letter-spacing:-0.025em;
  color:var(--tx-1);font-feature-settings:"tnum";
}
.pi-kpi-cell .v .u{color:var(--accent);font-size:0.5em;margin-left:4px;font-weight:400}
.pi-kpi-cell .l{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--tx-3)}

.pi-tail{
  margin-top:64px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--tx-3);
}
.pi-tail a{color:var(--tx-1);border-bottom:1px solid var(--accent-line);padding-bottom:2px;transition:border-color 400ms var(--ease-std)}
.pi-tail a:hover{border-color:var(--accent)}

@media(max-width:540px){
  .pi-row-label{display:none}
  .pi-cert{min-width:240px;padding:14px 18px}
  .pi-client{min-width:200px;padding:14px 22px;height:76px}
}

/* ====================================================
   SECTION CTA FINAL · Variant B · Cinématique
   Aura blob pulsée + H2 display 72-108px + 1 CTA massif
   + coordonnées sur ligne hairline
   ==================================================== */
.cb{
  position:relative;min-height:auto;          /* plus de 100vh forcé → CTA + footer visibles ensemble */
  padding:clamp(48px,4vw,72px) 0 clamp(40px,3vw,56px);
  overflow:hidden;isolation:isolate;
  background:var(--bg);
}
/* Desktop : la section CTA comble le viewport MOINS la hauteur du footer (~330px)
   → 100vh n'affiche QUE le CTA + le footer (rien de la section précédente). */
@media(min-width:961px){.cb{min-height:calc(100vh - 330px)}}

.cb-aura{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:1100px;height:1100px;border-radius:50%;
  background:radial-gradient(circle at center, var(--accent-glow) 0%, var(--accent-tint) 28%, color-mix(in srgb, var(--accent-deep) 18%, transparent) 52%, transparent 72%);
  filter:blur(180px);
  z-index:0;pointer-events:none;
  animation:cbAuraPulse 8s ease-in-out infinite;
}
@keyframes cbAuraPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.85}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
}
.cb-aura-2{
  position:absolute;bottom:-20%;right:-10%;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle at center, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 60%);
  filter:blur(140px);
  z-index:0;pointer-events:none;
  animation:cbAuraPulse 11s ease-in-out infinite reverse;
}

.cb-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:2;
  justify-content:center;
}

/* CB-eyebrow : variante CTA final (display:flex pour aligner avec dot pulsé + letter-spacing 0.22em élargi pour calibre cinématique).
   NE PAS utiliser la classe .eyebrow ici — c'est une variante explicite, divergente intentionnelle. */
.cb-eyebrow{
  margin-bottom:18px;
  font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;
}
.cb-eyebrow::before{content:'//';color:var(--accent);opacity:0.6}
.cb-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);animation:cbPulseDot 1.8s ease-in-out infinite}
@keyframes cbPulseDot{0%,100%{opacity:0.4}50%{opacity:1}}

.cb-title{
  font-family:'Geist',sans-serif;
  font-size:var(--display-xl);font-weight:500;line-height:0.96;letter-spacing:-0.035em;
  color:var(--tx-1);text-align:center;max-width:16ch;
  margin-bottom:18px;
}
.cb-title em{font-style:normal;color:var(--accent-mid);font-weight:400}

.cb-sub{
  font-family:'Geist Mono',monospace;font-size:13.5px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx-2);
  text-align:center;max-width:48ch;
  margin-bottom:28px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.cb-sub span{white-space:nowrap}
.cb-sub .sep{width:4px;height:4px;border-radius:50%;background:var(--tx-4);flex-shrink:0}

.cb-action{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:28px}
.cb-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:26px 52px;
  background:transparent;color:var(--tx-1);
  border:0;outline:1px solid var(--accent);outline-offset:-1px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:'Geist',sans-serif;font-size:18px;font-weight:600;letter-spacing:0.005em;
  transition:box-shadow 650ms var(--ease-smooth),color 400ms var(--ease-std);
  transform:translateZ(0);
}
.cb-btn::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);transform:translateX(0);
  transition:transform 650ms var(--ease-smooth);
  z-index:-1;will-change:transform;
}
.cb-btn:hover::before{transform:translateX(101%)}
.cb-btn:hover{box-shadow:0 0 60px var(--accent-glow)}
.cb-btn .btn-mono{
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  padding-left:18px;margin-left:4px;border-left:1px solid var(--border-1);
  color:var(--tx-2);
}

.cb-secondary{
  font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx-3);
  display:flex;align-items:center;gap:10px;
}
.cb-secondary a{
  color:var(--tx-2);
  border-bottom:1px solid var(--accent-line);padding-bottom:1px;
  transition:border-color 400ms var(--ease-std),color 400ms var(--ease-std);
}
.cb-secondary a:hover{border-color:var(--accent);color:var(--accent)}

.cb-coords{
  width:100%;max-width:var(--max-w);
  padding-top:40px;
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  font-family:'Geist Mono',monospace;font-size:11.5px;letter-spacing:0.12em;color:var(--tx-3);
}
@media(max-width:860px){.cb-coords{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:540px){.cb-coords{grid-template-columns:1fr;gap:20px}}

.cb-coord{display:flex;flex-direction:column;gap:8px}
.cb-coord .coord-label{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--tx-4)}
.cb-coord .coord-value{
  font-family:'Geist Mono',monospace;font-size:13px;font-weight:500;color:var(--tx-1);letter-spacing:0.02em;
}
.cb-coord .coord-value a{color:var(--tx-1);transition:color 400ms var(--ease-std)}
.cb-coord .coord-value a:hover{color:var(--accent)}

.cb-sr{opacity:0;transform:translateY(32px);transition:opacity 1300ms var(--ease-smooth),transform 1300ms var(--ease-smooth)}
.cb-sr.in{opacity:1;transform:translateY(0)}
.cb-sr-d1{transition-delay:120ms}
.cb-sr-d2{transition-delay:260ms}
.cb-sr-d3{transition-delay:400ms}
.cb-sr-d4{transition-delay:540ms}

@media(max-width:640px){
  .cb{padding:80px 0 40px}   /* cell : padding inférieur réduit avant le footer */
  .cb-btn{padding:22px 12px;font-size:15.5px;width:100%;text-align:center}/* pleine largeur mobile + centre : libelle long sur petits ecrans (sweep 2026-06-11, pattern Lamine) */
  .cb-sub{font-size:12px}
}

/* ====================================================
   MOBILE MENU DRAWER — right-side slide (Executive 2000 pattern)
   ==================================================== */
.mobile-overlay{
  position:fixed;inset:0;z-index:195;
  background:rgba(10,10,11,0.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 0.4s var(--ease-smooth),visibility 0.4s;
}
.mobile-overlay.open{opacity:1;pointer-events:auto;visibility:visible}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:200;
  width:100%;max-width:480px;
  background:var(--bg);
  border-left:1px solid var(--hairline);
  box-shadow:-20px 0 60px -10px rgba(0,0,0,0.4);
  transform:translateX(100%);visibility:hidden;
  transition:transform 0.55s var(--ease-smooth),visibility 0.55s;
  padding:7rem 3.2rem 3.2rem;
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0);visibility:visible}

.mobile-menu-close{
  position:absolute;top:1.8rem;right:1.8rem;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border-1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--tx-2);
  transition:color 300ms var(--ease-std),transform 300ms var(--ease-std);
}
.mobile-menu-close:hover{color:var(--accent);transform:rotate(90deg)}
.mobile-menu-close svg{width:20px;height:20px}

.mobile-menu ul{list-style:none;padding:0;margin:0}
.mobile-menu li{border-bottom:1px solid var(--hairline)}
.mobile-menu li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.8rem 0;
  font-size:2rem;font-weight:500;color:var(--tx-1);
  transition:color 300ms var(--ease-std),padding-left 300ms var(--ease-std);
}
.mobile-menu li a::after{
  content:'→';font-family:'Geist Mono',monospace;font-size:1.2rem;
  color:var(--tx-4);transition:color 300ms var(--ease-std);
}
.mobile-menu li a:hover{color:var(--accent);padding-left:0.8rem}
.mobile-menu li a:hover::after{color:var(--accent)}

.mobile-menu-cta{
  margin-top:2.4rem;width:100%;text-align:center;
  padding:18px 32px;
}

.mobile-menu-footer{
  margin-top:auto;padding-top:2.4rem;
  display:flex;flex-direction:column;gap:0.6rem;
  font-family:'Geist Mono',monospace;font-size:1.1rem;color:var(--tx-3);
}
.mobile-menu-footer span:first-child{color:var(--accent)}

body.menu-open{overflow:hidden}

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:52px var(--gutter) 32px;   /* resserré pour que CTA + footer tiennent dans 100vh */
}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
}
@media(max-width:860px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:540px){.footer-inner{grid-template-columns:1fr;gap:24px}}

.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-brand .brand-name{font-size:20px;font-weight:600;letter-spacing:-0.01em}
.footer-brand .brand-desc{font-size:12.5px;color:var(--tx-2);line-height:1.6;max-width:36ch}

.footer-col h4,.footer-col .footer-col-title{
  font-family:'Geist Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--tx-3);
  margin-bottom:16px;
}
.footer-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col li a{font-size:12px;/* 15->13->12 : revue Lamine 2026-06-11 */color:var(--tx-2);transition:color 300ms var(--ease-std)}
.footer-col li a:hover{color:var(--accent)}

.footer-bottom{
  max-width:var(--max-w);margin:28px auto 0;
  padding-top:20px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Geist Mono',monospace;font-size:11px;color:var(--tx-3);letter-spacing:0.08em;  /* a11y : tx-4 → tx-3 (contraste AA) */
}
@media(max-width:540px){.footer-bottom{flex-direction:column;gap:8px;text-align:center}}

/* ====================================================
   SCROLL REVEAL — global
   ==================================================== */
.sr{opacity:0;transform:translateY(40px);transition:opacity 1200ms var(--ease-smooth),transform 1200ms var(--ease-smooth)}
.sr.in{opacity:1;transform:translateY(0)}

/* Prefers reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .sr,.cb-sr{opacity:1 !important;transform:none !important}
}

/* ====================================================
   ACCESSIBILITÉ — ajouts WCAG 2.2 AA (P1 — 29 mai 2026)
   ==================================================== */
/* 2.4.11 Focus non masqué : compense la nav fixe (72px) sur ancres et tabulation */
html{scroll-padding-top:88px}
:target{scroll-margin-top:88px}
/* 2.4.7 Focus visible : anneau cohérent (couleur lisible sur les 2 thèmes) */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:2px;
}
/* 1.4.11 Contraste non-textuel : contour des contrôles interactifs ≥ 3:1 */
.btn-secondary{border-color:var(--border-strong)}
input,select,textarea{border-color:var(--border-strong)}

/* ====================================================
   FIX RESPONSIVE NAV (29 mai 2026)
   Le logo était écrasé sous 860px : la règle de masquage du .nav-cta
   (ligne ~204) était neutralisée par la règle de base .nav-cta (plus
   tardive en source, donc gagnante). Ces règles tardives rétablissent
   le comportement attendu + protègent le logo.
   ==================================================== */
.nav-logo{flex-shrink:0}
.nav-logo img{flex-shrink:0}
@media(max-width:860px){.nav-cta{display:none}}

/* ====================================================
   POLISH 29 mai — « double footer » : la bande coordonnées du CTA
   faisait doublon avec le footer (qui porte déjà les coordonnées).
   ==================================================== */
.cb-coords{display:none}

/* Logo Veeam : exception filter:none RETIRÉE (mission 2, 2026-06-10) — le fichier a été détouré (lettres opaques sur transparent, original : 01_Assets/Veeam-original-plaque.webp) et suit désormais le pipeline standard des logos. */

/* ====================================================
   COMP-PIN — Comparaison pin-scroll côte à côte
   Promu depuis silicium-source.md §8.14 — 8 juin 2026
   ==================================================== */
.comp-pin{position:relative;background:var(--bg);border-top:1px solid var(--hairline)}
.comp-pin-stage{position:relative;height:70vh;min-height:480px;display:flex;flex-direction:column;overflow:hidden}
.comp-pin-header{text-align:center;padding:var(--sec-pt) var(--gutter) 0;flex-shrink:0}
.comp-pin-content{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.comp-pin-pair{position:absolute;display:flex;align-items:center;gap:var(--gap-lg);width:100%;max-width:1100px;padding:0 var(--gutter);will-change:transform,opacity}
@media(max-width:768px){.comp-pin-pair{flex-direction:column;gap:var(--gap);max-width:500px;left:50%;transform:translateX(-50%)}}
.comp-pin-num{font-family:'Geist Mono',monospace;font-size:clamp(56px,7vw,90px);font-weight:500;line-height:1;letter-spacing:-0.02em;color:var(--accent-tint);-webkit-text-stroke:1px var(--accent-line);font-feature-settings:"tnum";flex-shrink:0;width:clamp(64px,8vw,110px);text-align:center;align-self:center}
@media(max-width:768px){.comp-pin-num{font-size:42px;width:auto;order:0}}
.comp-pin-sep{width:1px;align-self:stretch;background:var(--hairline);flex-shrink:0}
@media(max-width:768px){.comp-pin-sep{width:60px;height:1px;align-self:center}}
.comp-pin-col{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
@media(max-width:768px){.comp-pin-col{text-align:center}.comp-pin-col[data-side="neg"]{order:-1}.comp-pin-col[data-side="pos"]{order:1}}
.comp-pin-label{font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-pill);align-self:flex-start}
@media(max-width:768px){.comp-pin-label{align-self:center}}
.comp-pin-label[data-side="neg"]{color:var(--fail);background:rgba(139,46,46,0.06);border:1px solid rgba(139,46,46,0.14)}
.comp-pin-label[data-side="pos"]{color:var(--signal);background:rgba(78,122,77,0.06);border:1px solid rgba(78,122,77,0.14)}
[data-theme="dark"] .comp-pin-label[data-side="neg"]{color:#C85050;background:rgba(200,80,80,0.06);border-color:rgba(200,80,80,0.12)}
[data-theme="dark"] .comp-pin-label[data-side="pos"]{color:#7CC87C;background:rgba(100,180,100,0.06);border-color:rgba(100,180,100,0.12)}
.comp-pin-col h3{font-family:'Geist',sans-serif;font-size:var(--title);font-weight:500;line-height:1.25;letter-spacing:-0.01em}
.comp-pin-col[data-side="neg"] h3{color:var(--tx-2)}
.comp-pin-col[data-side="pos"] h3{color:var(--tx-1)}
.comp-pin-col p{font-family:'Geist',sans-serif;font-size:15px;line-height:1.55}
.comp-pin-col[data-side="neg"] p{color:var(--tx-3)}
.comp-pin-col[data-side="pos"] p{color:var(--tx-2)}
.comp-pin-col p .hl{color:var(--accent-mid);font-weight:500}
.comp-pin-progress{position:absolute;bottom:clamp(24px,3vh,40px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.comp-pin-counter{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em;color:var(--tx-4)}
.comp-pin-bar{width:100px;height:2px;background:var(--hairline);border-radius:1px;overflow:hidden}
.comp-pin-bar-fill{height:100%;width:0%;background:var(--accent);border-radius:1px;transition:width 400ms var(--ease-smooth)}
@media(prefers-reduced-motion:reduce){.comp-pin{height:auto !important}.comp-pin-stage{position:relative !important;height:auto !important;padding:var(--sec-pt) 0 var(--sec-pb)}.comp-pin-content{position:relative}.comp-pin-pair{position:relative !important;opacity:1 !important;margin:var(--gap-lg) auto}.comp-pin-progress{display:none}}

/* ====================================================
   COMP-FLOW — Comparaison côte à côte empilée (scroll reveal)
   Même layout visuel que comp-pin mais sans pin-scroll.
   Espacement standard (tokens sec-pt/sec-pb).
   ==================================================== */
.comp-flow{position:relative;padding:var(--sec-pt) 0 var(--sec-pb);background:var(--bg);border-top:1px solid var(--hairline)}
.comp-flow-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.comp-flow-head{margin-bottom:var(--section-gap);text-align:center}
.comp-flow-head h2{font-family:'Geist',sans-serif;font-size:var(--heading);font-weight:500;line-height:1.08;letter-spacing:-0.025em;color:var(--tx-1);margin:0 auto;max-width:22ch}
.comp-flow-head h2 em{font-style:normal;color:var(--accent-mid)}
.comp-flow-list{display:flex;flex-direction:column;gap:0}
.comp-flow-pair{display:flex;align-items:center;gap:var(--gap-lg);max-width:1100px;margin:0 auto;width:100%;padding:var(--gap-lg) 0;border-bottom:1px solid var(--hairline)}
.comp-flow-pair:last-child{border-bottom:none}
@media(max-width:768px){.comp-flow-pair{flex-direction:column;gap:var(--gap)}}
.comp-flow-num{font-family:'Geist Mono',monospace;font-size:clamp(48px,6vw,80px);font-weight:500;line-height:1;letter-spacing:-0.02em;color:var(--accent-tint);-webkit-text-stroke:1px var(--accent-line);font-feature-settings:"tnum";flex-shrink:0;width:clamp(56px,7vw,96px);text-align:center;align-self:center}
@media(max-width:768px){.comp-flow-num{font-size:40px;width:auto;order:0}}
.comp-flow-sep{width:1px;align-self:stretch;background:var(--hairline);flex-shrink:0}
@media(max-width:768px){.comp-flow-sep{width:60px;height:1px;align-self:center}}
.comp-flow-col{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
@media(max-width:768px){.comp-flow-col{text-align:center}.comp-flow-col[data-side="neg"]{order:-1}.comp-flow-col[data-side="pos"]{order:1}}
@media(max-width:768px){.comp-flow-col .comp-pin-label{align-self:center}}
.comp-flow-col h3{font-family:'Geist',sans-serif;font-size:var(--title);font-weight:500;line-height:1.25;letter-spacing:-0.01em}
.comp-flow-col[data-side="neg"] h3{color:var(--tx-2)}
.comp-flow-col[data-side="pos"] h3{color:var(--tx-1)}
.comp-flow-col p{font-family:'Geist',sans-serif;font-size:15px;line-height:1.55}
.comp-flow-col[data-side="neg"] p{color:var(--tx-3)}
.comp-flow-col[data-side="pos"] p{color:var(--tx-2)}
.comp-flow-col p .hl{color:var(--accent-mid);font-weight:500}

/* ====================================================
   TO-TOP · bouton remonter en haut (widget silicium, 2026-06-11)
   Cercle accent + fleche grasse. N'apparait QUE lors d'un scroll VERS LE HAUT
   (jamais en descendant, jamais en haut de page). Remontee smooth via Lenis
   si present, sinon scrollTo smooth ; instantane en prefers-reduced-motion.
   ==================================================== */
.to-top{
  position:fixed;right:22px;bottom:24px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:var(--accent);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(13,154,224,0.35);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity 350ms var(--ease-std),transform 350ms var(--ease-std),background 300ms var(--ease-std);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:20px;height:20px;display:block}
.to-top:hover{background:var(--accent-deep)}
@media(max-width:540px){.to-top{right:16px;bottom:18px;width:44px;height:44px}}