/* ═══════════════════════════════════════════════════════════════════════════
   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. */
  /* Le « signal » était un bleu électrique, hors de la maison (fil 7f3fcc83,
     2 octobre) : liens, interrupteurs, repères actifs passent à l'encre, et
     leurs fonds clairs au vert lavé. */
  --signal:     #0E0F0C;
  --signal-ink: #0E0F0C;
  --signal-wash:#F2FAC9;

  /* 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: pretty; }
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); }
/* Une étiquette, une précision : le texte de Fynomia, chiffres alignés. */
.s-meta { font-family: var(--sans); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.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 { 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-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; } }
/* Un libellé long (« Demander une démo ») cède la place au court sur un téléphone étroit. */
.s-cta-court { display: none; }
@media (max-width: 400px) { .s-cta-long { display: none; } .s-cta-court { display: inline; } }
@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 { margin-bottom: clamp(24px, 3vw, 40px); }
.s-tete h2, .s-page-tete h1 { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.08; }
.s-tete .s-chapo { margin-top: 12px; }
.s-chapo { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.55; color: var(--ink-3); }
.s-surtitre {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font: 600 15px/1.2 var(--sans); letter-spacing: -.005em; color: var(--ink-2);
}
.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-exemple {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  font: 600 12px/1.2 var(--sans); letter-spacing: 0; 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-heros-chapo { margin-top: 20px; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5; color: var(--ink-2); }
.s-heros .s-actions { margin-top: 26px; }

/* ─────────────────────────── 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-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); }

.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-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 ─────────────────────────── */

@keyframes s-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@keyframes s-pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }

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

/* ───────────────────────── 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: 13px; color: var(--ink-4); letter-spacing: 0; 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); }
.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: 600 12px/1.2 var(--sans); letter-spacing: 0; color: var(--ink-4); padding-top: 0; }
.s-table-l.is-tete > * { font-family: var(--sans); font-size: 12px; }
.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-meta { 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 ─────────────────────── */

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

/* Ce que coûte un entrepreneur, dans une structure qui en suit cinquante. */

/* ─────────────────────────── 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; }
.s-final h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; }
.s-final p { margin: 14px 0 26px; font-size: clamp(16px, 1.2vw, 18px); color: var(--s-encre-doux); }

/* ─────────────────────────── 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; 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; }
.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: 600 12px/1.4 var(--sans); letter-spacing: 0; 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 { font-size: clamp(30px, 3.2vw, 46px); 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-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. */

/* Tarifs. */

.s-statut { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 9px; border-radius: 999px; font: 600 12px/1.2 var(--sans); letter-spacing: 0; 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 { 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; color: var(--ink-3); }

/* 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-meta { font-size: 12px; letter-spacing: 0; 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: 600 12px/1.2 var(--sans); letter-spacing: 0; 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); } }

/* Pages légales. */
.s-texte { 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(--sans); 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; }

/* Comparatif sur téléphone : une carte par solution. */

/* Tarifs : compléments. */

.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); }

/* À propos. */
.s-texte-flux { display: grid; gap: 16px; font-size: 17px; color: var(--ink-2); }
.s-texte-flux.is-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
.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-meta { font-size: 12px; color: var(--ink-4); letter-spacing: 0; }
.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: 0; color: var(--ink-4); }
.s-projet { margin-top: 24px; 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-meta { font-size: 12px; font-weight: 500; letter-spacing: 0; 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: 600 12px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-4); background: rgba(14, 15, 12, .025); }
.s-legal-table td.s-meta { 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 { 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-pied-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  
  
  
  
  /* 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-grille-3, .s-texte-flux.is-deux { 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-legal { grid-template-columns: minmax(0, 1fr); }
  .s-legal-sommaire { display: none; }
  
  
  
  
  
  
  
  
  
}
@media (max-width: 760px) {
  .s-heros-titre { font-size: clamp(34px, 9vw, 44px); }
  .s-pas output { min-width: 70px; font-size: 16px; }
  
  
  
  
  .s-pied-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-pied-bas { flex-direction: column; gap: 6px; }
  .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; }
  
}
.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: 12px; font-weight: 600; letter-spacing: 0; 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); } }

/* ═══════════════════════════════════════════════════════════════════════════
   L'accueil, version du 29 septembre au soir : plus net, plus dense.
   Un titre de section sur une ligne ; des surfaces blanches à filet fin ; des
   bandes de fond alternées plutôt qu'un trait entre les sections ; le même
   vert acide pour dire « ici ».
   ═══════════════════════════════════════════════════════════════════════════ */

.s-accueil .s-section + .s-section::before { content: none; }
.s-section.is-clair { background: var(--surface-2); box-shadow: 0 1px 0 var(--s-filet) inset, 0 -1px 0 var(--s-filet) inset; }
.s-accueil .s-tete h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.06; letter-spacing: -.035em; }
.s-tete h2 .s-ligne { display: block; }

/* ───────────── Héros ───────────── */
.s-heros { position: relative; }
/* Une trame de points, qui s'efface vers les bords. */
.s-heros::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14, 15, 12, .11) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 58% 80% at 74% 42%, #000 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 80% at 74% 42%, #000 18%, transparent 72%);
}
.s-heros-in { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: start; }
.s-heros-titre { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -.042em; }
.s-heros .s-heros-chapo { margin-top: 22px; }
.s-heros .s-actions { margin-top: 30px; }
.s-heros-titre .s-ligne { display: block; white-space: nowrap; }
.s-heros-titre .is-doux { color: var(--ink-4); }

