/* ------------------------------------------------------------------
   WhatIfGone — feuille de style unique.
   Aucune dépendance externe : pas de police web, pas de framework.
   Objectif : premier rendu sous 1 s sur mobile 4G — la typographie
   distinctive vient donc de piles système (serif à caractère de planche
   naturaliste, mono pour les données) plutôt que d'un webfont téléchargé.

   Direction, révisée le 7 août 2026 à la demande de l'éditeur (l'ancienne
   palette brun-or sur parchemin lisait « carte au trésor » plutôt que
   « feuillet de spécimen ») : « Cyanotype clair » en thème clair — le
   procédé qu'Anna Atkins a utilisé dès 1843 pour le premier ouvrage
   scientifique illustré par la photographie, un catalogue d'algues,
   imprimé en bleu de Prusse sur papier clair — et « Plaque cyanotype »
   en thème sombre, la plaque photographique elle-même avant tirage.
   Voir projets/trophiclink/FORMAT-FICHE.md, section Présentation
   visuelle, pour le raisonnement d'origine. La couleur d'accent (terre
   cuite) est injectée par build.mjs depuis site.config.json ;
   --good/--warn/--crit/--muted portent le système de confiance à trois
   niveaux (documenté/inféré/insuffisant) et le statut UICN — jamais
   l'accent lui-même, pour ne pas mélanger « couleur de marque » et
   « couleur qui veut dire quelque chose ».
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;
  /* --accent-base est reecrit par _layout.html depuis site.couleurAccent.
     Ne jamais utiliser --accent-base directement : passer par --accent, qui
     s'eclaircit automatiquement en theme sombre pour rester lisible. */
  --accent-base: #a8481f;
  --accent: var(--accent-base);
  --accent-ink: #ffffff;
  --page: #eef2f2;
  --surface: #e2e9e9;
  --surface-2: #d5dfdf;
  --ink: #16324a;
  --ink-2: #3f5b6e;
  --muted: #5a6d6f;
  --line: #c7d2d2;
  --border: rgba(22, 50, 74, 0.16);
  --good: #4b6043;
  --warn: #a9702c;
  --crit: #a13d2b;
  --wash: color-mix(in srgb, var(--accent) 8%, transparent);
  --voile: color-mix(in srgb, var(--accent) 15%, transparent);
  --radius: 3px;
  --shadow: 0 1px 2px rgba(22,50,74,.05), 0 6px 18px rgba(22,50,74,.06);
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  /* --police-* et --accent-{principale,action,secondaire} : reecrits par
     _layout.html depuis identite.police/palette (site.config.json). Portes
     du gabarit commun le 11 aout 2026. Par defaut ils retombent sur la
     police systeme et sur --accent, donc n'importe quel site qui n'active
     rien rend exactement comme avant. */
  --police-titres: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-corps: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --accent-principale: var(--accent);
  --accent-action: var(--accent);
  --accent-secondaire: var(--accent);
  /* --accent-ink s'inverse par theme parce que --accent lui-meme s'eclaircit
     en sombre (voir plus haut) : un accent pale y demande une encre foncee.
     --accent-action ne suit pas cette regle — une palette a teintes fixes
     n'eclaircit pas sa couleur d'action par theme — donc son encre reste
     blanche dans les deux : c'est ce qui garde le bouton lisible. */
  --accent-action-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    /* La terre cuite s'eclaircit sur la plaque bleu prusse, meme mecanisme
       que la palette precedente — nouvelle encre. */
    --accent: color-mix(in srgb, var(--accent-base) 65%, #ffffff);
    --accent-ink: #2a140c;
    --page: #0f1f2b;
    --surface: #16283a;
    --surface-2: #1c3348;
    --ink: #dbe6e6;
    --ink-2: #a9c0c9;
    --muted: #7f96a0;
    --line: #2c4459;
    --border: rgba(219, 230, 230, 0.14);
    --good: #7fa26e;
    --warn: #d89a54;
    --crit: #e0765e;
    --wash: color-mix(in srgb, var(--accent) 16%, transparent);
    --voile: color-mix(in srgb, var(--accent) 24%, transparent);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: color-mix(in srgb, var(--accent-base) 65%, #ffffff);
  --accent-ink: #2a140c;
  --page: #0f1f2b; --surface: #16283a; --surface-2: #1c3348;
  --ink: #dbe6e6; --ink-2: #a9c0c9; --muted: #7f96a0;
  --line: #2c4459; --border: rgba(219, 230, 230, 0.14);
  --good: #7fa26e; --warn: #d89a54; --crit: #e0765e;
  --wash: color-mix(in srgb, var(--accent) 16%, transparent);
  --voile: color-mix(in srgb, var(--accent) 24%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  color-scheme: light;
  --accent: var(--accent-base);
  --accent-ink: #ffffff;
  --page: #eef2f2; --surface: #e2e9e9; --surface-2: #d5dfdf;
  --ink: #16324a; --ink-2: #3f5b6e; --muted: #5a6d6f;
  --line: #c7d2d2; --border: rgba(22, 50, 74, 0.16);
  --good: #4b6043; --warn: #a9702c; --crit: #a13d2b;
  --wash: color-mix(in srgb, var(--accent) 8%, transparent);
  --voile: color-mix(in srgb, var(--accent) 15%, transparent);
  --shadow: 0 1px 2px rgba(22,50,74,.05), 0 6px 18px rgba(22,50,74,.06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--police-corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- en-tête ---------- */
.site-header {
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 60px;
}
.brand {
  font-family: var(--font-serif); font-weight: 650; font-size: 18px; letter-spacing: -0.005em;
  color: var(--ink); text-decoration: none; display: inline-flex;
  align-items: center; gap: 10px;
}
.brand .mark { flex-shrink: 0; }
/* Le premier point porte la couleur d'accent — seule touche de couleur du
   mark, pour qu'il se lise comme « vivant » plutôt que comme un diagramme
   monochrome — et un anneau qui s'en detache en pulsant, comme un battement.
   Les trois points suivants s'estompent en taille et en opacite jusqu'au
   dernier, qui vacille doucement : la meme presence qui se dissipe vers
   l'absence, l'idee du nom. Coupe sous prefers-reduced-motion, voir en bas
   de fichier. */
.brand .mark .mark-ring {
  transform-box: fill-box; transform-origin: center;
  animation: mark-ping 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes mark-ping {
  0% { transform: scale(1); opacity: .6; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}
.brand .mark circle:last-child { animation: mark-vacille 3.4s ease-in-out infinite; }
@keyframes mark-vacille { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.5; } }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  padding: 7px 11px; border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn {
  background: none; border: 1px solid var(--border); color: var(--ink-2);
  border-radius: 8px; width: 34px; height: 34px; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; font-family: inherit;
}
.icon-btn:hover { color: var(--ink); }

/* ---------- menu déroulant au survol ----------
   Le nav n'occupe plus la barre d'en-tête en permanence : il vit caché
   derrière le bouton trois-lignes, révélé au survol (souris) ou au clic
   (tactile, clavier). `.ouvert` est le relais JS pour les deux derniers cas
   — voir app.js — le survol seul suffit à la souris via `:hover`. */
.nav-group { display: flex; align-items: center; gap: 8px; }
.menu-hover { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; min-width: 210px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 40;
}
.menu-hover:hover .nav-dropdown,
.menu-hover:focus-within .nav-dropdown,
.menu-hover.ouvert .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Deuxième section du menu (mentions, confidentialité, contact) — même
   coupure visuelle que les deux colonnes du pied de page. */
.nav-dropdown-groupe {
  display: flex; flex-direction: column;
  padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line);
}

/* ---------- sélecteur de langue ----------
   Toujours visible dans la barre d'en-tête, hors du menu : un visiteur
   arrivé dans la mauvaise langue doit voir l'issue immédiatement, pas
   après avoir ouvert un menu qu'il n'a aucune raison d'ouvrir. */
.langues { display: flex; align-items: center; gap: 4px; }
.langues a {
  border: 1px solid var(--border); font-size: 13px; text-decoration: none;
  color: var(--ink-2); padding: 6px 10px; line-height: 1.2; border-radius: 8px;
}
.langues a:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  padding: 52px 0 38px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 320px at 12% -30%, var(--voile), transparent 68%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Grille de points decorative, dessinee en CSS pur : aucune image a charger,
   coherente avec le "premier rendu sous 1 s" du gabarit. Coupee court a
   droite pour ne jamais passer sous le texte ni gener la lecture. */
.hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: min(46%, 420px);
  background-image: radial-gradient(var(--border) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
  mask-image: linear-gradient(to left, #000 0%, transparent 85%);
  pointer-events: none;
}
@media (max-width: 860px) { .hero::after { display: none; } }
/* Plus de vitrine photo depuis le 12 aout 2026 (retiree a la demande de
   l'editeur) : le texte occupe seul toute la largeur du hero plutot que de
   partager la place avec une colonne fixe. */
.hero-inner { display: block; }
.hero-texte { max-width: 800px; }
h1 {
  font-family: var(--police-titres); font-weight: 700;
  font-size: clamp(32px, 6vw, 60px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 16px; max-width: 16ch;
  text-wrap: balance;
}
/* Filet d'accent sous le titre : la seule touche de couleur du haut de page
   qui ne depende pas d'un aplat, donc lisible dans les deux themes. Se
   dessine de gauche a droite une fois le titre arrive, plutot que d'etre
   present des le premier rendu — voir le keyframes trait-dessine plus bas. */
h1::after {
  content: ""; display: block; width: 64px; height: 4px; border-radius: 2px;
  background: var(--accent); margin-top: 18px;
}
.hero .lede {
  color: var(--ink-2); font-size: 16px; margin: 16px 0 0; max-width: 52ch;
}

/* Entree en fondu-montant du titre et du sous-titre, puis le filet d'accent
   se dessine une fois le texte arrive : une seule sequence, dans l'ordre de
   lecture, plutot que trois elements qui apparaissent ensemble. Coupe sous
   prefers-reduced-motion, voir en bas de fichier. */
@keyframes entree-fondu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes trait-dessine { from { width: 0; } to { width: 64px; } }
.hero h1 { animation: entree-fondu .55s ease both; }
.hero .lede { animation: entree-fondu .55s ease both; animation-delay: .1s; }
.hero h1::after { animation: trait-dessine .45s ease-out .5s both; }

/* ---------- outil ---------- */
.tool {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin: 30px 0 44px; align-items: start;
}
@media (max-width: 860px) { .tool { grid-template-columns: 1fr; gap: 20px; } }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
}
@media (max-width: 480px) { .panel { padding: 22px; } }
.panel h2 { font-family: var(--font-mono); font-size: 12.5px; margin: 0 0 20px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600; }

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-size: 15.5px; font-weight: 550;
  margin-bottom: 7px; color: var(--ink);
}
.field .aide { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.field label .opt {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2);
  border-radius: 5px; padding: 2px 6px; margin-left: 8px; vertical-align: 1px;
}

/* Bloc replie des champs facultatifs, en bas du formulaire. */
.facultatifs {
  margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px;
}
.facultatifs > summary {
  cursor: pointer; font-size: 14.5px; font-weight: 550; color: var(--accent);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.facultatifs > summary::-webkit-details-marker { display: none; }
.facultatifs > summary::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.facultatifs[open] > summary::before { transform: rotate(45deg); }
.facultatifs > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.facultatifs > .aide { margin: 10px 0 16px; max-width: 54ch; }
.facultatifs > .field:first-of-type { margin-top: 16px; }

.input-wrap { position: relative; display: flex; align-items: center; }
.field input[type="number"], .field input[type="text"], .field select {
  width: 100%; font: inherit; font-size: 16px;
  padding: 12px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--page);
  color: var(--ink); font-variant-numeric: tabular-nums;
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 34px;
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
/* Liste combinee : un seul champ, qui deroule au clic et filtre a la frappe.
   Construite par app.js des qu'un menu depasse `seuilRecherche` options. */
.combo { position: relative; width: 100%; }
.combo .combo-champ {
  width: 100%; font: inherit; font-size: 16px;
  padding: 10px 34px 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--page); color: var(--ink);
  text-overflow: ellipsis;
}
.combo .combo-champ::placeholder { color: var(--muted); }
.combo .combo-champ:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.combo .combo-fleche {
  position: absolute; right: 13px; top: 18px; pointer-events: none;
  width: 9px; height: 9px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px);
}
.combo .combo-liste {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 290px; overflow-y: auto; margin: 0; padding: 5px;
  list-style: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.combo .combo-liste li {
  padding: 8px 10px; border-radius: 7px; font-size: 14.5px;
  cursor: pointer; line-height: 1.4;
}
.combo .combo-liste li:hover { background: var(--surface-2); }
.combo .combo-liste li[aria-selected="true"] {
  background: var(--accent); color: var(--accent-ink);
}
.combo .combo-vide { color: var(--muted); cursor: default; font-style: italic; }
.combo .combo-vide:hover { background: none; }

.field .unite {
  position: absolute; right: 12px; color: var(--muted);
  font-size: 14px; pointer-events: none;
}
.field.has-unite input { padding-right: 62px; }

/* `[hidden]` doit battre les `display` explicites des composants (.btn est
   en inline-flex) : sans le !important, un bloc verrouillé reste visible. */
[hidden] { display: none !important; }

.field label.switch { display: flex; align-items: center; gap: 11px;
  cursor: pointer; font-weight: 550; margin-bottom: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 42px; height: 24px; border-radius: 99px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; transition: background .15s; flex-shrink: 0;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--muted);
  transition: transform .15s, background .15s;
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- résultat ---------- */
.result { position: sticky; top: 80px; }
@media (max-width: 860px) { .result { position: static; } }

.headline { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.headline .k { font-size: 13px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; }
.headline .v {
  font-size: clamp(34px, 6vw, 46px); font-weight: 650; letter-spacing: -0.03em;
  line-height: 1.05; margin: 6px 0 2px; color: var(--accent);
}
.headline .sub { font-size: 14px; color: var(--ink-2); }

.lines { list-style: none; padding: 0; margin: 0; }
.lines li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.lines li:last-child { border-bottom: 0; }
.lines .l { color: var(--ink-2); }
.lines .r { font-variant-numeric: tabular-nums; font-weight: 550; white-space: nowrap; }
.lines li.total { border-top: 1px solid var(--ink-2); border-bottom: 0;
  margin: 8px -12px 0; padding: 12px; font-weight: 650;
  background: var(--wash); border-radius: 0 0 9px 9px; }
.lines li.total .l { color: var(--ink); }
.lines li.total .r { color: var(--accent); font-size: 16px; }
.lines .pct { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 7px; }

.warnings { margin: 16px 0 0; padding: 0; list-style: none; }
.warnings li {
  font-size: 13px; color: var(--ink-2); background: var(--wash);
  border-radius: 8px; padding: 9px 12px 9px 30px; margin-bottom: 7px; line-height: 1.45;
  position: relative;
}
/* Petit repere visuel dessine en CSS, pas une image : coherent avec le
   principe "aucune dependance externe" du gabarit. */
.warnings li::before {
  content: "i"; position: absolute; left: 10px; top: 9px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); font-size: 10.5px; font-weight: 700; font-style: normal;
  font-family: Georgia, serif; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* La ligne "voir plus d'avertissements" reste un <li> normal, donc elle
   herite du badge "i" ci-dessus : lui redonner le retrait gauche standard
   et recentrer le badge verticalement plutot que de fixer un top: 9px
   pense pour une ligne pleine hauteur. */
.warnings li.warnings-toggle { background: none; padding: 2px 0 0 30px; }
.warnings li.warnings-toggle::before { top: 50%; transform: translateY(-50%); }

/* Repli des lignes de detail et des avertissements au-dela du premier
   apercu : construit dynamiquement par app.js, meme mecanique visuelle que
   .facultatifs (chevron a 45deg qui pivote a l'ouverture). */
.lines-more, .warnings-more { margin-top: 4px; }
.lines-more > summary, .warnings-more > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--accent);
  list-style: none; display: flex; align-items: center; gap: 7px; padding: 7px 0;
}
.lines-more > summary::-webkit-details-marker,
.warnings-more > summary::-webkit-details-marker { display: none; }
.lines-more > summary::before, .warnings-more > summary::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.lines-more[open] > summary::before, .warnings-more[open] > summary::before {
  transform: rotate(45deg);
}
.lines-more > summary:focus-visible, .warnings-more > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.lines-more .lines { margin-top: 2px; }
.lines-more .lines li { padding: 7px 0; }
.warnings-more .warnings { margin-top: 2px; }

.actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.btn {
  font: inherit; font-size: 14.5px; font-weight: 550; cursor: pointer;
  border-radius: 9px; padding: 10px 16px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--accent-action); color: var(--accent-action-ink); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.07); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.note-calcul { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* ---------- offre payante ---------- */
.offer {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px; margin: 36px 0;
}
.offer h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.offer .accroche { color: var(--ink-2); margin: 0 0 14px; max-width: 60ch; }
.offer ul { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; }
.offer li { margin: 4px 0; }
.offer .prix { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-right: 12px; }
.offer .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.unlock { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.unlock input {
  font: inherit; font-size: 14px; padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--page); color: var(--ink); width: 190px;
}
.unlock .msg { font-size: 13px; }
.unlock .msg.ok { color: var(--good); }
.unlock .msg.ko { color: var(--crit); }

/* ---------- contenu éditorial ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--font-serif); font-size: 23px; margin: 40px 0 10px; letter-spacing: -0.005em; }
.prose h3 { font-family: var(--font-serif); font-size: 18px; margin: 26px 0 6px; }
.prose p { color: var(--ink-2); margin: 0 0 14px; }
.prose ul, .prose ol { color: var(--ink-2); padding-left: 22px; }
.prose li { margin: 5px 0; }
.prose a { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 16px 0; }
.prose th { text-align: left; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 10px; }
.prose td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.prose td:last-child, .prose th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.sources-list { list-style: none; padding: 0; font-size: 14px; }
.sources-list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.sources-list .date { color: var(--muted); font-size: 12.5px; }

/* ---------- pied ---------- */
.site-footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  background: var(--surface); padding: 30px 0 44px;
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: 14px; display: block; padding: 3px 0; }
.site-footer a:hover { color: var(--ink); }
.site-footer .legal { color: var(--muted); font-size: 12.5px; max-width: 46ch; line-height: 1.5; }

.skip {
  position: absolute; left: -9999px; background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ---------- publicite ----------
   La mention est au-dessus du bloc, jamais dedans : elle doit se lire
   avant qu'on ait commence a prendre l'encart pour du contenu. */
.pub { margin: 30px 0; }
.pub-mention {
  display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.pub-carte {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pub-carte:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.pub-titre { display: block; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 4px; }
.pub-texte { display: block; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 62ch; }
.pub-lien { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 550; color: var(--accent); }
.pub-lien::after { content: " \2192"; }

/* ---------- banniere de consentement ---------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow);
}
.consent[hidden] { display: none; }
.consent-corps {
  max-width: 960px; margin: 0 auto; padding: 18px 20px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.consent-corps h2 { font-size: 15px; margin: 0; flex: 0 0 auto; }
.consent-corps p { margin: 0; flex: 1 1 320px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.consent-actions { display: flex; gap: 10px; margin-left: auto; }
@media (max-width: 600px) {
  .consent-actions { width: 100%; margin-left: 0; }
  .consent-actions .btn { flex: 1; }
}

/* Toutes les animations decoratives (mark, entree du hero, trait sous le
   titre) s'arretent ici d'un seul bloc plutot que d'etre coupees une a une
   pres de chaque regle : plus sur de ne pas en oublier une le jour ou une
   nouvelle s'ajoute. La grille de recherche (.carte-espece) n'anime pas —
   rien a couper ici pour elle. */
@media (prefers-reduced-motion: reduce) {
  .brand .mark circle:last-child,
  .hero h1, .hero .lede {
    animation: none; opacity: 1; transform: none;
  }
  .brand .mark .mark-ring { animation: none; opacity: 0; }
  .hero h1::after { animation: none; width: 64px; }
}

@media print {
  .site-header, .site-footer, .actions, .offer, .form-panel { display: none !important; }
  /* Le repli "+ voir plus" n'a de sens qu'a l'ecran : sur papier, rien n'est
     cliquable, donc tout le detail et tous les avertissements sortent en
     clair, et le triangle de bascule disparait. */
  .lines-more, .warnings-more { display: block !important; }
  .lines-more > summary, .warnings-more > summary { display: none !important; }
  /* Le PDF sert de canal de distribution : un gestionnaire l'imprime pour sa
     direction. Y laisser un encart commandite transformerait sa note interne
     en prospectus, et c'est lui qui en porterait le cout. */
  .pub, .consent { display: none !important; }
  /* Le PDF est un livrable vendu : il porte le resultat et les sources
     datees, pas le contenu editorial de la page d'accueil. */
  .prose:not(.prose-sources) { display: none !important; }
  .hero .lede { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border: 0; box-shadow: none; padding: 0; }
  /* Les aplats teintes ruinent une impression laser : on les retire, mais on
     garde le filet sous le titre, qui sort proprement en noir. */
  .hero { background: none; border-bottom: 0; padding: 0 0 12px; }
  .lines li.total { background: none; margin: 8px 0 0; padding: 12px 0 0; }
}

/* ------------------------------------------------------------------
   WhatIfGone — recherche, cartes et fiches-espèces.
   Feuillet de spécimen (clair) / Plaque cyanotype (sombre). Les trois
   niveaux de confiance (documenté/inféré/insuffisant) et le statut UICN
   réutilisent --good/--warn/--crit/--muted — jamais --accent, réservé à
   la marque (laiton), pour ne pas mélanger « couleur qui identifie »
   et « couleur qui veut dire quelque chose ». Voir
   projets/trophiclink/FORMAT-FICHE.md, section Présentation visuelle.
   ------------------------------------------------------------------ */

.divider {
  display: flex; align-items: center; gap: 12px; margin: 44px 0 18px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.recherche-barre { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 14px; }
.recherche-barre input[type="search"] {
  flex: 1 1 260px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--page); color: var(--ink);
  font: inherit; font-size: 15px;
}
.recherche-barre input[type="search"]::placeholder { color: var(--muted); }
.recherche-barre input[type="search"]:focus-visible,
.recherche-barre select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.recherche-barre select {
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--ink);
  background: var(--page); color: var(--ink); font: inherit; font-size: 14px;
}
.rech-compte { color: var(--muted); font-size: 13px; font-family: var(--font-mono); margin: 0 0 18px; }
.rech-vide { color: var(--muted); padding: 32px 0; text-align: center; }

.grille-especes {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-bottom: 8px;
}
.voir-plus-especes { display: block; margin: 4px 0 28px; }
.carte-espece {
  display: block; position: relative; padding: 18px 16px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.carte-espece::before {
  content: ""; position: absolute; top: 10px; left: 10px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--page); border: 1px solid var(--line);
}
.carte-espece:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.carte-espece:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carte-espece .nom-scientifique { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); font-size: 13px; margin: 6px 0 2px; }
.carte-espece h3 { font-family: var(--font-serif); margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.005em; }
.carte-espece .carte-tags { margin: 10px 0 0; font-size: 11px; font-family: var(--font-mono); letter-spacing: .02em; color: var(--muted); }

/* ---------- le système de tampons : la signature ---------- */
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px 4px 7px; border-radius: 999px;
}
.stamp .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stamp.doc { border: 1.5px solid var(--good); color: var(--good); }
.stamp.doc .dot { background: var(--good); }
.stamp.inf { border: 1.5px dashed var(--good); color: var(--good); }
.stamp.inf .dot { background: var(--good); }
.stamp.insuff { border: 1.5px dotted var(--muted); color: var(--muted); }
.stamp.insuff .dot { background: transparent; border: 1.5px dotted var(--muted); }

.carte-espece .stamp { position: absolute; top: 12px; right: 12px; }

.badge-uicn {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 16px;
}
.badge-uicn.uicn-bas { border: 1px solid var(--good); color: var(--good); }
.badge-uicn.uicn-moyen { border: 1px solid var(--warn); color: var(--warn); }
.badge-uicn.uicn-haut { border: 1px solid var(--crit); color: var(--crit); }
.badge-uicn.uicn-inconnu { border: 1px solid var(--muted); color: var(--muted); }

/* Ampleur de la cascade, axe distinct de la confiance (badge-uicn réutilise
   bas/moyen/haut pour un tout autre axe, le statut UICN) — même famille
   visuelle, mais « critique » se remplit plutôt que de rester en contour
   pour rester lisible comme un cran au-dessus d'« élevé » sans sortir de
   la palette good/warn/crit. */
.badge-impact {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin: 0 8px 16px 0;
}
.badge-impact.impact-bas { border: 1px solid var(--good); color: var(--good); }
.badge-impact.impact-moyen { border: 1px solid var(--warn); color: var(--warn); }
.badge-impact.impact-haut { border: 1px solid var(--crit); color: var(--crit); }
.badge-impact.impact-critique { border: 1px solid var(--crit); background: var(--crit); color: var(--page); }
.badge-impact.impact-inconnu { border: 1px solid var(--muted); color: var(--muted); }

.carte-espece .badge-impact { margin: 6px 0 0; padding: 3px 8px; }

.legende-tampons { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 30px; font-size: 12.5px; color: var(--ink-2); }
.legende-tampons > span { display: flex; align-items: center; gap: 8px; }

/* ---------- fiche-espèce ---------- */
.fil-ariane { font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.fil-ariane a { color: var(--muted); }

.fiche-entete {
  text-align: left; padding: 20px 0 8px;
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: nowrap;
}
.fiche-entete-principal { flex: 1 1 auto; min-width: 0; }
.fiche-entete h1 { margin: 0 0 2px; }
.fiche-entete .nom-scientifique { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); font-size: 17px; margin: 0 0 12px; }
.fiche-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fiche-entete-stats {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.fiche-entete-statut { display: flex; align-items: center; gap: 8px; }
.fiche-entete-statut .fiche-label { margin: 0; }
.fiche-entete-statut .badge-uicn { margin: 0; line-height: 1.3; }
.fiche-entete-population {
  font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--ink);
  line-height: 1.3;
}
.fiche-illustration { position: relative; flex: none; width: 220px; max-width: 100%; margin: 0; }
.fiche-illustration img {
  width: 100%; height: auto; aspect-ratio: 960 / 743; object-fit: cover;
  border-radius: 6px; display: block; background: var(--surface-2);
}
/* Le crédit reste dans le DOM pour l'attribution (obligatoire en CC BY-SA)
   mais ne s'affiche qu'au survol ou au focus clavier, en incrustation sur
   la photo — pas de ligne de texte permanente sous chaque vignette. */
.fiche-illustration figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 5px 8px; border-radius: 0 0 6px 6px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px; line-height: 1.3;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.fiche-illustration:hover figcaption,
.fiche-illustration:focus-within figcaption { opacity: 1; transform: translateY(0); }
@media (max-width: 560px) {
  .fiche-entete { flex-wrap: wrap; }
  .fiche-illustration { width: 100%; }
}
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 2px; font-size: 11px;
  font-family: var(--font-mono); letter-spacing: .02em; text-transform: uppercase;
  background: var(--surface-2); color: var(--ink-2);
}

/* Le badge d'impact vit ici, à côté du titre « Et si elle disparaissait ? »,
   et nulle part près du badge UICN dans le hero : ce sont deux axes sans
   rapport (risque d'extinction de l'espèce elle-même vs gravité de son
   absence pour le reste de l'écosystème). */
.timeline-entete {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  flex-wrap: wrap; margin: 8px 0 0;
}
.cascade-titre { font-family: var(--font-serif); font-size: 23px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.timeline-entete .badge-impact { margin: 0; }

/* ---------- ligne de temps : le résultat principal ---------- */
.timeline {
  display: flex; gap: 0; position: relative; padding: 30px 0 6px; margin: 8px 0 40px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 85px; height: 2px;
  background: linear-gradient(to right, var(--ink) 0%, var(--ink) 30%, var(--muted) 85%, var(--muted) 100%);
  opacity: .45;
}
.tl-point { flex: 1 1 0; position: relative; padding: 0 16px; text-align: left; }
.tl-point:first-child { padding-left: 0; }
.tl-point:last-child { padding-right: 0; }
.tl-point + .tl-point { border-left: 1px dotted var(--line); }
/* Hauteur fixe, ancrée en bas : un horizon d'un mot ("2 ans") et un horizon
   qui retombe sur deux lignes ("Plusieurs décennies") doivent tous deux
   amener leur point au même niveau vertical, sinon la ligne horizontale ne
   traverse plus les points qui ont un libellé plus long — c'était le bug.
   Le contrôle de contenu (voir la skill valider-fiche-especes) garde les
   horizons assez courts pour tenir dans ces deux lignes ; au-delà,
   `overflow: hidden` masque le débordement plutôt que de redécaler le point. */
.tl-horizon {
  display: flex; align-items: flex-end; height: 34px; overflow: hidden;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .05em; line-height: 1.3;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px;
}
.tl-node { display: block; width: 15px; height: 15px; border-radius: 50%; margin-bottom: 16px; position: relative; z-index: 1; flex-shrink: 0; }
.tl-doc .tl-node { background: var(--good); border: 2px solid var(--good); }
.tl-inf .tl-node { background: var(--page); border: 2px dashed var(--good); }
.tl-insuff .tl-node { background: var(--page); border: 2px dotted var(--muted); }
.tl-phrase { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; }
.tl-insuff .tl-phrase { color: var(--muted); font-style: italic; }
.tl-point .stamp { margin-bottom: 10px; }

.tl-detail { margin: 0 0 10px; font-size: 12.5px; }
.tl-detail summary { cursor: pointer; color: var(--ink-2); font-weight: 600; list-style: none; }
.tl-detail summary::-webkit-details-marker { display: none; }
.tl-detail summary::after { content: " +"; color: var(--muted); }
.tl-detail[open] summary::after { content: " −"; }
.tl-detail .citation { font-style: italic; color: var(--ink-2); margin: 8px 0 6px; font-size: 12.5px; }
.tl-detail p { color: var(--ink-2); margin: 6px 0; font-size: 13px; line-height: 1.55; }
.tl-detail .ce-qui-manque { font-size: 12px; }

/* Sous 760 px, la ligne horizontale ne tient plus : plutôt que de la
   masquer sans remplacement (ce qui réduit la ligne de temps à une simple
   liste de cartes empilées — le signalement qui a motivé cette règle), on
   la fait pivoter à la verticale. Chaque segment reprend la couleur du
   tampon du point qu'il quitte, pour garder le même principe qu'en
   version bureau : la confiance se voit sur la ligne elle-même, pas
   seulement sur le tampon. */
@media (max-width: 760px) {
  .timeline { display: block; flex-direction: unset; padding: 8px 0; border-top: 0; border-bottom: 0; }
  .timeline::before { display: none; }
  .tl-point {
    position: relative; padding: 0 0 28px 28px !important; border: 0 !important;
  }
  .tl-point:last-child { padding-bottom: 4px !important; }
  .tl-point::after {
    content: ""; position: absolute; left: 6px; top: 21px; bottom: -6px; width: 2px;
    background: var(--line);
  }
  .tl-point:last-child::after { display: none; }
  .tl-doc::after { background: var(--good); }
  .tl-inf::after { background: repeating-linear-gradient(to bottom, var(--good) 0 4px, transparent 4px 8px); }
  .tl-insuff::after { background: repeating-linear-gradient(to bottom, var(--muted) 0 2px, transparent 2px 5px); }
  .tl-node { position: absolute; left: 0; top: 2px; margin: 0; }
  /* La ligne verticale mobile ne demande pas que les points s'alignent
     entre eux : chaque point empile son propre horizon puis son propre
     nœud, donc la hauteur fixe du bureau (qui sert à aligner sur la ligne
     horizontale commune) n'a plus lieu d'être ici. */
  .tl-horizon { height: auto; overflow: visible; margin-bottom: 8px; }
}

/* ---------- en bas de page : documentation ---------- */
.below-grid {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius); overflow: hidden;
}
.fiche-cascade { padding: 26px 24px; }
.fiche-cascade h3 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 16px; font-weight: 600;
}
.fiche-figure { font-family: var(--font-serif); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0 2px; }
.fiche-figure.qualitatif { font-family: inherit; font-size: 14.5px; font-weight: 400; font-variant-numeric: normal; line-height: 1.55; }
.fiche-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fiche-sep { height: 1px; background: var(--line); margin: 14px 0; }
.fiche-meta { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 6px; }

.etude-box { border-left: 2px solid var(--good); padding: 2px 0 2px 14px; margin: 0 0 14px; font-size: 13px; color: var(--ink-2); font-style: italic; }
.chiffres { background: var(--page); border: 1px solid var(--line); padding: 10px 14px; font-size: 13px; border-radius: 2px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.fiche-liees { margin-top: 32px; }
.fiche-liees .liste-liees { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-liees .liste-liees a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px;
}
.fiche-liees .liste-liees a:hover { border-color: var(--accent); }