/* Libellés en capitales espacées, données alignées libellé / valeur, filets d'1 px. */

.c-journal { margin-top: var(--space-6); border-top: 1px solid var(--alert-line); padding-top: var(--space-4); }
.c-journal__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.c-journal__head h3 { font-size: 1.1rem; line-height: 1.4; }
.c-journal__count, .c-journal__time { color: var(--fg-3); font-size: var(--text-label); }
.c-journal__note { margin-block: var(--space-3) var(--space-4); color: var(--fg-2); }
.c-journal__list { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.c-journal__event { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; width: 100%; min-height: 56px; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--line); padding: var(--space-2); text-align: left; }
.c-journal__event > :nth-child(2) { border-left: 1px solid var(--line-strong); padding-left: var(--space-3); }
.c-journal__event[aria-pressed="true"] { box-shadow: inset 2px 0 var(--alert); }
.c-journal__event:hover, .c-journal__event:focus-visible { border-color: var(--alert); }
.c-journal__verdict { text-align: right; font-size: var(--text-label); color: var(--fg-2); }
.c-journal__event[data-verdict="divergence"] .c-journal__verdict { color: var(--alert); }
.c-journal__detail { padding: var(--space-4) 0 var(--space-4) var(--space-3); border-left: 1px solid var(--alert); margin-top: var(--space-4); color: var(--fg-2); }
.c-journal__simulate { min-height: 44px; padding-block: var(--space-2); border-bottom: 1px solid var(--line-strong); }
.c-journal__simulate:hover { border-color: var(--alert); }

.c-simulation { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100svh; max-height: none; padding: 0; border: 0; background: var(--bg); color: var(--fg); overflow-y: auto; overscroll-behavior: contain; }
.c-simulation[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.c-simulation::backdrop { background: var(--bg); }
.c-simulation__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); padding: var(--space-4) var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg); z-index: 2; }
.c-simulation__head h2 { font-size: clamp(1.5rem, 3vw, 2.8rem); margin-top: var(--space-3); }
.c-simulation__close { min-height: 44px; flex-shrink: 0; border-bottom: 1px solid var(--line-strong); }
.c-simulation__close span { margin-left: var(--space-3); color: var(--alert); }
.c-simulation__body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-5); padding: var(--space-4) var(--gutter); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.c-simulation__scene { display: grid; grid-template-rows: auto minmax(240px, 1fr) auto auto; min-width: 0; min-height: 0; }
.c-simulation__plot { width: 100%; height: 100%; min-height: 180px; }
.c-simulation__annotation, .c-simulation__number { fill: var(--fg-3); font-size: 12px; letter-spacing: 1.5px; }
.c-simulation__summary { color: var(--fg-2); font-size: var(--text-data); padding-top: var(--space-3); }
.c-simulation__readout { align-self: center; min-width: 0; }
.c-simulation__label { text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--text-label); color: var(--fg-3); margin-bottom: var(--space-3); }
.c-simulation__branches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.c-simulation__branch { position: relative; display: grid; gap: 0; min-height: 56px; border: 1px solid var(--line-strong); padding: var(--space-2) var(--space-3); font-size: var(--text-data); line-height: 1.4; text-align: left; overflow: hidden; }
.c-simulation__branch[data-status="Divergente"] { color: var(--alert); }
.c-simulation__branch[data-status="Effacée"] { color: var(--fg-3); border-style: dashed; }
.c-simulation__branch[aria-pressed="true"] { border-color: var(--fg); }
.c-simulation__branch:hover { border-color: var(--alert); }
.c-simulation__detail { color: var(--fg-2); border-top: 1px solid var(--alert-line); padding-top: var(--space-3); margin-top: var(--space-3); font-size: var(--text-data); line-height: 1.45; }
.c-simulation__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-5); padding: var(--space-4) var(--gutter); border-top: 1px solid var(--line); }
.c-simulation__control { margin-top: var(--space-4); }
.c-simulation__control label { display: flex; justify-content: space-between; gap: var(--space-3); }
.c-simulation__control output { color: var(--alert); }
.c-simulation__control input { width: 100%; margin: var(--space-2) 0 0; min-height: 44px; accent-color: var(--alert); cursor: pointer; }
.c-simulation__scale { display: flex; justify-content: space-between; color: var(--fg-3); font-size: var(--text-label); }
.c-simulation__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); grid-column: 2; grid-row: 1; }
.c-simulation__actions button { min-height: 44px; border-bottom: 1px solid var(--line-strong); }
.c-simulation__actions button[aria-pressed="true"] { border-color: var(--alert); }
.c-simulation__note { grid-column: 1; grid-row: 1; align-self: center; color: var(--fg-3); font-size: var(--text-data); }

.c-simulation__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); }
.c-simulation__metrics dt { font-size: var(--text-label); color: var(--fg-3); }
.c-simulation__metrics dd { margin: var(--space-2) 0 0; font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 300; }
.c-simulation__metrics > :first-child dd { color: var(--alert); }
.c-simulation__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.c-simulation__station { font-size: 13px; text-anchor: middle; letter-spacing: 1px; }
.c-simulation__apply { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); width: 100%; min-height: 52px; border: 1px solid var(--alert); padding: var(--space-3); color: var(--alert); font-weight: 500; }
.c-simulation__apply:hover { background: var(--alert); color: var(--bg); }
.c-simulation__apply:disabled { border-color: var(--line-strong); color: var(--fg-3); cursor: default; background: transparent; }
.c-simulation__apply-note { color: var(--fg-3); font-size: var(--text-label); line-height: 1.45; margin: var(--space-2) 0 var(--space-4); }
.c-simulation__weight { font-size: var(--text-label); color: var(--fg-3); }
.c-simulation__weight-bar { position: absolute; bottom: 0; left: 0; width: calc(var(--weight, 0) * 100%); height: 2px; background: var(--alert); }
.c-simulation__itinerary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); margin-top: var(--space-3); font-size: var(--text-data); }
.c-simulation__itinerary li { border-left: 1px solid var(--alert-line); padding-left: var(--space-2); }
.c-simulation__comparison { margin-top: var(--space-3); color: var(--fg-3); font-size: var(--text-label); line-height: 1.45; }
.c-model { padding: var(--space-4); margin-bottom: var(--space-5); border: 1px solid var(--alert-line); border-left: 2px solid var(--alert); }
.c-model__label { display: grid; gap: var(--space-2); color: var(--alert); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--track-label); }
.c-model__label span { color: var(--fg); font-size: 1.125rem; text-transform: none; letter-spacing: normal; }
.c-model__note { margin-top: var(--space-3); color: var(--fg-2); }
.c-model__route { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-block: var(--space-4); font-size: var(--text-data); }
.c-model__route li::after { content: "→"; padding-left: var(--space-3); color: var(--fg-3); }
.c-model__route li:last-child::after { content: none; }
.c-model__route [data-read="true"] { color: var(--fg-3); }
.c-model__route [data-next="true"] { color: var(--alert); }
.c-model__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.c-model__actions a, .c-model__actions button { min-height: 44px; display: inline-flex; align-items: center; }
.c-model__actions button { border-bottom: 1px solid var(--line-strong); font-size: var(--text-data); }
.c-nav__link[data-proposed="true"] { box-shadow: inset 0 2px var(--alert); }
.c-nav__link[data-proposed="true"]::before { content: ""; display: inline-block; width: 0.3rem; height: 0.3rem; margin-right: var(--space-2); background: var(--alert); }

