/* Extra-Humaines — une frontière au centre de l'écran : à gauche on explique, à droite on mesure.
   Aucune police externe (CSP font-src 'self') : grotesque système en graisse 900 pour les titres,
   sérif système pour la voix humaine (gauche), chiffres tabulaires pour la mesure (droite). */
:root {
  --fond: #05060a;
  --encre: #eef0f5;
  --encre-2: #b0b4c2;
  --encre-3: #868c9c;
  --filet: #1d2029;
  --axe: rgba(238, 240, 245, 0.07);
  --c: #eef0f5;
  --titre: "SF Pro Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --prose: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --gouttiere: clamp(16px, 5vw, 6rem);
  --ecart: clamp(2rem, 4.5vw, 5rem);
  --lent: cubic-bezier(0.2, 0.7, 0.15, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--fond); scroll-behavior: smooth; scroll-padding-top: 4rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 1.0625rem/1.55 var(--titre);
  overflow-x: clip;
}
/* La couleur du thème, éclaircie pour rester lisible sur le fond (bleus et violets sombres). */
.rubrique, .pastille { --c-texte: color-mix(in oklab, var(--c) 72%, white); --c-halo: color-mix(in srgb, var(--c) 55%, transparent); }

/* L'axe : une ligne ténue au centre exact de l'écran, du haut en bas de la page. Chaque rubrique l'allume. */
body::before {
  content: ""; position: fixed; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px;
  background: var(--axe); z-index: -1; pointer-events: none;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--c-texte, var(--encre)); outline-offset: 3px; border-radius: 2px; }
p { margin: 0; }

/* ---------- Ouverture ---------- */
.ouverture {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1fr 2px 1fr; column-gap: var(--ecart);
  grid-template-rows: 1fr auto auto;
  padding: clamp(3rem, 9vh, 7rem) var(--gouttiere) 2rem;
}
.titre-monde {
  grid-column: 1 / -1; align-self: end; margin: 0 0 clamp(2rem, 6vh, 4rem);
  font: 900 clamp(3.5rem, 13vw, 12rem)/0.84 var(--titre);
  letter-spacing: -0.055em; text-transform: none;
  color: var(--encre);
}
.ouverture::after {
  content: ""; grid-column: 2; grid-row: 2 / 4; width: 2px;
  background: linear-gradient(var(--encre), transparent);
  box-shadow: 0 0 22px 1px rgba(238, 240, 245, 0.35);
}
.sous-titre {
  grid-column: 1; grid-row: 2; justify-self: end; text-align: right; max-width: 18em;
  font: italic 400 clamp(1.35rem, 2.4vw, 2.1rem)/1.3 var(--prose); color: var(--encre);
}
.compteur { grid-column: 3; grid-row: 2; min-height: 6rem; }
.chiffre-central {
  display: block; font: 900 clamp(5rem, 12vw, 11rem)/0.8 var(--titre); letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.compteur .legende { display: block; margin-top: 0.9rem; max-width: 20em; color: var(--encre-2); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.fraicheur { margin-top: 0.5rem; color: var(--encre-3); font-size: 0.875rem; }
.defiler {
  grid-column: 1 / -1; grid-row: 3; justify-self: center; margin-top: clamp(2rem, 8vh, 5rem);
  font: 300 2rem/1 var(--titre); color: var(--encre-2);
}

/* ---------- Barre des rubriques ---------- */
.pastilles {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.75rem var(--gouttiere);
  background: rgba(5, 6, 10, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
}
.pastilles::-webkit-scrollbar { display: none; }
.pastille {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--filet);
  font-size: 0.875rem; font-weight: 600; color: var(--encre-2); text-decoration: none; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.pastille::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c-halo); }
.pastille:hover, .pastille[aria-current] { color: var(--c-texte); border-color: var(--c-halo); }

/* ---------- Rubrique ---------- */
.rubrique {
  position: relative; min-height: 100vh;
  padding: clamp(5rem, 14vh, 9rem) var(--gouttiere) clamp(4rem, 10vh, 7rem);
  border-top: 1px solid var(--filet);
}
.rubrique-tete { position: relative; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.picto {
  display: block; width: clamp(3.5rem, 7vw, 6.5rem); height: clamp(3.5rem, 7vw, 6.5rem);
  margin-bottom: clamp(1rem, 3vh, 2rem); color: var(--c); overflow: visible;
  filter: drop-shadow(0 0 10px var(--c-halo));
}
.titre-geant {
  margin: 0; font: 900 clamp(3rem, 10vw, 9rem)/0.86 var(--titre); letter-spacing: -0.05em;
  color: var(--c-texte); overflow-wrap: normal; hyphens: manual;
}
.accroche {
  margin-top: clamp(1rem, 2.5vh, 1.75rem); max-width: 26em;
  font: italic 400 clamp(1.3rem, 2.3vw, 2rem)/1.3 var(--prose); color: var(--encre);
}

.corps { display: grid; grid-template-columns: 1fr 2px 1fr; column-gap: var(--ecart); align-items: start; }
/* Les deux côtés se serrent contre la frontière. */
.explique { justify-self: end; width: 100%; max-width: 34rem; position: sticky; top: 6rem; }
.mesure { justify-self: start; width: 100%; max-width: 34rem; }
.etiquette { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em; color: var(--c-texte); margin-bottom: 1.25rem; }
.explique .etiquette { text-align: right; }
.explique .etiquette::after { content: " \2190"; }
.mesure .etiquette::before { content: "\2192\00a0"; }
.texte { font: 400 clamp(1.15rem, 1.55vw, 1.4rem)/1.6 var(--prose); color: var(--encre); }

.frontiere {
  position: relative; align-self: stretch; width: 2px; min-height: 12rem;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 30%, transparent) 70%, transparent);
  box-shadow: 0 0 18px 1px var(--c-halo);
  transform-origin: top;
}
.frontiere::before {
  content: ""; position: absolute; top: -7px; left: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 5px var(--fond), 0 0 22px 4px var(--c-halo);
}

