/* === Tokens === */
:root {
  /* Papier teinté gris-bleu froid, registre du quotidien économique. Surtout pas
     un blanc cassé chaud : le crème + serif + vert sauge est la signature maison
     d'Anthropic, reconnue au premier coup d'œil comme « site fait par une IA ».
     Les écarts de clarté de l'ancienne rampe sont conservés (--paper -> --paper-2
     = 0,077 contre 0,086 avant), donc les surfaces gardent leur hiérarchie. */
  --paper-0: #eef1f5;
  --paper: #f4f6f9;
  --paper-2: #e9edf2;
  --paper-3: #dce2e9;
  --ink: #0b0e13;
  --ink-2: #1d222b;
  --ink-3: #545b66;
  --ink-4: #828995;
  --line: rgba(11, 14, 19, 0.12);
  --line-2: rgba(11, 14, 19, 0.05);
  /* Brique. Teinte retenue pour son rapport de contraste (5,93 sur --paper) : le
     terracotta clair #b85a3e ne tient que 4,24 et --accent habille 86 règles dont
     les liens en petit corps, ce qui aurait fait passer le site sous le seuil AA. */
  --accent: #9c4426;
  --accent-soft: #e8d2c4;
  --accent-ink: #f4f6f9;

  /* Surface de marque, volontairement hors de --accent : elle ne se remonte pas en thème
     sombre, pour que le bloc payant garde la même couleur partout. */
  --brand-surface: #9c4426;
  --brand-surface-2: #85391f;
  --danger: #b04a3a;
  --pop: #e8b339;

  /* Sens de lecture d'un montant : ce qui s'ajoute, ce qui se retire. Indépendant de --accent,
     qui change avec la palette : le vert et le rouge portent ici du sens, pas de l'identité. */
  --gain: #2f6b54;
  --gain-soft: rgba(47, 107, 84, 0.07);
  --charge: #b04a3a;
  --charge-soft: rgba(176, 74, 58, 0.07);

  /* Zodiak en titrage : serif à fort contraste, registre presse économique. Il
     remplace Instrument Serif (unslop-ignore : on nomme la police retiree), qui avec
     serifs « de bon goût » que tout site généré finit par servir.
     --serif est conservé en alias : 51 règles le référencent encore. */
  --display: "Zodiak", "Times New Roman", serif;
  --serif: var(--display);
  --sans: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --density: 1;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --col-gap: 24px;
  --container: 1280px;
}

[data-theme="dark"] {
  --paper: #0a0d12;
  /* --paper-0 n'était pas surchargé ici : il gardait sa valeur claire en thème sombre, si
     bien que tout ce qui s'en sert (bandes section.s-light, .split-card:not(.pro), cartes
     tarifaires, .trust-item) s'affichait en clair sous du texte clair — illisible. Bug
     antérieur au changement de palette, corrigé ici parce qu'il touche les mêmes surfaces. */
  --paper-0: #0f131a;
  --paper-2: #12161d;
  --paper-3: #1c2129;
  --ink: #e8ebef;
  --ink-2: #c8ccd2;
  --ink-3: #8a909a;
  --ink-4: #5d636d;
  --line: rgba(232, 235, 239, 0.10);
  --line-2: rgba(232, 235, 239, 0.05);
  --accent-soft: #3a2620;

  /* Les teintes claires tombent sous le seuil de contraste sur fond sombre : on remonte.
     --accent était jusqu'ici la seule à ne pas l'être et plafonnait à 3,11 ; la version
     remontée tient 5,51 et repasse le seuil AA en petit corps. */
  --accent: #c9714a;
  --gain: #6ab08e;
  --gain-soft: rgba(106, 176, 142, 0.10);
  --charge: #e08b74;
  --charge-soft: rgba(224, 139, 116, 0.10);
}

/* La brique est passée dans :root, donc l'ancienne variante « terracotta » a été retirée
   plutôt que laissée en doublon : sa teinte #b85a3e ne tenait que 4,24 sur le papier et
   la proposer au choix revenait à proposer de descendre sous le seuil AA. */
[data-palette="ink"] { --accent: #1f3a5f; --accent-soft: #c7d1de; }
[data-theme="dark"][data-palette="ink"] { --accent-soft: #1a2333; }
[data-palette="amber"] { --accent: #8a6a1f; --accent-soft: #e7dcc1; }
[data-theme="dark"][data-palette="amber"] { --accent-soft: #2e2818; }

/* === Reset === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, select { font: inherit; color: inherit; }

/* === Utilities === */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-feature-settings: "tnum", "zero"; }
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 500;
  color: var(--accent);
}
.divider { height: 1px; background: var(--line); width: 100%; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* === Header === */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
/* Lockup de marque (voir Components/Shared/BrandLogo.razor) : tuile accent +
   nom sur deux lignes. La tuile est la seule tache de couleur du header, tout le
   reste y est en encre. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.logo-mark {
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  display: grid;
  place-items: center;
  transition: background 0.18s ease;
}
.logo-mark svg { display: block; }
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.logo-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.logo:hover .logo-mark { background: var(--ink); }
.logo:hover .logo-sub { color: var(--accent); }
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* La nav est un rail segmenté : des libellés nus, sur fond de page, ne se lisaient
   pas comme des liens. Le rail donne à l'ensemble le statut de commande, chaque
   segment sa cible cliquable, et la page courante ressort en pastille claire. */
.nav-links {
  display: flex;
  gap: 0;
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 3px;
}
.nav-links a {
  position: relative;
  padding: 7px 13px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
/* Page courante : segment surélevé, libellé en accent (6:1 sur --paper, là où
   l'accent sur accent-soft tombait sous 4.5:1). */
.nav-links a.active {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* En sombre, --paper est plus foncé que le rail : c'est --paper-3 qui surélève. */
[data-theme="dark"] .nav-links a.active { background: var(--paper-3); color: var(--ink); box-shadow: none; }
.nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sépare les calculateurs des pages de lecture, puis de l'entrée entreprises. */
.nav-sep {
  width: 1px;
  height: 16px;
  flex: none;
  background: var(--line);
  margin: 0 7px;
}
.nav-actions { display: flex; gap: 8px; align-items: center; }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  /* Rayon de l'échelle, pas la pilule. La pilule reste employée là où elle dit quelque
     chose — segmentés (.nav-links, .calc-tabs, .calc-studio-period), badges (.pill,
     .price-badge), .toggle-dot — mais en faire la forme de tous les boutons du site
     l'empêchait de signifier quoi que ce soit. */
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); }
.btn-outline { border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--ink); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn:disabled,
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--ink); border-color: transparent; }
.btn-ghost:disabled:hover,
.btn-outline:disabled:hover { background: transparent; }

/* === Hero === */
.hero {
  padding: calc(48px * var(--density)) 0 calc(48px * var(--density));
  position: relative;
}
/* Le haut de page était un aplat de papier d'un bord à l'autre : le titre et le studio y
   flottaient sans fond. Une bande haute légèrement plus dense, teintée de brique du côté du
   titre, donne au calculateur un plan sur lequel se poser. z-index négatif : le voile passe
   sous tout le contenu du hero sans qu'aucun enfant n'ait à être remonté. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 540px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(78% 100% at 10% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    linear-gradient(to bottom, var(--paper-0), transparent);
}
.hero-top {
  display: grid;
  /* Colonne de titre élargie : Zodiak est nettement plus large qu'Instrument Serif (unslop-ignore) à
     corps égal, et la répartition 1.05/0.95 avait été réglée sur la seconde. Mesuré
     à 1425 px de viewport, le titre passait de 4 à 7 lignes sans cet élargissement. */
  grid-template-columns: 1.35fr 0.65fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 48px;
}
.hero-side {
  padding-bottom: 4px;
}
.hero-calc {
  margin-top: 0;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  /* -0.025em écrasait les empattements de Zodiak, dont le dessin à fort contraste
     demande de l'air là où Instrument Serif (unslop-ignore) supportait le resserrement. */
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin-top: 22px;
  text-wrap: balance;
}
/* Emphase par l'italique, dans la meme encre. Ce qui signait la mise en page generee,
   c'etait le mot en italique *teinte en accent* a la fin de chaque titre : la teinte, pas
   l'italique, qui est l'usage courant de la presse ecrite. On retire donc la couleur et on
   garde l'italique. Le gras a ete essaye puis ecarte : Zodiak est un serif a fort contraste
   dont le 700 ecrase le romain au lieu de le nuancer. */
