@charset "UTF-8";
/* =============================================================================
   ForschungPferd | Design system v2
   Repris sur les maquettes fournies : fond clair, image qui file à droite,
   accent rouge suisse, navigation sur une rangée, réglure verticale de marge,
   matrice de preuves à pastilles, rail droit sur les articles.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Socle */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[class], ul[class] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/* Un composant à display propre bat l'attribut : il faut !important (playbook). */
[hidden] { display: none !important; }

/* Une icône SVG sans attribut width s'étire en géant. Les familles larges se
   redéclarent APRÈS ce garde-fou (voir .fp-figure svg / svg.fp-chart). */
svg:not([width]) { width: 1.15em; height: 1.15em; }

/* --------------------------------------------------------------- 2. Jetons */
:root {
  /* Palette accordée aux maquettes. Le corail du CDC §17.4 cède la place au
     rouge suisse : il porte l'accent des maquettes et il atteint 4,97:1 sur
     blanc, là où le corail plafonnait à 3,68 (voir ADR-003). */
  --navy:      #0E3A42;   /* bandeaux sombres, pied de page */
  --navy-2:    #12454E;   /* bouton plein, surfaces sombres secondaires */
  --teal:      #14545C;   /* liens, structure */
  --cyan:      #2E8A8B;   /* traits, marqueurs */
  --red:       #C8202A;   /* accent : CTA, soulignement actif, point du titre */
  --red-dark:  #A81A23;   /* survol du CTA */
  --gold:      #A9873F;   /* archives */
  --mist:      #F2F7F7;
  --ink:       #17282B;
  --snow:      #FFFFFF;

  /* Surfaces */
  --sf-page:   #FFFFFF;
  --sf-card:   #FFFFFF;
  --sf-quiet:  #F6F9F9;
  --sf-tint:   #EDF3F3;
  --sf-deep:   var(--navy);
  --sf-deep-2: #123F48;

  /* Texte */
  --tx:        var(--ink);
  --tx-quiet:  #4A5D60;
  --tx-faint:  #5C6E71;
  --tx-on-deep: #E8F0EF;
  --tx-on-deep-quiet: #A6C0C0;

  /* Traits : la réglure fine porte toute la structure */
  --rule:        #E2E9E9;
  --rule-strong: #C6D4D4;
  --rule-deep:   #1E4E57;

  /* Typographie */
  --f-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-sans:  'Archivo', 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono:  ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  /* Échelle fluide : socle 320 px, plafond 1440 px */
  --t--2: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --t--1: clamp(0.8125rem, 0.79rem + 0.13vw, 0.875rem);
  --t-0:  clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --t-1:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
  --t-2:  clamp(1.1875rem, 1.12rem + 0.33vw, 1.375rem);
  --t-3:  clamp(1.375rem, 1.26rem + 0.57vw, 1.75rem);
  --t-4:  clamp(1.625rem, 1.42rem + 1.02vw, 2.25rem);
  --t-5:  clamp(2rem, 1.65rem + 1.75vw, 3rem);
  --t-6:  clamp(2.375rem, 1.75rem + 3.1vw, 4.25rem);

  /* Rythme */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  /* Formes : angles francs, un seul rayon discret */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgb(14 58 66 / 0.05);
  --sh-2: 0 1px 3px rgb(14 58 66 / 0.06), 0 10px 28px rgb(14 58 66 / 0.07);

  /* Mesure */
  --mesure: 70ch;
  --page: 1360px;
  --gouttiere: clamp(1rem, 0.5rem + 2.4vw, 2.75rem);
  --marge-reglure: 3.25rem;   /* colonne de la réglure verticale */

  /* Mouvement : courbes fortes, durées courtes */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-fast: 140ms;
  --d-base: 200ms;
  --d-slow: 260ms;
}

/* --------------------------------------------------------------- 3. Corps */
html { background: var(--sf-page); }
body {
  margin: 0; background: var(--sf-page); color: var(--tx);
  font-family: var(--f-sans); font-size: var(--t-0); line-height: 1.65;
  font-synthesis-weight: none; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-serif); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.014em; color: var(--navy);
}
h1 { font-size: var(--t-5); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); line-height: 1.25; }
h4 { font-size: var(--t-1); line-height: 1.3; }

/* Le titre des maquettes mêle romain et italique, et se ferme sur un point rouge. */
.fp-em { font-style: italic; font-weight: 400; }
.fp-dot { color: var(--red); }

a { color: var(--teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: rgb(46 138 139 / 0.2); }

.fp-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fp-skip {
  position: absolute; left: var(--s-4); top: -6rem; z-index: 200;
  background: var(--navy); color: var(--snow); padding: 0.75rem 1.25rem;
  border-radius: var(--r-2); font-weight: 600; text-decoration: none;
  transition: top var(--d-fast) var(--ease-out);
}
.fp-skip:focus { top: var(--s-4); color: var(--snow); }

/* ------------------------------------------------------------- 4. Gabarit */
.fp-shell { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gouttiere); }
.fp-shell--tight { max-width: 1120px; }
.fp-shell--prose { max-width: 880px; }

.fp-section { padding-block: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); }
.fp-section--quiet { background: var(--sf-quiet); }
.fp-section--deep { background: var(--sf-deep); color: var(--tx-on-deep); }
.fp-section--deep h2, .fp-section--deep h3 { color: var(--snow); }
.fp-section--deep a { color: #93D3CE; }
.fp-section--deep a:hover { color: var(--snow); }

/* Réglure verticale de marge, reprise des maquettes.
   Purement décorative : le texte qu'elle porte est aussi dans le pied de page. */
.fp-rule-edge { display: none; }
@media (min-width: 75rem) {
  .fp-rule-edge {
    display: block; position: absolute; left: 1.25rem; top: 8rem;
    width: var(--marge-reglure); pointer-events: none; user-select: none;
  }
  .fp-rule-edge span {
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: var(--t--2); font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--tx-faint); white-space: nowrap;
  }
  .fp-rule-edge::after {
    content: ""; display: block; width: 2px; height: 3.25rem;
    background: var(--red); margin-top: var(--s-4);
  }
  body { position: relative; }
}