/* ---------- On mesure ---------- */
.chargement { color: var(--encre-3); font-style: italic; }
.compteur-rubrique { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.6rem; margin-bottom: 2.25rem; }
.compteur-rubrique .ovni { font-size: clamp(1.6rem, 2.6vw, 2.25rem); align-self: center; }
.compteur-rubrique .chiffre { font: 900 clamp(3.5rem, 7vw, 6rem)/0.9 var(--titre); letter-spacing: -0.04em; color: var(--c-texte); font-variant-numeric: tabular-nums; }
.legende-rubrique { flex-basis: 100%; color: var(--encre-2); font-size: 0.95rem; margin-top: 0.4rem; }
.compteur-rubrique.zero .chiffre { color: var(--encre-3); }
.compteur-rubrique.zero .ovni { filter: grayscale(1); opacity: 0.55; }

.carte { position: relative; padding: 0.25rem 0 0.25rem 1.25rem; margin: 0 0 2.25rem; border-left: 2px solid var(--c); }
.libelle { font-weight: 600; color: var(--encre); font-size: 1rem; line-height: 1.35; }
.carte .chiffre { margin-top: 0.4rem; font: 900 clamp(4rem, 9vw, 7.5rem)/0.9 var(--titre); letter-spacing: -0.045em; color: var(--c-texte); font-variant-numeric: tabular-nums; }
.unite { color: var(--encre-2); font-size: 0.95rem; margin-top: 0.15rem; }
.courbe { display: block; width: 7.5rem; height: 2rem; margin-top: 0.75rem; overflow: visible; }
.courbe path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.attente {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem;
  padding: 0.3rem 0.75rem; border: 1px dashed var(--encre-3); border-radius: 999px;
  color: var(--encre-2); font-size: 0.875rem;
}
.attente::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c); }
.depart { margin-top: 0.6rem; color: var(--encre-2); font-size: 0.9375rem; }
.extrait { margin: 0.9rem 0 0; padding: 0; font: italic 400 1rem/1.5 var(--prose); color: var(--encre-2); }
.pied { margin-top: 0.75rem; color: var(--encre-3); font-size: 0.8125rem; }
.source { color: var(--encre-2); text-decoration-color: var(--c-halo); text-underline-offset: 3px; }

