/* ==========================================================================
   Prevoya — Couche de raffinement
   Profondeur, états, focus, rythme typographique et tableaux denses.
   Chargée après style.css : elle affine sans rien réécrire.
   ========================================================================== */

/* ---------- Typographie : ce que les polices système savent faire ---------- */
html {
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}
h1, h2, h3, .hero-title, .eyebrow { text-wrap: balance; }
p, li, dd, figcaption, .hero-sub, .lede p { text-wrap: pretty; }

/* Plus le texte est grand, plus on resserre : la règle non écrite du soigné */
h1, .hero-title { letter-spacing: -.035em; line-height: 1.04; }
h2 { letter-spacing: -.025em; }
h3 { letter-spacing: -.015em; }
.lede, .hero-sub { letter-spacing: -.008em; }
.eyebrow, thead th { letter-spacing: .085em; }

/* Chiffres à chasse fixe partout : un montant ne doit jamais « sauter » */
:where(.kpi-value, .kpi > strong, .verdict-figure, .hero-stats b, .stat-value,
       td, th, output, time, .gauge-caption, .chiffre-cle strong) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Ancres et header collant ---------- */
:target, h2[id], h3[id], section[id] { scroll-margin-top: calc(3.6rem + var(--sp-5)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Détails qui signent la finition ---------- */
::selection { background: var(--accent-soft); color: var(--accent-strong); }
input, textarea, select { caret-color: var(--accent); }
::placeholder { color: var(--ink-3); opacity: 1; }
::marker { color: var(--ink-3); }
:where(a):not([class]) {
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
  text-decoration-skip-ink: auto;
}

/* ---------- Accès clavier : double anneau, visible sur tous les fonds ---------- */
:focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--bw-3) solid var(--accent);
  outline-offset: var(--bw-3);
  box-shadow: 0 0 0 var(--bw-3) var(--surface);
  border-radius: inherit;
}
.btn:focus-visible, .nav-cta:focus-visible, .cta-panel :focus-visible {
  outline-color: var(--accent-ink);
  box-shadow: 0 0 0 calc(var(--bw-3) * 2) var(--accent-strong);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  border-width: var(--bw-2);
  box-shadow: var(--sh-ring-accent), var(--sh-inset-well);
}
.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: 100;
  transform: translateY(-250%);
  background: var(--surface); color: var(--ink);
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw-1) solid var(--border-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- Champs : la bordure d'un contrôle est un composant d'interface ---------- */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
select, textarea {
  border-color: var(--border-field);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-inset-well);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* ---------- Boutons : hiérarchie et retour tactile ---------- */
.btn {
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1), var(--sh-inset-light);
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:hover { box-shadow: var(--sh-2), var(--sh-inset-light); }
.btn:active { transform: translateY(1px); box-shadow: none; transition-duration: 40ms; }
/* Le bouton fantôme doit peser nettement moins que le plein */
.btn-secondary {
  border: var(--bw-1) solid color-mix(in oklch, var(--accent) 38%, transparent);
  padding: calc(.7rem - 1px) calc(1.4rem - 1px);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  box-shadow: none;
}
.btn-ghost { box-shadow: none; }
[disabled], .is-disabled { opacity: var(--o-disabled); cursor: not-allowed; }

/* ---------- Élévation : trois niveaux lisibles, pas un seul ---------- */
.table-wrap, .note, .warn, .danger-box, .faq details { box-shadow: var(--sh-1); }
.card, .kpi, .tool-card, .product-card, .cta-box, .aside-cta { box-shadow: var(--sh-2), var(--sh-inset-light); }
.card:hover, .tool-card:hover, .product-card:hover { box-shadow: var(--sh-3), var(--sh-inset-light); }
.faq details[open] { box-shadow: var(--sh-2); }
.hero-card, .cta-panel, .sticky-cta { box-shadow: var(--sh-4), var(--sh-inset-light); }
.cta-panel { box-shadow: var(--sh-4); }

/* Rayons : une échelle unique, appliquée partout */
.card, .kpi, .note, .warn, .danger-box, .table-wrap, .faq details,
.cta-box, .aside-cta, .chiffre-cle, .chart-wrap, .sim { border-radius: var(--r-md); }
.hero-card, .cta-panel, .sticky-cta, .verdict { border-radius: var(--r-lg); }
.product-card, .tool-card { border-radius: var(--r-lg); }

/* ---------- Hero : un fond composé, jamais un dégradé à deux tons ---------- */
.hero-lead {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-bottom: 0;
  background:
    radial-gradient(64rem 34rem at 8% -18%, color-mix(in oklch, var(--accent) 13%, transparent) 0%, transparent 60%),
    radial-gradient(48rem 30rem at 108% 118%, color-mix(in oklch, #c9a227 7%, transparent) 0%, transparent 58%),
    radial-gradient(80rem 40rem at 50% -30%, color-mix(in oklch, white 70%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* Filet de séparation qui s'estompe sur les bords */
.hero-lead::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--border-2) 18%, var(--border-2) 82%, transparent);
}
/* Grain : une tuile de 140 px rastérisée une fois, confinée au hero */
.hero-lead::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* Asymétrie lisible, et plus tôt : le hero tient dès la tablette paysage */
@media (min-width: 56rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}

/* Carte du hero : bordure lumineuse, pas une bordure plate */
.hero-card {
  border: var(--bw-1) solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, color-mix(in oklch, white 55%, var(--border)), var(--border) 42%, var(--border-2)) border-box;
}
/* ---------- Jauge : des graduations valent mieux qu'une barre nue ---------- */
.gauge-track {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--border) calc(25% - 1px) 25%),
    var(--surface-2);
  box-shadow: var(--sh-inset-well);
}
.gauge-fill {
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 88%, white), var(--accent));
  transition: width var(--dur-slower) var(--ease-out-soft);
}
.gauge-fill.mid { background: linear-gradient(90deg, color-mix(in oklch, var(--mid) 88%, white), var(--mid)); }
.gauge-fill.low { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 88%, white), var(--danger)); }