.hero h1 em { font-style: italic; font-weight: 500; color: inherit; }
.hero-lede {
  margin-top: 28px;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 460px;
  line-height: 1.5;
}
.hero-meta {
  margin-top: 36px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-meta-item .num {
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero-meta-item .lbl {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.005em;
  font-weight: 500;
  color: var(--ink-3);
}

/* === Calculator studio === */
.calc-studio {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* `clip` clips the rounded corners WITHOUT creating a scroll container,
     ce qui permet au panneau résultat `position:sticky` de coller au viewport. */
  overflow: clip;
  box-shadow: 0 30px 80px -50px rgba(11, 14, 19, 0.25);
}
.calc-studio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 24px 32px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.calc-studio-head h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-top: 4px;
}
.calc-studio-head h3 em { font-style: italic; font-weight: 500; color: inherit; }
/* Onglets soulignés, et non un second rail en pastilles. Ce sélecteur était la copie exacte
   de .nav-links — même pilule, même rayon, même segment surélevé — posée à 300 px de lui :
   deux commandes de forme identique pour deux rôles sans rapport. Il change ici de famille
   de formes, et perd du poids : il ne touche pas au calcul, il choisit seulement le message
   affiché après le résultat. */
.calc-studio-period {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}
.calc-studio-period button {
  padding: 6px 1px 9px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.calc-studio-period button:hover { color: var(--ink); }
.calc-studio-period button.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.calc-studio-period button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.calc-studio-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}
/* Avant le clic sur « Calculer », le panneau résultat n'est pas rendu : le formulaire
   occupe toute la largeur du studio. */
.calc-studio-grid.no-result { grid-template-columns: 1fr; }
.calc-studio-grid.no-result .calc-form { border-right: 0; }

.calc-form {
  padding: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}
.tab-idx {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.calc-panel {
  padding: 0 32px 30px;
  flex: 1;
}

.calc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.calc-fields .full { grid-column: 1 / -1; }

/* Le montant, seule saisie qui décide du résultat : pleine ligne, et au corps qui
   correspond à son poids. Il partageait jusqu'ici la boîte grise de 15 px d'« Enfants à
   charge », face à un net affiché en 76 px — la hiérarchie était à l'envers pour un outil
   qu'on vient utiliser, pas lire. */
/* Les trois champs restants se répartissent sur la place disponible plutôt que sur une
   grille 2x2 figée, qui laissait « Enfants à charge » seul sur une demi-ligne une fois le
   montant sorti du rang. auto-fit retombe à deux colonnes puis à une, sans media query. */
.calc-panel-essentiel .calc-fields { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.calc-field-primary { grid-column: 1 / -1; }
.calc-field-primary .field-label { font-size: 12px; color: var(--ink-2); }
/* `.field-currency .field-input` (padding-left: 32px) est déclaré plus bas dans le fichier,
   à spécificité égale : il l'emportait et ramenait le montant contre le symbole €. On passe
   donc par trois classes. */
.calc-field-primary .field-currency .field-input {
  font-size: 30px;
  letter-spacing: -0.015em;
  padding: 14px 16px 14px 54px;
  border-radius: var(--r-md);
}
.calc-field-primary .field-currency::before {
  font-size: 24px;
  left: 20px;
  color: var(--ink-4);
}

.calc-foot {
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper);
  /* Le bouton de calcul reste atteignable quand le formulaire complet dépasse l'écran. */
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.calc-foot-hint {
  font-size: 12px;
  color: var(--ink-3);
}
.calc-foot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.calc-foot-error {
  font-size: 12px;
  color: var(--danger);
  max-width: 260px;
}

.calc-result {
  /* Halo de brique retombant derrière le montant, plutôt qu'un aplat d'encre. Il donne au
     panneau une source lumineuse en haut à gauche — là où se lit le chiffre — et le détache
     du papier. `background-attachment: scroll` par défaut : le halo ne suit pas le contenu
     quand le panneau devient scrollable en mode étendu. */
  background:
    radial-gradient(118% 76% at 6% 0%, rgba(201, 113, 74, 0.17), transparent 58%),
    var(--ink);
  color: var(--paper);
  /* Ce panneau est sombre y compris en thème clair : les valeurs remontées de
     [data-theme="dark"] ne s'y appliquent donc pas et --gain / --charge y arrivaient
     dans leur version « sur papier », sous le seuil de contraste. On les redéfinit
     pour la surface, ce qui vaut pour tout ce que le panneau contient. */
  --accent: #c9714a;
  --gain: #6ab08e;
  --gain-soft: rgba(106, 176, 142, 0.10);
  --charge: #e08b74;
  --charge-soft: rgba(224, 139, 116, 0.10);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .calc-result {
  background:
    radial-gradient(118% 76% at 6% 0%, rgba(201, 113, 74, 0.13), transparent 58%),
    var(--paper-2);
  color: var(--ink);
  border-left: 1px solid var(--line);
}
.calc-result::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.calc-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(232, 235, 239, 0.08);
}
[data-theme="dark"] .calc-result-head { border-color: var(--line); }
.calc-result-head .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
[data-theme="dark"] .calc-result-head .lbl { color: var(--ink-3); }
/* La pastille « Live » et son point pulsant ont été retirés (voir ResultPanel.razor) :
   ils annonçaient du temps réel sur un calcul déterministe. `@keyframes pulse` partait
   avec eux, il n'avait pas d'autre usage. */
.calc-result-net {
  padding: 22px 0 16px;
}
.calc-result-net .label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-4);
}
[data-theme="dark"] .calc-result-net .label { color: var(--ink-3); }
.calc-result-net .amt {
  font-family: var(--serif);
  font-size: 76px;
  letter-spacing: -0.012em;
  line-height: 0.92;
  margin-top: 6px;
  display: block;
}
.calc-result-net .sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 8px;
}
[data-theme="dark"] .calc-result-net .sub { color: var(--ink-3); }

