/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/pages/atlas/atlas.scss ***!
  \************************************************************************************************************************/
@charset "UTF-8";
/* Atlas spatio-temporel — /mathematiques/atlas/
 *
 * Aligné sur les variables de /mathematiques/ : même fond sombre, mêmes
 * familles. La console emprunte ses classes au SDK Panel (`sxp-*`) ; ce qui
 * suit n'habille que la disposition et ce que Panel ne couvre pas. */
/* PLEINE LARGEUR D'ÉCRAN. L'atlas est un poste de pilotage, pas un article : le
   `.wrap` du gabarit commun le plafonnerait à 1200 px. On lève la contrainte
   SUR CE WRAP-LÀ seulement, au lieu de toucher `base.twig` — cette enveloppe
   sert à toutes les pages, et une page ne doit pas imposer sa mise en page aux
   autres.

   `:has()` plutôt que les marges négatives en `100vw` : ce calcul-là compte la
   barre de défilement alors que le `50 %` ne la compte pas, et la page se
   décalait de sept pixels vers la gauche — mesuré. Ici, aucune arithmétique de
   viewport, donc aucun décalage. Sur un navigateur sans `:has()`, la page
   retombe simplement à 1200 px : elle reste utilisable. */
.wrap:has(> .atlas) {
  max-width: none;
  padding: 0;
}

.atlas {
  /* La modale de chargement se positionne par rapport à l'atlas. */
  position: relative;
  --at-fond: #0f1115;
  --at-panneau: #12151c;
  --at-encre: #e8ecf2;
  --at-attenue: #7c8ba0;
  --at-filet: #242a35;
  --at-accent: #7dd3fc;
  --at-alerte: #fbbf24;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.1rem clamp(0.75rem, 2vw, 1.75rem) 1.5rem;
  color: var(--at-encre);
  background: var(--at-fond);
}

/* Dans le vrai plein écran (API Fullscreen), on récupère aussi la place de
   l'en-tête et du pied de page du site.

   `flex: 1` ne suffit pas à agrandir la carte : le contenu total dépasse déjà
   la hauteur de l'écran (relevé, mixage, tiroir), il n'y a donc aucun espace
   libre à distribuer et la carte reste à sa hauteur minimale — mesuré à 297 px
   pour 900 px d'écran. On lui impose une part de l'écran, et le reste défile
   dessous : en plein écran, c'est le poste de pilotage qu'on veut voir, pas la
   liste des escales. */
.atlas:fullscreen {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.atlas:fullscreen .atlas__grille {
  min-height: 62vh;
}

.atlas:fullscreen .atlas__frisebloc {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* L'en-tête vit dans le poste : titre compact, chapô bref, couverture. Le haut
   de page appartient à la frise et à la carte, qui sont l'objet de la page. */
.atlas__entete {
  margin-bottom: 0.8rem;
}

.atlas__titre {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.atlas__chapo {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--at-attenue);
}

.atlas__commandes {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.atlas__bouton {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  background: rgba(125, 211, 252, 0.08);
  color: var(--at-accent);
  border: 1px solid var(--at-accent);
  border-radius: 3px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.atlas__bouton:hover {
  background: rgba(125, 211, 252, 0.16);
}

.atlas__bouton--sobre {
  color: var(--at-attenue);
  border-color: var(--at-filet);
  background: transparent;
}

.atlas__bouton--sobre:hover {
  color: var(--at-encre);
  border-color: var(--at-attenue);
  background: transparent;
}

/* En pilotage, la façade se signale — discrètement, pas en clignotant. */
.atlas[data-mode=pilotage] .atlas__bouton#atlasEngager {
  background: var(--at-alerte);
  color: #0f1115;
  border-color: var(--at-alerte);
}

.atlas[data-mode=pilotage] .atlas__pupitre {
  border-color: rgba(251, 191, 36, 0.45);
}

/* Le SIGNAL n'a de sens qu'en pilotage : en étude, il n'y a rien à chercher, et
   une jauge morte est un bruit visuel.

   La RADIO, elle, est visible dans les deux modes depuis qu'elle porte
   l'annonce de couverture : c'est le journal de bord de la page, pas seulement
   le commentaire d'une partie. */
.atlas__signal {
  display: none;
}

.atlas[data-mode=pilotage] .atlas__signal {
  display: flex;
}

/* ── La frise ─────────────────────────────────────────────────────────── */
/* Le bandeau du haut n'accueille plus que les PRESETS DE PÉRIODE. Vide — avant
   que le script ne les y remonte — il ne réserve aucune place, pour que la page
   ne saute pas au montage. */
.atlas__frisebloc {
  margin: 0 0 0.8rem;
}

.atlas__frisebloc:empty {
  display: none;
}

/* La zone d'accueil dans la console : c'est elle qui porte l'axe. */
.atlas-console__zone:empty {
  display: none;
}

.atlas-console__zone {
  margin: 0 0 0.9rem;
}

/* Les presets sont en pleine largeur : dix libellés comme « Inde et âge d'or
   arabe » se lisent, au lieu d'être comprimés dans une colonne. */
.frise__periodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.frise__periode {
  border: 1px solid var(--at-filet);
  background: transparent;
  color: var(--at-attenue);
  border-radius: 3px;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  cursor: pointer;
  font-family: inherit;
}

.frise__periode:hover, .frise__periode:focus-visible {
  border-color: var(--at-accent);
  color: var(--at-accent);
  outline: none;
}

/* Le cadre porte la position : les poignées sont absolues par rapport à lui.
   Dans la colonne de la console, l'axe est plus bas — 68 px au lieu de 96 : on
   y lit une densité et une fenêtre, pas un relief. */
.frise__cadre {
  position: relative;
  height: 68px;
}

.frise__svg {
  display: block;
  width: 100%;
  height: 68px;
}

.frise__axe {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}

.frise__grad {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}

.frise__barre {
  fill: var(--at-accent);
  fill-opacity: 0.55;
  transition: fill-opacity 0.12s linear;
}

/* Hors fenêtre : atténué, pas effacé. Le corpus ne s'arrête pas aux bords de
   ce qu'on regarde. */
.frise__barre--hors {
  fill-opacity: 0.16;
}

.frise__voile {
  fill: rgba(15, 17, 21, 0.62);
  pointer-events: none;
}

.frise__zone {
  fill: rgba(125, 211, 252, 0.05);
  cursor: grab;
}

body.frise-en-prise .frise__zone {
  cursor: grabbing;
}

.frise__couche {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.frise__poignee {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}

/* Le trait visible est un pseudo-élément : la zone de PRISE reste large
   (14 px) alors que le trait fait 2 px. Une poignée qu'on n'attrape pas est
   une poignée cassée, et 2 px ne s'attrapent pas. */
.frise__poignee::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--at-accent);
}

.frise__poignee::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 10px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: #1a1f28;
  border: 1px solid var(--at-accent);
}

.frise__poignee:focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 2px;
}

