/* ==========================================================================
   L'EPREUVE DU SECOND DEGRE -- d3rf.com/second-degre/
   Mobile-first. Vanilla CSS. Pas de framework, pas de CDN.
   RECADRAGE 3 (25/07/2026) : plus de rail/strates narratives (retirees) --
   architecture pages statiques, les questions au centre. Le gabarit
   fiche-microscope (etalon/frise/panneaux) est INCHANGE (DA validee 93/100).
   ========================================================================== */

/* --- Fonts self-hosted (subset latin) --- */
@font-face {
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/KoHo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/KoHo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/KoHo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-500.woff2') format('woff2');
}

/* --- Design tokens --- */
:root {
  --font-display: 'KoHo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --mauve: #BA68C8;
  --mauve-rgb: 186, 104, 200;
  --mauve-glow: 0 0 40px rgba(186, 104, 200, 0.18);

  --border-light: #E0DED8;
  --border-dark: rgba(242, 241, 236, 0.10);

  --c-2026-bg: #FAFAF8; --c-2026-fg: #1A1A18;
  --c-2013-bg: #1C1B22; --c-2013-fg: #F2F1EC;
  --c-miroir-bg: #F2F1EC; --c-miroir-fg: #1A1A18;

  /* Alias VISUAL_SPEC_MICROSCOPE (fiche-microscope) -- memes valeurs, noms de spec */
  --paillasse: #F2F1EC;
  --charbon: #1C1B22;

  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --measure-narrative: 62ch;
  --measure-miroir: 68ch;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  background: var(--c-2026-bg);
  color: var(--c-2026-fg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0 0 1em 0; }
ul, ol { padding-left: 1.3em; }

/* --- Skip link (a11y) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mauve);
  color: #1A1A18;
  padding: 0.6em 1em;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Focus visibility --- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 3px;
}

/* ==========================================================================
   HERO -- masthead minimal (titre/sous-titre/2-3 lignes de contexte),
   PAS de storytelling (RECADRAGE 3 : les jalons 2011/2013/2022/2026 sont
   retires, on va droit a la grille).
   ========================================================================== */
.hero {
  background: var(--paillasse);
  color: var(--c-miroir-fg);
  padding: 3.5rem 1.25rem 2.5rem 1.25rem;
  text-align: center;
  position: relative;
}
@media (min-width: 1024px) {
  .hero { padding: 4.5rem 3rem 3rem 3rem; }
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: var(--mauve);
  opacity: 0.35;
}
.hero__inner { max-width: var(--measure-narrative); margin: 0 auto; }
.hero__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5.5vw, 3.2rem);
  line-height: 1.1;
  margin: 0.3em 0 0.4em 0;
  letter-spacing: 0.01em;
}
.hero__subtitle {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 46ch;
  margin: 0 auto 1em auto;
}
@media (min-width: 768px) { .hero__subtitle { font-size: 1.1rem; } }
.hero__context {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  opacity: 0.7;
  max-width: 52ch;
  margin: 0 auto 1.6em auto;
}
.hero__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.6em 1.1em;
  border: 1px solid currentColor;
  border-radius: 2px;
  transition: background-color 0.3s var(--ease-reveal), color 0.3s var(--ease-reveal), border-color 0.3s var(--ease-reveal);
}
.hero__cta:hover, .hero__cta:focus-visible {
  background: var(--mauve);
  border-color: var(--mauve);
  color: #1A1A18;
}

/* ==========================================================================
   LES 63 QUESTIONS -- grille, INDEX = acces direct (RECADRAGE 3)
   Chaque tuile : capture + question (info primaire) + date -> lien vers
   sa page q/{id}.html.
   ========================================================================== */
.index-section { padding: 0 1.25rem 1rem 1.25rem; }
@media (min-width: 1024px) { .index-section { padding: 0 3rem 1rem 3rem; } }

.museum-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.museum-card {
  border: 1px solid var(--border-dark);
  border-radius: 2px;
  overflow: hidden;
  background: var(--c-2026-bg);
  transition: transform 0.4s var(--ease-reveal), box-shadow 0.4s var(--ease-reveal);
}
@media (min-width: 1024px) {
  .museum-card:hover, .museum-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--mauve-glow);
  }
}
.museum-card__link { display: block; cursor: pointer; color: inherit; text-decoration: none; }
.museum-card__frame {
  position: relative;
  background: #000;
  /* LQIP couleur moyenne (background-color inline par carte, cf build_site.py) */
}
.museum-card__frame img {
  width: 100%;
  height: auto;
  display: block;
  /* ratio intrinseque : attributs width/height HTML natifs sur <img> = anti-CLS */
}
.museum-card__question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.4;
  padding: 0.8em 0.9em 0.3em 0.9em;
  margin: 0;
}
.museum-card__question--unclear { font-style: italic; font-weight: 400; opacity: 0.6; }
.museum-card__date {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 0 0.9em 0.9em 0.9em;
  margin: 0;
}

