/* ==========================================================================
   LISIÈRE — journal de bord d'hyperproximité
   AUTO (défaut, racine) : suit prefers-color-scheme du système.
   NUIT  (sortie/nuit/)  : nuit pétrole, phosphore vert — forcé.
   JOUR  (sortie/jour/)  : carnet de terrain, papier + encre — forcé.
   La page d'accueil s'ouvre sur la carte de tous les voyages : c'est le
   pare-brise du site. Le copilote est garé en bas à droite.
   ========================================================================== */

/* Thème sombre — défaut pour tout le monde (NUIT forcé + AUTO sur système sombre) */
:root {
  --bg: #0b0907;
  --surface: #12100b;
  --surface-2: #18160f;
  --text: #dfe5da;
  --muted: #8d9b90;
  --line: #1d2c30;
  --border: #2a4138;
  --accent: #45ffa0;            /* phosphore */
  --accent-2: #ffb454;          /* ambre — fréquences, arrivées */
  --cyan: #3ce6f0;              /* survols */
  --rose: #ff2e7e;              /* très petites touches */
  --halo: rgba(69, 255, 160, 0.35);
  --grid-dot: rgba(69, 255, 160, 0.05);
  --panneau: rgba(11, 9, 7, 0.82);
  --term-bg: #060502;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Charter, "Iowan Old Style", "Bitstream Charter", Georgia, "Times New Roman", serif;
}

/* Thème clair — JOUR forcé */
html[data-theme="light"] {
  --bg: #f3f1e7;
  --surface: #fbfaf4;
  --surface-2: #ece9da;
  --text: #1b1f17;
  --muted: #67705d;
  --line: #d5d2bf;
  --border: #9aa28b;
  --accent: #1c7a4d;            /* vert forêt */
  --accent-2: #b45309;          /* rouille */
  --cyan: #0e7490;
  --rose: #be185d;
  --halo: rgba(28, 122, 77, 0.25);
  --grid-dot: rgba(27, 31, 23, 0.07);
  --panneau: rgba(243, 241, 231, 0.86);
  --term-bg: #10150f;
}

/* Thème clair — AUTO quand le système préfère le clair */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --bg: #f3f1e7;
    --surface: #fbfaf4;
    --surface-2: #ece9da;
    --text: #1b1f17;
    --muted: #67705d;
    --line: #d5d2bf;
    --border: #9aa28b;
    --accent: #1c7a4d;
    --accent-2: #b45309;
    --cyan: #0e7490;
    --rose: #be185d;
    --halo: rgba(28, 122, 77, 0.25);
    --grid-dot: rgba(27, 31, 23, 0.07);
    --panneau: rgba(243, 241, 231, 0.86);
    --term-bg: #10150f;
  }
}

* { box-sizing: border-box; }

/* View Transitions — le titre vole d'une page à l'autre */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both vt-sortie; }
::view-transition-new(root) { animation: .22s ease both vt-entree; }
@keyframes vt-sortie { to   { opacity: 0; transform: translateY(-5px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY( 5px); } }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* grain analogique — texture pellicule/papier, imperceptible mais présent */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.04;
}

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--cyan); text-decoration: underline; }

.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.08em; }

::selection { background: var(--rose); color: var(--bg); }

.clignote { animation: clignote 1.8s step-end infinite; font-weight: 700; }
@keyframes clignote { 50% { opacity: 0.25; } }

/* --------------------------------------------------------------------------
   Topbar — la toute petite bannière
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 600;                 /* au-dessus des panneaux Leaflet */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.topbar-in {
  max-width: 76rem;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 0.98rem;
}
.brand:hover { text-decoration: none; color: var(--text); }

.brand-mark { width: 24px; height: 24px; color: var(--accent); flex: none; }

.brand-name { text-shadow: 0 0 14px var(--halo); }   /* le néon, réglé bas */

.brand-sub { font-size: 0.66rem; font-weight: 400; color: var(--muted); }

.mainnav { display: flex; gap: 1.6rem; margin-left: auto; font-size: 0.72rem; }