.frise__reglette {
  position: relative;
  height: 1.1rem;
  margin-top: 0.15rem;
}

.frise__annee {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.625rem;
  color: var(--at-attenue);
  font-family: ui-monospace, Menlo, monospace;
  white-space: nowrap;
}

.atlas__lecture {
  margin: 0.5rem 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--at-accent);
}

/* ── Carte + console ──────────────────────────────────────────────────── */
/* Deux tiers pour la carte, UN TIERS pour le poste de pilotage. Les fractions
   plutôt qu'une largeur fixe : sur un écran large, une console étroite devient
   un ruban perdu, et sur un portable elle mangerait la carte.

   Le poste ne descend JAMAIS sous 600 px. Ce n'est pas un confort : il porte
   maintenant la frise et ses poignées, deux rangées de potentiomètres, trois
   instruments à aiguille, un odomètre et trois panneaux à onglets. En dessous,
   l'axe devient trop court pour qu'on y pose une fenêtre et les cadrans se
   chevauchent — la console cesse d'être utilisable.

   Plafond à 760 px : au-delà, c'est de la place volée à la carte.

   `minmax(0, 2fr)` et non `2fr` : sans le zéro, une grille refuse de laisser
   son enfant rétrécir sous sa taille intrinsèque, et le canvas déborde. */
.atlas__grille {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(600px, clamp(600px, 33%, 760px));
  gap: 1rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 380px;
}

.atlas__cartebloc, .atlas__pupitre {
  border: 1px solid var(--at-filet);
  border-radius: 6px;
  background: var(--at-panneau);
  padding: 0.75rem 0.9rem;
}

.atlas__cartebloc {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Le poste défile en interne : la console, la radio et le relevé de route s'y
   empilent, et c'est la CARTE qui doit garder sa hauteur, pas l'inverse.

   `container-type: inline-size` : la liste des escales se réagence selon la
   largeur DU POSTE et non celle de la fenêtre. Une requête média se tromperait
   — sur un grand écran, le poste peut rester étroit si l'utilisateur a réduit
   la fenêtre, et l'inverse est vrai aussi. */
.atlas__pupitre {
  overflow-y: auto;
  min-height: 0;
  max-height: calc(100vh - 2rem);
  container-type: inline-size;
  container-name: atlas-poste;
}

.atlas__carte {
  width: 100%;
  flex: 1 1 auto;
  min-height: 260px;
}

/* La main ouverte est la SEULE affordance depuis qu'il n'y a plus de mode
   d'emploi au-dessus de la carte : elle doit être là dès le repos, et pas
   seulement au premier mouvement de souris. */
.carte__toile {
  display: block;
  width: 100%;
  cursor: grab;
}

/* ── Force du signal ── */
.atlas__signal {
  align-items: center;
  gap: 0.5rem;
  margin: 0.8rem 0 0.6rem;
}

.atlas__signal-nom {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--at-attenue);
}

.atlas__signal-jauge {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #0c0f14;
  border: 1px solid var(--at-filet);
  overflow: hidden;
}

.atlas__signal-jauge i {
  display: block;
  height: 100%;
  width: var(--force, 0%);
  background: linear-gradient(90deg, #22d3ee, var(--at-alerte));
  transition: width 0.1s linear;
}

/* ── Fil radio ── */
.atlas-tour {
  border: 1px solid var(--at-filet);
  border-radius: 4px;
  background: #0c0f14;
  margin-top: 0.6rem;
}

.atlas-tour__entete {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--at-attenue);
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--at-filet);
}

.atlas-tour__fil {
  max-height: 190px;
  overflow-y: auto;
  padding: 0.35rem 0.5rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  line-height: 1.5;
}

.atlas-tour__ligne {
  margin: 0 0 0.18rem;
  color: var(--at-attenue);
  word-break: break-word;
}

.atlas-tour__heure {
  color: #4b5563;
  margin-right: 0.4rem;
}

.atlas-tour__ligne--ok .atlas-tour__texte {
  color: var(--at-accent);
}

