/* ═══════════════════════════════════════════════════════════════════════════
   Fynomia — le site

   La même maison que le logiciel : ivoire, encre presque noire, un seul vert
   acide qui veut dire « ici », des chiffres en chasse fixe. Les jetons de
   couleur et de typographie sont ceux de css/app.css, recopiés à la
   construction : une seule source.

   Ce qui change par rapport au logiciel, c'est la respiration. Le logiciel
   est un instrument de travail, dense ; le site se lit. Filets très fins,
   surfaces légèrement translucides, ombre diffuse réservée à ce qui est
   actif, et du mouvement seulement quand il explique un calcul.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Papier et encre.
     Le crème remplace le gris froid : il réchauffe la page sans la décorer,
     et fait tenir le noir profond sans le contraste violent d'un blanc pur. */
  --paper:      #F2F0E8;
  --surface:    #FFFFFF;
  --surface-2:  #FAF8F2;
  --ink:        #0E0F0C;
  --ink-2:      #24261F;
  --ink-3:      #4C4F45;
  --ink-4:      #7C7F72;
  --ink-5:      #A9ACA0;
  --rule:       #DCD9CD;
  --rule-strong:#0E0F0C;

  /* L'accent : un vert acide, emprunté au balisage de chantier.
     Il ne veut pas dire « bien », il veut dire « ici ». Il ne sert qu'à
     l'action en cours, au module ouvert et au bouton qui fait avancer. */
  --accent:     #D6F034;
  --accent-ink: #0E0F0C;
  --accent-dim: #B8CF2A;
  --accent-wash:#F2FAC9;

  /* Signal secondaire : le bleu ne décore plus, il relie les renvois. */
  --signal:     #1B3BFF;
  --signal-ink: #0F27C4;
  --signal-wash:#E6E9FF;

  /* Ce qui se travaille : le jaune, presque effacé.
     Une quatrième teinte avait été essayée — une prune — pour distinguer les
     réglages à affiner. Elle apportait un hue de plus à une palette qui en
     vivait très bien avec trois, et elle sortait du tableau. On garde donc les
     couleurs de la maison : le noir pour ce qui est actif, et le même jaune
     que partout ailleurs, dilué à quelques pour cent, pour teinter un fond
     sans jamais le colorer. */
  --tune:       var(--ink);
  --tune-ink:   var(--ink);
  --tune-wash:  rgba(214, 240, 52, .16);
  --tune-rule:  var(--rule);

  /* Sémantique : gagné, perdu, à surveiller */
  --gain:       #157A4A;
  --gain-wash:  #DCEFE2;
  --loss:       #C4142F;
  --loss-wash:  #FBE0E1;
  --warn:       #8A5A00;
  --warn-wash:  #F7EBCF;

  --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* L'échelle des titres : un rôle, une valeur, partout.
     Il y en avait sept pour la même chose — un titre de bloc mesurait 15 px
     dans l'acquisition, 16 dans une carte, 17 dans la paie, 18 dans une liste,
     19 dans le tableau de bord, 21 dans l'analyse, 24 dans l'écran de
     validation. On lisait donc sept niveaux de hiérarchie là où il n'y a
     qu'une seule sorte de chose. Ces trois jetons sont désormais les seuls
     endroits où ces valeurs existent. */
  --t-block: 17px;      /* le titre d'un bloc : carte, panneau, section */
  --t-block-sub: 13px; /* la ligne qui l'explique, juste dessous */
  --t-row: 15px;      /* le titre d'une ligne à l'intérieur d'un bloc */

  /* Une application de travail, pas une affiche.
     L'interface avait été dessinée comme une page de présentation : un titre
     de module à 46 px, des onglets de 40 px, des cartes de 20 px de marge
     intérieure, des blocs séparés de 22 à 44 px. Sur un portable, on voyait
     un titre, trois onglets et le début d'une carte. Les tailles et les pas
     qui suivent sont les seuls à exister ; les composants les lisent. */
  --t-page: 36px;       /* le titre d'une page (H1) */
  --t-section: 22px;    /* le titre d'une section de page (H2) */
  --t-meta: 12px;     /* étiquettes, métadonnées, légendes */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --h-tab: 34px;        /* une barre d'onglets */
  --h-control: 36px;    /* un champ, un bouton courant */

  /* Largeurs : la page de travail d'abord. */
  --page-x: 28px;       /* marge latérale de la page */
  --page-top: 20px;     /* sous la barre du haut */
  --page-max: 1180px;   /* largeur utile */

  --rail-w: 204px;
  --live-w: 250px;
  --header-h: 48px;
  --impact-h: 62px;
  --space: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Pour ce qui prend de la place à l'écran : le mouvement s'amorce doucement,
     prend de la vitesse, puis se pose. C'est la courbe d'une porte lestée —
     rien ne jaillit, rien ne claque. */
  --ease-soft: cubic-bezier(.62, .02, .34, 1);
}

:root {
  --s-max: 1200px;
  --s-gouttiere: 32px;
  --s-section: clamp(56px, 6vw, 88px);
  --s-filet: rgba(14, 15, 12, .085);
  --s-filet-fort: rgba(14, 15, 12, .16);
  --s-voile: rgba(255, 255, 255, .62);
  --s-voile-fort: rgba(255, 255, 255, .86);
  --s-ombre: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 80px -42px rgba(14, 15, 12, .42), 0 8px 24px -18px rgba(14, 15, 12, .22);
  --s-ombre-douce: 0 18px 48px -34px rgba(14, 15, 12, .35);
  --s-rayon: 20px;
  --s-rayon-petit: 12px;
  --s-entete: 60px;
  --s-sortie: cubic-bezier(.2, .8, .2, 1);
  --s-porte: cubic-bezier(.62, .02, .34, 1);
  --s-encre-texte: #F2F0E8;
  --s-encre-doux: rgba(242, 240, 232, .62);
  --s-encre-filet: rgba(242, 240, 232, .12);
}
@media (max-width: 760px) { :root { --s-gouttiere: 20px; --s-entete: 58px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--s-entete) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--ink); }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }

.s-wrap { max-width: calc(var(--s-max) + 2 * var(--s-gouttiere)); margin: 0 auto; padding: 0 var(--s-gouttiere); }
.s-mono { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; }

.s-evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--accent); font-weight: 600; text-decoration: none;
}
.s-evitement:focus { top: 12px; }

/* ─────────────────────────────── Boutons ─────────────────────────────── */

.s-bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font: 600 14.5px/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--s-sortie), box-shadow .18s var(--s-sortie), background-color .18s var(--s-sortie), border-color .18s var(--s-sortie);
}
.s-bouton:hover { transform: translateY(-1px); }
.s-bouton:active { transform: translateY(0); transition-duration: .06s; }
.s-bouton-encre { background: var(--ink); color: #fff; box-shadow: 0 10px 26px -16px rgba(14, 15, 12, .7); }
.s-bouton-encre:hover { box-shadow: 0 16px 34px -18px rgba(14, 15, 12, .8); }
.s-bouton-accent { background: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px rgba(14, 15, 12, .06) inset, 0 12px 30px -16px rgba(140, 160, 20, .9); }
.s-bouton-accent:hover { box-shadow: 0 0 0 1px rgba(14, 15, 12, .1) inset, 0 18px 38px -18px rgba(140, 160, 20, 1); }
.s-bouton-contour { background: var(--s-voile); border-color: var(--s-filet-fort); color: var(--ink); }
.s-bouton-contour:hover { background: var(--surface); border-color: var(--ink); }
.s-bouton-contour.is-clair { background: transparent; border-color: var(--s-encre-filet); color: var(--s-encre-texte); }
.s-bouton-contour.is-clair:hover { border-color: var(--s-encre-texte); }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

.s-lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink);
  background: linear-gradient(to top, var(--accent) 2px, transparent 2px) no-repeat 0 100% / 0 100%; transition: background-size .28s var(--s-sortie);
}
.s-lien-fleche::after { content: '→'; transition: transform .2s var(--s-sortie); }
.s-lien-fleche:hover { background-size: 100% 100%; }
.s-lien-fleche:hover::after { transform: translateX(3px); }

/* ─────────────────────────────── En-tête ─────────────────────────────── */

