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

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

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

:root {
  color-scheme: light;

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

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

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

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

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

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

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

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

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

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

:root {
  --s-max: 1200px;
  --s-gouttiere: 32px;
  --s-section: clamp(72px, 8vw, 116px);
  --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: 64px;
  --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 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--ink); }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.s-prix-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--s-filet-fort); margin-bottom: 36px; }
.s-prix { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--s-filet); }
.s-prix + .s-prix { padding-left: 32px; border-left: 1px solid var(--s-filet); }
.s-prix-v { display: flex; align-items: baseline; gap: 10px; }
.s-prix-v b { font: 800 clamp(56px, 6vw, 88px)/.9 var(--display); letter-spacing: -.05em; }
.s-prix-v span { font: 500 15px/1 var(--mono); color: var(--ink-4); }
.s-prix-pour { margin: 16px 0 8px; font: 700 20px/1.3 var(--display); letter-spacing: -.015em; }
.s-prix > p:last-child { color: var(--ink-3); max-width: 34em; }

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

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

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

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

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

.s-page-tete { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.s-page-tete h1 { max-width: 20ch; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.038em; }
.s-page-tete .s-chapo { margin-top: 22px; }
.s-page-tete .s-actions { margin-top: 32px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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