.atlas-tour__ligne--flottante .atlas-tour__texte {
  color: var(--at-alerte);
}

.atlas-tour__ligne--alerte .atlas-tour__texte {
  color: #f87171;
}

.atlas-tour__ligne--consigne .atlas-tour__texte {
  color: var(--at-encre);
}

.atlas__note, .atlas__reserve {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--at-attenue);
}

/* L'avertissement sur les frontières d'empires porte l'ambre de la couche
   qu'il commente : on voit du premier coup d'œil à quoi il se rapporte. */
.atlas__note--alerte {
  border-left: 2px solid var(--at-alerte);
  padding-left: 0.5rem;
}

.atlas__note--alerte strong {
  color: var(--at-alerte);
  font-weight: 600;
}

.atlas__reserve {
  border-left: 2px solid var(--at-alerte);
  padding-left: 0.5rem;
}

/* ── Console ──────────────────────────────────────────────────────────── */
/* Façade de rack, sur le modèle de la carte des métiers d'Habilo : titre centré
   en capitales très espacées, filet, et quatre rivets aux angles. Les rivets ne
   sont pas un gadget — ils disent « appareil » et bornent la façade, ce qu'un
   simple cadre ne fait pas. */
.atlas-console {
  position: relative;
  border: 1px solid var(--at-filet);
  border-radius: 8px;
  padding: 0.9rem 0.85rem 0.8rem;
  /* Les quatre rivets sont peints EN FOND, aux quatre coins : un décalage fixe
     en box-shadow, essayé d'abord, aurait dépendu de la largeur de la console —
     or elle varie du simple au double entre 340 et 620 px. */
  background: radial-gradient(circle at 8px 8px, #2b3644 1.6px, transparent 2.2px), radial-gradient(circle at calc(100% - 8px) 8px, #2b3644 1.6px, transparent 2.2px), radial-gradient(circle at 8px calc(100% - 8px), #2b3644 1.6px, transparent 2.2px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #2b3644 1.6px, transparent 2.2px), linear-gradient(180deg, #161b23, #10141a);
}

/* Une rangée = un geste. Le sous-titre sépare les commandes du TEMPS de celles
   de la CARTE ; sans lui, on relirait les étiquettes à chaque réglage. */
/* Le sous-titre de rangée sépare TEMPS de CARTE. Sans plaque de titre au-dessus,
   c'est lui qui ouvre la façade : il porte donc le filet de tête, que la plaque
   assurait auparavant. */
.atlas-console__soustitre {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  color: #4b5563;
  margin: 0 0 0.35rem;
}

.atlas-console__soustitre + .atlas-console__knobs {
  margin-bottom: 0.8rem;
}

/* `.atlas-console` en tête de sélecteur : la feuille du SDK est chargée APRÈS
   la nôtre, et son `.sxp-krow { display: flex }` l'emportait sur notre grille à
   spécificité égale. Les rangées n'étaient donc jamais en grille — constaté au
   navigateur, `display` calculé à `flex`. */
.atlas-console .atlas-console__knobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem 0.2rem;
  margin-bottom: 0.8rem;
}

.atlas-console__rockers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
}

/* Une rangée sans bascule ne doit pas laisser de blanc : la rangée TEMPS n'en
   porte aucune, et son conteneur vide décalait le vu-mètre. */
.atlas-console__rockers:empty {
  display: none;
}

/* Bascules : le composant `sxp-toggle` du SDK — pastille compacte à LED. On ne
   règle que la typographie de l'étiquette et l'accent ; la mécanique (LED,
   états, focus) appartient au SDK.

   L'accent est une variable du SDK : on lui donne le bleu de l'atlas plutôt que
   de repeindre la LED à la main. */
.atlas-console .sxp-toggle {
  --sxp-accent: #7dd3fc;
  padding: 0.3rem 0.55rem;
}

.atlas-toggle__nom {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
}