.s-entete {
  position: sticky; top: 0; z-index: 50; height: var(--s-entete);
  background: rgba(242, 240, 232, .78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease;
}
.s-entete.is-defile { border-bottom-color: var(--s-filet); background: rgba(242, 240, 232, .9); }
.s-entete-in { max-width: calc(var(--s-max) + 2 * var(--s-gouttiere)); height: 100%; margin: 0 auto; padding: 0 var(--s-gouttiere); display: flex; align-items: center; gap: 28px; }
.s-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.s-logo-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--accent);
  font: 800 17px/1 var(--display);
}
.s-logo-mot { font: 800 16px/1 var(--display); letter-spacing: .04em; }
.s-nav { position: relative; display: flex; align-items: center; gap: 4px; }
.s-nav-lien {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; background: none; border-radius: 10px;
  font: 500 14.5px/1 var(--sans); color: var(--ink-3); text-decoration: none; cursor: pointer; transition: color .15s ease;
}
.s-nav-lien:hover, .s-nav-lien.is-courant, .s-menu-bouton[aria-expanded="true"] { color: var(--ink); }
/* Le trait sous le lien survolé glisse de lien en lien. */
.s-nav-marque {
  position: absolute; left: 0; bottom: 4px; height: 2px; width: 0; border-radius: 2px; background: var(--ink); opacity: 0; pointer-events: none;
  transition: transform .32s var(--s-sortie), width .32s var(--s-sortie), opacity .2s ease;
}
.s-nav.is-marque .s-nav-marque { opacity: 1; }
.s-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--s-sortie); }
.s-menu-bouton[aria-expanded="true"] .s-chevron { transform: rotate(-135deg) translate(-1px, -1px); }
.s-menu { position: relative; }
.s-menu-panneau {
  position: absolute; top: calc(100% + 10px); left: -8px; width: 300px; padding: 10px; border-radius: 16px;
  background: var(--s-voile-fort); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--s-filet); box-shadow: var(--s-ombre); animation: s-apparait .2s var(--s-sortie);
}
.s-menu-titre { padding: 8px 10px 4px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-menu-item { display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-size: 14.5px; color: var(--ink-2); }
.s-menu-item .s-mono { font-size: 11px; color: var(--ink-4); }
.s-menu-item:hover { background: rgba(14, 15, 12, .05); color: var(--ink); }
.s-entete-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.s-entete-actions .s-bouton { min-height: 40px; padding: 9px 16px; font-size: 14.5px; border-radius: 11px; }
.s-lien-discret { font-size: 14.5px; font-weight: 500; color: var(--ink-3); text-decoration: none; }
.s-lien-discret:hover { color: var(--ink); }
.s-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--s-filet-fort); border-radius: 11px; background: var(--s-voile); cursor: pointer; position: relative; }
.s-burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform .25s var(--s-sortie); }
.s-burger span:first-child { top: 16px; }
.s-burger span:last-child { top: 24px; }
.s-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.s-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.s-mobile {
  position: fixed; inset: var(--s-entete) 0 0; z-index: 49; padding: 20px var(--s-gouttiere) 32px; overflow: auto;
  background: var(--paper); display: flex; flex-direction: column; gap: 2px; animation: s-apparait .22s var(--s-sortie);
}
.s-mobile > a { padding: 14px 0; border-bottom: 1px solid var(--s-filet); font: 700 24px/1.2 var(--display); letter-spacing: -.02em; text-decoration: none; }
.s-mobile-actions { display: grid; gap: 10px; margin-top: 24px; }
@media (max-width: 960px) {
  .s-nav, .s-entete-actions .s-lien-discret { display: none; }
  .s-burger { display: block; }
  .s-entete-actions { gap: 10px; }
}
@media (max-width: 420px) { .s-entete-actions .s-bouton { min-height: 38px; padding: 8px 13px; font-size: 14px; } }
@keyframes s-apparait { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────── Sections ─────────────────────────────── */

.s-section { padding: var(--s-section) 0; position: relative; }
.s-section + .s-section:not(.s-encre):not(.s-final)::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(var(--s-max), calc(100% - 2 * var(--s-gouttiere))); transform: translateX(-50%);
  height: 1px; background: var(--s-filet);
}
.s-tete { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.s-tete.is-ligne { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.s-tete h2, .s-page-tete h1 { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.08; }
.s-tete .s-chapo { margin-top: 18px; }
.s-tete.is-ligne .s-chapo { margin: 0; }
.s-chapo { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.55; color: var(--ink-3); max-width: 62ch; }
.s-surtitre {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.s-surtitre::before { content: ''; width: 18px; height: 4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1px rgba(14, 15, 12, .08); }
.s-surtitre.is-clair { color: var(--s-encre-doux); }
.s-petit-titre { font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.s-exemple {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
  background: rgba(14, 15, 12, .045); border: 1px solid var(--s-filet);
}
.s-exemple::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-5); }

.s-encre { background: var(--ink); color: var(--s-encre-texte); }
.s-encre h2, .s-encre h3 { color: #fff; }
.s-encre .s-chapo { color: var(--s-encre-doux); }
.s-encre .s-exemple { color: var(--s-encre-doux); background: rgba(242, 240, 232, .06); border-color: var(--s-encre-filet); }

/* Révélation à l'arrivée : un fondu court, une seule fois. */
.js .s-revele { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--s-sortie), transform .7s var(--s-sortie); transition-delay: var(--retard, 0s); }
.js .s-revele.is-vu { opacity: 1; transform: none; }

/* ─────────────────────────────── Héros ─────────────────────────────── */

.s-heros { padding: clamp(24px, 3vw, 44px) 0 clamp(36px, 4vw, 60px); overflow: clip; }
.s-heros-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 5vw, 80px); align-items: center; }
.s-heros-titre { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.03; letter-spacing: -.036em; }
.s-surligne {
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 88%, transparent) 30%, transparent 30%) no-repeat 0 92% / 100% 100%;
  padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.s-heros-chapo { margin-top: 20px; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.s-heros-concret { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 38em; }
.s-heros .s-actions { margin-top: 26px; }
.s-heros-note { margin-top: 22px; font-size: 12px; color: var(--ink-4); letter-spacing: .04em; }

/* ─────────────────────────── L'application simulée ─────────────────────────── */

.s-app {
  position: relative; border-radius: var(--s-rayon); background: var(--s-voile-fort); border: 1px solid var(--s-filet);
  box-shadow: var(--s-ombre); overflow: hidden;
}
.s-app-barre {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--s-filet);
  font: 500 12.5px/1 var(--sans); color: var(--ink-3); background: rgba(250, 248, 242, .7);
}
.s-app-barre .s-exemple { margin-left: auto; }
.s-app-pastille { width: 18px; height: 18px; border-radius: 6px; background: var(--ink); position: relative; flex: none; }
.s-app-pastille::after { content: ''; position: absolute; inset: 6px 5px 5px; border-radius: 1px; background: var(--accent); clip-path: polygon(0 60%, 30% 60%, 30% 30%, 60% 30%, 60% 0, 100% 0, 100% 100%, 0 100%); }
.s-app-sep { color: var(--ink-5); }
.s-app-page { color: var(--ink); font-weight: 600; }
.s-app-pied { padding: 12px 18px 14px; border-top: 1px solid var(--s-filet); font-size: 12px; color: var(--ink-4); }