.fp-eyebrow {
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s-3);
}
.fp-lede { font-size: var(--t-1); line-height: 1.6; color: var(--tx-quiet); max-width: 60ch; }
.fp-section--deep .fp-lede { color: var(--tx-on-deep-quiet); }

/* En-tête de bloc : titre à gauche, « tout afficher » à droite, filet dessous */
.fp-blockhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5);
  padding-bottom: var(--s-3); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.fp-blockhead h2 { font-size: var(--t-2); margin-right: auto; }
.fp-blockhead > a {
  font-size: var(--t--1); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.fp-section--deep .fp-blockhead { border-color: var(--rule-deep); }

/* Grilles : toute piste fr est bornée (playbook) */
.fp-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .fp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .fp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .fp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .fp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .fp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------- 5. Header */
.fp-header { position: relative; z-index: 60; background: var(--snow); border-bottom: 1px solid var(--rule); }
.fp-header__row { display: flex; align-items: center; gap: clamp(0.5rem, -0.5rem + 3vw, 1.5rem); min-height: 4.75rem; }

.fp-brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
/* Mesuré à 320 px : au-delà de 2 rem de haut, la marque et le bouton de menu ne
   tiennent plus sur la même rangée et la page déborde de 14 px. */
.fp-brand img { width: auto; height: 2rem; }
@media (min-width: 26rem) { .fp-brand img { height: 2.5rem; } }
@media (min-width: 62rem) { .fp-brand img { height: 2.875rem; } }

.fp-nav { margin-inline: auto; }
.fp-nav__list { display: flex; align-items: stretch; gap: clamp(0.5rem, -0.2rem + 1.35vw, 1.35rem); }
.fp-nav__list a {
  display: inline-flex; align-items: center; padding-block: 1.6rem;
  font-size: var(--t--1); font-weight: 500; color: var(--tx-quiet);
  text-decoration: none; white-space: nowrap; position: relative;
  transition: color var(--d-fast) var(--ease-out);
}
.fp-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: center;
  transition: transform var(--d-base) var(--ease-out);
}
.fp-nav__list a:hover { color: var(--navy); }
.fp-nav__list a[aria-current] { color: var(--navy); font-weight: 600; }
.fp-nav__list a[aria-current]::after { transform: scaleX(1); }

.fp-header__tools { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.fp-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-2); color: var(--tx-quiet);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.fp-iconbtn:hover { background: var(--sf-quiet); color: var(--navy); }

/* Appel a l'abonnement. Volontairement plus compact que .fp-btn courant : dans
   le header, la place appartient a la navigation, et c'est l'ALLEMAND qui
   gouverne la largeur. Sous le seuil de repli, il cede la place au menu. */
.fp-header__cta { padding: 0.5rem 0.9rem; min-height: 40px; font-size: var(--t--2); white-space: nowrap; }
/* Seuil a 82rem, pas 78rem : mesure a 78rem, le francais ne laissait que
   30px de marge a la navigation, dans le bruit du rendu. A 82rem la marge
   la plus etroite est de 85px. Le seuil est mesure, pas devine. */
@media (max-width: 81.99rem) { .fp-header__cta { display: none; } }

/* Sélecteur de langue : menu déroulant bâti sur <details>, donc ouvrable au
   clavier sans une ligne de JavaScript. Seul le code ISO est affiché ; le nom
   de la langue reste lisible dans le panneau et dans le pied de page. */
.fp-lang { position: relative; }
.fp-lang > summary {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  min-height: 40px; padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.06em; color: var(--navy);
  list-style: none; user-select: none;
  transition: border-color var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out);
}
.fp-lang > summary::-webkit-details-marker { display: none; }
.fp-lang > summary::marker { content: ""; }
.fp-lang > summary:hover { background: var(--sf-quiet); border-color: var(--teal); }
.fp-lang > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.fp-lang[open] > summary { border-color: var(--teal); background: var(--sf-quiet); }
.fp-lang__chev { flex: none; color: var(--tx-faint); transition: transform var(--d-base) var(--ease-out); }
.fp-lang[open] .fp-lang__chev { transform: rotate(180deg); }

.fp-lang__panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 70;
  min-width: 11.5rem; padding: var(--s-2);
  background: var(--snow); border: 1px solid var(--rule);
  border-radius: var(--r-3); box-shadow: var(--sh-2);
}
.fp-lang__panel a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.5rem 0.65rem; border-radius: var(--r-2);
  font-size: var(--t--1); color: var(--tx-quiet); text-decoration: none;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.fp-lang__panel a:hover { background: var(--sf-quiet); color: var(--navy); }
.fp-lang__panel b {
  font-family: var(--f-mono); font-size: 0.88em; font-weight: 700;
  letter-spacing: 0.05em; min-width: 1.7rem; color: var(--tx-faint);
}
.fp-lang__panel a[aria-current="true"] { color: var(--navy); font-weight: 600; }
.fp-lang__panel a[aria-current="true"] b { color: var(--red); }

/* Le panneau naît de son déclencheur, jamais du centre, et jamais de scale(0). */
@media (prefers-reduced-motion: no-preference) {
  .fp-lang[open] .fp-lang__panel {
    animation: fp-pop var(--d-fast) var(--ease-out) both;
    transform-origin: top right;
  }
}
@keyframes fp-pop { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }

