/* =================================================================
   NETTO — feuille de style unique.
   Aucun framework : ~14 ko, zéro requête bloquante, aucun CLS.
   Organisation : tokens → base → layout → composants → pub → utilitaires
   ================================================================= */

/* ---------------------------------------------------------------
   1. TOKENS
   Palette « encre + vert monnaie ». Le vert n'est PAS décoratif :
   il signifie toujours « ce que vous gardez ». Les retenues sont
   en ambre/rose. Cette cohérence sémantique rend les graphiques
   lisibles sans légende.
   --------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Neutres */
  --ink-900: #0b1220;
  --ink-800: #131c2e;
  --ink-700: #1f2a3f;
  --ink-500: #55637d;
  --ink-400: #7a879e;
  --ink-300: #aab4c5;
  --ink-200: #d9dfe9;
  --ink-100: #eef1f6;
  --ink-050: #f7f9fc;
  --white:   #ffffff;

  /* Accent : net / positif */
  --net-600: #067a55;
  --net-500: #0d9668;
  --net-400: #24b485;
  --net-100: #d9f5ea;

  /* Retenues / cotisations */
  --deduc-600: #b4530a;
  --deduc-500: #dd7215;
  --deduc-100: #fdeedd;

  /* Impôt */
  --tax-600: #9b2f52;
  --tax-500: #c44370;
  --tax-100: #fce7ee;

  /* Employeur */
  --emp-500: #4f5bd5;
  --emp-100: #e7e9fb;

  /* Rôles */
  --bg:          var(--ink-050);
  --bg-elevated: var(--white);
  --bg-sunken:   var(--ink-100);
  --text:        var(--ink-900);
  --text-muted:  var(--ink-500);
  --text-subtle: var(--ink-400);
  --border:      var(--ink-200);
  --border-soft: var(--ink-100);
  --accent:      var(--net-600);
  --accent-soft: var(--net-100);

  /* Formes */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgb(11 18 32 / 6%);
  --shadow-md: 0 2px 4px rgb(11 18 32 / 5%), 0 8px 24px -8px rgb(11 18 32 / 12%);
  --shadow-lg: 0 4px 8px rgb(11 18 32 / 6%), 0 24px 48px -16px rgb(11 18 32 / 18%);

  /* Rythme */
  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 1180px;
  --maxw-prose: 68ch;

  /* Typo */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a1018;
    --bg-elevated: #121a26;
    --bg-sunken:   #0d141d;
    --text:        #e9edf4;
    --text-muted:  #9aa7bb;
    --text-subtle: #71809a;
    --border:      #26313f;
    --border-soft: #1a2331;
    --accent:      var(--net-400);
    --accent-soft: #0d3328;
    --net-100:     #0d3328;
    --deduc-100:   #35230f;
    --tax-100:     #351a26;
    --emp-100:     #1d2145;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 25%), 0 8px 24px -8px rgb(0 0 0 / 45%);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 30%), 0 24px 48px -16px rgb(0 0 0 / 55%);
  }
}

:root[data-theme="dark"] {
  --bg:          #0a1018;
  --bg-elevated: #121a26;
  --bg-sunken:   #0d141d;
  --text:        #e9edf4;
  --text-muted:  #9aa7bb;
  --text-subtle: #71809a;
  --border:      #26313f;
  --border-soft: #1a2331;
  --accent:      var(--net-400);
  --accent-soft: #0d3328;
  --net-100:     #0d3328;
  --deduc-100:   #35230f;
  --tax-100:     #351a26;
  --emp-100:     #1d2145;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 25%), 0 8px 24px -8px rgb(0 0 0 / 45%);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 30%), 0 24px 48px -16px rgb(0 0 0 / 55%);
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: -0.022em;
  font-weight: 680;
  text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); margin-block: 2.5rem 0.9rem; }
h3 { font-size: 1.1rem; margin-block: 1.8rem 0.6rem; }
p, ul, ol, table, figure { margin-block: 0 1.05rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-block: 0.35rem; }
strong { font-weight: 640; color: var(--text); }
small { font-size: 0.8125rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Tous les chiffres du site : chasse fixe, alignement vertical parfait */
.num, td.num, th.num, .figure-value, output {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--maxw-prose); }
.prose > h2:first-child { margin-top: 0; }

.layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 3rem;
}
@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .layout--full { grid-template-columns: minmax(0, 1fr); }
}

.aside { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) {
  .aside { position: sticky; top: 5rem; }
}

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.75rem;
}
.logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em;
  color: var(--text); text-decoration: none; flex: none;
}
.logo__mark {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--net-400), var(--net-600));
  color: #fff; font-size: .95rem; font-weight: 800;
}
/* Deux initiales dans le meme carre : on resserre pour ne pas deborder. */
.logo__mark[data-len="2"] { font-size: .8rem; letter-spacing: -0.03em; }