.calc-result-bar {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(232, 235, 239, 0.06);
  margin: 18px 0;
}
[data-theme="dark"] .calc-result-bar { background: var(--paper-3); }
.calc-result-bar span { display: block; height: 100%; }
.calc-result-bar .net { background: var(--accent); }
.calc-result-bar .onss { background: var(--pop); }
/* Le précompte est le prélèvement le plus lourd du calcul (617 € contre 457 € d'ONSS sur un
   brut de 3 500 €) et il était peint à 0,4 d'opacité, donc plus effacé que l'ONSS en ambre
   pleine. Le poids visuel disait l'inverse du chiffre, sur la page dont c'est tout le sujet.
   Il passe devant, et les retenues résiduelles reculent d'autant. */
.calc-result-bar .tax { background: rgba(232, 235, 239, 0.74); }
[data-theme="dark"] .calc-result-bar .tax { background: var(--ink-2); }
/* Retenues sur le net (cotisation spéciale, chèques-repas, ATN…) */
.calc-result-bar .other { background: rgba(232, 235, 239, 0.26); }
[data-theme="dark"] .calc-result-bar .other { background: var(--ink-4); }

.calc-result-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 0;
}
.calc-result-row .label {
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .calc-result-row .label { color: var(--ink-3); }
.calc-result-row .label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--ink-4);
}
[data-theme="dark"] .calc-result-row .label::before { background: var(--ink-3); }
.calc-result-row.net .label::before { background: var(--accent); }
.calc-result-row.onss .label::before { background: var(--pop); }
.calc-result-row.tax .label::before { background: rgba(232, 235, 239, 0.74); }
/* La pastille de légende suit la couleur du segment correspondant dans la barre : en sombre
   elle restait sur --ink-3, c'est-à-dire la teinte des lignes neutres, et le précompte ne se
   distinguait plus de « Brut » dans la liste alors qu'il ressortait dans la barre. */