/* Bascule mobile : la CASE porte la commande clavier (playbook a11y) */
.fp-navtoggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-burger {
  display: none; align-items: center; gap: var(--s-2); min-height: 44px;
  padding: 0.55rem 0.85rem; border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  font-size: var(--t--1); font-weight: 600; color: var(--navy); cursor: pointer; background: var(--snow);
  transition: transform var(--d-fast) var(--ease-out);
}
.fp-burger:active { transform: scale(0.97); }
.fp-navtoggle:focus-visible + .fp-burger { outline: 3px solid var(--red); outline-offset: 2px; }

/* Seuil MESURÉ, pas standard. C'est le FRANÇAIS qui gouverne, pas l'allemand :
   « Santé comparée » et « À propos » portent la rangée à 1192 px de besoin réel
   (marque 184 + navigation 707 + outils 253 + gouttières), contre 1152 en de-CH.
   À 1250 px il reste 58 px de marge en fr-CH : le seuil de 78rem est le bon. */
@media (max-width: 77.99rem) {
  .fp-burger { display: inline-flex; }
  .fp-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--snow); border-bottom: 1px solid var(--rule);
    box-shadow: var(--sh-2); max-height: calc(100svh - 4.75rem); overflow-y: auto;
  }
  .fp-navtoggle:checked ~ .fp-nav { display: block; }
  .fp-nav__list { flex-direction: column; gap: 0; padding-inline: var(--gouttiere); max-width: var(--page); margin-inline: auto; }
  .fp-nav__list li + li { border-top: 1px solid var(--rule); }
  .fp-nav__list a { padding-block: 0.9rem; padding-left: 0.75rem; border-left: 3px solid transparent; min-height: 44px; }
  .fp-nav__list a::after { display: none; }
  .fp-nav__list a[aria-current] { border-left-color: var(--red); }
}
@media (min-width: 78rem) { .fp-nav__mobile { display: none; } }

/* ---------------------------------------------------------------- 6. Hero */
/* Fond clair, texte à gauche, image qui file vers la droite sans voile sombre. */
.fp-hero { position: relative; background: var(--snow); overflow: hidden; }
.fp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.fp-hero__text { padding-block: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); position: relative; z-index: 2; }
.fp-hero h1 { font-size: var(--t-6); max-width: 12ch; }
.fp-hero__lede { margin-top: var(--s-5); font-size: var(--t-1); line-height: 1.62; color: var(--tx-quiet); max-width: 44ch; }
.fp-hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fp-hero__media { position: relative; }
.fp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

@media (min-width: 62rem) {
  .fp-hero__grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--s-7); }
  .fp-hero__media {
    position: absolute; inset-block: 0; left: 46%; right: calc(50% - 50vw); z-index: 1;
  }
  .fp-hero__media::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg, var(--snow) 0%, rgb(255 255 255 / 0.55) 22%, rgb(255 255 255 / 0) 55%);
  }
  .fp-hero__text { min-height: 30rem; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 61.99rem) {
  .fp-hero__media { height: 13rem; order: -1; }
  .fp-hero h1 { max-width: 16ch; }
}

/* Bandeau de repères chiffrés */
.fp-facts { border-block: 1px solid var(--rule); background: var(--snow); }
.fp-facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .fp-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-facts li { padding: var(--s-5) var(--s-4); display: flex; align-items: flex-start; gap: var(--s-3); }
@media (min-width: 52rem) { .fp-facts li + li { border-left: 1px solid var(--rule); } }
@media (max-width: 51.99rem) { .fp-facts li:nth-child(n+3) { border-top: 1px solid var(--rule); } }
.fp-facts__ico { flex: none; color: var(--cyan); width: 1.5rem; height: 1.5rem; }
.fp-facts b { display: block; font-size: var(--t-0); font-weight: 700; color: var(--navy); line-height: 1.3; }
.fp-facts span { display: block; margin-top: 0.15rem; font-size: var(--t--1); color: var(--tx-faint); }

/* ------------------------------------------- 7. Champ de recherche */
/* La barre pleine largeur à onglets a été retirée du site : elle recouvrait la
   rangée de repères sous le hero. Il ne reste que le champ de la page dédiée. */
.fp-searchfield {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5);
  max-width: 42rem; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--snow); border: 1px solid var(--rule-strong); border-radius: var(--r-3);
  transition: border-color var(--d-fast) var(--ease-out);
}
.fp-searchfield:focus-within { border-color: var(--teal); outline: 3px solid var(--red); outline-offset: 2px; }
.fp-searchfield__ico { flex: none; color: var(--tx-faint); width: 1.25rem; height: 1.25rem; }
.fp-searchfield input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none;
  padding-block: 0.7rem; font-size: var(--t-0);
}
.fp-searchfield input:focus { outline: none; /* focus reporte sur .fp-searchfield */ }
@media (max-width: 30rem) {
  .fp-searchfield { flex-wrap: wrap; }
  .fp-searchfield input { flex: 1 1 8rem; }
}

/* ---------------------------------------------- 8. Rangée de rubriques */
/* `auto-fit` replie les pistes vides : la rangée compte exactement autant de
   colonnes qu'il y a de rubriques, quel qu'en soit le nombre. Une grille figée à
   sept laissait un trou à droite dès qu'une rubrique était retirée, et resserrait
   les colonnes au point que « Ernährungswissenschaft » débordait de 61 px.
   La borne basse de 10.5rem est une longueur, pas `auto` : pas de débordement. */