/* La chaîne du héros : du prix à la trésorerie. */
.s-chaine { position: relative; padding: 10px 18px 12px 38px; }
.s-chaine::before { content: ''; position: absolute; left: 22px; top: 30px; bottom: 44px; width: 1px; background: var(--s-filet-fort); }
.s-chaine::after {
  content: ''; position: absolute; left: 19px; top: 26px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 240, 52, .28); opacity: 0;
}
.s-chaine.is-propage::after { animation: s-descend .95s var(--s-porte) both; }
@keyframes s-descend { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--course, 300px))); } }
.s-maillon {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'l v' 'f v'; column-gap: 16px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--s-filet);
}
.s-maillon:last-child { border-bottom: 0; }
.s-maillon-point { position: absolute; left: -20px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink-5); transition: background-color .25s ease, border-color .25s ease, transform .25s var(--s-sortie); }
.s-maillon.is-entree .s-maillon-point { background: var(--ink); border-color: var(--ink); }
.s-maillon-l { grid-area: l; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.s-maillon-f { grid-area: f; font: 400 12px/1.4 var(--mono); color: var(--ink-4); }
.s-maillon-v { grid-area: v; font: 600 17px/1.1 var(--mono); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; transition: color .25s ease; }
.s-maillon.is-flash .s-maillon-point { background: var(--accent); border-color: var(--ink); transform: scale(1.35); }
.s-maillon.is-flash .s-maillon-v { background: linear-gradient(to top, rgba(214, 240, 52, .9) 34%, transparent 34%); }
.s-maillon.is-entree { grid-template-areas: 'l v' 'f v'; }
.s-maillon.is-entree .s-pas { grid-area: v; }
.s-pas { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--s-filet); }
.s-pas button {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: 500 17px/1 var(--mono); color: var(--ink-3);
  transition: background-color .15s ease, color .15s ease;
}
.s-pas button:hover { background: var(--ink); color: var(--accent); }
.s-pas output { min-width: 84px; text-align: center; font: 600 18px/1 var(--mono); letter-spacing: -.03em; }
.s-maillon.is-fin { grid-template-areas: 'l v' 'f v' 'c c'; }
.s-maillon-courbe { grid-area: c; margin-top: 6px; }
.s-courbe { width: 100%; height: 44px; overflow: visible; }
.s-courbe-zero { stroke: var(--ink-5); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.s-courbe-trait { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ─────────────────────────── Quatre situations ─────────────────────────── */

.s-onglets {
  position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; margin-bottom: 28px;
  background: var(--s-voile); border: 1px solid var(--s-filet); max-width: 100%; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.s-onglets::-webkit-scrollbar { display: none; }
.s-onglet {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; flex: none; scroll-snap-align: start;
  height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: 600 15px/1 var(--sans); color: var(--ink-3); transition: color .25s ease;
}
.s-onglet .s-mono { font-size: 11px; color: var(--ink-4); transition: color .25s ease; }
.s-onglet:hover { color: var(--ink); }
.s-onglet.is-on { color: #fff; }
.s-onglet.is-on .s-mono { color: var(--accent); }
.s-onglets-marque {
  position: absolute; z-index: 0; top: 5px; left: 0; height: 44px; width: 0; border-radius: 12px; background: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(14, 15, 12, .7); transition: transform .45s var(--s-porte), width .45s var(--s-porte);
}
.no-js .s-onglets-marque, html:not(.js) .s-onglets-marque { display: none; }
html:not(.js) .s-onglet.is-on { background: var(--ink); }
.js .s-situation:not(.is-on) { display: none; }
.s-situation { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
html:not(.js) .s-situation + .s-situation { margin-top: 64px; }
.s-situation.is-entre .s-situation-texte > *, .s-situation.is-entre .s-app { animation: s-entre .5s var(--s-sortie) both; }
.s-situation.is-entre .s-situation-texte > :nth-child(2) { animation-delay: .04s; }
.s-situation.is-entre .s-situation-texte > :nth-child(3) { animation-delay: .08s; }
.s-situation.is-entre .s-situation-texte > :nth-child(4) { animation-delay: .12s; }
.s-situation.is-entre .s-app { animation-delay: .06s; }
@keyframes s-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.s-situation-ex { font-size: 12px; color: var(--ink-4); letter-spacing: .08em; }
.s-situation-phrase { margin-top: 14px; font: 700 clamp(20px, 1.9vw, 26px)/1.2 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.s-situation-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.s-situation-cols p { font-size: 15px; color: var(--ink-3); }
.s-puces { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.s-puces li { padding: 6px 10px; border-radius: 9px; background: var(--s-voile); border: 1px solid var(--s-filet); font-size: 14px; color: var(--ink-2); }
.s-conseil { margin: 28px 0 24px; padding: 14px 16px; border-radius: 14px; background: var(--accent-wash); border: 1px solid rgba(184, 207, 42, .45); font-size: 15px; color: var(--ink-2); }
.s-conseil b { font-weight: 700; color: var(--ink); }
.s-app-petit .s-app-barre { font-size: 12.5px; }
.s-kpis { display: grid; }
.s-kpi { display: grid; gap: 4px; padding: 16px 18px; border-bottom: 1px solid var(--s-filet); }
.s-kpi-l { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.s-kpi-v { font: 600 clamp(21px, 1.9vw, 26px)/1.05 var(--mono); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.s-kpi-n { font-size: 13px; color: var(--ink-4); }
.s-situation-graphe { padding: 14px 18px 16px; }
.s-graphe-l { font-size: 11px; color: var(--ink-4); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.s-mini { width: 100%; height: 110px; }
.s-mini-axe { stroke: var(--s-filet-fort); stroke-width: 1; }
.s-mini rect { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; }
.s-mini rect.is-neg { fill: var(--loss); opacity: .8; transform-origin: 50% 0; }
.s-situation.is-entre .s-mini rect { animation: s-pousse .6s var(--s-sortie) both; animation-delay: calc(.1s + var(--i, 0) * .03s); }
@keyframes s-pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ─────────────────────────── Une décision (encre) ─────────────────────────── */

.s-bascule { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 28px; border-radius: 14px; background: rgba(242, 240, 232, .06); border: 1px solid var(--s-encre-filet); }
.s-bascule button { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--s-encre-doux); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.s-bascule button:hover { color: #fff; }
.s-bascule button.is-on { background: var(--accent); color: var(--ink); }
.s-decision-panneau { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.s-reglages { display: grid; gap: 18px; }
.s-reglage { padding: 20px; border-radius: 18px; background: rgba(242, 240, 232, .045); border: 1px solid var(--s-encre-filet); }
.s-reglage label { display: block; font-size: 14px; font-weight: 600; color: var(--s-encre-doux); }
.s-reglage-valeurs { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 12px; font: 600 26px/1 var(--mono); letter-spacing: -.04em; color: var(--s-encre-doux); }
.s-reglage-valeurs output { color: var(--accent); }
.s-fleche { font-size: 20px; color: var(--s-encre-doux); }
.s-reglage-aide { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--s-encre-doux); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--accent) var(--rempli, 50%), rgba(242, 240, 232, .16) var(--rempli, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(242, 240, 232, .16); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--accent); transition: transform .15s var(--s-sortie); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--accent); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.s-effets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 20px; overflow: hidden; background: var(--s-encre-filet); border: 1px solid var(--s-encre-filet); }
.s-effet { display: grid; gap: 6px; padding: 18px 20px 16px; background: var(--ink); transition: background-color .4s ease; }
.s-effet:first-child { grid-column: 1 / -1; }
.s-effet-l { font-size: 13.5px; font-weight: 600; color: var(--s-encre-doux); }
.s-effet-v { font: 600 clamp(24px, 2.4vw, 32px)/1 var(--mono); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.s-effet-n { font-size: 13px; color: var(--s-encre-doux); }
.s-effet.is-flash { background: #191A16; }
.s-effet.is-flash .s-effet-v { color: var(--accent); }
.s-effet.is-baisse .s-effet-v { color: #FF8F9C; }
.s-decision-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-size: 13px; color: var(--s-encre-doux); }

/* ─────────────────────── Ce qui entre, ce qui sort ─────────────────────── */

.s-flux { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 8vw, 120px); }
.s-flux-liens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.s-flux-liens path { fill: none; stroke: var(--s-filet-fort); stroke-width: 1.2; transition: stroke .3s ease, stroke-width .3s ease, opacity .3s ease; }
.s-flux-liens path.is-on { stroke: var(--ink); stroke-width: 1.8; }
.s-flux.is-focus .s-flux-liens path:not(.is-on) { opacity: .25; }
.js .s-flux-liens path { stroke-dasharray: var(--long, 400); stroke-dashoffset: var(--long, 400); }
.js .s-flux.is-trace .s-flux-liens path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--s-porte), stroke .3s ease, stroke-width .3s ease, opacity .3s ease; transition-delay: var(--retard, 0s), 0s, 0s, 0s; }
.s-flux-col { position: relative; display: grid; gap: 10px; align-content: start; }
.s-flux-titre { margin-bottom: 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-noeud {
  position: relative; display: flex; align-items: center; min-height: 46px; padding: 10px 16px; border-radius: 13px;
  background: var(--s-voile); border: 1px solid var(--s-filet); font: 600 15px/1.25 var(--sans); color: var(--ink-2); text-align: left;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, transform .25s var(--s-sortie), box-shadow .25s ease;
}
button.s-noeud { cursor: pointer; }
.s-noeud.is-calc { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; cursor: help; }
.s-noeud.is-sortie { background: transparent; border-style: dashed; }
.s-noeud.is-on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 14px 30px -18px rgba(14, 15, 12, .6); }
.s-noeud.is-lie { background: var(--surface); border-color: var(--ink); color: var(--ink); transform: translateX(2px); }
.s-noeud.is-calc.is-lie { box-shadow: inset 4px 0 0 var(--accent); }
.s-flux.is-focus .s-noeud:not(.is-on):not(.is-lie) { opacity: .45; }
.s-flux-def { margin-top: 36px; min-height: 3.2em; max-width: 64ch; font-size: 15px; color: var(--ink-3); }
.s-flux-def b { color: var(--ink); }

/* ───────────────────────── Le plan au défilement ───────────────────────── */

.s-histoire-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); }
.s-etapes { margin: 0; padding: 0; list-style: none; }
.s-etape { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .32; transition: opacity .45s ease; }
.s-etape:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 12vh; }
.s-etape:last-child { min-height: 70vh; }
.s-etape.is-on { opacity: 1; }
html:not(.js) .s-etape { opacity: 1; min-height: 0; padding: 20px 0; }
.s-etape-n { font-size: 12px; color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.s-etape h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
.s-etape > p:not(.s-etape-n) { margin-top: 14px; font-size: 16.5px; color: var(--ink-3); max-width: 34em; }
.s-etape-scene { display: none; }
.s-scene { position: sticky; top: calc(var(--s-entete) + 40px); height: fit-content; }
.s-app-scene { min-height: 440px; }
.s-couches { position: relative; min-height: 400px; }
.s-couche { position: absolute; inset: 0; padding: 22px 24px; opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; transition: opacity .5s var(--s-sortie), transform .5s var(--s-sortie); }
.s-couche.is-on { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .s-couche { position: relative; opacity: 1; transform: none; border-bottom: 1px solid var(--s-filet); }
.s-couche-t { font: 700 18px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 16px; }
.s-couche-n { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-4); }
.s-lignes { display: grid; }
.s-lignes p { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--s-filet); font-size: 14.5px; color: var(--ink-3); }
.s-lignes p:last-child { border-bottom: 0; }
.s-lignes b { font: 600 15.5px/1.2 var(--mono); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-lignes p.is-fort span { color: var(--ink); font-weight: 600; }
.s-lignes p.is-total { border-top: 1.5px solid var(--ink); margin-top: 2px; }
.s-lignes p.is-total span, .s-lignes p.is-total b { color: var(--ink); font-weight: 700; }
.s-lignes.is-compte p { padding: 7px 0; font-size: 13.5px; }
.s-lignes.is-compte b { font-size: 13.5px; }
.s-partage { display: flex; height: 12px; margin-top: 18px; border-radius: 6px; overflow: hidden; background: var(--accent); }
.s-partage svg { width: 100%; height: 100%; }
.s-legende { display: inline-flex; align-items: center; gap: 6px; }
.s-legende::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.s-legende.is-cout::before { background: var(--ink); }
.s-legende.is-marge::before { background: var(--accent); }
.s-barres { display: block; width: 100%; height: 180px; margin-bottom: 12px; }
.s-barres rect { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; }
.s-couche.is-on .s-barres rect { animation: s-pousse .7s var(--s-sortie) both; animation-delay: calc(var(--i, 0) * .04s); }
.s-table { display: grid; margin-bottom: 14px; }
.s-table-l { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr .8fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--s-filet); font-size: 14px; color: var(--ink-3); }
.s-table-l > :not(:first-child) { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.s-table-l b { color: var(--ink); font-weight: 600; }
.s-table-l.is-tete { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding-top: 0; }
.s-table-l.is-tete > * { font-family: var(--mono); font-size: 11px; }
.s-recit { font: 500 19px/1.55 var(--sans); color: var(--ink-2); }
.s-recit b { font-family: var(--mono); font-weight: 600; font-size: .92em; letter-spacing: -.02em; color: var(--ink); background: linear-gradient(to top, rgba(214, 240, 52, .75) 32%, transparent 32%); }
.s-recit.is-second { margin-top: 18px; font-size: 16px; color: var(--ink-3); }
.s-couche-treso { margin-top: 16px; }
.s-couche-treso .s-mono { font-size: 11.5px; color: var(--ink-4); margin-bottom: 6px; }
.s-couche-treso .s-courbe { height: 60px; }
.s-levier { padding: 16px 18px; border-radius: 14px; background: var(--ink); color: #fff; margin-bottom: 14px; }
.s-levier p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.s-levier b { font-family: var(--mono); color: var(--accent); }
.s-levier-piste { position: relative; height: 4px; margin-top: 16px; border-radius: 4px; background: rgba(242, 240, 232, .16); }
.s-levier-piste i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: 4px; background: var(--accent); transition: width 1.1s var(--s-porte) .2s; }
.s-couche.is-on .s-levier-piste i { width: 72%; }
.s-levier-piste i::after { content: ''; position: absolute; right: -9px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); }
.s-scene-points { display: flex; gap: 6px; justify-content: center; margin: 18px 0 0; padding: 0; list-style: none; }
.s-scene-points li { width: 6px; height: 6px; border-radius: 3px; background: var(--s-filet-fort); transition: width .35s var(--s-sortie), background-color .3s ease; }
.s-scene-points li.is-on { width: 22px; background: var(--ink); }

/* ─────────────────────── Du concret à la langue des comptes ─────────────────────── */

.s-traduction { border-top: 1px solid var(--s-filet-fort); }
.s-traduction-tete { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); padding: 14px 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--s-filet); }
.s-traduction-tete span:last-child { grid-column: 3; }
.s-traduction-l { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; padding: 22px 0; border-bottom: 1px solid var(--s-filet); }
.s-dit { font: 600 clamp(18px, 1.6vw, 22px)/1.35 var(--display); letter-spacing: -.015em; color: var(--ink); }
.s-traduction-fleche { position: relative; height: 1px; background: var(--s-filet-fort); margin: 0 14px; }
.s-traduction-fleche::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--ink-4); border-right: 1px solid var(--ink-4); transform: rotate(45deg); }
.s-traduction-l:hover .s-traduction-fleche { background: var(--ink); }
.s-devient { display: grid; gap: 4px; }
.s-devient b { font: 600 13px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.s-devient span { font-size: 15px; color: var(--ink-3); }
.s-traduction-fin { margin-top: 36px; max-width: 58ch; font: 600 clamp(19px, 1.7vw, 23px)/1.45 var(--display); letter-spacing: -.015em; color: var(--ink); }
.s-terme { font-style: normal; cursor: help; background: linear-gradient(to top, rgba(214, 240, 52, .7) 30%, transparent 30%); border-radius: 2px; }
.s-bulle {
  position: fixed; z-index: 90; left: 0; top: 0; max-width: 300px; padding: 11px 13px 12px; border-radius: 12px; pointer-events: none;
  background: var(--ink); color: rgba(242, 240, 232, .9); font: 400 13.5px/1.5 var(--sans); box-shadow: 0 18px 40px -18px rgba(14, 15, 12, .6);
  opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
}
.s-bulle.is-on { opacity: 1; transform: none; }

/* ─────────────────────────── Comparatif ─────────────────────────── */

.s-compare-court { border-top: 1px solid var(--s-filet-fort); margin-bottom: 28px; }
.s-compare-l { display: grid; grid-template-columns: minmax(150px, .9fr) repeat(4, minmax(0, 1fr)); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--s-filet); font-size: 14.5px; color: var(--ink-3); }
.s-compare-l > [role="rowheader"] { font-weight: 600; color: var(--ink); }
.s-compare-l.is-tete { font: 500 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding: 14px 0; }
.s-compare-l .is-nous { color: var(--ink); font-weight: 600; }
.s-compare-l.is-tete .is-nous { color: var(--ink); }
.s-compare-l.is-tete .is-nous::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1px rgba(14, 15, 12, .15); }