@media (max-width: 1023.98px) {
  .c-simulation[open] { display: block; }
  .c-simulation__head { position: sticky; top: 0; padding-block: var(--space-3); }
  .c-simulation__head .c-overline { display: grid; gap: var(--space-2); }
  .c-simulation__head .c-overline__meta { margin-left: 0; padding-left: 0; }
  .c-simulation__head .c-overline__meta::before { display: none; }
  .c-simulation__body { grid-template-columns: 1fr; gap: var(--space-4); }
  .c-simulation__plot { height: clamp(180px, 34svh, 340px); }
  .c-simulation__scene { grid-template-rows: auto auto auto auto; }
  .c-simulation__branches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c-simulation__branch { font-size: 0.875rem; padding-inline: var(--space-2); }
  .c-simulation__detail { margin-top: var(--space-3); padding-top: var(--space-3); }
  .c-simulation__foot { grid-template-columns: 1fr; gap: var(--space-3); }
  .c-simulation__actions { justify-content: space-between; grid-column: 1; grid-row: 1; }
  .c-simulation__note { grid-row: 2; }
  .c-journal__event { grid-template-columns: 3.5rem 1fr 3.5rem; gap: var(--space-1); padding-inline: var(--space-1); }
  .c-journal__event > :nth-child(2) { padding-left: var(--space-2); }
}

@media (max-width: 479.98px) {
  .c-simulation__controls { grid-template-columns: 1fr; gap: 0; }
  .c-simulation__branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-simulation__metrics { gap: var(--space-2); }
  .c-simulation__metrics dt { font-size: 0.75rem; }
  .c-model { padding: var(--space-3); }
}

@media (min-width: 768px) and (max-height: 650px) {
  .c-simulation[open] { grid-template-rows: auto minmax(340px, 1fr) auto; }
}

.c-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9em;
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-brand__alias {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: none;
}

.c-brand__cursor {
  color: var(--alert);
}

.c-brand__sys {
  color: var(--fg-3);
}

.c-brand__sys::before {
  content: "·";
  margin-right: 0.9em;
}

.c-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.c-nav__list {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
}

.c-nav__link,
.c-nav__themes {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding-block: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}

.c-nav__i {
  color: var(--fg-3);
}

.c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.28em;
  bottom: 0;
  height: 1px;
  background: var(--alert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

.c-nav__link:hover,
.c-nav__link[aria-current],
.c-nav__themes:hover {
  color: var(--fg);
}

.c-nav__link[aria-current]::after {
  transform: scaleX(1);
}

.c-nav__themes {
  padding-left: var(--space-4);
  border-left: 1px solid var(--line-strong);
}

.c-menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.75rem;
  place-items: center;
}

.c-menu-toggle__bars,
.c-menu-toggle__bars::before {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--fg);
  transition: transform var(--dur-fast) var(--ease);
}

.c-menu-toggle__bars {
  position: relative;
  transform: translateY(-3px);
}

.c-menu-toggle__bars::before {
  content: "";
  position: absolute;
  top: 6px;
}

.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bars {
  transform: rotate(45deg);
}

.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bars::before {
  transform: translateY(-6px) rotate(-90deg);
}

/* Surtitre : identifiant, filet, catégorie. */
.c-music-title { font-size: var(--title-2); line-height: 1.2; margin-bottom: var(--space-3); }
.c-music-file .c-file__label { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .c-music-file .c-file__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

.c-overline > :first-child {
  color: var(--alert);
}

.c-overline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-bottom: var(--space-4);
  color: var(--fg-3);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-overline__meta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.c-overline__meta::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--line-strong);
}

.c-subject-name {
  margin-bottom: var(--space-5);
  font-size: var(--title-1);
  letter-spacing: 0.12em;
}

.c-section-head {
  margin-bottom: var(--space-5);
}

.c-section-title {
  font-size: var(--title-2);
}

.c-reading {
  position: fixed;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.c-reading__rail,
.c-reading__trace,
.c-reading__origin {
  fill: none;
  stroke-width: 1;
}

.c-reading__rail { stroke: var(--line-strong); }
.c-reading__trace,
.c-reading__origin { stroke: var(--alert); }
.c-reading__packet { fill: var(--alert); }

.c-reading-text { display: inline-block; }

.c-ring-scenes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.c-ring-scenes__fg,
.c-ring-scenes__alert { fill: none; stroke: var(--fg); stroke-linejoin: round; }
.c-ring-scenes__alert { stroke: var(--alert); }
.c-ring-scenes__label { fill: var(--fg); font: 400 10px var(--font); }
.c-ring-scenes__signature { fill: var(--fg); font-family: var(--font); font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.c-ring-scenes__year { fill: var(--fg); font: 400 11px var(--font); }
.c-ring-scenes__year.is-selected { fill: var(--alert); }
.c-ring-scenes__backdrop { fill: var(--bg); }

.c-job__company,
.c-section-title,
.c-subject-name { position: relative; }

.c-subject__name { position: relative; }

.c-lede {
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--fg-2);
}

.c-subhead {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--fg-3);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
}

/* Dossier : libellé à gauche, valeur à droite, un filet par rangée. */
.c-file {
  border-top: 1px solid var(--line);
}

.c-file__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.c-file--wide .c-file__row {
  grid-template-columns: 12rem minmax(0, 1fr);
}

.c-file__label {
  padding-top: 0.15em;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-file__value {
  font-size: var(--text-data);
  font-weight: 400;
  line-height: 1.5;
}

.c-file__strong {
  display: block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-file__note {
  display: block;
  margin-top: 0.2rem;
  color: var(--fg-2);
  font-weight: 300;
}

.c-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0;
}

.c-items li:not(:last-child)::after {
  content: "·";
  margin-inline: 0.6em;
  color: var(--fg-3);
}

/* Déclarations citées telles quelles, comme une transcription. */
.c-statement {
  display: grid;
  gap: var(--space-2);
  max-width: 36rem;
}

.c-statement__label {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-statement__text {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--line-strong);
  color: var(--fg-2);
}

.c-statement__text p::before {
  content: "« ";
}

.c-statement__text p::after {
  content: " »";
}

.c-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  margin-top: var(--space-6);
  padding-block: var(--space-2);
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-scroll-cue::before {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: var(--alert);
  transform-origin: top;
}

.c-scroll-cue:hover {
  color: var(--fg);
}

/* Trajectoire : axe des années, un couloir par poste. */
.c-timeline {
  position: relative;
  height: 5.5rem;
  margin: var(--space-2) 0.75rem var(--space-6);
}

.c-timeline__axis {
  position: absolute;
  inset: auto 0 1.75rem;
  height: 1px;
  background: var(--line-strong);
}

.c-timeline__tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 6px;
  background: var(--line-strong);
}