.atlas-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.atlas-knob:focus-visible {
  outline: 1px solid var(--at-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.atlas-knob__nom {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--at-attenue);
}

/* La valeur est un AFFICHEUR, pas un texte : fond sombre encastré, encre
   phosphore, chiffres monospace. C'est ce qui distingue un instrument d'une
   étiquette — et c'est le parti pris de la carte des métiers d'Habilo. */
.atlas-knob__val {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  color: #7dd3fc;
  background: #0a0e13;
  border: 1px solid #1d2530;
  border-radius: 2px;
  padding: 0.1rem 0.3rem;
  min-width: 3.4rem;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Les potentiomètres du TEMPS et leur vu-mètre partagent une ligne : le second
   est la lecture directe de ce que les premiers règlent. */
.atlas-console__ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.atlas-console__ligne .atlas-console__knobs {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* Le vu-mètre ne prend plus tout l'espace restant : douze bandes étalées sur
   trois cents pixels se lisaient comme un décor. Borné, il redevient un
   instrument posé à côté de ses commandes. */
/* Largeur DÉFINIE, ni `1fr` ni `auto` : à `1fr` les douze bandes s'étalaient sur
   trois cents pixels et se lisaient comme un décor ; à `auto` la colonne
   s'effondrait à quatre-vingt-sept, cinq pixels par bande. */
.atlas-console__colonnevu {
  flex: 0 0 186px;
  min-width: 0;
}

/* Vu-mètre : douze bandes. Ce n'est pas un ornement et ce n'est pas un vu-mètre
   d'activité — c'est la RÉPARTITION des repères dans la fenêtre. Il ne retombe
   pas : il reste stable tant que la fenêtre ne bouge pas. */
.atlas-console .atlas-console__vu {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 62px;
  padding: 3px;
  border: 1px solid var(--at-filet);
  border-radius: 3px;
  background: #0c0f14;
  margin: 0;
}

/* ── Journal d'activité ──
   À droite du vu-mètre : ce qui vient de se passer. Il ne remplace pas le fil
   radio — celui-là commente une partie et vit dans son onglet ; ce journal-ci
   est le témoin de la façade, toujours visible. */
.atlas-console__journal {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--at-filet);
  border-radius: 3px;
  background: #0c0f14;
  padding: 3px 5px;
  height: 62px;
  overflow: hidden;
}

.atlas-console__journaltitre {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: #4b5563;
  flex: none;
}

.atlas-console__journalfil {
  flex: 1 1 auto;
  overflow: hidden;
}

.atlas-console__journalligne {
  margin: 0.1rem 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  line-height: 1.35;
  color: var(--at-attenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La ligne la plus récente est la plus lisible : les précédentes s'effacent
   sans disparaître, ce qui donne la profondeur du temps sans occuper la place
   d'une archive. */
.atlas-console__journalfil .atlas-console__journalligne:first-child {
  color: var(--at-encre);
}

.atlas-console__journalfil .atlas-console__journalligne:nth-child(3) {
  opacity: 0.6;
}

.atlas-console__journalfil .atlas-console__journalligne:nth-child(4) {
  opacity: 0.35;
}

.atlas-console__journalligne--ok {
  color: var(--at-alerte) !important;
}

.atlas-console__vulegende {
  margin-top: 0.2rem;
}

.atlas-console__vunom {
  display: block;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: #4b5563;
}

/* Les bornes de l'histogramme, aux deux bouts : elles disent SUR QUOI les
   douze tranches sont réparties. */
.atlas-console__vubornes {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  color: var(--at-attenue);
  margin-top: 0.1rem;
}

.atlas-console__vubornes b {
  font-weight: 400;
}

.atlas-console__vu .sxp-eq-band {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.atlas-console__vu i {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, #22d3ee, #7dd3fc);
  transition: height 0.09s linear;
}

.atlas-console__vu i.atlas-eq--haut {
  background: linear-gradient(to top, #7dd3fc, var(--at-alerte));
}

/* Les instruments à aiguille. Ils dessinent eux-mêmes leur fond et leur
   cartouche : on ne leur pose ni cadre ni couleur, seulement leur place. */
/* En-tête de façade : le compteur, puis les deux jauges à sa droite. Elles
   disent la même chose que lui — ce que la fenêtre courante contient — et trois
   relevés du même objet se lisent ensemble ou pas du tout. */
.atlas-console__tete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}

.atlas-console__tete .atlas-compteur {
  margin: 0;
}

/* Deux jauges seulement : la boussole a rejoint la rangée CARTE, à côté des
   commandes qui la font tourner. */
.atlas-console__instruments {
  display: flex;
  gap: 0.2rem;
  margin: 0;
}

/* La boussole est posée à droite des potentiomètres de la carte : elle indique
   la position de la Terre sous la vue, et se règle donc du même geste. */
.atlas-console__ligne--boussole {
  align-items: flex-start;
}

/* La boussole LIT ce que le manche COMMANDE : l'un sous l'autre, on règle et on
   vérifie dans le même regard. */
.atlas-console__colonneboussole {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.atlas-boussole {
  width: 104px;
  height: 104px;
}

/* Le SDK compose le manche en `inline-flex` : pad et gaz côte à côte, avec sa
   propre plaque de nom. On ne règle que son accent. */
.atlas-console .atlas-manche {
  --sxp-accent: #7dd3fc;
}

/* Le débit d'images, sous le vu-mètre — comme sur la console d'Habilo. Il dit
   si la machine SUIT, et sa couleur donne le verdict sans qu'on ait à
   comparer un nombre à un seuil qu'on ne connaît pas. */
/* Le débit d'images vit désormais parmi les cadrans, avec les autres relevés
   d'état : il mesure la MACHINE, pas le corpus. Sous le vu-mètre, il laissait
   croire que les bandes montaient avec la charge de calcul. */
.atlas-console__fps {
  color: #4ade80;
}

.atlas-console__fps--moyen {
  color: var(--at-alerte);
}

.atlas-console__fps--bas {
  color: #f87171;
}

.atlas-inst {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Compteur de repères ──
   Le principe de l'odomètre, pas son costume : un filet, des chiffres blancs,
   et un glissement bref quand un rang tourne. L'instrument du SDK — rouleaux
   crème et cadre doré — criait plus fort que tout le reste pour n'annoncer
   qu'un nombre. */
.atlas-compteur {
  display: flex;
  justify-content: center;
  gap: 1px;
  width: max-content;
  margin: 0 auto 0.8rem;
  border: 1px solid var(--at-filet);
  border-radius: 3px;
  background: #0a0e13;
  padding: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.atlas-compteur__rang {
  position: relative;
  overflow: hidden;
  width: 1.15rem;
  height: 1.5rem;
  line-height: 1.5rem;
  background: #0f141b;
  border-radius: 2px;
}

.atlas-compteur__rang i {
  display: block;
  text-align: center;
  font-style: normal;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9375rem;
  color: #fff;
  letter-spacing: 0.02em;
}

/* Le rang qui change glisse depuis le haut : c'est ce qui reste de l'odomètre
   quand on lui retire son décor. */
.atlas-compteur--roule {
  animation: atlas-roule 0.18s ease-out;
}

@keyframes atlas-roule {
  from {
    transform: translateY(-100%);
    opacity: 0.2;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-compteur--roule {
    animation: none;
  }
}
.atlas-console__cadrans {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.18rem 0.6rem;
  margin: 0 0 0.8rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
}

.atlas-console__cadrans dt {
  color: var(--at-attenue);
  letter-spacing: 0.1em;
}

.atlas-console__cadrans dd {
  margin: 0;
  color: var(--at-encre);
  text-align: right;
}

.atlas-console__leds {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.atlas-led {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--at-attenue);
}

.atlas-led .sxp-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #2a3240;
  box-shadow: none;
}

.atlas-led .sxp-led--on {
  background: var(--at-alerte);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.7);
}

/* ── Crémaillère des tranches de frontières ──
   Une seconde frise, à crans : les frontières historiques n'existent qu'à des
   dates discrètes. Elle partage l'échelle de la frise principale. */
.tranches {
  margin: 0.2rem 0 0.3rem;
}

.tranches__piste {
  position: relative;
  height: 20px;
  border-bottom: 1px solid var(--at-filet);
}

.tranches__cran {
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 14px;
  margin-left: -4.5px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* Le trait visible fait 2 px, la zone de PRISE en fait neuf : un cran qu'on
   n'attrape pas est un cran cassé. */
.tranches__cran::before {
  content: "";
  position: absolute;
  left: 3.5px;
  bottom: 0;
  width: 2px;
  height: 9px;
  background: #3d4655;
}

.tranches__cran:hover::before {
  background: var(--at-attenue);
  height: 12px;
}

.tranches__cran--on::before {
  background: var(--at-alerte);
  height: 14px;
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.8);
}

.tranches__cran:focus-visible {
  outline: 1px solid var(--at-accent);
  outline-offset: 1px;
}

.tranches__lecture {
  margin: 0.25rem 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--at-alerte);
}

/* La légende de la tranche : les entités les plus étendues, nommées et
   coloriées. Deux colonnes — une tranche en compte douze au plus, et une
   colonne unique ferait une liste plus haute que la console. */
.tranches__legende {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.1rem 0.5rem;
}

.tranches__legende:empty {
  display: none;
}

.tranches__entree {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  color: var(--at-attenue);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tranches__entree i {
  width: 8px;
  height: 3px;
  border-radius: 1px;
  flex: none;
}

/* Le pointillé de la carte se retrouve dans la pastille : la couleur seule ne
   dit pas qu'un tracé est incertain. */
.tranches__entree--douteuse i {
  height: 0;
  border-top: 2px dotted currentColor;
  background: none !important;
}

.tranches__entree--douteuse {
  font-style: italic;
  opacity: 0.8;
}

.tranches__n {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  font-weight: 400;
  color: var(--at-accent);
}

.tranches__reste {
  grid-column: 1/-1;
  margin-top: 0.15rem;
  font-size: 0.5625rem;
  color: #4b5563;
}

/* ── Table de mixage ──────────────────────────────────────────────────── */
.atlas__mixagetete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.atlas__mixageboutons {
  display: flex;
  gap: 0.25rem;
}

.atlas__minibouton {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  background: transparent;
  color: var(--at-attenue);
  border: 1px solid var(--at-filet);
  border-radius: 3px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}

.atlas__minibouton:hover {
  color: var(--at-encre);
  border-color: var(--at-attenue);
}

#atlasOperateur {
  color: var(--at-accent);
  border-color: rgba(125, 211, 252, 0.45);
  min-width: 2.4rem;
}

/* Deux colonnes dès que le poste le permet, une seule sinon — la largeur du
   POSTE commande, pas celle de l'écran. */
.atlas__pistes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 0.7rem;
  max-height: 34vh;
  overflow-y: auto;
}

@container atlas-poste (min-width: 460px) {
  .atlas__pistes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.atlas-piste {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(36, 42, 53, 0.6);
}

.atlas-piste__nom {
  font-size: 0.75rem;
  color: var(--at-encre);
}

.atlas-piste__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  color: var(--at-attenue);
  min-width: 2.2rem;
  text-align: right;
}

.atlas-piste__touche {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  width: 17px;
  height: 17px;
  line-height: 1;
  padding: 0;
  background: transparent;
  color: #4b5563;
  border: 1px solid var(--at-filet);
  border-radius: 2px;
  cursor: pointer;
}

.atlas-piste__touche--m.atlas-piste__touche--on {
  background: #f87171;
  border-color: #f87171;
  color: #0f1115;
}

.atlas-piste__touche--s.atlas-piste__touche--on {
  background: var(--at-alerte);
  border-color: var(--at-alerte);
  color: #0f1115;
}

/* Une piste à zéro se grise : elle n'a rien à dire dans cette fenêtre. */
.atlas-piste--vide .atlas-piste__nom, .atlas-piste--vide .atlas-piste__n {
  opacity: 0.35;
}

.atlas-piste--muette .atlas-piste__nom {
  text-decoration: line-through;
  opacity: 0.55;
}

.atlas__bandeau {
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--at-accent);
  background: rgba(125, 211, 252, 0.04);
  font-size: 0.75rem;
  color: var(--at-attenue);
}

/* ── La route ─────────────────────────────────────────────────────────── */
/* ── Onglets du poste ──
   Pilules à LED, sur le modèle d'Habilo : la LED dit lequel est allumé mieux
   qu'un simple fond plus clair, surtout dans une façade sombre. */
.atlas__onglets {
  display: flex;
  gap: 0.3rem;
  margin: 1rem 0 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--at-filet);
}

.atlas__onglet {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--at-attenue);
  cursor: pointer;
  background: linear-gradient(180deg, #1c2530, #10161d);
  border: 1px solid var(--at-filet);
  border-radius: 4px;
  padding: 0.3rem 0.25rem;
}

.atlas__onglet:hover {
  border-color: #2e4050;
}

.atlas__onglet-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: #232f3a;
  box-shadow: inset 0 1px 2px #000;
}

.atlas__onglet--on {
  color: var(--at-encre);
  border-color: #33454f;
}

.atlas__onglet--on .atlas__onglet-led {
  background: var(--at-accent);
  box-shadow: 0 0 7px var(--at-accent), inset 0 0 2px #fff;
}

.atlas__onglet:focus-visible {
  outline: 1px solid var(--at-accent);
  outline-offset: 2px;
}

/* Un panneau caché l'est vraiment : `display: none` et non une opacité nulle,
   pour qu'il sorte aussi de l'ordre de tabulation. */
.atlas__panneau--cache {
  display: none;
}

.atlas__select--large {
  width: 100%;
  margin-top: 0.3rem;
}

.atlas__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--at-attenue);
}