/* ─────────────────────────── Deux publics ─────────────────────────── */

.s-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.s-bloc { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3vw, 40px); border-radius: 24px; background: var(--s-voile); border: 1px solid var(--s-filet); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-bloc:hover { transform: translateY(-2px); box-shadow: var(--s-ombre-douce); }
.s-bloc h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.s-bloc p { color: var(--ink-3); }
.s-bloc .s-lien-fleche { margin-top: auto; padding-top: 8px; }
.s-bloc-n { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-bloc.is-encre { background: var(--ink); border-color: var(--ink); color: var(--s-encre-texte); }
.s-bloc.is-encre h3 { color: #fff; }
.s-bloc.is-encre p { color: var(--s-encre-doux); }
.s-bloc.is-encre .s-bloc-n { color: var(--s-encre-doux); }
.s-bloc.is-encre .s-lien-fleche { color: var(--accent); background-image: linear-gradient(to top, var(--accent) 2px, transparent 2px); }

/* ─────────────────────────── Témoignages : l'attente ─────────────────────────── */

.s-attente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; padding: clamp(28px, 4vw, 48px); border-radius: 24px; border: 1px dashed var(--s-filet-fort); }
.s-attente h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.s-attente p { color: var(--ink-3); }
.s-attente p + p { margin-top: 16px; }

/* ─────────────────────────── Prix ─────────────────────────── */

.s-prix-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--s-filet-fort); margin-bottom: 36px; }
.s-prix { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--s-filet); }
.s-prix + .s-prix { padding-left: 32px; border-left: 1px solid var(--s-filet); }
.s-prix-v { display: flex; align-items: baseline; gap: 10px; }
.s-prix-v b { font: 800 clamp(46px, 4.8vw, 72px)/.9 var(--display); letter-spacing: -.05em; }
.s-prix-v span { font: 500 15px/1 var(--mono); color: var(--ink-4); }
.s-prix-pour { margin: 16px 0 8px; font: 700 20px/1.3 var(--display); letter-spacing: -.015em; }
/* Ce que coûte un founder, dans une structure qui en suit cinquante. */
.s-prix-exemple { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-wash, rgba(214, 240, 52, .18)); font-size: 15px; line-height: 1.45; }
.s-prix-exemple b { font-weight: 700; }
.s-offre-structure { display: grid; gap: 28px; }
.s-prix > p:last-child { color: var(--ink-3); max-width: 34em; }

/* ─────────────────────────── L'appel final ─────────────────────────── */

.s-final { background: var(--ink); color: var(--s-encre-texte); overflow: hidden; }
.s-final::after { content: ''; position: absolute; right: -8%; top: -30%; width: 46vw; height: 46vw; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(214, 240, 52, .14), transparent 70%); }
.s-final-in { position: relative; z-index: 1; max-width: 880px; }
.s-final h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; }
.s-final p { margin: 18px 0 28px; font-size: clamp(16px, 1.2vw, 18px); color: var(--s-encre-doux); max-width: 40em; }

/* ─────────────────────────── Pied de page ─────────────────────────── */

.s-pied { padding: 64px 0 32px; background: var(--paper); border-top: 1px solid var(--s-filet); }
.s-pied-in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.s-pied-marque p { margin-top: 16px; max-width: 30ch; font-size: 14.5px; color: var(--ink-3); }
.s-pied-marque .s-pied-fr { font-size: 11.5px; color: var(--ink-4); letter-spacing: .04em; max-width: none; }
.s-pied-col { display: grid; gap: 10px; align-content: start; font-size: 14.5px; }
.s-pied-col a { color: var(--ink-3); text-decoration: none; }
.s-pied-col a:hover { color: var(--ink); }
.s-pied-titre { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.s-pied-bas { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--s-filet); font-size: 13px; color: var(--ink-4); }

/* ═══════════════════════════ Pages intérieures ═══════════════════════════ */

.s-page-tete { padding: clamp(36px, 5vw, 76px) 0 clamp(32px, 4vw, 56px); }
.s-page-tete h1 { max-width: 20ch; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.036em; }
.s-page-tete .s-chapo { margin-top: 22px; }
.s-page-tete .s-actions { margin-top: 32px; }