.mainnav a {
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.mainnav a:hover { color: var(--accent); text-decoration: none; border-bottom-color: var(--accent); }
.mainnav a.active { color: var(--text); border-bottom-color: var(--accent); }

.modeswitch {
  flex: none;
  display: flex;
  border: 1px solid var(--border);
  font-size: 0.6rem;
}

.modeswitch a { padding: 5px 9px; color: var(--muted); border-left: 1px solid var(--line); }
.modeswitch a:first-child { border-left: none; }
.modeswitch a:hover { color: var(--accent); text-decoration: none; }
.modeswitch a.active { background: var(--accent); color: var(--bg); }

/* --------------------------------------------------------------------------
   Héro-carte — le pare-brise : la carte de tous les voyages
   -------------------------------------------------------------------------- */

.hero-carte {
  position: relative;
  height: clamp(420px, 58vh, 620px);
  border-bottom: 1px solid var(--border);
}

.hero-vide {
  height: auto;
  padding: 72px 24px;
  display: flex;
  justify-content: center;
}

.carte-zone { position: absolute; inset: 0; background: var(--surface); }

/* la carte s'inverse en mode sombre (NUIT forcé + AUTO sur système sombre) */
html:not([data-theme="light"]) .carte-zone .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.45);
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .carte-zone .leaflet-tile-pane {
    filter: none;
  }
}

/* coins HUD */
.coin {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--accent);
  filter: drop-shadow(0 0 5px var(--halo));
  pointer-events: none;
  z-index: 500;
}
.co-hg { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.co-hd { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.co-bg { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.co-bd { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* le cartel posé sur la vitre */
.hero-panneau {
  position: relative;
  z-index: 510;
  margin: 34px 0 0 max(24px, calc((100% - 76rem) / 2 + 24px));
  width: fit-content;
  max-width: min(440px, calc(100% - 48px));
  padding: 20px 26px 18px;
  background: var(--panneau);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  pointer-events: none;
}
.hero-panneau a { pointer-events: auto; }

.hero-surtitre {
  margin: 0 0 6px;
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.3em;
}

.hero-panneau h1 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.1;
  text-shadow: 0 0 18px var(--halo);
}

.hero-tagline {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--muted);
}

.hero-stats { margin: 0; font-size: 0.66rem; color: var(--muted); }
.hero-stats a { color: var(--accent-2); }

.hero-légende {
  position: absolute;
  z-index: 510;
  bottom: 14px;
  left: max(24px, calc((100% - 76rem) / 2 + 24px));
  margin: 0;
  padding: 4px 10px;
  background: var(--panneau);
  border: 1px solid var(--line);
  font-size: 0.6rem;
  color: var(--muted);
  pointer-events: none;
}

/* popups Leaflet aux couleurs du poste */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.bulle-carte { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.bulle-carte strong { display: block; font-size: 0.86rem; }
.bulle-carte a { color: var(--accent); }
.bulle-carte .muted { color: var(--muted); }

.marqueur-poi {
  color: var(--accent-2);
  font-size: 18px;
  line-height: 18px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   Le journal — liste éditoriale sur rail
   -------------------------------------------------------------------------- */

.journal { padding: 52px 24px 64px; }

.journal-tête {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 22px;
}

.titre-section {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--accent);
}

.journal-note { margin: 0; font-size: 0.64rem; color: var(--muted); }
.journal-note a { color: var(--accent-2); }

.entrées {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.entrée {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.6rem;
  padding: 1.5rem 0.9rem 1.5rem 1.4rem;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

/* le nœud sur le rail */
.entrée::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 2.05rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--border);
  transition: background 0.15s, box-shadow 0.15s;
}

/* le dernier signal émis pulse doucement */
.entrée:first-child::before {
  background: var(--v-color, var(--accent));
  box-shadow: 0 0 8px var(--v-halo, var(--halo));
  animation: pouls 2.4s ease-in-out infinite;
}
@keyframes pouls { 50% { box-shadow: 0 0 2px transparent; } }

.entrée:hover {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-left-color: var(--v-color, var(--accent));
}
.entrée:hover::before { background: var(--v-color, var(--accent)); box-shadow: 0 0 8px var(--v-halo, var(--halo)); }

/* teintes par vecteur — cascade via --v-color / --v-halo */
.entrée[data-vecteur="pied"],
.entrée[data-vecteur="vélo"],
.entrée[data-vecteur="velo"],
.entrée[data-vecteur="vtt"]   { --v-color: var(--accent);   --v-halo: var(--halo); }

.entrée[data-vecteur="t3"],
.entrée[data-vecteur="van"]   { --v-color: var(--accent-2); --v-halo: rgba(255,180,84,.28); }

.entrée[data-vecteur="texte"],
.entrée[data-vecteur="note"]  { --v-color: var(--rose);     --v-halo: rgba(255,46,126,.28); }

.entrée[data-vecteur="tech"]  { --v-color: var(--cyan);     --v-halo: rgba(60,230,240,.28); }

.entrée[data-vecteur="livre"] { --v-color: #d4a035;         --v-halo: rgba(212,160,53,.28); }

.horodatage { padding-top: 0.35rem; font-size: 0.68rem; color: var(--muted); }

.entrée-titre {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.entrée-titre:hover { color: var(--cyan); text-decoration: none; }

.entrée-résumé { margin: 0.4rem 0 0.5rem; color: var(--muted); font-size: 0.97rem; max-width: 62ch; }

.entrée-détails { margin: 0; font-size: 0.62rem; color: var(--muted); opacity: 0.85; }

/* --------------------------------------------------------------------------
   Page voyage
   -------------------------------------------------------------------------- */

.voyage, .radio { padding: 48px 24px 64px; }

.voyage-tête { margin-bottom: 30px; position: relative; }

.signal-num {
  position: absolute;
  top: 0;
  right: 0;
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--muted);
  opacity: .45;
}

.fil { margin: 0 0 18px; font-size: 0.64rem; }
.fil a { color: var(--muted); }
.fil a:hover { color: var(--accent); }

.voyage-tête h1 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 24ch;
}

.faits { margin: 0; font-size: 0.68rem; color: var(--accent); letter-spacing: 0.16em; }

/* le relevé de terrain */
.releve { margin: 8px 0 40px; }

.releve-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 0 2px 8px;
  font-size: 0.66rem;
}

.releve-bar span { color: var(--accent); letter-spacing: 0.22em; }
.releve-bar em { font-style: normal; color: var(--muted); letter-spacing: 0.12em; }

.releve-cadre { position: relative; height: 430px; }

.releve-cadre .carte-zone {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
}

.releve-cadre .coin { z-index: 500; }
.releve-cadre .co-hg, .releve-cadre .co-hd { top: -4px; }
.releve-cadre .co-bg, .releve-cadre .co-bd { bottom: -4px; }
.releve-cadre .co-hg, .releve-cadre .co-bg { left: -4px; }
.releve-cadre .co-hd, .releve-cadre .co-bd { right: -4px; }

/* --------------------------------------------------------------------------
   Prose — le récit, en serif, large et lisible
   -------------------------------------------------------------------------- */

.prose {
  max-width: 44rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.85;
}

.prose p { margin: 0 0 1.4rem; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.6rem 0 1rem;
}

.prose h2 { font-size: 0.88rem; }
.prose h3 { font-size: 0.8rem; }
.prose h4 { font-size: 0.72rem; color: var(--muted); }
.prose h2::before, .prose h3::before { content: "▍"; }

.prose a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .15s;
}
.prose a:hover { text-decoration-color: var(--accent); }

.prose blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--rose);
  color: var(--muted);
  font-style: italic;
}
.prose blockquote p { margin: 0; }