/* Initiales du mot-logo en accent : elles reprennent les lettres du
   badge. --accent est deja adapte au theme (fonce en clair, clair en
   sombre), donc le contraste tient dans les deux modes. */
.logo__nom { color: var(--text); }
.logo__i { color: var(--accent); }
.nav {
  display: flex; gap: .25rem; margin-left: auto; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  /* Degrade sur le bord droit : signale que la nav defile plutot que
     de laisser un lien coupe net, qui passe pour un bug. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .nav { -webkit-mask-image: none; mask-image: none; } }
.nav a {
  padding: .4rem .6rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 520; color: var(--text-muted);
  text-decoration: none; white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--bg-sunken); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.theme-toggle {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elevated); color: var(--text-muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--ink-300); }
/* `display:none` de l'attribut hidden ne s'applique pas aux elements
   SVG : on le declare explicitement pour les deux icones. */
.theme-toggle svg [hidden] { display: none; }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { padding-block: .9rem 0; font-size: .8125rem; color: var(--text-subtle); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--ink-300); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Pied de page ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  padding-block: 2.5rem 2rem;
  font-size: .875rem; color: var(--text-muted);
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-grid h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); margin: 0 0 .7rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-block: .35rem; }
.footer-grid a { color: var(--text-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); font-size: .8125rem; color: var(--text-subtle); }

/* ---------------------------------------------------------------
   4. COMPOSANTS
   --------------------------------------------------------------- */

/* ---------- Carte ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card__title { font-size: .8125rem; font-weight: 640; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); }

/* ---------- Bandeau de nature (accueil) ---------- */
/* Fond à peine plus foncé, bordure basse fine, pas d'icône, pas de
   couleur d'alerte. Il doit se lire comme une précision, pas comme un
   avertissement — et tenir sur UNE ligne en desktop, puisqu'il occupe
   l'espace au-dessus du titre. */
.bandeau {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-soft);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-subtle);
}
.bandeau p {
  margin: 0;
  padding-block: .6rem;
}
.bandeau strong { color: var(--text); font-weight: 620; }
.bandeau a {
  white-space: nowrap;
  /* Le renvoi est la partie utile : il doit se distinguer du texte de
     décharge sans pour autant crier. */
  font-weight: 560;
}

/* ---------- Réserve légale ---------- */
/* Une bordure latérale et un fond neutre, pas un bandeau d'alerte.
   Un avertissement qui crie est ignoré dès la deuxième page, et sur une
   page qui doit convertir il fait fuir. Il doit être lu, pas redouté. */
.reserve {
  margin-block: 1.5rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--border);
  background: var(--bg-elevated);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--text-subtle);
}
.reserve p { margin: 0; }
.reserve p + p { margin-top: .5rem; }
.reserve strong { color: var(--text); font-weight: 620; }
.reserve__liens { font-size: .75rem; }

/* ---------- Dossier ---------- */
/* Entree de registre : un titre qui est une phrase entiere, puis des
   rubriques fixes. `.card__title` ne convient pas ici — c'est une
   etiquette minuscule en capitales, illisible sur une phrase de
   soixante signes. */
.dossier { margin-block: 1.25rem; }
.dossier > h3 { margin: 0 0 .35rem; font-size: 1.0625rem; line-height: 1.35; }
.dossier__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1rem; font-size: .8125rem; color: var(--text-subtle);
}
.dossier dl { margin: 0; display: grid; gap: .85rem; }
.dossier dt {
  font-size: .75rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-subtle); margin-bottom: .2rem;
}
.dossier dd { margin: 0; }
.dossier dd + dt { padding-top: .85rem; border-top: 1px solid var(--border-soft); }

/* ---------- Simulateur ---------- */
/* Le simulateur vit tantot en pleine largeur, tantot dans une
   colonne de 600 px a cote de l'aside. Une media query se trompe
   dans le second cas : on interroge donc le conteneur, pas l'ecran. */