/* ---------- Tableaux denses : l'actif éditorial du site ---------- */
.table-wrap { overscroll-behavior-x: contain; }
table { border-collapse: separate; border-spacing: 0; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-3);
  border-bottom: var(--bw-1) solid var(--border-2);
  white-space: nowrap;
}
tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--ink) 2%, transparent); }
tbody tr:hover td, tbody tr:hover th { background: var(--accent-soft); }
th, td { vertical-align: baseline; }

/* ---------- Cibles tactiles : 44 px sans déformer la mise en page ---------- */
.site-nav a { padding: var(--sp-3) var(--sp-3); display: flex; align-items: center; min-height: 44px; }
.breadcrumb a { position: relative; }
.breadcrumb a::after { content: ""; position: absolute; inset: -12px -6px; }
.checkbox-field { min-height: 44px; padding-block: var(--sp-1); cursor: pointer; }
.checkbox-field input { width: 1.15rem; height: 1.15rem; }

/* ---------- Mouvement réduit : on garde la couleur, on retire le déplacement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover, .product-card:hover, .tool-card:hover { transform: none !important; }
  .btn:active { transform: none !important; }
  .gauge-fill, .msf-progress-fill, .sticky-cta { transition: none !important; }
}

/* ---------- Stabilité de mise en page ---------- */
.sim-result, .hero-card { contain: layout style; }

/* ==========================================================================
   Signature d'auteur : bulle en tête de page, bloc complet sur la page société
   ========================================================================== */

/* Bulle : la photo précède le nom dans la ligne de signature */
.byline { align-items: center; }
.byline-avatar {
  width: 34px; height: 34px; border-radius: var(--r-full);
  object-fit: cover; flex: none;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-2), var(--sh-1);
  background: var(--surface-2);
}

/* Bloc auteur : la preuve visuelle derrière la signature éditoriale */
.author-card {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(30rem 16rem at 100% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  box-shadow: var(--sh-2), var(--sh-inset-light);
}
@media (min-width: 40rem) {
  .author-card { grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: center; }
}
.author-photo {
  width: 128px; height: 128px; border-radius: var(--r-full);
  object-fit: cover; display: block;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-2), var(--sh-3);
}
@media (min-width: 40rem) { .author-photo { width: 152px; height: 152px; } }
.author-body > p:last-child { margin-bottom: 0; }
.author-name { font-size: var(--step-2); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .15rem; }
.author-role { font-size: var(--step--1); color: var(--ink-2); margin: 0 0 var(--sp-3); }
.author-role strong { color: var(--ink); }
.author-meta {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  font-size: var(--step--1); color: var(--ink-2);
}
.author-meta li { display: flex; align-items: center; gap: .4rem; margin: 0; }
.author-meta svg { flex: none; color: var(--accent); }

