/* ============================================================================
   components.css — les briques réutilisables.
   Règle de conception : chaque composant existe dans TOUS ses états
   (repos / survol / focus / actif / désactivé / vide / erreur), sinon il
   n'est pas fini. Le premium se joue dans les états, pas dans la couleur.
   ============================================================================ */

.container { inline-size: min(100% - 2 * var(--space-5), var(--container)); margin-inline: auto; }
.container--wide { inline-size: min(100% - 2 * var(--space-5), var(--container-wide)); margin-inline: auto; }

/* ---------------------------------------------------------------- boutons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out-cubic),
              box-shadow var(--t) var(--ease-out-cubic),
              background-color var(--t-fast) var(--ease-out-cubic),
              border-color var(--t-fast) var(--ease-out-cubic);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary {
  background-image: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  color: #ffffff;                       /* 5.76 → 5.80:1 sur tout le dégradé, mesuré */
  box-shadow: var(--glow-cta);
}
.btn--primary:hover { box-shadow: var(--glow-cta-hover); transform: translateY(-1px); }

.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--elevation-overlay); border-color: var(--accent); color: var(--text-strong); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-micro); }

/* --------------------------------------- LA SIGNATURE : niveaux de fiabilité --
   Chaque affirmation de la page porte son niveau. La couleur ne porte JAMAIS
   seule l'information : le mot est écrit, et une forme distincte le double. */
.lvl {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.18em 0.6em 0.22em;
  border-radius: var(--radius-chip);
  font-size: var(--fs-micro); font-weight: 650;
  letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
  border: 1px solid currentColor;
}
.lvl::before { content: ""; inline-size: 0.5em; block-size: 0.5em; background: currentColor; flex: none; }
.lvl--officiel   { color: var(--lvl-officiel);   background: var(--lvl-officiel-bg); }
.lvl--officiel::before   { border-radius: 50%; }                       /* disque */
.lvl--recoupe    { color: var(--lvl-recoupe);    background: var(--lvl-recoupe-bg); }
.lvl--recoupe::before    { clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* triangle */
.lvl--temoignage { color: var(--lvl-temoignage); background: var(--lvl-temoignage-bg); }
.lvl--temoignage::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* losange */
.lvl--contredit  { color: var(--lvl-contredit);  background: var(--lvl-contredit-bg); }
.lvl--contredit::before  { clip-path: polygon(20% 0,50% 35%,80% 0,100% 20%,65% 50%,100% 80%,80% 100%,50% 65%,20% 100%,0 80%,35% 50%,0 20%); } /* croix */

/* ------------------------------------------------------------------ cartes -- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t) var(--ease-out-cubic), box-shadow var(--t) var(--ease-out-cubic);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.card__title { margin-block-end: var(--space-2); }
.card__meta { color: var(--text-faint); font-size: var(--fs-micro); }

/* ------------------------------------------------------------- carte règle -- */
.rule {
  background: linear-gradient(180deg, var(--surface), var(--bg-elev));
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.rule--danger { border-inline-start-color: var(--danger); }
.rule--warn   { border-inline-start-color: var(--warning); }
.rule--ok     { border-inline-start-color: var(--success); }
.rule__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-block-end: var(--space-3); }
.rule__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 650; color: var(--text-strong); }
.rule__scope { font-size: var(--fs-micro); color: var(--text-faint); }
.rule__body > :last-child { margin-block-end: 0; }
.rule__src {
  margin-block-start: var(--space-4); padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--border);
  font-size: var(--fs-micro); color: var(--text-faint);
}
.rule__src a { color: var(--text-muted); }
.rule__src a:hover { color: var(--accent-cyan); }
/* Précision secondaire à l'intérieur d'une règle : vraie, utile, mais qui ne doit
   pas concurrencer la règle elle-même dans le parcours de lecture. */
.rule__meta {
  margin-block-start: var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--border-strong);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ------------------------------------------------------------- schémas ------
   Des dessins qui FONT COMPRENDRE, pas des illustrations. Chacun porte un
   `<title>` et un `<desc>` liés par `aria-labelledby` : le schéma raconte la même
   chose à qui ne le voit pas. Le SVG se redimensionne par son `viewBox` — sur
   mobile il rétrécit sans jamais déborder ni devenir illisible. */
.schema {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.schema__svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.schema figcaption {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-inline-size: var(--measure);
}
/* Sous 560 px, les libellés d'un schéma dense deviennent trop petits pour être
   lus : on autorise le défilement horizontal plutôt que d'écraser le dessin. */
@media (max-width: 560px) {
  .schema { overflow-x: auto; }
  .schema__svg { min-inline-size: 520px; }
}

/* ------------------------------------------------- citation source verbatim -- */
.quote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-style: normal;
}
.quote::before { content: "« "; color: var(--accent); }
.quote::after  { content: " »"; color: var(--accent); }
.quote cite { display: block; margin-block-start: var(--space-2); font-style: normal; font-size: var(--fs-micro); color: var(--text-faint); }