form[data-sim] { container-type: inline-size; }
.sim { display: grid; gap: 1.25rem; }
@container (min-width: 640px) {
  .sim { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}

.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.field > label, .field__label {
  font-size: .8125rem; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.field__hint { font-size: .75rem; font-weight: 400; color: var(--text-subtle); }

.input-money { position: relative; display: flex; align-items: center; }
.input-money input {
  width: 100%; padding: .7rem 2.4rem .7rem .85rem;
  font: 600 1.35rem/1.2 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--bg);
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s;
  -moz-appearance: textfield;
}
.input-money input::-webkit-outer-spin-button,
.input-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-money input:hover { border-color: var(--ink-300); }
.input-money input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--bg-elevated);
}
.input-money__unit {
  position: absolute; right: .85rem;
  font-size: 1rem; font-weight: 600; color: var(--text-subtle); pointer-events: none;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.5rem; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 99px;
  background: linear-gradient(to right, var(--accent) var(--pct, 30%), var(--bg-sunken) var(--pct, 30%));
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--bg-sunken); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem; height: 1.15rem; margin-top: -.34rem;
  border-radius: 50%; background: var(--bg-elevated);
  border: 2.5px solid var(--accent); box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--bg-elevated); border: 2.5px solid var(--accent); box-shadow: var(--shadow-sm);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* ---------- Contrôle segmenté ---------- */
.segmented {
  display: flex; gap: 2px; padding: 3px;
  background: var(--bg-sunken); border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  flex: 1; text-align: center; padding: .45rem .5rem;
  font-size: .8125rem; font-weight: 560; color: var(--text-muted);
  border-radius: calc(var(--r-md) - 3px); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s;
  white-space: nowrap;
}
.segmented label:hover { color: var(--text); }
.segmented input:checked + label {
  background: var(--bg-elevated); color: var(--text);
  box-shadow: var(--shadow-sm); font-weight: 620;
}
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Résultat ---------- */
.result {
  background: linear-gradient(165deg, var(--bg-elevated), color-mix(in srgb, var(--accent-soft) 45%, var(--bg-elevated)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  box-shadow: var(--shadow-md);
}
/* --accent vaut deja net-600 en clair et net-400 en sombre :
   inutile de dupliquer la logique de theme ici. */
.result__label {
  font-size: .8125rem; font-weight: 620; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent);
}

.result__value {
  display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem);
  font-weight: 720; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-block: .35rem .2rem;
}
.result__value span { font-size: .42em; font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; white-space: nowrap; }
.result__sub { font-size: .9375rem; color: var(--text-muted); }
.result__sub b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Grille de chiffres secondaires */
.figures {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  margin-top: 1.4rem;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.figure { background: var(--bg-elevated); padding: .8rem .9rem; }
.figure-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 560; color: var(--text-subtle);
  margin-bottom: .15rem;
}
.figure-value { font-size: 1.1rem; font-weight: 660; letter-spacing: -0.02em; }
.figure-note { font-size: .6875rem; color: var(--text-subtle); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.dot--net { background: var(--net-500); }
.dot--deduc { background: var(--deduc-500); }
.dot--tax { background: var(--tax-500); }
.dot--emp { background: var(--emp-500); }

/* ---------- Barre de répartition ---------- */
.split { margin-top: 1.4rem; }
.split__bar {
  display: flex; height: .85rem; border-radius: 99px; overflow: hidden;
  background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--border-soft);
}
.split__seg { transition: flex-basis .45s var(--ease); min-width: 0; }
.split__seg--net { background: linear-gradient(var(--net-400), var(--net-500)); }
.split__seg--deduc { background: linear-gradient(var(--deduc-500), var(--deduc-600)); }
.split__seg--tax { background: linear-gradient(var(--tax-500), var(--tax-600)); }
.split__legend {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin-top: .7rem; font-size: .8125rem; color: var(--text-muted);
}
.split__legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.split__legend b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Tableaux ---------- */
.table-scroll { overflow-x: auto; margin-block: 1rem 1.25rem; border-radius: var(--r-md); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--bg-elevated); }
thead th {
  position: sticky; top: 0;
  text-align: left; font-size: .75rem; font-weight: 640;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle);
  background: var(--bg-sunken);
  padding: .6rem .8rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--border-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--bg-sunken) 55%, transparent); }
td.num, th.num { text-align: right; white-space: nowrap; }
tfoot td { padding: .65rem .8rem; font-weight: 660; background: var(--bg-sunken); border-top: 1px solid var(--border); }
.row-group td { font-size: .75rem; font-weight: 640; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); background: var(--bg-sunken); padding-block: .4rem; }
.prose table { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

/* ---------- Bandeau de synthèse (pages programmatiques) ---------- */
.hero-answer {
  display: grid; gap: 1.25rem; align-items: center;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--bg-elevated);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .hero-answer { grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem; } }
.hero-answer__big { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 2.8rem); font-weight: 720; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-answer__big small { display: block; font-size: .34em; font-weight: 620; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); margin-top: .4rem; }