/* Solution : une colonne d'index à gauche, dix modules à droite. */
.s-solution { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-bottom: var(--s-section); }
.s-index { position: sticky; top: calc(var(--s-entete) + 32px); align-self: start; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.s-index a { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-size: 14.5px; color: var(--ink-3); transition: background-color .2s ease, color .2s ease; }
.s-index a .s-mono { font-size: 11px; color: var(--ink-4); }
.s-index a:hover { color: var(--ink); background: rgba(14, 15, 12, .04); }
.s-index a.is-on { color: var(--ink); background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--s-filet); }
.s-module { padding: 0 0 clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--s-entete) + 24px); }
.s-module + .s-module { padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--s-filet); }
.s-module-n { font-size: 12px; color: var(--ink-4); letter-spacing: .1em; margin-bottom: 12px; }
.s-module h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; }
.s-module > .s-chapo { margin-top: 14px; }
.s-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 32px; border-radius: 20px; overflow: hidden; background: var(--s-filet); border: 1px solid var(--s-filet); }
.s-trois > div { padding: 22px 22px 24px; background: var(--s-voile-fort); }
.s-trois > div:last-child { background: var(--ink); color: var(--s-encre-texte); }
.s-trois h3 { font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }
.s-trois > div:last-child h3 { color: var(--accent); }
.s-trois ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-trois li { position: relative; padding-left: 16px; font-size: 15px; color: var(--ink-2); }
.s-trois li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--ink-5); }
.s-trois .s-question { font: 600 19px/1.4 var(--display); letter-spacing: -.01em; color: #fff; }
.s-module-exemple { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.s-module-exemple b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* Comparatif complet. */
.s-tableau-envel { overflow-x: auto; margin: 0 calc(-1 * var(--s-gouttiere)); padding: 0 var(--s-gouttiere); }
.s-tableau { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 14.5px; }
.s-tableau th, .s-tableau td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--s-filet); }
.s-tableau thead th { position: sticky; top: var(--s-entete); z-index: 2; background: var(--paper); font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--s-filet-fort); }
.s-tableau tbody th { width: 17%; font-weight: 600; color: var(--ink); }
.s-tableau td { color: var(--ink-3); }
.s-tableau .is-nous { background: rgba(255, 255, 255, .6); color: var(--ink); font-weight: 500; }
.s-tableau thead .is-nous { background: var(--paper); color: var(--ink); }
.s-tableau thead .is-nous::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1px rgba(14, 15, 12, .15); }
.s-cartes-compare { display: none; }
.s-alternatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.s-alternative { padding: 28px; border-radius: 22px; background: var(--s-voile); border: 1px solid var(--s-filet); }
.s-alternative h3 { font-size: 22px; }
.s-alternative dl { margin: 16px 0 0; display: grid; gap: 12px; }
.s-alternative dt { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-alternative dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.s-alternative.is-nous { background: var(--ink); border-color: var(--ink); color: var(--s-encre-texte); }
.s-alternative.is-nous h3 { color: #fff; }
.s-alternative.is-nous dt { color: var(--accent); }
.s-alternative.is-nous dd { color: var(--s-encre-doux); }

/* Tarifs. */
.s-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.s-offre { padding: 36px 40px 40px 0; }
.s-offre + .s-offre { padding: 36px 0 40px 40px; border-left: 1px solid var(--s-filet); }
.s-offre .s-prix-v b { font-size: clamp(64px, 7vw, 104px); }
.s-offre-nom { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 18px; }
.s-inclus { margin: 28px 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--s-filet); }
.s-inclus li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--s-filet); }
.s-inclus b { font-weight: 600; font-size: 15px; }
.s-inclus span { grid-column: 1; font-size: 14px; color: var(--ink-4); }
.s-statut { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 9px; border-radius: 999px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.s-statut.is-disponible { background: var(--ink); color: var(--accent); }
.s-statut.is-a-venir { border: 1px dashed var(--ink-5); color: var(--ink-4); }
.s-faq { max-width: 820px; border-top: 1px solid var(--s-filet-fort); }
.s-faq details { border-bottom: 1px solid var(--s-filet); }
.s-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 700 19px/1.35 var(--display); letter-spacing: -.01em; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: '+'; font: 400 24px/1 var(--mono); color: var(--ink-4); transition: transform .25s var(--s-sortie); }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq details p { padding: 0 0 22px; max-width: 64ch; color: var(--ink-3); }
.s-avertissement { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 14px 16px; border-radius: 14px; background: var(--warn-wash); color: var(--warn); font-size: 14px; }

/* Incubateurs. */
.s-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-carte { padding: 26px; border-radius: 20px; background: var(--s-voile); border: 1px solid var(--s-filet); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-carte:hover { transform: translateY(-2px); box-shadow: var(--s-ombre-douce); }
.s-carte h3 { font-size: 20px; line-height: 1.2; margin-bottom: 10px; }
.s-carte p { color: var(--ink-3); font-size: 15px; }
.s-carte .s-statut { display: inline-block; margin-bottom: 14px; }

/* Cas d'usage : une situation, les gestes, ce qu'on lit. */
.s-cas-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.s-cas { display: grid; align-content: start; gap: 14px; padding: 28px; border-radius: 22px; background: var(--s-voile); border: 1px solid var(--s-filet); scroll-margin-top: calc(var(--s-entete) + 16px); }
.s-cas-tag { display: flex; align-items: center; gap: 10px; font: 600 13px/1.2 var(--sans); color: var(--ink-3); }
.s-cas-tag .s-mono { font-size: 12px; letter-spacing: .1em; color: var(--ink-4); }
.s-cas h3 { font-size: 22px; line-height: 1.2; }
.s-cas-situation { color: var(--ink-2); font-size: 15.5px; }
.s-cas-corps { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.s-cas-corps > div { padding: 16px; border-radius: 14px; background: rgba(14, 15, 12, .03); }
.s-cas-corps > div:last-child { background: var(--accent-wash); }
.s-cas-corps h4 { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 8px; }
.s-cas-corps ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.s-cas-corps li, .s-cas-corps p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1100px) { .s-cas-corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .s-cas-liste { grid-template-columns: minmax(0, 1fr); } }

/* Témoignages. */
.s-temoignages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.s-temoin { display: grid; gap: 20px; padding: 28px; border-radius: 22px; border: 1px dashed var(--s-filet-fort); background: transparent; }
.s-temoin-tete { display: flex; gap: 14px; align-items: center; }
.s-temoin-photo { width: 48px; height: 48px; border-radius: 50%; background: repeating-linear-gradient(135deg, rgba(14, 15, 12, .06) 0 6px, transparent 6px 12px); border: 1px dashed var(--s-filet-fort); }
.s-temoin-qui b { display: block; font-weight: 600; color: var(--ink-4); }
.s-temoin-qui span { font-size: 13.5px; color: var(--ink-5); }
.s-temoin-citation { font: 600 20px/1.4 var(--display); color: var(--ink-4); }
.s-temoin-av { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s-temoin-av div { padding: 14px; border-radius: 14px; background: rgba(14, 15, 12, .03); }
.s-temoin-av h3 { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.s-temoin-av p { font-size: 14px; color: var(--ink-5); }

/* Pages légales. */
.s-texte { max-width: 760px; padding-bottom: var(--s-section); }
.s-texte h2 { font-size: 24px; margin: 44px 0 12px; }
.s-texte p, .s-texte li { color: var(--ink-2); font-size: 16px; }
.s-texte p + p { margin-top: 12px; }
.s-texte ul { padding-left: 20px; }
.s-a-completer { padding: 1px 6px; border-radius: 6px; background: var(--warn-wash); color: var(--warn); font-family: var(--mono); font-size: .88em; }

/* Commun aux pages intérieures. */
.s-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-section.is-sans-haut { padding-top: 0; }
.s-section.is-sans-haut::before { display: none; }
.s-tableau .s-sr { position: absolute; }

/* Comparatif sur téléphone : une carte par solution. */
.s-carte-compare { border-radius: 18px; background: var(--s-voile); border: 1px solid var(--s-filet); overflow: hidden; }
.s-carte-compare[open] { background: var(--s-voile-fort); box-shadow: var(--s-ombre-douce); }
.s-carte-compare summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.s-carte-compare summary::-webkit-details-marker { display: none; }
.s-carte-compare summary::after { content: '+'; font: 400 22px/1 var(--mono); color: var(--ink-4); transition: transform .25s var(--s-sortie); }
.s-carte-compare[open] summary::after { transform: rotate(45deg); }
.s-carte-compare dl { margin: 0; padding: 0 18px 8px; }
.s-carte-compare dl > div { padding: 12px 0; border-top: 1px solid var(--s-filet); }
.s-carte-compare dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.s-carte-compare dd { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }

/* Tarifs : compléments. */
.s-offre-resume { max-width: 34em; color: var(--ink-3); }
.s-note-offres { margin-top: 20px; font-size: 14px; color: var(--ink-4); }
.s-note-offres::before { content: ''; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: middle; border-top: 1px dashed var(--ink-5); }

/* Incubateurs : ce qui arrive. */
.s-carte.is-avenir { background: transparent; border-style: dashed; border-color: var(--s-filet-fort); }
.s-carte.is-avenir:hover { transform: none; box-shadow: none; }
.s-carte.is-avenir h3 { color: var(--ink-2); }

/* Témoignages : compléments. */
.s-temoin-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--ink-4); }
.s-temoin-meta .s-mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.s-temoin blockquote { margin: 0; }
.s-temoin.is-publie { border: 1px solid var(--s-filet); border-style: solid; background: var(--s-voile-fort); }
.s-temoin.is-publie .s-temoin-qui b { color: var(--ink); }
.s-temoin.is-publie .s-temoin-qui span, .s-temoin.is-publie .s-temoin-av p { color: var(--ink-3); }
.s-temoin.is-publie .s-temoin-citation { color: var(--ink); }
img.s-temoin-photo { object-fit: cover; border: 0; }
.s-temoin-photo.is-initiales { display: grid; place-items: center; background: var(--ink); color: var(--accent); border: 0; font: 600 15px/1 var(--mono); }
.s-procede { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--s-filet-fort); }
.s-procede li { padding: 24px 28px 8px 0; }
.s-procede li + li { padding-left: 28px; border-left: 1px solid var(--s-filet); }
.s-procede .s-mono { font-size: 12px; color: var(--ink-4); letter-spacing: .1em; }
.s-procede h3 { margin: 10px 0 8px; font-size: 21px; line-height: 1.2; }
.s-procede p { color: var(--ink-3); font-size: 15px; max-width: 32em; }