.c-timeline__year {
  position: absolute;
  bottom: 0;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.c-timeline__span {
  position: absolute;
  bottom: calc(2.25rem + var(--lane) * 0.9rem);
  height: 1px;
  background: var(--fg-2);
}

.c-timeline__span::before,
.c-timeline__span::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  background: var(--bg);
}

.c-timeline__span::before {
  left: -2px;
}

.c-timeline__span::after {
  right: -2px;
}

.c-timeline__span.is-current {
  background: var(--alert);
}

.c-timeline__span.is-current::after {
  border-color: var(--alert);
  background: var(--alert);
}

.c-jobs {
  display: grid;
  gap: var(--space-6);
}

.c-job {
  display: grid;
  gap: var(--space-3);
}

.c-job__index {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
}

.c-job__company {
  margin-bottom: var(--space-2);
  font-size: 1.25rem;
  font-weight: 300;
}

.c-job__intro {
  margin-top: var(--space-2);
  color: var(--fg-2);
}

.c-job__details {
  display: grid;
  gap: var(--space-2);
}

.c-job__details li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  color: var(--fg-2);
}

.c-job__n {
  padding-top: 0.2em;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
}

/* Sujets : une rangée fine par site, comme une liste de profils. */
.c-subjects {
  border-top: 1px solid var(--line);
}

.c-subject {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 1.5rem;
  align-items: baseline;
  gap: var(--space-3);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur-base) var(--ease-out);
}

.c-subject::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--alert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.c-subject__index {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
}

.c-subject__name {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.c-subject__category {
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-align: right;
}

.c-subject__open {
  color: var(--fg-3);
  text-align: right;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease);
}

.c-subject:hover,
.c-subject:focus-visible {
  padding-left: var(--space-3);
}

.c-subject:hover::before,
.c-subject:focus-visible::before {
  transform: scaleX(1);
}

.c-subject:hover .c-subject__open,
.c-subject:focus-visible .c-subject__open {
  color: var(--alert);
  transform: translateX(0.25rem);
}

.c-subject:focus-visible {
  outline-offset: 2px;
}

/* Divergences. */
.c-divergences {
  display: grid;
  gap: var(--space-5);
}

.c-divergence {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.c-divergence__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.c-divergence__index {
  min-width: 3rem;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
}

.c-divergence__label {
  font-size: 1.0625rem;
  font-weight: 400;
}

/* Le libellé ouvre l'écran de divergence : carré vide qui se remplit de rouge au survol et au focus. */
.c-divergence__open {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--space-3);
  min-height: 2.75rem;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.c-divergence__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--fg-3);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  transition: color var(--dur-fast) var(--ease);
}

.c-divergence__cue::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.c-divergence__open:hover .c-divergence__cue,
.c-divergence__open:focus-visible .c-divergence__cue {
  color: var(--fg);
}

.c-divergence__open:hover .c-divergence__cue::before,
.c-divergence__open:focus-visible .c-divergence__cue::before {
  border-color: var(--alert);
  background: var(--alert);
}

.c-divergence__body {
  display: grid;
  gap: var(--space-4);
  padding-left: calc(3rem + var(--space-3));
  color: var(--fg-2);
}

.c-divergence.is-anomaly {
  border-top-color: var(--alert-line);
}

.c-anomaly {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-left: auto;
  color: var(--alert);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-anomaly::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.c-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  column-gap: var(--space-3);
  border-top: 1px solid var(--line);
}

.c-places li {
  border-bottom: 1px solid var(--line);
}

/* Relevé spatial : les commandes encadrent la scène, sans couvrir la maquette. */
.c-travel {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: var(--space-5) var(--gutter) var(--space-4);
  border: 0;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  color-scheme: dark;
}
.c-travel[open] { display: flex; flex-direction: column; }
.c-travel::backdrop { background: var(--bg); }
.c-travel__canvas, .c-travel__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c-travel__canvas { touch-action: none; cursor: grab; }
.c-travel__canvas:active { cursor: grabbing; }
.c-travel__canvas:focus-visible { outline-offset: -5px; }
.c-travel__head, .c-travel__foot { position: relative; z-index: 3; flex-shrink: 0; }
.c-travel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.c-travel__overline, .c-travel__coordinates, .c-travel__phase, .c-travel__caption, .c-travel__return {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.c-travel__overline { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--fg-3); }
.c-travel__overline span:first-child { color: var(--alert); }
.c-travel__title { font-size: clamp(2rem, 5vw, 5rem); margin-block: var(--space-2); letter-spacing: 0.09em; }
.c-travel__coordinates { color: var(--fg-2); letter-spacing: 0.08em; }
.c-travel__return { min-height: 44px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.c-travel__return span { padding-left: var(--space-3); color: var(--alert); }
.c-travel__viewport { flex: 1; min-height: 0; position: relative; pointer-events: none; }
.c-travel__phase { position: absolute; left: 0; top: var(--space-4); color: var(--fg-3); z-index: 1; }
.c-travel__phase::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--alert); margin-right: var(--space-2); vertical-align: middle; }
.c-travel__skip { position: absolute; right: 0; top: var(--space-4); min-height: 44px; pointer-events: auto; z-index: 1; color: var(--fg-2); font-size: var(--text-label); border-bottom: 1px solid var(--line); }
.c-travel__foot { border-top: 1px solid var(--line-strong); background: var(--bg); }
.c-travel__foot::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: calc(var(--flight, 0) * 100%); background: var(--alert); }
.c-travel__caption { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); padding-block: var(--space-3); color: var(--fg-3); }
.c-travel__landmark { font-size: var(--text-body); color: var(--fg); letter-spacing: 0.1em; margin-top: var(--space-1); }
.c-travel__simulation { font-size: var(--text-label); letter-spacing: 0.06em; margin-top: var(--space-1); color: var(--fg-2); }
.c-travel__hint { font-size: var(--text-label); letter-spacing: 0.08em; }
.c-travel__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.c-travel__destinations { display: flex; align-items: center; min-width: 0; }
.c-travel__controls button { min-width: 44px; min-height: 44px; padding-inline: var(--space-2); border-bottom: 1px solid var(--line-strong); font-size: var(--text-label); }
.c-travel__controls button:hover, .c-travel__return:hover, .c-travel__skip:hover { color: var(--alert); border-color: var(--alert); }
.c-travel__controls button[aria-pressed="true"] { color: var(--alert); }
.c-travel__index { display: flex; align-items: center; gap: var(--space-3); letter-spacing: 0.12em; text-transform: uppercase; }
.c-travel__index svg { fill: none; stroke: var(--fg-3); stroke-width: 0.6; }
.c-travel__index svg circle { fill: var(--alert); stroke: var(--alert); }
.c-travel__index-count { color: var(--alert); font-variant-numeric: tabular-nums; }
.c-travel__camera { display: flex; align-items: center; gap: var(--space-2); }
.c-travel__camera label { font-size: var(--text-label); color: var(--fg-2); }
.c-travel__camera input { width: clamp(5rem, 9vw, 9rem); min-width: 0; margin: 0; accent-color: var(--alert); min-height: 44px; }
.c-travel__mesh { fill: var(--bg); stroke: var(--fg-3); stroke-width: 0.55; }
.c-travel__mesh.is-landmark { stroke: var(--alert); stroke-width: 0.9; }