/* ------------------------------------------------------------------
   Formulaire : contexte transmis par le CTA d'origine
   ------------------------------------------------------------------ */
.msf-contexte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5ch;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-wash, rgba(20, 83, 43, .06));
  border: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.msf-contexte strong { color: var(--ink); }
.msf-contexte-edit {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
  min-height: 44px;
}
.msf-contexte-edit:hover { color: var(--ink); }

/* ------------------------------------------------------------------
   Rappel d'action sur grand écran
   La barre pleine largeur convient au pouce ; au-dessus de 62rem elle
   devient une carte ancrée à droite, assez discrète pour rester sous le
   seuil d'interstitiel intrusif et assez visible pour être cliquée.
   ------------------------------------------------------------------ */
@media (min-width: 62rem) {
  .sticky-cta {
    display: flex;
    left: auto;
    right: var(--sp-5);
    width: min(23rem, 30vw);
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    border-top-color: var(--border);
    box-shadow: var(--sh-4), var(--sh-inset-light);
  }
  .sticky-cta.is-visible { bottom: var(--sp-5); }
  .sticky-cta .sc-text { font-size: var(--step--1); }
  .sticky-cta .sc-text b { font-size: var(--step-0); margin-bottom: .15em; }
  .sticky-cta .btn { align-self: stretch; text-align: center; }
  /* Les pages qui portent déjà un encart latéral n'ont pas besoin du rappel. */
  body:has(.aside-cta) .sticky-cta { display: none; }
}

/* Monogramme d'en-tête : aligné sur l'œil du mot-symbole, jamais déformé. */
.logo-mark {
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
}
/* Bouton d'avancement du formulaire : point d'accroche du script, mis en avant. */
.btn-next { min-width: 10rem; }

/* ------------------------------------------------------------------
   Résultats d'outils : variantes complémentaires
   ------------------------------------------------------------------ */
.kpi-good {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
}
.kpi-good strong { color: var(--accent); }
/* Le séparateur d'une fourchette : présent pour la lecture, discret à l'œil. */
.verdict-sep {
  font-size: .55em;
  font-weight: 400;
  color: var(--ink-2);
  padding: 0 .15em;
}

/* ------------------------------------------------------------------
   Listes de renvois en fin d'article, et méta des cartes
   ------------------------------------------------------------------ */
