/* RELIQUIUM — site de présentation, selon la charte graphique v1.0 (24/10/2026) : vert profond, ivoire parchemin, or
   patiné ; Source Serif 4 pour les titres, Manrope pour le texte ; grille de 8 px, angles de 12 à 16 px, cibles de
   48 px.

   Mouvement, en trois registres :
   - réponses de l'interface (survol, appui, menus) : 180 à 240 ms, courbe douce (--duree, --courbe) ;
   - apparitions et illustrations qui se dessinent : 480 à 900 ms, décalées de 70 ms entre voisins ;
   - scènes liées au défilement (couches de cartes, étapes du téléphone) : la position de lecture pilote l'état, des
     transitions de 520 à 700 ms lissent le mouvement. Deux scènes épinglées au plus, jamais de défilement détourné.
   Avec « réduire les animations », ou sans JavaScript, tout s'affiche dans son état final (classe .mouvement absente). */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Position du curseur de comparaison (écran 2), animable. */
@property --position-curseur { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

:root {
  --vert: #173f35;
  --vert-fonce: #0f2e26;
  --ivoire: #f5f0e5;
  --or: #c9a45c;
  /* Texte courant sur fond vert : ivoire adouci (9,4:1 sur le vert), filets et voiles ivoire transparents. */
  --ivoire-doux: #e9e3d6;
  --voile-ivoire: rgba(245, 240, 229, 0.06);
  --filet-ivoire: rgba(245, 240, 229, 0.18);
  --fond: var(--ivoire);
  --fond-teinte: #ece5d4;
  --surface: #fbf8f1;
  --surface-2: #eee7d8;
  --texte: var(--vert);
  --texte-2: #365449;
  --ligne: #d2c9b5;
  --focus: var(--vert);
  /* Aplats porteurs d'une valeur (pastilles de points, jauges, barres) : vert en clair, or en sombre. */
  --plein: var(--vert);
  --sur-plein: var(--ivoire);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --courbe-ressort: cubic-bezier(.34, 1.56, .64, 1);
  --duree: 220ms;
  --duree-scene: 520ms;
  --largeur: 1180px;
  --hauteur-entete: 72px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12352c;
    --fond-teinte: #0f2f27;
    --surface: #1e4a3f;
    --surface-2: #245246;
    --texte: var(--ivoire);
    --texte-2: #dcd6c8;
    --ligne: #3e6a5d;
    --focus: var(--ivoire);
    --plein: var(--or);
    --sur-plein: var(--vert);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hauteur-entete); }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* Pas de délai de double toucher sur les commandes. */
a, button, summary { touch-action: manipulation; }
.sprite { position: absolute; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--vert); color: var(--ivoire); padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.evitement:focus { top: 12px; }

.section-claire { background: var(--fond); color: var(--texte); }
.section-teintee { background: var(--fond-teinte); color: var(--texte); }
.section-verte { background: var(--vert); color: var(--ivoire); --focus: var(--ivoire); }
@media (prefers-color-scheme: dark) { .section-verte { background: var(--vert-fonce); } }

/* ---------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 12px; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: translate var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), background-color var(--duree), scale 180ms var(--courbe);
}
.bouton:hover { translate: 0 -2px; box-shadow: 0 8px 20px rgba(15, 46, 38, 0.25); }
.bouton:active { scale: 0.97; }
.bouton svg { width: 20px; height: 20px; }
.bouton-or { background: var(--or); color: var(--vert); border-color: var(--vert); }
.bouton-contour-clair { background: transparent; color: var(--ivoire); border-color: var(--ivoire); }
.bouton-contour-clair:hover { background: rgba(245, 240, 229, 0.08); }
.bouton-contour { background: transparent; color: var(--texte); border-color: var(--texte); }
.bouton-contour:hover { background: var(--surface-2); }
.petit-bouton { min-height: 48px; padding: 0 16px; font-size: 15px; }

/* ---------------------------------------------------------------- en-tête */
.haut {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 24px;
  padding: 12px max(16px, calc((100% - var(--largeur)) / 2)); color: var(--ivoire);
  transition: background-color var(--duree) var(--courbe), color var(--duree), box-shadow var(--duree);
}
.haut.defile { background: var(--fond); color: var(--texte); box-shadow: 0 1px 0 var(--ligne); --focus: var(--texte); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; }
.marque-icone { width: 40px; height: 40px; border-radius: 12px; background: var(--vert); color: var(--ivoire); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(245, 240, 229, 0.25); }
.marque-icone svg { width: 28px; height: 28px; }
.marque-nom { font: 600 20px/1 var(--serif); letter-spacing: 0.06em; }
.haut-liens { display: none; gap: 22px; margin-left: auto; }
.haut-liens a { font-weight: 600; font-size: 15px; text-decoration: none; padding: 12px 0; position: relative; }
.haut-liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale var(--duree) var(--courbe); }
.haut-liens a:hover::after, .haut-liens a[aria-current="true"]::after { scale: 1 1; }
.haut-liens a[aria-current="true"] { font-weight: 700; }
.haut .petit-bouton { margin-left: auto; }
/* Fil de lecture : avancement dans la page, sous l'en-tête une fois l'ouverture passée. */
.haut-progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--or); transform-origin: left; scale: var(--progression, 0) 1; opacity: 0; transition: opacity var(--duree); }
.haut.defile .haut-progression { opacity: 1; }
@media (min-width: 1040px) { .haut-liens { display: flex; } .haut .petit-bouton { margin-left: 8px; } }
@media (max-width: 420px) { .marque-nom { display: none; } }

/* ---------------------------------------------------------------- ouverture */
.ouverture {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 70% 20%, #1e4a3f 0%, var(--vert) 55%, var(--vert-fonce) 100%); color: var(--ivoire);
  --focus: var(--ivoire); padding: 112px 16px 104px;
}
/* Relief au pointeur (souris seulement) : le fond glisse à peine, la boussole en sens inverse. */
.topo { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); color: var(--or); opacity: 0.38;
  translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -12px); transition: translate 700ms var(--courbe); }
/* Aucune boucle sans fin : chaque animation automatique s'arrête en moins de 5 s (WCAG 2.2.2). */
.topo-lignes path { stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: tracer 2.6s var(--courbe) forwards; }
.topo-lignes path:nth-child(1) { animation-delay: 0ms; } .topo-lignes path:nth-child(2) { animation-delay: 90ms; }
.topo-lignes path:nth-child(3) { animation-delay: 180ms; } .topo-lignes path:nth-child(4) { animation-delay: 270ms; }
.topo-lignes path:nth-child(5) { animation-delay: 360ms; } .topo-lignes path:nth-child(6) { animation-delay: 450ms; }
.topo-lignes path:nth-child(7) { animation-delay: 540ms; } .topo-lignes path:nth-child(8) { animation-delay: 630ms; }
.topo-lignes path:nth-child(9) { animation-delay: 720ms; } .topo-lignes path:nth-child(10) { animation-delay: 810ms; }
.topo-lignes path:nth-child(11) { animation-delay: 900ms; }
.topo-chemin { opacity: 0; animation: apparaitre 800ms var(--courbe) 1.6s forwards, marcher 3.2s var(--courbe) 1.6s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes apparaitre { to { opacity: 1; } }
@keyframes marcher { to { stroke-dashoffset: -320; } }

.ouverture-contenu { position: relative; max-width: 760px; text-align: center; display: grid; justify-items: center; gap: 18px; }
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.surtitre-vert { color: var(--texte-2); }
.boussole-hero { width: 104px; height: 104px; margin: 8px 0 4px; }
.boussole-hero svg { width: 100%; height: 100%; rotate: var(--rotation-defilement, 0deg);
  translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); transition: rotate 120ms linear, translate 700ms var(--courbe); }