.fp-topics {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  border: 1px solid var(--rule); border-radius: var(--r-3);
  overflow: hidden; background: var(--snow);
}
.fp-topics li { display: flex; }
.fp-topics a {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4);
  flex: 1 1 auto;   /* remplit la cellule, sinon margin-top:auto n'a pas de jeu */
  text-decoration: none; color: inherit; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  transition: background-color var(--d-base) var(--ease-out);
}
.fp-topics li:first-child a, .fp-topics li:nth-child(-n+1) a { border-top-color: transparent; }
.fp-topics__ico { width: 1.6rem; height: 1.6rem; color: var(--teal); transition: color var(--d-base) var(--ease-out); }
/* Même traitement de titre que les autres listes de liens : serif, même corps. */
.fp-topics b {
  font-family: var(--f-serif); font-size: var(--t-1); font-weight: 600;
  color: var(--navy); line-height: 1.25; letter-spacing: -0.01em;
  transition: color var(--d-base) var(--ease-out);
  /* L'allemand aligne des mots composés que rien ne peut plier sans césure.
     `hyphens` s'appuie sur l'attribut lang du document, qui est bien posé. */
  hyphens: auto; overflow-wrap: break-word;
}
/* Poussé en bas : les titres tiennent sur une ou deux lignes selon la langue,
   la ligne de compte reste alignée d'une tuile à l'autre. */
.fp-topics span { font-size: var(--t--2); color: var(--tx-faint); margin-top: auto; }

/* --------------------------------------------------- 9. Cartes et listes */
.fp-card {
  position: relative; display: flex; flex-direction: column; background: var(--sf-card);
  border: 1px solid var(--rule); border-radius: var(--r-3); overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.fp-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sf-tint); }
.fp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fp-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 auto; }
.fp-card__kicker { font-size: var(--t--2); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cyan); }
.fp-card__title { font-size: var(--t-2); }
.fp-card__title a { transition: color var(--d-base) var(--ease-out); }
.fp-card__title a { color: inherit; text-decoration: none; }
.fp-card__title a::after { content: ""; position: absolute; inset: 0; }
.fp-card__desc { color: var(--tx-quiet); font-size: var(--t--1); margin: 0; }
.fp-card__foot {
  margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  font-size: var(--t--2); color: var(--tx-faint);
}
.fp-card__open { color: var(--red); font-weight: 600; margin-left: auto; }

/* Liste latérale « dernières analyses » : vignette + texte */
.fp-feed { border-top: 1px solid var(--rule); }
.fp-feed li { border-bottom: 1px solid var(--rule); }
.fp-feed a {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-4) var(--s-3); margin-inline: calc(var(--s-3) * -1);
  text-decoration: none; color: inherit; align-items: start;
  transition: background-color var(--d-base) var(--ease-out);
}
.fp-feed img { width: 4.5rem; height: 3.25rem; object-fit: cover; border-radius: var(--r-2); background: var(--sf-tint); }
.fp-feed__k { font-size: var(--t--2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.fp-feed__t { display: block; margin-top: 0.2rem; font-family: var(--f-serif); font-size: var(--t-1); font-weight: 600; color: var(--navy); line-height: 1.25; transition: color var(--d-base) var(--ease-out); }
.fp-feed__m { display: block; margin-top: var(--s-2); font-size: var(--t--2); color: var(--tx-faint); }

.fp-feed__ph { display: block; width: 4.5rem; height: 3.25rem; border-radius: var(--r-2); background: var(--sf-tint); }

/* Accueil : sélection en vedette à gauche, fil des parutions à droite */
.fp-home__split { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 75rem) { .fp-home__split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-8); } }

/* Index de titres (glossaire, listes longues) */
.fp-index { border-top: 1px solid var(--rule); }
.fp-index li { border-bottom: 1px solid var(--rule); }
.fp-index a {
  display: grid; gap: var(--s-1) var(--s-5); align-items: baseline;
  grid-template-columns: minmax(0, 1fr); padding: var(--s-4) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  text-decoration: none; color: inherit;
  transition: background-color var(--d-base) var(--ease-out);
}
@media (min-width: 48rem) { .fp-index a { grid-template-columns: minmax(0, 1fr) auto; } }
.fp-index__t { font-family: var(--f-serif); font-size: var(--t-1); font-weight: 600; color: var(--navy); transition: color var(--d-base) var(--ease-out); }
.fp-index__d { display: block; margin-top: var(--s-1); font-size: var(--t--1); color: var(--tx-quiet); }

/* ------------------------------------------- 9b. Survol, geste unique */
/* Toutes les listes de liens et toutes les tuiles répondent de la même façon :
   un fond calme s'installe, le titre passe au teal, le pictogramme suit.
   Auparavant chaque composant avait son propre geste (ombre ici, décalage de
   padding là, simple couleur ailleurs), ce qui se lisait comme un défaut. */
@media (hover: hover) and (pointer: fine) {
  .fp-topics a:hover,
  .fp-index a:hover,
  .fp-feed a:hover { background: var(--sf-quiet); }

  .fp-topics a:hover b,
  .fp-index a:hover .fp-index__t,
  .fp-feed a:hover .fp-feed__t,
  .fp-card:hover .fp-card__title a { color: var(--teal); }

  .fp-topics a:hover .fp-topics__ico { color: var(--navy); }

  /* La carte porte une bordure : elle la renforce au lieu de teinter son fond. */
  .fp-card:hover { border-color: var(--rule-strong); box-shadow: var(--sh-2); }
}

/* -------------------------------------------------------------- 10. Actions */
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.8rem 1.4rem; border-radius: var(--r-2); min-height: 44px;
  font-size: var(--t--1); font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.fp-btn:active { transform: scale(0.97); }