.link-list {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.link-list li {
  margin: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.link-list a {
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.link-list .hint { display: inline; margin: 0; }

.card-meta {
  margin: 0 0 var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* ------------------------------------------------------------------
   Cibles tactiles restantes
   Le bouton de menu est l'élément le plus sollicité au pouce : il doit
   respecter les 44 px avant tout le reste. Les champs de formulaire suivent.
   ------------------------------------------------------------------ */
/* Cette règle chargeait après style.css et écrasait son « display: none » au
   delà de 900 px : le bouton Menu restait affiché sur grand écran, la barre de
   navigation passait à la ligne et l'en-tête doublait de hauteur. La taille de
   cible ne concerne que la vue où le bouton existe réellement. */
@media (max-width: 1079.98px) {
  .nav-toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--sp-3);
  }
}
.field input,
.field select,
.sim input,
.sim select {
  min-height: 44px;
}

/* Ligne mise en avant dans un tableau de résultat : l'option retenue par
   l'utilisateur, repérée sans dépendre de la seule couleur. */
.ligne-active {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ligne-active th[scope="row"]::after {
  content: " ·";
  color: var(--accent);
  font-weight: 700;
}

/* ---------- État du barème (calculé à la lecture par dates.js) ----------
   Deux états, deux traitements visuels opposés à dessein : « en vigueur »
   doit se lire sans arrêter le regard, « à revérifier » doit l'arrêter.
   Rien ne s'affiche tant que le script n'a pas tranché : l'élément part
   avec l'attribut hidden, donc aucun clignotement au chargement. */
.bareme-etat {
  flex-basis: 100%;
  margin: .55rem 0 0;
  padding: .4rem .65rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: .8rem;
  line-height: 1.45;
}
.bareme-etat strong { font-weight: 600; }
.bareme-etat sup { font-size: .7em; }

.bareme-etat-vigueur {
  background: color-mix(in oklab, var(--ok) 8%, transparent);
  border-color: color-mix(in oklab, var(--ok) 24%, transparent);
  color: var(--ink-2);
}
.bareme-etat-vigueur strong { color: var(--ok); }

.bareme-etat-perime {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-ink);
}

/* L'avertissement développé, sous le chapô des pages qui affichent un tableau
   de barème. Il n'apparaît qu'une fois l'échéance dépassée. */
.bareme-perime { margin: 1.2rem 0; }
.bareme-perime a { color: inherit; text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .bareme-etat { animation: bareme-apparait var(--dur-base) var(--ease-out) both; }
}
@keyframes bareme-apparait {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* Pastilles d'état, tableau des barèmes de la page méthodologie */
.etat-pastille {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.etat-ok { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok); }
.etat-perime { background: var(--warn-bg); color: var(--warn-ink); }
.etat-surveille { background: color-mix(in oklab, var(--ink-3) 14%, transparent); color: var(--ink-2); }

/* ---------- Sélection multiple, étape « besoin » du formulaire ----------
   Convention respectée : le carré signale qu'on peut en cocher plusieurs,
   là où un rond signalerait un choix unique. C'est le seul signal que les
   gens lisent sans y penser, et il vaut mieux que n'importe quelle phrase. */
.msf-multi button {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1.1rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.msf-check {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .12rem;
  border: 2px solid var(--border-2);
  border-radius: 5px;
  background: var(--bg);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
/* La coche est dessinée en CSS : aucune image à charger, et elle suit la
   couleur du texte quel que soit le thème. */
.msf-check::after {
  content: "";
  position: absolute;
  left: .3rem; top: .06rem;
  width: .3rem; height: .58rem;
  border: solid var(--accent-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out-soft);
}
.msf-multi button[aria-pressed="true"] .msf-check {
  background: var(--accent);
  border-color: var(--accent);
}
.msf-multi button[aria-pressed="true"] .msf-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.msf-lib { display: flex; flex-direction: column; gap: .12rem; }
.msf-lib-t { font-weight: 600; line-height: 1.3; }
.msf-lib-d { font-weight: 400; font-size: .88rem; color: var(--ink-3); line-height: 1.35; }
.msf-multi button[aria-pressed="true"] .msf-lib-d { color: var(--ink-2); }

/* Le survol ne doit plus imiter l'état sélectionné : sur une liste à cocher,
   un survol qui ressemble à une coche fait douter de ce qu'on a réellement
   choisi. On garde donc le fond neutre et on ne bouge que la bordure. */
.msf-multi button:hover { background: var(--surface); border-color: var(--accent-strong); }
.msf-multi button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.msf-multi button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.msf-erreur {
  margin: .2rem 0 0;
  color: var(--danger);
  font-size: .9rem;
  font-weight: 600;
}

/* Le bouton reste immédiatement sous la liste, aligné à gauche comme les
   options : l'œil redescend en colonne et le trouve sans le chercher.
   Le décompte se place à côté, jamais dedans, pour que le libellé du bouton
   ne change pas de largeur à chaque clic. */
.msf-nav-multi { align-items: center; margin-top: 1.1rem; }
.msf-selection { font-size: .9rem; color: var(--ink-2); }
.msf-selection strong { color: var(--ink); }

@media (max-width: 40rem) {
  /* Cinq options font descendre le bouton sous la ligne de flottaison : mesuré
     à 55 px hors écran sur un 375x812. On le colle donc en bas, comme le fait
     toute interface de sélection multiple sérieuse. L'élément reste dans le
     flux, il ne recouvre donc jamais la dernière option. */
  .msf-nav-multi {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .5rem;
    margin-top: .8rem;
    padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    box-shadow: 0 -12px 16px -12px rgb(0 0 0 / .35);
  }
  .msf-nav-multi .btn-next { width: 100%; text-align: center; }
  .msf-selection { text-align: center; }
  /* La barre flotte au-dessus de sa position naturelle et peut mordre sur la
     dernière option. Réserver toute sa hauteur laisserait un vide visible
     quand elle se décolle en fin d'étape : on réserve juste de quoi dégager
     l'option, le reste se résout en continuant à faire défiler. */
  .msf-step[data-step="besoin"] { padding-bottom: 1.2rem; }
}

/* ---------- Choix du canal de réponse ----------
   Ce n'est pas une case de conformité déguisée : c'est une vraie question, à
   laquelle les deux réponses sont légitimes. Depuis le 11 août 2026, seul un
   acte positif clair vaut consentement au rappel — un choix explicite en est
   un, et il se lit comme une préférence plutôt que comme une autorisation. */
.canal { border: 0; padding: 0; margin: 1.2rem 0 0; }
.canal legend {
  padding: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .55rem;
}
.canal-options { display: grid; gap: .55rem; }
.canal-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio titre" ". detail";
  gap: .1rem .7rem;
  align-items: start;
  padding: .8rem 1rem;
  border: 2px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.canal-opt:hover { border-color: var(--accent-strong); }
.canal-opt input { grid-area: radio; margin: .2rem 0 0; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.canal-t { grid-area: titre; font-weight: 600; }
.canal-d { grid-area: detail; font-size: .87rem; color: var(--ink-3); line-height: 1.4; }
.canal-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.canal-opt:has(input:checked) .canal-d { color: var(--ink-2); }
.canal-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Repli pour les moteurs sans :has() — la bordure ne change pas, le bouton
   radio natif reste le signal. Aucune information n'est perdue. */

.lbl-opt { font-weight: 400; color: var(--ink-3); }
.canal + .checkbox-field { margin-top: 1.1rem; }

/* ---------- Liste de suggestions maîtrisée (combobox.js) ----------
   Remplace le menu natif du <datalist>, que le navigateur dessine hors du
   document et dont ni la position ni la largeur ne sont contrôlables. Ici la
   liste est ancrée au champ : elle ne peut plus s'en détacher. */
.cbx { position: relative; }

.cbx-liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: .25rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: var(--bw-1) solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
/* Ouverture vers le haut quand le bas de l'écran est trop proche */
.cbx-vers-haut .cbx-liste { top: auto; bottom: calc(100% + 4px); }

.cbx-liste li {
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink);
}
.cbx-liste li:hover { background: var(--surface-2); }
.cbx-liste li.cbx-actif { background: var(--accent-soft); color: var(--accent-strong); }
.cbx-liste mark {
  background: none;
  color: inherit;
  font-weight: 700;
}
.cbx-liste li.cbx-actif mark { color: inherit; }

/* Le décompte n'est là que pour les lecteurs d'écran : il ne doit rien occuper
   à l'écran, sans pour autant être retiré de l'arbre d'accessibilité. */
.cbx-aide {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Tableaux denses en thème clair ----------
   Sur fond sombre, la seule bordure suffisait à suivre une ligne. Sur fond
   clair, l'œil décroche au-delà de quatre colonnes : une alternance très
   discrète et un survol de ligne rendent le balayage horizontal fiable, sans
   ajouter de bruit visuel. */
tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
}
tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  tbody tr:hover {
    background: color-mix(in oklab, var(--accent) 6%, transparent);
  }
}
/* La ligne mise en avant garde la priorité sur l'alternance et le survol. */
tbody tr.ligne-active,
tbody tr.ligne-active:hover,
tbody tr.ligne-active:nth-child(even) {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
/* L'en-tête doit rester lisible quand on fait défiler un tableau large. */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-3);
}

/* ---------- Légende de l'aire empilée du simulateur d'IJ ----------
   Les deux pastilles reprennent exactement les densités employées dans le
   graphique — 0,72 pour la strate versée, 0,30 pour celle qui manque. C'est
   ce contraste de valeur qui les distingue, sans ajouter de teinte. */
.chart-legend .lg-regime {
  background: color-mix(in oklab, var(--accent) 72%, var(--surface));
  border: 1px solid var(--accent-strong);
  opacity: 1;
}
.chart-legend .lg-manque {
  background: color-mix(in oklab, var(--accent) 30%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  opacity: 1;
}