.atlas__select {
  background: #0c0f14;
  color: var(--at-encre);
  border: 1px solid var(--at-filet);
  border-radius: 3px;
  padding: 0.25rem 0.4rem;
  font-size: 0.8125rem;
  font-family: inherit;
}

.atlas__routeresume {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  color: var(--at-encre);
  font-family: ui-monospace, Menlo, monospace;
}

/* Les escales gardent l'année en colonne fixe, le nom et le trajet dessous :
   « Bâle → Berlin → Bâle → Saint-Pétersbourg » ne tient pas à côté d'un nom sur
   une colonne latérale, même élargie. La liste défile sur sa propre hauteur.
   Au-delà de 520 px, le trajet remonte à côté du nom — la place est là. */
.atlas__escales {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  max-height: 42vh;
  overflow-y: auto;
}

.atlas-escale {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.1rem 0.5rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--at-filet);
  font-size: 0.8125rem;
}

.atlas-escale__lieu {
  grid-column: 2;
}

@container atlas-poste (min-width: 520px) {
  .atlas-escale {
    grid-template-columns: 4.6rem 1fr 1fr;
  }
  .atlas-escale__lieu {
    grid-column: auto;
  }
}
.atlas-escale__an {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--at-attenue);
}

.atlas-escale__nom {
  color: var(--at-encre);
  text-decoration: none;
}