.fp-btn--primary { background: var(--navy-2); color: var(--snow); }
.fp-btn--primary:hover { background: var(--navy); color: var(--snow); }
.fp-btn--red { background: var(--red); color: var(--snow); }
.fp-btn--red:hover { background: var(--red-dark); color: var(--snow); }
.fp-btn--quiet { border-color: var(--rule-strong); color: var(--navy); background: var(--snow); }
.fp-btn--quiet:hover { border-color: var(--navy); color: var(--navy); }
.fp-btn--ghost { border-color: rgb(232 240 239 / 0.35); color: var(--snow); }
.fp-btn--ghost:hover { border-color: var(--snow); background: rgb(255 255 255 / 0.08); color: var(--snow); }
.fp-arrow { flex: none; width: 0.9em; height: 0.9em; transition: transform var(--d-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .fp-btn:hover .fp-arrow, .fp-blockhead a:hover .fp-arrow { transform: translateX(3px); }
}

/* ------------------------------------------- 11. Composants de preuve */
/* Jetons : forme, clé et libellé. Jamais la couleur seule. */
.fp-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0.6rem; border-radius: var(--r-2);
  border: 1px solid var(--rule-strong); background: var(--snow);
  font-size: var(--t--2); font-weight: 600; line-height: 1.35; color: var(--tx-quiet);
  white-space: normal; max-width: 100%;
}
.fp-chip__k { font-family: var(--f-mono); font-weight: 700; font-size: 0.92em; color: var(--navy); white-space: nowrap; }
.fp-chip--species { border-color: var(--teal); color: var(--teal); background: var(--sf-tint); }
.fp-chip--species .fp-chip__k { color: var(--teal); }
.fp-chip--grade { border-color: var(--cyan); background: var(--sf-tint); color: var(--teal); }
.fp-chip--grade .fp-chip__k { color: var(--teal); }
.fp-chip--transfer { border-color: var(--red); background: #FCEEEF; color: #96181F; }
.fp-chip--transfer .fp-chip__k { color: #96181F; }
.fp-chip--type { border-color: var(--gold); background: #F8F3E9; color: #6E5626; }
.fp-chip--type .fp-chip__k { color: #6E5626; }
.fp-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Pastilles de transfert : trois points par cellule, plus un libellé lisible.
   La couleur ne porte jamais seule l'information (SC 1.4.1). */
.fp-dots { display: inline-flex; align-items: center; gap: 3px; }
/* La pastille vide porte de l'information (« aucune source ») : son contour doit
   rester perceptible, d'où un gris nettement plus soutenu que la réglure. */
.fp-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; border: 1px solid #768E8E; background: var(--snow); }
.fp-dots i[data-on="1"] { background: var(--navy); border-color: var(--navy); }
.fp-dots i[data-on="1"][data-tone="mid"] { background: var(--cyan); border-color: var(--cyan); }
.fp-dots i[data-on="1"][data-tone="low"] { background: var(--red); border-color: var(--red); }

.fp-legend { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); font-size: var(--t--2); color: var(--tx-faint); }
.fp-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Bloc « Espèces et niveau de preuve » */

/* Réponse directe */
.fp-answer { border-left: 3px solid var(--cyan); padding: var(--s-1) 0 var(--s-1) var(--s-5); margin-block: var(--s-5); }
.fp-answer__h { font-family: var(--f-sans); font-size: var(--t--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); margin: 0 0 var(--s-3); }
.fp-answer p { font-size: var(--t-1); line-height: 1.6; color: var(--navy); margin: 0; }

/* Tuiles chiffrées (reprises des maquettes) */
.fp-stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--s-6); }
@media (min-width: 48rem) { .fp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-stat { border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-4); background: var(--snow); }
.fp-stat b { display: block; font-family: var(--f-serif); font-size: var(--t-3); font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
.fp-stat span { display: block; margin-top: var(--s-2); font-size: var(--t--2); color: var(--tx-quiet); line-height: 1.4; }

/* Points à retenir, avec coche */
.fp-key { margin-block: var(--s-6); }
.fp-key h2, .fp-key p.fp-key__h { font-family: var(--f-serif); font-size: var(--t-2); font-weight: 600; color: var(--navy); margin: 0 0 var(--s-4); letter-spacing: -0.01em; text-transform: none; }
.fp-key ul { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.fp-key li { position: relative; padding-left: 1.85rem; font-size: var(--t-0); }
.fp-key li::before {
  content: ""; position: absolute; left: 0; top: 0.34em; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--sf-tint);
  box-shadow: inset 0 0 0 1.5px var(--cyan);
}
.fp-key li::after {
  content: ""; position: absolute; left: 0.34rem; top: 0.62em; width: 0.42rem; height: 0.22rem;
  border-left: 1.7px solid var(--teal); border-bottom: 1.7px solid var(--teal);
  transform: rotate(-45deg);
}

/* Encadrés */
.fp-note { border: 1px solid var(--rule); border-left: 3px solid var(--cyan); border-radius: var(--r-2); background: var(--sf-quiet); padding: var(--s-4) var(--s-5); margin-block: var(--s-5); }
.fp-note__h { font-size: var(--t--1); font-weight: 700; color: var(--navy); margin: 0 0 var(--s-2); }
.fp-note p:last-child { margin-bottom: 0; }
.fp-note--warn { border-left-color: var(--red); background: #FCF3F3; }
.fp-note--species { border-left-color: var(--gold); background: #FAF7F0; }

/* Fiche d'étude */
.fp-study { border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--snow); padding: var(--s-5); }
.fp-study__t { font-family: var(--f-serif); font-size: var(--t-1); font-weight: 600; color: var(--navy); margin: 0 0 var(--s-2); }
.fp-study__t a { color: inherit; text-decoration: none; }
.fp-study__t a:hover { color: var(--teal); text-decoration: underline; }
.fp-study__meta { font-size: var(--t--2); color: var(--tx-faint); font-variant-numeric: tabular-nums; }
.fp-study__res { margin: var(--s-3) 0 0; font-size: var(--t--1); color: var(--tx-quiet); }

/* Matrice de transfert */
.fp-matrix { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--snow); }
.fp-matrix table { width: 100%; min-width: 44rem; font-size: var(--t--1); }
.fp-matrix caption { text-align: left; padding: var(--s-4) var(--s-5); font-size: var(--t--1); color: var(--tx-quiet); border-bottom: 1px solid var(--rule); }
.fp-matrix th, .fp-matrix td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.fp-matrix thead th { font-size: var(--t--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tx-faint); font-weight: 700; background: var(--sf-quiet); }
.fp-matrix thead th span { display: inline-flex; align-items: center; gap: var(--s-2); }
.fp-matrix tbody th { font-weight: 600; color: var(--navy); }
.fp-matrix tbody tr:last-child th, .fp-matrix tbody tr:last-child td { border-bottom: 0; }
.fp-matrix__lab { display: block; margin-top: 0.15rem; font-size: var(--t--2); color: var(--tx-faint); }

/* ------------------------------------------------------------ 12. Article */
.fp-artichead { background: var(--snow); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.fp-artichead__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.fp-artichead__text { padding-block: var(--s-6) var(--s-5); position: relative; z-index: 2; }
.fp-artichead h1 { font-size: var(--t-5); max-width: 18ch; }
.fp-artichead__sub { margin-top: var(--s-4); font-size: var(--t-1); color: var(--tx-quiet); max-width: 52ch; }
.fp-artichead__media { position: relative; }
.fp-artichead__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 62rem) {
  .fp-artichead__grid { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .fp-artichead__media { position: absolute; inset-block: 0; left: 52%; right: calc(50% - 50vw); z-index: 1; }
  .fp-artichead__media::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg, var(--snow) 0%, rgb(255 255 255 / 0.5) 24%, rgb(255 255 255 / 0) 58%);
  }
  .fp-artichead__text { min-height: 21rem; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 61.99rem) { .fp-artichead__media { height: 11rem; order: -1; } }

/* Ligne d'attribution : rédaction, statut de relecture, durée de lecture */
.fp-byrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
.fp-byrow__who { display: flex; align-items: center; gap: var(--s-3); }
.fp-byrow__mark {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sf-tint);
  display: grid; place-items: center; color: var(--teal);
}
.fp-byrow b { display: block; font-size: var(--t--1); font-weight: 700; color: var(--navy); }
.fp-byrow span { display: block; font-size: var(--t--2); color: var(--tx-faint); }
.fp-byrow__badge {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sf-quiet);
}
.fp-byrow__meta { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); font-size: var(--t--2); color: var(--tx-faint); }
.fp-byrow__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.fp-byrow__meta time { font-variant-numeric: tabular-nums; }