.signaux { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.signal { padding: 1.1rem 0; border-top: 1px solid var(--filet); }
.signal:last-child { border-bottom: 1px solid var(--filet); }
.badge {
  display: inline-block; margin-bottom: 0.45rem; padding: 0.15rem 0.55rem; border-radius: 4px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.5;
}
.badge-xh { background: var(--c-texte); color: var(--fond); }
.badge-ctx { border: 1px solid #3a3e4b; color: var(--encre-2); }
.signal a, .signal .source { display: block; font-weight: 650; font-size: 1.0625rem; line-height: 1.35; color: var(--encre); text-decoration: none; }
.signal a:hover { color: var(--c-texte); text-decoration: underline; text-decoration-color: var(--c-halo); }
.resume { margin-top: 0.4rem; color: var(--encre-2); font-size: 0.9375rem; line-height: 1.5; }
.vide { padding: 1.1rem 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); font: italic 400 1.0625rem/1.5 var(--prose); color: var(--encre-2); }

/* Texte venu des sources : isolé (bidi) et cassable (mots longs, URL). */
.texte, .resume, .extrait, .signal a, .libelle { overflow-wrap: anywhere; unicode-bidi: isolate; }

/* ---------- Méthode ---------- */
.methode {
  display: grid; grid-template-columns: 1fr 2px 1fr; column-gap: var(--ecart);
  padding: clamp(5rem, 14vh, 9rem) var(--gouttiere) 4rem; border-top: 1px solid var(--filet);
}
.methode::after { content: ""; grid-column: 2; grid-row: 1 / 5; background: linear-gradient(var(--encre-3), transparent); }
.methode h2 { grid-column: 1; grid-row: 1 / 3; justify-self: end; text-align: right; margin: 0; font: 900 clamp(2.5rem, 6vw, 5rem)/0.9 var(--titre); letter-spacing: -0.045em; }
.methode > p { grid-column: 3; max-width: 34rem; color: var(--encre-2); }
.methode > p + p { margin-top: 1rem; }
.signature { color: var(--encre-3); font-size: 0.875rem; }

/* ---------- Panne : les explications restent ---------- */
.indisponible { display: none; }
body.donnees-indisponibles .chargement { display: none; }
body.donnees-indisponibles .indisponible { display: block; color: var(--encre-2); }
.mesure .indisponible, .compteur .indisponible {
  padding: 0.9rem 1rem; border: 1px dashed var(--encre-3); border-radius: 6px; font-size: 0.95rem;
}
.compteur .indisponible { max-width: 22rem; }

/* ---------- Révélations au scroll (seulement quand app.js a pris la main) ---------- */
.pret .reveal { opacity: 0; transition: opacity 0.8s var(--lent), transform 0.8s var(--lent); }
.pret .rubrique-tete.reveal { transform: translateY(2rem); }
.pret .explique.reveal { transform: translateX(-2rem); transition-delay: 0.35s; }
.pret .mesure.reveal { transform: translateX(2rem); transition-delay: 0.5s; }
.pret .reveal.vu { opacity: 1; transform: none; }
.pret .frontiere { transform: scaleY(0); transition: transform 1.2s var(--lent); }
.pret .frontiere.vu { transform: scaleY(1); }
.pret .picto { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--lent) 0.2s; }
.pret .vu .picto { stroke-dashoffset: 0; }
.pret .carte, .pret .signal { opacity: 0; transform: translateX(1.25rem); transition: opacity 0.6s var(--lent), transform 0.6s var(--lent); }
.pret .carte.vu, .pret .signal.vu { opacity: 1; transform: none; }