.atlas-escale__nom:hover {
  color: var(--at-accent);
}

.atlas-escale__lieu {
  color: var(--at-attenue);
  font-size: 0.75rem;
}

/* Une escale muette n'est pas cachée : elle est marquée. */
.atlas-escale--muette .atlas-escale__lieu {
  font-style: italic;
  opacity: 0.6;
}

.atlas-escale--flottante .atlas-escale__an {
  color: var(--at-alerte);
}

/* ── Jauge de chargement de la carte ──
   Elle se montre pendant le transfert et s'efface après : une jauge pleine en
   permanence n'est plus une jauge. */
.atlas-jauge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.35rem 0 0.7rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.atlas-jauge--active {
  opacity: 1;
}

.atlas-jauge__nom {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: var(--at-attenue);
}

.atlas-jauge__piste {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #0c0f14;
  border: 1px solid var(--at-filet);
  overflow: hidden;
}

.atlas-jauge__piste i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22d3ee, var(--at-accent));
  transition: width 0.12s linear;
}

/* Progression non mesurée : on balaie au lieu d'afficher un pourcentage
   qu'on n'a pas. */
.atlas-jauge--indetermine .atlas-jauge__piste i {
  animation: atlas-balayage 1.1s linear infinite;
  transform-origin: left center;
}

@keyframes atlas-balayage {
  0% {
    transform: scaleX(0.15) translateX(0);
  }
  50% {
    transform: scaleX(0.4) translateX(160%);
  }
  100% {
    transform: scaleX(0.15) translateX(560%);
  }
}
/* ── Tiroir des hors-axe ──────────────────────────────────────────────── */
.atlas__tiroir {
  border: 1px solid var(--at-filet);
  border-radius: 6px;
  background: var(--at-panneau);
  margin-top: 1rem;
}

.atlas__tiroirtete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--at-encre);
  list-style: none;
}

.atlas__tiroirtete::-webkit-details-marker {
  display: none;
}

.atlas__tiroirtete::before {
  content: "▸";
  color: var(--at-attenue);
  margin-right: 0.35rem;
}

.atlas__tiroir[open] .atlas__tiroirtete::before {
  content: "▾";
}

.atlas__tiroircompte {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--at-alerte);
  margin-left: auto;
}

.atlas__tiroircorps {
  padding: 0 0.9rem 0.9rem;
}

.atlas__tiroirnote {
  margin: 0 0 0.7rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--at-attenue);
  border-left: 2px solid var(--at-alerte);
  padding-left: 0.5rem;
}

.atlas__tiroirbarre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.atlas__champ {
  background: #0c0f14;
  color: var(--at-encre);
  border: 1px solid var(--at-filet);
  border-radius: 3px;
  padding: 0.25rem 0.45rem;
  font-size: 0.8125rem;
  font-family: inherit;
  min-width: 12rem;
}