/* Onglets de langue de l'article */
.fp-langtabs { display: flex; flex-wrap: wrap; gap: var(--s-5); border-top: 1px solid var(--rule); margin-top: var(--s-5); }
.fp-langtabs a {
  padding-block: var(--s-3); font-size: var(--t--1); font-weight: 600; color: var(--tx-faint);
  text-decoration: none; border-top: 2px solid transparent; margin-top: -1px;
}
.fp-langtabs a:hover { color: var(--navy); }
.fp-langtabs a[aria-current="true"] { color: var(--navy); border-top-color: var(--red); }
.fp-langtabs span { padding-block: var(--s-3); font-size: var(--t--1); color: var(--rule-strong); }

/* Deux colonnes : corps + rail droit */
.fp-article { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) {
  .fp-article { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: var(--s-8); }
  .fp-article__rail { position: sticky; top: var(--s-4); }
}
.fp-rail { display: grid; gap: var(--s-5); }
.fp-panel { border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--snow); padding: var(--s-5); }
.fp-panel > h2 { font-size: var(--t-1); margin-bottom: var(--s-4); }
.fp-panel dl { display: grid; gap: 0; }
.fp-panel dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--rule); align-items: baseline; }
.fp-panel dl > div:first-child { border-top: 0; padding-top: 0; }
.fp-panel dt { font-size: var(--t--1); color: var(--tx-quiet); display: inline-flex; align-items: center; gap: var(--s-2); }
.fp-panel dd { margin: 0; font-size: var(--t--1); font-weight: 600; color: var(--navy); text-align: right; }
.fp-panel__ico { flex: none; color: var(--cyan); width: 1.05rem; height: 1.05rem; }

/* Note de preuve : grande lettre dans un disque */
.fp-grade { text-align: center; }
.fp-grade__badge {
  width: 4.25rem; height: 4.25rem; border-radius: 50%; margin: 0 auto var(--s-3);
  display: grid; place-items: center; background: var(--sf-tint);
  font-family: var(--f-serif); font-size: 2.25rem; font-weight: 600; color: var(--teal);
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.fp-grade b { display: block; font-size: var(--t-1); color: var(--navy); font-family: var(--f-serif); }
.fp-grade p { margin-top: var(--s-2); font-size: var(--t--1); color: var(--tx-quiet); }

.fp-todo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--f-mono); font-size: 0.85em; font-weight: 700;
  color: #6E5626; background: #F8F3E9; border: 1px dashed var(--gold);
  padding: 0.1rem 0.45rem; border-radius: var(--r-2);
}