/* À propos. */
.s-texte-duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px 72px; align-items: start; }
.s-texte-duo h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
.s-texte-flux { display: grid; gap: 16px; padding-top: 6px; font-size: 17px; color: var(--ink-2); max-width: 60ch; }
.s-texte-flux a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.s-principes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--s-filet-fort); }
.s-principes article { padding: 24px 24px 8px 0; }
.s-principes article + article { padding-left: 24px; border-left: 1px solid var(--s-filet); }
.s-principes .s-mono { font-size: 12px; color: var(--ink-4); letter-spacing: .1em; }
.s-principes h3 { margin: 10px 0 8px; font-size: 20px; line-height: 1.2; }
.s-principes p { color: var(--ink-3); font-size: 15px; }

/* Pages légales. */
.s-page-tete.is-legal h1 { font-size: clamp(34px, 3.6vw, 52px); }
.s-legal-maj { margin-top: 14px; font-size: 12px; letter-spacing: .06em; color: var(--ink-4); }
.s-projet { margin-top: 24px; max-width: 62ch; padding: 12px 16px; border-radius: 12px; background: var(--warn-wash); color: var(--warn); font-size: 14.5px; }
.s-legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.s-legal-sommaire ol { position: sticky; top: calc(var(--s-entete) + 32px); margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: art; }
.s-legal-sommaire li { counter-increment: art; }
.s-legal-sommaire a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 14px; color: var(--ink-3); text-decoration: none; }
.s-legal-sommaire a::before { content: counter(art, decimal-leading-zero); font: 500 11px/1.9 var(--mono); color: var(--ink-4); }
.s-legal-sommaire a:hover { color: var(--ink); background: rgba(14, 15, 12, .04); }
.s-texte section { scroll-margin-top: calc(var(--s-entete) + 24px); }
.s-texte section:first-child h2 { margin-top: 0; }
.s-texte h2 { display: flex; align-items: baseline; gap: 14px; }
.s-texte h2 .s-mono { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--ink-4); }
.s-texte ul { margin: 12px 0 0; display: grid; gap: 8px; }
.s-texte ul + p { margin-top: 12px; }
.s-texte a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.s-legal-table { margin: 16px 0; overflow-x: auto; border: 1px solid var(--s-filet); border-radius: 14px; }
.s-legal-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.s-legal-table th, .s-legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--s-filet); }
.s-legal-table tr:last-child td { border-bottom: 0; }
.s-legal-table th { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); background: rgba(14, 15, 12, .025); }
.s-legal-table td.s-mono { font-size: 13px; white-space: nowrap; color: var(--ink); }