.atlas__tiroiretat {
  margin: 0.5rem 0 0.3rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  color: var(--at-attenue);
}

.atlas__tiroirliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 0.8rem;
}

.atlas-horsaxe {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(36, 42, 53, 0.55);
  font-size: 0.8125rem;
}

.atlas-horsaxe a {
  color: var(--at-encre);
  text-decoration: none;
}

.atlas-horsaxe a:hover {
  color: var(--at-accent);
}

.atlas-horsaxe__type {
  color: var(--at-attenue);
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* ── Modale de chargement ─────────────────────────────────────────────────
   Elle couvre l'atlas le temps que le corpus arrive : sans elle, la page reste
   une carcasse vide quelques secondes et l'on croit qu'elle est cassée. */
.atlas__chargement {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 21, 0.94);
  transition: opacity 0.35s ease;
}

.atlas__chargement--fini {
  opacity: 0;
  pointer-events: none;
}

.atlas__chargement-boite {
  min-width: 260px;
  max-width: 90vw;
  text-align: center;
  border: 1px solid var(--at-filet);
  border-radius: 8px;
  background: linear-gradient(180deg, #161b23, #10141a);
  padding: 1.2rem 1.6rem;
}

.atlas__chargement-titre {
  margin: 0 0 0.6rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.34em;
  color: var(--at-encre);
}

.atlas__chargement-etat {
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  color: var(--at-attenue);
}

.atlas__chargement-jauge {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #0a0e13;
  border: 1px solid #1d2530;
  overflow: hidden;
}

.atlas__chargement-jauge i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22d3ee, var(--at-accent));
  transition: width 0.15s linear;
}

/* Progression non mesurée : on balaie plutôt que d'afficher un pourcentage
   qu'on n'a pas. */
.atlas__chargement--indetermine .atlas__chargement-jauge i {
  animation: atlas-balayage 1.1s linear infinite;
  transform-origin: left center;
}

.atlas__chargement--echec .atlas__chargement-jauge i {
  background: #f87171;
  width: 100% !important;
}

.atlas__chargement--echec .atlas__chargement-etat {
  color: #f87171;
}

.atlas__chargement-detail {
  margin: 0.5rem 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  color: #4b5563;
}

@media (prefers-reduced-motion: reduce) {
  .atlas__chargement, .atlas__chargement-jauge i {
    transition: none;
  }
  .atlas__chargement--indetermine .atlas__chargement-jauge i {
    animation: none;
    width: 100%;
  }
}
/* Bouton d'action de la console, à côté des bascules. */
.atlas-bouton {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--at-attenue);
  background: linear-gradient(180deg, #1c2530, #10161d);
  border: 1px solid var(--at-filet);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}

.atlas-bouton:hover {
  color: var(--at-encre);
  border-color: #2e4050;
}

.atlas__noscript, .atlas__replilien {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--at-attenue);
}

.atlas__replilien a {
  color: var(--at-accent);
}

/* ── Écrans intermédiaires ──
   Le seuil suit le minimum du poste : sous 1 400 px, lui laisser ses 600 px
   ne laisserait plus à la carte qu'une bande de 780 px moins les marges, et
   la carte cesserait d'être le sujet. Le poste passe alors SOUS elle, en
   pleine largeur, et ses instruments s'étalent au lieu de se comprimer. */
@media (max-width: 1400px) and (min-width: 901px) {
  .atlas__grille {
    grid-template-columns: 1fr;
  }
  .atlas__pupitre {
    max-height: none;
  }
  .atlas-escale {
    grid-template-columns: 5.5rem 1fr 1fr;
  }
  .atlas-escale__lieu {
    grid-column: auto;
  }
}
/* ── Mobile : ni console ni cadrans ──
   Choix de charge assumé, et documenté : sur un téléphone, la frise et la
   carte suffisent. Le RELEVÉ DE ROUTE, lui, reste — c'est du contenu, pas une
   commande, et le masquer priverait le lecteur de ce que la page raconte. */