/* Sommaire d'article, dans le rail */
.fp-toc__h { font-size: var(--t--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-faint); margin: 0 0 var(--s-3); }
.fp-toc li + li { margin-top: var(--s-2); }
.fp-toc a { display: block; font-size: var(--t--1); color: var(--tx-quiet); text-decoration: none; line-height: 1.4; padding-left: var(--s-3); border-left: 2px solid var(--rule); }
.fp-toc a:hover { color: var(--teal); border-left-color: var(--rule-strong); }
.fp-toc a[aria-current="true"] { color: var(--navy); font-weight: 600; border-left-color: var(--red); }

/* Prose */
.fp-prose { max-width: var(--mesure); }
.fp-prose > * + * { margin-top: var(--s-4); }
.fp-prose > h2 { margin-top: var(--s-7); scroll-margin-top: var(--s-5); font-size: var(--t-3); }
.fp-prose > h3 { margin-top: var(--s-6); scroll-margin-top: var(--s-5); }
.fp-prose p { font-size: var(--t-0); }
.fp-prose ul, .fp-prose ol { padding-left: 1.35rem; display: grid; gap: var(--s-2); }
.fp-prose li::marker { color: var(--cyan); }
.fp-prose strong { font-weight: 700; color: var(--navy); }
.fp-prose blockquote {
  border-left: 3px solid var(--cyan); padding: var(--s-2) 0 var(--s-2) var(--s-5);
  background: var(--sf-quiet); border-radius: 0 var(--r-2) var(--r-2) 0;
  font-family: var(--f-serif); font-size: var(--t-2); font-style: italic; line-height: 1.45; color: var(--navy);
}
.fp-prose blockquote cite { display: block; margin-top: var(--s-3); font-family: var(--f-sans); font-size: var(--t--1); font-style: normal; color: var(--tx-faint); }
.fp-prose dfn { font-style: normal; font-weight: 700; color: var(--navy); border-bottom: 1px dotted var(--rule-strong); }

.fp-tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--snow); }
.fp-tablewrap table { width: 100%; min-width: 32rem; font-size: var(--t--1); font-variant-numeric: tabular-nums lining-nums; }
.fp-tablewrap caption { text-align: left; padding: var(--s-4); font-size: var(--t--1); color: var(--tx-quiet); border-bottom: 1px solid var(--rule); }
.fp-tablewrap th, .fp-tablewrap td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.fp-tablewrap thead th { font-size: var(--t--2); text-transform: uppercase; letter-spacing: 0.07em; color: var(--tx-faint); font-weight: 700; background: var(--sf-quiet); white-space: nowrap; }
.fp-tablewrap tbody tr:last-child > * { border-bottom: 0; }

.fp-figure { margin-block: var(--s-6); }
.fp-figure img { width: 100%; border-radius: var(--r-3); border: 1px solid var(--rule); }
.fp-figure figcaption { margin-top: var(--s-3); font-size: var(--t--2); color: var(--tx-faint); line-height: 1.5; }
.fp-figure figcaption b { color: var(--tx-quiet); font-weight: 700; }
/* Redéclaration APRÈS le garde-fou svg:not([width]) : ces SVG doivent être larges */
.fp-figure svg, svg.fp-chart { width: 100%; height: auto; }

.fp-refs { counter-reset: ref; }
.fp-refs li { position: relative; padding-left: 2.5rem; padding-block: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t--1); line-height: 1.55; color: var(--tx-quiet); }
.fp-refs li::before {
  counter-increment: ref; content: counter(ref); position: absolute; left: 0; top: var(--s-3);
  font-family: var(--f-mono); font-size: var(--t--2); font-weight: 700; color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.fp-refs cite { font-style: normal; color: var(--navy); font-weight: 600; }
.fp-refs .fp-refs__src { display: inline-flex; gap: 0.35rem; align-items: center; margin-left: 0.4rem; }

.fp-byline { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--sf-quiet); margin-block: var(--s-6); }
@media (min-width: 44rem) { .fp-byline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-byline dt { font-size: var(--t--2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-faint); }
.fp-byline dd { margin: var(--s-1) 0 0; font-size: var(--t--1); color: var(--navy); }
.fp-byline time { font-variant-numeric: tabular-nums; }

.fp-disclaimer { border-top: 1px solid var(--rule); margin-top: var(--s-7); padding-top: var(--s-5); font-size: var(--t--1); color: var(--tx-quiet); line-height: 1.6; }
.fp-disclaimer b { display: block; color: var(--navy); font-size: var(--t--1); margin-bottom: var(--s-2); }

/* --------------------------------------------------- 13. Fil d'Ariane */
.fp-crumbs { padding-block: var(--s-4); font-size: var(--t--2); }
.fp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; list-style: none; padding: 0; margin: 0; }
.fp-crumbs li { color: var(--tx-faint); display: flex; align-items: center; gap: 0.5rem; }
.fp-crumbs li + li::before { content: "›"; color: var(--rule-strong); }
.fp-crumbs a { color: var(--tx-quiet); text-decoration: none; }
.fp-crumbs a:hover { color: var(--teal); text-decoration: underline; }
.fp-crumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