/* 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-exemple { color: var(--s-encre-doux); background: rgba(242, 240, 232, .06); border-color: var(--s-encre-filet); }
.s-chaine-etape { padding: 6px 14px 4px; font-size: 12px; line-height: 1.3; letter-spacing: 0; color: var(--s-encre-doux); }
/* La démo tient à la hauteur du bloc titre, chapeau et boutons. */
@media (min-width: 1101px) {
  .s-heros-in { align-items: stretch; }
  /* Le titre en haut, les boutons en bas : à la hauteur exacte de la démo. */
  .s-heros-texte { display: flex; flex-direction: column; justify-content: space-between; }
  .s-heros-demo { display: flex; }
  .s-app-heros { flex: 1; display: flex; flex-direction: column; }
}
.s-app-heros { margin: 0; }
.s-heros-reglage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 14px; border-bottom: 1px solid var(--s-encre-filet); transition: background-color .3s ease; }
.s-heros-reglage .s-chaine-etape { padding: 0; }
.s-heros-reglage-l { font-size: 13.5px; font-weight: 600; color: var(--s-encre-texte); text-align: right; white-space: nowrap; }
.s-heros-reglage-l small { margin-left: 4px; font: 400 11px/1 var(--mono); color: rgba(242, 240, 232, .46); }
.s-heros-reglage.is-flash { background: #191A16; }
.s-impacts { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--s-encre-filet); border-top: 1px solid var(--s-encre-filet); border-bottom: 1px solid var(--s-encre-filet); }
.s-impact { display: grid; align-content: center; gap: 1px; padding: 6px 14px; background: var(--ink); transition: background-color .35s ease; }
.s-impact-l { font-size: 11.5px; font-weight: 600; color: var(--s-encre-doux); }
.s-impact-v { font: 600 17.5px/1.1 var(--mono); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.s-impact.is-accent .s-impact-v { color: var(--accent); }
.s-impact-f { font: 400 12px/1.35 var(--sans); white-space: nowrap; color: rgba(242, 240, 232, .46); }
.s-impact.is-flash { background: #191A16; }
.s-impact.is-flash .s-impact-v { color: var(--accent); }
/* La courbe de trésorerie se range à côté du montant, pas dessous. */
.s-impact.is-courbe { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.s-impact.is-courbe .s-impact-l { grid-column: 1 / -1; }
.s-impact.is-courbe .s-courbe { grid-column: 2; grid-row: 2 / span 2; align-self: center; height: 24px; }
.s-app-heros .s-app-pied { padding: 5px 14px 6px; font-size: 10.5px; line-height: 1.4; }
.s-app-heros .s-pas button { width: 26px; height: 26px; }
.s-app-heros .s-pas output { min-width: 64px; font-size: 16.5px; }
.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 ───────────── */
/* Le titre du problème parle aussi fort que celui du héros. */
.s-accueil .s-tete h2.s-titre-fort { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -.042em; }
/* Trois cartes aux mêmes rangées : l'outil, ce qui se passe, la preuve, ce
   que ça coûte, et ce que Fynomia fait à la place. */
.s-pieges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto auto; column-gap: 16px; align-items: stretch; }
.s-piege {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--s-filet); box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 14px 34px -24px rgba(14, 15, 12, .28);
}
@supports (grid-template-rows: subgrid) {
  .s-piege { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
}
.s-piege-outil { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.s-piege-outil b { font-weight: 700; letter-spacing: -.01em; }
.s-piege-icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.s-piege-logo { width: 24px; height: 24px; flex: none; }
.s-piege h3 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.s-piege-preuve { display: flex; flex-direction: column; justify-content: center; }
.s-piege-cout { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.s-piege-fynomia { padding: 13px 15px; border-radius: 14px; background: var(--accent); color: var(--ink); font-size: 14.5px; line-height: 1.4; font-weight: 600; }
.s-piege-fynomia b { font-weight: 800; }
.s-piege.is-cabinet { background: var(--ink); border-color: var(--ink); color: var(--s-encre-texte); box-shadow: 0 24px 50px -30px rgba(14, 15, 12, .7); }
.s-piege.is-cabinet .s-piege-outil, .s-piege.is-cabinet h3 { color: #fff; }
.s-piege.is-cabinet .s-piege-cout { color: var(--s-encre-doux); }

/* ChatGPT : la question, sa réponse barrée, la bonne. */
.s-chat { display: grid; gap: 8px; }
.s-chat-bulle { padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.s-chat-bulle.is-toi { margin-left: 26px; border-bottom-right-radius: 4px; background: var(--surface-2); border: 1px solid var(--s-filet); }
.s-chat-bulle.is-ia { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-right: 26px; border-bottom-left-radius: 4px; background: var(--loss-wash); color: var(--loss); font-weight: 600; }
.s-chat-bulle.is-ia s { font: 700 clamp(20px, 1.7vw, 24px)/1 var(--display); letter-spacing: -.03em; text-decoration-thickness: 2px; white-space: nowrap; }
.s-chat-vrai { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 2px solid var(--ink); font-size: 14px; font-weight: 600; color: var(--ink); }
.s-chat-vrai b { font: 800 clamp(20px, 1.7vw, 24px)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }

/* Excel : quatre lignes, deux cassées. */
.s-tableur { border-radius: 14px; background: var(--surface); border: 1px solid var(--s-filet-fort); overflow: hidden; }
.s-tableur-l { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--s-filet); }
.s-tableur-l:last-child { border-bottom: 0; }
.s-tableur-c { font: 500 11.5px/1 var(--mono); color: var(--ink-4); }
.s-tableur-lib { font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-tableur-v { font: 600 14px/1 var(--mono); text-align: right; color: var(--ink); white-space: nowrap; }
.s-tableur-l.is-erreur { background: var(--loss-wash); }
.s-tableur-l.is-erreur .s-tableur-v { color: var(--loss); }

/* L'expert : le temps que prend chaque question. */
.s-attente { margin: 0; padding: 14px 16px; list-style: none; display: grid; gap: 8px; border-radius: 14px; border: 1px solid var(--s-encre-filet); background: rgba(242, 240, 232, .04); }
.s-attente li { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.s-attente li > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--s-encre-doux); }
.s-attente li p { font-size: 14px; line-height: 1.4; color: var(--s-encre-texte); }
.s-attente .is-delai { display: flex; align-items: center; gap: 8px; padding-left: 76px; font-size: 13px; font-weight: 600; 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, en trois temps ───────────── */
/* Une trame fine sur l'encre, qui s'efface vers le bas. */
.s-accueil .s-section.s-encre.s-trame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(242, 240, 232, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 240, 232, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
}
.s-trame > .s-wrap { position: relative; }
.s-temps-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-temps { position: relative; display: flex; flex-direction: column; padding: 20px 20px 14px; border-radius: 20px; background: rgba(242, 240, 232, .045); border: 1px solid var(--s-encre-filet); }
/* La flèche qui relie un temps au suivant. */
.s-temps + .s-temps::before {
  content: '→'; position: absolute; z-index: 1; left: -22px; top: 30px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(242, 240, 232, .22); color: var(--accent); font: 600 14px/1 var(--mono);
}
.s-temps-n { font-size: 12px; letter-spacing: 0; color: var(--accent); }
.s-temps h3 { margin: 6px 0 16px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
/* 01 · Ce que l’entrepreneur répond : une question, sa réponse en champ. */
.s-questions { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-questions li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.s-questions .s-meta { font-size: 11px; letter-spacing: 0; color: var(--s-encre-doux); white-space: nowrap; }
.s-questions b { padding: 7px 10px; border-radius: 9px; background: rgba(242, 240, 232, .08); border: 1px solid rgba(242, 240, 232, .14); font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; }
/* 02 · Ce que Fynomia en tire : un grand chiffre, deux lignes. */
.s-calcule { display: grid; gap: 8px; }
.s-calcule-grand { display: grid; gap: 2px; padding-bottom: 8px; }
.s-calcule-grand b { font-size: clamp(40px, 3.6vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--accent); }
.s-calcule-grand span { font-size: 13.5px; color: var(--s-encre-texte); }
.s-calcule-l { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--s-encre-filet); font-size: 13px; color: var(--s-encre-doux); }
.s-calcule-l b { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
/* 03 · Ce qu'il présente : trois fichiers. */
.s-livrables { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-livrable { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(242, 240, 232, .06); border: 1px solid var(--s-encre-filet); }
.s-livrable b { font-size: 14px; font-weight: 600; color: #fff; }
.s-livrable-type { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(242, 240, 232, .1); font-size: 11px; font-weight: 600; color: var(--s-encre-texte); flex: none; }
.s-livrable.is-fort { background: var(--accent); border-color: var(--accent); }
.s-livrable.is-fort b { color: var(--ink); }
.s-livrable.is-fort .s-livrable-type { background: var(--ink); color: var(--accent); }

/* Ce qu'on saisit a l'air d'un champ ; ce que Fynomia calcule, du vert. */

.s-vivant-bande { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; margin-top: 16px; padding: 18px 24px; border-radius: 20px; background: var(--accent); color: var(--ink); }
.s-vivant-titre { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.s-vivant-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-vivant-liste li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 8px; }
.s-vivant-liste li > span:first-child { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: rgba(14, 15, 12, .66); }
.s-vivant-liste s { font-size: 14px; color: rgba(14, 15, 12, .55); text-decoration-thickness: 1.5px; white-space: nowrap; }
.s-vivant-fleche { font-weight: 700; }
.s-vivant-liste b { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }

.s-solution-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--s-encre-doux); }

/* ───────────── 03 · La fiscalité codée en dur ───────────── */
/* Deux colonnes de même hauteur : la carte de droite s'arrête où finit la gauche. */
.s-fisc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.s-fisc-gauche { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.s-fisc-grand { font: 800 clamp(32px, 3.2vw, 46px)/1.04 var(--display); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.s-fisc-grand span { display: block; color: var(--ink-4); }
.s-fisc-note { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--ink-2); }

/* Le moteur : une case par taux, seuil ou plafond de la loi 2026, rangées par
   terrain, sur un plan incliné. Elles s'allument à l'arrivée, en vague. */
.s-regles { position: relative; margin: 6px 0 0; padding: 22px 22px 18px; border-radius: 22px; background: var(--ink); color: var(--s-encre-texte); overflow: hidden; box-shadow: 0 30px 70px -40px rgba(14, 15, 12, .8); isolation: isolate; }
.s-regles::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 240, 52, .22), transparent); z-index: -1; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .6s var(--s-sortie); }
.s-regles-scene { perspective: 1100px; perspective-origin: 50% 0; }
.s-regles-plan {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; transform-style: preserve-3d;
  transform: rotateX(calc(16deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) rotateZ(-2deg);
  transform-origin: 50% 100%; transition: transform .7s var(--s-sortie);
}
.s-regles-terrain { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 14px; background: rgba(242, 240, 232, .05); box-shadow: inset 0 0 0 1px var(--s-encre-filet), 0 18px 30px -18px rgba(0, 0, 0, .9); transform: translateZ(calc(var(--z, 0) * 1px)); }
.s-regles-terrain:nth-child(2) { --z: 18; }
.s-regles-terrain:nth-child(3) { --z: 36; }
.s-regles-terrain:nth-child(4) { --z: 54; }
.s-regles-tete { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.s-regles-tete b { font: 800 clamp(26px, 2.4vw, 34px)/1 var(--display); letter-spacing: -.05em; color: var(--accent); }
.s-regles-tete span { font-size: 12.5px; font-weight: 600; color: var(--s-encre-texte); }
.s-regles-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; align-content: start; }
.s-regles-cases i { aspect-ratio: 1; border-radius: 3px; background: rgba(242, 240, 232, .1); transition: background-color .5s var(--s-sortie), box-shadow .5s var(--s-sortie), transform .5s var(--s-sortie); transition-delay: calc(var(--k, 0) * 9ms); }
.s-regles.is-allume .s-regles-cases i { background: var(--accent); box-shadow: 0 0 10px rgba(214, 240, 52, .45); }
.s-regles.is-allume .s-regles-cases i:nth-child(3n) { background: #c4dd2c; }
.s-regles.is-allume .s-regles-cases i:nth-child(7n) { background: #eaf77d; }
.s-regles-pied { margin: auto 0 0; font-size: 11.5px; color: var(--s-encre-doux); }
.s-regles-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--s-encre-filet); font-size: 13px; color: var(--s-encre-doux); }
.s-regles-legende b { font: 800 17px/1 var(--display); letter-spacing: -.03em; color: var(--s-encre-texte); margin-right: 3px; }
/* Sans script ou sans mouvement : tout est allumé, rien ne bouge. */
.s-regles:not([data-regles-pret]) .s-regles-cases i { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .s-regles-plan, .s-regles-cases i, .s-regles::before { transition: none; }
}

/* La cascade : du plus grand au plus petit, puis elle s'efface. Les premiers
   mots débordent de la carte : c'est l'échelle de ce que le moteur absorbe.
   Le texte est dessiné par la feuille de style (::before) : il ne se
   sélectionne pas, il ne se copie pas. */
.s-cascade-bloc { position: relative; min-height: 0; padding: 22px 0 0 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--s-filet); box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 14px 34px -24px rgba(14, 15, 12, .28); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.s-cascade-titre { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.s-cascade {
  position: absolute; inset: 58px 0 0 26px; margin: 0; padding: 0 0 8px; list-style: none; color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 98%); mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
}
.s-cascade-palier { line-height: 1.16; }
.s-cascade span { white-space: nowrap; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }
.s-cascade span::before { content: attr(data-t); }
.s-cascade span::after { content: ' · '; font-weight: 400; color: var(--ink-5); }
.s-cascade span:last-child::after { content: none; }
/* Les deux premiers paliers : un mot par ligne, si grand qu'il déborde. */
.s-cascade .c1 span, .s-cascade .c2 span { display: block; }
.s-cascade .c1 span::after, .s-cascade .c2 span::after { content: none; }
.s-cascade .c1 { font-size: clamp(50px, 6.6vw, 100px); line-height: .92; }
.s-cascade .c1 span { letter-spacing: -.065em; margin-left: -.045em; }
.s-cascade .c1 span:nth-child(2) { color: var(--ink-2); }
.s-cascade .c1 span:nth-child(3) { color: var(--ink-3); }
.s-cascade .c2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1; color: var(--ink-3); }
.s-cascade .c2 span { letter-spacing: -.05em; }
.s-cascade .c3 { font-size: clamp(19px, 1.7vw, 24px); color: var(--ink-3); }
.s-cascade .c4 { font-size: 16.5px; color: var(--ink-3); }
.s-cascade .c4 span { font-weight: 700; letter-spacing: -.02em; }
.s-cascade .c5 { font: 500 14px/1.35 var(--sans); color: var(--ink-4); }
.s-cascade .c6 { font: 500 12.5px/1.35 var(--sans); color: var(--ink-4); }
.s-cascade .c5 span, .s-cascade .c6 span { font: inherit; letter-spacing: 0; }
.s-tete .s-chapo b { font-weight: 600; color: var(--ink); }

/* ───────────── 04 · La maturité du projet : une frise, un panneau ───────────── */
/* La frise : quatre stades reliés par un fil qui se remplit jusqu'au stade
   choisi. Le rang vient de data-rang (aucun style en ligne). */
.s-parcours { position: relative; margin: 0 0 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s-parcours::before, .s-parcours::after { content: ''; position: absolute; top: 25px; left: 12.5%; height: 3px; border-radius: 2px; }
.s-parcours::before { right: 12.5%; background: var(--s-filet-fort); }
.s-parcours::after { width: 0; background: var(--ink); transition: width .5s var(--s-sortie); }
.s-maturite[data-rang="1"] .s-parcours::after { width: 25%; }
.s-maturite[data-rang="2"] .s-parcours::after { width: 50%; }
.s-maturite[data-rang="3"] .s-parcours::after { width: 75%; }
.s-jalon {
  position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 14px;
  border: 0; border-radius: 16px; background: none; font: inherit; color: var(--ink-3); text-align: center; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.s-jalon:hover { background: rgba(14, 15, 12, .04); color: var(--ink); }
.s-jalon:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.s-jalon-point {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%;
  border: 2px solid var(--s-filet-fort); background: var(--surface); font: 700 14px/1 var(--display); color: var(--ink-3);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--s-sortie);
}
.s-jalon b { font: 700 clamp(15.5px, 1.3vw, 18px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.s-jalon-quand { font-size: 13.5px; line-height: 1.35; }
.s-jalon.is-on .s-jalon-point { background: var(--accent); border-color: var(--ink); color: var(--ink); transform: scale(1.12); }
.s-jalon.is-on { color: var(--ink-2); }
/* Les stades déjà franchis gardent un point encré. */
.s-maturite[data-rang="1"] .s-parcours li:nth-child(-n+1) .s-jalon:not(.is-on) .s-jalon-point,
.s-maturite[data-rang="2"] .s-parcours li:nth-child(-n+2) .s-jalon:not(.is-on) .s-jalon-point,
.s-maturite[data-rang="3"] .s-parcours li:nth-child(-n+3) .s-jalon:not(.is-on) .s-jalon-point { background: var(--ink); border-color: var(--ink); color: var(--accent); }

/* Le panneau du stade : comment Fynomia aide à gauche, ce que ça apporte à droite. */
.s-stade-panneau { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.s-stade-panneau[hidden] { display: none; }
.s-stade-panneau.is-entre { animation: s-stade-entre .45s var(--s-sortie); }
@keyframes s-stade-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.s-stade-texte {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--s-filet);
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 14px 34px -24px rgba(14, 15, 12, .28);
}
.s-stade-ex { font-size: 14px; font-weight: 600; color: var(--ink-4); }
.s-stade-question { font: 800 clamp(22px, 2vw, 30px)/1.12 var(--display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.s-stade-h { margin: 6px 0 0; font: 700 14px/1.3 var(--sans); color: var(--ink-3); }
.s-stade-aide { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.s-stade-aide li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; }
.s-stade-no { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 700 13px/1 var(--sans); align-self: start; }
.s-stade-aide b { font: 700 16.5px/1.3 var(--sans); color: var(--ink); }
.s-stade-aide li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.s-stade-valeur {
  display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 26px; border-radius: 22px; background: var(--ink); color: var(--s-encre-texte);
  box-shadow: 0 24px 50px -30px rgba(14, 15, 12, .7);
}
.s-stade-valeur .s-stade-h { margin: 0; color: var(--s-encre-doux); }
.s-stade-promesse { flex: 1; font: 700 clamp(24px, 2.3vw, 34px)/1.2 var(--display); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.s-stade-promesse mark { display: block; margin-bottom: 6px; background: none; color: var(--accent); font-weight: 800; font-size: 1.12em; line-height: 1.08; }
.s-stade-valeur .s-bouton { align-self: flex-start; }

/* ───────────── 05 · Témoignages ───────────── */
.s-avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.s-avis {
  margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--s-filet);
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 14px 34px -24px rgba(14, 15, 12, .28); transition: transform .25s var(--s-sortie), box-shadow .25s ease;
}
.s-avis:hover { transform: translateY(-2px); box-shadow: var(--s-ombre-douce); }
.s-avis-citation { margin: 0; flex: 1; }
.s-avis-citation p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.s-avis-apport { padding: 10px 12px; border-radius: 12px; background: var(--accent-wash); border: 1px solid rgba(184, 207, 42, .5); font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.s-avis-apport .s-meta { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.s-avis-qui { display: flex; align-items: center; gap: 12px; }
.s-avis-initiales { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--ink); color: var(--accent); font: 600 12.5px/1 var(--mono); }
.s-avis-qui b { display: block; font: 700 14.5px/1.3 var(--sans); color: var(--ink); }
.s-avis-qui b + .s-meta { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; letter-spacing: 0; color: var(--ink-4); }

/* ───────────── 06 · Tarifs ───────────── */
.s-tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.s-tarifs-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.s-periode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--s-filet); box-shadow: 0 1px 2px rgba(14, 15, 12, .04); }
.s-periode button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; font: 600 14px/1 var(--sans); color: var(--ink-3); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.s-periode button .s-meta { padding: 3px 6px; border-radius: 6px; background: var(--accent); font-size: 11px; color: var(--ink); }
.s-periode button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.s-periode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sans script, les deux périodes restent lisibles ; avec, seule la choisie. */
.js .s-tarifs[data-periode="mois"] [data-seulement="an"], .js .s-tarifs[data-periode="an"] [data-seulement="mois"] { display: none; }
html:not(.js) .s-periode { display: none; }
html:not(.js) .s-tarif-prix b[data-seulement="an"]::before { content: 'ou '; font-size: .5em; }
.js .s-tarif-prix b { animation: s-prix .45s var(--s-sortie); }
@keyframes s-prix { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.s-tarif-inclus { flex: 1; margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; }
.s-tarif-inclus li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.s-tarif-inclus li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.5 2.6' fill='none' stroke='%23D6F034' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-tarif.is-fort .s-tarif-inclus li { color: var(--s-encre-texte); }
.s-tarif.is-fort .s-tarif-inclus li::before { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.5 2.6' fill='none' stroke='%230E0F0C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-tarif-inclus li b { font-weight: 600; }
.s-tarifs.is-detail .s-tarif-inclus li span:not(.s-meta) { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-4); }
.s-tarifs.is-detail .s-tarif.is-fort .s-tarif-inclus li span:not(.s-meta) { color: var(--s-encre-doux); }
.s-page-tete .s-tarifs-tete { align-items: flex-end; }
.s-tarif-inclus li.is-bientot { color: var(--ink-4); }
.s-tarif-inclus li.is-bientot::before { background: var(--s-filet-fort); }
.s-tarif-inclus li .s-meta { margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--s-voile); font-size: 12px; letter-spacing: 0; color: var(--ink-3); }
.s-tarif {
  display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--s-filet);
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 14px 34px -24px rgba(14, 15, 12, .28);
}
.s-tarif.is-fort { background: var(--ink); border-color: var(--ink); color: var(--s-encre-texte); box-shadow: 0 30px 60px -36px rgba(14, 15, 12, .8); }
/* Le nom de chaque offre : un vrai titre, lisible avant le prix. */
.s-tarif-nom { margin: 0; font: 800 clamp(24px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.s-tarif.is-fort .s-tarif-nom { color: var(--accent); }
/* La période se choisit dans la carte de l'offre founder, au-dessus du prix. */
.s-tarif .s-periode { margin-top: 16px; }
.s-tarif.is-fort .s-periode { background: rgba(242, 240, 232, .08); border-color: rgba(242, 240, 232, .18); box-shadow: none; }
.s-tarif.is-fort .s-periode button { color: var(--s-encre-texte); }
.s-tarif.is-fort .s-periode button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.s-tarif.is-fort .s-periode button[aria-pressed="true"] .s-meta { background: var(--ink); color: var(--accent); }
.s-tarif-prix { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.s-tarif-prix b { font: 800 clamp(40px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.045em; color: var(--ink); }
.s-tarif.is-fort .s-tarif-prix b { color: #fff; }
.s-tarif-prix span { font: 500 14px/1 var(--mono); color: var(--ink-4); }
.s-tarif.is-fort .s-tarif-prix span { color: var(--s-encre-doux); }
.s-tarif-pour { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.s-tarif.is-fort .s-tarif-pour { color: #fff; }

.s-tarifs-suite { margin-top: 18px; }

/* ───────────── Incubateurs ───────────── */
.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: 15px; font-weight: 700; 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: 800 clamp(44px, 4.8vw, 64px)/1 var(--display); 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); }
.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, .09); border: 1px solid rgba(242, 240, 232, .16); font: 600 14.5px/1.4 var(--sans); color: #fff; }
.s-contrat-inclus li::before { content: '✓'; position: absolute; left: 14px; top: 12px; font-weight: 700; color: var(--accent); }
/* Le comité, sur papier : il se détache du contrat au lieu de s'y fondre. */
.s-comite { align-self: center; display: grid; gap: 12px; padding: 26px; border-radius: 20px; background: var(--paper); color: var(--ink); }
.s-comite-titre { font-size: 15px; font-weight: 700; color: var(--ink); }
.s-comite-l { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 14px 16px; border-radius: 14px; font: 600 15px/1.45 var(--sans); }
.s-comite-l em { grid-column: 2; font-style: normal; font-weight: 500; font-size: 13.5px; color: var(--ink-3); }
.s-comite-l.is-avant { background: var(--loss-wash); color: var(--loss); }
.s-comite-l.is-apres { background: var(--accent); color: var(--ink); }
.s-comite-l.is-apres em { color: var(--ink-2); }
.s-coach { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.s-coach-etapes { margin: 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); }
/* La vue coach, en illustration : le plan, la clé de l’entrepreneur, les bulles du
   coach. Elle flotte doucement ; à l'arrivée, la clé tourne et les bulles
   apparaissent. Mouvement réduit : tout est posé, rien ne bouge. */
.s-coach-illu { margin: 0; }
.s-cle { display: block; width: 100%; height: auto; overflow: visible; }
.s-cle-plan { animation: s-cle-flotte 7s ease-in-out infinite; transform-origin: 312px 222px; }
.s-cle-orbite { animation: s-cle-tourne 60s linear infinite; transform-origin: 310px 222px; }
.s-cle-cle { transform-origin: 104px 306px; animation: s-cle-clef 7s ease-in-out infinite; }
.s-cle-bulle { transform-box: fill-box; transform-origin: 0 100%; animation: s-cle-bulle 7s ease-in-out infinite; }
.s-cle-bulle-2 { animation-delay: .9s; }
.s-cle-oeil { transform-box: fill-box; transform-origin: 50% 50%; animation: s-cle-cligne 7s ease-in-out infinite; }
.s-cle-lien { animation: s-cle-pointille 2.4s linear infinite; }
@keyframes s-cle-flotte { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(.5deg); } }
@keyframes s-cle-tourne { to { transform: rotate(360deg); } }
@keyframes s-cle-clef { 0%, 12% { transform: rotate(0deg); } 22%, 70% { transform: rotate(-14deg); } 82%, 100% { transform: rotate(0deg); } }
@keyframes s-cle-bulle { 0%, 18% { opacity: 0; transform: scale(.7); } 26%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes s-cle-cligne { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.15); } }
@keyframes s-cle-pointille { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) {
  .s-cle-plan, .s-cle-orbite, .s-cle-cle, .s-cle-bulle, .s-cle-oeil, .s-cle-lien { animation: none; }
}
.s-grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ───────────── Solution : chapitres et modules repliés ───────────── */

@media (max-width: 1100px) {
  .s-pieges { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
  .s-piege, .s-piege.is-cabinet { display: flex; grid-row: auto; }
  .s-stade-panneau { grid-template-columns: minmax(0, 1fr); }
  .s-vivant-bande { gap: 14px; }
  .s-temps-liste { grid-template-columns: minmax(0, 1fr); }
  .s-temps + .s-temps::before { left: 24px; top: -22px; transform: rotate(90deg); }
  .s-vivant-bande { 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)); }
}
@media (max-width: 960px) {
  .s-heros-in, .s-fisc, .s-contrat, .s-coach { grid-template-columns: minmax(0, 1fr); }
  /* L'une sous l'autre, la carte n'a plus de voisine à suivre : elle prend sa hauteur. */
  .s-cascade-bloc { height: 440px; }
  .s-tarifs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .s-heros-titre .s-ligne { white-space: normal; }
  .s-temps h3 { white-space: normal; }
  .s-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s-parcours::before, .s-parcours::after { display: none; }
  .s-jalon { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; border: 1px solid var(--s-filet); background: var(--surface); }
  .s-jalon .s-jalon-quand { display: none; }
  .s-jalon-point { margin: 0; width: 30px; height: 30px; flex: none; }
  .s-jalon.is-on { border-color: var(--ink); }
  .s-stade-texte, .s-stade-valeur { padding: 20px 18px; }
  .s-vivant-bande { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .s-vivant-liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .s-questions li { flex-wrap: wrap; }
  .s-regles { padding: 18px 16px 16px; }
  .s-regles-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); transform: rotateX(10deg) rotateZ(-1deg); }
  .s-regles-terrain:nth-child(n) { --z: 0; }
  .s-cascade-bloc { padding: 18px 0 0 18px; }
  .s-cascade { inset: 52px 0 0 18px; }
  .s-tarifs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .s-avis-grille, .s-grille-4, .s-contrat-inclus { grid-template-columns: minmax(0, 1fr); }
  .s-piege { padding: 22px 18px; }
  
  
  
}
@media (max-width: 760px) {
  .s-entete-in { gap: 12px; }
}
@media (max-width: 420px) { .s-entete-actions .s-bouton { padding: 8px 11px; font-size: 13.5px; } }
@media (max-width: 520px) {
  .s-heros-reglage { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 8px 14px; }
  .s-heros-reglage .s-chaine-etape { grid-column: 1 / -1; }
  .s-heros-reglage-l { text-align: left; }
  .s-impact-f { white-space: normal; }
}

/* ───────────── Comparatif : un tableau qui se lit d'un coup d'œil ───────────── */
.s-score-envel { overflow-x: auto; margin: 0 calc(-1 * var(--s-gouttiere)); padding: 0 var(--s-gouttiere); }
.s-score { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; }
.s-score th, .s-score td { padding: 16px 12px; text-align: center; border-bottom: 1px solid var(--s-filet); }
.s-score thead th { font: 600 12px/1.2 var(--sans); letter-spacing: 0; color: var(--ink-4); border-bottom-color: var(--s-filet-fort); }
.s-score tbody th { text-align: left; font: 700 clamp(15px, 1.25vw, 18px)/1.25 var(--display); letter-spacing: -.015em; color: var(--ink); }
.s-score .is-nous { background: var(--ink); color: #fff; }
.s-score thead .is-nous { border-radius: 16px 16px 0 0; color: var(--accent); }
.s-score tbody tr:last-child .is-nous { border-radius: 0 0 16px 16px; }
.s-score td.is-nous { border-bottom-color: rgba(242, 240, 232, .1); }
.s-score tr.is-cout td { font: 600 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.s-score tr.is-cout td.is-nous { color: var(--accent); font-size: 15px; }
.s-marque { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 16px/1 var(--sans); cursor: help; }
.s-marque.is-o { background: var(--accent); color: var(--ink); }
.s-marque.is-p { background: #F7E3B5; color: #8A5A00; }
.s-marque.is-n { background: rgba(14, 15, 12, .06); color: var(--ink-4); }
.s-score .is-nous .s-marque.is-n { background: rgba(242, 240, 232, .12); color: var(--s-encre-doux); }
/* À l'arrivée, les pastilles apparaissent colonne après colonne. */
.js .s-score .s-marque { transform: scale(0); opacity: 0; transition: transform .45s var(--s-sortie), opacity .3s ease; transition-delay: var(--d, 0s); }
.js .s-score.is-joue .s-marque { transform: none; opacity: 1; }
.s-score tbody tr { transition: background-color .2s ease; }
.s-score tbody tr:hover th, .s-score tbody tr:hover td:not(.is-nous) { background: rgba(14, 15, 12, .03); }
.s-score-legende { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.s-score-legende > span { display: inline-flex; align-items: center; gap: 8px; }
.s-score-legende .s-marque { width: 22px; height: 22px; font-size: 12px; cursor: default; }
.s-ordre { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.s-ordre li { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--s-filet); box-shadow: 0 1px 2px rgba(14, 15, 12, .04); }
.s-ordre li:first-child { background: var(--ink); border-color: var(--ink); }
.s-ordre-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--ink); font: 800 16px/1 var(--display); }
.s-ordre h3 { margin: 0; font: 800 clamp(19px, 1.6vw, 22px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.s-ordre p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.s-ordre li:first-child h3 { color: #fff; }
.s-ordre li:first-child p { color: var(--s-encre-doux); }
@media (prefers-reduced-motion: reduce) { .js .s-score .s-marque { transform: none; opacity: 1; transition: none; } }
@media (max-width: 700px) {
  .s-ordre { grid-template-columns: minmax(0, 1fr); }
  .s-score { min-width: 0; table-layout: fixed; }
  .s-score th, .s-score td { padding: 10px 3px; }
  .s-score thead th { font-size: 9px; letter-spacing: .02em; word-break: break-word; hyphens: auto; }
  .s-score tbody th { width: 34%; padding-right: 8px; font-size: 13.5px; }
  .s-score tr.is-cout td { font-size: 10.5px; }
  .s-score tr.is-cout td.is-nous { font-size: 11.5px; }
  .s-marque { width: 26px; height: 26px; font-size: 13px; }
}

/* ───────────── Solution : ce qui bloque, ce que Fynomia change ───────────── */
.s-valeurs { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.s-valeur { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.25fr); align-items: center; gap: 12px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--s-filet); box-shadow: 0 1px 2px rgba(14, 15, 12, .04); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-valeur:hover { transform: translateX(4px); box-shadow: var(--s-ombre-douce); }
.s-valeur-douleur { font: 600 clamp(16px, 1.3vw, 19px)/1.3 var(--sans); font-style: italic; color: var(--ink-4); }
.s-valeur-fleche { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 700 16px/1 var(--mono); transition: transform .3s var(--s-sortie); }
.s-valeur:hover .s-valeur-fleche { transform: translateX(4px); }
.s-valeur-reponse { font: 700 clamp(16px, 1.35vw, 19px)/1.35 var(--display); letter-spacing: -.01em; color: var(--ink); }
.s-gains { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s-gains li { display: grid; gap: 6px; padding: 22px; border-radius: 18px; background: var(--ink); color: var(--s-encre-texte); }
.s-gains b { font: 800 clamp(34px, 3.2vw, 48px)/1 var(--display); letter-spacing: -.045em; color: var(--accent); white-space: nowrap; }
.s-gains span { font-size: 14px; line-height: 1.45; color: var(--s-encre-doux); }
.js .s-valeur { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--s-sortie), transform .5s var(--s-sortie); }
.js .s-valeurs.is-joue .s-valeur { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .js .s-valeur { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .s-valeur { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .s-valeur-fleche { transform: rotate(90deg); width: 28px; height: 28px; }
  .s-gains { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────── Solution : le moteur ─────────────
   Les comptes de la table sous le titre ; puis un salaire saisi, sa fiche,
   l'écart avec le raccourci des tableurs et la courbe qui le prouve ; puis
   les terrains où la loi s'applique. */
.s-sol-stats { margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 22px; }
.s-sol-stats li { display: grid; gap: 4px; align-content: start; padding-top: 12px; border-top: 2px solid var(--ink); }
.s-sol-stats b { font: 800 clamp(30px, 3vw, 44px)/1 var(--display); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.s-sol-stats span { font-size: 14px; line-height: 1.4; color: var(--ink-3); }

.s-moteur { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.s-fiche { padding: clamp(20px, 2.2vw, 28px); border-radius: 20px; background: rgba(242, 240, 232, .05); border: 1px solid var(--s-encre-filet); }
.s-fiche-saisie { display: grid; gap: 6px; margin: 0 0 14px; }
.s-fiche-saisie span { font-size: 14px; color: var(--s-encre-doux); }
.s-fiche-saisie b { font: 700 clamp(20px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -.02em; color: #fff; }
.s-fiche-lignes { margin: 0; }
.s-fiche-lignes div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--s-encre-filet); }
.s-fiche-lignes dt { font-size: 15px; color: var(--s-encre-doux); }
.s-fiche-lignes dd { margin: 0; font: 600 17px/1.2 var(--display); color: var(--s-encre-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-fiche-lignes .is-gain dd { color: var(--accent); }
.s-fiche-lignes .is-total { border-top-color: rgba(242, 240, 232, .4); }
.s-fiche-lignes .is-total dt { color: #fff; font-weight: 600; }
.s-fiche-lignes .is-total dd { font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.s-fiche-chaine { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--s-encre-filet); }
.s-fiche-chaine li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--s-encre-texte); }
.s-fiche-chaine li:not(:last-child)::after { content: '→'; color: var(--accent); }
.s-fiche-chaine li:last-child { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 600; }
.s-ecart-avant { margin: 0; font-size: 17px; line-height: 1.5; color: var(--s-encre-doux); }
.s-ecart-avant b { color: #fff; font-weight: 600; white-space: nowrap; }
.s-ecart-grand { margin: 10px 0 0; font: 800 clamp(30px, 3.2vw, 46px)/1.04 var(--display); letter-spacing: -.04em; color: #fff; }
.s-ecart-grand span { display: block; margin-top: 8px; font: 600 clamp(17px, 1.5vw, 20px)/1.3 var(--display); letter-spacing: -.01em; color: var(--accent); }
.s-taux-fig { margin: clamp(18px, 2vw, 26px) 0 0; }
.s-taux { display: block; width: 100%; height: auto; overflow: visible; }
.s-taux-grille { stroke: var(--s-encre-filet); stroke-width: 1; }
.s-taux-axe { fill: var(--s-encre-doux); font: 500 12px var(--sans); }
.s-taux-raccourci { stroke: rgba(242, 240, 232, .7); stroke-width: 1.5; stroke-dasharray: 6 6; }
.s-taux-aire { fill: rgba(214, 240, 52, .12); }
.s-taux-trait { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.s-taux-point { fill: var(--accent); }
.s-taux-point.is-fiche { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }
.s-taux-note { fill: var(--s-encre-texte); font: 600 13px var(--sans); }
.s-taux-note.is-raccourci { fill: #fff; }
.s-taux-note.is-fiche { fill: #fff; }
.s-taux-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--s-encre-doux); }

.s-terrains { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.s-terrain { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--s-filet); box-shadow: 0 1px 2px rgba(14, 15, 12, .04); }
.s-terrain-nom { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.s-terrain h3 { margin: 0; font: 800 clamp(20px, 1.7vw, 23px)/1.15 var(--display); letter-spacing: -.025em; color: var(--ink); }
.s-terrain-detail { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.s-terrain-compte { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--s-filet); font-size: 14px; color: var(--ink-3); }
.s-terrain-compte b { font: 800 20px/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.s-terrain.is-finance { grid-column: span 2; background: var(--ink); border-color: var(--ink); }
.s-terrain.is-finance .s-terrain-nom, .s-terrain.is-finance .s-terrain-detail, .s-terrain.is-finance .s-terrain-compte { color: var(--s-encre-doux); }
.s-terrain.is-finance h3, .s-terrain.is-finance .s-terrain-compte b { color: #fff; }
.s-terrain.is-finance .s-terrain-compte { border-top-color: var(--s-encre-filet); }
@media (max-width: 1100px) {
  .s-sol-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-moteur { grid-template-columns: minmax(0, 1fr); }
  .s-terrains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-terrain.is-finance { grid-column: auto; }
}
@media (max-width: 760px) {
  .s-sol-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .s-terrains { grid-template-columns: minmax(0, 1fr); }
  .s-taux-axe { font-size: 19px; }
  .s-taux-axe.is-y, .s-taux-axe.is-milieu { display: none; }
  .s-taux-note { font-size: 19px; }
}

/* ───────────── Surlignage des titres ─────────────
   Le mot qui compte, sur un aplat vert. Il se pose de gauche à droite quand
   le titre arrive à l'écran (révélation, site.js), une fois. */
.s-surligne { padding: 0 .1em; margin: 0 -.02em; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 55% / 100% 86%; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s-encre .s-surligne, .s-final .s-surligne { color: var(--ink); }
.js .s-revele .s-surligne { background-size: 0% 86%; transition: background-size .7s var(--s-sortie) .25s, color .3s ease .25s; }
.js .s-revele.is-vu .s-surligne { background-size: 100% 86%; }
.js .s-encre .s-revele .s-surligne { color: #fff; }
.js .s-encre .s-revele.is-vu .s-surligne { color: var(--ink); }
.s-page-tete .s-surligne { animation: s-surligne .8s var(--s-sortie) .3s both; }
@keyframes s-surligne { from { background-size: 0% 86%; } to { background-size: 100% 86%; } }
@media (prefers-reduced-motion: reduce) {
  .js .s-revele .s-surligne, .s-page-tete .s-surligne { background-size: 100% 86%; animation: none; transition: none; }
  .js .s-encre .s-revele .s-surligne { color: var(--ink); }
}

/* ───────────── Objections : un gros bloc, six réponses ───────────── */
.s-fp-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.s-fp { position: relative; display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 76px; border-radius: 26px; background: var(--ink); color: var(--s-encre-texte); box-shadow: 10px 10px 0 var(--accent); }
.s-fp > p.s-meta { font-size: 12px; letter-spacing: 0; color: var(--s-encre-doux); }
/* Deux lignes, jamais trois : chaque moitié tient sur la sienne. */
.s-fp .s-fp-titre { font: 800 clamp(28px, 2.9vw, 44px)/1 var(--display); letter-spacing: -.05em; color: #fff; }
.s-fp-titre > span { display: block; white-space: nowrap; }
.s-fp-titre .s-fp-l2 { color: var(--accent); }
.s-fp p { font-size: 15.5px; line-height: 1.55; }
.s-fp b { color: #fff; }
.s-fp .s-fp-sticker { position: absolute; right: 18px; bottom: 16px; padding: 9px 14px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0; transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--ink); }
.s-objections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s-objection { padding: 20px 22px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--ink); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-objection:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.s-objection h3 { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -.02em; }
.s-objection p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.s-objection .s-objection-verdict { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 8px; background: var(--accent); font-size: 14.5px; font-weight: 700; color: var(--ink); }

/* ───────────── Incubateurs ───────────── */
.s-incub-heros { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.s-incub-tete h1 { font-size: clamp(38px, 4.6vw, 68px); line-height: .98; letter-spacing: -.05em; }
.s-bloc-achat { display: grid; gap: 10px; padding: 26px 28px; border-radius: 24px; background: var(--surface); border: 1.5px solid var(--ink); box-shadow: 10px 10px 0 var(--accent), 10px 10px 0 1.5px var(--ink); transform: rotate(-1.2deg); }
.s-bloc-achat > .s-meta { font-size: 12px; letter-spacing: 0; color: var(--ink-4); }
.s-bloc-achat-grand { font: 800 clamp(40px, 4vw, 60px)/.95 var(--display); letter-spacing: -.05em; color: var(--ink); }
.s-bloc-achat p:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.s-blocs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.s-bloc-sombre { position: relative; overflow: hidden; display: grid; align-content: start; gap: 12px; padding: 26px; border-radius: 22px; background: rgba(242, 240, 232, .05); border: 1px solid var(--s-encre-filet); }
.s-bloc-sombre::after { content: ''; position: absolute; right: -40px; top: -40px; width: 110px; height: 110px; border-radius: 50%; border: 1px solid var(--s-encre-filet); }
.s-bloc-sombre > .s-meta { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--accent); }
.s-bloc-sombre h3 { margin-top: 18px; font-size: clamp(22px, 2vw, 28px); line-height: 1.08; letter-spacing: -.035em; color: #fff; }
.s-bloc-sombre p:last-child { font-size: 15px; line-height: 1.55; color: var(--s-encre-doux); }
.s-ateliers { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s-atelier { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--ink); transition: transform .25s var(--s-sortie), box-shadow .25s ease; }
.s-atelier:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.s-atelier > .s-meta { font-size: 12px; letter-spacing: 0; color: var(--ink-4); }
.s-atelier h3 { margin-top: 16px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.1; letter-spacing: -.03em; }
.s-atelier p:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.s-atelier.is-clair { background: var(--surface-2); }
.s-atelier.is-accent { background: var(--accent); }
.s-atelier.is-accent p:last-child, .s-atelier.is-accent > .s-meta { color: rgba(14, 15, 12, .72); }
.s-atelier.is-encre { background: var(--ink); color: var(--s-encre-texte); }
.s-atelier.is-encre h3 { color: #fff; }
.s-atelier.is-encre p:last-child, .s-atelier.is-encre > .s-meta { color: var(--s-encre-doux); }
.s-atelier.is-encre:hover { box-shadow: 6px 6px 0 var(--accent); }
#objections-titre + *, .s-incub-tete + * { margin-top: 0; }
.s-final-bloc { padding: clamp(32px, 5vw, 64px); border-radius: 30px; background: var(--accent); border: 1.5px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.s-final-bloc h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.s-final-bloc p { margin: 18px 0 26px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1100px) {
  .s-fp-grille, .s-incub-heros { grid-template-columns: minmax(0, 1fr); }
  .s-ateliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-bloc-achat { transform: none; }
}
@media (max-width: 760px) {
  .s-objections, .s-blocs-3, .s-ateliers { grid-template-columns: minmax(0, 1fr); }
  .s-fp { box-shadow: 6px 6px 0 var(--accent); }
  .s-final-bloc { box-shadow: 6px 6px 0 var(--ink); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Le site, itération du 8 octobre : les planches choisies sur le canevas,
   intégrées. Accueil : Crash-test v2 · A, Solution v3 · B, Atouts v3 · 1,
   Escalier · 1, Citations v3 · A. Puis /solution (Page Solution · A),
   /incubateurs (Incubateurs v3 · A), /comparatif (Comparatif v2 · A).
   Même maison : ivoire, encre, un seul vert acide, chiffres en chasse fixe ;
   des surfaces blanches, une ombre diffuse, des coins généreux.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --s3-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);
  --s3-ombre-douce: 0 18px 48px -34px rgba(14, 15, 12, .35);
  --s3-filet: rgba(14, 15, 12, .09);
  --s3-encre: #0E0F0C;
}

/* Une scène qui attend d'être à l'écran pour jouer (site.js, data-joue). */
.js [data-joue]:not(.is-joue) *, .js [data-joue]:not(.is-joue) *::before, .js [data-joue]:not(.is-joue) *::after { animation-play-state: paused !important; }

/* ───────────── 01 · Le crash-test : trois scènes, en grand ───────────── */
.s-ct-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-ct-carte { display: flex; flex-direction: column; gap: 14px; min-height: 640px; padding: 20px; border-radius: 26px; background: var(--surface); box-shadow: var(--s3-ombre); }
.s-ct-tete { display: flex; align-items: center; gap: 14px; }
.s-ct-marque { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; }
.s-ct-marque svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-ct-marque.is-ia { background: var(--s3-encre); color: #fff; }
.s-ct-marque.is-excel { background: #1D6F42; color: #fff; }
.s-ct-marque.is-expert { background: #E9E6DC; color: var(--ink); }
.s-ct-nom { font: 800 28px/1 var(--display); letter-spacing: -.035em; }
.s-ct-qui { margin-top: 4px; font: 500 13px/1.25 var(--sans); color: var(--ink-4); }
.s-ct-verdict { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--loss-wash); color: var(--loss); font: 700 13.5px/1.2 var(--sans); }
.s-ct-fenetre { flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--s3-filet); }
.s-ct-barre { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--s3-filet); font: 600 12px/1 var(--sans); color: var(--ink-3); }
.s-ct-barre i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #E3E0D5; }
.s-ct-barre span { margin-left: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ChatGPT : la question, l'IA qui tape, sa réponse tamponnée « FAUX », la bonne. */
.s-ct-chat { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.s-ct-bulle { max-width: 90%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.s-ct-bulle.is-toi { align-self: flex-end; background: var(--s3-encre); color: var(--s-encre-texte); border-bottom-right-radius: 5px; }
.s-ct-bulle.is-ia { align-self: flex-start; background: var(--surface); box-shadow: inset 0 0 0 1px var(--s3-filet); border-bottom-left-radius: 5px; animation: s-ct-ia 9s infinite; }
.s-ct-bulle.is-ia b { display: block; margin-top: 4px; font: 800 30px/1 var(--display); letter-spacing: -.03em; }
.s-ct-points { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--s3-filet); animation: s-ct-points 9s infinite; }
.s-ct-points span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-5); animation: s-ct-clignote 1s infinite; }
.s-ct-points span:nth-child(2) { animation-delay: .2s; }
.s-ct-points span:nth-child(3) { animation-delay: .4s; }
.s-ct-faux { align-self: flex-end; margin-top: -8px; padding: 5px 14px; border: 3px solid var(--loss); border-radius: 10px; color: var(--loss); font: 800 24px/1 var(--display); background: rgba(251, 224, 225, .92); transform: rotate(-7deg); animation: s-ct-tampon 9s infinite; }
.s-ct-juste { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent); color: var(--ink); animation: s-ct-vrai 9s infinite; }
.s-ct-juste span { font: 600 13px/1.2 var(--sans); }
.s-ct-juste b { font: 800 28px/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.s-ct-oubli { font-size: 13px; line-height: 1.45; color: var(--ink-3); animation: s-ct-vrai 9s infinite; }
.s-ct-oubli b { color: var(--loss); }
/* Excel : une ligne supprimée, la formule interminable, tout passe en erreur. */
.s-ct-geste { display: block; padding: 9px 12px; background: #FFF7D6; color: #6B4A00; font: 600 12.5px/1.35 var(--sans); border-bottom: 1px solid var(--s3-filet); }
.s-ct-geste b { font-family: var(--mono); }
.s-ct-fx { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); align-items: center; background: var(--surface); border-bottom: 1px solid var(--s3-filet); font: 500 11px/1.35 var(--mono); }
.s-ct-fx > span { padding: 7px 8px; border-right: 1px solid var(--s3-filet); color: var(--ink-3); }
.s-ct-fx > i { text-align: center; color: var(--ink-4); font-family: Georgia, serif; }
.s-ct-fx > code { display: block; padding: 6px 8px; max-height: 58px; overflow: hidden; color: #1D3F8A; word-break: break-all; font: inherit; }
.s-ct-xl { display: grid; grid-template-columns: 30px minmax(108px, 1.6fr) repeat(3, minmax(0, 1fr)); background: var(--surface); font: 500 11.5px/1 var(--mono); }
.s-ct-xl > span { padding: 7px 5px; border-right: 1px solid #EEECE4; border-bottom: 1px solid #EEECE4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-ct-xl .is-h { background: #F4F3EE; color: var(--ink-4); text-align: center; font-weight: 600; }
.s-ct-xl .is-l { font-family: var(--sans); font-size: 12px; color: var(--ink-2); }
.s-ct-xl .is-v { text-align: right; }
.s-ct-xl .is-ref { color: var(--loss); background: var(--loss-wash); text-align: right; font-weight: 600; animation: s-ct-ref 9s infinite both; }
.s-ct-xl .r1 { animation-delay: .15s; } .s-ct-xl .r2 { animation-delay: .3s; } .s-ct-xl .r3 { animation-delay: .45s; } .s-ct-xl .r4 { animation-delay: .6s; } .s-ct-xl .r5 { animation-delay: .75s; }
.s-ct-xl .is-choisie { box-shadow: inset 0 0 0 2px #1D6F42; }
.s-ct-alerte { display: flex; gap: 9px; align-items: flex-start; margin: 10px 12px 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px -14px rgba(14, 15, 12, .45), inset 0 0 0 1px var(--s3-filet); font-size: 12.5px; line-height: 1.4; animation: s-ct-vrai 9s infinite; }
.s-ct-alerte-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--loss); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-ct-onglets { display: flex; gap: 2px; margin-top: auto; padding: 6px 8px 0; background: #F4F3EE; border-top: 1px solid var(--s3-filet); overflow: hidden; }
.s-ct-onglets span { position: relative; padding: 6px 10px 7px; border-radius: 7px 7px 0 0; background: #E9E7DF; font: 600 11px/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.s-ct-onglets span.is-on { background: var(--surface); color: #1D6F42; }
.s-ct-onglets span.is-casse::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--loss); animation: s-ct-ref 9s infinite both; }
/* L'expert : la question du lundi, la réponse du vendredi, la suivante en attente. */
.s-ct-mails { flex: 1; display: flex; flex-direction: column; }
.s-ct-mail { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--s3-filet); background: var(--surface); }
.s-ct-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 800 11px/1 var(--display); }
.s-ct-av.is-cab { background: #E9E6DC; color: var(--ink-3); }
.s-ct-mail p { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.s-ct-mail .s-ct-q { display: flex; justify-content: space-between; gap: 8px; font: 600 11.5px/1.3 var(--sans); color: var(--ink-4); }
.s-ct-mail.is-2 { animation: s-ct-j2 9s infinite; }
.s-ct-mail.is-3 { animation: s-ct-j3 9s infinite; }
.s-ct-mail.is-4 { animation: s-ct-j4 9s infinite; }
.s-ct-pj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.s-ct-pj span { padding: 3px 8px; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--s3-filet); font: 600 11.5px/1.3 var(--mono); }
.s-ct-attente { display: flex; align-items: center; gap: 8px; padding: 14px; font: 600 13px/1 var(--sans); color: #A06800; animation: s-ct-j4 9s infinite; }
.s-ct-sablier { width: 14px; height: 14px; border: 2px solid #E0A100; border-top-color: transparent; border-radius: 50%; animation: s-ct-tourne 1.2s linear infinite; }
.s-ct-cout { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--s3-filet); font-size: 13.5px; color: var(--ink-3); }
.s-ct-cout b { font: 800 24px/1 var(--display); letter-spacing: -.02em; color: var(--loss); white-space: nowrap; }
/* Ce que Fynomia fait à la place, sur une bande d'encre. */
.s-ct-bande { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px; margin-top: 20px; padding: 20px 28px; border-radius: 22px; background: var(--s3-encre); color: var(--paper); }
.s-ct-bande p:first-child { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; color: #fff; }
.s-ct-bande p { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--s-encre-doux); }
.s-ct-bande b { font: 700 21px/1 var(--mono); letter-spacing: -.03em; color: var(--accent); white-space: nowrap; }
@keyframes s-ct-points { 0%, 12% { opacity: 0; } 14%, 26% { opacity: 1; } 28%, 100% { opacity: 0; height: 0; padding: 0; margin: -6px 0; } }
@keyframes s-ct-ia { 0%, 27% { opacity: 0; transform: translateY(8px); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes s-ct-tampon { 0%, 40% { opacity: 0; transform: scale(1.8) rotate(-7deg); } 45% { opacity: 1; transform: scale(.94) rotate(-7deg); } 48%, 100% { opacity: 1; transform: scale(1) rotate(-7deg); } }
@keyframes s-ct-vrai { 0%, 50% { opacity: 0; transform: translateY(10px); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes s-ct-ref { 0%, 22% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes s-ct-j2 { 0%, 22% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes s-ct-j3 { 0%, 46% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes s-ct-j4 { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes s-ct-clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@keyframes s-ct-tourne { to { transform: rotate(360deg); } }
/* Mouvement réduit : la scène posée, sans les points de l'IA qui tape. */
@media (prefers-reduced-motion: reduce) {
  .s-ct-carte *, .s-ct-carte *::after { animation: none !important; }
  .s-ct-points { display: none; }
}

/* ───────────── 02 · La solution : trois verbes, trois surfaces ───────────── */
.s-accueil .s-tete h2.s-sb-titre { font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.05em; }
.s-sb-temps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-sb-t { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 460px; padding: 30px; border-radius: 30px; background: var(--surface); box-shadow: var(--s3-ombre); }
.s-sb-t.is-encre { background: var(--s3-encre); color: var(--s-encre-texte); }
.s-sb-t.is-accent { background: var(--accent); color: var(--ink); }
.s-sb-no { font: 600 13px/1 var(--mono); color: var(--ink-4); }
.s-sb-t.is-encre .s-sb-no { color: var(--s-encre-doux); }
.s-sb-t.is-accent .s-sb-no { color: #4D5A00; }
.s-sb-t h3.s-sb-verbe { font: 800 clamp(40px, 4.6vw, 62px)/.92 var(--display); letter-spacing: -.06em; color: inherit; }
.s-sb-dit { font-size: 17px; line-height: 1.5; color: var(--ink-3); }
.s-sb-t.is-encre .s-sb-dit { color: var(--s-encre-doux); }
.s-sb-t.is-accent .s-sb-dit { color: #2C3600; }
.s-sb-liste { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-sb-liste li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--surface-2); font: 600 14.5px/1.25 var(--sans); }
.s-sb-liste li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dim); }
.s-sb-t.is-encre .s-sb-liste li { background: rgba(242, 240, 232, .07); }
.s-sb-t.is-encre .s-sb-liste li::before { background: var(--accent); }
.s-sb-t.is-accent .s-sb-liste li { background: rgba(255, 255, 255, .55); }
.s-sb-t.is-accent .s-sb-liste li::before { background: var(--ink); }
.s-sb-fleche { position: absolute; right: -16px; top: 52px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--s3-ombre-douce); font: 700 16px/1 var(--sans); }
.s-sb-pied { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.s-sb-pied p { font-size: 15px; color: var(--ink-3); }
.s-bouton.s-sb-cta { min-height: 54px; padding: 0 26px; border-radius: 999px; color: var(--accent); font-size: 16px; }

/* ───────────── 03 · Le droit encodé : trois preuves, puis la cascade ───────────── */
/* La carte de droite prend la hauteur de sa cascade, sans blanc dessous ; les trois preuves de gauche s'y ajustent. */
.s-at-corps { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.s-at-preuves { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.s-at-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 4px 12px; min-height: 0; padding: 16px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--s3-ombre-douce); overflow: hidden; }
.s-at-n { grid-column: 1; font: 800 38px/1 var(--mono); letter-spacing: -.05em; }
.s-at-ico { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--ink); }
.s-at-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-at-p h3 { grid-column: 1 / -1; font-size: 17px; line-height: 1.15; letter-spacing: -.02em; }
.s-at-p p { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.s-at-bloc { position: relative; min-height: 0; padding: 26px 34px 30px; border-radius: 30px; background: var(--surface); box-shadow: var(--s3-ombre); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.s-at-veille { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
.s-at-date { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: var(--s3-encre); color: var(--accent); font: 600 12.5px/1 var(--mono); white-space: nowrap; }
.s-at-date i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: s-ct-clignote 2s infinite; }
.s-at-veille span { font: 600 14px/1.3 var(--sans); color: var(--ink-3); }
.s-at-cascade { list-style: none; margin: 0; padding: 0; font-family: var(--display); font-weight: 800; }
/* Chaque ligne passe à la ligne entre deux entrées, jamais au milieu d'une : rien ne sort du cadre. */
.s-at-cascade li { display: flex; flex-wrap: wrap; align-items: baseline; }
.s-at-cascade span { white-space: nowrap; }
.s-at-cascade span::after { content: '\00B7'; margin: 0 .32em; font-weight: 400; color: var(--ink-5); }
.s-at-cascade span:last-child::after { content: none; }
.s-at-cascade .c1 { display: block; font-size: clamp(36px, 4.4vw, 56px); line-height: .98; letter-spacing: -.055em; }
.s-at-cascade .c1 span { display: block; white-space: normal; }
.s-at-cascade .c1 span::after { content: none; }
.s-at-cascade .c2 { margin-top: 10px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.1; letter-spacing: -.04em; opacity: .82; }
.s-at-cascade .c3 { margin-top: 6px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.18; letter-spacing: -.03em; opacity: .62; }
.s-at-cascade .c4 { margin-top: 4px; font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.3; letter-spacing: -.02em; opacity: .46; }
.s-at-cascade .c5 { margin-top: 2px; font-size: 15.5px; line-height: 1.4; opacity: .32; }
.s-at-cascade .c6 { font-size: 13.5px; line-height: 1.45; opacity: .2; }
.s-at-cascade mark { background: var(--accent); color: var(--ink); padding: 0 .1em; border-radius: .12em; }
.js .s-at-bloc .s-at-cascade li { animation: s-at-monte 1.1s var(--s-sortie) both; }
.js .s-at-cascade .c2 { animation-delay: .12s; } .js .s-at-cascade .c3 { animation-delay: .24s; } .js .s-at-cascade .c4 { animation-delay: .36s; } .js .s-at-cascade .c5 { animation-delay: .48s; } .js .s-at-cascade .c6 { animation-delay: .6s; }
@keyframes s-at-monte { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .s-at-cascade li, .s-at-date i { animation: none !important; } }

/* ───────────── 04 · L'escalier : une marche par stade ───────────── */
.s-ma-haut { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.s-ma-haut .s-bouton { flex: none; min-height: 48px; padding: 0 22px; border-radius: 999px; }
.s-ma-marches { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; min-height: 520px; }
.s-ma-marche { display: flex; }
.s-ma-marche.m1 { height: 300px; } .s-ma-marche.m2 { height: 370px; } .s-ma-marche.m3 { height: 440px; } .s-ma-marche.m4 { height: 510px; }
.s-ma-marche a { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: var(--s3-ombre); color: var(--ink); text-decoration: none; transition: background-color .3s var(--s-sortie), color .3s var(--s-sortie); }
.s-ma-no { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 13px/1 var(--mono); color: var(--ink-4); transition: color .3s ease; }
.s-ma-toi { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 12px/1 var(--sans); opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s var(--s-sortie); }
.s-ma-stade { font: 800 24px/1.05 var(--display); letter-spacing: -.03em; }
.s-ma-q { font: 700 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink-2); transition: color .3s ease; }
.s-ma-r { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--s3-filet); font-size: 14.5px; line-height: 1.5; color: var(--ink-3); transition: color .3s ease, border-color .3s ease; }
.s-ma-r b { display: block; margin-bottom: 4px; font: 600 12px/1 var(--sans); color: var(--ink-4); transition: color .3s ease; }
/* La marche allumée : la deuxième au repos ; celle qu'on survole ou qu'on atteint au clavier. */
.s-ma-marche.is-ici a, .s-ma-marche a:hover, .s-ma-marche a:focus-visible { background: var(--s3-encre); color: var(--s-encre-texte); }
.s-ma-marche.is-ici a .s-ma-toi, .s-ma-marche a:hover .s-ma-toi, .s-ma-marche a:focus-visible .s-ma-toi { opacity: 1; transform: none; }
.s-ma-marche.is-ici a .s-ma-q, .s-ma-marche a:hover .s-ma-q, .s-ma-marche a:focus-visible .s-ma-q { color: var(--accent); }
.s-ma-marche.is-ici a .s-ma-r, .s-ma-marche a:hover .s-ma-r, .s-ma-marche a:focus-visible .s-ma-r { border-top-color: var(--s-encre-filet); color: var(--s-encre-doux); }
.s-ma-marche.is-ici a .s-ma-r b, .s-ma-marche a:hover .s-ma-r b, .s-ma-marche a:focus-visible .s-ma-r b { color: var(--accent); }
.s-ma-marche.is-ici a .s-ma-no, .s-ma-marche a:hover .s-ma-no, .s-ma-marche a:focus-visible .s-ma-no { color: var(--s-encre-doux); }
/* Une autre marche survolée : la deuxième rend la main. */
.s-ma-marches:hover .s-ma-marche.is-ici a:not(:hover) { background: var(--surface); color: var(--ink); }
.s-ma-marches:hover .s-ma-marche.is-ici a:not(:hover) .s-ma-toi { opacity: 0; transform: translateY(4px); }
.s-ma-marches:hover .s-ma-marche.is-ici a:not(:hover) .s-ma-q { color: var(--ink-2); }
.s-ma-marches:hover .s-ma-marche.is-ici a:not(:hover) .s-ma-r { border-top-color: var(--s3-filet); color: var(--ink-3); }
.s-ma-marches:hover .s-ma-marche.is-ici a:not(:hover) .s-ma-r b, .s-ma-marches:hover .s-ma-marche.is-ici a:not(:hover) .s-ma-no { color: var(--ink-4); }
.s-ma-marche a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.s-ma-sol { height: 12px; border-radius: 0 0 12px 12px; background: var(--s3-encre); }

/* ───────────── 06 · Ce que tu te dis : six blocs noirs ───────────── */
.s-ci-tete { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.s-ci-tete .s-chapo { margin: 0 0 4px; }
.s-ci-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-ci-bloc { display: flex; flex-direction: column; gap: 14px; min-height: 320px; padding: 26px 26px 22px; border-radius: 26px; background: #121310; color: var(--s-encre-texte); transition: transform .35s var(--s-sortie); }
.s-ci-bloc:hover { transform: translateY(-4px); }
.s-ci-bloc h3.s-ci-pense { position: relative; padding-top: 30px; font: 700 italic 26px/1.12 var(--display); letter-spacing: -.025em; color: #fff; }
.s-ci-pense::before { content: '\201C'; position: absolute; left: -2px; top: -14px; font: 800 normal 72px/1 var(--display); color: var(--accent); }
.s-ci-trait { height: 1px; background: var(--s-encre-filet); }
.s-ci-rep { font: 800 20px/1.2 var(--display); letter-spacing: -.02em; color: var(--s-encre-texte); }
.s-ci-rep mark { background: var(--accent); color: var(--ink); padding: 0 .08em; border-radius: 4px; }
.s-ci-dit { font-size: 14px; line-height: 1.5; color: var(--s-encre-doux); }
.s-ci-dit b { font-family: var(--mono); font-weight: 600; color: var(--s-encre-texte); white-space: nowrap; }
.s-ci-preuve { margin-top: auto; align-self: flex-start; padding: 5px 10px; border-radius: 7px; background: rgba(214, 240, 52, .12); font: 600 11px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

@media (max-width: 1100px) {
  .s-ct-grille, .s-ci-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-ct-carte { min-height: 0; }
  .s-ct-carte:last-child { grid-column: 1 / -1; }
  .s-ct-bande { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-ct-bande p:first-child { grid-column: 1 / -1; }
  .s-sb-temps { grid-template-columns: minmax(0, 1fr); }
  .s-sb-t { min-height: 0; }
  .s-sb-liste { margin-top: 8px; }
  .s-sb-fleche { display: none; }
  .s-at-corps { grid-template-columns: minmax(0, 1fr); height: auto; }
  .s-at-preuves { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .s-ma-marches { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; min-height: 0; }
  .s-ma-marche.m1, .s-ma-marche.m2, .s-ma-marche.m3, .s-ma-marche.m4 { height: auto; min-height: 300px; }
  .s-ma-marche a { border-radius: 24px; }
  .s-ma-sol { display: none; }
  .s-ci-tete { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .s-ci-tete .s-chapo { margin-top: 12px; }
}
@media (max-width: 760px) {
  .s-ct-grille, .s-ci-grille, .s-at-preuves, .s-ma-marches { grid-template-columns: minmax(0, 1fr); }
  .s-ct-bande { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .s-sb-t { padding: 24px; border-radius: 24px; }
  .s-sb-pied, .s-ma-haut { flex-direction: column; align-items: flex-start; }
  .s-sb-pied .s-bouton { white-space: normal; }
  .s-at-bloc { padding: 22px 20px 24px; border-radius: 24px; }
  .s-ma-marche.m1, .s-ma-marche.m2, .s-ma-marche.m3, .s-ma-marche.m4 { min-height: 0; }
  .s-ma-r { margin-top: 8px; }
  .s-ci-bloc { min-height: 0; }
}

/* ───────────── /solution : du général au précis ───────────── */
.s-ps-heros { padding: clamp(56px, 7vw, 110px) 0 clamp(48px, 6vw, 90px); text-align: center; }
.s-ps-heros h1 { font-size: clamp(40px, 6.6vw, 88px); line-height: .96; letter-spacing: -.05em; }
.s-ps-heros .s-chapo { max-width: 760px; margin: 26px auto 0; font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.5; }
.s-ps-heros .s-actions { justify-content: center; margin-top: 34px; }
.s-bouton.s-ps-btn { min-height: 54px; padding: 0 26px; border-radius: 999px; font-size: 16px; }
.s-ps-heros .s-bouton-contour { background: var(--surface); border: 1.5px solid var(--ink); }
.s-ps-preuves { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; font: 600 14px/1.2 var(--sans); color: var(--ink-4); }
.s-ps-preuves b { font-family: var(--mono); color: var(--ink); }
.s-ps-probleme { text-align: center; }
.s-ps-probleme h2 { max-width: 980px; margin: 0 auto; font-size: clamp(32px, 4.5vw, 58px); line-height: 1.02; letter-spacing: -.045em; }
.s-ps-probleme h2 span { color: var(--accent); }
.s-ps-probleme p { max-width: 720px; margin: 22px auto 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--s-encre-doux); }
.s-ps-titre { font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
.s-ps-titre .s-ligne { display: block; }
.s-ps-valeur, .s-ps-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
.s-ps-v { padding: 28px; border-radius: 26px; background: var(--surface); box-shadow: var(--s3-ombre); }
.s-ps-q { margin-bottom: 12px; font: 600 12.5px/1.3 var(--sans); color: var(--ink-4); }
.s-ps-v h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.08; letter-spacing: -.035em; }
.s-ps-v ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.s-ps-v li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.s-ps-v li.is-moins { color: var(--ink-4); }
.s-ps-coche, .s-ps-croix { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-ps-coche { stroke: #5C7000; stroke-width: 2.6; }
.s-ps-croix { stroke: currentColor; stroke-width: 2.4; }
.s-ps-e { padding: 30px 28px 28px; border-radius: 26px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-ps-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--s3-encre); color: var(--accent); font: 800 18px/1 var(--display); }
.s-ps-e h3 { margin-top: 18px; font-size: clamp(21px, 2vw, 26px); line-height: 1.1; letter-spacing: -.035em; }
.s-ps-e p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.s-ps-chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 40px 0 0; padding: 26px; list-style: none; border-radius: 26px; background: var(--surface); box-shadow: var(--s3-ombre); }
.s-ps-chaine li { display: flex; align-items: center; }
.s-ps-chaine li + li::before { content: '\2192'; margin: 0 10px; font: 700 15px/1 var(--sans); color: var(--ink-5); }
.s-ps-chaine span { padding: 12px 16px; border-radius: 14px; background: var(--surface-2); font: 700 15px/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.s-ps-chaine .is-toi span { background: var(--accent); }
.s-ps-chaine .is-fin span { background: var(--s3-encre); color: #fff; }
.s-ps-exemple { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: var(--s3-encre); color: var(--s-encre-texte); }
.s-ps-exemple-sur { font: 600 12.5px/1.3 var(--sans); color: var(--accent); }
.s-ps-exemple h2 { margin-top: 10px; font-size: clamp(24px, 2.7vw, 34px); line-height: 1.08; letter-spacing: -.035em; color: #fff; }
.s-ps-exemple-dit { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--s-encre-doux); }
.s-ps-avant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.s-ps-avant p { padding: 22px; border-radius: 20px; background: rgba(242, 240, 232, .06); box-shadow: inset 0 0 0 1px var(--s-encre-filet); }
.s-ps-avant p.is-apres { background: var(--accent); color: var(--ink); box-shadow: none; }
.s-ps-avant span { display: block; font: 600 13px/1.3 var(--sans); opacity: .75; }
.s-ps-avant b { display: block; margin-top: 10px; font: 800 clamp(30px, 3.2vw, 40px)/1 var(--mono); letter-spacing: -.04em; white-space: nowrap; }
.s-ps-livrables { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.s-ps-l { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-ps-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); }
.s-ps-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-ps-l b { font: 800 18px/1.15 var(--display); letter-spacing: -.015em; }
.s-ps-l p { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.s-ps-fin { padding: clamp(36px, 5vw, 60px); border-radius: 34px; background: var(--accent); text-align: center; }
.s-ps-fin h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1; letter-spacing: -.045em; color: var(--ink); }
.s-ps-fin p { margin: 16px 0 28px; font-size: clamp(16px, 1.4vw, 18px); color: #2C3600; }

/* ───────────── /incubateurs : la réussite des entrepreneurs, puis la gestion ───────────── */
.s-ia-heros { padding: clamp(48px, 7vw, 96px) 0 40px; }
.s-ia-heros h1 { max-width: 980px; font-size: clamp(40px, 6.4vw, 84px); line-height: .95; letter-spacing: -.055em; }
.s-ia-heros .s-chapo { max-width: 760px; margin-top: 22px; font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.5; }
.s-ia-heros .s-actions { margin-top: 28px; }
.s-bouton.s-ia-btn { min-height: 56px; padding: 0 28px; border-radius: 999px; color: var(--accent); font-size: 16px; }
.s-ia-stats-zone { padding-top: 20px; }
.s-ia-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-ia-stat { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 30px; background: var(--surface); box-shadow: var(--s3-ombre); }
.s-ia-stat.is-encre { background: var(--s3-encre); color: var(--s-encre-texte); }
.s-ia-stat.is-accent { background: var(--accent); color: var(--ink); }
.s-ia-stat b { font: 800 clamp(64px, 8vw, 104px)/.9 var(--mono); letter-spacing: -.07em; white-space: nowrap; }
.s-ia-stat h2 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.1; letter-spacing: -.03em; color: inherit; }
.s-ia-stat p { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.s-ia-stat.is-encre p { color: var(--s-encre-doux); }
.s-ia-stat.is-accent p { color: #2C3600; }
.s-ia-src { margin-top: 14px; font-size: 13px; color: var(--ink-4); }
.s-section.s-ia-sec { padding-top: clamp(56px, 6vw, 84px); padding-bottom: 0; }
.s-ia-sec h2 { max-width: 900px; font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
.s-ia-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.s-ia-phase { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 34px; border-radius: 28px; background: var(--surface); box-shadow: var(--s3-ombre-douce); overflow: hidden; }
.s-ia-phase::after { content: ''; position: absolute; left: 28px; right: 28px; bottom: 0; height: 6px; border-radius: 6px 6px 0 0; background: var(--accent-dim); }
.s-ia-phase:nth-child(2)::after { background: var(--ink-3); }
.s-ia-phase:nth-child(3)::after { background: var(--s3-encre); }
.s-ia-quand { font: 600 13px/1 var(--mono); color: var(--ink-4); }
.s-ia-phase h3.s-ia-mot { font: 800 clamp(40px, 4.3vw, 54px)/.95 var(--display); letter-spacing: -.06em; }
.s-ia-d { font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.s-ia-phase ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.s-ia-phase ul li { display: flex; gap: 9px; font: 600 14px/1.35 var(--sans); }
.s-ia-phase ul li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent-dim); }
.s-ia-gestion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 36px; margin-top: 36px; align-items: start; }
.s-ia-etapes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.s-ia-etape { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-ia-no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--s3-encre); color: var(--accent); font: 800 17px/1 var(--display); }
.s-ia-etape b { display: block; font: 800 20px/1.15 var(--display); letter-spacing: -.02em; }
.s-ia-etape div > span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.s-ia-promo { position: sticky; top: calc(var(--s-entete) + 20px); padding: 24px; border-radius: 30px; background: var(--s3-encre); color: var(--s-encre-texte); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6); }
.s-ia-promo-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.s-ia-promo-tete b { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; color: #fff; }
.s-ia-promo-tete span { font: 600 12.5px/1 var(--mono); color: var(--s-encre-doux); white-space: nowrap; }
.s-ia-coachs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.s-ia-coachs span { padding: 6px 10px; border-radius: 999px; background: rgba(242, 240, 232, .08); font: 600 12.5px/1 var(--sans); }
.s-ia-lignes { margin: 14px 0 0; padding: 0; list-style: none; }
.s-ia-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 10px; align-items: center; width: 100%; margin: 0; padding: 12px 10px; border: 0; border-top: 1px solid var(--s-encre-filet); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s var(--s-sortie); }
.s-ia-ligne:hover { background: rgba(242, 240, 232, .05); }
.s-ia-ligne[aria-selected="true"] { background: rgba(214, 240, 52, .1); box-shadow: inset 3px 0 0 var(--accent); }
.s-ia-ligne:focus-visible { outline-color: var(--accent); outline-offset: -2px; }
.s-ia-qui { display: block; min-width: 0; }
.s-ia-ligne b { display: block; font: 700 15px/1.2 var(--sans); color: #fff; }
.s-ia-ligne small { font-size: 12px; color: var(--s-encre-doux); }
.s-ia-ph { justify-self: start; padding: 4px 8px; border-radius: 7px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; background: rgba(242, 240, 232, .1); }
.s-ia-ph.is-launch { background: rgba(214, 240, 52, .16); color: var(--accent); }
.s-ia-ph.is-scale { background: var(--accent); color: var(--ink); }
.s-ia-etat { justify-self: end; padding: 5px 9px; border-radius: 999px; font: 600 11.5px/1.2 var(--sans); white-space: nowrap; background: rgba(242, 240, 232, .1); color: var(--s-encre-doux); }
.s-ia-etat.is-q { background: #FFF3D6; color: #7A5200; }
.s-ia-etat.is-ok { background: var(--accent); color: var(--ink); }
.s-ia-com { margin-top: 14px; padding: 14px; border-radius: 18px; background: rgba(242, 240, 232, .06); }
.s-ia-com p { font-size: 13.5px; line-height: 1.45; color: var(--s-encre-doux); }
.s-ia-com p b { color: var(--s-encre-texte); }
.s-ia-com p + p { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--s-encre-filet); }
.s-ia-fictif { margin-top: 10px; font-size: 12px; color: var(--s-encre-doux); }
/* Le dossier de l'entrepreneur choisi : trois chiffres, puis ses échanges avec le coach. */
.s-ia-panneau { margin-top: 14px; }
.s-ia-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.s-ia-chiffres div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(242, 240, 232, .06); }
.s-ia-chiffres dt { font-size: 11.5px; line-height: 1.3; color: var(--s-encre-doux); }
.s-ia-chiffres dd { margin: 0; font: 700 16px/1.1 var(--mono); color: #fff; white-space: nowrap; }
.s-ia-attente { font-style: italic; }
.s-ia-resoudre { margin-top: 10px; padding: 8px 14px; border: 1px solid var(--s-encre-filet); border-radius: 999px; background: none; color: var(--s-encre-texte); font: 600 13px/1.2 var(--sans); cursor: pointer; }
.s-ia-resoudre:hover { border-color: var(--s-encre-texte); }
.s-ia-resoudre[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.s-ia-fin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: clamp(24px, 3vw, 40px); padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 52px); border-radius: 34px; background: var(--accent); }
.s-ia-fin h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -.045em; color: var(--ink); }
.s-ia-fin h2 .s-ligne { display: block; }
.s-ia-prix { display: grid; justify-items: end; gap: 16px; text-align: right; }
.s-ia-prix b { display: block; font: 800 clamp(40px, 4.4vw, 56px)/1 var(--mono); letter-spacing: -.05em; white-space: nowrap; }
.s-ia-prix span { font: 600 14.5px/1.3 var(--sans); color: #2C3600; }
/* Le prix par entrepreneur, selon la taille de la promotion (tarifs.mjs, parFounderMois). */
.s-ia-calcul { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(14, 15, 12, .14); }
.s-ia-calcul-k { font: 600 15px/1.3 var(--sans); color: #2C3600; }
.s-ia-calcul-k b { font: 800 18px/1 var(--mono); color: var(--ink); }
.s-ia-curseur { width: 100%; margin: 4px 0; accent-color: var(--ink); cursor: pointer; }
.s-ia-calcul-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font: 600 15px/1.3 var(--sans); color: #2C3600; }
.s-ia-calcul-v b { font: 800 clamp(28px, 3vw, 38px)/1 var(--mono); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
/* L'offre pilote. */
.s-ia-pilote { display: grid; gap: 12px; justify-items: start; margin-top: 16px; padding: clamp(26px, 3vw, 36px) clamp(24px, 4vw, 44px); border-radius: 30px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-ia-pilote h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.035em; }
.s-ia-pilote p:not(.s-surtitre) { font-size: 15.5px; line-height: 1.55; color: var(--ink-3); }
/* Vos 30 premiers jours. */
.s-ia-jours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.s-ia-jour { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 24px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-ia-j { align-self: flex-start; padding: 6px 10px; border-radius: 10px; background: var(--s3-encre); color: var(--accent); font: 800 15px/1 var(--mono); }
.s-ia-jour b { font: 800 19px/1.15 var(--display); letter-spacing: -.02em; }
.s-ia-jour > span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
/* Le kit d'achat. */
.s-ia-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.s-ia-piece { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-ia-piece b { font: 800 19px/1.2 var(--display); letter-spacing: -.02em; }
.s-ia-piece span { flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.s-ia-piece a { font: 700 14.5px/1.2 var(--sans); color: var(--ink); text-underline-offset: 4px; }
.s-ia-faq { margin-top: 28px; }
/* Demander une démo : le formulaire. */
.s-ia-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 4vw, 56px); align-items: start; padding: clamp(28px, 4vw, 52px); border-radius: 34px; background: var(--s3-encre); color: var(--s-encre-texte); }
.s-ia-demo h2 { margin-top: 6px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.s-ia-demo h2 mark { color: var(--ink); }
.s-ia-demo .s-surtitre { color: var(--accent); }
.s-ia-demo-tete > p:not(.s-surtitre) { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--s-encre-doux); }
.s-ia-demo-tete a { color: var(--accent); }
.s-ia-form { position: relative; display: grid; gap: 14px; padding: 24px; border-radius: 26px; background: var(--surface); color: var(--ink); }
.s-ia-champ { display: grid; gap: 6px; font: 600 13.5px/1.3 var(--sans); }
.s-ia-champ small { font-weight: 500; color: var(--ink-4); }
.s-ia-champ input, .s-ia-champ textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--s-filet-fort); border-radius: 12px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.s-ia-champ textarea { resize: vertical; min-height: 84px; }
.s-ia-champ input:focus, .s-ia-champ textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.s-ia-champ [aria-invalid="true"] { border-color: var(--loss); }
/* Le champ que seuls les robots remplissent : hors de l'écran, hors du clavier. */
.s-ia-pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.s-ia-envoyer { justify-self: start; }
.s-ia-form-msg { min-height: 0; font: 600 14px/1.45 var(--sans); }
.s-ia-form-msg:empty { display: none; }
.s-ia-form-msg.is-erreur { color: var(--loss); }
.s-ia-form-msg.is-ok { color: #4A7300; }
.s-ia-rgpd { font-size: 12.5px; line-height: 1.45; color: var(--ink-4); }
.s-ia-merci { display: grid; gap: 8px; padding: 6px 2px; }
.s-ia-merci b { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.s-ia-merci span { font-size: 15px; line-height: 1.5; color: var(--ink-3); }

/* ───────────── /comparatif : le graphique, puis le détail ───────────── */
.s-cp-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 44px; align-items: center; }
.s-cp-tete h1 .s-ligne { display: block; }
.s-cp-carte { margin: 0; }
.s-cp-plan { position: relative; height: 500px; border-radius: 28px; background: var(--surface); box-shadow: var(--s3-ombre); overflow: hidden; }
.s-cp-axe { position: absolute; background: var(--rule); }
.s-cp-axe.is-x { left: 40px; right: 40px; top: 50%; height: 2px; }
.s-cp-axe.is-y { top: 40px; bottom: 40px; left: 50%; width: 2px; }
.s-cp-l { position: absolute; font: 600 12.5px/1.2 var(--sans); color: var(--ink-4); white-space: nowrap; }
.s-cp-l.is-h { top: 14px; left: 50%; transform: translateX(-50%); }
.s-cp-l.is-b { bottom: 14px; left: 50%; transform: translateX(-50%); }
.s-cp-l.is-g { left: 16px; top: calc(50% + 10px); }
.s-cp-l.is-d { right: 16px; top: calc(50% + 10px); }
.s-cp-zone { position: absolute; right: 42px; top: 42px; width: calc(50% - 44px); height: calc(50% - 44px); border-radius: 18px; background: var(--accent-wash); }
.s-cp-pt { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -50%); font: 700 15px/1 var(--display); letter-spacing: -.015em; white-space: nowrap; }
.s-cp-pt i { width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 4px #fff; }
.s-cp-pt.is-fynomia { font-size: 20px; }
.s-cp-pt.is-fynomia i { width: 24px; height: 24px; background: var(--s3-encre); box-shadow: 0 0 0 5px var(--accent); }
.s-cp-pt.is-expert { left: 24%; top: 22%; }
.s-cp-pt.is-consultant { left: 30%; top: 36%; }
.s-cp-pt.is-fynomia { left: 74%; top: 21%; }
.s-cp-pt.is-excel { left: 72%; top: 70%; }
.s-cp-pt.is-chatgpt { left: 60%; top: 84%; }
.s-cp-note { margin-top: 10px; padding-left: 24px; font-size: 12.5px; color: var(--ink-4); }
.s-cp-forces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.s-cp-f { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--s3-ombre-douce); }
.s-cp-f.is-nous { background: var(--s3-encre); color: var(--s-encre-texte); }
.s-cp-f h3 { font-size: 22px; line-height: 1.1; letter-spacing: -.03em; color: inherit; }
.s-cp-f p { font-size: 14.5px; line-height: 1.5; }
.s-cp-f b { display: block; margin-bottom: 4px; font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.s-cp-bien b { color: #4A7300; }
.s-cp-f.is-nous .s-cp-bien b { color: var(--accent); }
.s-cp-pas { color: var(--ink-3); }
.s-cp-pas b { color: var(--loss); }
.s-cp-f.is-nous .s-cp-pas { color: var(--s-encre-doux); }
.s-cp-f.is-nous .s-cp-pas b { color: #FF8DA6; }
/* Positionné : les libellés pour lecteurs d'écran (.s-sr, en absolu) restent dans le défilement. */
.s-cp-tab { position: relative; border-radius: 26px; background: var(--surface); box-shadow: var(--s3-ombre); overflow-x: auto; }
.s-cp-tab table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13.5px; }
.s-cp-tab th, .s-cp-tab td { padding: 12px; border-bottom: 1px solid var(--s3-filet); text-align: left; vertical-align: top; }
.s-cp-tab thead th { background: var(--surface-2); font: 700 14px/1.2 var(--display); letter-spacing: -.01em; }
.s-cp-tab thead th span { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--sans); color: var(--ink-4); letter-spacing: 0; }
.s-cp-tab th.is-nous, .s-cp-tab td.is-nous { background: rgba(214, 240, 52, .16); }
.s-cp-tab tbody th { width: 230px; font: 600 13.5px/1.3 var(--sans); }
.s-cp-tab td { color: var(--ink-3); }
.s-cp-marque { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; font: 800 11px/1 var(--sans); vertical-align: -4px; }
.s-cp-marque.is-o { background: var(--accent); color: var(--ink); }
.s-cp-marque.is-p { background: #FFF3D6; color: #7A5200; }
.s-cp-marque.is-n { background: var(--loss-wash); color: var(--loss); }
.s-cp-tab tr.is-prix th, .s-cp-tab tr.is-prix td { background: var(--s3-encre); color: #fff; border-bottom: 0; }
.s-cp-tab tr.is-prix td.is-nous { background: #1D2010; color: var(--accent); font-weight: 700; }
.s-cp-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13px; color: var(--ink-4); }
.s-cp-duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.s-cp-duo li { padding: 20px; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--s3-filet); }
.s-cp-duo b { display: block; font: 800 18px/1.2 var(--display); letter-spacing: -.015em; }
.s-cp-duo span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 1100px) {
  .s-ps-livrables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-ps-exemple, .s-ia-gestion, .s-cp-haut, .s-ia-demo { grid-template-columns: minmax(0, 1fr); }
  .s-ia-jours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-ia-promo { position: relative; top: 0; }
  .s-cp-forces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .s-ps-valeur, .s-ps-etapes, .s-ia-stats, .s-ia-phases, .s-cp-forces, .s-cp-duo, .s-ia-jours, .s-ia-kit, .s-ia-chiffres { grid-template-columns: minmax(0, 1fr); }
  .s-ia-demo { padding: 22px; }
  .s-ia-promo-tete { flex-direction: column; gap: 6px; }
  .s-ia-promo-tete span { white-space: normal; }
  .s-ia-form { padding: 18px; }
  .s-ps-livrables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-ps-l p { overflow-wrap: anywhere; }
  .s-ps-heros .s-actions { flex-direction: column; align-items: stretch; }
  .s-ps-chaine { padding: 20px; }
  .s-ia-fin { grid-template-columns: minmax(0, 1fr); }
  .s-ia-prix { justify-items: start; text-align: left; }
  .s-ia-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .s-ia-ligne .s-ia-etat { grid-column: 1 / -1; justify-self: start; }
  .s-cp-plan { height: 380px; }
  .s-cp-tab table { min-width: 720px; }
  .s-cp-tab tbody th { width: 140px; }
  .s-ps-avant p { padding: 16px; }
  .s-ps-avant b { font-size: 22px; }
  .s-cp-pt { font-size: 13px; }
  .s-cp-pt.is-fynomia { font-size: 16px; }
  .s-cp-l.is-g, .s-cp-l.is-d { top: calc(50% + 8px); font-size: 11.5px; }
}
@media (max-width: 520px) {
  .s-ps-livrables { grid-template-columns: minmax(0, 1fr); }
}