/* ==========================================================================
   VUE D'ENSEMBLE -- bas d'index : histogramme global (chapeau) + methodo
   (RECADRAGE 3 : l'accordeon "13 PROFILS" est retire, hors perimetre)
   ========================================================================== */
.laboratoire {
  background: var(--c-miroir-bg);
  color: var(--c-miroir-fg);
  padding: 3rem 1.25rem 5rem 1.25rem;
}
@media (min-width: 1024px) {
  .laboratoire { padding: 3rem 3rem 6rem 3rem; }
}
.labo__section {
  max-width: 1200px;
  margin: 0 auto 3rem auto;
}
.labo__h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 0.4em;
}
@media (min-width: 768px) { .labo__h3 { font-size: 1.6rem; } }
.labo__lead {
  max-width: var(--measure-narrative);
  margin: 0 auto 2.5rem auto;
  text-align: center;
  font-size: 0.92rem;
  opacity: 0.8;
}

/* -- Le carottier (histogramme global) -------------------------------- */
.histo__chips {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.histo__chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-light);
  color: inherit;
  padding: 0.5em 0.9em;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-reveal), border-color 0.3s var(--ease-reveal), color 0.3s var(--ease-reveal);
}
.histo__chip:hover, .histo__chip:focus-visible {
  border-color: var(--mauve);
  color: var(--mauve);
}
.histo__chip.is-active {
  background: #1C1B22;
  border-color: #1C1B22;
  color: var(--c-2013-fg);
}
/* Largeur fixe (pas juste min-width) : avec 13 carottes non uniformement
   espacees (clusters 2024/2026), un histogramme cale sur le container
   (1200px) ecrase les etiquettes les unes sur les autres. */
.histo__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; position: relative; }
.histo__scroll::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 72px;
  background: linear-gradient(to right, rgba(242,241,236,0), var(--paillasse, #F2F1EC));
  pointer-events: none;
  opacity: 1; transition: opacity 0.4s ease;
}
.histo__scroll.is-scrolled::after { opacity: 0; }
.histo__hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mauve);
  text-align: right;
  padding: 0.4em 1.5em 0 0;
  transition: opacity 0.4s ease;
}
.histo__scroll.is-scrolled + .histo__hint, .histo__hint.is-hidden { opacity: 0; }
.histo__chart {
  position: relative;
  height: 300px;
  width: 1850px;
  margin: 0 auto;
  padding: 1.4em 1.5em 5.5em 2.4em;
}
@media (min-width: 1024px) { .histo__chart { height: 360px; } }
.histo__grid, .histo__bars { position: absolute; left: 1.5em; right: 1.5em; top: 1.4em; bottom: 5.5em; }
.histo__gridline {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--border-light);
}
.histo__gridval {
  position: absolute;
  left: -1.8em;
  top: -0.65em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  opacity: 0.7;
}
.histo__siri-ref {
  position: absolute;
  left: 1.5em; right: 1.5em;
  border-top: 2px dashed var(--mauve);
}
.histo__siri-label {
  position: absolute;
  right: 0;
  top: -1.35em;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mauve);
  white-space: nowrap;
}
.histo__bar-wrap {
  position: absolute;
  top: 0; bottom: 0;
  width: 22px;
  transform: translateX(-50%);
}
.histo__bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  background: #1C1B22;
  border-top: 2px solid var(--mauve);
  transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.histo__score {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  white-space: nowrap;
}
.histo__bar-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) rotate(-60deg);
  transform-origin: top left;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  line-height: 1.35;
  white-space: nowrap;
}
.histo__bar-year { opacity: 0.6; }

/* -- Axes en mini-barres -- reutilise par les panneaux de reponse
   (fiche-detail__axes) -- l'ex-accordeon "13 PROFILS" qui utilisait
   aussi .strati-card/.strati-grid a ete retire (RECADRAGE 3). ------------- */