.c-hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c-hud__wires { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(calc(var(--hud-top) + 40px) 0 var(--hud-bottom) 0); }
.c-hud__orbit { fill: none; stroke: var(--fg); stroke-width: 0.6; opacity: 0.18; }
.c-hud__orbit:nth-child(2) { stroke: var(--alert); opacity: 0.3; }
.c-hud__callout { fill: none; stroke: var(--fg-3); stroke-width: 0.7; stroke-dasharray: 2 4; }
.c-hud__anchor { fill: var(--alert); }
.c-hud__column { fill: color-mix(in srgb, var(--bg) 85%, var(--alert)); stroke: var(--alert); stroke-width: 0.7; opacity: 0.65; }
.c-hud__stream { fill: var(--fg); font-size: 10px; font-variant-numeric: tabular-nums; }
.c-hud__panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 210px;
  height: 166px;
  padding: 12px;
  pointer-events: auto;
  text-align: left;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  border-left: 2px solid var(--alert-line);
  color: var(--fg);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  transform-origin: center;
}
.c-hud__panel:hover, .c-hud__panel:focus-visible, .c-hud__panel[aria-expanded="true"] { border-color: var(--alert); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.c-hud__head { display: flex; justify-content: space-between; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.12em; }
.c-hud__code { color: var(--alert); font-size: 12px; letter-spacing: 0.04em; }
.c-hud__label { display: block; font-size: 13px; color: var(--fg-2); margin-top: 5px; }
.c-hud__chart { display: block; width: 100%; height: 76px; overflow: visible; margin-block: 6px; }
.c-hud__grid { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.c-hud__band { fill: var(--fg); fill-opacity: 0.07; stroke: none; }
.c-hud__trend, .c-hud__forecast { fill: none; stroke: var(--fg); stroke-width: 1.3; }
.c-hud__forecast { stroke: var(--alert); stroke-dasharray: 3 3; }
.c-hud__node { fill: var(--bg); stroke: var(--alert); stroke-width: 1; }
.c-hud__track { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.c-hud__donut { fill: none; stroke: var(--alert); stroke-width: 2; }
.c-hud__bar { fill: color-mix(in srgb, var(--bg) 80%, var(--fg)); stroke: var(--fg-2); stroke-width: 0.8; }
.c-hud__matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 9px; margin-block: 10px; padding: 7px 8px; border-inline: 1px solid var(--fg-3); height: 72px; align-content: center; text-align: right; }
.c-hud__matrix span { font-family: var(--font); font-size: 14px; }
.c-hud__output { display: block; color: var(--fg-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-hud__panel[data-held="true"]::after { content: ""; position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; background: var(--alert); }
.c-hud[data-compact="true"] .c-hud__panel { width: var(--hud-card-width); height: 44px; padding: 8px; }
.c-hud[data-compact="true"] .c-hud__label, .c-hud[data-compact="true"] .c-hud__chart, .c-hud[data-compact="true"] .c-hud__matrix, .c-hud[data-compact="true"] .c-hud__output, .c-hud[data-compact="true"] .c-hud__code { display: none; }
.c-hud-detail {
  position: absolute;
  z-index: 4;
  right: var(--hud-gutter, 16px);
  bottom: calc(var(--hud-bottom, 160px) + 12px);
  width: min(380px, calc(100% - 32px));
  max-height: calc(var(--hud-height, 450px) - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  border: 1px solid var(--alert-line);
  border-top-color: var(--alert);
  background: var(--bg);
}
.c-hud-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--line-strong); padding-bottom: var(--space-2); }
.c-hud-detail__head h3 { font-size: var(--text-data); font-weight: 400; }
.c-hud-detail__head button { min-height: 44px; font-size: var(--text-label); color: var(--fg-2); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.c-hud-detail__stamp { font-size: var(--text-label); color: var(--alert); margin-block: var(--space-3); }
.c-hud-detail .c-hud__chart { height: 100px; }
.c-hud-detail__file { display: grid; gap: var(--space-2); }
.c-hud-detail__file div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-data); }
.c-hud-detail__file dt { color: var(--fg-2); }
.c-hud-detail__file dd { color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.c-hud-detail__note { font-size: var(--text-data); color: var(--fg-2); margin-top: var(--space-3); }
@media (max-width: 599.98px) {
  .c-hud__stream { font-size: 7px; }
  .c-hud__panel { width: 140px; height: 132px; padding: 9px; background: color-mix(in srgb, var(--bg) 78%, transparent); }
  .c-hud__head { font-size: 13px; letter-spacing: 0.06em; }
  .c-hud__code { font-size: 11px; }
  .c-hud__label { font-size: 12px; margin-top: 4px; }
  .c-hud__chart { height: 51px; margin-block: 7px; }
  .c-hud__matrix { height: 52px; gap: 4px; padding: 4px; margin-block: 8px; }
  .c-hud__matrix span { font-size: 12px; }
  .c-hud__output { font-size: 12px; }
  .c-hud-detail { right: 16px; padding: var(--space-3); }
  .c-travel:has(.c-hud-detail:not([hidden])) .c-hud__panel { visibility: hidden; }
}
@media (max-height: 500px) {
  .c-hud-detail { bottom: 16px; max-height: calc(100% - 32px); }
}
@media (max-width: 599.98px) {
  .c-travel { padding: var(--space-3); }
  .c-travel__head { flex-direction: column-reverse; gap: var(--space-3); }
  .c-travel__return { align-self: flex-end; }
  .c-travel__title { font-size: clamp(1.6rem, 8vw, 2.5rem); }
  .c-travel__overline { gap: var(--space-3); }
  .c-travel__coordinates { font-size: 0.75rem; }
  .c-travel__caption { padding-block: var(--space-2); }
  .c-travel__hint { display: none; }
  .c-travel__controls { gap: var(--space-2); }
  .c-travel__destinations { width: 100%; }
  .c-travel__index { width: 100%; }
  .c-travel__index-count { margin-left: auto; }
  .c-travel__camera { width: 100%; flex-wrap: wrap; gap: var(--space-1); }
  .c-travel__camera input { flex: 1; width: 3rem; }
  .c-travel__camera label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .c-travel__camera [data-travel-reset] { margin-left: auto; }
  .c-travel__phase { top: var(--space-2); }
  .c-travel__skip { top: var(--space-2); }
}
@media (max-height: 500px) and (min-width: 600px) {
  .c-travel { padding-block: var(--space-2); }
  .c-travel__title { font-size: 1.75rem; }
  .c-travel__caption { padding-block: var(--space-1); }
  .c-travel__hint { display: none; }
}

/* Index de coordonnées : le dialogue natif garde le relevé et son horloge en suspens. */
.c-atlas {
  position: fixed; inset: 0; width: min(1280px, calc(100% - 2 * var(--gutter)));
  max-width: none; height: min(780px, calc(100svh - 2 * var(--space-5))); max-height: none;
  margin: auto; padding: var(--space-5); border: 1px solid var(--line-strong);
  color: var(--fg); background: var(--bg); overflow: hidden;
}
.c-atlas[open] { display: flex; flex-direction: column; }
.c-atlas::backdrop { background: color-mix(in srgb, var(--bg) 93%, transparent); }
.c-atlas__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--alert); }
.c-atlas__overline { color: var(--alert); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.16em; }
.c-atlas__head h3 { margin-top: var(--space-2); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; }
.c-atlas__head button { min-height: 44px; flex-shrink: 0; font-size: var(--text-label); border-bottom: 1px solid var(--line-strong); }
.c-atlas__head button span { color: var(--alert); margin-left: var(--space-3); font-size: 1.3rem; }
.c-atlas__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-5); flex: 1; min-height: 0; padding-block: var(--space-4); }
.c-atlas__plot { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.c-atlas__legend, .c-atlas__foot, .c-atlas__note { color: var(--fg-3); font-size: var(--text-label); letter-spacing: 0.1em; }
.c-atlas__legend { display: flex; justify-content: space-between; text-transform: uppercase; }
.c-atlas__legend span { color: var(--alert); }
.c-atlas__map { width: 100%; flex: 1; min-height: 0; max-height: 330px; margin-block: var(--space-3); overflow: visible; }
.c-atlas__grid { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.c-atlas__axis { fill: var(--fg-3); font-size: 10px; letter-spacing: 1px; }
.c-atlas__point { fill: var(--fg-3); }
.c-atlas__point text { font-size: 10px; }
.c-atlas__leader { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.c-atlas__point[data-active="true"] { fill: var(--alert); }
.c-atlas__cross { fill: none; stroke: var(--alert); stroke-width: 0.7; opacity: 0.6; }
.c-atlas__link { fill: none; stroke: var(--fg); stroke-width: 0.8; stroke-dasharray: 3 5; opacity: 0.65; }
.c-atlas__readout { border-left: 1px solid var(--alert); padding-left: var(--space-3); }
.c-atlas__readout p:first-child { font-size: clamp(1.5rem, 2.5vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.08em; }
.c-atlas__readout p:nth-child(2) { color: var(--alert); font-size: var(--text-label); margin-block: var(--space-2); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.c-atlas__readout p:last-child { color: var(--fg-2); font-size: var(--text-data); }
.c-atlas__note { margin-top: var(--space-4); }
.c-atlas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg); }
.c-atlas__destination { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: var(--space-2); text-align: left; min-height: 62px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.c-atlas__destination:nth-child(odd) { border-right: 1px solid var(--line); }
.c-atlas__number { grid-row: span 2; color: var(--fg-3); font-size: 11px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.c-atlas__city { font-size: var(--text-body); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.c-atlas__country { color: var(--fg-3); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.c-atlas__destination[aria-current="true"] .c-atlas__number, .c-atlas__destination[aria-current="true"] .c-atlas__city { color: var(--alert); }
.c-atlas__destination[aria-current="true"] { border-bottom-color: var(--alert); }
.c-atlas__destination:hover, .c-atlas__destination:focus-visible { background: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.c-atlas__destination:focus-visible { outline-offset: -3px; }
.c-atlas__foot { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.c-transfer { position: absolute; left: 0; bottom: var(--space-4); width: min(280px, 75%); padding: var(--space-3); border-left: 1px solid var(--alert); background: color-mix(in srgb, var(--bg) 90%, transparent); }
.c-transfer__route, .c-transfer__readout, .c-transfer__note { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.c-transfer__route { color: var(--fg); }
.c-transfer__value { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 200; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--alert); }
.c-transfer__value small { margin-left: var(--space-2); font-size: var(--text-label); color: var(--fg-3); }
.c-transfer__track { height: 2px; background: var(--line); margin-block: var(--space-2); }
.c-transfer__track span { display: block; height: 100%; background: var(--alert); transform: scaleX(0); transform-origin: left; }
.c-transfer__readout { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.c-transfer__note { color: var(--fg-3); margin-top: var(--space-2); }
@media (max-width: 799.98px) {
  .c-atlas { width: 100%; height: 100svh; margin: 0; padding: var(--space-3); border: 0; }
  .c-atlas__head { padding-bottom: var(--space-3); }
  .c-atlas__head h3 { font-size: 1.6rem; }
  .c-atlas__overline { font-size: 10px; letter-spacing: 0.08em; }
  .c-atlas__head button { font-size: 11px; }
  .c-atlas__head button span { margin-left: var(--space-2); }
  .c-atlas__body { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-3); }
  .c-atlas__plot { position: relative; min-height: 120px; height: 24svh; max-height: 210px; flex-shrink: 0; }
  .c-atlas__map { width: 55%; margin-left: auto; max-height: 100%; margin-top: 0; opacity: 0.7; }
  .c-atlas__legend { font-size: 10px; }
  .c-atlas__readout { position: absolute; left: 0; top: 30px; max-width: 58%; background: var(--bg); padding-left: var(--space-2); }
  .c-atlas__readout p:first-child { font-size: 1.25rem; }
  .c-atlas__readout p:nth-child(2) { font-size: 10px; letter-spacing: 0; }
  .c-atlas__readout p:last-child { font-size: 12px; }
  .c-atlas__note { display: none; }
  .c-atlas__list { flex: 1; min-height: 0; }
  .c-atlas__destination { min-height: 56px; padding-block: 8px; line-height: 1.35; }
  .c-atlas__foot { font-size: 10px; letter-spacing: 0.03em; }
  .c-transfer { width: 210px; bottom: var(--space-2); padding: var(--space-2); }
}
@media (max-height: 550px) {
  .c-atlas { height: 100svh; padding: var(--space-3); }
  .c-atlas__head { padding-bottom: var(--space-2); }
  .c-atlas__head h3 { font-size: 1.3rem; }
  .c-atlas__plot { min-height: 0; }
  .c-atlas__note, .c-atlas__map, .c-atlas__foot { display: none; }
  .c-atlas__body { display: grid; grid-template-columns: 1fr 1.5fr; }
  .c-atlas__readout { position: static; max-width: none; margin-top: var(--space-3); }
  .c-transfer { padding: var(--space-2); bottom: 0; }
  .c-transfer__value { font-size: 1.5rem; }
  .c-transfer__note { display: none; }
}

/* Lieu : survol et focus orientent le globe, clic ouvre le relevé spatial. */
.c-places__item {
  display: flex;
  align-items: center;
  gap: var(--space-2) 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding-right: var(--space-1);
  color: var(--fg);
  font-size: var(--text-data);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.c-places__item::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--alert);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.c-places__item:hover::after,
.c-places__item:focus-visible::after {
  opacity: 1;
}

.c-places__item:focus-visible {
  outline-offset: -1px;
}

.c-places__n {
  color: var(--fg-3);
  font-size: var(--text-label);
}

/* Canal. */
.c-channels {
  border-top: 1px solid var(--line);
}

.c-channel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.c-channel__label {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-channel .c-link {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Conclusion du système : la trajectoire se termine sur un nœud rouge, le canal principal suit. Pas de padding :
   la couche de décodage couvre la boîte entière. */
.c-conclusion {
  position: relative;
  max-width: 30rem;
  margin: calc(var(--space-6) + var(--space-3)) 0 var(--space-5);
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.c-conclusion::before,
.c-conclusion::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--space-5));
}

.c-conclusion::before {
  right: 0;
  height: 1px;
  background: var(--line-strong);
}

.c-conclusion::after {
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: -0.1875rem;
  background: var(--alert);
}

.c-channel--primary {
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--space-3) var(--space-4);
}

.c-channel--primary .c-link {
  align-items: center;
  min-height: 2.75rem;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  border-bottom-color: var(--fg);
}

.c-channel--primary .c-link__arrow {
  color: var(--alert);
}

/* Dossier du sujet 0002 : même fiche que le sujet 0001, ouvert par un filet rouge comme la console. */
.c-visitor {
  border-top-color: var(--alert-line);
}

.c-visitor .c-subject-name {
  margin-bottom: 0;
}

.c-visitor-note {
  margin-bottom: var(--space-5);
  padding: 0.2rem 0 0.2rem var(--space-3);
  border-left: 1px solid var(--alert);
  color: var(--fg-2);
}

.c-visitor-note__lead {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--fg);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast) var(--ease);
}

.c-link:hover {
  border-color: var(--fg);
}

.c-link__arrow {
  color: var(--fg-3);
}

/* Liens vers le sélecteur et les autres thèmes. */
.c-themes {
  display: grid;
}

.c-theme-link {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.c-theme-link__name {
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-theme-link__tag {
  color: var(--fg-2);
  font-size: 0.875rem;
}

.c-theme-link:hover .c-theme-link__name {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* Orbe : libellé de divergence et état du suivi. */
.c-ring-label {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 0.15rem;
  min-width: 12rem;
  max-width: 17rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.c-ring-label.is-alert .c-ring-label__kind {
  color: var(--alert);
}

.c-ring-label__kind {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-ring-label__name {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.c-ring-label__data {
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Repères orbitaux du globe (Voyages) : latitude, longitude, fuseau estimé, révélés un par un par ring.js. */
.c-ring-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.c-ring-orbit {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 0.1rem;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.c-ring-orbit.is-visible {
  opacity: 1;
}

.c-ring-orbit__label {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-ring-orbit__value {
  display: block;
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
}

.c-orb-status {
  position: absolute;
  left: 0;
  top: var(--space-4);
  display: grid;
  gap: 0.2rem;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Prévision sur le sujet 0002, sous l'anneau et hors de sa boîte : elle ne le chevauche à aucune largeur. Le
   texte est muet (pas d'annonce à chaque défilement) ; le lien ouvre le dossier du visiteur. */
.c-prediction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.c-prediction__target {
  color: var(--fg);
  white-space: nowrap;
}

.c-prediction__target::before {
  content: "·";
  margin-inline: 0.6em;
  color: var(--fg-3);
}

.c-prediction__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease);
}

.c-prediction__link:hover {
  color: var(--fg);
}

.c-prediction__arrow {
  color: var(--fg-3);
}

/* Voile de transition entre pages : blanc puis noir (state.css). Vers un dossier, la phase blanche porte le titre
   de divergence, noir sur blanc, qui s'éteint quand le voile passe au noir. */
.c-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  padding: var(--gutter);
  background: var(--flash);
  opacity: 0;
  pointer-events: none;
}

.c-veil__title {
  max-width: 14em;
  color: var(--neg-fg);
  font-size: clamp(2rem, 1rem + 3vw, 4.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Écran d'amorçage (boot.js) : calque posé par le script seulement, jamais présent sans JavaScript. Au-dessus du
   voile de transition : la première ouverture de la session ne doit jamais laisser voir un éclair blanc dessous.
   Le fond est troué d'une fenêtre transparente (radial-gradient) centrée sur la sphère : la construction de
   l'anneau reste visible pendant l'amorçage au lieu d'être cachée. Les lignes et la barre sont ancrées en bas,
   hors de cette fenêtre, quelle que soit la position de l'anneau (colonne gauche sur ordinateur, orbe en haut
   sur téléphone). --boot-x/--boot-y/--boot-r sont posés en ligne par boot.js (ring.sphere()) ; sans eux, la
   fenêtre a un rayon nul et le fond reste plein (repli sûr si la sphère n'a pas pu être mesurée). La séquence
   compte désormais quinze lignes (au lieu de huit) : `overflow: hidden` laisse les plus anciennes glisser hors du
   cadre par le haut à mesure que de nouvelles arrivent en bas, plutôt que de déborder sur les petits écrans.
   Repères d'angle, balayage et relevé qui défile (`.c-boot__corner`/`__sweep`/`__scan`) sont purement décoratifs
   : le calque entier est `aria-hidden`. */
.c-boot {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-content: end;
  gap: 0.45rem;
  padding: var(--gutter);
  padding-bottom: var(--space-5);
  overflow: hidden;
  /* Un seul calque : au-delà de son dernier repère, un dégradé radial continue indéfiniment dans sa dernière
     couleur, donc la zone hors fenêtre reste pleine sans second calque de `background-color` qui, lui,
     peindrait aussi sous la fenêtre et la boucherait. */
  background: radial-gradient(
    circle var(--boot-r, 0px) at var(--boot-x, 50%) var(--boot-y, 50%),
    transparent 0%,
    transparent 58%,
    var(--bg) 100%
  );
  transition: opacity var(--dur-fast) var(--ease);
}

.c-boot__corner {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--line-strong);
  opacity: 0.6;
}

.c-boot__corner--tl {
  top: var(--gutter);
  left: var(--gutter);
  border-width: 1px 0 0 1px;
}

.c-boot__corner--tr {
  top: var(--gutter);
  right: var(--gutter);
  border-width: 1px 1px 0 0;
}

.c-boot__corner--bl {
  bottom: var(--gutter);
  left: var(--gutter);
  border-width: 0 0 1px 1px;
}

.c-boot__corner--br {
  bottom: var(--gutter);
  right: var(--gutter);
  border-width: 0 1px 1px 0;
}

/* Balayage vertical continu, retiré avec le calque : un filet qui traverse l'écran (state.css, boot-sweep). */
.c-boot__sweep {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alert-line) 20%, var(--fg-3) 50%, var(--alert-line) 80%, transparent);
  opacity: 0.5;
}

/* Relevé qui défile, coin haut droit : mêmes glyphes que le décodage (decode.js), même matière visuelle. */
.c-boot__scan {
  position: absolute;
  top: calc(var(--gutter) + 1.6rem);
  right: var(--gutter);
  max-width: 10rem;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-align: right;
  opacity: 0.6;
}

.c-boot__meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 22rem);
}

.c-boot__pct {
  min-width: 2.8em;
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.c-boot__line {
  max-width: 30rem;
  color: var(--fg-2);
  font-size: var(--text-data);
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.c-boot__line:first-child {
  color: var(--alert);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

.c-boot__line.is-alert {
  color: var(--alert);
}

/* Fausse barre de calibration : son remplissage (is-filling, state.css) dure FORM_MS, posée en ligne par
   boot.js pour ne jamais se désynchroniser de la formation réelle de l'anneau. Dans .c-boot__meter, à côté du
   pourcentage qui compte la même durée. */
.c-boot__bar {
  flex: 1;
  height: 2px;
  background: var(--line);
}

.c-boot__fill {
  width: 0;
  height: 100%;
  background: var(--alert);
  transition-property: width;
  transition-timing-function: linear;
}

/* Écran de divergence (négatif) : sur ordinateur il recouvre la colonne du dossier, à droite de l'anneau ; son
   filet part du bord gauche et prolonge le trait de rappel tracé par ring.js. Fermé : invisible et hors focus. */
.c-negative {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  width: calc(var(--content-w) + 2 * var(--gutter));
  padding: var(--space-5) var(--gutter);
  overflow-y: auto;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base);
}

.c-negative__block {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-width: 36rem;
  margin-block: auto;
}

.c-negative__rule {
  position: relative;
  width: calc(var(--gutter) + 4rem);
  height: 1px;
  margin: 0 0 var(--space-3) calc(-1 * var(--gutter));
  background: var(--fg);
}

.c-negative__rule::after {
  content: "";
  position: absolute;
  right: -0.4375rem;
  top: -0.1875rem;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--alert);
}

.c-negative__kind {
  color: var(--alert);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-negative__title {
  max-width: 100%;
  font-size: clamp(2rem, 1rem + 2.4vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.c-negative__data {
  justify-self: stretch;
  margin-top: var(--space-3);
}

.c-negative__close {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-3);
  padding-inline: 1.25rem;
  border: 1px solid var(--fg);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.c-negative__close:hover {
  border-color: var(--alert);
  color: var(--alert);
}

/* Décodage : texte final transparent mais présent, glyphes par-dessus (decode.js). */
.c-decode {
  position: relative;
}

span.c-decode {
  display: inline-block;
  max-width: 100%;
}

.c-decode__final {
  color: transparent;
}

.c-decode__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Page dossier. */
.c-dossier-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.c-dossier-head__index {
  color: var(--fg-3);
  font-size: clamp(3rem, 2rem + 5vw, 7.5rem);
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: 0.04em;
}

.c-dossier-head__category {
  margin-top: var(--space-3);
  color: var(--fg-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.c-dossier-head__category.is-message {
  max-width: 40rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.c-dossier-texts {
  display: grid;
  gap: var(--space-5);
}

.c-dossier-text__label {
  margin-bottom: var(--space-2);
  color: var(--fg-3);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
}

.c-dossier-text p {
  max-width: 38rem;
  color: var(--fg-2);
  font-size: 1.0625rem;
}

.c-dossier-text--lead p {
  color: var(--fg);
  font-size: 1.25rem;
  font-weight: 300;
}

.c-visit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--fg);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.c-visit:hover {
  border-color: var(--alert);
  color: var(--alert);
}

.c-path {
  margin-top: var(--space-6);
}

.c-path__line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  margin-block: var(--space-4) var(--space-5);
}

.c-path__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.4rem;
  height: 1px;
  background: var(--line-strong);
}

.c-path__node {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding-right: var(--space-3);
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-path__node::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--fg-3);
  border-radius: 50%;
  background: var(--bg);
}

.c-path__node:hover {
  color: var(--fg);
}

.c-path__node[aria-current] {
  color: var(--fg);
}

.c-path__node[aria-current]::before {
  border-color: var(--alert);
  background: var(--alert);
}

.c-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  border-top: 1px solid var(--line);
}

.c-pager__link {
  display: grid;
  gap: 0.2rem;
  padding-block: var(--space-4);
}

.c-pager__link--next {
  text-align: right;
}

.c-pager__dir {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-pager__name {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-pager__link:hover .c-pager__name {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* Anneau focusable : repère rouge dessiné dans le canvas, contour ici. */
.c-ring {
  cursor: crosshair;
  touch-action: pan-y;
}

.c-ring:focus-visible {
  outline: 1px solid var(--alert);
  outline-offset: -1px;
}

.c-orbital { position: absolute; inset: 0; pointer-events: none; }
.c-orbital__controls { position: absolute; left: 8px; bottom: 4px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 16px); background: var(--bg); pointer-events: auto; }
.c-orbital__controls button, .c-orbital__controls select { font: inherit; font-size: var(--text-label); min-height: 44px; padding: 4px 6px; color: var(--fg-2); background: var(--bg); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; }
.c-orbital__controls button:hover, .c-orbital__controls button[aria-pressed="true"] { color: var(--alert); border-color: var(--alert); }
.c-orbital__controls button:disabled { color: var(--fg-3); cursor: default; }
.c-orbital__cadence { display: flex; align-items: center; gap: 4px; font-size: var(--text-label); color: var(--fg-3); }
.c-orbital__phase { color: var(--alert); font-size: var(--text-label); }
.c-orbital__data { position: absolute; right: 14px; bottom: 58px; width: 198px; max-height: calc(100% - 68px); overflow: auto; overflow-x: hidden; overscroll-behavior: contain; pointer-events: auto; padding: 12px; border: 1px solid var(--alert-line); background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--fg); font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.c-orbital__data::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--alert); opacity: var(--processing, 1); box-shadow: inset 0 0 10px var(--alert-line); pointer-events: none; }
.c-orbital__head { display: flex; justify-content: space-between; gap: 6px; color: var(--alert); text-transform: uppercase; letter-spacing: 0.08em; }
.c-orbital__matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; border-inline: 1px solid var(--fg-3); padding: 3px 6px; margin-block: 8px; text-align: right; text-shadow: 0 0 calc(5px * var(--processing, 1)) var(--alert-line); }
.c-orbital__vector { color: var(--fg-2); white-space: nowrap; font-size: 12px; margin-top: 4px; }
.c-orbital__vector + .c-orbital__vector { color: var(--fg); }
.c-orbital__nodes { display: block; width: 100%; height: 22px; margin-top: 5px; fill: var(--bg); stroke: var(--alert); stroke-width: 1; }
.c-orbital__link { fill: none; stroke: var(--alert-line); }
.c-orbital__weights { font-size: 11px; color: var(--fg-2); }
.c-orbital__fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--alert); stroke-width: 1; opacity: 0.7; filter: drop-shadow(0 0 3px var(--alert-line)); }
.c-orbital__sphere { fill: var(--bg); stroke: var(--fg-3); stroke-width: 0.6; }
.c-orbital__rib { stroke: var(--fg-3); stroke-width: 0.5; }
.c-orbital[data-corner="bottom-left"] .c-orbital__data { right: auto; left: 14px; }
.c-orbital[data-corner^="top"] .c-orbital__data { bottom: auto; top: 58px; }
.c-orbital[data-corner="top-left"] .c-orbital__data { right: auto; left: 14px; }
.l-orb:has(.c-orbital[data-tight="true"] .c-orbital__data:not([hidden])) .c-audio--stage { left: 0; right: auto; top: 72px; justify-items: start; padding-left: 0; }
@media (max-width: 599.98px) {
  .c-orbital__controls { gap: 6px; }
  .c-orbital__phase { display: none; }
  .c-orbital__cadence { font-size: 12px; }
  .c-orbital__data { width: 180px; padding: 9px; font-size: 12px; bottom: 52px; }
  .c-orbital__vector { font-size: 11px; }
}

/* Console de requête. */
.c-console {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--alert-line);
}

.c-console__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-console__title {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-weight: 500;
}

.c-console__title::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--alert);
}

.c-console__meta {
  color: var(--fg-3);
}

.c-console__log {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  max-height: 11.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.c-console__entry {
  display: grid;
  gap: 0.3rem;
}

.c-console__q {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.c-console__q::before {
  content: "> ";
  color: var(--alert);
}

.c-console__line {
  color: var(--fg-2);
  font-size: var(--text-data);
  line-height: 1.5;
}

.c-console__q + .c-console__line {
  color: var(--fg);
}

.c-console__line.is-alert {
  color: var(--alert);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-console__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--space-4);
  margin-top: 0.3rem;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.c-console__form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.c-console__form:focus-within {
  border-color: var(--alert);
  box-shadow: 0 1px 0 var(--alert);
}

.c-console__prompt {
  color: var(--alert);
  font-weight: 500;
}

.c-console__input {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  caret-color: var(--alert);
}

.c-console__input:focus {
  outline: none;
}

.c-console__input::placeholder {
  color: var(--fg-3);
}

.c-console__send {
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-console__send:hover {
  color: var(--alert);
}

.c-console__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-console__chip {
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.c-console__chip:hover {
  border-color: var(--alert);
  color: var(--fg);
}

/* Commandes système (hack/restore) : hors du flux des suggestions, filet pointillé pour marquer une commande
   plutôt qu'une question. Le bouton restore reste présent mais désactivé tant que rien n'est corrompu
   (console.js), pour que sa seule existence reste un indice sans inviter à l'actionner hors de propos. */
.c-console__system {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line-strong);
}

.c-console__system-label {
  color: var(--fg-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.c-console__sysbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px dashed var(--line-strong);
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.c-console__sysbtn:hover,
.c-console__sysbtn:focus-visible {
  border-color: var(--alert);
  color: var(--fg);
}

.c-console__sysbtn:disabled {
  opacity: 0.4;
}

/* Ordinateur : la console et le lien « Sujet 0002 » sont toujours à l'écran sous l'anneau ; l'en-tête n'a pas la
   place d'une huitième entrée. */
@media (min-width: 1024px) {
  .c-nav__query,
  .c-nav__visitor {
    display: none;
  }
}

/* Canal audio (js/audio.js, décision 8) : toutes ses règles sont ici, à retirer avec le module. Dans le menu sous
   1024 px, en ligne dans l'en-tête de dossier.html ; sur l'accueil, l'en-tête est plein : un second bouton rejoint
   le relevé de l'orbe, en haut à droite, en miroir de « Sujet 0001 · suivi actif » (la nappe est la voix de la
   sphère). Carré d'état : vide gris (coupé), vide rouge (en attente d'un geste), plein rouge (actif). */
.c-audio {
  justify-content: space-between;
  align-items: center;
  column-gap: 1.2em;
  min-height: 2.75rem;
}

.c-audio__state {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--fg-3);
}

.c-audio__state::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
}

.c-audio[data-state="wait"] .c-audio__state {
  color: var(--fg-2);
}

.c-audio[data-state="wait"] .c-audio__state::before {
  border-color: var(--alert);
}

.c-audio[data-state="on"] .c-audio__state {
  color: var(--fg);
}

.c-audio[data-state="on"] .c-audio__state::before {
  border-color: var(--alert);
  background: var(--alert);
}

/* Dans la boîte de l'orbe, comme le relevé : il suit la colonne collante jusqu'en bas de page. */
.c-audio--stage {
  position: absolute;
  top: var(--space-4);
  right: 0;
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  padding-left: var(--space-4);
  color: var(--fg-2);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}

.c-audio--stage:hover {
  color: var(--fg);
}

@media (min-width: 1024px) {
  .c-audio--menu {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .c-audio--stage {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .c-nav {
    gap: var(--space-4);
  }

  .c-nav__list {
    gap: 1rem;
  }

  .c-nav__i {
    display: none;
  }

  .c-nav__link,
  .c-nav__themes {
    letter-spacing: 0.18em;
  }
}

@media (max-width: 1023.98px) {
  .c-menu-toggle {
    display: grid;
  }

  .c-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-5) clamp(1rem, 5vw, 2.5rem);
    background: var(--bg);
    overflow-y: auto;
  }

  .is-menu-open .c-nav {
    display: flex;
  }

  /* Sections, puis un second groupe de rangées : Thèmes et Canal audio. */
  .c-nav__list {
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-5);
    border-top: 1px solid var(--line);
  }

  .c-nav__link,
  .c-nav__themes {
    width: 100%;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .c-nav__link::after {
    display: none;
  }

  .c-nav__themes {
    padding-left: 0;
    border-left: 0;
  }

  .c-subject {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem;
    row-gap: 0.2rem;
  }

  .c-subject__category {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .c-subject__open {
    grid-column: 3;
    grid-row: 1;
  }

  .c-ring-label,
  .c-orb-status {
    display: none;
  }

  /* Plein écran sous l'orbe revenue en grand ; le bloc descend vers le pouce, « Fermer » en pleine largeur. */
  .c-negative {
    left: 0;
    width: auto;
    padding: calc(var(--orb-h) + var(--space-3)) clamp(1rem, 5vw, 2.5rem) var(--space-4);
  }

  .c-negative__block {
    width: 100%;
    max-width: 42rem;
    margin: auto auto 0;
  }

  .c-negative__rule {
    display: none;
  }

  /* Toujours sous le pouce, même quand le bloc déborde de l'écran et défile sous lui. */
  .c-negative__close {
    position: sticky;
    bottom: 0;
    justify-self: stretch;
    justify-content: center;
    background: var(--bg);
    box-shadow: 0 var(--space-4) 0 var(--bg);
  }

  .c-dossier-head__index {
    font-size: 3rem;
  }

  .c-dossier-texts {
    margin-top: var(--space-5);
  }
}

@media (max-width: 599.98px) {
  .c-file__row,
  .c-file--wide .c-file__row {
    grid-template-columns: 6.75rem minmax(0, 1fr);
    gap: var(--space-2);
  }

  .c-file__label {
    letter-spacing: 0.16em;
  }

  .c-divergence__body {
    padding-left: 0;
  }

  /* Années voisines de la frise : une sur deux descend d'une ligne. */
  .c-timeline__year {
    bottom: calc(var(--low, 0) * -1.25rem);
  }

  .c-console__meta {
    display: none;
  }

  .c-prediction__text {
    display: grid;
    padding-block: var(--space-2);
  }

  .c-prediction__target::before {
    content: none;
  }

  .c-theme-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .c-path__node span {
    display: none;
  }

  .c-pager {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .c-pager__link--next {
    text-align: left;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 1023.98px) and (max-height: 740px) {
  /* Menu entier à l'écran à 360 × 640 : rangées de 48 px, toujours au-dessus des 44 px du toucher. */
  .c-nav {
    padding-block: var(--space-4);
  }

  .c-nav__list {
    margin-bottom: var(--space-4);
  }

  .c-nav__link,
  .c-nav__themes {
    padding-block: 0.75rem;
  }

  .c-negative__block {
    gap: var(--space-2);
  }

  .c-negative__data .c-file__row {
    padding-block: 0.45rem;
  }
}