.fp-pagehead { padding-block: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); background: var(--snow); }
.fp-pagehead h1 { max-width: 22ch; }
.fp-pagehead .fp-chips { margin-bottom: var(--s-4); }
.fp-pagehead__meta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t--2); color: var(--tx-faint); }
.fp-pagehead__meta time { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- 15. Newsletter */
.fp-news { background: var(--sf-deep); color: var(--tx-on-deep); }
.fp-news__grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 62rem) { .fp-news__grid { grid-template-columns: auto minmax(0, 1fr) minmax(0, 26rem); gap: var(--s-6); } }
.fp-news__ico { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid var(--rule-deep); display: grid; place-items: center; color: #93D3CE; flex: none; }
.fp-news h2 { color: var(--snow); font-size: var(--t-2); }
.fp-news p { color: var(--tx-on-deep-quiet); margin-top: var(--s-2); font-size: var(--t--1); }
.fp-news form { display: grid; gap: var(--s-3); }
/* Le champ et le bouton passent l'un sous l'autre quand la rangée ne tient plus :
   mesuré, ils débordaient de 24 px à 320 px de large. */
.fp-news__field { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fp-news__field > * { flex: 1 1 12rem; }
.fp-news input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 0.8rem 1rem; border-radius: var(--r-2);
  border: 1px solid rgb(232 240 239 / 0.3); background: rgb(255 255 255 / 0.07); color: var(--snow);
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.fp-news input[type="email"]::placeholder { color: rgb(232 240 239 / 0.6); }
.fp-news input[type="email"]:focus { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.fp-news small { font-size: var(--t--2); color: var(--tx-on-deep-quiet); line-height: 1.5; }
/* Consentement publicitaire. La case n'est JAMAIS precochee et la cible tactile
   couvre tout l'intitule : c'est un consentement, il doit etre lisible et facile
   a ne pas donner. */
.fp-news__consent { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.fp-news__consent input[type="checkbox"] {
  flex: 0 0 auto; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.1rem;
  accent-color: var(--red); cursor: pointer;
}
.fp-news__consent span { font-size: var(--t--2); color: var(--tx-on-deep-quiet); line-height: 1.55; }
.fp-news__consent a { color: var(--snow); text-decoration: underline; text-underline-offset: 0.15em; }
/* Creneau du widget Turnstile. La hauteur est reservee par le JS au moment de
   l'armement, pas ici : le widget n'apparait qu'apres un geste, et rien ne doit
   sauter sous le curseur. */
.fp-news__ts:empty { display: none; }
.fp-news__etat { margin: 0; font-size: var(--t--2); font-weight: 600; color: var(--tx-on-deep); min-height: 1.2em; }
.fp-news__etat:empty { min-height: 0; }
/* Piège anti-robot : champ TEXTE hors écran, jamais hidden (playbook) */
.fp-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ 16. Footer */
.fp-footer { background: var(--navy); color: var(--tx-on-deep-quiet); }
.fp-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); padding-block: var(--s-7); }
@media (min-width: 44rem) { .fp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .fp-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.fp-footer h2 { font-family: var(--f-sans); font-size: var(--t--1); font-weight: 700; color: var(--snow); margin-bottom: var(--s-4); }
.fp-footer li + li { margin-top: var(--s-2); }
.fp-footer a { color: var(--tx-on-deep-quiet); text-decoration: none; font-size: var(--t--1); }
.fp-footer a:hover { color: var(--snow); text-decoration: underline; }
.fp-footer__brand img { height: 2.5rem; width: auto; margin-bottom: var(--s-4); }
.fp-footer__addr { font-size: var(--t--1); line-height: 1.7; font-style: normal; }
.fp-footer__lang a { display: inline-flex; gap: var(--s-3); }
.fp-footer__lang a[aria-current="true"] { color: var(--snow); }
.fp-footer__lang a[aria-current="true"] em { font-style: normal; border-bottom: 2px solid var(--red); }
.fp-footer__bar {
  border-top: 1px solid var(--rule-deep); padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; font-size: var(--t--2);
}
.fp-footer__bar p { margin: 0; }
.fp-footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.fp-footer__made { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); }
.fp-footer__made svg { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------- 18. Recherche (JS) */
.fp-results { margin-top: var(--s-6); }
.fp-results[data-empty="true"] .fp-results__list { display: none; }
.fp-results__hint { font-size: var(--t--1); color: var(--tx-quiet); }
.fp-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.fp-filters button {
  padding: 0.4rem 0.85rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  font-size: var(--t--2); font-weight: 600; color: var(--tx-quiet); background: var(--snow); cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.fp-filters button:active { transform: scale(0.97); }
.fp-filters button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); background: var(--sf-tint); }

/* -------------------------------------------------- 19. Entrée en scène */
@media (prefers-reduced-motion: no-preference) {
  .fp-stagger > * { animation: fp-rise var(--d-slow) var(--ease-out) both; }
  .fp-stagger > *:nth-child(2) { animation-delay: 45ms; }
  .fp-stagger > *:nth-child(3) { animation-delay: 90ms; }
  .fp-stagger > *:nth-child(4) { animation-delay: 135ms; }
  .fp-stagger > *:nth-child(n+5) { animation-delay: 170ms; }
}
@keyframes fp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .fp-stagger > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- 20. Impression */
@media print {
  .fp-header, .fp-footer, .fp-news, .fp-toc, .fp-skip, .fp-lang, .fp-searchfield,
  .fp-rule-edge, .fp-langtabs { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .fp-prose { max-width: none; }
  .fp-article { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; word-break: break-all; }
  .fp-answer, .fp-note, .fp-tablewrap, .fp-panel { break-inside: avoid; border: 1px solid #999; }
  h2, h3 { break-after: avoid; }
}

/* ------------------------------------------- 21. Cibles tactiles (44 px) */
/* EN FIN DE FEUILLE : à spécificité égale, l'ordre du fichier tranche.
   N'y figurent QUE les éléments qui n'ont pas déjà un plancher supérieur. */
@media (max-width: 77.99rem), (pointer: coarse) {
  .fp-lang > summary { min-height: 44px; }
  .fp-lang__panel a,
  .fp-filters button,
  .fp-footer a,
  .fp-toc a,
  a.fp-chip,
  .fp-crumbs a,
  .fp-langtabs a,
  .fp-blockhead a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .fp-footer li + li { margin-top: 0; }
}