.strati-axis { display: flex; align-items: center; gap: 0.5em; }
.strati-axis__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  opacity: 0.75;
  width: 5.2em;
  flex: 0 0 auto;
}
.strati-axis__track { position: relative; flex: 1; height: 6px; background: var(--border-light); }
.strati-axis__fill { position: absolute; left: 0; top: 0; bottom: 0; background: #1C1B22; }
.strati-axis--max .strati-axis__fill { box-shadow: 3px 0 0 0 var(--mauve); }
.strati-axis__value { font-family: var(--font-mono); font-size: 0.62rem; width: 2.6em; flex: 0 0 auto; text-align: right; }

/* -- Methodo (accordeon fermee par defaut) ------------------------------ */
.methodo-acc {
  max-width: var(--measure-narrative);
  margin: 0 auto;
  background: var(--c-2013-bg);
  color: var(--c-2013-fg);
  padding: 1.5em 1.75em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
}
.methodo-acc summary {
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3em 0;
}
.methodo-acc summary:hover, .methodo-acc summary:focus-visible { color: var(--mauve); }
.methodo-acc__body { margin-top: 1.4em; }
.methodo-acc__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 1.4em 0 0.6em 0;
}
.methodo-acc__body h3:first-child { margin-top: 0; }
.methodo-acc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.76rem;
}
.methodo-acc__body th, .methodo-acc__body td {
  border: 1px solid var(--border-dark);
  padding: 0.5em 0.7em;
  text-align: left;
  vertical-align: top;
}
.methodo-acc__body th { opacity: 0.7; font-weight: 500; }
.methodo-acc__body code {
  font-family: var(--font-mono);
  background: rgba(242, 241, 236, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.methodo-acc__body hr { border: none; border-top: 1px solid var(--border-dark); margin: 1.6em 0; }
.methodo-acc__body a { color: var(--mauve); }

@media (max-width: 1023px) {
  .histo__chips { position: sticky; top: 0; z-index: 10; background: var(--c-miroir-bg); padding: 0.6rem 0; }
}

/* ==========================================================================
   PAGE QUESTION -- q/{id}.html (une vraie page par question, RECADRAGE 3)
   ========================================================================== */
.q-page__topbar {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
}
@media (min-width: 1024px) { .q-page__topbar { padding: 1.2rem 3rem; } }
.q-page__home {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.q-page__home:hover, .q-page__home:focus-visible { color: var(--mauve); }

.q-page {
  background: var(--paillasse);
  color: var(--c-miroir-fg);
  padding: 2.5rem 1.25rem 4rem 1.25rem;
}
@media (min-width: 1024px) { .q-page { padding: 3rem 3rem 5rem 3rem; } }

.q-page__header { text-align: center; margin-bottom: 2rem; max-width: 1200px; margin-left: auto; margin-right: auto; }
.q-page__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.6em;
}
.q-page__question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 2.1rem);
  line-height: 1.3;
  max-width: var(--measure-narrative);
  margin: 0 auto;
}

/* ==========================================================================
   LA FICHE-MICROSCOPE -- gabarit unique x63 (DA validee 93/100, INCHANGEE)
   ========================================================================== */
.fiche { max-width: 1200px; margin: 0 auto; }
.fiche__nav-top { margin-bottom: 1rem; }
.fiche__up, .fiche-nav__up {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.fiche__up:hover, .fiche__up:focus-visible, .fiche-nav__up:hover, .fiche-nav__up:focus-visible { color: var(--mauve); }

.fiche__main { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) {
  .fiche__main { grid-template-columns: 40% 1fr; align-items: start; }
}
.fiche__col-etalon, .fiche__col-detail { min-width: 0; }

/* -- L'etalon 2013 (en tete, fixe) ------------------------------------------ */
.fiche-etalon { text-align: center; }
@media (min-width: 1024px) { .fiche-etalon { text-align: left; } }
.fiche-etalon__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.6em;
}
.fiche-etalon__capture { max-width: 320px; border: 1px solid var(--border-light); margin: 0 auto 0.9em auto; }
@media (min-width: 1024px) { .fiche-etalon__capture { margin: 0 0 0.9em 0; } }
.fiche-etalon__note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.8;
  max-width: 320px;
  margin: 0 auto 0.8em auto;
}
@media (min-width: 1024px) { .fiche-etalon__note { margin: 0 0 0.8em 0; } }
.fiche-etalon__note p { margin: 0 0 0.5em 0; }
.fiche-etalon__caption { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.6; }