.prose code {
  font-family: var(--mono);
  font-size: 0.8em;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.08em 0.4em;
}

.prose pre {
  margin: 1.8rem 0;
  padding: 1rem 1.2rem;
  background: var(--term-bg);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #6fdf9f;
}

.prose img { max-width: 100%; height: auto; border: 1px solid var(--border); }

/* image seule dans la prose → figure avec vignette */
.prose-img {
  margin: 1.6rem 0;
  position: relative;
}
.prose-img img { display: block; width: 100%; }
.prose-img::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5);
  pointer-events: none;
}
.prose-img figcaption {
  padding-top: 6px;
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .1em;
}

.prose hr {
  border: none;
  text-align: center;
  margin: 2.4rem 0;
}
.prose hr::after {
  content: "· · ⌁ · ·";
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: 0.4em;
}

.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--accent); }

/* --------------------------------------------------------------------------
   Galerie d'observations
   -------------------------------------------------------------------------- */

.galerie { margin-top: 46px; }

.galerie-grille {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.galerie-grille figure {
  margin: 0;
  position: relative;
  transition: box-shadow 0.2s;
}
.galerie-grille figure::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 24px rgba(0,0,0,.42);
  pointer-events: none;
}

.galerie-grille img {
  display: block;
  width: 100%;
  height: 195px;
  object-fit: cover;
  border: 1px solid var(--border);
  filter: saturate(0.88);
  transition: filter 0.2s, transform 0.2s, border-color 0.2s;
}

.galerie-grille figure:hover img {
  filter: saturate(1.05);
  transform: translateY(-2px);
  border-color: var(--accent);
}
.galerie-grille figure:hover {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 14%, transparent),
              0 3px 10px rgba(0,0,0,.4);
}