/* ---------- « Est-ce qu'on décolle ? » : le récit (chaud) contre le test (froid) ---------- */
#decolle .titre-geant { font-size: clamp(3rem, 8.5vw, 8rem); }
#decolle { --c: #e9b44c; --froid: #7cc4ff; --c-texte: #f0c873; --c-halo: rgba(233, 180, 76, 0.5); }
.decolle .corps { align-items: start; }
.decolle .recit { justify-self: end; width: 100%; max-width: 36rem; }
.decolle .test-pib { justify-self: start; width: 100%; max-width: 36rem; }
.decolle .recit .etiquette { text-align: right; }
.decolle .recit .etiquette::after { content: " \2190"; }
.decolle .test-pib .etiquette { color: var(--froid); }
.decolle .test-pib .etiquette::before { content: "\2192\00a0"; }
.decolle .frontiere {
  background: linear-gradient(var(--c), var(--froid) 55%, transparent);
  box-shadow: 0 0 22px 2px rgba(124, 196, 255, 0.35);
}
.decolle .texte { font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
.decolle .test-pib .texte { font-family: var(--titre); font-size: 1.0625rem; line-height: 1.55; color: var(--encre-2); }

.graphe { margin: 1.75rem 0 0; }
.graphe-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--titre); }
.grille line { stroke: rgba(238, 240, 245, 0.07); stroke-width: 1; }
.grille text { fill: var(--encre-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.grille .titre-axe { fill: var(--encre-2); font-size: 10.5px; }
.axe { stroke: #3a3e4b; stroke-width: 1; }

.droite-recit { stroke: var(--c); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.45; }
.recit .reveal-point { fill: var(--c); stroke: var(--fond); stroke-width: 1.5; }
.recit .reveal-point.ouvert { fill: var(--fond); stroke: var(--c-texte); stroke-width: 2; }
.annotation { fill: var(--c-texte); font-size: 11px; font-style: italic; font-family: var(--prose); }

.critique {
  margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--c);
  font: italic 400 1.0625rem/1.55 var(--prose); color: var(--encre);
}
.jalons { margin-top: 1.5rem; color: var(--encre-2); font-size: 0.9375rem; }
.jalons summary { cursor: pointer; color: var(--c-texte); font-weight: 600; }
.jalons summary:focus-visible { outline: 2px solid var(--c-texte); outline-offset: 3px; border-radius: 2px; }
.jalons ol { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.jalons li { display: flex; flex-wrap: wrap; column-gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--filet); }
.jalons .jalon { color: var(--encre); flex: 1 1 14rem; }
.jalons .quand { color: var(--encre-3); font-variant-numeric: tabular-nums; }
.jalons .source { text-decoration-color: var(--c-halo); text-underline-offset: 3px; }

.marque-ts { stroke: var(--froid); stroke-width: 1; stroke-dasharray: 1 3; opacity: 0.8; }
.etiquette-ts { fill: var(--froid); font-size: 10.5px; }
.courbe-ajustee { fill: none; stroke: var(--froid); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; }
.point-pib { fill: var(--encre-2); }
.point-pib.dernier { fill: #fff; stroke: var(--fond); stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); }
.point-modele { fill: var(--fond); stroke: var(--froid); stroke-width: 1.6; }
.trait-ecart { stroke: #fff; stroke-width: 1.4; }
.cadre-zoom { fill: none; stroke: rgba(238, 240, 245, 0.35); stroke-width: 0.8; }
.fond-loupe { fill: var(--fond); stroke: rgba(124, 196, 255, 0.45); stroke-width: 1; }
.titre-loupe { fill: var(--encre-2); font-size: 9.5px; }
.graduation-loupe { fill: var(--encre-3); font-size: 9px; font-variant-numeric: tabular-nums; }
.point-loupe { fill: var(--encre-2); }
.dernier-loupe { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)); }
.valeur-ecart { fill: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

.legende-graphe { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; color: var(--encre-2); font-size: 0.8125rem; }
.cle { display: inline-flex; align-items: center; gap: 0.45rem; }
.cle::before { content: ""; flex: none; }
.cle-point::before { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--encre-2); }
.cle-courbe::before { width: 1.2rem; border-top: 2px dashed var(--froid); }
.cle-modele::before { width: 0.4rem; height: 0.4rem; border-radius: 50%; border: 2px solid var(--froid); }

.verdict { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 1rem; margin-top: 2rem; }
.chiffre-verdict { font: 900 clamp(3.5rem, 7vw, 6rem)/0.9 var(--titre); letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.verdict .lecture { flex: 1 1 14rem; margin-top: 0.5rem; }
.test-pib .lecture { color: var(--encre); font-size: 1rem; line-height: 1.55; }
.test-pib > .lecture { margin-top: 1rem; }
.mention { margin-top: 1.5rem; padding: 0.75rem 1rem; border: 1px solid rgba(124, 196, 255, 0.35); border-radius: 6px; color: var(--encre); font-size: 0.9375rem; }
.citation { margin-top: 0.9rem; color: var(--encre-3); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.citation .source { color: var(--encre-2); text-decoration-color: rgba(124, 196, 255, 0.5); text-underline-offset: 3px; }

/* Les points du récit apparaissent un à un ; les pointillés filent vers la singularité, une fois. */
.pret .graphe .reveal-point { opacity: 0; transition: opacity 0.45s var(--lent) calc(var(--i, 0) * 90ms + 0.3s); }
.pret .graphe.vu .reveal-point { opacity: 1; }
.pret .graphe .courbe-ajustee { stroke-dashoffset: 160; transition: stroke-dashoffset 2.6s var(--lent) 0.4s; }
.pret .graphe.vu .courbe-ajustee { stroke-dashoffset: 0; }

/* ---------- Mobile : la frontière devient horizontale ---------- */
@media (max-width: 760px) {
  body::before { display: none; }
  .ouverture { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto auto; padding-top: 3.5rem; }
  .titre-monde { font-size: clamp(3.5rem, 17vw, 6.5rem); margin-bottom: 1.75rem; }
  .ouverture::after { grid-column: 1; grid-row: 3; width: 100%; height: 2px; margin: 1.75rem 0; background: linear-gradient(90deg, var(--encre), transparent); }
  .sous-titre { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
  .compteur { grid-column: 1; grid-row: 4; }
  .defiler { grid-row: 5; }
  .corps { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .explique, .mesure { justify-self: stretch; max-width: none; }
  .explique .etiquette { text-align: left; }
  .explique .etiquette::after { content: " \2193"; }
  .mesure .etiquette::before { content: none; }
  .frontiere { width: 100%; height: 2px; min-height: 0; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent) 70%, transparent); transform-origin: left; }
  .frontiere::before { top: -6px; left: -1px; }
  .pret .frontiere { transform: scaleX(0); }
  .pret .frontiere.vu { transform: scaleX(1); }
  .pret .explique.reveal, .pret .mesure.reveal { transform: translateY(1.5rem); }
  .titre-geant { font-size: clamp(3rem, 13vw, 4.75rem); letter-spacing: -0.06em; }
  .explique { position: static; }
  .decolle .recit, .decolle .test-pib { justify-self: stretch; max-width: none; }
  .decolle .recit .etiquette { text-align: left; }
  .decolle .recit .etiquette::after { content: " \2193"; }
  .decolle .test-pib .etiquette::before { content: none; }
  .decolle .frontiere { background: linear-gradient(90deg, var(--c), var(--froid) 55%, transparent); }
  .grille text, .grille .titre-axe, .etiquette-ts, .annotation { font-size: 12.5px; }
  .titre-loupe, .graduation-loupe { font-size: 11px; }
  #decolle .titre-geant { font-size: clamp(3rem, 13vw, 4.75rem); }
  .methode { grid-template-columns: 1fr; row-gap: 1rem; }
  .methode::after { display: none; }
  .methode h2 { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; margin-bottom: 0.5rem; }
  .methode > p { grid-column: 1; }
}

/* ---------- Mouvement réduit : tout est là, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pret .reveal, .pret .carte, .pret .signal, .pret .frontiere, .pret .picto { opacity: 1; transform: none; transition: none; stroke-dashoffset: 0; }
  .pret .graphe .reveal-point, .pret .graphe .courbe-ajustee { opacity: 1; transition: none; stroke-dashoffset: 0; }
}