/* -- La frise d'evolution 2022->2026, SVG pur -------------------------------- */
.frieze { display: flex; margin-top: 2rem; min-width: 0; }
.frieze__yaxis {
  display: none;
  position: relative;
  width: 1.6em;
  flex: 0 0 auto;
}
.frieze__yaxis span {
  position: absolute;
  left: 0; right: 0;
  transform: translateY(50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  opacity: 0.65;
  text-align: right;
}
/* Pas de scroll-snap ici (retire 25/07 -- fix bug Safari) : un scroll-snap
   sur un conteneur qui porte aussi des ancres/liens cliquables (.frieze__hit)
   est une zone connue de conflits WebKit entre le geste de scroll et le clic
   (issues WebKit publiques sur scroll-snap + pointer events). Cout nul --
   c'etait une pure amelioration cosmetique du scroll horizontal. */
.frieze__scroll { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.frieze__plot { position: relative; width: 100%; }
@media (max-width: 1023px) {
  .frieze__yaxis { display: block; }
  .frieze__plot { width: 720px; }
  .frieze__gridlabel { display: none; }
}
.frieze__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frieze__grid { stroke: var(--border-light); stroke-width: 1; }
.frieze__gridlabel { font-family: var(--font-mono); font-size: 11px; fill: currentColor; opacity: 0.65; }
.frieze__yearlabel { font-family: var(--font-mono); font-size: 11px; fill: currentColor; opacity: 0.7; }
.frieze__nodata { font-family: var(--font-mono); font-size: 13px; fill: currentColor; opacity: 0.5; }
.frieze__siri-ghost { fill: none; stroke: var(--mauve); stroke-width: 1.5; stroke-dasharray: 2 2; opacity: 0.7; }
.frieze__siri-ghost-label { font-family: var(--font-mono); font-size: 9px; fill: var(--mauve); opacity: 0.85; }
.frieze__bar { fill: var(--charbon); transition: height 0.4s var(--ease-reveal), y 0.4s var(--ease-reveal); }
.frieze__bar-cap { fill: var(--mauve); }
/* .frieze__hit est une vraie ancre <a href="#panel-...">, pas un <button>
   (fix bug Safari 25/07 -- cf. laboratoire.py::_frieze_hit_link) : le scroll
   au clic est gere nativement par le navigateur (html { scroll-behavior:
   smooth } deja global), aucune dependance JS. display:block explicite
   (au lieu de compter sur le calcul implicite "position:absolute -> block"
   d'un element inline) -- ceinture-bretelles cross-navigateur. */
.frieze__hit {
  display: block;
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-reveal), box-shadow 0.3s var(--ease-reveal);
}
.frieze__hit:hover, .frieze__hit:focus-visible {
  background: rgba(var(--mauve-rgb), 0.14);
  box-shadow: var(--mauve-glow);
  outline: none;
}

/* -- Le detail d'une reponse (panneau) -------------------------------------
   Les 13 panneaux sont TOUJOURS visibles (Fred, 25/07 : "je voudrais tout
   voir de base") -- plus d'accordeon max-height:0/opacity:0 pilote par JS
   (l'ancien pattern etait exactement l'anti-pattern "contenu qui n'existe
   que si le JS de toggle a tourne", cf. post-mortem Enumalon opacity:0).
   Cliquer une barre de la frise scrolle vers le panneau (ancre native) et
   .is-highlighted (ajoutee par main.js) fait un flash repere-oeil.

   Retour Fred (26/07) : "marque un peu plus la separation entre chaque
   modele, le trait de separation n'est pas assez visible" -- separateur
   epaissi (2px, plus sombre que le bordure-light standard) + espacement
   vertical generalise 2.4rem (etait 0.9em) + en-tete sur bande teintee
   mauve/liseret lateral epais (cf .fiche-detail__header) : l'oeil voit la
   coupure en scannant meme sans lire le texte. -------------------------- */
.fiche-detail__hint { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.7; }
.fiche-detail__panel {
  padding-top: 1.6rem;
  margin-top: 2.4rem;
  border-top: 2px solid var(--charbon);
  scroll-margin-top: 1.2rem;
}
.fiche-detail__panel:first-child { padding-top: 0.4em; margin-top: 0; border-top: none; }
.fiche-detail__panel.is-highlighted { animation: frieze-panel-highlight 1.8s var(--ease-reveal) both; }
@keyframes frieze-panel-highlight {
  0% { background-color: rgba(var(--mauve-rgb), 0.16); }
  100% { background-color: transparent; }
}

/* -- En-tete de panneau : identifie le modele SANS AMBIGUITE. Nom en
   evidence (KoHo, taille nettement superieure au corps 1rem) + UNE seule
   date (annee de SORTIE du modele) en badge mono mauve. Bande teintee +
   liseret lateral 4px mauve : signature visuelle "paillasse" qui separe
   franchement chaque modele du precedent (repris avec parcimonie : mauve
   uniquement sur le liseret/badge, pas de fond plein colore). ----------- */
.fiche-detail__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6em;
  background: rgba(var(--mauve-rgb), 0.07);
  border-left: 4px solid var(--mauve);
  padding: 0.6em 0.9em;
  margin: 0 0 1.1em 0;
}
.fiche-detail__model {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 1024px) { .fiche-detail__model { font-size: 1.32rem; } }
.fiche-detail__year {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.22em 0.55em;
  border: 1px solid var(--mauve);
  color: var(--mauve);
  border-radius: 2px;
  white-space: nowrap;
}

