/* ═══════════════════════════════════════════════════════════════════
   HABILLAGE NUIT — feuille commune aux pages sombres du site
   Frise · Cartes Ulysse · Constellation · Lecteur PDF
   Même vocabulaire que la bibliothèque en ivoire : mêmes polices,
   même or, même bleu — mais à l'heure de la nuit.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --n-bg:        #0E1B2A;   /* le marine du site, assombri */
  --n-bg-2:      #14263A;   /* surfaces, panneaux */
  --n-bg-3:      #1B3247;   /* survol */
  --n-line:      rgba(227,210,174,.16);
  --n-line-2:    rgba(227,210,174,.30);
  --n-text:      #E9E3D7;
  --n-text-2:    rgba(233,227,215,.68);
  --n-text-3:    rgba(233,227,215,.42);
  --n-gold:      #E3D2AE;   /* or lumineux — textes et traits */
  --n-gold-deep: #B08D4F;   /* or profond — aplats et bordures */
  --n-serif: 'EB Garamond', Georgia, serif;
  --n-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body{ font-family: var(--n-sans); color: var(--n-text); }

/* ── Titres ─────────────────────────────────────────────────────── */
h1, h2, h3, .header-title h1{
  font-family: var(--n-serif) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: var(--n-gold) !important;
  text-shadow: none !important;
}
h1{ font-size: clamp(1.35rem, 3vw, 1.9rem) !important; }

/* ── Barre supérieure commune ───────────────────────────────────── */
.hv-bar{
  display:flex; align-items:center; gap:16px;
  padding:0 20px; min-height:56px;
  background: rgba(14,27,42,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--n-line);
}
.hv-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 10px; border-radius:8px;
  background:none; border:1px solid transparent;
  color: var(--n-text-2); font-size:14.5px; font-family:var(--n-sans);
  text-decoration:none; cursor:pointer; transition:.15s; white-space:nowrap;
}
.hv-back:hover{ color: var(--n-gold); background: var(--n-bg-2); border-color: var(--n-line); }
.hv-back svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7;
              stroke-linecap:round; stroke-linejoin:round; flex:none; }
.hv-crumb{
  font-family: var(--n-serif); font-size:1.12rem; color: var(--n-gold);
  letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hv-crumb small{
  display:block; font-family:var(--n-sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--n-text-3); margin-top:-1px;
}
.hv-spacer{ margin-left:auto; }

/* ── Boutons de commande ────────────────────────────────────────── */
.control-btn, .btn-back, .hv-btn{
  font-family: var(--n-sans) !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
  border-radius: 7px !important;
  transition: .15s !important;
}
.control-btn{
  background: var(--n-bg-2) !important;
  border: 1px solid var(--n-line) !important;
  color: var(--n-text-2) !important;
  padding: 5px 11px !important;
}
.control-btn:hover{
  background: var(--n-bg-3) !important;
  border-color: var(--n-line-2) !important;
  color: var(--n-text) !important;
}
.control-btn.active{
  background: var(--n-gold-deep) !important;
  border-color: var(--n-gold-deep) !important;
  color: #1A1204 !important;
  font-weight: 600 !important;
}
.control-label{
  font-family: var(--n-sans) !important;
  font-size: 10.5px !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; color: var(--n-text-3) !important;
}

/* ── Panneaux et légendes ───────────────────────────────────────── */
.legend, .panel, #legend{
  background: rgba(20,38,58,.94) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 10px !important;
  font-family: var(--n-sans) !important;
}

/* ── Confort de lecture ─────────────────────────────────────────── */
::selection{ background: var(--n-gold-deep); color:#1A1204; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--n-bg); }
::-webkit-scrollbar-thumb{ background: var(--n-bg-3); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--n-gold-deep); }


/* ── Pont vers les variables des pages existantes ──────────────────
   Ces pages pilotent déjà leurs couleurs par variables : on les
   rebranche sur la palette commune plutôt que de les réécrire.     */
:root{
  --bg:         var(--n-bg)      !important;   /* frise */
  --bg-soft:    var(--n-bg-2)    !important;
  --bg-card:    rgba(20,38,58,.95) !important;
  --text:       var(--n-text)    !important;
  --text-dim:   var(--n-text-2)  !important;
  --gold:       var(--n-gold)    !important;
  --gold-light: #F2E6C8          !important;
  --gold-dim:   rgba(227,210,174,.55) !important;
}

/* ── SÉCURITÉ MOBILE ────────────────────────────────────────────────
   Aucune page ne doit déborder en largeur : sur téléphone, plus
   besoin de faire glisser l'écran de côté pour lire la fin d'un mot. */
/* pas d'overflow-x ici : cela décollerait les barres collantes */
img, video, iframe, table, pre { max-width: 100%; }