/* w1935_aurora : la nuit d'observatoire, en sobre.
   Fond nuit et champ d'étoiles, serif d'atlas pour les titres, mono à
   chiffres tabulaires pour les valeurs. Angles vifs, filets de 1 px,
   aucun dégradé ni halo dans le chrome : la seule lumière vient des
   données (le halo de la courbe quand la bande émet). */

:root {
  --fond-0: #05070d;
  --fond-1: #0b1020;
  --panneau: rgba(11, 15, 27, 0.6);
  --filet: #1c2333;
  --filet-fort: #303a52;
  --encre: #e8e6e1;
  --encre-2: #8f93a2;
  --bleu: #2a78d6;
  --terre: #c85a4b;
  --violet: #8a63c9;
  --aurore: #4be3c0;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* La marque du portail : même pile de polices que l'accueil. */
  --portail: "OCR A Std Regular", "OCR A", ui-monospace, monospace;
  --h-entete: 84px;
  --marge: clamp(1rem, 3vw, 2.5rem);
  --transition: 160ms ease-out;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: linear-gradient(180deg, var(--fond-0) 0%, var(--fond-1) 55%, #070a12 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

#etoiles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

a { color: inherit; }

::selection { background: rgba(75, 227, 192, 0.25); }

/* ------------------------------------------------ l'en-tête */

/* Marque à gauche, onglets au milieu, geheim.land à droite. La marque du
   portail est posée comme sur l'accueil : 30 px, à 24 px du bord et du
   haut (84 px de hauteur, centré verticalement, ça tombe juste). */
.entete {
  display: flex;
  align-items: center;
  gap: 3rem;
  height: var(--h-entete);
  padding: 0 24px;
  border-bottom: 1px solid var(--filet);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 7, 13, 0.94);
}

.marque {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 30px;
  line-height: normal;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marque-site {
  margin-left: auto;
  font-family: var(--portail);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: normal;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}

.marque-site:hover { color: var(--encre-2); }

/* Les onglets : du texte, et un filet sous l'onglet ouvert qui vient se
   poser sur le filet de l'en-tête. */
.onglets {
  display: flex;
  align-self: stretch;
  gap: 2rem;
}

.onglets a {
  display: flex;
  align-items: center;
  padding: 0 2px;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  font-size: 0.95rem;
  color: var(--encre-2);
  text-decoration: none;
  transition: color var(--transition);
}

.onglets a:hover { color: var(--encre); }

.onglets a[aria-selected="true"] {
  color: var(--encre);
  border-bottom-color: var(--encre);
}

/* ------------------------------------------------ les écrans */

main { max-width: 1200px; margin: 0 auto; }

.ecran { display: none; }

.ecran.actif { display: block; animation: apparition 220ms ease-out; }

@keyframes apparition {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Les écrans-outils tiennent dans la fenêtre : quatre rangées (titre,
   graphes qui prennent le reste, réglages, note) dans la hauteur qui
   reste sous l'en-tête. */
.ecran.outil.actif {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 1.5rem;
  height: calc(100vh - var(--h-entete));
  min-height: 600px;
  padding: 1.8rem var(--marge) 1.4rem;
}

.tete-ecran { display: grid; gap: 0.5rem; }

.tete-ecran h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tete-ecran .pitch {
  color: var(--encre-2);
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 58rem;
}

/* ------------------------------------------------ panneaux et graphes */

.panneau {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panneau);
  border: 1px solid var(--filet);
  padding: 1.1rem 1.4rem 1rem;
}

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-height: 0;
}

.legende-panneau {
  font-size: 0.9rem;
  color: var(--encre-2);
  margin-bottom: 0.8rem;
}

.ligne-legende {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.ligne-legende .lecture, .ligne-legende .option { white-space: nowrap; margin-bottom: 0.8rem; }

/* Le canvas est absolu dans un cadre qui prend la place qui reste : sa
   taille intrinsèque ne pèse pas dans la mise en page. */
.cadre-graphe {
  flex: 1;
  min-height: 0;
  position: relative;
}

.cadre-graphe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* La légende encadrée, en haut à droite du graphique. Une entrée-bouton
   s'éteint (à demi) quand sa série est masquée. */
.legende-graphe {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  display: grid;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--filet-fort);
  background: rgba(5, 7, 13, 0.88);
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--encre-2);
}

.legende-graphe .entree {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}

/* Sur le profil, la légende vit en bas à droite : le haut est à l'étiquette
   de la couche quand elle monte. */
.legende-graphe.bas { top: auto; bottom: 3rem; }

.legende-graphe button.entree { cursor: pointer; transition: color var(--transition), opacity var(--transition); }