.boussole-cercle { stroke-dasharray: 330; stroke-dashoffset: 330; animation: tracer 1.2s var(--courbe) 200ms forwards; }
.boussole-aiguille { transform-origin: 60px 60px; animation: poser-aiguille 1.4s var(--courbe-ressort) 700ms both; }
@keyframes poser-aiguille { from { transform: rotate(-150deg); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(0); opacity: 1; } }
.titre-marque { font-size: clamp(44px, 9vw, 96px); letter-spacing: 0.06em; line-height: 1; animation: resserrer 1.4s var(--courbe) 300ms both; }
@keyframes resserrer { from { letter-spacing: 0.32em; opacity: 0; } to { letter-spacing: 0.06em; opacity: 1; } }
.devise { font: 600 clamp(24px, 4vw, 36px)/1.2 var(--serif); }
.chapeau { font-size: clamp(17px, 2.2vw, 20px); max-width: 620px; color: var(--ivoire-doux); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.assurances { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; font-weight: 600; color: var(--ivoire-doux); }
.assurances li { display: inline-flex; align-items: center; gap: 8px; }
.assurances svg { width: 20px; height: 20px; color: var(--or); flex: none; }
.indice-defilement { position: absolute; bottom: 24px; left: 50%; margin-left: -16px; width: 32px; height: 52px; border-radius: 16px; border: 2px solid rgba(245, 240, 229, 0.7); display: grid; justify-items: center; padding-top: 10px; }
/* Cible de 48 px autour du dessin de 32 px. */
.indice-defilement::before { content: ""; position: absolute; inset: -8px; }
.indice-defilement span { width: 4px; height: 10px; border-radius: 2px; background: var(--or); animation: indiquer 1.8s var(--courbe) 1.2s 2; }
@keyframes indiquer { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 16px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@media (max-width: 599px) { .boussole-hero { width: 80px; height: 80px; margin: 0; } }
@media (max-height: 820px) { .indice-defilement { display: none; } }

/* ---------------------------------------------------------------- apparitions (seulement avec JavaScript) */
.js .revele { opacity: 0; translate: 0 16px; transition: opacity 480ms var(--courbe), translate 480ms var(--courbe); transition-delay: var(--delai, 0ms); }
.js .revele.visible { opacity: 1; translate: 0 0; }
.js .ouverture .revele { transition-duration: 700ms; }

/* Titres communs aux sections. */
.titre-section { font-size: clamp(30px, 5vw, 48px); }
.chapeau-section { font-size: 18px; color: var(--texte-2); }
.section-verte .chapeau-section { color: var(--ivoire-doux); }

/* ---------------------------------------------------------------- chiffres */
.chiffres { padding: 72px 16px 56px; }
.chiffres-liste { list-style: none; margin: 0 auto; padding: 0; max-width: var(--largeur); display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
.chiffres-liste li { display: grid; gap: 6px; border-top: 2px solid var(--or); padding-top: 16px; }
.chiffres-liste strong { font: 600 clamp(34px, 5vw, 56px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.chiffres-liste span { font-size: 15px; font-weight: 600; color: var(--texte-2); }
.note-chiffres { max-width: var(--largeur); margin: 28px auto 0; font-size: 14px; color: var(--texte-2); }
@media (min-width: 900px) { .chiffres-liste { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- couches du temps
   Pile de cinq cartes vues en perspective cavalière (rotation sans perspective : projection orthogonale, donc le
   centre de chaque carte reste à l'aplomb des autres). --ouvre (0 → 1, défilement) écarte les couches ; .active
   désigne la couche lue, .levee celles du dessus, rendues translucides pour laisser voir la couche lue. */
.couches { padding: 88px 16px 56px; }
.couches-intro { max-width: 700px; margin: 0 auto; text-align: center; display: grid; gap: 14px; }
.couches-piste { position: relative; max-width: var(--largeur); margin: 40px auto 0; }
.couches-scene { display: grid; gap: 32px; align-items: center; }
.mouvement .couches-piste { height: 320vh; margin-top: 8px; }
.mouvement .couches-scene { position: sticky; top: calc(var(--hauteur-entete) - 8px); height: calc(100vh - var(--hauteur-entete) + 8px); height: calc(100svh - var(--hauteur-entete) + 8px); align-content: center; }

.couches-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.couches-liste li { display: grid; gap: 2px; padding: 14px 0 14px 20px; border-left: 2px solid var(--ligne); transition: border-color var(--duree-scene) var(--courbe); }
.couche-date { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); }
.couches-liste b { font: 600 22px/1.25 var(--serif); }
.couches-liste li > span:last-child { font-size: 15px; color: var(--texte-2); }
.couches-liste li.active { border-left-color: var(--or); }
/* Couche lue : filet or, titre plein et léger fond ; les autres gardent un texte à 4,5:1 (couleur secondaire, pas
   d'opacité qui ferait tomber le contraste). */
.couches-liste li { transition: border-color var(--duree-scene) var(--courbe), background-color var(--duree-scene) var(--courbe); }
.couches-liste b { transition: color var(--duree-scene) var(--courbe); }
.mouvement .couches-liste li:not(.active) b { color: var(--texte-2); }
.mouvement .couches-liste li.active { background: linear-gradient(90deg, rgba(201, 164, 92, 0.16), rgba(201, 164, 92, 0) 80%); }
/* Mobile, scène animée : la liste reste lue par les lecteurs d'écran, la légende sous la pile la remplace à l'œil. */
@media (max-width: 899px) { .mouvement .couches-liste { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.couches-visuel { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.pile {
  --s: min(58vw, 230px); --ecart-max: 46px; --ecart: calc(var(--ouvre, 1) * var(--ecart-max));
  position: relative; width: calc(var(--s) * 1.42); height: calc(var(--s) * 0.76 + var(--ecart-max) * 4 + 48px);
}
.couche {
  position: absolute; left: 50%; top: calc(50% + 20px); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 14px; overflow: hidden; background: var(--surface);
  transform: translateY(calc((var(--k) - 3) * var(--ecart) - var(--leve, 0) * 22px)) rotateX(58deg) rotateZ(-42deg);
  box-shadow: 0 0 0 1px rgba(23, 63, 53, 0.3), 16px 16px 28px rgba(15, 46, 38, 0.2);
  transition: transform var(--duree-scene) var(--courbe), opacity var(--duree-scene) var(--courbe), box-shadow var(--duree-scene) var(--courbe);
}
.couche svg { display: block; width: 100%; height: 100%; }
.carte-italique { font-style: italic; }
.couche[data-couche="1"], .pile-axe[data-seg="1"], .etiquette[data-couche="1"] { --k: 1; }
.couche[data-couche="2"], .pile-axe[data-seg="2"], .etiquette[data-couche="2"] { --k: 2; }
.couche[data-couche="3"], .pile-axe[data-seg="3"], .etiquette[data-couche="3"] { --k: 3; }
.couche[data-couche="4"], .pile-axe[data-seg="4"], .etiquette[data-couche="4"] { --k: 4; }
.couche[data-couche="5"], .etiquette[data-couche="5"] { --k: 5; }
.couche.levee { --leve: 1; opacity: 0.16; }
.couche.active { box-shadow: 0 0 0 2px var(--vert), 0 0 0 6px rgba(201, 164, 92, 0.85), 18px 18px 34px rgba(15, 46, 38, 0.28); }
/* Axe pointillé : du centre d'une couche au centre de la suivante, visible à travers les couches levées. */
.pile-axe { position: absolute; left: 50%; top: calc(50% + 20px); width: 0; margin-left: -1px; border-left: 2px dashed var(--plein);
  height: calc(var(--ecart) + 22px); transform: translateY(calc((var(--k) - 3) * var(--ecart) - 22px));
  transition: transform var(--duree-scene) var(--courbe), height var(--duree-scene) var(--courbe); }
/* Repère du lieu, posé sur la couche lue. */
.pile-repere { position: absolute; left: 50%; top: calc(50% + 20px); width: 30px; height: 38px; margin: -37px 0 0 -15px; z-index: 2;
  transform: translateY(calc((var(--active, 1) - 3) * var(--ecart))); transition: transform 700ms var(--courbe-ressort);
  filter: drop-shadow(0 4px 6px rgba(15, 46, 38, 0.3)); }
.pile-repere svg { display: block; width: 100%; height: 100%; }
.etiquette { display: none; }
.legendes { display: none; }
.couches-note { font-size: 13px; color: var(--texte-2); text-align: center; max-width: 380px; }

.mouvement .legendes { display: grid; width: min(100%, 420px); min-height: 76px; }
.legende { grid-area: 1 / 1; text-align: center; font-size: 15px; color: var(--texte-2); opacity: 0; translate: 0 8px; transition: opacity 320ms var(--courbe), translate 320ms var(--courbe); }
.legende b { display: block; color: var(--texte); font-size: 16px; }
.legende.active { opacity: 1; translate: 0 0; }

@media (min-width: 900px) {
  .couches-scene { grid-template-columns: minmax(280px, 380px) 1fr; gap: 48px; }
  .pile { --s: 290px; --ecart-max: 68px; margin-right: 170px; }
  .mouvement .legendes { display: none; }
  .etiquette { display: grid; position: absolute; left: calc(50% + var(--s) * 0.706 + 22px); top: calc(50% + 20px); gap: 0; min-width: 150px; padding-left: 14px;
    transform: translateY(calc((var(--k) - 3) * var(--ecart) - 50% - var(--leve, 0) * 22px)); transition: transform var(--duree-scene) var(--courbe), opacity var(--duree-scene) var(--courbe); }
  .etiquette::before { content: ""; position: absolute; left: -10px; top: 50%; width: 18px; border-top: 1.5px solid var(--texte-2); }
  .etiquette b { font-size: 15px; font-weight: 700; }
  .etiquette small { font-size: 13px; font-weight: 600; color: var(--texte-2); }
  /* Pile fermée : étiquettes masquées (elles se superposeraient), puis révélées avec l'écartement. */
  .mouvement .etiquette { opacity: var(--ouvre, 1); }
  .mouvement .etiquette:not(.active) b { color: var(--texte-2); font-weight: 600; }
  .etiquette.active::before { border-top-color: var(--or); border-top-width: 3px; }
  .etiquette.levee { --leve: 1; }
}
@media (min-width: 900px) and (max-height: 820px) { .pile { --s: 250px; --ecart-max: 54px; } .couches-liste li { padding-top: 10px; padding-bottom: 10px; } }
/* Téléphone à l'horizontale (peu de hauteur) : pile réduite pour tenir dans la scène épinglée. */
@media (max-width: 899px) and (max-height: 520px) {
  .pile { --s: 140px; --ecart-max: 24px; }
  .couches-scene { gap: 8px; }
  /* Légende réduite à son titre (la description reste dans la liste, lue par les lecteurs d'écran). */
  .mouvement .legendes { min-height: 0; }
  .legende { font-size: 0; }
  .legende b { font-size: 15px; }
  .couches-note { display: none; }
}
/* Écrans moyens : pile et étiquettes plus compactes, pour ne jamais déborder de la colonne. */
@media (min-width: 900px) and (max-width: 1149px) {
  .couches-scene { grid-template-columns: minmax(240px, 300px) 1fr; gap: 32px; }
  .pile { --s: 210px; --ecart-max: 54px; margin-right: 180px; }
  .etiquette { min-width: 130px; }
}

/* ---------------------------------------------------------------- étapes */
.etapes { padding: 88px 16px 40px; }
.etapes-intro { max-width: 700px; margin: 0 auto 40px; text-align: center; display: grid; gap: 14px; }
.etapes-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 0; }
.etapes-liste { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.etape { min-height: 62vh; display: grid; align-content: center; gap: 12px; padding: 24px 4px 24px 20px; border-left: 2px solid var(--ligne); transition: border-color var(--duree) var(--courbe); }
.etape h3 { font-size: clamp(24px, 3.4vw, 34px); color: var(--texte-2); transition: color var(--duree) var(--courbe); }
.etape p { color: var(--texte-2); max-width: 520px; }
.etape-num { font: 600 15px/1 var(--sans); letter-spacing: 0.12em; color: var(--texte-2); display: inline-flex; align-items: center; gap: 10px; }
.etape-num::after { content: ""; width: 28px; height: 2px; background: var(--ligne); transition: width var(--duree) var(--courbe), background-color var(--duree); }
.etape.active { border-left-color: var(--or); }
.etape.active h3, .etape.active .etape-num, .etape.active p { color: var(--texte); }
.etape.active .etape-num::after { width: 56px; background: var(--or); }

/* Téléphone : épinglé en haut sur mobile (au-dessus du texte qui défile), à droite sur grand écran. */
.telephone-cadre { position: sticky; top: 64px; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 8px 0 20px;
  background: linear-gradient(var(--fond) 88%, color-mix(in srgb, var(--fond) 0%, transparent)); }
.telephone-note { font-size: 12px; font-weight: 600; color: var(--texte-2); text-align: center; max-width: 300px; }
.telephone { zoom: 0.62; width: 300px; height: 620px; border-radius: 44px; padding: 10px; background: var(--vert-fonce);
  box-shadow: 0 30px 60px rgba(15, 46, 38, 0.35), inset 0 0 0 2px #2d5d50; }
.telephone-suivi { display: none; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--texte-2); }
.telephone-suivi b { color: var(--texte); font-variant-numeric: tabular-nums; }
.telephone-points { display: flex; gap: 6px; }
.telephone-points i { width: 8px; height: 8px; border-radius: 4px; background: var(--ligne); transition: width var(--duree) var(--courbe), background-color var(--duree); }
.telephone-points i.active { width: 22px; background: var(--plein); }
@media (max-width: 400px) { .telephone { zoom: 0.56; } }
@media (min-width: 560px) { .telephone { zoom: 0.78; } }
/* Sous le téléphone épinglé, le texte de l'étape commence tout de suite et occupe l'espace restant. */
@media (max-width: 899px) { .etape { min-height: 72vh; align-content: start; padding-top: 28px; } }
@media (min-width: 900px) {
  .etapes-grille { grid-template-columns: 1fr minmax(320px, 400px); gap: 64px; align-items: start; }
  .telephone-cadre { order: 2; top: calc(50vh - 330px); background: none; padding: 0; }
  .telephone { zoom: 1; }
  .telephone-suivi { display: flex; }
  .etapes-liste { order: 1; }
  .etape { min-height: 70vh; padding-left: 32px; }
}
/* Peu de hauteur (après le bloc grand écran, qu'elles doivent corriger) : téléphone plus petit et jamais sous
   l'en-tête ; sur téléphone à l'horizontale, il n'est plus épinglé (il couvrirait tout l'écran). */
@media (min-width: 900px) and (max-height: 820px) { .telephone { zoom: 0.82; } .telephone-cadre { top: max(84px, calc(50vh - 280px)); } }
@media (min-width: 900px) and (max-height: 700px) { .telephone { zoom: 0.66; } .telephone-cadre { top: 84px; } }
@media (max-width: 899px) and (max-height: 600px) { .telephone-cadre { position: relative; top: auto; } .telephone { zoom: 0.5; } .etape { min-height: auto; padding-top: 24px; padding-bottom: 24px; } }

.ecran { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #f5f0e5; color: #173f35; font-family: var(--sans); }
.e-statut { position: absolute; inset: 0 0 auto; height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; font-size: 13px; font-weight: 700; z-index: 3; }
.e-reseau { width: 22px; height: 10px; border-radius: 3px; border: 2px solid #173f35; }
.e-vue { position: absolute; inset: 40px 0 64px; padding: 8px 14px; opacity: 0; translate: 0 14px; transition: opacity 240ms var(--courbe), translate 240ms var(--courbe); pointer-events: none; }
.e-vue.active { opacity: 1; translate: 0 0; transition-delay: 60ms; }
.e-nav { position: absolute; inset: auto 0 0; height: 64px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fbf8f1; border-top: 1px solid #d2c9b5; z-index: 3; }
.e-nav span { display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 10px; font-weight: 600; color: #365449; position: relative; }
.e-nav svg { width: 20px; height: 20px; position: relative; }
.e-nav span.active { color: #173f35; font-weight: 700; }
.e-nav span.active::before { content: ""; position: absolute; top: 9px; width: 46px; height: 24px; border-radius: 12px; background: #c9a45c; }
.ecran svg use, .ecran svg { color: currentColor; }

/* écran 1 : chercher */
.e-recherche { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px; background: #fbf8f1; border: 1px solid #74857c; font-weight: 600; font-size: 15px; }
.e-recherche svg { width: 18px; height: 18px; flex: none; }
.e-saisie { display: inline-block; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }
.e-vue.active .e-saisie { animation: saisir 900ms steps(9, end) 300ms forwards; }
.e-curseur { width: 2px; height: 20px; background: #173f35; margin-left: -6px; animation: clignoter 1s steps(1) 4; }
@keyframes saisir { to { clip-path: inset(0 0 0 0); } }
@keyframes clignoter { 50% { opacity: 0; } }
.e-carte { margin-top: 12px; border-radius: 16px; background: #fbf8f1; border: 1px solid #e2d8c3; overflow: hidden; position: relative; }
.e-carte svg { display: block; width: 100%; height: auto; }
.e-carte-courte { height: 150px; }
.e-carte-haute { height: 470px; margin-top: 0; }
.e-cible { transform-box: fill-box; transform-origin: center; }
.e-vue.active .e-cible { animation: surgir-cible 520ms var(--courbe-ressort) 1.1s both; }
@keyframes surgir-cible { from { scale: 0; } }
.e-resultats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.e-resultats li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fbf8f1; border: 1px solid #e2d8c3; opacity: 0; translate: 0 10px; }
.e-resultats b { display: block; font-size: 14px; }
.e-resultats small { display: block; font-size: 12px; color: #365449; font-weight: 600; }
.e-point { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #b5532f; box-shadow: 0 0 0 2px #fbf8f1, 0 0 0 3px #173f35; }
.e-point[data-epoque="commune"] { background: #f5f0e5; box-shadow: 0 0 0 2px #74857c; }
.e-vue.active .e-resultats li { animation: monter 320ms var(--courbe) forwards; }
.e-vue.active .e-resultats li:nth-child(1) { animation-delay: 1.25s; }
.e-vue.active .e-resultats li:nth-child(2) { animation-delay: 1.37s; }
.e-vue.active .e-resultats li:nth-child(3) { animation-delay: 1.49s; }
@keyframes monter { to { opacity: 1; translate: 0 0; } }

/* écran 2 : remonter le temps */
.e-frise { display: flex; gap: 6px; overflow: hidden; }
.e-frise span { flex: none; padding: 7px 12px; border-radius: 16px; border: 1px solid #173f35; font-size: 12px; font-weight: 600; background: #fbf8f1; }
.e-vue.active .e-frise span:nth-child(2) { animation: choisir 1.6s var(--courbe) 300ms forwards; }
@keyframes choisir { 40%, 100% { background: #c9a45c; } }
.e-comparer { position: relative; margin-top: 12px; height: 450px; border-radius: 16px; overflow: hidden; border: 1px solid #e2d8c3; --position-curseur: 50%; }
.e-comparer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.e-ancienne, .e-actuelle { position: absolute; inset: 0; }
.e-ancienne { z-index: 2; clip-path: inset(0 calc(100% - var(--position-curseur)) 0 0); }
.e-legende-carte { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 8px; background: #173f35; color: #f5f0e5; font-size: 11px; font-weight: 600; }
.e-legende-droite { left: auto; right: 10px; }
.e-poignee { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--position-curseur); width: 3px; margin-left: -1.5px; background: #173f35; box-shadow: 0 0 0 1px #f5f0e5; }
.e-poignee span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #173f35; color: #f5f0e5; border: 2px solid #f5f0e5; display: grid; place-items: center; }
.e-poignee svg { width: 22px; height: 22px; position: static; }
.e-vue.active .e-comparer { animation: comparer 2.6s var(--courbe) 500ms both; }
@keyframes comparer { 0% { --position-curseur: 50%; } 35% { --position-curseur: 82%; } 70% { --position-curseur: 22%; } 100% { --position-curseur: 50%; } }

/* écran 3 : lire les preuves */
.e-fiche { background: #fbf8f1; border-radius: 18px; padding: 16px; border: 1px solid #e2d8c3; min-height: 100%; }
.e-fiche-titre { font: 600 22px/1.15 var(--serif); }
.e-fiche-sous { font-size: 13px; color: #365449; font-weight: 600; margin-top: 4px; }
.e-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.e-tuile { background: #eee7d8; border-radius: 12px; padding: 10px; border: 1px solid #d2c9b5; display: grid; gap: 4px; }
.e-tuile small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #365449; }
.e-tuile b { font-size: 16px; font-variant-numeric: tabular-nums; }
.e-jauge { height: 7px; border-radius: 4px; background: #e2d8c3; overflow: hidden; }
.e-jauge i { display: block; height: 100%; background: #173f35; transform-origin: left; scale: 0 1; }
.e-vue.active .e-jauge i { animation: remplir 1.1s var(--courbe) 400ms forwards; }
@keyframes remplir { to { scale: 0.85 1; } }
.e-question { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #4a665d; }
.e-question-haut { margin: 4px 0 10px; }
.e-preuves { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.e-preuves li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-bottom: 1px dashed #d2c9b5; font-size: 14px; font-weight: 600; opacity: 0; translate: 0 8px; }
.e-preuves b { min-width: 38px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: #173f35; color: #f5f0e5; font-size: 12px; }
.e-vue.active .e-preuves li { animation: monter 320ms var(--courbe) forwards; }
.e-vue.active .e-preuves li:nth-child(1) { animation-delay: 900ms; }
.e-vue.active .e-preuves li:nth-child(2) { animation-delay: 1020ms; }
.e-vue.active .e-preuves li:nth-child(3) { animation-delay: 1140ms; }
.e-vue.active .e-preuves li:nth-child(4) { animation-delay: 1260ms; }

/* écran 4 : suivre les routes anciennes */
.e-trace { stroke-dasharray: 520; stroke-dashoffset: 520; }
.e-cassini { stroke-dasharray: 6 5; stroke-dashoffset: 0; opacity: 0; }
.e-vue.active .e-romaine { animation: tracer 1.3s var(--courbe) 300ms forwards; }
.e-vue.active .e-cassini { animation: apparaitre 700ms var(--courbe) 900ms forwards; }
.e-repere { transform-box: fill-box; transform-origin: center; scale: 0; }
.e-vue.active .e-repere { animation: surgir 420ms var(--courbe-ressort) forwards; }
.e-vue.active .r1 { animation-delay: 1.5s; } .e-vue.active .r2 { animation-delay: 1.7s; } .e-vue.active .r3 { animation-delay: 1.9s; }
@keyframes surgir { to { scale: 1; } }
.e-bulle { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #fbf8f1; border: 1px solid #d2c9b5; box-shadow: 0 6px 16px rgba(15, 46, 38, 0.15); opacity: 0; translate: 0 12px; }
.e-bulle b { display: block; font-size: 13px; }
.e-bulle small { display: block; font-size: 11px; font-weight: 600; color: #365449; }
.e-vue.active .e-bulle { animation: monter 320ms var(--courbe) 2.2s forwards; }

/* écran 5 : comprendre le terrain */
.e-lieudit { transform-box: fill-box; transform-origin: center; scale: 0; }
.e-lieudit-nom { opacity: 0; }
.e-vue.active .e-lieudit { animation: surgir 420ms var(--courbe-ressort) 500ms forwards; }
.e-vue.active .e-lieudit-nom { animation: apparaitre 320ms var(--courbe) 800ms forwards; }
.e-milieu { list-style: none; margin: 12px 0 0; padding: 12px; display: grid; gap: 0; background: #fbf8f1; border-radius: 14px; border: 1px solid #e2d8c3; }
.e-milieu li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #eee7d8; font-size: 14px; opacity: 0; translate: 0 8px; }
.e-milieu li:last-child { border-bottom: 0; }
.e-milieu span { font-weight: 600; color: #365449; }
.e-vue.active .e-milieu li { animation: monter 300ms var(--courbe) forwards; }
.e-vue.active .e-milieu li:nth-child(1) { animation-delay: 900ms; } .e-vue.active .e-milieu li:nth-child(2) { animation-delay: 990ms; }
.e-vue.active .e-milieu li:nth-child(3) { animation-delay: 1080ms; } .e-vue.active .e-milieu li:nth-child(4) { animation-delay: 1170ms; }
.e-vue.active .e-milieu li:nth-child(5) { animation-delay: 1260ms; } .e-vue.active .e-milieu li:nth-child(6) { animation-delay: 1350ms; }

/* écran 6 : connaître le cadre */
.e-activites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.e-activites li { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fbf8f1; border: 1px solid #e2d8c3; opacity: 0; translate: 0 10px; }
.e-activites svg { width: 22px; height: 22px; grid-row: span 2; }
.e-activites span { font-weight: 700; font-size: 14px; }
.e-activites em { font-style: normal; font-size: 12px; font-weight: 700; }
.e-statut-requis { color: #a1232a; }
.e-statut-info { color: #285a8a; }
.e-vue.active .e-activites li { animation: monter 320ms var(--courbe) forwards; }
.e-vue.active .e-activites li:nth-child(1) { animation-delay: 300ms; } .e-vue.active .e-activites li:nth-child(2) { animation-delay: 420ms; }
.e-vue.active .e-activites li:nth-child(3) { animation-delay: 540ms; } .e-vue.active .e-activites li:nth-child(4) { animation-delay: 660ms; }
.e-badge { margin: 14px auto 0; width: max-content; max-width: 100%; padding: 8px 14px; border-radius: 18px; background: #c9a45c; color: #173f35; border: 1.5px solid #173f35; font-size: 13px; font-weight: 700; scale: 0; }
.e-vue.active .e-badge { animation: surgir 420ms var(--courbe-ressort) 1.1s forwards; }
.e-interlocuteurs { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.e-interlocuteurs span { padding: 7px 12px; border-radius: 16px; border: 1px solid #173f35; font-size: 12px; font-weight: 700; background: #fbf8f1; opacity: 0; translate: 0 8px; }
.e-vue.active .e-interlocuteurs span { animation: monter 300ms var(--courbe) forwards; }
.e-vue.active .e-interlocuteurs span:nth-child(1) { animation-delay: 1.4s; } .e-vue.active .e-interlocuteurs span:nth-child(2) { animation-delay: 1.5s; }
.e-vue.active .e-interlocuteurs span:nth-child(3) { animation-delay: 1.6s; }

/* écran 7 : aller sur le terrain */
.e-guidage { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: #fbf8f1; border: 1px solid #e2d8c3; margin-top: 4px; }
.e-cadran { position: relative; width: 96px; height: 96px; flex: none; border-radius: 50%; background: #eee7d8; border: 2px solid #d2c9b5; }
.e-nord { position: absolute; top: 3px; left: 50%; translate: -50% 0; font-size: 11px; font-weight: 800; color: #a1232a; }
.e-fleche { position: absolute; inset: 12px; rotate: 52deg; }
.e-vue.active .e-fleche { animation: orienter 1.6s var(--courbe-ressort) 300ms both; }
@keyframes orienter { from { rotate: -120deg; } to { rotate: 52deg; } }
.e-distance { display: block; font: 700 30px/1 var(--sans); font-variant-numeric: tabular-nums; }
.e-guidage small { display: block; font-size: 12px; font-weight: 600; color: #365449; margin-top: 6px; }
.e-hors-ligne { margin: 14px 0 0; padding: 8px 12px; border-radius: 12px; background: #173f35; color: #f5f0e5; font-size: 12px; font-weight: 700; text-align: center; opacity: 0; }
.e-vue.active .e-hors-ligne { animation: apparaitre 300ms var(--courbe) 1.4s forwards; }
.e-note { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 14px; background: #fbf8f1; border: 1px solid #e2d8c3; opacity: 0; translate: 0 16px; }
.e-note svg { width: 24px; height: 24px; flex: none; }
.e-note b { display: block; font-size: 14px; }
.e-note small { display: block; font-size: 12px; font-weight: 600; color: #365449; }
.e-vue.active .e-note { animation: monter 360ms var(--courbe) 1.8s forwards; }

/* ---------------------------------------------------------------- ressources et découvertes
   Section verte où posent des « papiers » clairs (coupe, carte, fiches) : leurs jetons restent ceux du mode clair,
   comme une carte posée sur une table. Couleurs de couche doublées d'un pictogramme (pépite, cristal, gemme, pièce,
   ancre), jamais seules. Mouvement : faisceau qui balaie la coupe au défilement, balayage de sonar puis apparition des
   repères à l'entrée de la carte, tracé de l'Ariège, marches de l'échelle qui montent. */
.nouveaute { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px; border-radius: 22px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--ivoire-doux); background: var(--voile-ivoire); border: 1px solid var(--filet-ivoire);
  transition: background-color var(--duree) var(--courbe), translate var(--duree) var(--courbe); }
.nouveaute:hover { background: rgba(245, 240, 229, 0.12); translate: 0 -1px; }
.nouveaute:active { scale: 0.98; background: rgba(245, 240, 229, 0.16); }
.nouveaute-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 15px; background: var(--or); color: var(--vert);
  border: 1.5px solid var(--vert); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.surtitre .nouveaute-badge { margin-right: 8px; letter-spacing: 0.08em; }

.papier { --texte: #173f35; --texte-2: #365449; --ligne: #d2c9b5; --surface: #fbf8f1; --surface-2: #eee7d8; --plein: #173f35; --sur-plein: #f5f0e5; --focus: #173f35;
  background: #f5f0e5; color: var(--texte); border-radius: 20px; box-shadow: 0 24px 60px rgba(5, 20, 16, 0.35); }

.decouvertes { padding: 96px 16px; }
.decouvertes-intro { max-width: 720px; margin: 0 auto; text-align: center; display: grid; gap: 14px; }
.decouvertes h3 { font-size: clamp(22px, 3vw, 30px); }

/* Coupe du terrain */
.coupe { max-width: var(--largeur); margin: 56px auto 0; padding: 28px 24px 24px; display: grid; gap: 20px; }
.coupe-dessin { position: relative; border-radius: 14px; overflow: hidden; background: #efe6d2; }
.coupe-svg { display: block; width: 100%; height: auto; }
.coupe-faisceau { display: none; }
.mouvement .coupe-faisceau { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--balayage, 0) * 100%); width: 2px; background: var(--or);
  box-shadow: 0 0 0 1px rgba(23, 63, 53, 0.45), 0 0 26px 6px rgba(201, 164, 92, 0.5); opacity: 0; transition: opacity 300ms var(--courbe); pointer-events: none; }
.mouvement .coupe-faisceau::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 140px; background: linear-gradient(to left, rgba(201, 164, 92, 0.28), rgba(201, 164, 92, 0)); }
.mouvement .coupe.en-cours .coupe-faisceau { opacity: 1; }
.pastille-coupe { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vert); color: var(--ivoire); font: 700 14px/1 var(--sans); box-shadow: 0 0 0 2px #f5f0e5, 0 3px 8px rgba(15, 46, 38, 0.35);
  transition: scale 360ms var(--courbe-ressort), box-shadow 360ms var(--courbe), opacity 360ms var(--courbe); }
/* Pastilles posées à côté de l'élément qu'elles désignent (filon, cristaux, paillettes, gemmes, jarre, épave, bulle). */
.pc1 { left: 12.5%; top: 56.8%; } .pc2 { left: 23.8%; top: 68.2%; } .pc3 { left: 32.1%; top: 60%; } .pc4 { left: 61.3%; top: 31.8%; }
.pc5 { left: 72.5%; top: 47.7%; } .pc6 { left: 88.3%; top: 60.9%; } .pc7 { left: 88.2%; top: 13.9%; }
/* Avant le passage du faisceau : pastille claire cernée ; après : pleine, avec un anneau or (forme et fond changent). */
.mouvement .pastille-coupe:not(.eclaire) { background: #f5f0e5; color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert), 0 3px 8px rgba(15, 46, 38, 0.25); scale: 0.88; }
.mouvement .pastille-coupe.eclaire { scale: 1.08; box-shadow: 0 0 0 2px #f5f0e5, 0 0 0 5px var(--or), 0 3px 10px rgba(15, 46, 38, 0.4); }
.coupe-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.coupe-legende li { display: grid; grid-template-columns: 30px 24px 1fr; gap: 10px; align-items: start; padding: 10px 0 10px 10px; border-left: 2px solid var(--ligne);
  transition: opacity 360ms var(--courbe), border-color 360ms var(--courbe); }
.coupe-legende li::before { content: attr(data-num); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vert); color: var(--ivoire); font: 700 13px/1 var(--sans); }
.coupe-legende svg { width: 24px; height: 24px; margin-top: 1px; }
.coupe-legende p { font-size: 15px; color: var(--texte-2); }
.coupe-legende b { color: var(--texte); }
.coupe-legende li::before, .coupe-legende b { transition: background-color 360ms var(--courbe), color 360ms var(--courbe), box-shadow 360ms var(--courbe); }
.mouvement .coupe-legende li:not(.eclaire)::before { background: transparent; color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert); }
.mouvement .coupe-legende li:not(.eclaire) b { color: var(--texte-2); }
.mouvement .coupe-legende li.eclaire { border-left-color: var(--or); }

/* Carte des fiches */
.carte-r-bloc { max-width: var(--largeur); margin: 88px auto 0; display: grid; gap: 24px; }
.carte-r-intro { display: grid; gap: 12px; max-width: 680px; }
.carte-r-intro p { color: var(--ivoire-doux); }
.filtres-r { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.filtre-r { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 22px; cursor: pointer;
  font: 600 15px/1 var(--sans); color: var(--vert); background: var(--ivoire); border: 1.5px solid var(--ivoire);
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe), scale 180ms var(--courbe); }
.filtre-r:active { scale: 0.97; }
.filtre-r svg { width: 20px; height: 20px; }
.filtre-r span { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--vert); color: var(--ivoire); }
/* Couche masquée : contour seul et nombre barré, en plus du changement de fond. */
.filtre-r[aria-pressed="false"] { background: transparent; color: var(--ivoire); }
.filtre-r[aria-pressed="false"] span { background: transparent; color: var(--ivoire); box-shadow: inset 0 0 0 1.5px var(--ivoire); text-decoration: line-through; }
.filtre-r:disabled { cursor: default; background: transparent; color: var(--ivoire-doux); border-style: dashed; border-color: var(--filet-ivoire); }
.filtre-r:disabled span { background: transparent; color: var(--ivoire-doux); width: auto; }
.carte-r-grille { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .carte-r-grille { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: 32px; } .fiches-r { position: sticky; top: 96px; } }

.carte-r { position: relative; overflow: hidden; padding: 0; aspect-ratio: 1000 / 915; }
.carte-r-fond, .carte-r-calque { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.carte-r-calque { pointer-events: none; }
.carte-r-balayage { position: absolute; inset: -100%; pointer-events: none; opacity: 0; transform-origin: 36.55% 55.23%;
  background: conic-gradient(from 0deg at 36.55% 55.23%, rgba(201, 164, 92, 0) 0deg, rgba(201, 164, 92, 0) 290deg, rgba(201, 164, 92, 0.42) 359deg, rgba(201, 164, 92, 0) 360deg); }
.mouvement .carte-r.vue .carte-r-balayage { animation: balayer 2400ms linear 250ms both; }
@keyframes balayer { 0% { rotate: 0deg; opacity: 1; } 85% { opacity: 1; } 100% { rotate: 360deg; opacity: 0; } }
.zone-r { transition: opacity 240ms var(--courbe); }
.mouvement .trace-or { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mouvement .carte-r.vue .trace-or { animation: tracer 1600ms var(--courbe) 1100ms forwards; }
.mouvement .carte-r:not(.vue) .zone-r { opacity: 0; }

.repere-r { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
  translate: var(--dx, 0) var(--dy, 0); border-radius: 50%; z-index: 1; transition: opacity 220ms var(--courbe), visibility 0s linear 0s; }
.repere-r::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--trait); border-top: 1.5px solid #173f35; transform-origin: 0 0; rotate: var(--angle);
  transition: scale 400ms var(--courbe) calc(var(--apparition, 0ms) + 300ms); }
.repere-r svg { position: relative; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--fond-couche); color: var(--sur-couche);
  box-shadow: 0 0 0 2px #f5f0e5, 0 0 0 3.5px #173f35, 0 4px 10px rgba(15, 46, 38, 0.3); transition: scale 260ms var(--courbe-ressort), box-shadow 260ms var(--courbe); }
.repere-r:hover svg { scale: 1.12; }
.repere-r:active svg { scale: 0.92; transition-duration: 120ms; }
@media (max-width: 599px) { .repere-r svg { width: 26px; height: 26px; padding: 5px; } }
.repere-r:focus-visible { outline-offset: 0; }
[data-couche="or"] { --fond-couche: #c9a45c; --sur-couche: #173f35; }
[data-couche="terres-rares"] { --fond-couche: #4d6a8a; --sur-couche: #f5f0e5; }
[data-couche="gemmes"] { --fond-couche: #8a3550; --sur-couche: #f5f0e5; }
[data-couche="depots-epaves"] { --fond-couche: #7d5320; --sur-couche: #f5f0e5; }
[data-couche="recits"] { --fond-couche: #5b5348; --sur-couche: #f5f0e5; }
.repere-r[aria-pressed="true"] { z-index: 2; }
.repere-r[aria-pressed="true"] svg { scale: 1.2; box-shadow: 0 0 0 2px #f5f0e5, 0 0 0 4px #173f35, 0 0 0 8px rgba(201, 164, 92, 0.9), 0 6px 14px rgba(15, 46, 38, 0.35); }
.mouvement .repere-r[aria-pressed="true"]::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #173f35; animation: sonder 2.4s var(--courbe) 2; pointer-events: none; }
@keyframes sonder { 0% { scale: 1; opacity: 0.8; } 100% { scale: 2.4; opacity: 0; } }
.repere-r.masque, .zone-r.masque { opacity: 0; }
.repere-r.masque { visibility: hidden; transition: opacity 220ms var(--courbe), visibility 0s linear 220ms; }
.mouvement .carte-r:not(.vue) .repere-r svg { scale: 0; }
.mouvement .carte-r:not(.vue) .repere-r::before { scale: 0 1; }
.mouvement .carte-r.vue .repere-r svg { animation: surgir-r 560ms var(--courbe-ressort) var(--apparition, 0ms) backwards; }
@keyframes surgir-r { from { scale: 0; } }

/* Fiches */
.fiches-r { display: grid; gap: 16px; }
.fiches-r-etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fiche-r { padding: 22px; display: grid; gap: 14px; align-content: start; }
.js .fiche-r:not(.choisie) { display: none; }
.mouvement .fiche-r.choisie { animation: fiche-entre 340ms var(--courbe); }
@keyframes fiche-entre { from { opacity: 0; translate: 0 10px; } }
.fiche-r-cat { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-2); }
.picto-r { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fond-couche); color: var(--sur-couche); box-shadow: 0 0 0 1.5px #173f35; }
.picto-r svg { width: 20px; height: 20px; }
.c-or { --fond-couche: #c9a45c; --sur-couche: #173f35; } .c-terres-rares { --fond-couche: #4d6a8a; --sur-couche: #f5f0e5; }
.c-gemmes { --fond-couche: #8a3550; --sur-couche: #f5f0e5; } .c-depots-epaves { --fond-couche: #7d5320; --sur-couche: #f5f0e5; }
.fiche-r h4 { font: 600 24px/1.2 var(--serif); margin: 0; text-wrap: balance; }
.fiche-r dl { margin: 0; }
.fiche-r dd { margin: 0; }
.fiche-r-faits { display: grid; gap: 0; }
.fiche-r-faits div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ligne); font-size: 15px; }
.fiche-r-faits dt { font-weight: 700; color: var(--texte-2); font-size: 13px; letter-spacing: 0.02em; padding-top: 1px; }
.fiche-r-bas { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.loupe-r { width: 104px; height: 104px; display: block; }
.loupe-fond { fill: #f1e9d6; stroke: #173f35; stroke-width: 2; }
.loupe-echelle { stroke: #173f35; stroke-width: 3; stroke-linecap: round; }
.loupe-r text { font: 700 13px var(--sans); fill: #173f35; }
.fiche-r-statut { display: grid; gap: 10px; }
.fiche-r-statut dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-2); }
.fiche-r-statut dd { font-weight: 700; font-size: 16px; }
.fiche-r-statut small { display: block; font-weight: 600; font-size: 13px; color: var(--texte-2); }
.fiche-r-source { font-size: 13px; color: var(--texte-2); }
.fiches-r-nav { display: none; align-items: center; justify-content: center; gap: 16px; color: var(--ivoire); font-weight: 600; font-variant-numeric: tabular-nums; }
.js .fiches-r-nav { display: flex; order: -1; justify-content: space-between; }
.bouton-rond-r { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ivoire); border: 1.5px solid var(--ivoire);
  transition: background-color var(--duree) var(--courbe), scale 180ms var(--courbe); }
.bouton-rond-r:hover { background: rgba(245, 240, 229, 0.1); }
.bouton-rond-r:active { scale: 0.94; }
.bouton-rond-r svg { width: 22px; height: 22px; }
.carte-r-note { font-size: 13px; color: var(--ivoire-doux); max-width: 680px; }
/* Sans JavaScript, toutes les fiches s'affichent, en grille. */
html:not(.js) .fiches-r { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 480px) { .fiche-r { padding: 18px; } .fiche-r-faits div { grid-template-columns: 1fr; gap: 2px; } .fiche-r-bas { grid-template-columns: 84px 1fr; } .loupe-r { width: 84px; height: 84px; } }

/* Échelle de connaissance */
.echelle { max-width: var(--largeur); margin: 88px auto 0; display: grid; gap: 32px; }
.echelle-texte { display: grid; gap: 12px; max-width: 680px; }
.echelle-texte p { color: var(--ivoire-doux); }
.echelle-marches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.marche { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: start; }
.marche-barre { grid-row: 1 / 4; position: relative; height: 34px; border-radius: 8px; background: rgba(245, 240, 229, 0.1); border: 1px solid var(--filet-ivoire); overflow: hidden; }
.marche-barre::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--niveau); background: rgba(201, 164, 92, 0.32); border-right: 2px solid var(--or); transform-origin: left; }
.marche-fiches { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.marche-fiches svg { width: 20px; height: 20px; color: var(--ivoire); }
.marche b { font: 600 19px/1.25 var(--serif); }
.marche small { font-size: 14px; color: var(--ivoire-doux); }
.marche em { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--or); }
.m1 { --niveau: 17%; --haut: 24px; } .m2 { --niveau: 33%; --haut: 48px; } .m3 { --niveau: 50%; --haut: 72px; }
.m4 { --niveau: 67%; --haut: 96px; } .m5 { --niveau: 83%; --haut: 120px; } .m6 { --niveau: 100%; --haut: 144px; }
.js .marche.revele .marche-barre::before { scale: 0 1; transition: scale 700ms var(--courbe) calc(var(--delai, 0ms) + 200ms); }
.js .marche.revele.visible .marche-barre::before { scale: 1 1; }
@media (min-width: 1100px) {
  .echelle-marches { grid-template-columns: repeat(6, 1fr); align-items: start; gap: 14px; }
  /* Première rangée de hauteur fixe : les marches partent toutes du même sol, les textes de la même ligne. */
  .marche { grid-template-columns: 1fr; grid-template-rows: 192px auto auto auto; row-gap: 6px; }
  .marche-barre { grid-row: 1; align-self: end; height: calc(40px + var(--haut)); border-radius: 10px 10px 4px 4px; }
  .marche-barre::before { inset: auto 0 0 0; width: auto; height: 100%; border-right: 0; border-top: 3px solid var(--or); transform-origin: bottom; }
  .js .marche.revele .marche-barre::before { scale: 1 0; }
  .marche-fiches { inset: auto 0 0 0; height: 40px; justify-content: center; flex-wrap: wrap; }
}
.regles-r { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.regles-r li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 16px; background: var(--voile-ivoire); border: 1px solid var(--filet-ivoire); }
.regles-r svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(245, 240, 229, 0.1); color: var(--or); }
.regles-r p { color: var(--ivoire-doux); font-size: 15px; }
.regles-r b { color: var(--ivoire); }
@media (min-width: 760px) { .regles-r { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .regles-r { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- engagements */
.engagements { padding: 88px 16px; text-align: center; }
.engagements .titre-section { max-width: 820px; margin: 14px auto 0; }
.engagements-grille { max-width: var(--largeur); margin: 48px auto 0; display: grid; gap: 16px; text-align: left; }
.engagement { padding: 24px; border-radius: 16px; background: var(--voile-ivoire); border: 1px solid var(--filet-ivoire); display: grid; gap: 10px; align-content: start;
  transition: translate var(--duree) var(--courbe), background-color var(--duree), opacity 480ms var(--courbe); }
.engagement:hover { translate: 0 -3px; background: rgba(245, 240, 229, 0.1); }
.engagement svg { width: 32px; height: 32px; color: var(--or); }
.engagement h3 { font-size: 22px; }
.engagement p { color: var(--ivoire-doux); font-size: 16px; }
@media (min-width: 700px) { .engagements-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .engagements-grille { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- l'indice expliqué */
.indice { padding: 96px 16px; }
.indice-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 48px; align-items: center; }
.indice-texte { display: grid; gap: 16px; align-content: start; }
.regles { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 18px; }
.regles li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.regles svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--surface-2); color: var(--texte); }
.regles p { color: var(--texte-2); }
.regles b { color: var(--texte); }
@media (min-width: 960px) { .indice-grille { grid-template-columns: 1fr minmax(380px, 470px); gap: 72px; } }

/* Carte du calcul : les preuves arrivent une à une, le total compte, la jauge suit ; les reprises restent à zéro,
   en pointillé (la forme et le mot disent l'état, pas seulement la couleur). */
.calcul { margin: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: 20px; padding: 24px; display: grid; gap: 16px;
  box-shadow: 0 24px 48px rgba(15, 46, 38, 0.12); }
.calcul-etiquette { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-2); }
.calcul-etiquette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 2px var(--vert); }
.calcul-titre { font: 600 26px/1.15 var(--serif); }
.calcul-sous { font-size: 14px; font-weight: 600; color: var(--texte-2); margin-top: 4px; }
.calcul-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.calcul-sources li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--fond); border: 1px solid var(--ligne);
  transition: opacity 360ms var(--courbe), translate 360ms var(--courbe); }
.calcul-sources .pts { height: 30px; border-radius: 15px; display: grid; place-items: center; background: var(--plein); color: var(--sur-plein); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.calcul-sources b { display: block; font-size: 15px; line-height: 1.3; }
.calcul-sources small { display: block; font-size: 13px; font-weight: 600; color: var(--texte-2); }
.calcul-sources li.ecartee { background: transparent; border-style: dashed; }
.calcul-sources li.ecartee .pts { background: transparent; color: var(--texte); border: 1.5px dashed var(--texte-2); }
.calcul-total { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.calcul-score { display: grid; gap: 6px; }
.calcul-score small, .calcul-badges small { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-2); }
.calcul-score b { font: 600 44px/1 var(--serif); font-variant-numeric: tabular-nums; }
.calcul-jauge { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.calcul-jauge i { display: block; height: 100%; background: var(--plein); transform-origin: left; scale: var(--jauge, 0.85) 1; transition: scale 420ms var(--courbe); }
.calcul-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transition: opacity 420ms var(--courbe), scale 420ms var(--courbe-ressort); }
.calcul-badges li { padding: 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 2px; }
.calcul-badges b { font-size: 18px; }
.calcul-badges span { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.calcul .rejouer { justify-self: start; }
.calcul .rejouer[hidden] { display: none; }
.mouvement .calcul.joue .calcul-sources li:not(.vu) { opacity: 0; translate: -14px 0; }
.mouvement .calcul.joue .calcul-badges:not(.vu) { opacity: 0; scale: 0.96; }
.calcul-sources li.vu .pts { animation: marquer 520ms var(--courbe-ressort); }
@keyframes marquer { 0% { scale: 0.6; } 60% { scale: 1.12; } 100% { scale: 1; } }
@media (max-width: 420px) { .calcul { padding: 18px; } .calcul-badges { grid-template-columns: 1fr; } }

/* Barème complet : la longueur des barres double le nombre écrit, jamais seule. */
.bareme { max-width: var(--largeur); margin: 80px auto 0; }
.bareme-titre { font-size: 26px; }
.bareme-note { margin-top: 6px; font-size: 15px; color: var(--texte-2); }
.bareme-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0 56px; }
.bareme-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.bareme-liste .barre { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bareme-liste .barre i { display: block; height: 100%; background: var(--plein); transform-origin: left; scale: var(--v) 1; }
.bareme-liste b { text-align: right; font-variant-numeric: tabular-nums; }
.v30 { --v: 1; } .v25 { --v: 0.833; } .v20 { --v: 0.667; } .v15 { --v: 0.5; } .v10 { --v: 0.333; } .v5 { --v: 0.167; } .v3 { --v: 0.1; } .v0 { --v: 0; }
.js .bareme-liste li.revele .barre i { scale: 0 1; transition: scale 900ms var(--courbe) calc(var(--delai, 0ms) + 160ms); }
.js .bareme-liste li.revele.visible .barre i { scale: var(--v) 1; }
@media (min-width: 900px) { .bareme-liste { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; } .bareme-liste li { grid-template-columns: minmax(0, 1fr) 140px 28px; } }

/* ---------------------------------------------------------------- questions */
.questions { padding: 96px 16px; }
.questions-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 32px; }
.questions-intro { display: grid; gap: 14px; align-content: start; }
.question { border-bottom: 1px solid var(--ligne); }
.question:first-child { border-top: 1px solid var(--ligne); }
.question summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 4px;
  font: 600 19px/1.35 var(--serif); border-radius: 8px; transition: color var(--duree) var(--courbe), background-color var(--duree) var(--courbe); }
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { background: color-mix(in srgb, var(--texte) 5%, transparent); }
.question summary:active { background: color-mix(in srgb, var(--texte) 10%, transparent); }
.question summary svg { flex: none; width: 32px; height: 32px; padding: 5px; border-radius: 50%; border: 1.5px solid currentColor; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transition: rotate var(--duree) var(--courbe), background-color var(--duree); }
.question .q-v { transform-box: fill-box; transform-origin: center; transition: scale var(--duree) var(--courbe); }
.question[open] summary svg { rotate: 180deg; background: var(--surface); }
.question[open] .q-v { scale: 1 0; }
.reponse { padding: 0 4px 22px; max-width: 680px; color: var(--texte-2); }
@media (min-width: 960px) {
  .questions-grille { grid-template-columns: minmax(260px, 380px) 1fr; gap: 64px; align-items: start; }
  .questions-intro { position: sticky; top: 120px; }
}
/* Ouverture animée là où le navigateur sait interpoler vers « auto » ; ailleurs, ouverture immédiate. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .question::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--courbe), content-visibility 320ms allow-discrete; }
  .question[open]::details-content { block-size: auto; }
}

/* ---------------------------------------------------------------- sources */
.sources { padding: 88px 16px; }
.sources > .surtitre, .sources > .titre-section { max-width: var(--largeur); margin-left: auto; margin-right: auto; display: block; }
.sources .titre-section { margin-top: 14px; max-width: 760px; margin-left: max(0px, calc((100% - var(--largeur)) / 2)); }
.sources-liste { list-style: none; max-width: var(--largeur); margin: 40px auto 0; padding: 0; display: grid; gap: 0 32px; }
.sources-liste li { display: grid; gap: 2px; padding: 16px 0; border-top: 1px solid var(--ligne); }
.sources-liste b { font-weight: 700; }
.sources-liste span { color: var(--texte-2); font-size: 15px; }
@media (min-width: 700px) { .sources-liste { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- appel final et pied */
.appel { padding: 104px 16px; text-align: center; display: grid; justify-items: center; gap: 18px; position: relative; overflow: hidden; }
.appel > :not(.appel-trace) { position: relative; }
.appel-trace { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; }
.mouvement .appel:has(.visible) .appel-trace path { animation: marcher 3.2s var(--courbe) both; }
.appel-boussole { width: 72px; height: 72px; color: var(--ivoire); }
.mouvement .appel-boussole.visible { animation: tourner-lent 1.6s var(--courbe) 200ms both; }
@keyframes tourner-lent { to { rotate: 360deg; } }
.appel p { color: var(--ivoire-doux); }
.pied { padding: 48px 16px 40px; border-top: 1px solid var(--ligne); }
.pied > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.pied-marque { display: flex; align-items: center; gap: 10px; font: 600 20px/1 var(--serif); letter-spacing: 0.06em; margin-bottom: 16px; }
.pied-marque svg { width: 32px; height: 32px; color: var(--texte); }
.pied p { font-size: 14px; color: var(--texte-2); max-width: 760px; margin-left: max(0px, calc((100% - var(--largeur)) / 2)); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; margin-bottom: 16px; }
.pied-liens a { font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; }
.pied-copie { font-size: 13px; }

/* ---------------------------------------------------------------- mouvement réduit : état final, sans animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .topo-lignes, .appel-boussole, .appel-trace path, .indice-defilement span, .e-curseur { animation: none !important; }
  .boussole-hero svg { rotate: 0deg !important; translate: none !important; }
  .topo { translate: none !important; }
}

/* Page 404 (404.html), servie par Cloudflare Pages pour toute adresse absente. */
.introuvable { max-width: 760px; margin: 0 auto; padding: 48px 16px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.introuvable h1 { font-size: 32px; margin-top: 16px; }
.introuvable p { margin: 0; }