.galerie-grille figcaption {
  padding-top: 6px;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.retour { margin-top: 32px; font-size: 0.68rem; }
.retour a { color: var(--muted); }
.retour a:hover { color: var(--accent); text-decoration: none; }

/* Navigation prev / next entre articles */
.nav-articles {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .7rem;
}
.nav-prev, .nav-next { color: var(--muted); max-width: 44%; line-height: 1.45; }
.nav-next { margin-left: auto; text-align: right; }
.nav-prev:hover, .nav-next:hover { color: var(--accent); text-decoration: none; }
.nav-void { color: var(--muted); opacity: .35; }

/* --------------------------------------------------------------------------
   Archives — tableau de tous les signaux
   -------------------------------------------------------------------------- */

.arch-table { width: 100%; border-collapse: collapse; margin: 6px 0 2.5rem; }
.arch-ligne { border-bottom: 1px solid var(--line); }
.arch-ligne:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.arch-date  { width: 9rem; padding: 10px 12px 10px 8px; color: var(--muted);
              font-size: .68rem; white-space: nowrap; vertical-align: middle; }
.arch-titre { padding: 10px 12px 10px 0; font-family: var(--serif);
              font-size: 1.05rem; vertical-align: middle; }
.arch-titre a { color: var(--text); }
.arch-titre a:hover { color: var(--cyan); text-decoration: none; }
.arch-meta  { padding: 10px 8px 10px 0; color: var(--muted); font-size: .62rem;
              white-space: nowrap; vertical-align: middle; text-align: right; }

/* --------------------------------------------------------------------------
   Tags (pills sur journal et articles, filtres dans archives)
   -------------------------------------------------------------------------- */

.tag-liste { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }

.tag-pill {
  display: inline-block;
  padding: .18em .55em;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.tag-pill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* barre de filtres dans archives (CSS pur via :has + :target) */
.tag-anchor { display: inline; font-size: 0; }
.arch-filtres {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.2rem 0 2rem;
}
.tag-btn-lien {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .28em .65em;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .09em;
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.tag-btn-lien:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* pills dans les lignes d'archives */
.tag-liste-sm { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.tag-pill-sm {
  display: inline-block;
  padding: .1em .4em;
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .65;
}

/* --------------------------------------------------------------------------
   Fréquences
   -------------------------------------------------------------------------- */

.radio { max-width: 50rem; margin: 0 auto; }

.préambule {
  max-width: 56ch;
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}

.radio .titre-section { display: block; margin: 38px 0 4px; }

.préréglages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.préréglages li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
}

.préréglages li:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }

.fréquence {
  min-width: 52px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-2);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 40%, transparent);
}

.préréglages a { color: var(--text); font-weight: 700; }
.préréglages li:hover a { color: var(--cyan); text-decoration: none; }
.préréglages .note { color: var(--muted); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Ticker — fréquences en défilement sur l'accueil
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  height: 34px;
  display: flex;
  align-items: center;
}

.ticker-ruban {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: defilement 45s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker-ruban { animation-play-state: paused; }

.tick-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 26px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.tick-freq {
  font-weight: 700;
  color: var(--accent-2);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent-2) 35%, transparent);
}

.tick-item a { color: var(--muted); }
.tick-item a:hover { color: var(--accent); text-decoration: none; }

@keyframes defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Jauge de progression de lecture (articles)
   -------------------------------------------------------------------------- */

.lecture {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 700;
  background: var(--accent);
  box-shadow: 0 0 8px var(--halo);
  transform-origin: 0 50%;
  transform: scaleX(0);
  display: none;
}