.legende-graphe button.entree:hover { color: var(--encre); }

.legende-graphe button.entree[aria-pressed="false"] { opacity: 0.4; }

.legende-graphe .trait {
  width: 22px;
  height: 0;
  border-top: 2px solid var(--c);
}

.legende-graphe .trait.pointille { border-top-style: dashed; }

/* ------------------------------------------------ les curseurs */

.reglages { display: grid; gap: 1.2rem; }

.curseurs { display: grid; gap: 1rem 3rem; }

.curseurs.deux { grid-template-columns: 1fr 1fr; }

.curseurs.trois { grid-template-columns: 1fr 1fr 1fr; gap: 1rem 2.5rem; }

.curseur { display: grid; gap: 0.3rem; }

.curseur .ligne-haut {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.curseur label { font-size: 0.92rem; color: var(--encre-2); }

.curseur .valeur {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--encre);
  transition: color var(--transition);
}

.curseur .valeur.allumee { color: var(--aurore); }

.curseur input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  --frac: 50%;
}

.curseur input[type="range"]:focus-visible { outline: none; }

.curseur input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--aurore) var(--frac), var(--filet-fort) var(--frac));
}

.curseur input[type="range"]::-moz-range-track {
  height: 2px;
  background: linear-gradient(90deg, var(--aurore) var(--frac), var(--filet-fort) var(--frac));
}

.curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 22px;
  margin-top: -10px;
  background: var(--encre);
  border: none;
  border-radius: 0;
  transition: background var(--transition);
}

.curseur input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 22px;
  background: var(--encre);
  border: none;
  border-radius: 0;
  transition: background var(--transition);
}

.curseur input[type="range"]:hover::-webkit-slider-thumb,
.curseur input[type="range"]:active::-webkit-slider-thumb { background: var(--aurore); }

.curseur input[type="range"]:hover::-moz-range-thumb,
.curseur input[type="range"]:active::-moz-range-thumb { background: var(--aurore); }

.curseur input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 1px solid var(--aurore);
  outline-offset: 2px;
}

.curseur input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 1px solid var(--aurore);
  outline-offset: 2px;
}

.curseur .bornes {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--encre-2);
}

/* ------------------------------------------------ options, lectures, boutons */

.ligne-options {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}

.option {
  font-size: 0.9rem;
  color: var(--encre-2);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.option input {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 1px solid var(--encre-2);
  background: transparent;
  cursor: pointer;
}

.option:hover input { border-color: var(--encre); }

.option input:checked { background: var(--encre); border-color: var(--encre); }

.option input:focus-visible { outline: 1px solid var(--aurore); outline-offset: 2px; }

.lecture { font-size: 0.93rem; color: var(--encre-2); }

.lecture .valeur {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  transition: color var(--transition);
}

.lecture .valeur.allumee { color: var(--aurore); }

.note { font-size: 0.83rem; line-height: 1.5; color: var(--encre-2); }

.sous-graphe { max-width: 64rem; }

.bouton {
  display: inline-block;
  font: 500 0.92rem var(--sans);
  color: var(--fond-0);
  background: var(--encre);
  border: 1px solid var(--encre);
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.bouton:hover { background: transparent; color: var(--encre); }

.bouton.discret {
  color: var(--encre-2);
  background: transparent;
  border-color: var(--filet-fort);
}

.bouton.discret:hover { color: var(--encre); border-color: var(--encre); }

.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ------------------------------------------------ l'histoire */

#histoire.actif { padding: 3.5rem var(--marge) 5rem; }

.recit { max-width: 44rem; margin: 0 auto; }

.recit > h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.recit .chapeau {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--encre-2);
  max-width: 36rem;
}

.chapitre {
  margin-top: 4.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.chapitre.visible { opacity: 1; transform: none; }

.chapitre .epoque {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--aurore);
  margin-bottom: 0.6rem;
}

.chapitre h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}

.chapitre p {
  color: var(--encre-2);
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

.chapitre p:last-child { margin-bottom: 0; }

.chapitre strong { color: var(--encre); font-weight: 500; }

.chapitre em { font-style: italic; }

.chapitre blockquote {
  margin: 1.6rem 0;
  padding-left: 1.3rem;
  border-left: 1px solid var(--filet-fort);
}

.chapitre blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--encre);
  margin-bottom: 0.5rem;
}

.chapitre blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--encre-2);
}

.chapitre figure { margin: 1.8rem 0 2rem; }

.chapitre img {
  display: block;
  width: 100%;
  height: auto;
}

.chapitre figcaption {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--encre-2);
  margin-top: 0.7rem;
}