/* 404. */
.s-introuvable { padding: clamp(64px, 10vw, 140px) 0 var(--s-section); }
.s-introuvable-code { font-size: 13px; letter-spacing: .14em; color: var(--ink-4); margin-bottom: 18px; }
.s-introuvable h1 { max-width: 18ch; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.s-introuvable .s-chapo { margin-top: 18px; }
.s-introuvable-liens { margin: 32px 0 36px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; }

/* ═══════════════════════════════ Écrans ═══════════════════════════════ */

@media (max-width: 1100px) {
  .s-heros-in { grid-template-columns: minmax(0, 1fr); }
  .s-heros-demo { max-width: 560px; }
  .s-decision-panneau { grid-template-columns: minmax(0, 1fr); }
  .s-pied-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .s-situation { grid-template-columns: minmax(0, 1fr); }
  .s-tete.is-ligne { grid-template-columns: minmax(0, 1fr); }
  .s-flux { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s-flux-liens { display: none; }
  .s-flux-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-flux-titre { grid-column: 1 / -1; }
  /* Sur un écran étroit, chaque étape porte sa scène : pas de colonne collante. */
  .s-histoire-grille { grid-template-columns: minmax(0, 1fr); }
  .s-scene { display: none; }
  .s-etape { min-height: 0 !important; opacity: 1; padding: 28px 0; border-bottom: 1px solid var(--s-filet); justify-content: flex-start; }
  .s-etape:first-child { padding-top: 0; }
  .s-etape-scene { display: block; margin-top: 20px; }
  .s-etape-scene .s-couche { position: relative; opacity: 1; transform: none; padding: 18px; }
  .s-etape-scene .s-app { box-shadow: var(--s-ombre-douce); }
  .s-compare-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .s-compare-l > [role="rowheader"] { grid-column: 1 / -1; }
  .s-compare-l.is-tete { display: none; }
  .s-compare-l [role="cell"]::before { content: attr(data-col); display: block; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
  .s-deux, .s-attente, .s-prix-duo, .s-offres, .s-alternatives, .s-grille-3, .s-temoignages, .s-texte-duo { grid-template-columns: minmax(0, 1fr); }
  .s-principes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-principes article:nth-child(3) { padding-left: 0; border-left: 0; }
  .s-procede { grid-template-columns: minmax(0, 1fr); }
  .s-procede li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--s-filet); }
  .s-legal { grid-template-columns: minmax(0, 1fr); }
  .s-legal-sommaire { display: none; }
  .s-prix + .s-prix, .s-offre + .s-offre { padding-left: 0; border-left: 0; }
  .s-offre { padding-right: 0; }
  .s-solution { grid-template-columns: minmax(0, 1fr); }
  .s-index { position: sticky; top: var(--s-entete); z-index: 5; display: flex; overflow-x: auto; gap: 4px; margin: 0 calc(-1 * var(--s-gouttiere)); padding: 10px var(--s-gouttiere); background: rgba(242, 240, 232, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--s-filet); scrollbar-width: none; }
  .s-index::-webkit-scrollbar { display: none; }
  .s-index a { white-space: nowrap; padding: 7px 10px; font-size: 13.5px; }
  .s-trois { grid-template-columns: minmax(0, 1fr); }
  .s-tableau-envel { display: none; }
  .s-cartes-compare { display: grid; gap: 12px; }
}
@media (max-width: 760px) {
  .s-heros-titre { font-size: clamp(34px, 9vw, 44px); }
  .s-app-heros .s-chaine { padding-left: 34px; }
  .s-maillon-v { font-size: 17px; }
  .s-pas output { min-width: 70px; font-size: 16px; }
  .s-situation-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s-effets { grid-template-columns: minmax(0, 1fr); }
  .s-traduction-tete { display: none; }
  .s-traduction-l { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .s-traduction-fleche { display: none; }
  .s-devient { padding-left: 14px; border-left: 2px solid var(--accent); }
  .s-pied-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-pied-bas { flex-direction: column; gap: 6px; }
  .s-temoin-av { grid-template-columns: minmax(0, 1fr); }
  .s-principes { grid-template-columns: minmax(0, 1fr); }
  .s-principes article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--s-filet); }
  .s-table-l { grid-template-columns: 1fr 1fr 1fr; }
  .s-table-l > :last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .s-revele { opacity: 1; transform: none; }
  .js .s-flux-liens path { stroke-dashoffset: 0; }
}
.s-partage rect { fill: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   Refonte du 29 septembre : héros, trois pièges, moteur vivant, fiscalité,
   maturité, témoignages, incubateurs, solution détaillée. Même maison :
   ivoire, encre, un seul vert acide, chiffres en chasse fixe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── Le badge « vivant » ───────────── */
.s-vivant {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 8px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--s-filet-fort); box-shadow: 0 6px 18px -14px rgba(14, 15, 12, .4);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.s-vivant-point { width: 8px; height: 8px; border-radius: 50%; background: #8FD400; box-shadow: 0 0 0 0 rgba(143, 212, 0, .55); animation: s-pouls 2.2s ease-out infinite; }
@keyframes s-pouls { 0% { box-shadow: 0 0 0 0 rgba(143, 212, 0, .55); } 70% { box-shadow: 0 0 0 8px rgba(143, 212, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 212, 0, 0); } }

/* ───────────── Héros ───────────── */
/* Le titre part à la hauteur du haut de la démo, pas du milieu. */
.s-heros-in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: start; }
.s-heros-titre { font-size: clamp(34px, 3.6vw, 54px); line-height: 1; letter-spacing: -.04em; }
.s-heros-chapo { max-width: 34em; }

/* Le moteur, sur fond d'encre. */
.s-app.is-sombre {
  background: var(--ink); color: var(--s-encre-texte); border-color: rgba(242, 240, 232, .08);
  box-shadow: 0 0 0 1px rgba(214, 240, 52, .10), 0 40px 90px -42px rgba(150, 175, 20, .65), 0 18px 40px -24px rgba(14, 15, 12, .6);
}
.is-sombre .s-app-barre { background: transparent; border-bottom-color: var(--s-encre-filet); color: var(--s-encre-doux); padding: 13px 16px; }
.is-sombre .s-app-pastille { background: var(--accent); }
.is-sombre .s-app-pastille::after { background: var(--ink); }
.s-app-titre { white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-encre-texte); }
.is-sombre .s-exemple { color: var(--s-encre-doux); background: rgba(242, 240, 232, .06); border-color: var(--s-encre-filet); }
.s-chaine-etape { padding: 12px 18px 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-encre-doux); }
.s-chaine.is-entrees { padding-bottom: 4px; }
/* Le haut des lettres du titre, pas celui de sa boîte, s'aligne sur la démo. */
@media (min-width: 961px) { .s-heros-texte { padding-top: 12px; } }
.is-sombre .s-chaine::before { background: var(--s-encre-filet); }
.is-sombre .s-maillon { border-bottom-color: var(--s-encre-filet); }
.is-sombre .s-maillon-l { color: var(--s-encre-texte); }
.is-sombre .s-maillon-f { color: rgba(242, 240, 232, .46); }
.is-sombre .s-maillon-v { color: #fff; }
.is-sombre .s-maillon-point { background: var(--ink); border-color: rgba(242, 240, 232, .35); }
.is-sombre .s-maillon.is-entree .s-maillon-point { background: var(--accent); border-color: var(--accent); }
.is-sombre .s-maillon.is-accent .s-maillon-v { color: var(--accent); }
.is-sombre .s-maillon.is-flash .s-maillon-v { background: linear-gradient(to top, rgba(214, 240, 52, .28) 34%, transparent 34%); }
.is-sombre .s-pas { background: rgba(242, 240, 232, .05); border-color: var(--s-encre-filet); }
.is-sombre .s-pas button { background: rgba(242, 240, 232, .08); color: var(--s-encre-texte); }
.is-sombre .s-pas button:hover { background: var(--accent); color: var(--ink); }
.is-sombre .s-pas output { color: var(--accent); }
.is-sombre .s-courbe-trait { stroke: var(--accent); }
.is-sombre .s-courbe-zero { stroke: rgba(242, 240, 232, .3); }
.is-sombre .s-app-pied { border-top-color: var(--s-encre-filet); color: rgba(242, 240, 232, .5); }

/* ───────────── 01 · Les trois pièges ───────────── */
.s-pieges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.s-piege { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: 24px; border: 1px solid var(--s-filet); background: var(--surface); }
.s-piege h3 { font-size: 19px; line-height: 1.2; }
.s-piege-tag { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.s-piege-icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.s-piege-logo { width: 26px; height: 26px; flex: none; }
.s-piege-texte { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.s-piege.is-excel { background: #FBF4F2; border-color: rgba(196, 20, 47, .18); }
.s-piege.is-excel .s-piege-tag, .s-piege.is-excel h3 { color: #8E1024; }
.s-piege.is-excel .s-piege-texte { color: #9A3A45; }
.s-piege.is-ia .s-piege-tag { color: var(--ink-3); }
.s-piege.is-cabinet { background: var(--ink); border-color: var(--ink); color: var(--s-encre-texte); }
.s-piege.is-cabinet h3 { color: #fff; }
.s-piege.is-cabinet .s-piege-tag { color: rgba(242, 240, 232, .6); }
.s-piege.is-cabinet .s-piege-texte { color: var(--s-encre-doux); }
.s-piege.is-cabinet .s-fichiers { flex: 1; display: flex; flex-direction: column; }
.s-fichiers-etat { margin-top: auto; padding-top: 12px; font-size: 11px; color: #F5B83D; }

/* Un tableur comme on en reçoit. */
.s-tableur { border-radius: 14px; background: var(--surface); border: 1px solid rgba(196, 20, 47, .16); overflow: hidden; }
.s-tableur-onglets { display: flex; overflow: hidden; white-space: nowrap; background: #F3F1EA; border-bottom: 1px solid var(--s-filet); font-size: 10.5px; }
.s-tableur-onglets span { padding: 6px 9px; border-right: 1px solid var(--s-filet); color: var(--ink-4); }
.s-tableur-onglets span.is-on { background: var(--surface); color: var(--ink); font-weight: 600; }
.s-tableur-l { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; grid-template-areas: 'c lib v' 'c f f'; column-gap: 10px; row-gap: 2px; padding: 7px 12px; border-bottom: 1px solid var(--s-filet); }
.s-tableur-c { grid-area: c; font-size: 10.5px; color: var(--ink-4); padding-top: 2px; }
.s-tableur-lib { grid-area: lib; font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-tableur-v { grid-area: v; font-size: 12.5px; text-align: right; color: var(--ink); white-space: nowrap; }
.s-tableur-f { grid-area: f; min-width: 0; font: 400 10.5px/1.45 var(--mono); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-tableur-note { grid-column: 2 / -1; font-size: 11px; font-weight: 600; color: var(--warn); }
.s-tableur-l.is-erreur .s-tableur-v { color: var(--loss); }
.s-tableur-l.is-faux .s-tableur-v { color: var(--warn); }
.s-tableur-etat { padding: 7px 12px; background: var(--loss-wash); color: var(--loss); font-size: 11px; }

/* Une conversation avec une IA généraliste. */
.s-chat { display: grid; gap: 10px; }
.s-chat-bulle { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.s-chat-bulle > .s-mono { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-chat-bulle.is-toi { margin-left: 22px; background: var(--surface-2); border: 1px solid var(--s-filet); }
.s-chat-bulle.is-ia { margin-right: 22px; background: #F1F0EA; }
.s-chat-bulle b { font-family: var(--mono); font-weight: 600; }
.s-angles-morts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-angles-morts li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.s-angles-morts li::before { content: '✕'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--loss); }
.s-angles-morts b { color: var(--ink); }
.s-piege-verdict { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: var(--accent-wash); border: 1px solid rgba(184, 207, 42, .45); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.s-piege-verdict b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* Le document figé. */
.s-fichiers { padding: 8px 12px 10px; border-radius: 14px; border: 1px solid var(--s-encre-filet); background: rgba(242, 240, 232, .04); }
.s-fichier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--s-encre-filet); }
.s-fichier-type { padding: 3px 6px; border-radius: 6px; background: rgba(242, 240, 232, .1); font-size: 10px; color: var(--accent); }
.s-fichier-nom { font-size: 12px; color: var(--s-encre-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-fichier-date { font-size: 12px; color: var(--s-encre-doux); white-space: nowrap; }
.s-echange { display: grid; gap: 9px; padding-top: 12px; }
.s-echange p { font-size: 13.5px; line-height: 1.45; color: var(--s-encre-texte); }
.s-echange p > .s-mono { margin-right: 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-encre-doux); }
.s-echange p.is-attente { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #F5B83D; }
.s-horloge { position: relative; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.s-horloge::before { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 1.5px; height: 4.5px; background: currentColor; }

/* ───────────── 02 · La solution ───────────── */
.s-atouts { margin: 0 0 32px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--s-encre-filet); border: 1px solid var(--s-encre-filet); }
.s-atouts li { display: grid; align-content: start; gap: 6px; padding: 16px 18px; background: var(--ink); }
.s-atouts b { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--display); letter-spacing: -.01em; color: #fff; }
.s-atouts b::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.s-atouts span { font-size: 13.5px; line-height: 1.5; color: var(--s-encre-doux); }
.s-livrables { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--s-encre-filet); }
.s-livrables-titre { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-encre-doux); }
.s-livrables ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.s-livrables li { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--s-encre-filet); font-size: 14px; color: var(--s-encre-texte); }
.s-livrables li .s-mono { margin-left: 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-encre-doux); }
.s-livrables li.is-fort { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.s-livrables li.is-fort .s-mono { color: var(--ink); }

/* ───────────── 03 · La fiscalité codée en dur ───────────── */
.s-fisc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.s-fisc h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.036em; }
.s-fisc-chapo { margin-top: 18px; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.55; color: var(--ink-3); }
.s-fisc-chapo b { font-weight: 700; color: var(--ink); }
.s-fisc-note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 40em; }
.s-fisc-texte .s-petit-titre { margin-top: 28px; }
.s-prevert { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.s-prevert li { padding: 4px 8px; border-radius: 7px; background: rgba(14, 15, 12, .035); border: 1px solid var(--s-filet); font: 500 11.5px/1.35 var(--mono); color: var(--ink-3); }
.s-fisc-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.s-fisc-carte { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--s-filet); box-shadow: var(--s-ombre-douce); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-fisc-carte:hover { transform: translateY(-2px); box-shadow: var(--s-ombre); }
.s-fisc-icone { width: 26px; height: 26px; margin-bottom: 8px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-fisc-carte h3 { font-size: 18px; line-height: 1.2; }
.s-fisc-carte p { font: 400 12.5px/1.55 var(--mono); color: var(--ink-3); }

/* ───────────── 04 · La maturité du projet ───────────── */
.s-situations.is-vertical { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.s-onglets.is-vertical { position: sticky; top: calc(var(--s-entete) + 24px); display: grid; gap: 8px; margin: 0; padding: 0; background: none; border: 0; overflow: visible; }
.s-onglets.is-vertical .s-onglet {
  height: auto; padding: 13px 16px; gap: 14px; align-items: flex-start; text-align: left; white-space: normal;
  border-radius: 16px; background: var(--s-voile); border: 1px solid var(--s-filet); color: var(--ink-3);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s var(--s-sortie);
}
.s-onglets.is-vertical .s-onglet .s-mono { padding-top: 4px; }
.s-onglet-texte { display: grid; gap: 4px; }
.s-onglet-texte b { font: 700 16px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.s-onglet-texte span { font: 400 13px/1.4 var(--sans); color: var(--ink-4); }
.s-onglets.is-vertical .s-onglet:hover:not(.is-on) { background: var(--surface); border-color: var(--s-filet-fort); transform: translateX(2px); }
.s-onglets.is-vertical .s-onglet.is-on { background: var(--ink); border-color: var(--ink); box-shadow: 0 14px 30px -18px rgba(14, 15, 12, .7); }
.s-onglets.is-vertical .s-onglet.is-on .s-onglet-texte b { color: #fff; }
.s-onglets.is-vertical .s-onglet.is-on .s-onglet-texte span { color: var(--s-encre-doux); }
.s-situations.is-vertical .s-situation { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(24px, 3vw, 40px); }
.s-situations.is-vertical .s-situation-phrase { margin-top: 10px; }
.s-situation-texte .s-petit-titre { margin-top: 24px; }
.s-situation-montre { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.s-situations.is-vertical .s-conseil { margin: 22px 0 20px; }

/* ───────────── 05 · Témoignages ───────────── */
.s-tete.is-centre { margin-left: auto; margin-right: auto; text-align: center; }
.s-tete.is-centre h2 { margin: 0 auto; }
.s-mention-illustratif { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--s-filet-fort); font-size: 13px; line-height: 1.45; color: var(--ink-4); text-align: left; }
.s-mention-illustratif .s-mono { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.s-page-tete .s-mention-illustratif { margin-top: 24px; }
.s-avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.s-avis { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--s-filet); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-avis:hover { transform: translateY(-2px); box-shadow: var(--s-ombre-douce); }
.s-avis-etoiles { font-size: 15px; letter-spacing: 3px; color: #7FA314; }
.s-avis-citation { margin: 0; flex: 1; font: italic 400 15px/1.6 var(--sans); color: var(--ink-2); }
.s-avis-qui { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--s-filet); }
.s-avis-initiales { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--ink); color: #fff; font: 600 13px/1 var(--mono); }
.s-avis-qui b { display: block; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.s-avis-qui b + .s-mono { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.s-avis-av { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s-avis-av div { padding: 12px; border-radius: 12px; background: rgba(14, 15, 12, .03); }
.s-avis-av div:last-child { background: var(--accent-wash); }
.s-avis-av h3 { margin-bottom: 6px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-avis-av p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.s-avis-suite { margin-top: 32px; text-align: center; }
.s-avis-groupes { display: grid; gap: clamp(48px, 6vw, 80px); }
.s-avis-groupe-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--s-filet); }
.s-avis-groupe-tete h2 { font-size: clamp(24px, 2.4vw, 32px); }
.s-avis-groupe-tete p { font-size: 15px; color: var(--ink-4); }

/* ───────────── Incubateurs ───────────── */
.s-incub-tete h1 { max-width: 16ch; }
.s-chapo.is-second { margin-top: 14px; font-size: 16px; color: var(--ink-3); }
.s-contrat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--ink); color: var(--s-encre-texte); box-shadow: 0 40px 80px -40px rgba(14, 15, 12, .6); }
.s-contrat-nom { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.s-contrat-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 14px 0 18px; }
.s-contrat-prix b { font: 600 clamp(44px, 4.8vw, 64px)/1 var(--mono); letter-spacing: -.05em; color: #fff; }
.s-contrat-prix span { font-size: 18px; color: var(--s-encre-doux); }
.s-contrat-texte { font-size: 16px; line-height: 1.6; color: var(--s-encre-texte); max-width: 36em; }
.s-contrat-texte b { color: var(--accent); font-weight: 600; }
.s-contrat-inclus { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.s-contrat-inclus li { position: relative; padding: 12px 14px 12px 36px; border-radius: 12px; background: rgba(242, 240, 232, .05); border: 1px solid var(--s-encre-filet); font: 500 13px/1.45 var(--mono); color: var(--s-encre-texte); }
.s-contrat-inclus li::before { content: '✓'; position: absolute; left: 14px; top: 12px; font-weight: 700; color: var(--accent); }
.s-comite { align-self: center; display: grid; gap: 14px; padding: 26px; border-radius: 20px; background: rgba(242, 240, 232, .04); border: 1px solid var(--s-encre-filet); }
.s-comite-titre { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-encre-doux); }
.s-comite-l { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 16px; border-radius: 14px; font: 500 14px/1.5 var(--mono); }
.s-comite-l em { grid-column: 2; font-style: normal; font-size: 13px; opacity: .78; }
.s-comite-l.is-avant { background: rgba(196, 20, 47, .13); border: 1px solid rgba(196, 20, 47, .38); color: #FFB6C0; }
.s-comite-l.is-apres { background: rgba(21, 122, 74, .16); border: 1px solid rgba(21, 122, 74, .45); color: #A4EBC4; }
.s-coach { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.s-coach h2 { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.08; }
.s-coach .s-chapo { margin-top: 18px; }
.s-coach-etapes { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 16px; }
.s-coach-etapes li { counter-increment: etape; position: relative; padding-left: 46px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.s-coach-etapes li::before { content: counter(etape, decimal-leading-zero); position: absolute; left: 0; top: 1px; padding: 6px 7px; border-radius: 8px; background: var(--ink); color: var(--accent); font: 600 11.5px/1 var(--mono); }
.s-coach-etapes b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--ink); }
.s-coach-note { margin-top: 24px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--s-filet-fort); font-size: 13.5px; line-height: 1.5; color: var(--ink-4); }
.s-promo { padding: 28px; }
.s-promo-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--s-filet); }
.s-promo-sur { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.s-promo-nom { margin-top: 6px; font: 700 22px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.s-promo-compte { padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.s-promo-liste { display: grid; gap: 10px; }
.s-promo-l { display: grid; grid-template-columns: auto minmax(0, 1.3fr) auto auto auto; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--s-filet); }
.s-promo-point { width: 9px; height: 9px; border-radius: 50%; background: var(--gain); }
.s-promo-l.is-challenge .s-promo-point { background: #E0A100; }
.s-promo-l.is-alerte .s-promo-point { background: var(--loss); }
.s-promo-qui b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.s-promo-qui > span { font-size: 12.5px; color: var(--ink-4); }
.s-promo-chiffre { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.s-promo-chiffre span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.s-promo-etat { padding: 5px 9px; border-radius: 8px; font-size: 11px; white-space: nowrap; background: var(--gain-wash); color: var(--gain); }
.s-promo-l.is-challenge .s-promo-etat { background: var(--warn-wash); color: var(--warn); }
.s-promo-l.is-alerte .s-promo-etat { background: var(--loss-wash); color: var(--loss); }
.s-promo-acces { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--s-filet); font-size: 13px; color: var(--ink-4); }
.s-promo-acces b { display: block; font-size: 14px; color: var(--ink); }
.s-promo-acces .s-exemple { margin-left: auto; }
.s-promo-bascule { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--ink); flex: none; }
.s-promo-bascule i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.s-grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ───────────── Solution : chapitres et modules repliés ───────────── */
.s-chapitres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.s-chapitres a { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--s-filet); background: var(--s-voile); font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--ink); transition: border-color .2s ease, background-color .2s ease; }
.s-chapitres a .s-mono { font-size: 11px; color: var(--ink-4); }
.s-chapitres a:hover { border-color: var(--ink); background: var(--surface); }
.s-modules { display: grid; gap: 12px; }
.s-modules > .s-module, .s-modules > .s-module + .s-module { padding: 0; border: 1px solid var(--s-filet); border-radius: 18px; background: var(--s-voile); transition: background-color .25s ease, box-shadow .25s ease; }
.s-modules > .s-module[open] { background: var(--s-voile-fort); box-shadow: var(--s-ombre-douce); }
.s-module summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.s-module summary::-webkit-details-marker { display: none; }
.s-module summary::after { content: '+'; font: 400 24px/1 var(--mono); color: var(--ink-4); transition: transform .25s var(--s-sortie); }
.s-module[open] summary::after { transform: rotate(45deg); }
.s-module summary .s-module-n { margin: 0; }
.s-module-tete h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; }
.s-module-q { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.s-modules > .s-module > .s-chapo, .s-modules > .s-module > .s-trois, .s-modules > .s-module > .s-module-exemple { margin-left: 22px; margin-right: 22px; }
.s-modules > .s-module > .s-chapo { margin-top: 0; }
.s-modules > .s-module > :last-child { margin-bottom: 22px; }
.s-modules .s-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.s-trois h4 { margin: 0 0 14px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.s-trois > div:last-child h4 { color: var(--accent); }
.s-trois > div:last-child li { color: var(--s-encre-texte); }

@media (max-width: 1100px) {
  .s-pieges { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .s-situations.is-vertical .s-situation { grid-template-columns: minmax(0, 1fr); }
  .s-avis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .s-heros-in, .s-fisc, .s-contrat, .s-coach { grid-template-columns: minmax(0, 1fr); }
  .s-situations.is-vertical { grid-template-columns: minmax(0, 1fr); }
  .s-onglets.is-vertical { position: static; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--s-gouttiere)); padding: 0 var(--s-gouttiere) 4px; scrollbar-width: none; }
  .s-onglets.is-vertical::-webkit-scrollbar { display: none; }
  .s-onglets.is-vertical .s-onglet { flex: none; width: 230px; }
}
@media (max-width: 700px) {
  .s-avis-grille, .s-grille-4, .s-atouts, .s-fisc-cartes, .s-contrat-inclus, .s-avis-av, .s-modules .s-trois { grid-template-columns: minmax(0, 1fr); }
  .s-piege { padding: 22px 18px; }
  .s-promo { padding: 18px; }
  .s-promo-l { grid-template-columns: auto minmax(0, 1fr) auto; }
  .s-promo-chiffre { display: none; }
  .s-promo-tete { flex-direction: column; }
  .s-module summary { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .s-module summary .s-module-n { display: none; }
  .s-modules > .s-module > .s-chapo, .s-modules > .s-module > .s-trois, .s-modules > .s-module > .s-module-exemple { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 760px) {
  .s-entete-in { gap: 12px; }
  .is-sombre .s-app-barre { flex-wrap: wrap; }
  .s-app-titre { white-space: normal; }
}
@media (max-width: 420px) { .s-entete-actions .s-bouton { padding: 8px 11px; font-size: 13.5px; } }