/* ------------------------------------------------ vis-à-vis de contradiction --
   Deux textes officiels qui se contredisent, montrés côte à côte.
   C'est le composant qui justifie l'existence de cette page. */
.versus {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-5);
  padding: var(--space-5);
  background: var(--lvl-contredit-bg);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
  border-radius: var(--radius-lg);
}
@supports not (background: color-mix(in oklab, red 40%, transparent)) {
  .versus { border-color: rgba(252, 101, 104, 0.4); }
}
.versus__side { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); }
.versus__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); margin-block-end: var(--space-2); }
.versus__verdict {
  grid-column: 1 / -1;
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--warning);
}
.versus__verdict strong { color: var(--warning); }
/* Ce que la contradiction NE permet PAS de trancher. Dire où s'arrête ce qu'on
   sait fait partie du verdict — sans quoi le lecteur croit la question réglée. */
.versus__note {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--border);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
@media (min-width: 860px) { .versus { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- encadré ton -- */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-block: var(--space-5);
}
.callout__icon { inline-size: 26px; block-size: 26px; flex: none; }
.callout--danger { border-color: color-mix(in oklab, var(--danger) 45%, transparent); background: var(--lvl-contredit-bg); }
.callout--warn   { border-color: color-mix(in oklab, var(--warning) 45%, transparent); background: var(--lvl-temoignage-bg); }
.callout--info   { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: var(--accent-tint); }
.callout > div > :last-child { margin-block-end: 0; }

/* ------------------------------------------------------- panneau d'outil ---- */
.tool {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-3);
}
.tool__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .tool__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.tool__field { margin-block-end: var(--space-4); }
.tool__hint { font-size: var(--fs-micro); color: var(--text-faint); margin-block-start: var(--space-2); }
.tool__out {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  min-block-size: 100%;
}
.tool__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--border); }
.tool__row:last-of-type { border-block-end: 0; }
.tool__k { color: var(--text-muted); font-size: var(--fs-small); }
.tool__v { font-weight: 650; font-size: var(--fs-h4); font-variant-numeric: tabular-nums; }
.tool__v--ok { color: var(--success); }
.tool__v--warn { color: var(--warning); }
.tool__v--bad { color: var(--danger); }

/* jauge de marge restante — barre + repères, jamais la couleur seule */
.gauge { --pct: 0%; position: relative; block-size: 14px; border-radius: var(--radius-pill); background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; margin-block: var(--space-3); }
.gauge__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--pct); background: linear-gradient(90deg, var(--success), var(--warning) 62%, var(--danger)); transition: inline-size var(--t-slow) var(--ease-out-expo); }
.gauge__mark { position: absolute; inset-block: -3px; inline-size: 2px; background: var(--text-faint); }

/* -------------------------------------------------------------- sommaire ---- */
.toc { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-4)); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-block-end: 0; }
.toc a {
  display: flex; align-items: center;
  min-block-size: 44px;                     /* exigence de design : 44px, pas 24 */
  padding: var(--space-2) var(--space-3);
  border-inline-start: 2px solid var(--border);
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-small);
  transition: color var(--t-fast) var(--ease-out-cubic), border-color var(--t-fast) var(--ease-out-cubic), background var(--t-fast) var(--ease-out-cubic);
}
.toc a:hover { color: var(--text-strong); border-inline-start-color: var(--accent); background: var(--elevation-overlay); }
.toc a[aria-current="true"] { color: var(--accent-cyan); border-inline-start-color: var(--accent-cyan); background: var(--accent-tint); font-weight: 600; }

/* --------------------------------------------------------------- onglets ---- */
/* Les onglets sont une COMMODITÉ, jamais une condition d'accès. Sans JavaScript,
   la classe `js` n'existe pas : la barre d'onglets disparaît (elle ne répondrait
   à rien) et les cinq fiches s'affichent à la suite, chacune sous son titre.
   Mesuré le 2026-08-07 : dans la version précédente, les 4 panneaux portaient
   `hidden` dans le HTML source et seul le script pouvait les rouvrir — quatre
   modèles sur cinq étaient donc inaccessibles sans JavaScript. */
.tabs { display: none; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-5); }
.js .tabs { display: flex; }
/* Sans JS, deux fiches consécutives doivent rester distinctes à l'œil. */
[role="tabpanel"] + [role="tabpanel"] {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-7);
  border-block-start: 1px solid var(--grid-line);
}
.js [role="tabpanel"] + [role="tabpanel"] { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.tab {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out-cubic);
}
.tab:hover { color: var(--text-strong); border-color: var(--border-strong); }
.tab[aria-selected="true"] { background: var(--accent-tint-strong); border-color: var(--accent); color: var(--text-strong); }

/* ------------------------------------------------------------- checklist ---- */
.check { list-style: none; margin: 0; padding: 0; max-inline-size: none; }
.check li { margin-block-end: var(--space-3); }
/* La case à cocher NATIVE ne peut pas atteindre 44 px sans devenir difforme.
   Motif retenu : l'input couvre TOUTE la carte (transparent), et le carré
   visible est un élément décoratif. La cible tactile devient donc la carte
   entière, tout en gardant un vrai <input type="checkbox"> — donc le clavier,
   le lecteur d'écran et l'état coché natifs. */