.chapitre .appel { margin-top: 2rem; }

.sources {
  margin-top: 5rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--encre-2);
}

.sources h3 {
  font-weight: 600;
  font-size: 1rem;
  color: var(--encre);
  margin-bottom: 0.8rem;
}

.sources ul { list-style: none; }

.sources li { margin-bottom: 0.55rem; }

.sources a { color: var(--encre); text-decoration-color: var(--filet-fort); }

.sources a:hover { text-decoration-color: var(--encre); }

/* ------------------------------------------------ l'aurore */

.reperes { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.reperes .note { white-space: nowrap; }

#aurore-reperes { display: grid; gap: 0.1rem; }

.repere {
  display: grid;
  grid-template-columns: 11rem 5.5rem auto;
  gap: 0 1rem;
  text-align: left;
  font: 400 0.86rem var(--sans);
  color: var(--encre-2);
  background: transparent;
  border: none;
  padding: 0.1rem 0;
  cursor: pointer;
  transition: color var(--transition);
}

.repere .chiffre {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.repere:disabled { cursor: default; opacity: 0.55; }

.repere:hover:not(:disabled) { color: var(--encre); }

.repere:hover:not(:disabled) .nom { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ le jeu (retiré de la
   navigation, gardé en commentaire dans le gabarit ; ces règles restent) */

.sous-onglets { display: flex; gap: 1.6rem; margin-left: auto; }

.sous-onglets button {
  font: 500 0.92rem var(--sans);
  color: var(--encre-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition);
}

.sous-onglets button:hover { color: var(--encre); }

.sous-onglets button[aria-selected="true"] {
  color: var(--encre);
  border-bottom-color: var(--encre);
}

.jauge {
  --score: 0%;
  height: 3px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--aurore) var(--score), var(--filet-fort) var(--score));
  transition: background 300ms ease-out;
}

.revelation {
  flex: 1;
  min-width: 20rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--encre-2);
  border-left: 1px solid var(--filet-fort);
  padding-left: 1.2rem;
}

.revelation strong { color: var(--encre); font-weight: 500; }

/* ------------------------------------------------ le globe */

.globe-et-webb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-height: 0;
}

.globe-et-webb .colonne {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  min-height: 0;
}

.zone-globe {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scene-globe {
  display: block;
  cursor: grab;
  touch-action: none;
}

#scene-globe:active { cursor: grabbing; }

/* Les trois géométries en un clic, un pictogramme et deux mots chacune. */
.situations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  margin-top: 0.8rem;
}

.situation {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--encre-2);
  font: 500 0.88rem var(--sans);
  cursor: pointer;
  transition: color var(--transition);
}

.situation svg { width: 20px; height: 20px; }

.situation:hover { color: var(--encre); }

.situation[aria-pressed="true"] { color: var(--encre); border-bottom-color: var(--encre); }

.situations #globe-lecture { margin-left: auto; }

/* Les curseurs, repliés sous un seul mot. */
.reglages-plies summary {
  list-style: none;
  cursor: pointer;
  width: max-content;
  font-size: 0.9rem;
  color: var(--encre-2);
}

.reglages-plies summary::-webkit-details-marker { display: none; }

.reglages-plies summary::before { content: '+ '; }

.reglages-plies[open] summary::before { content: '− '; }

.reglages-plies summary:hover { color: var(--encre); }

.reglages-plies[open] summary { margin-bottom: 1rem; }

/* ------------------------------------------------ responsive et confort */

@media (max-width: 900px) {
  .entete {
    height: auto;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    padding: 16px 16px 0;
  }
  .onglets { order: 3; width: 100%; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; }
  .onglets a { padding: 0.7rem 2px; margin-bottom: 0; }
  .ecran.outil.actif { display: block; height: auto; min-height: 0; padding: 1.5rem var(--marge) 2.5rem; }
  .ecran.outil.actif > * + * { margin-top: 1rem; }
  .sous-onglets { margin: 0.8rem 0 0; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .cadre-graphe { flex: none; height: 260px; }
  .zone-globe { flex: none; height: 300px; }
  .globe-et-webb, .globe-et-webb .colonne { grid-template-columns: 1fr; grid-template-rows: none; }
  .curseurs.deux, .curseurs.trois { grid-template-columns: 1fr; }
  .repere { grid-template-columns: 1fr auto auto; }
  .revelation { min-width: 0; border-left: none; padding-left: 0; }
  .ligne-legende { flex-wrap: wrap; gap: 0.2rem 1rem; }
}

@media (max-width: 600px) {
  .marque, .marque-site { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}