@supports (animation-timeline: scroll()) {
  .lecture {
    display: block;
    animation: lit linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes lit { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   Pied de page — une ligne de console, pas un panneau
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 26px 0 84px;        /* de la place pour le copilote garé */
}

.footer-in {
  max-width: 76rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 34px;
  font-size: 0.82rem;
}

.f-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
}

.f-mark { width: 18px; height: 18px; color: var(--accent); }

.f-sig { color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 0.9rem; }

.f-instr { margin-left: auto; font-size: 0.62rem; color: var(--muted); }
.f-instr b { color: var(--accent); }
.f-instr a { color: var(--accent-2); }

.footer-legal {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.6rem;
  color: var(--muted);
  opacity: 0.75;
}
.footer-legal a { color: var(--muted); text-decoration: underline; }
.footer-legal a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Easter eggs & petits trucs
   -------------------------------------------------------------------------- */

/* antenne qui émet — pulse toutes les ~6 s sur le brand-mark */
.brand-mark .emit {
  animation: emit-pulse 6s ease-in-out 1.5s infinite;
}
@keyframes emit-pulse {
  0%, 48%, 100% { opacity: 0.6; }
  55%           { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
  60%           { opacity: 0.15; }
  65%           { opacity: 0.9; }
  69%           { opacity: 0.25; }
  74%           { opacity: 1; }
}

/* horloge dans le footer */
.f-horloge { color: var(--muted); opacity: 0.75; font-size: 0.9em; }

/* curseur phosphore + anneau (appareils non-tactiles, injecté par JS) */
.curseur-perso * { cursor: none !important; }
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: transform .12s ease, opacity .2s;
  will-change: transform;
}

/* étoiles de fond (mode sombre, injectées par JS) */
#etoiles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#etoiles span {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: var(--text);
  animation: scintille var(--dur, 3s) var(--d, 0s) ease-in-out infinite;
}
html[data-theme="light"] #etoiles { display: none; }
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] #etoiles { display: none; }
}
@keyframes scintille {
  0%, 100% { opacity: 0.08; }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* nuages diurnes : silhouettes pixel-art douces qui dérivent (mode clair) */
#nuages {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.nuage-pixel {
  position: absolute;
  animation: derive var(--dur, 280s) var(--del, 0s) linear infinite;
  will-change: transform;
}
html[data-theme="dark"] #nuages { display: none; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #nuages { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nuage-pixel { animation: none; }
}
@keyframes derive {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 700px)); }
}

/* signal de détresse (code Konami) */
#sos-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: rgba(0, 0, 0, 0.92);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sos-col {
  position: absolute;
  top: -120%;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
  color: var(--accent);
  opacity: 0.55;
  animation: tomber var(--dur, 2s) var(--d, 0s) linear infinite;
}
@keyframes tomber { from { transform: translateY(0); } to { transform: translateY(320vh); } }
#sos-msg {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 4vw, 1.8rem);
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.28em;
  text-shadow: 0 0 24px var(--halo);
  animation: sos-clignote 0.4s step-end infinite;
  pointer-events: none;
}
#sos-msg em {
  display: block;
  font-style: normal;
  font-size: 0.65em;
  color: var(--accent-2);
  letter-spacing: 0.1em;
  margin-top: 0.6rem;
}
@keyframes sos-clignote { 50% { opacity: 0.2; } }
#sos-overlay.sos-out { animation: sos-fade 0.7s ease forwards; }
@keyframes sos-fade { to { opacity: 0; } }

/* --------------------------------------------------------------------------
   Module copilote — garé en bas à droite
   -------------------------------------------------------------------------- */

#module-copilote {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 650;
}

.cadre-copilote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panneau);
  backdrop-filter: blur(4px);
}

.étiquette-copilote { font-size: 0.48rem; color: var(--muted); letter-spacing: 0.2em; }

#copilote {
  font-size: 1.65rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 0 6px var(--halo));
  transition: transform 0.15s ease;
}

#copilote:hover { transform: translateY(-3px) scale(1.08); }

#copilote.saute { animation: saute 0.35s ease; }
@keyframes saute {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-9px) scale(1.1); }
}

#bulle-copilote {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 6px 6px 2px 6px;
  background: var(--panneau);
  backdrop-filter: blur(4px);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s, transform 0.16s;
  pointer-events: none;
}

#bulle-copilote.visible { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .topbar-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 8px 14px; }
  .brand-sub { display: none; }
  .mainnav { gap: 1.1rem; }
  .hero-carte { height: 64vh; }
  .hero-panneau { margin: 18px auto 0; max-width: calc(100% - 36px); }
  .hero-légende { display: none; }
  .entrée { grid-template-columns: 1fr; gap: 0.2rem; padding: 1.2rem 0.6rem 1.2rem 1.1rem; }
  .horodatage { padding-top: 0; }
  .releve-cadre { height: 320px; }
  .f-instr { margin-left: 0; }
}

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

/* --------------------------------------------------------------------------
   Impression — le récit seul, à l'encre
   -------------------------------------------------------------------------- */

@media print {
  .topbar, .footer, .lecture, #module-copilote, .hero-carte,
  .retour, .fil { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  body::after { display: none; }
  .prose { max-width: none; }
  a { color: #000; text-decoration: none; }
}