.check__item {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out-cubic), background var(--t-fast) var(--ease-out-cubic);
}
.check__item:hover { border-color: var(--accent); }

.check__box {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}
.check__visuel {
  position: relative;
  inline-size: 26px; block-size: 26px;
  margin-block-start: 1px;
  flex: none;
  border: 2px solid var(--border-control);
  border-radius: 7px;
  background: var(--bg-elev);
  display: grid; place-items: center;
  transition: border-color var(--t-fast) var(--ease-out-cubic), background var(--t-fast) var(--ease-out-cubic);
}
.check__visuel::after {
  content: "";
  inline-size: 12px; block-size: 7px;
  border-inline-start: 2.5px solid var(--bg);
  border-block-end: 2.5px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -2px) scale(0.6);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out-cubic), transform var(--t) var(--ease-out-expo);
}
.check__item:has(.check__box:checked) { background: var(--lvl-recoupe-bg); border-color: var(--success); }
.check__box:checked ~ .check__visuel { background: var(--success); border-color: var(--success); }
.check__box:checked ~ .check__visuel::after { opacity: 1; transform: rotate(-45deg) translate(1px, -2px) scale(1); }
.check__box:focus-visible ~ .check__visuel { outline: 2px solid var(--focus); outline-offset: 3px; }
.check__q { font-weight: 600; color: var(--text-strong); display: block; margin-block-end: var(--space-1); }
.check__why { font-size: var(--fs-small); color: var(--text-muted); }

/* --------------------------------------------------------------- frise ------ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-inline-size: none; }
.timeline::before { content: ""; position: absolute; inset-block: 12px 12px; inset-inline-start: 15px; inline-size: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-cyan), transparent); }
.timeline li { position: relative; padding-inline-start: var(--space-8); margin-block-end: var(--space-6); }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 8px; inset-block-start: 6px;
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.timeline li[data-state="risk"]::before { border-color: var(--danger); }
.timeline__when { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-cyan); }
.timeline__what { font-weight: 650; color: var(--text-strong); margin-block: var(--space-1) var(--space-2); }

/* ------------------------------------------------------------ statistiques -- */
.kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.kpi__n { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1; color: var(--accent-cyan); }
.kpi__l { font-size: var(--fs-small); color: var(--text-muted); }

/* ------------------------------------------------------------------ nav ----- */
.nav {
  position: sticky; inset-block-start: 0; z-index: 100;
  block-size: var(--nav-h);
  display: flex; align-items: center;
  background: var(--surface-glass-film);
  border-block-end: 1px solid var(--border);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  /* saturate(125%) et non 160% : au-delà, le filtre AMPLIFIE le bleu de l'aura au
     lieu de l'atténuer, et c'est le fond de la barre qui devient lumineux. Un effet
     de verre ne doit jamais rendre son propre contenu moins lisible. */
  .nav { -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); }
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .nav { background: var(--bg-elev); }
}
/* PAS de `inline-size: 100%` ici. Cet élément porte AUSSI `.container--wide`, qui
   fixe `inline-size: min(100% - 2*gouttière, --container-wide)`. Les deux classes
   ont la même spécificité (0-1-0) ; celle déclarée en dernier l'emporte, et
   `.nav__inner` venant après, un `100%` y annulait silencieusement la gouttière.
   Mesuré le 2026-08-07 : la barre partait à x=0 pendant que le contenu partait à
   x=125, et le pictogramme du logo sortait de l'écran, coupé. Aucun gate ne le
   voyait — ni débordement, ni contraste, ni structure : il fallait regarder. */
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-inline-size: 0; }
/* Sur petit écran la barre n'a pas la place pour tout : on retire l'étiquette
   secondaire plutôt que de laisser déborder. La date reste dans le héros. */
@media (max-width: 560px) {
  .nav__sep, .nav__tag { display: none; }   /* la date reste affichée dans le héros */
  .motion-ctl { padding-inline: var(--space-3); }
  .nav__logo { block-size: 19px; }
}
.nav__brand { display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; padding-inline-end: var(--space-2); color: var(--text-strong); text-decoration: none; }
.nav__logo { block-size: 22px; inline-size: auto; color: var(--text-strong); }
.nav__sep { inline-size: 1px; block-size: 20px; background: var(--border-strong); }
.nav__tag { font-size: var(--fs-micro); color: var(--text-faint); }

/* -------------------------------------------------------- pied de page ------ */
.footer { border-block-start: 1px solid var(--border); background: var(--bg-elev); padding-block: var(--space-7); margin-block-start: var(--space-9); }
.footer p { color: var(--text-faint); font-size: var(--fs-small); }

/* --------------------------------------------- bandeau de non-affiliation --- */
.disclaimer {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.disclaimer strong { color: var(--text-strong); }