/* ---------- Badges & puces ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
  background: var(--bg-sunken); color: var(--text-muted);
  border: 1px solid var(--border-soft);
}
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.badge-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* ---------- Maillage interne ---------- */
.linkgrid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); list-style: none; padding: 0; margin: 0; }
.linkgrid a {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .6rem .75rem;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: .875rem; color: var(--text); text-decoration: none;
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.linkgrid a:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.linkgrid a b { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 640; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.chips a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 99px;
  font-size: .8125rem; color: var(--text-muted); text-decoration: none;
  transition: all .15s var(--ease);
}
.chips a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .5rem; }
.faq details {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .15s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.faq summary {
  padding: .85rem 1rem; cursor: pointer; font-weight: 600; font-size: .9375rem;
  list-style: none; display: flex; align-items: center; gap: .75rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-left: auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--text-subtle); border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { background: var(--bg-sunken); }
.faq__body { padding: 0 1rem 1rem; font-size: .9375rem; color: var(--text-muted); }
.faq__body > :last-child { margin-bottom: 0; }

/* ---------- Encarts ---------- */
.callout {
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ink-300);
  font-size: .875rem; color: var(--text-muted);
}
.callout > :last-child { margin-bottom: 0; }
.callout--warn { background: var(--deduc-100); border-left-color: var(--deduc-500); color: var(--deduc-600); }
:root[data-theme="dark"] .callout--warn { color: #f0b980; }
.callout--info { background: var(--accent-soft); border-left-color: var(--accent); }
.callout strong { color: inherit; }

/* ---------- Barre sticky mobile ---------- */
.sticky-result {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--gutter);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px -8px rgb(11 18 32 / 18%);
  transform: translateY(110%);
  transition: transform .28s var(--ease);
}
.sticky-result[data-show="1"] { transform: translateY(0); }
.sticky-result__label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); }
.sticky-result__value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sticky-result a {
  padding: .5rem .9rem; border-radius: var(--r-md);
  background: var(--accent); color: #fff; font-size: .875rem; font-weight: 620;
  text-decoration: none; white-space: nowrap;
}
@media (min-width: 1000px) { .sticky-result { display: none; } }

/* ---------------------------------------------------------------
   5. EMPLACEMENTS PUBLICITAIRES
   Règle absolue : hauteur réservée en CSS. Une pub qui pousse le
   contenu au chargement dégrade le CLS, donc le classement, donc
   le trafic, donc le revenu. Le CLS n'est pas un détail cosmétique.
   --------------------------------------------------------------- */
.ad {
  display: block; position: relative;
  margin-block: 1.75rem;
  /* En contexte grid (.stack / .stack-l), l'espacement vient deja du
     `gap` : cumuler les deux creusait un trou de 90 px autour de
     chaque annonce. Voir la regle .stack > .ad plus bas. */
  background: var(--bg-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  contain: layout paint;
}
.ad::before {
  content: "Publicité";
  position: absolute; top: .3rem; left: .5rem;
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); pointer-events: none;
}
/* Le libellé du placeholder est centré en absolu : la propriété
   `display` du conteneur reste libre pour piloter la visibilité
   responsive de chaque emplacement (cf. .ad--sidebar). */
.ad--placeholder::after {
  content: attr(data-slot);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .75rem; color: var(--text-subtle);
  font-family: var(--font-num);
}
.ad ins { display: block; }

/* Espacement pilote par le conteneur, pas par la marge de l'annonce. */
.stack > .ad, .stack-l > .ad, .aside > .ad { margin-block: 0; }

/* Hauteurs réservées, par emplacement et par largeur d'écran */
.ad--top      { min-height: 100px; }
.ad--inresult { min-height: 250px; }
.ad--bottom   { min-height: 250px; }
.ad--infeed   { min-height: 130px; }
.ad--sidebar  { min-height: 600px; display: none; }
@media (min-width: 1000px) { .ad--sidebar { display: block; } }
@media (min-width: 728px) { .ad--top { min-height: 90px; } }

/* ---------------------------------------------------------------
   6. UTILITAIRES
   --------------------------------------------------------------- */
.stack   { display: grid; gap: 1.25rem; }
.stack-l { display: grid; gap: 2rem; }
/* Dans une pile en grid, l'espacement vient du `gap`. La marge haute
   du premier titre d'une section s'y ajouterait : on la neutralise
   pour garder un rythme vertical unique. */
.stack > section > h2:first-child,
.stack-l > section > h2:first-child,
.stack > div > h2:first-child,
.stack-l > div > h2:first-child { margin-top: 0; }
.row     { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.grid-2  { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.muted   { color: var(--text-muted); }
.subtle  { color: var(--text-subtle); font-size: .8125rem; }
.mt-0    { margin-top: 0; }
.mb-0    { margin-bottom: 0; }
.center  { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.updated {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; color: var(--text-subtle);
}
.updated::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--net-500); }

hr { border: 0; border-top: 1px solid var(--border-soft); margin-block: 2rem; }

/* Compteur animé : évite le saut de largeur pendant l'animation */
.counting { will-change: contents; }