@media (max-width: 900px) {
  .atlas__grille {
    grid-template-columns: 1fr;
  }
  .atlas__pupitre {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    padding: 0;
  }
  /* On masque les COMMANDES, pas la console entière : depuis que la frise vit
     dans sa rangée TEMPS, cacher `.atlas-console` la cachait avec — et le
     lecteur n'avait plus aucun moyen de cadrer une période. Mesuré : l'axe
     tombait à 0 px de large.
     Restent donc visibles la frise et les bascules de la carte ; disparaissent
     les potentiomètres, les instruments et les voyants, qui demandent une
     précision de pointage qu'un pouce n'a pas. */
  /* Sélecteurs préfixés par `.atlas` : sans cela, `.sxp-krow` et `.sxp-eq` de
     la feuille du SDK — chargée après la nôtre — reprenaient la main sur
     `display` et rien ne se cachait. */
  .atlas .atlas__commandes, .atlas .atlas__signal,
  .atlas .atlas-console__soustitre, .atlas .atlas-console__knobs,
  .atlas .atlas-console__instruments, .atlas .atlas-console__vu,
  .atlas .atlas-console__fps, .atlas .atlas-console__cadrans,
  .atlas .atlas-console__leds {
    display: none;
  }
  .atlas .atlas-console {
    border: 0;
    background: none;
    padding: 0;
  }
  .atlas__routebloc {
    border: 1px solid var(--at-filet);
    border-radius: 6px;
    background: var(--at-panneau);
    padding: 0.75rem 0.9rem;
    margin-top: 0;
  }
  .atlas__escales {
    max-height: none;
  }
  .atlas {
    padding: 1rem 0.75rem 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .frise__barre, .atlas-console__vu i {
    transition: none;
  }
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/pages/origines/origines.scss ***!
  \******************************************************************************************************************************/
@charset "UTF-8";
/* === DICO_SCSS_META_START ===
path: assets/pages/origines/origines.scss
=== DICO_SCSS_META_END === */
/* Page /origines/ — SURCOUCHE de la façade de l'atlas.

   La carte, la console, la frise et le journal portent les classes `atlas__*`
   et sont habillés par `../atlas/atlas.scss`, importé avant celui-ci : ce
   fichier ne redéfinit rien de tout cela. Il ne décrit que ce qui appartient au
   lexique — la liste des langues, celle des mots, et leurs trajets.

   Il sert AUSSI au repli sans script (/origines/liste), qui n'a ni carte ni
   console mais reprend ces mêmes listes. C'est pourquoi le titre, le chapô et
   l'encart y figurent encore : sur la carte, ils sont rendus par la façade.

   Les trois couleurs de catégorie sont celles de la carte (TEINTES dans
   index.js) : l'ambre pour ce dont le français descend, le vert pour les
   langues d'à côté, le bleu pour les emprunts lointains. Une pastille qui ne
   reprendrait pas la couleur de l'arc obligerait à faire le lien de tête. */
.orig {
  max-width: 1240px;
  margin: 0 auto;
}
.orig__h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}
.orig__chapo {
  margin: 0 0 22px;
  max-width: 68ch;
  color: var(--mut);
  font-size: 15.5px;
  line-height: 1.65;
}
.orig__t2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acc2);
}
.orig__t3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
}
.orig__hint, .orig__note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mut);
}
.orig__langues {
  margin: 0;
  padding: 0;
  list-style: none;
}
.orig__langue {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.orig__langue.is-active .orig__langue-n {
  color: var(--acc);
  font-weight: 600;
}
.orig__langue-b {
  width: 100%;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--txt);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.orig__langue-b:hover .orig__langue-n {
  color: var(--acc);
}
.orig__langue-c {
  color: var(--mut);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.orig__pastille {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.orig__pastille--ascendance {
  background: rgba(251, 191, 36, 0.85);
}
.orig__pastille--regionale {
  background: rgba(134, 239, 172, 0.85);
}
.orig__pastille--emprunt {
  background: rgba(125, 211, 252, 0.85);
}
.orig {
  /* ── Les mots du foyer choisi ─────────────────────────────────────────── */
}
.orig__mots {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.orig__liste {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.orig__mot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13.5px;
}
.orig__mot-o {
  color: var(--txt);
  text-decoration: none;
}
.orig__mot-o:hover {
  color: var(--acc);
}
.orig__mot-e {
  color: var(--acc2);
  font-size: 12.5px;
}
.orig__mot-a {
  color: var(--mut);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.orig {
  /* Le trajet du mot : un bouton qui EST son propre libellé — « grec → latin →
     français ». Il tient sur toute la largeur, sous le mot, parce qu'une chaîne
     de trois escales ne rentre pas au bout d'une ligne. */
}
.orig__mot-t {
  flex: 1 0 100%;
  margin: 2px 0 4px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--mut);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.orig__mot-t:hover {
  color: var(--acc);
}
.orig__mot.is-active .orig__mot-o {
  color: var(--acc);
  font-weight: 600;
}
.orig__mot.is-active .orig__mot-t {
  color: var(--acc);
}
.orig__apart {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  max-width: 78ch;
}

/* ── Table de mixage des langues ──────────────────────────────────────────
   Les pistes sont celles de l'atlas (`atlas-piste`, habillées par sa feuille) :
   rien n'est redéfini ici, sauf deux choses que le lexique ajoute.

   1. Le NOM est un bouton — il ouvre les mots de la langue — là où l'atlas y met
      un span. Il doit s'en distinguer par le curseur et le survol, jamais par
      l'aspect : deux pistes qui n'ont pas la même allure d'une page à l'autre
      donneraient à croire que ce sont deux composants différents.
   2. Un LISERÉ de catégorie, aux couleurs des arcs : ambre pour ce dont le
      français descend, vert pour les langues d'à côté, bleu pour les emprunts.
      Sans lui, la table de mixage perd l'information que la carte donne. */
.atlas-piste .atlas-piste__nom {
  /* Remise à plat du bouton : il doit rendre exactement comme le span. */
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.atlas-piste .atlas-piste__nom:hover {
  color: var(--acc);
}
.atlas-piste.orig__piste--ascendance {
  border-left: 2px solid rgba(251, 191, 36, 0.55);
  padding-left: 6px;
}
.atlas-piste.orig__piste--regionale {
  border-left: 2px solid rgba(134, 239, 172, 0.55);
  padding-left: 6px;
}
.atlas-piste.orig__piste--emprunt {
  border-left: 2px solid rgba(125, 211, 252, 0.55);
  padding-left: 6px;
}
.atlas-piste {
  /* La langue dont les mots sont ouverts : même marque que la piste active de
     l'atlas, pour que l'œil n'ait pas à réapprendre. */
}
.atlas-piste.atlas-piste--active .atlas-piste__nom {
  color: var(--acc);
  font-weight: 600;
}
.atlas-piste.atlas-piste--muette {
  opacity: 0.45;
}

/*# sourceMappingURL=origines.css.map*/