[data-theme="dark"] .calc-result-row.tax .label::before { background: var(--ink-2); }
.calc-result-row.other .label::before { background: rgba(232, 235, 239, 0.26); }
[data-theme="dark"] .calc-result-row.other .label::before { background: var(--ink-4); }
.calc-result-row .val {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .calc-result-row .val { color: var(--ink); }
/* Le bonus emploi est un montant qui s'ajoute : il relève de --gain, pas de la couleur
   de marque. Le rattachement à --accent passait inaperçu tant que celle-ci était verte. */
.calc-result-row.bonus .val { color: var(--gain); }

/* Sous-total « Revenus bruts imposables » et total « Net en poche » : pas de pastille,
   séparés du bloc de lignes qui les précède. */
.calc-result-row.sub,
.calc-result-row.total {
  border-top: 1px solid rgba(232, 235, 239, 0.08);
  padding-top: 12px;
  margin-top: 2px;
}
[data-theme="dark"] .calc-result-row.sub,
[data-theme="dark"] .calc-result-row.total { border-color: var(--line); }
.calc-result-row.sub .label::before,
.calc-result-row.total .label::before { display: none; }
.calc-result-row.sub .label,
.calc-result-row.total .label { color: var(--paper); }
[data-theme="dark"] .calc-result-row.sub .label,
[data-theme="dark"] .calc-result-row.total .label { color: var(--ink); }
.calc-result-row.total .val { color: var(--accent); }

.calc-result-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.calc-result-kpi {
  background: rgba(232, 235, 239, 0.05);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
[data-theme="dark"] .calc-result-kpi { background: var(--paper-3); }
.calc-result-kpi .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
[data-theme="dark"] .calc-result-kpi .lbl { color: var(--ink-3); }
.calc-result-kpi .val {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.calc-result-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(232, 235, 239, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="dark"] .calc-result-footer { border-color: var(--line); }
.calc-result-cost {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.calc-result-cost .lbl {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}
[data-theme="dark"] .calc-result-cost .lbl { color: var(--ink-3); }
.calc-result-cost .val {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
}
.calc-result-cost .val .cur {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  margin-left: 4px;
}
[data-theme="dark"] .calc-result-cost .val .cur { color: var(--ink-3); }

.calc-result-export {
  display: flex;
  gap: 8px;
}
.calc-result-export .btn {
  flex: 1;
  justify-content: center;
}
.calc-result .btn-primary {
  background: var(--paper);
  color: var(--ink);
}
.calc-result .btn-primary:hover { background: var(--pop); }
.calc-result .btn-outline {
  border-color: rgba(232, 235, 239, 0.2);
  color: var(--paper);
}
[data-theme="dark"] .calc-result .btn-outline {
  border-color: var(--line);
  color: var(--ink);
}
.calc-result .btn-outline:hover { border-color: var(--paper); }

/* Field tweaks for studio */
.calc-form .field-input,
.calc-form .field-select {
  background: var(--paper);
}

/* === Formulaire en deux temps ===
   Bloc essentiel toujours visible (montant, statut, état civil, enfants), puis un unique
   bouton qui ouvre tout le reste. Un champ replié compte toujours dans le calcul. */
.calc-panel-essentiel {
  padding-top: 28px;
}

.calc-details {
  border-top: 1px solid var(--line);
}
.calc-details-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 32px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.calc-details-toggle:hover { background: var(--paper-2); }
.calc-details-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Signe + / − dessiné en CSS : une icône de plus à charger pour deux traits. */
.calc-details-sign {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--line-2, var(--line));
  border-radius: 6px;
  background: var(--paper-2);
}
.calc-details-sign::before,
.calc-details-sign::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto;
  height: 1.5px;
  background: var(--ink-2);
  transform: translateY(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.calc-details-sign::after { transform: translateY(-50%) rotate(90deg); }
.calc-details-toggle.open .calc-details-sign::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.calc-details-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.calc-details-label strong {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.calc-details-apercu {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}

.calc-details-body[hidden] { display: none; }
.calc-detail-group {
  border-top: 1px solid var(--line);
}
.calc-group-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 22px 32px 16px;
}
.calc-group-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.calc-group-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  max-width: 560px;
}

/* Le formulaire complet est long : le résultat doit rester sous les yeux pendant qu'on
   ajuste les champs du bas. */
.calc-studio-grid.expanded {
  /* Surface du panneau résultat, répétée par le fond de colonne ci-dessous. En clair c'est
     l'encre ; en sombre le panneau bascule sur --paper-2, et le fond de colonne codait
     --ink en dur — soit, une fois --ink remonté en clair par le thème, une dalle blanche
     sous le panneau dès que le formulaire est plus long que lui. Bug antérieur. */
  --result-surface: var(--ink);
  align-items: start;
  /* Le panneau collant est plus court que le formulaire : sans ce fond, la colonne de droite
     laisse voir le papier du studio sous le bloc sombre. Le point de coupure suit exactement
     le partage 1.5fr / 1fr des colonnes. */
  background: linear-gradient(to right, transparent 0 60%, var(--result-surface) 60% 100%);
  /* `auto 1fr` : quand le panneau résultat, qui enjambe les deux rangées, est plus haut que
     la colonne de gauche, tout le surplus tombe dans la rangée 2 — celle du bloc employeur,
     qui l'absorbe. Sans cette consigne la grille répartissait le reste entre les deux
     rangées et rouvrait un vide de ~100 px entre le formulaire et le bloc. */
  grid-template-rows: auto 1fr;
}
[data-theme="dark"] .calc-studio-grid.expanded { --result-surface: var(--paper-2); }
/* Le panneau résultat est plus haut que le formulaire : la colonne de gauche s'arrêtait
   ~200 px avant le bas du studio, sur un aplat de gris. Le bloc employeur vient l'occuper.
   Il suit le panneau dans le DOM — c'est l'ordre qu'on veut en une colonne — et la grille le
   replace ici en colonne 1, sous le formulaire. Le panneau, lui, enjambe les deux rangées :
   `align-self: start` (hérité de `align-items`) préserve le `position: sticky` dont il dépend,
   et `stretch` sur le bloc employeur lui fait absorber ce qui resterait si le panneau était
   encore le plus haut des trois. */
.calc-studio-grid.expanded .calc-form { grid-column: 1; grid-row: 1; }
.calc-studio-grid.expanded .calc-employer { grid-column: 1; grid-row: 2; align-self: stretch; }
.calc-studio-grid.expanded .calc-result { grid-column: 2; grid-row: 1 / span 2; }
.calc-studio-grid.expanded .calc-result {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* === Révélation du résultat ===
   Le panneau n'existe pas avant le clic sur « Calculer » : son arrivée est le seul moment
   du site qui mérite d'être mis en scène, et c'est le moment où le visiteur obtient ce
   qu'il est venu chercher. Une seule séquence orchestrée — le montant se pose, la barre
   se remplit de gauche à droite, les lignes du calcul tombent l'une après l'autre — plutôt
   que des micro-transitions dispersées sur toute la page.

   Tout est porté par les enfants, jamais par `.calc-result` lui-même : ce dernier est
   `position: sticky` en mode étendu, et une transform dessus le décollerait de son ancrage.
   Le panneau étant monté une fois pour toutes (les recalculs ne remplacent que du texte),
   la séquence ne joue qu'à la première apparition — elle ne se rejoue pas à chaque frappe. */
@keyframes calc-reveal-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes calc-reveal-amount {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* Balayage plutôt que fondu : la barre est une répartition, on la voit se répartir. */
@keyframes calc-wipe-x {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes calc-rule-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.calc-result::before {
  transform-origin: 50% 50%;
  animation: calc-rule-in 0.7s 0.04s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.calc-result-head {
  animation: calc-reveal-up 0.5s 0.02s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.calc-result-net .label {
  animation: calc-reveal-up 0.5s 0.1s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.calc-result-net .amt {
  animation: calc-reveal-amount 0.62s 0.14s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.calc-result-bar {
  animation: calc-wipe-x 0.72s 0.3s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.calc-result-rows .calc-result-row {
  animation: calc-reveal-up 0.44s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
/* Cascade de 50 ms : assez pour lire l'enchaînement brut -> imposable -> net, assez court
   pour que la dernière ligne soit posée avant qu'on ait fini de lire le montant. */
.calc-result-rows .calc-result-row:nth-child(1) { animation-delay: 0.38s; }
.calc-result-rows .calc-result-row:nth-child(2) { animation-delay: 0.43s; }
.calc-result-rows .calc-result-row:nth-child(3) { animation-delay: 0.48s; }
.calc-result-rows .calc-result-row:nth-child(4) { animation-delay: 0.53s; }
.calc-result-rows .calc-result-row:nth-child(5) { animation-delay: 0.58s; }
.calc-result-rows .calc-result-row:nth-child(6) { animation-delay: 0.63s; }
.calc-result-rows .calc-result-row:nth-child(7) { animation-delay: 0.68s; }
.calc-result-rows .calc-result-row:nth-child(8) { animation-delay: 0.73s; }
.calc-result-rows .calc-result-row:nth-child(n + 9) { animation-delay: 0.78s; }
.calc-result-kpis {
  animation: calc-reveal-up 0.5s 0.84s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.calc-result-footer {
  animation: calc-reveal-up 0.5s 0.92s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

/* Input groups (range + value) */
.field-range {
  display: flex;
  align-items: center;
  gap: 14px;
}
.field-range input[type="range"] {
  flex: 1;
  appearance: none;
  height: 4px;
  background: var(--paper-3);
  border-radius: 99px;
}
.field-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.field-range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 3px solid var(--paper);
}
.field-range .val {
  font-family: var(--mono);
  font-size: 13px;
  min-width: 56px;
  text-align: right;
  background: var(--paper);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* Mini toggles inside calc */
.mini-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 13px;
}
.mini-toggle:hover { border-color: var(--ink-3); }
.mini-toggle input { display: none; }
.mini-toggle input:checked ~ .mini-toggle-dot {
  background: var(--accent);
}
.mini-toggle input:checked ~ .mini-toggle-dot::after {
  transform: translateX(14px);
}
.mini-toggle-dot {
  width: 32px;
  height: 18px;
  background: var(--paper-3);
  border-radius: 99px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.mini-toggle-dot::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.mini-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.mini-toggle-label .name { font-weight: 500; color: var(--ink); }
.mini-toggle-label .desc { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }

/* Region pills */
.region-pills {
  display: flex;
  gap: 0;
  background: var(--paper);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.region-pills button {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.region-pills button.active {
  background: var(--ink);
  color: var(--paper);
}
.region-pills button .sub {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.6;
}

/* === Calculator card === */
.calc {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  box-shadow: 0 1px 0 var(--paper-3), 0 30px 80px -40px rgba(20, 22, 24, 0.25);
}
.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.calc-tabs {
  display: flex;
  gap: 2px;
  background: var(--paper-3);
  padding: 3px;
  border-radius: 999px;
}
.calc-tab {
  padding: 7px 14px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--ink-3);
  font-weight: 500;
}
.calc-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 500;
  color: var(--ink-3);
}
.field-input,
.field-select {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--mono);
  transition: border-color 0.15s;
  width: 100%;
}
.field-select {
  font-family: var(--sans);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%235a5f66' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field-input:focus, .field-select:focus {
  outline: none;
  border-color: var(--ink);
}
.field-input.field-error,
.field-select.field-error { border-color: var(--danger); }
.field-input.field-error:focus,
.field-select.field-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(176, 74, 58, 0.12); }
textarea.field-input { font-family: var(--sans); resize: vertical; min-height: 80px; }
.field-currency { position: relative; }
.field-currency .field-input { padding-left: 32px; }
.field-currency::before {
  content: "€";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  color: var(--ink-3);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}
.toggle-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 13px;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink-2);
}
.toggle input { display: none; }
.toggle-dot {
  width: 32px;
  height: 18px;
  background: var(--paper-3);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
}
.toggle-dot::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle input:checked + .toggle-dot { background: var(--accent); }
.toggle input:checked + .toggle-dot::after { transform: translateX(14px); }

/* === Result === */
.result {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: 22px;
  margin-top: 18px;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .result {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.result-net {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.result-net .amt {
  font-family: var(--serif);
  font-size: 56px;
  letter-spacing: -0.014em;
  line-height: 1;
}
.result-net .cur { font-family: var(--mono); font-size: 14px; color: var(--ink-4); }
.result-net .per { font-family: var(--mono); font-size: 12px; color: var(--ink-4); margin-left: 4px; }
[data-theme="dark"] .result-net .cur,
[data-theme="dark"] .result-net .per { color: var(--ink-3); }
.result-bar {
  display: flex;
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  margin: 18px 0 14px;
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .result-bar { background: var(--line); }
.result-bar span { display: block; height: 100%; }
.result-bar .net { background: var(--accent); }
.result-bar .onss { background: var(--pop); }
.result-bar .tax { background: var(--paper-3); opacity: 0.6; }
.result-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
[data-theme="dark"] .result-breakdown { border-color: var(--line); }
.bd-item .bd-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  display: flex; align-items: center; gap: 6px;
}
.bd-item .bd-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4);
}
.bd-item.net .bd-label::before { background: var(--accent); }
.bd-item.onss .bd-label::before { background: var(--pop); }
.bd-item.tax .bd-label::before { background: var(--paper-3); }
.bd-item .bd-val {
  font-family: var(--mono);
  font-size: 16px;
  margin-top: 4px;
  font-feature-settings: "tnum";
}

/* === Sections === */
section.s { padding: calc(96px * var(--density)) 0; border-top: 1px solid var(--line); position: relative; }
/* Section background variants — alternance pour casser la monotonie grise */
section.s.s-light { background: var(--paper-0); }
section.s.s-tint { background: var(--paper-2); }
section.s.s-dark { background: var(--ink); color: var(--paper); }
section.s.s-dark h2, section.s.s-dark h3, section.s.s-dark h4 { color: var(--paper); }
section.s.s-dark .intro, section.s.s-dark p { color: rgba(232, 235, 239, 0.78); }
section.s.s-dark .eyebrow { color: rgba(232, 235, 239, 0.55); }
/* On lighter sections, soften cards a touch so they remain distinct */
section.s.s-light .feat,
section.s.s-light .stat-card,
section.s.s-light .price-card:not(.feature),
section.s.s-light .split-card:not(.pro) { background: var(--paper-0); }
section.s.s-tint .feat { background: var(--paper); }
.section-head {
  display: block;
  margin-bottom: 64px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.014em;
  line-height: 1.02;
}
.section-head h2 em { font-style: italic; font-weight: 500; color: inherit; }
.section-head h2 .num { margin-right: 0.5em; }
.section-head .intro {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 720px;
  margin-top: 16px;
}

/* === Audience split === */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.split-card {
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 48px 40px 40px;
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
.split-card:hover { border-color: var(--ink-3); }
/* La carte Pro est la seule grande surface de marque du site : elle porte la brique, et
   la couleur y gagne un sens — brique = ce qui est payant. Elle ne suit pas --accent, qui
   s'éclaircit en thème sombre : une surface de marque doit rester la même dans les deux
   thèmes, et le --accent remonté (#c9714a) ne tient que 3,53 sous du texte blanc.
   Le blanc sur --brand-surface tient 6,43. */
.split-card.pro {
  background: var(--brand-surface);
  color: #fff;
  border-color: var(--brand-surface);
  /* Redéfini pour la surface : l'ambre --pop tombe à 3,35 sur brique. Ce jeton couvre
     d'un coup les `var(--pop)` posés en style inline dans BrutVersNet.razor. */
  --pop: #f5d9a0;
}
.split-card.pro:hover { background: var(--brand-surface-2); border-color: var(--brand-surface-2); }
.split-card .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
/* --ink-4 tombait à 1,82 sur brique. Les blancs semi-opaques ci-dessous tiennent 4,7 et plus. */
.split-card.pro .tag { color: rgba(255, 255, 255, 0.86); }
.split-card h3 {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.014em;
  margin-bottom: 14px;
  font-weight: 400;
}
.split-card .desc {
  color: var(--ink-2);
  max-width: 420px;
  margin-bottom: 28px;
}
.split-card.pro .desc { color: rgba(255, 255, 255, 0.86); }
.split-card ul {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.split-card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
}
.split-card li::before {
  content: "→";
  font-family: var(--mono);
  color: var(--accent);
  flex-shrink: 0;
}
.split-card.pro li::before { color: rgba(255, 255, 255, 0.9); }
.split-card .cta-row { margin-top: auto; display: flex; gap: 10px; align-items: center; }

/* Le bouton d'appel de la carte était en .btn-accent, donc brique : il aurait disparu sur
   une carte brique. Inversé en blanc plein, texte brique — 6,43 dans les deux sens. */
.split-card.pro .btn-accent { background: #fff; color: var(--brand-surface); border-color: #fff; }
.split-card.pro .btn-accent:hover { background: rgba(255, 255, 255, 0.88); }

/* === SaaS preview === */
.saas-frame {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(20, 22, 24, 0.25);
}
.saas-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.saas-dots { display: flex; gap: 6px; }
.saas-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-3); }
.saas-url {
  flex: 1;
  background: var(--paper-2);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}
.saas-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 540px;
}
.saas-sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
}
.saas-sidebar .org {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  margin-bottom: 18px;
}
.org-mark {
  width: 22px; height: 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}
.saas-nav { display: flex; flex-direction: column; gap: 1px; }
.saas-nav-section {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 14px 8px 6px;
}
.saas-nav a {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.saas-nav a:hover { background: var(--paper-2); }
.saas-nav a.active { background: var(--paper-2); color: var(--ink); font-weight: 500; }
.saas-nav a .icn { width: 14px; height: 14px; opacity: 0.6; }
.saas-nav a.active .icn { opacity: 1; }

.saas-main { padding: 22px 28px; }
.saas-main-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.saas-main-head h4 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.saas-main-head .sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.saas-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}
.stat-card .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-card .val {
  font-family: var(--serif);
  font-size: 26px;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.stat-card .delta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
}
.stat-card .delta.down { color: var(--danger); }

.saas-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.saas-table-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.9fr 80px;
  padding: 10px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.saas-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.9fr 80px;
  padding: 12px 16px;
  font-size: 13px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
}
.saas-table-row:last-child { border-bottom: 0; }
.saas-table-row:hover { background: var(--paper-2); }
.emp {
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}
.pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill.warn { background: rgba(217, 184, 106, 0.2); color: #8a6a1f; border-color: transparent; }

/* === Features grid === */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-radius: var(--r-lg);
}
.features.cols-1 { grid-template-columns: 1fr; }
.features.cols-2 { grid-template-columns: repeat(2, 1fr); }
.features.cols-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 760px) {
  .features.cols-2 { grid-template-columns: 1fr; }
}
.feat {
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 26px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, transform 0.2s;
}
a.feat { color: inherit; }
a.feat:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.feat .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.feat h4 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.feat p {
  color: var(--ink-2);
  font-size: 14px;
  margin-top: auto;
}

/* === Pricing === */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pricing.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .pricing.cols-2 { grid-template-columns: 1fr; }
}
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
/* Même surface de marque que .split-card.pro : l'offre commerciale se reconnaît à la brique
   partout, au lieu d'être brique sur l'accueil et encre dans le comparatif de prix.
   La hiérarchie entre les deux cartes payantes reste portée par bordée vs pleine. */
.price-card.feature {
  background: var(--brand-surface);
  color: #fff;
  border-color: var(--brand-surface);
  /* PricingCards.razor pose deux <p> en style inline sur var(--ink-3) / var(--ink-4)
     (prix barré, « réservé aux N premiers »). On redéfinit les jetons pour la surface
     plutôt que d'aller réécrire des couleurs dans le markup : --ink-4 valait 1,82 ici. */
  --ink-3: rgba(255, 255, 255, 0.92);
  --ink-4: rgba(255, 255, 255, 0.86);
  position: relative;
}
.price-card.feature::before {
  content: "Recommandé";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.price-name { font-family: var(--serif); font-size: 24px; }
.price-tag { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 6px; }
.price-tag .amt { font-family: var(--serif); font-size: 56px; line-height: 1; letter-spacing: -0.014em; }
.price-tag .per { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.price-card.feature .price-tag .per { color: var(--ink-4); }

.price-desc { font-size: 13px; color: var(--ink-3); margin-bottom: 24px; min-height: 36px; }

.price-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; margin-bottom: 28px; flex: 1; }
.price-list li::before { content: "✓ "; color: var(--accent); font-family: var(--mono); margin-right: 6px; }
.price-card.feature .price-list li::before { color: rgba(255, 255, 255, 0.9); }
/* Le CTA de la carte etait .btn-accent, donc brique : invisible sur fond brique. Inverse. */
.price-card.feature .btn-accent { background: #fff; color: var(--brand-surface); border-color: #fff; }
.price-card.feature .btn-accent:hover { background: rgba(255, 255, 255, 0.88); }

/* === Footer === */
footer {
  border-top: 1px solid var(--line);
  padding: 72px 0 28px;
  background: var(--paper);
}
.foot-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.foot-tag-wrap {
  display: flex;
  flex-direction: column;
}
.foot-logo { margin-bottom: 20px; align-self: flex-start; }
.foot-newsletter {
  max-width: 460px;
  margin-left: auto;
  width: 100%;
}
.foot-news-form {
  display: flex;
  gap: 8px;
}
.foot-news-form .field-input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--sans);
  width: 100%;
}
.foot-news-form .field-input:focus { outline: none; border-color: var(--ink); }

.foot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.foot-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { font-size: 13px; color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); }
.foot-col sup { font-size: 0.7em; }

.foot-legal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-bottom: 36px;
}
.foot-legal-list a { font-size: 12px; }
.foot-social {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.foot-social a {
  font-size: 13px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.foot-social a::after {
  content: "↗";
  font-family: var(--mono);
  color: var(--ink-4);
  font-size: 11px;
}
.foot-social a:hover { color: var(--ink); }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
}
.foot-tagline {
  font-family: var(--serif);
  font-size: 40px;
  letter-spacing: -0.014em;
  line-height: 1.05;
  max-width: 440px;
}

/* Le bandeau défilant (.ticker) a été retiré avec son seul usage, l'accueil. */

/* === Comparison / chart === */
.compare {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}
.chart {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.chart-head h5 { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.chart-head .legend { display: flex; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.chart-head .legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-head .legend span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.chart-head .legend span.alt::before { background: var(--pop); }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.bar {
  border-radius: 3px 3px 0 0;
}
.bar.net { background: var(--accent); }
.bar.contrib { background: var(--pop); }
.bar-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* === Faq === */
.faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink); }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
}
.faq-item > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 26px 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary .pl {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-0);
}
.faq-item[open] > summary { color: var(--ink); }
.faq-item[open] > summary .pl {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faq-a,
.faq-item > .faq-a {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  max-width: 760px;
  padding: 0 4px 26px;
}
/* Legacy non-details variant (for places that still use .open class) */
.faq-item:not([open]) > .faq-q + .faq-a:not(:empty) {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 26px 4px;
}
.faq-q .pl {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 0.3s;
  flex-shrink: 0;
}

/* === CTA === */
.cta-block {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .cta-block { background: var(--paper-2); color: var(--ink); }
.cta-block h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.014em;
  font-weight: 400;
}
.cta-block h2 em { font-style: italic; font-weight: 500; color: inherit; }
.cta-block p { color: rgba(232, 235, 239, 0.7); margin-top: 18px; max-width: 480px; }
[data-theme="dark"] .cta-block p { color: var(--ink-2); }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-block .btn-primary { background: var(--paper); color: var(--ink); }
.cta-block .btn-primary:hover { background: var(--pop); }
.cta-block .btn-ghost { color: var(--paper); border: 1px solid rgba(232, 235, 239, 0.3); }
[data-theme="dark"] .cta-block .btn-ghost { color: var(--ink); border-color: var(--line); }

/* === Density variants === */
[data-density="compact"] { --density: 0.7; }
[data-density="spacious"] { --density: 1.15; }

/* === Responsive === */
/* Desktop étroit : les pastilles de nav se resserrent au lieu de passer à la ligne
   (en dessous de 980px c'est le tiroir mobile qui prend le relais). */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav-links a, .nav-links .nav-pro-dd > summary { padding: 7px 9px; }
  .nav-sep { margin: 0 3px; }
}

@media (max-width: 980px) {
  /* Longhand + !important : préserve l'espacement latéral même quand une page
     pose un padding vertical inline (style="padding: Npx 0") sur .container. */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-grid, .hero-top { grid-template-columns: 1fr; }
  .split, .features, .pricing { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; gap: 32px; }
  .cta-block { grid-template-columns: 1fr; padding: 48px 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 36px; margin-bottom: 36px; }
  .foot-newsletter { margin-left: 0; max-width: 100%; }
  .foot-legal { grid-template-columns: 1fr 1fr; gap: 28px; }
  .saas-body { grid-template-columns: 1fr; }
  .saas-sidebar { display: none; }
  .nav-links { display: none; }
  .saas-table-head, .saas-table-row { grid-template-columns: 1.4fr 1fr 0.9fr; }
  .saas-table-head > *:nth-child(n+4), .saas-table-row > *:nth-child(n+4) { display: none; }
  .calc-studio-grid { grid-template-columns: 1fr; }
  /* En une seule colonne, le résultat passe sous le formulaire : ni sticky, ni fond de colonne.
     Le placement en deux rangées de la version large est annulé — l'ordre du DOM suffit, et
     c'est celui qu'on veut : formulaire, net, puis l'encadré employeur. */
  .calc-studio-grid.expanded { background: none; grid-template-rows: none; }
  .calc-studio-grid.expanded .calc-form,
  .calc-studio-grid.expanded .calc-employer,
  .calc-studio-grid.expanded .calc-result { grid-column: auto; grid-row: auto; }
  .calc-studio-grid.expanded .calc-result { position: static; max-height: none; overflow: visible; }
  .calc-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .calc-fields { grid-template-columns: 1fr; }

  /* En colonne unique, le studio est réordonné : titre, champs, puis seulement le sélecteur
     d'intention. `display: contents` sort les deux enfants de l'en-tête pour qu'ils prennent
     leur place parmi les blocs du studio ; le bandeau de tête reporte donc ses marges et son
     filet sur .calc-studio-title. Le sélecteur ne touche pas au calcul et occupait une ligne
     pleine juste au-dessus du champ montant. */
  .calc-studio { display: flex; flex-direction: column; }
  .calc-studio-head { display: contents; }
  .calc-studio-title {
    order: 1;
    padding: 20px 20px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .calc-studio-grid { order: 2; }
  .calc-intent {
    order: 3;
    padding: 18px 20px;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }

  /* La barre d'action est collée en bas de fenêtre tant que le formulaire est à l'écran :
     elle passe donc par-dessus les champs. Sans ombre, sur un fond quasi identique à celui
     des champs, un champ à moitié recouvert se lisait comme un défaut d'affichage. */
  .calc-foot { box-shadow: 0 -12px 26px -18px rgba(11, 14, 19, 0.65); }

  /* Formulaire remonté sous le titre, chapô renvoyé dessous. `order` seulement : l'ordre du
     DOM (titre → chapô → calculateur) est conservé pour l'indexation. */
  .hero-calc-first .container { display: flex; flex-direction: column; }
  .hero-calc-first .hero-top { display: contents; }
  .hero-calc-first .hero-copy { order: 1; }
  .hero-calc-first .hero-calc { order: 2; margin-top: 28px; }
  .hero-calc-first .hero-side { order: 3; margin-top: 32px; padding-bottom: 0; }
  .hero-calc-first .hero-lede { margin-top: 0; max-width: 100%; }
}

/* === Phone breakpoint === */
@media (max-width: 640px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  /* `white-space: nowrap` est le bon défaut sur large écran, il ne l'est plus ici : un libellé
     plus large que le téléphone pousse la page entière. Sur /offre-pro, le lien « Pourquoi pas
     simplement Excel ou mon secrétariat social ? » mesure 425 px et faisait déborder la page
     de 51 px à 390 px de large. Il se replie maintenant sur deux lignes. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .nav-inner { height: 56px; }
  .nav-actions .btn-ghost { display: none; }
  section.s { padding: calc(56px * var(--density)) 0; }
  .section-head { margin-bottom: 36px; }
  .hero { padding: 28px 0 32px; }
  .hero-top { gap: 24px; margin-bottom: 28px; }
  /* Même ratio que la réduction appliquée au corps de bureau (88 -> 64) : à 44 px, la
     ligne « brut en net, en Belgique : » mesure 536 px en Zodiak pour ~350 px utiles
     sur un téléphone de 390 px, et repliait le titre sur six lignes. */
  .hero h1 { font-size: 34px; }
  .hero-lede { font-size: 15px; margin-top: 18px; }
  .hero-meta { gap: 20px; margin-top: 22px; }
  .hero-meta-item .num { font-size: 26px; }
  .calc-studio-title { padding: 18px 20px 16px; }
  .calc-studio-head h3 { font-size: 26px; }
  .calc-studio-period { gap: 18px; }
  .calc-studio-period button { padding: 4px 1px 8px; font-size: 11px; letter-spacing: 0.02em; }
  .calc-field-primary .field-currency .field-input { font-size: 26px; padding: 12px 14px 12px 48px; }
  .calc-field-primary .field-currency::before { font-size: 21px; left: 18px; }
  .calc-details-toggle { padding: 16px 20px; gap: 12px; }
  .calc-group-head { padding: 20px 20px 14px; }
  .calc-panel { padding: 0 20px 24px; }
  .calc-panel-essentiel { padding-top: 22px; }
  .calc-foot { padding: 14px 20px; gap: 12px; }
  .calc-foot-hint { display: none; }
  .calc-result { padding: 24px 20px; }
  .calc-result-net .amt { font-size: 56px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; padding-bottom: 36px; }
  .foot-tagline { font-size: 28px; }
  .foot-news-form { flex-direction: column; }
  .foot-bottom { flex-direction: column; gap: 12px; padding-top: 18px; align-items: flex-start; }
  .split-card { padding: 32px 24px 28px; min-height: 0; }
  .split-card h3 { font-size: 28px; }
  .feat { padding: 28px 22px; min-height: 0; }
  .feat h4 { font-size: 22px; }
  .price-card { padding: 26px 22px; }
  .price-tag .amt { font-size: 44px; }
  .cta-block { padding: 36px 24px; }
  .saas-frame { border-radius: var(--r-md); }
  .saas-main { padding: 18px 18px; }
  .saas-main-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .saas-stats { grid-template-columns: 1fr 1fr; }
  .ticker-item { font-size: 15px; gap: 36px; }
  .faq-q { font-size: 18px; }
}

/* ── Modal « Détail du calcul » ───────────────────────────── */
.calc-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 14, 19, 0.55);
  backdrop-filter: blur(6px);
  animation: calc-detail-fade 0.15s ease;
}

@keyframes calc-detail-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.calc-detail-modal {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(11, 14, 19, 0.35);
}

.calc-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.calc-detail-head .lbl {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.calc-detail-head h4 {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
}

.calc-detail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.calc-detail-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calc-detail-legend span::before {
  content: "";
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.calc-detail-legend .gain::before { background: var(--gain); }
.calc-detail-legend .charge::before { background: var(--charge); }

.calc-detail-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.calc-detail-close:hover {
  background: var(--ink);
  color: var(--paper);
}

.calc-detail-body {
  padding: 12px 24px;
}

.calc-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

.calc-detail-row:last-child { border-bottom: 0; }

.calc-detail-row .label {
  font-size: 14px;
  color: var(--ink-2);
}

.calc-detail-row .label .muted {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}

.calc-detail-row .val {
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ces deux montants disent « ça s'ajoute » et « ça se retire » : ils relèvent de --gain
   et --charge, pas de --accent. Le rattachement à --accent ne passait inaperçu que parce
   que la couleur de marque était elle-même verte ; il liait le sens à l'identité et un
   changement de palette aurait affiché les montants positifs en brique. */
.calc-detail-row.pos .val { color: var(--gain); }
.calc-detail-row.neg .val { color: var(--charge); }

.calc-detail-row.sub {
  border-bottom: 1px solid var(--ink);
  margin-top: 2px;
}

.calc-detail-row.sub .label,
.calc-detail-row.sub .val {
  font-weight: 600;
  color: var(--ink);
}

.calc-detail-row.total {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  padding-top: 14px;
}

.calc-detail-row.total .label {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
}

.calc-detail-row.total .val {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.calc-detail-row.muted-row .label,
.calc-detail-row.muted-row .val {
  color: var(--ink-3);
  font-size: 13px;
}

/* En-tête de catégorie : libellé + montant agrégé, en gras. */
.calc-detail-row.cat {
  border-bottom: 1px solid var(--line);
  margin-top: 12px;
  padding-bottom: 6px;
}

.calc-detail-row.cat:first-child { margin-top: 0; }

.calc-detail-row.cat .label,
.calc-detail-row.cat .val {
  font-weight: 600;
  color: var(--ink);
}

/* Bande colorée des catégories qui déplacent le net. Le trait à gauche et le fond teinté
   suffisent à balayer la colonne des yeux ; le signe porté par le montant dit la même chose
   sans dépendre de la couleur, pour qui ne distingue pas le vert du rouge. */
.calc-detail-row.cat.gain,
.calc-detail-row.cat.charge {
  border-bottom: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-inline: -12px;
  padding: 8px 12px 8px 12px;
}

.calc-detail-row.cat.gain {
  border-left-color: var(--gain);
  background: var(--gain-soft);
}

.calc-detail-row.cat.charge {
  border-left-color: var(--charge);
  background: var(--charge-soft);
}

.calc-detail-row.cat.gain .val { color: var(--gain); }
.calc-detail-row.cat.charge .val { color: var(--charge); }

/* Catégorie restée à zéro : conservée pour la trame du calcul, mais sans couleur — elle ne
   déplace rien. */
.calc-detail-row.cat.vide .label,
.calc-detail-row.cat.vide .val {
  font-weight: 500;
  color: var(--ink-4);
}

/* Événement individuel sous une catégorie : indenté et atténué. */
.calc-detail-row.evt {
  padding: 6px 0 6px 16px;
  border-bottom: 0;
}

.calc-detail-row.evt .label,
.calc-detail-row.evt .val {
  font-size: 13px;
  color: var(--ink-3);
}

.calc-detail-foot {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--line);
}

.calc-detail-foot p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-4);
}

/* ── Calculateur ATN voiture ──────────────────────────────── */
.atn-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}
@media (max-width: 720px) {
  .atn-grid { grid-template-columns: 1fr; }
}

/* === Mouvement réduit ===
   En fin de fichier pour l'emporter sur toutes les déclarations d'animation, y compris
   celles posées dans les media queries. Rien n'est masqué au repos, donc couper l'animation
   laisse chaque élément dans son état final. */
@media (prefers-reduced-motion: reduce) {
  .calc-result::before,
  .calc-result-head,
  .calc-result-net .label,
  .calc-result-net .amt,
  .calc-result-bar,
  .calc-result-rows .calc-result-row,
  .calc-result-kpis,
  .calc-result-footer {
    animation: none;
  }
}