.fiche-detail__axes { margin: 0.8em 0 1.2em 0; }
.fiche-detail__axes .strati-axis__label { width: 6.6em; }
.fiche-detail__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  border-left: 2px solid var(--mauve);
  padding-left: 0.9em;
  margin: 0 0 1em 0;
  opacity: 0.9;
}
.fiche-detail__caption { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.6; margin-bottom: 0.8em; }
.fiche-detail__empty { font-style: italic; opacity: 0.6; }

/* -- pair__ai-content : reutilise par le panneau de reponse
   (render_fiche_detail_panel, laboratoire.py) pour l'affichage du markdown
   de chaque modele. ---------------------------------------------------- */
.pair__ai-content {
  font-size: 1rem;
  line-height: 1.8;
  max-width: var(--measure-miroir);
}
.pair__ai-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 1.1em 0 0.5em 0;
}
.pair__ai-content h3:first-child { margin-top: 0; }
.pair__ai-content strong { font-weight: 600; }

/* -- Navigation entre captures (prev/next/up -- vrais liens <a>) ----------- */
.fiche-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.fiche-nav__prev, .fiche-nav__next {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-light);
  color: inherit;
  text-decoration: none;
  padding: 0.5em 0.9em;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-reveal), color 0.3s var(--ease-reveal);
}
.fiche-nav__prev:hover, .fiche-nav__next:hover, .fiche-nav__prev:focus-visible, .fiche-nav__next:focus-visible {
  border-color: var(--mauve);
  color: var(--mauve);
}
.fiche-nav__position { opacity: 0.6; order: 3; width: 100%; text-align: center; }
@media (min-width: 640px) { .fiche-nav__position { order: 0; width: auto; } }
.fiche-nav__up { order: 4; width: 100%; text-align: center; }
@media (min-width: 640px) { .fiche-nav__up { order: 0; width: auto; } }
/* Bug DA_REVIEW_QUESTIONS.md M1 (25/07) : "position: sticky; bottom: 0" ici pinnait
   .fiche-nav au bas du VIEWPORT des le premier ecran, car son containing block
   (.fiche, hauteur non bornee, dernier enfant = .fiche-nav lui-meme) reste "in view"
   pendant tout le scroll de la page -- le nav se collait donc au milieu du contenu
   (etalon/frise/panneau) au lieu d'apparaitre en flux APRES la reponse. Retire :
   .fiche-nav suit desormais l'ordre naturel du DOM (deja le dernier enfant de .fiche),
   ce qui satisfait l'exigence DA "etalon -> frise -> panneau -> nav en dernier". */

@media (prefers-reduced-motion: reduce) {
  .histo__bar { transition: none !important; }
  .frieze__bar { transition: none !important; }
  .frieze__hit { transition: none !important; }
  .fiche-detail__panel.is-highlighted { animation: none !important; background-color: rgba(var(--mauve-rgb), 0.16); }
}

/* ==========================================================================
   FOOTER -- sobre : credit source (methodo detaillee = accordeon "LA GRILLE")
   ========================================================================== */
.site-footer {
  background: var(--c-2013-bg);
  color: var(--c-2013-fg);
  padding: 3rem 1.25rem;
  font-family: var(--font-mono);
}
@media (min-width: 1024px) {
  .site-footer { padding: 3rem 3rem; }
}
.site-footer__inner { max-width: var(--measure-narrative); margin: 0 auto; }
.site-footer p {
  font-size: 0.78rem;
  line-height: 1.7;
  opacity: 0.85;
}
.site-footer a { color: var(--mauve); text-decoration: underline; }
.site-footer__meta {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-dark);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* ==========================================================================
   REVEAL -- animation scroll (JS enhanced, visible par defaut sans JS)
   Pattern obligatoire : opacity 1 en CSS statique, JS bascule vers cache puis revele.
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
body.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-reveal), transform 0.6s var(--ease-reveal);
}
body.js .reveal.is-visible { opacity: 1; transform: none; }

.museum-card.reveal { transition-delay: var(--stagger, 0ms); }

@media (prefers-reduced-motion: reduce) {
  body.js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .museum-card { transition: none !important; }
  html { scroll-behavior: auto !important; }
}