/* ==========================================================================
   SoT Lore FR — feuille de style commune
   Palette tirée des assets : parchemin, or, encre, nuit, sarcelle des cartes
   ========================================================================== */

/* Polices du site (fournies dans brand_assets, copiées dans fonts/) */

@font-face {
  font-family: "Windlass Extended";
  src: url("fonts/WindlassExtended-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manuskript Antiqua";
  src: url("fonts/ManuskriptAntD-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --parchment: #f3dda3;
  --parchment-deep: #dfb964;
  --gold: #cf9118;
  --gold-bright: #eab53a;
  --gold-dark: #8a5f0d;
  --ink: #17130b;
  --night: #131313;        /* raccord exact avec separateur_HAUT */
  --night-2: #151819;      /* raccord exact avec separateur_BAS  */
  --abyss: #0c0d0e;
  --teal: #1d4b50;
  --teal-bright: #2e7c83;

  --font-display: "Windlass Extended", "Georgia", serif;
  --font-serif: "Manuskript Antiqua", "Georgia", serif;
  --font-sans: "Manuskript Antiqua", "Segoe UI", sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --sombre-surface: #17140f;
  --sombre-surface-2: #262626;
  --sombre-bordure: #3a3a3a;
  --sombre-texte: #f2f0ea;
  --sombre-accent: #2457f5;
  --sombre-accent-vif: #1c21c4;
  --sombre-ombre: 0 2px 8px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.4);

  --shadow-card:
    0 1px 2px rgba(12, 10, 4, 0.55),
    0 6px 14px -4px rgba(12, 10, 4, 0.45),
    0 18px 38px -12px rgba(8, 20, 22, 0.5);
  --shadow-float:
    0 2px 4px rgba(12, 10, 4, 0.55),
    0 12px 28px -6px rgba(12, 10, 4, 0.55),
    0 30px 60px -18px rgba(8, 20, 22, 0.6);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--parchment);
  background-color: var(--night-2);
}

img { max-width: 100%; }

/* Visible seulement des lecteurs d'écran (ex. un <h1> de page qui ferait doublon
   visuel avec le logo déjà affiché dans l'en-tête). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Fond fixe (BG_1 : la table aux cartes) ------------------------------ */

.fixed-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--teal) url("brand_assets/BG/BG_1.png") center / cover no-repeat;
}

.fixed-bg.bg-aile { background-image: url("brand_assets/BG/BG_18.png"); }
.fixed-bg.bg-equipe { background-image: url("brand_assets/BG/BG_21.png"); }
.fixed-bg.bg-legal { background-image: url("brand_assets/BG/BG_3.png"); }
.fixed-bg.bg-collab { background-image: url("brand_assets/BG/BG_22.png"); }

.fixed-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(9, 26, 28, 0) 40%, rgba(9, 26, 28, 0.55) 100%),
    linear-gradient(rgba(9, 26, 28, 0.18), rgba(9, 26, 28, 0.18));
}

/* ----- En-tête -------------------------------------------------------------- */

.site-header {
  position: relative;
  background: var(--night);
  padding: var(--space-2) var(--space-3) var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: transform 0.35s var(--ease-spring);
}

.brand:hover { transform: scale(1.03); }
.brand:active { transform: scale(0.98); }

.brand img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.brand span {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--parchment);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(207, 145, 24, 0.25);
}

.top-nav {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: 0.95rem;
}

.top-nav a {
  color: var(--parchment-deep);
  text-decoration: none;
  padding: 0.15rem 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, transform 0.3s var(--ease-spring);
}

.top-nav a:hover { color: var(--gold-bright); transform: translateY(-1px); }
.top-nav a:active { transform: translateY(0); }
.top-nav a[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold); }

/* ----- Séparateurs déchirés ------------------------------------------------- */

.sep {
  display: block;
  width: 100%;
  height: auto;
  margin: -1px 0; /* évite tout liseré entre le séparateur et les fonds sombres */
  user-select: none;
  pointer-events: none;
}

/* ----- Liens focus (accessibilité) ------------------------------------------ */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- Héros : les deux portails Bibliothèque / Articles -------------------- */

.hero {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-4), 10vw, 9rem);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-3);
}

.portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.portal-label {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 6px 14px rgba(0, 0, 0, 0.55);
  transition: color 0.25s ease, transform 0.35s var(--ease-spring);
}

.portal img {
  width: clamp(150px, 18vw, 210px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s var(--ease-spring), filter 0.3s ease;
}

.portal:hover .portal-label { color: var(--gold-bright); transform: translateY(-3px); }
.portal:hover img {
  transform: scale(1.07) rotate(-1.5deg);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(234, 181, 58, 0.45));
}
.portal:active img { transform: scale(1.01); }

/* ----- Section basse sombre (fond BG_2 : l'étagère) -------------------------- */

.lower {
  position: relative;
  background: var(--night-2);
  overflow: hidden;
}

.lower::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("brand_assets/BG/BG_2.png") center / cover no-repeat;
  opacity: 0.85;
}

.lower::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--night-2) 0%, rgba(21, 24, 25, 0.5) 22%, rgba(21, 24, 25, 0.58) 78%, var(--night-2) 100%),
    radial-gradient(90% 70% at 50% 45%, rgba(21, 24, 25, 0) 0%, rgba(21, 24, 25, 0.5) 100%);
}

.lower-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Une seule colonne restante (l'autre a été retirée) : on la recentre au lieu de
   la laisser plaquée à gauche dans la grille à deux colonnes. */
.lower-inner.lower-inner-solo {
  max-width: 640px;
}
@media (min-width: 820px) {
  .lower-inner { grid-template-columns: 1.2fr 1fr; }
  .lower-inner.lower-inner-solo { grid-template-columns: 1fr; }
}

.lower h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
  color: var(--parchment);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.card-list {
  display: grid;
  gap: var(--space-3);
}

/* Vignette : nouveautés & outils */

.thumb-card {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--space-2);
  align-items: center;
  text-decoration: none;
  color: var(--parchment);
  background: rgba(12, 13, 14, 0.55);
  border: 2px solid rgba(223, 185, 100, 0.28);
  border-radius: 10px;
  padding: var(--space-1);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease-spring), border-color 0.25s ease;
}

.thumb-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.thumb-card:active { transform: translateY(-1px); }

.thumb-card .thumb {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--ink);
  aspect-ratio: 16 / 10;
}

.thumb-card .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vignette de remplacement (ancien placeholder externe placehold.co) : un rectangle de
   couleur avec un texte centré, généré entièrement en CSS local — aucune image, aucun appel
   réseau externe. --ph-bg/--ph-fg sont posées en style inline par carte, pour garder la
   même palette que ce que dessinait placehold.co. Occupe tout l'espace du conteneur (.thumb,
   .carte-img, .tile-img, etc.), comme le faisait l'ancienne balise <img>. */
.ph-vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--ph-bg, #17130b);
  color: var(--ph-fg, #eab53a);
}

.thumb-card .thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  mix-blend-mode: multiply;
  opacity: 0.22;
}

.thumb-card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
}

.thumb-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.2rem;
  line-height: 1.35;
}

.thumb-card .meta {
  font-size: 0.82rem;
  color: var(--parchment-deep);
  letter-spacing: 0.03em;
}

.thumb-card:hover h3 { color: var(--gold-bright); }

/* ----- Pied de page ---------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--abyss);
  border-top: 1px solid rgba(223, 185, 100, 0.18);
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.footer-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--parchment-deep);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, transform 0.35s var(--ease-spring);
}

.footer-links a:hover { color: var(--gold-bright); transform: translateY(-3px); }
.footer-links a:active { transform: translateY(0); }

.footer-links img {
  width: 58px;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
  transition: filter 0.25s ease;
}

.footer-links a:hover img {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(234, 181, 58, 0.5));
}

.disclaimer {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(223, 185, 100, 0.55);
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.6;
}

.legal-links {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
}

.legal-links a {
  color: rgba(223, 185, 100, 0.55);
  text-decoration: underline;
  text-decoration-color: rgba(223, 185, 100, 0.3);
  transition: color 0.2s ease;
}

.legal-links a:hover, .legal-links a:focus-visible { color: var(--gold-bright); }

.legal-links span {
  margin: 0 0.55em;
  color: rgba(223, 185, 100, 0.3);
}

/* ----- Pages intérieures (Bibliothèque / Articles) ---------------------------- */

.page-head {
  text-align: center;
  padding: var(--space-4) var(--space-3) 0;
}

.page-head img { width: 96px; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }

.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: 0.04em;
  margin: var(--space-1) 0 0.3rem;
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 6px 14px rgba(0, 0, 0, 0.55);
}

.page-head p {
  margin: 0 auto;
  max-width: 52ch;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 18px rgba(9, 26, 28, 0.9);
}

.page-head p strong { white-space: nowrap; }

.page-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.page-content.wide { max-width: 1500px; }

/* ----- Pages légales (Mentions légales / Confidentialité) --------------------- */

.texte-legal {
  max-width: 760px;
  margin: 0 auto;
  background: #ebd296;
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-card);
}

.texte-legal .maj {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(23, 19, 11, 0.6);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(23, 19, 11, 0.18);
}

.texte-legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: var(--space-5) 0 0.7rem;
}

.texte-legal h2:first-of-type { margin-top: 0; }

.texte-legal h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 0.55rem;
  background: var(--gold-dark);
  border-radius: 2px;
}

.texte-legal p {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

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

.texte-legal a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-color: rgba(138, 95, 13, 0.4);
}

.texte-legal a:hover, .texte-legal a:focus-visible { color: var(--gold-bright); }

.texte-legal strong { color: var(--ink); }

.texte-legal code {
  font-family: monospace;
  font-size: 0.92em;
  background: rgba(23, 19, 11, 0.1);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.texte-legal .note {
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(23, 19, 11, 0.65);
}

@media (max-width: 640px) {
  .texte-legal { padding: var(--space-4) var(--space-3); }
}

.mode-sombre .texte-legal {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}

.mode-sombre .texte-legal .maj { color: rgba(242, 240, 234, 0.55); border-bottom-color: rgba(242, 240, 234, 0.14); }
.mode-sombre .texte-legal h2 { color: var(--sombre-texte); }
.mode-sombre .texte-legal h2::after { background: var(--sombre-accent); }
.mode-sombre .texte-legal p { color: rgba(242, 240, 234, 0.92); }
.mode-sombre .texte-legal a { color: var(--sombre-accent); text-decoration-color: rgba(36, 87, 245, 0.4); }
.mode-sombre .texte-legal a:hover, .mode-sombre .texte-legal a:focus-visible { color: var(--sombre-accent-vif); }
.mode-sombre .texte-legal strong { color: var(--sombre-texte); }
.mode-sombre .texte-legal code { background: rgba(242, 240, 234, 0.12); }
.mode-sombre .texte-legal .note { color: rgba(242, 240, 234, 0.6); }

/* ----- Page Équipe -------------------------------------------------------------- */

.equipe-content {
  padding-top: var(--space-5);
  padding-bottom: 12rem;
}

.equipe-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-5);
  max-width: 1200px;
  margin: var(--space-4) auto 0;
}

.carte-membre {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 74px 2.4rem 2.6rem;
  text-align: center;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(243, 221, 163, 0.08) 0%, rgba(243, 221, 163, 0) 55%),
    linear-gradient(180deg, var(--ink) 0%, #0d0a05 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.membre-avatar {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%),
    var(--gold-dark);
  border: 4px solid var(--gold-bright);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

.membre-avatar img { width: 100%; height: 100%; object-fit: cover; }

.membre-pseudo {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  color: var(--parchment);
}

.membre-role {
  margin: 0.2rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
}

.membre-bio {
  margin: 0.9rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(243, 221, 163, 0.78);
}

/* Variante resserrée : texte un peu plus petit pour qu'une première ligne tienne
   exactement comme demandé (ex. la bio de Lolmam), sans toucher aux autres bios. */
.membre-bio-serre { font-size: 1rem; }

.mode-sombre .carte-membre {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--sombre-surface-2) 0%, var(--sombre-surface) 100%);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}
.mode-sombre .membre-avatar {
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 45%),
    var(--sombre-surface);
  border-color: var(--sombre-accent);
}
.mode-sombre .membre-pseudo { color: var(--sombre-texte); }
.mode-sombre .membre-role { color: var(--sombre-accent); }
.mode-sombre .membre-bio { color: rgba(242, 240, 234, 0.68); }

/* ----- Page Collaborateurs -------------------------------------------------------
   Même mise en page et mêmes couleurs que la page Équipe (grille de cartes
   flottantes, médaillon rond doré identique), juste des cartes plus larges pour
   ce carnet potentiellement plus long. ------------------------------------------ */

.collab-content {
  padding-top: var(--space-5);
  padding-bottom: 12rem;
}

.collab-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-5);
  max-width: 1200px;
  margin: var(--space-4) auto 0;
}

.carte-collab {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: 92vw;
  padding: 104px 2.4rem 2.6rem;
  text-align: center;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(243, 221, 163, 0.08) 0%, rgba(243, 221, 163, 0) 55%),
    linear-gradient(180deg, var(--ink) 0%, #0d0a05 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.collab-avatar {
  position: absolute;
  top: -84px;
  left: 50%;
  transform: translateX(-50%);
  width: 176px;
  height: 176px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%),
    var(--gold-dark);
  border: 5px solid var(--gold-bright);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

.collab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.collab-avatar .ph-vignette { width: 100%; height: 100%; padding: 0; }

.collab-nom {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: 0.01em;
  color: var(--parchment);
}

.collab-espace {
  display: block;
  height: 1.3rem;
}

.collab-liens {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.collab-liens li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-serif);
  font-size: 0.98rem;
}

.collab-lien-label {
  color: var(--parchment-deep);
}

.collab-lien-label::after { content: " :"; }

.collab-liens a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-color: rgba(138, 95, 13, 0.4);
}

.collab-liens a:hover, .collab-liens a:focus-visible { color: var(--gold-bright); }

.collab-bio {
  margin: 1.4rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(243, 221, 163, 0.85);
}

.mode-sombre .carte-collab {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--sombre-surface-2) 0%, var(--sombre-surface) 100%);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}
.mode-sombre .collab-avatar {
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 45%),
    var(--sombre-surface);
  border-color: var(--sombre-accent);
}
.mode-sombre .collab-nom { color: var(--sombre-texte); }
.mode-sombre .collab-lien-label { color: rgba(242, 240, 234, 0.6); }
.mode-sombre .collab-liens a { color: var(--sombre-accent); text-decoration-color: rgba(36, 87, 245, 0.4); }
.mode-sombre .collab-liens a:hover, .mode-sombre .collab-liens a:focus-visible { color: var(--sombre-accent-vif); }
.mode-sombre .collab-bio { color: rgba(242, 240, 234, 0.85); }

/* ----- Lieux Anciens : 2 grandes cartes centrées ------------------------------ */

.lieux-anciens-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .lieux-anciens-grid { grid-template-columns: 1fr; }
}

/* ----- Sanctuaires : 2 catégories ouvertes, cartes fermées (image + nom) ----- */

.sanctuaire-section {
  max-width: 1180px;
  margin: 0 auto calc(var(--space-5) + var(--space-4));
}

.sanctuaire-section:last-child { margin-bottom: 0; }

/* Écart net avant la carte vedette tout en bas de page — pas juste l'espacement normal
   entre deux sections, pour bien la détacher des grilles de livres/tablettes au-dessus. */
.sanctuaire-section-vedette { margin-top: calc(var(--space-5) + var(--space-3)); }

/* Étiquette d'arc discrète : texte + filet, plus légère que la plaque des sanctuaires */
.arc-titre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1180px;
  margin: 0 auto var(--space-2);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(243, 221, 163, 0.6);
}
.arc-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(234, 181, 58, 0.4), rgba(234, 181, 58, 0));
}
.mode-sombre .arc-titre { color: rgba(242, 240, 234, 0.55); }
.mode-sombre .arc-titre::after { background: linear-gradient(90deg, var(--sombre-bordure), rgba(58, 58, 58, 0)); }

/* Objets trouvés : fiches-reliques dans le même système étagère/panneau que les livres, mais habillées en vitrine (pas en parchemin) */
.objets-titre {
  max-width: 1240px;
  margin: calc(var(--space-5) + var(--space-4)) auto var(--space-2);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(9, 26, 28, 0.9);
}
.objet-carte {
  position: relative;
  width: min(440px, 100%);
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: linear-gradient(180deg, #201a10 0%, #140f09 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(234, 181, 58, 0.12);
}
.objet-carte::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(234, 181, 58, 0.32);
  border-radius: 3px;
  pointer-events: none;
}
.objet-img {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(23, 19, 11, 0.7);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.4);
  margin: 0 0 var(--space-3);
}
.objet-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.objet-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}
.objet-corps { display: block; text-align: center; }
.objet-corps .etiquette-panneau { color: var(--gold); margin-bottom: 0.4rem; }
.mode-sombre .objet-corps .etiquette-panneau { color: var(--sombre-accent); }
.objet-eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.3rem;
}
.objet-nom {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--parchment);
}
.objet-nom::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0.55rem auto 0.75rem;
  background: var(--gold-dark);
  border-radius: 2px;
}
.objet-desc {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(243, 221, 163, 0.82);
}
.objet-desc + .objet-desc { margin-top: 0.6rem; }
.mode-sombre .objets-titre { color: var(--sombre-texte); }
.mode-sombre .objet-carte { background: linear-gradient(180deg, var(--sombre-surface-2) 0%, var(--sombre-surface) 100%); border-color: var(--sombre-bordure); box-shadow: var(--sombre-ombre); }
.mode-sombre .objet-carte::before { border-color: rgba(242, 240, 234, 0.18); }
.mode-sombre .objet-eyebrow { color: rgba(242, 240, 234, 0.55); }
.mode-sombre .objet-nom { color: var(--sombre-texte); }
.mode-sombre .objet-nom::after { background: var(--sombre-bordure); }
.mode-sombre .objet-desc { color: rgba(242, 240, 234, 0.68); }

/* Étagère d'objets : vignettes carrées (au lieu des couvertures rectangulaires des livres) */
.shelf.shelf-objets .shelf-img { aspect-ratio: 1 / 1; height: auto; }

/* Vignettes d'objets : brun plutôt que parchemin, pour raccorder avec le panneau-vitrine sombre une fois ouvert */
.shelf-objets .shelf-book {
  background: linear-gradient(160deg, #5c4023 0%, #4a3420 55%, #35240f 100%);
  border-color: var(--gold-dark);
}
.shelf-objets .shelf-book .shelf-img { border-color: var(--gold-dark); }
/* Hauteur uniforme du nom, que le libellé tienne sur 1 ou 2 lignes — sinon les cases
   d'inégale hauteur cassent l'alignement du bas de l'étagère (align-items: flex-end). */
.shelf-objets .shelf-book .shelf-no {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  line-height: 1.3;
}
.shelf-objets .shelf-book .shelf-no { color: var(--parchment); }
.shelf-objets .shelf-book:hover .shelf-no { color: var(--gold-bright); }
.shelf-objets .shelf-book .shelf-title { color: rgba(243, 221, 163, 0.75); }
.shelf-objets .shelf-book.is-open {
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(234, 181, 58, 0.5), var(--shadow-card);
}
.mode-sombre .shelf-objets .shelf-book {
  background: var(--sombre-surface-2);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}
.mode-sombre .shelf-objets .shelf-book .shelf-img { border-color: var(--sombre-bordure); }
.mode-sombre .shelf-objets .shelf-book .shelf-no { color: var(--sombre-texte); }
.mode-sombre .shelf-objets .shelf-book:hover .shelf-no { color: var(--sombre-accent); }
.mode-sombre .shelf-objets .shelf-book .shelf-title { color: rgba(242, 240, 234, 0.65); }
.mode-sombre .shelf-objets .shelf-book.is-open {
  border-color: var(--sombre-accent);
  box-shadow: 0 0 16px rgba(36, 87, 245, 0.4), var(--sombre-ombre);
}

.sanctuaire-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(255, 246, 214, 0.9) 0%, rgba(243, 221, 163, 0) 55%),
    radial-gradient(120% 120% at 88% 100%, rgba(199, 158, 84, 0.5) 0%, rgba(243, 221, 163, 0) 60%),
    var(--parchment);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  box-shadow: var(--shadow-card);
}

.sanctuaire-section-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.sanctuaire-section-count {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: rgba(23, 19, 11, 0.65);
  white-space: nowrap;
}

.mode-sombre .sanctuaire-section-head {
  background: var(--sombre-surface-2);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}

.mode-sombre .sanctuaire-section-name { color: var(--sombre-texte); }
.mode-sombre .sanctuaire-section-count { color: rgba(242, 240, 234, 0.55); }

.sanctuaire-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Une carte seule sur la dernière ligne est recentrée plutôt que collée à gauche. */
.sanctuaire-grid > :last-child:nth-child(3n + 1) { grid-column: 2; }

.carte-sanctuaire {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease-spring), border-color 0.25s ease, box-shadow 0.3s ease;
}

.carte-sanctuaire:hover,
.carte-sanctuaire:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-dark);
  box-shadow: var(--shadow-float), 0 0 20px rgba(234, 181, 58, 0.3);
}

.carte-sanctuaire:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.carte-sanctuaire:active { transform: translateY(-1px); }

.carte-sanctuaire .carte-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.carte-sanctuaire .carte-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-spring);
}
.carte-sanctuaire .carte-img .ph-vignette { transition: transform 0.5s var(--ease-spring); }

.carte-sanctuaire:hover .carte-img img,
.carte-sanctuaire:hover .carte-img .ph-vignette { transform: scale(1.05); }

.carte-sanctuaire .carte-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 40%);
}

.carte-sanctuaire .carte-infos {
  display: block;
  padding: 0.55rem 0.75rem 0.65rem;
}

.carte-sanctuaire .carte-nom {
  display: block;
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--parchment);
  transition: color 0.25s ease;
}

.carte-sanctuaire:hover .carte-nom { color: var(--gold-bright); }

.carte-sanctuaire .carte-count {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: var(--gold);
}

.mode-sombre .carte-sanctuaire {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}

.mode-sombre .carte-sanctuaire:hover,
.mode-sombre .carte-sanctuaire:focus-visible { border-color: var(--sombre-accent); }

.mode-sombre .carte-sanctuaire .carte-nom { color: var(--sombre-texte); }
.mode-sombre .carte-sanctuaire:hover .carte-nom { color: var(--sombre-accent); }
.mode-sombre .carte-sanctuaire .carte-count { color: rgba(242, 240, 234, 0.55); }

@media (max-width: 900px) {
  .sanctuaire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sanctuaire-grid > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .sanctuaire-grid > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; max-width: calc(50% - var(--space-3) / 2); margin: 0 auto; }
}

@media (max-width: 560px) {
  .sanctuaire-grid { grid-template-columns: 1fr; }
  .sanctuaire-grid > :last-child:nth-child(2n + 1) { grid-column: auto; max-width: none; margin: 0; }
}

/* Carte "vide" (aucun livre à collecter) : un <button>, pas un lien — on ne navigue plus
   vers une page à part pour dire qu'il n'y a rien, un petit message suffit sur place. Image
   en noir et blanc pour signaler que ce n'est pas une vraie destination, avant même le clic. */
.carte-sanctuaire-vide {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

.carte-sanctuaire-vide:hover .carte-img img,
.carte-sanctuaire-vide:hover .carte-img .ph-vignette { transform: none; }

/* Surbrillance au survol : la couleur d'accent propre à chaque thème (or en clair,
   bleu en sombre), pas de lift/zoom pour rester sobre vu que la carte est inerte. */
.carte-sanctuaire-vide:hover,
.carte-sanctuaire-vide:focus-visible {
  border-color: var(--gold-dark);
  box-shadow: 0 0 20px rgba(234, 181, 58, 0.3), var(--shadow-card);
  transform: none;
}

.mode-sombre .carte-sanctuaire-vide:hover,
.mode-sombre .carte-sanctuaire-vide:focus-visible {
  border-color: var(--sombre-accent);
  box-shadow: 0 0 12px rgba(36, 87, 245, 0.35), var(--shadow-card);
}

/* Étiquette "Vide" posée sur l'image, en plus du texte "Sans livres" sous la carte —
   visible d'un coup d'œil, avant même de lire la légende. */
.carte-sanctuaire-vide .carte-img::before {
  content: "Vide";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--sombre-texte);
  background: rgba(23, 19, 11, 0.75);
  border: 1px solid var(--sombre-bordure);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* Texte toujours façon "mode sombre" (blanc/gris), même en thème clair — cohérent avec
   la bordure grise permanente ci-dessus, et ça évite un texte noir illisible au survol
   (un <button> hérite d'une couleur de texte par défaut, contrairement à un lien). */
.carte-sanctuaire-vide .carte-nom,
.carte-sanctuaire-vide:hover .carte-nom,
.mode-sombre .carte-sanctuaire-vide .carte-nom,
.mode-sombre .carte-sanctuaire-vide:hover .carte-nom { color: var(--sombre-texte); }

.carte-sanctuaire-vide .carte-count { color: rgba(242, 240, 234, 0.55); }

/* Carte vedette — un sanctuaire rare, mis en avant en pleine largeur au-dessus des grilles
   normales (image + bordure dorée toujours visibles, pas seulement au survol comme les
   cartes ordinaires, pour qu'il se distingue vraiment de la liste). */
.carte-sanctuaire-vedette {
  display: flex;
  align-items: stretch;
  margin-top: var(--space-3);
  background: var(--ink);
  border: 2px solid var(--gold-dark);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-float), 0 0 24px rgba(234, 181, 58, 0.25);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease, border-color 0.25s ease;
}

.carte-sanctuaire-vedette:hover,
.carte-sanctuaire-vedette:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-bright);
  box-shadow: var(--shadow-float), 0 0 32px rgba(234, 181, 58, 0.4);
}

.carte-sanctuaire-vedette:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.carte-sanctuaire-vedette:active { transform: translateY(-1px); }

.carte-sanctuaire-vedette .carte-img {
  position: relative;
  flex: 0 0 42%;
  overflow: hidden;
}

.carte-sanctuaire-vedette .carte-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-spring);
}
.carte-sanctuaire-vedette .carte-img .ph-vignette { transition: transform 0.5s var(--ease-spring); }

.carte-sanctuaire-vedette:hover .carte-img img,
.carte-sanctuaire-vedette:hover .carte-img .ph-vignette { transform: scale(1.05); }

.carte-sanctuaire-vedette .carte-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(23, 19, 11, 0.55));
}

.carte-vedette-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-4);
}

.carte-vedette-nom {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--parchment);
}

.carte-vedette-desc {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(243, 221, 163, 0.75);
}

.mode-sombre .carte-sanctuaire-vedette { background: var(--sombre-surface); border-color: var(--sombre-accent); }
.mode-sombre .carte-vedette-nom { color: var(--sombre-texte); }
.mode-sombre .carte-vedette-desc { color: rgba(242, 240, 234, 0.65); }

@media (max-width: 700px) {
  .carte-sanctuaire-vedette { flex-direction: column; }
  .carte-sanctuaire-vedette .carte-img { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .carte-sanctuaire-vedette .carte-img::after { background: linear-gradient(to top, rgba(23, 19, 11, 0.55), transparent 40%); }
}

.hall-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.35s var(--ease-spring);
}

.hall-tile:hover { transform: translateY(-5px); }
.hall-tile:active { transform: translateY(-1px); }

.hall-tile .tile-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease;
}

.hall-tile:hover .tile-img { box-shadow: var(--shadow-float), 0 0 24px rgba(234, 181, 58, 0.35); }

.hall-tile .tile-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-spring);
}
.hall-tile .tile-img .ph-vignette { transition: transform 0.5s var(--ease-spring); }

.hall-tile:hover .tile-img img,
.hall-tile:hover .tile-img .ph-vignette { transform: scale(1.06); }

.hall-tile .tile-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--teal);
  mix-blend-mode: multiply;
  opacity: 0.18;
}

.hall-tile .tile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
}

.hall-tile .tile-name {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 5px 10px rgba(0, 0, 0, 0.5);
  transition: color 0.25s ease;
}

.hall-tile:hover .tile-name { color: var(--gold-bright); }

.hall-tile .tile-count {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--parchment);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 12px rgba(9, 26, 28, 0.9);
}

/* ----- Fil d'Ariane ----------------------------------------------------------- */

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) 0;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--parchment);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 12px rgba(9, 26, 28, 0.9);
}

.breadcrumb a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 221, 163, 0.45);
  transition: color 0.2s ease;
}

.breadcrumb a:hover { color: var(--gold-bright); }

.breadcrumb .sep-arrow { margin: 0 0.45rem; color: var(--parchment-deep); }

/* ----- Aile : sagas dépliables ------------------------------------------------ */

.saga {
  margin-bottom: var(--space-3);
}

.saga summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 246, 214, 0.42) 0%, rgba(243, 221, 163, 0) 55%),
    radial-gradient(120% 120% at 85% 100%, rgba(170, 130, 62, 0.55) 0%, rgba(243, 221, 163, 0) 60%),
    #ccb172;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 0.8rem var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-spring), background-color 0.25s ease;
}

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

.saga summary:hover {
  transform: translateY(-2px);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 246, 214, 0.52) 0%, rgba(243, 221, 163, 0) 55%),
    radial-gradient(120% 120% at 85% 100%, rgba(170, 130, 62, 0.55) 0%, rgba(243, 221, 163, 0) 60%),
    #d5bb7d;
}
.saga summary:active { transform: translateY(0); }

/* Mini-étagère incrustée dans la barre : une tranche par fable, teinte de la saga. */
.mini-rayon {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  padding: 3px 7px 0;
  margin-right: 0.9rem;
  background: linear-gradient(180deg, #1b150c 0%, #141008 100%);
  border: 2px solid rgba(23, 19, 11, 0.85);
  border-bottom: 4px solid #533b22;
  border-radius: 5px 5px 3px 3px;
  box-shadow: inset 0 4px 6px -3px rgba(0, 0, 0, 0.8);
}
.mini-livre {
  display: block;
  width: 5px;
  border-radius: 1px 1px 0 0;
  background-color: var(--livre, #533b22);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.25) 100%);
}
.saga summary:hover .mini-livre { filter: brightness(1.25) saturate(1.15); }

.saga .saga-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.saga summary:hover .saga-name { color: var(--gold-dark); }

.saga .saga-count {
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: rgba(23, 19, 11, 0.7);
  white-space: nowrap;
}

.saga-chevron {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
  transition: transform 0.3s var(--ease-spring);
}

.saga[open] .saga-chevron { transform: rotate(45deg); }

.fable-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2);
  background: rgba(12, 13, 14, 0.45);
  border: 2px solid rgba(223, 185, 100, 0.28);
  border-radius: 10px;
}

.fable-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
  color: var(--parchment);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.3s var(--ease-spring);
}

a.fable-link:hover { border-color: var(--gold); transform: translateX(4px); color: var(--gold-bright); }
a.fable-link:active { transform: translateX(1px); }

.fable-link .initial {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--parchment);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Fable "vide" (aucun journal en jeu pour ce chapitre) : même logique que les cartes
   d'aventures sans livre — un <button> plutôt qu'un lien, pas de navigation vers une
   page à part, juste un petit message au clic. */
.fable-link-vide {
  font: inherit;
  width: 100%;
  text-align: left;
  background: none;
  cursor: pointer;
  color: rgba(242, 240, 234, 0.5);
}

.fable-link-vide .initial { filter: grayscale(1); opacity: 0.6; }

.fable-link-vide:hover,
.fable-link-vide:focus-visible {
  border-color: var(--gold);
  color: rgba(242, 240, 234, 0.5);
  transform: none;
}

.mode-sombre .fable-link-vide:hover,
.mode-sombre .fable-link-vide:focus-visible { border-color: var(--sombre-accent); }

/* ----- Page de lecture d'une fable -------------------------------------------- */

.shelf-heading {
  max-width: 1240px;
  margin: 0 auto var(--space-2);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(9, 26, 28, 0.9);
}

.shelf-heading.is-second { margin-top: var(--space-5); }

/* Étagère ajustée : la planche se resserre à la largeur des livres
   (léger débord de chaque côté), au lieu d'occuper toute la page */
.shelf.shelf-ajuste {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* Deux étagères côte à côte (chaque colonne = titre + étagère + panneaux) */
.duo-etageres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.duo-etageres .shelf-heading.is-second { margin-top: 0; }
.duo-etageres .shelf-toolbar { max-width: none; justify-content: center; }
.duo-etageres + .duo-etageres,
.reading-row + .duo-etageres { margin-top: var(--space-5); }
.shelf + .duo-etageres { margin-top: var(--space-4); }

@media (max-width: 940px) {
  .duo-etageres { grid-template-columns: 1fr; }
  .duo-etageres > section + section { margin-top: var(--space-4); }
}

.shelf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* Planche cerclée de fer : lattes assemblées, avec deux ferrures rivetées en relief aux
   extrémités (vrais éléments .iron-band, injectés une fois par shelf-injections.js — voir
   plus bas — pour pouvoir dépasser la planche comme de vraies pièces de métal rapportées,
   ce qu'un simple calque de fond ne permet pas). ::after reste hors flux, donc ignoré par
   le calcul de largeur fit-content de .shelf-ajuste / .shelf-multiligne. */
.shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  border-radius: 2px;
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.25) 100%),
    repeating-linear-gradient(90deg, #4a3320 0px, #4a3320 118px, #241a10 118px, #241a10 122px);
  background-blend-mode: overlay, normal, normal;
  box-shadow:
    0 10px 18px -6px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}

.iron-band {
  position: absolute;
  bottom: -7px;
  width: 46px;
  height: 34px;
  background: linear-gradient(180deg, #34302b 0%, #1c1915 60%, #100e0c 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
}
.iron-band.left { left: -20px; }
.iron-band.right { right: -20px; }
.iron-band::before,
.iron-band::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a89a86 0%, #55493a 55%, #221c15 100%);
  transform: translateX(-50%);
}
.iron-band::before { top: 6px; }
.iron-band::after { bottom: 6px; }

/* Version réduite pour les étagères compactes de l'espace de travail */
.iron-band-petite {
  width: 28px;
  height: 20px;
  bottom: -4px;
}
.iron-band-petite.left { left: -12px; }
.iron-band-petite.right { right: -12px; }
.iron-band-petite::before,
.iron-band-petite::after {
  width: 4px;
  height: 4px;
}
.iron-band-petite::before { top: 4px; }
.iron-band-petite::after { bottom: 4px; }

/* Étagères compactes de l'espace de travail : même esprit, avec des ferrures réduites (voir .iron-band-petite). */
.etagere-espace::after {
  height: 12px;
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.25) 100%),
    repeating-linear-gradient(90deg, #4a3320 0px, #4a3320 70px, #241a10 70px, #241a10 73px);
  background-blend-mode: overlay, normal, normal;
  box-shadow:
    0 6px 10px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.shelf.shelf-3col { max-width: 1520px; }
.shelf + .shelf { margin-top: var(--space-4); }
.shelf.shelf-narrow { max-width: 702px; }

/* Étagères regroupées en vraies lignes (voir equilibrerEtageres() dans espace.js), pour que
   la ligne du bas soit aussi pleine ou plus pleine que celle du haut. On passe la case en
   colonne : chaque .shelf-ligne garde sa largeur naturelle, et le fit-content se cale sur la
   plus large d'entre elles (contrairement à un simple retour à la ligne forcé dans une liste
   à plat, qui casse ce calcul et étire la case en pleine largeur).
   Le fit-content est appliqué ici, sur la classe ajoutée automatiquement par le JS dès qu'une
   étagère déborde sur 2 lignes ou plus — peu importe si la page utilise .shelf-ajuste,
   .shelf-3col, .shelf-narrow ou rien : la case colle toujours à son contenu, sans dépendre
   du bon choix de classe au moment de la création de la page. */
.shelf.shelf-multiligne {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.shelf-ligne {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
}
.shelf-ligne + .shelf-ligne { margin-top: var(--space-3); }

.shelf-book {
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.5rem 0.7rem;
  font: inherit;
  cursor: pointer;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 246, 214, 0.9) 0%, rgba(243, 221, 163, 0) 55%),
    var(--parchment);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.25s ease, border-color 0.25s ease;
}

.shelf-book:hover { transform: translateY(-4px); }
.shelf-book:active { transform: translateY(-1px); }

.shelf-book.is-open {
  border-color: var(--gold-dark);
  box-shadow: 0 0 16px rgba(234, 181, 58, 0.45), var(--shadow-card);
}

.shelf-book .shelf-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--ink);
  border-radius: 5px;
  overflow: hidden;
}

.shelf-book .shelf-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shelf-book .shelf-no {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.shelf-book:hover .shelf-no { color: var(--gold-dark); }

/* Auteur — même police/couleur/gabarit que le numéro juste au-dessus, pour lire les deux
   comme un seul bloc en 2 lignes. Resserré via des marges négatives (le gap normal entre
   enfants du .shelf-book flex laisserait un espace trop large). Toujours sur une seule
   ligne, quelle que soit la longueur du nom : ajusterAuteurs() dans espace.js réduit la
   taille par paliers jusqu'à ce que ça tienne (l'ellipsis ci-dessous est un filet de
   sécurité si jamais le nom est vraiment trop long même réduit au minimum). */
.shelf-no:has(+ .shelf-auteur) { margin-bottom: -0.3rem; }
/* Variante pour un numéro qui retombe sur 2 lignes (ex. « Journal 1 des habitants » sur
   capitaines-des-damnes.html) : la ligne resserrée -0.3rem est prévue pour un numéro sur
   une seule ligne — sur 2 lignes, elle rapproche trop la ligne d'auteur du numéro, et son
   line-height hérité (1.7 du body) espace trop les 2 lignes du numéro entre elles. On
   resserre l'interligne interne ET on desserre la ligne d'auteur, mais UNIQUEMENT via
   cette classe, jamais en modifiant .shelf-no de base (qui reste inchangé partout ailleurs
   sur le site — ne pas généraliser cette variante sans qu'on le redemande). */
.shelf-no.shelf-no-multiligne { line-height: 1.15; }
.shelf-no.shelf-no-multiligne:has(+ .shelf-auteur) { margin-bottom: -0.05rem; }
.shelf-auteur {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-top: -0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelf-book .shelf-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.3;
  text-align: center;
  color: rgba(23, 19, 11, 0.75);
}

/* Le titre ne s'affiche plus sur l'étagère (fermée) : il reste réservé au panneau de
   lecture, une fois le livre ouvert — ça évite d'empiler numéro + auteur + titre sur une
   carte étroite, et ça uniformise la hauteur des cartes entre elles. Exception : sur
   .shelf-objets, le "titre" sert en réalité de sous-légende (le lieu de découverte de
   l'objet), pas un titre de livre — il reste donc visible. */
.shelf:not(.shelf-objets) .shelf-book .shelf-title {
  display: none;
}

/* Étagères de lecture (pas celles de l'espace de travail, déjà compactes) : livres réduits
   sur mobile pour que 2 tiennent côte à côte au lieu d'empiler l'étagère en une seule
   colonne verticale — sinon, sur une page à beaucoup de livres (ex. les 8 journaux des
   contrebandiers), ouvrir un livre envoie très loin en bas, et en ouvrir un deuxième oblige
   à remonter tout en haut. Mêmes valeurs que .etagere-espace .shelf-book (déjà éprouvées à
   cette taille), pour rester cohérent avec l'existant plutôt qu'inventer un nouveau gabarit. */
@media (max-width: 700px) {
  .shelf:not(.etagere-espace) .shelf-book {
    width: 128px;
    gap: 0.2rem;
    padding: 0.35rem 0.35rem 0.45rem;
  }
  .shelf:not(.etagere-espace) .shelf-book .shelf-no { font-size: 1.05rem; }
  .shelf:not(.etagere-espace) .shelf-book .shelf-auteur { font-size: 0.85rem; }
}

/* Vidéo : vignette 16/9 façon .shelf-book (cadre encre, ombre, halo à l'ouverture). Le clic
   ouvre juste la description en dessous — aucun embed, aucun script externe : un lien texte
   vers le tweet/la vidéo est fourni en tête de la description (.video-titre). */
.video-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 500px;
  margin: 0 auto;
}
.video-vignette {
  width: 100%;
  display: block;
  position: relative;
  padding: 0;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.25s ease, border-color 0.25s ease;
}
.video-vignette:hover { transform: translateY(-4px); }
.video-vignette:active { transform: translateY(-1px); }
.video-vignette.is-open {
  border-color: var(--gold-dark);
  box-shadow: 0 0 16px rgba(234, 181, 58, 0.45), var(--shadow-card);
}
.video-vignette .video-img { display: block; width: 100%; aspect-ratio: 16 / 9; }
.video-vignette .video-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-vignette .video-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.55rem 0.9rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-align: left;
}
.video-panneau {
  width: 100%;
  background: #ebd296;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: var(--space-3);
  box-shadow: 0 2px 8px rgba(12, 10, 4, 0.35);
}
.video-titre {
  margin: 0 0 var(--space-2);
  text-align: center;
}
.video-titre a {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration-color: var(--gold-dark);
}
.video-titre a:hover { color: var(--gold-dark); }
.mode-sombre .video-panneau { background: var(--sombre-surface); border-color: var(--sombre-bordure); box-shadow: var(--sombre-ombre); }
.mode-sombre .video-vignette { border-color: var(--sombre-bordure); }
.mode-sombre .video-vignette.is-open { border-color: var(--sombre-accent); box-shadow: 0 0 16px rgba(36, 87, 245, 0.35), var(--sombre-ombre); }
.mode-sombre .video-titre a { color: var(--sombre-texte); text-decoration-color: var(--sombre-accent); }
.mode-sombre .video-titre a:hover { color: var(--sombre-accent); }

/* Panneaux de lecture étroits, côte à côte */

.reading-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.book-panel {
  width: min(440px, 100%);
  background: #ebd296;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: var(--space-3);
  box-shadow: 0 2px 8px rgba(12, 10, 4, 0.35);
}

.book-panel h2 {
  margin: 0 0 var(--space-2);
  text-align: center;
  font-weight: 400;
}

.book-panel h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin: 0.65rem auto 0;
  background: var(--gold-dark);
  border-radius: 2px;
}

.book-panel .panel-no {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* Auteur du panneau ouvert — même principe que .shelf-auteur (voir plus haut), à l'échelle
   du panel-no (plus grand que le shelf-no de l'étagère fermée). */
.book-panel .panel-no:has(+ .panel-auteur) { margin-bottom: -0.35rem; }
.book-panel .panel-auteur {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-top: -0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-panel .panel-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: rgba(23, 19, 11, 0.8);
}

.book-panel .panel-lieu {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(23, 19, 11, 0.5);
  margin-top: 0.15rem;
}

.book-pages p {
  position: relative;
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(23, 19, 11, 0.18);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(23, 19, 11, 0.94);
}

.book-pages p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.book-pages p:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 9px;
  height: 9px;
  background: var(--gold-dark);
  border: 2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

/* Format « script » pour les sous-titres des Visions de l'Orbe : didascalies entre parenthèses
   (ex. « (The Orb shows Stitcher Jim.) ») + répliques avec le nom du locuteur en label. */
.book-pages p.script-didascalie {
  font-style: italic;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(23, 19, 11, 0.55);
}
.book-pages p.script-ligne .script-nom {
  display: inline;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  margin-right: 0.45em;
}
.mode-sombre .book-pages p.script-didascalie { color: rgba(242, 240, 234, 0.45); }
.mode-sombre .book-pages p.script-ligne .script-nom { color: var(--sombre-accent); }

/* Sous-entrées dépliables : plusieurs récits « « Titre » » dans un même livre, chacun clairement délimité */
.book-pages details.sous-entree {
  margin: 0 0 0.9rem;
  border: 1px solid rgba(23, 19, 11, 0.25);
  border-radius: 6px;
  background: rgba(23, 19, 11, 0.05);
}

.book-pages details.sous-entree:last-child { margin-bottom: 0; }

.book-pages details.sous-entree summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: rgba(23, 19, 11, 0.85);
}

.book-pages details.sous-entree summary::-webkit-details-marker { display: none; }

.book-pages details.sous-entree summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold-dark);
  border-bottom: 2px solid var(--gold-dark);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-spring);
}

.book-pages details.sous-entree[open] summary::after { transform: rotate(-135deg); }

.book-pages details.sous-entree summary:hover { color: var(--gold-dark); }
.book-pages details.sous-entree summary:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }

.book-pages details.sous-entree .sous-entree-corps {
  padding: 0 0.85rem 0.75rem;
}

.book-pages details.sous-entree .sous-entree-corps p {
  font-size: 0.94rem;
}

.mode-sombre .book-pages details.sous-entree {
  border-color: var(--sombre-bordure);
  background: rgba(242, 240, 234, 0.04);
}
.mode-sombre .book-pages details.sous-entree summary { color: var(--sombre-texte); }
.mode-sombre .book-pages details.sous-entree summary::after { border-color: var(--sombre-accent); }
.mode-sombre .book-pages details.sous-entree summary:hover { color: var(--sombre-accent); }
.mode-sombre .book-pages details.sous-entree summary:focus-visible { outline-color: var(--sombre-accent); }

.fable-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.fable-nav a,
.fable-nav .disabled {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--parchment);
  padding: 0.5rem 1rem;
  border: 2px solid rgba(223, 185, 100, 0.4);
  border-radius: 8px;
  background: rgba(12, 13, 14, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--ease-spring);
}

.fable-nav a:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.fable-nav a:active { transform: translateY(0); }
.fable-nav .disabled { opacity: 0.45; }

/* ----- Mouvement réduit -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .bibliocase, .livre { transition: none; }
  .bibliocase:hover { transform: none; }
  .bibliocase:hover .l-vedette, .casier:hover .l-vedette { transform: none; }
}

/* ----- La lanterne : bascule du mode sombre ----------------------------------- */

.lanterne {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--gold-bright);
  background: var(--night);
  border: 2px solid var(--gold-dark);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.25s ease;
}

.lanterne:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(234, 181, 58, 0.35);
}

.lanterne:active { transform: translateY(0); }

.lanterne .flamme { transition: opacity 0.3s ease; }

.mode-sombre .lanterne .flamme { opacity: 0; }
.mode-sombre .lanterne { color: var(--sombre-accent); border-color: var(--sombre-accent-vif); }

.mode-sombre .lanterne:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(36, 87, 245, 0.4);
}

/* ----- Mode sombre : les parchemins s'éteignent --------------------------------
   Palette fournie par l'éditeur : gris/noir en surfaces (majoritaires),
   bleu réservé aux petits accents (survol, ouverture, séparateurs), texte blanc. */

.mode-sombre .book-panel {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}

.mode-sombre .book-panel h2::after { background: var(--sombre-accent); }
.mode-sombre .book-panel .panel-no { color: var(--sombre-texte); }
.mode-sombre .book-panel .panel-auteur { color: var(--sombre-texte); }
.mode-sombre .book-panel .panel-title { color: rgba(242, 240, 234, 0.68); }
.mode-sombre .book-panel .panel-lieu { color: rgba(242, 240, 234, 0.5); }

.mode-sombre .book-pages p {
  color: rgba(242, 240, 234, 0.92);
  border-bottom-color: rgba(242, 240, 234, 0.14);
}

.mode-sombre .book-pages p:not(:last-child)::after {
  background: var(--sombre-accent);
  border-color: var(--sombre-surface);
}

.mode-sombre .shelf::after {
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(90deg, var(--sombre-surface-2) 0px, var(--sombre-surface-2) 118px, var(--sombre-surface) 118px, var(--sombre-surface) 122px);
  box-shadow:
    var(--sombre-ombre),
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 8px rgba(0, 0, 0, 0.4);
}

.mode-sombre .iron-band {
  background: linear-gradient(180deg, var(--sombre-surface-2) 0%, var(--sombre-surface) 60%, #050505 100%);
}
.mode-sombre .iron-band::before,
.mode-sombre .iron-band::after {
  background: radial-gradient(circle at 35% 30%, #8a8a8a 0%, #4a4a4a 55%, #161616 100%);
}

.mode-sombre .etagere-espace::after {
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(90deg, var(--sombre-surface-2) 0px, var(--sombre-surface-2) 70px, var(--sombre-surface) 70px, var(--sombre-surface) 73px);
  box-shadow: var(--sombre-ombre);
}

.mode-sombre .shelf-book {
  background: var(--sombre-surface-2);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}

.mode-sombre .shelf-book .shelf-no { color: var(--sombre-texte); }
.mode-sombre .shelf-book:hover .shelf-no { color: var(--sombre-accent); }
.mode-sombre .shelf-book .shelf-auteur { color: var(--sombre-texte); }
.mode-sombre .shelf-book .shelf-title { color: rgba(242, 240, 234, 0.65); }
.mode-sombre .shelf-book .shelf-img { border-color: var(--sombre-bordure); }

.mode-sombre .shelf-book.is-open {
  border-color: var(--sombre-accent);
  box-shadow: 0 0 16px rgba(36, 87, 245, 0.4), var(--sombre-ombre);
}

.mode-sombre .saga summary,
.mode-sombre .saga summary:hover {
  background: var(--sombre-surface-2);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}
.mode-sombre .saga summary:hover { background: var(--sombre-surface); }

.mode-sombre .saga .saga-name { color: var(--sombre-texte); }
.mode-sombre .saga summary:hover .saga-name { color: var(--sombre-accent); }
.mode-sombre .saga .saga-count { color: rgba(242, 240, 234, 0.6); }
.mode-sombre .saga-chevron { border-color: var(--sombre-texte); }

.mode-sombre .fable-list {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
}

.mode-sombre .fable-link { color: var(--sombre-texte); }

.mode-sombre .fable-link .initial {
  background: var(--sombre-surface);
  color: var(--sombre-texte);
  border-color: var(--sombre-bordure);
}

.mode-sombre .fable-link-vide,
.mode-sombre .fable-link-vide:hover { color: rgba(242, 240, 234, 0.5); }
.mode-sombre .fable-link-vide .initial { filter: grayscale(1); opacity: 0.6; }

.mode-sombre a.fable-link:hover { border-color: var(--sombre-accent); color: var(--sombre-accent); }

.mode-sombre .tag { background: var(--sombre-accent-vif); color: var(--sombre-texte); }

/* ----- Espace de travail : punaises, toast et page dédiée ---------------------- */

.book-panel { position: relative; }

.pin-livre {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: rgba(23, 19, 11, 0.5);
  background: transparent;
  border: 2px solid rgba(23, 19, 11, 0.3);
  border-radius: 50%;
  transition: transform 0.3s var(--ease-spring), border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pin-livre:hover { transform: translateY(-2px); border-color: var(--gold-dark); color: var(--gold-dark); }
.pin-livre:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.pin-livre:active { transform: translateY(0); }

.pin-livre.is-epingle {
  background: var(--gold-dark);
  border-color: var(--ink);
  color: #f6ead0;
}

.mode-sombre .pin-livre { color: rgba(242, 240, 234, 0.5); border-color: var(--sombre-bordure); }
.mode-sombre .pin-livre:hover { border-color: var(--sombre-accent); color: var(--sombre-accent); }
.mode-sombre .pin-livre:focus-visible { outline-color: var(--sombre-accent); }

.mode-sombre .pin-livre.is-epingle {
  background: var(--sombre-accent);
  border-color: var(--sombre-surface);
  color: var(--sombre-texte);
}

/* Punaise des objets : posée sur la vignette de l'étagère (brune en mode jour), pas dans le panneau ouvert */
.shelf-objets .pin-livre-coin { color: rgba(243, 221, 163, 0.7); border-color: rgba(243, 221, 163, 0.4); background: rgba(23, 19, 11, 0.35); }
.shelf-objets .pin-livre-coin:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.shelf-objets .pin-livre-coin.is-epingle { background: var(--gold-dark); border-color: rgba(23, 19, 11, 0.4); color: #f6ead0; }

/* En mode sombre, la vignette redevient grise comme un livre classique : la punaise doit suivre (gris/gris clair/bleu au survol) */
.mode-sombre .shelf-objets .pin-livre-coin { color: rgba(242, 240, 234, 0.5); border-color: var(--sombre-bordure); background: transparent; }
.mode-sombre .shelf-objets .pin-livre-coin:hover { border-color: var(--sombre-accent); color: var(--sombre-accent); }
.mode-sombre .shelf-objets .pin-livre-coin:focus-visible { outline-color: var(--sombre-accent); }
.mode-sombre .shelf-objets .pin-livre-coin.is-epingle { background: var(--sombre-accent); border-color: var(--sombre-surface); color: var(--sombre-texte); }

.toast-espace {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 70;
  max-width: min(90vw, 400px);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--parchment);
  background: var(--night);
  border: 2px solid var(--gold-dark);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-spring);
}

.toast-espace.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.toast-espace a { color: var(--gold-bright); }

.mode-sombre .toast-espace {
  background: var(--sombre-surface-2);
  border-color: var(--sombre-accent-vif);
  color: var(--sombre-texte);
}

.mode-sombre .toast-espace a { color: var(--sombre-accent); }

/* ----- Notes de l'équipe : pastille « Note * » + message dans le toast ------------- */

.note-pastille {
  position: relative;
  flex: none;
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-dark);
  background: rgba(207, 145, 24, 0.16);
  border: 1px solid var(--gold-dark);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), background-color 0.2s ease, color 0.2s ease;
}

.note-pastille::before { content: ""; position: absolute; inset: -0.45rem -0.3rem; }
.note-pastille:hover { transform: translateY(-1px); background: var(--gold-dark); color: #f6ead0; }
.note-pastille:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.note-pastille:active { transform: translateY(0); }
.note-pastille.is-active { background: var(--gold-dark); color: #f6ead0; }

.mode-sombre .note-pastille { color: var(--sombre-accent); background: rgba(36, 87, 245, 0.12); border-color: var(--sombre-accent); }
.mode-sombre .note-pastille:hover,
.mode-sombre .note-pastille.is-active { background: var(--sombre-accent); color: var(--sombre-texte); }
.mode-sombre .note-pastille:focus-visible { outline-color: var(--sombre-accent); }

/* Livre sans menu déroulant : la pastille se centre sous le titre (dans le menu déroulant, elle va dans le <summary>) */
.note-ligne { display: flex; justify-content: center; margin: -0.3rem 0 var(--space-2); }
.note-ligne .note-pastille { margin-left: 0; }

/* Version agrandie, pour les notes qui concernent tout le contenu de la page (transcriptions des visions de l'Orbe) */
.note-pastille-grande { padding: 0.3rem 0.9rem; font-size: 0.88rem; letter-spacing: 0.05em; }

.toast-note { cursor: pointer; max-width: min(90vw, 440px); line-height: 1.5; }
.toast-note strong { color: var(--gold-bright); font-weight: 700; margin-right: 0.3em; }
.mode-sombre .toast-note strong { color: var(--sombre-accent); }

.espace-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.compteur-espace {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--gold-bright);
  padding: 0.4rem 1.1rem;
  border: 2px solid rgba(223, 185, 100, 0.4);
  border-radius: 999px;
  background: rgba(12, 13, 14, 0.5);
}

.btn-vider {
  font: inherit;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--parchment);
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  border: 2px solid rgba(223, 185, 100, 0.4);
  border-radius: 999px;
  background: rgba(12, 13, 14, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--ease-spring);
}

.btn-vider:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.btn-vider:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-vider:active { transform: translateY(0); }

.shelf-book { position: relative; }

.etiquette-origine {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--gold-bright);
  background: var(--ink);
  border: 1px solid rgba(207, 145, 24, 0.6);
  border-radius: 999px;
  padding: 0.12rem 0.75rem;
}

.mode-sombre .etiquette-origine {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
  color: var(--sombre-accent);
}

.etiquette-panneau {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  text-decoration: none;
}

a.etiquette-panneau:hover,
a.etiquette-panneau:focus-visible { text-decoration: underline; }

.mode-sombre .etiquette-panneau { color: var(--sombre-accent); }

.shelf-slot {
  width: 210px;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  border: 2px dashed rgba(243, 221, 163, 0.3);
  border-radius: 8px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: rgba(243, 221, 163, 0.5);
}

.mode-sombre .shelf-slot { border-color: var(--sombre-bordure); color: rgba(242, 240, 234, 0.4); }

.espace-vide {
  max-width: 560px;
  margin: var(--space-4) auto;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.espace-vide a { color: var(--gold-bright); }

/* ----- Page espace de travail (v2 « subtile ») -------------------------------- */
/* Fond BG_9 (le bureau d'écriture) peu assombri ; étagères compactes en retrait ;
   la table de lecture est le cœur de la page, aucun livre ouvert par défaut.     */

.fixed-bg.bg-espace { background-image: url("brand_assets/BG/BG_9.png"); }

.fixed-bg.bg-espace::after {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(9, 26, 28, 0) 55%, rgba(9, 26, 28, 0.35) 100%),
    linear-gradient(rgba(9, 26, 28, 0.14), rgba(9, 26, 28, 0.14));
}

.espace-tete {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.espace-tete h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 6px 14px rgba(0, 0, 0, 0.55);
}

.espace-sous-titre {
  margin: 0.2rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.espace-tete .espace-actions { margin-bottom: 0.3rem; justify-content: flex-end; }

.mode-sombre .compteur-espace { border-color: var(--sombre-bordure); color: var(--sombre-accent); }
.mode-sombre .btn-vider { border-color: var(--sombre-bordure); color: var(--sombre-texte); }
.mode-sombre .btn-vider:hover { border-color: var(--sombre-accent); color: var(--sombre-accent); }

/* Page courte : le pied de page reste collé en bas de l'écran. */

.pleine-hauteur {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pleine-hauteur main { flex: 1; }

/* Étagères compactes : un outil discret, pas le centre de l'attention.
   Les deux étagères sont côte à côte, sur la largeur de la table de lecture. */

.etageres-espace {
  width: calc(100% - 2 * var(--space-3));
  max-width: 1500px;
  margin: var(--space-2) auto var(--space-3);
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.etagere-espace { flex: 1; gap: var(--space-2); border-bottom-width: 8px; }

.etagere-espace + .etagere-espace { margin-top: 0; }

@media (max-width: 1100px) {
  .etageres-espace { flex-wrap: wrap; }
  .etagere-espace { flex: 1 1 100%; }
}

.shelf-book-wrap { position: relative; }

.etagere-espace .shelf-book {
  width: 128px;
  gap: 0.2rem;
  padding: 0.35rem 0.35rem 0.45rem;
  border-width: 2px;
}

/* La punaise reste sur le coin du livre, sur l'étagère — jamais dans le panneau ouvert. */
.pin-livre-coin {
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  z-index: 2;
}

.etagere-espace .shelf-book .shelf-img { aspect-ratio: 3 / 4; }

.etagere-espace .shelf-no {
  font-size: 1rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* Auteur sur la vignette compacte de l'espace de travail — mêmes proportions que
   .shelf-auteur ailleurs sur le site (même resserrement avec le numéro), mais à l'échelle
   réduite de cette étagère. */
.etagere-espace .shelf-no:has(+ .shelf-auteur) { margin-bottom: -0.2rem; }
.etagere-espace .shelf-auteur {
  font-size: 0.78rem;
  margin-top: -0.15rem;
}

.etagere-espace .etiquette-origine {
  position: static;
  transform: none;
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--gold-dark);
  font-size: 0.72rem;
}

.mode-sombre .etagere-espace .etiquette-origine {
  background: transparent;
  border: none;
  color: var(--sombre-accent);
}

/* Punaise d'étagère : épingle tous les livres d'une catégorie d'un coup
   (pages de lecture uniquement — jamais sur les étagères de l'espace de travail). */

.shelf-toolbar {
  max-width: 1240px;
  margin: 0 auto 0.6rem;
  display: flex;
  justify-content: flex-end;
}

.pin-etagere {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: rgba(243, 221, 163, 0.85);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  background: rgba(12, 13, 14, 0.5);
  border: 2px solid rgba(223, 185, 100, 0.4);
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--ease-spring);
}

.pin-etagere:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.pin-etagere:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pin-etagere:active { transform: translateY(0); }

.mode-sombre .pin-etagere { border-color: var(--sombre-bordure); color: var(--sombre-texte); }
.mode-sombre .pin-etagere:hover { border-color: var(--sombre-accent); color: var(--sombre-accent); }

/* Aperçu : survoler la punaise d'étagère met en valeur les livres concernés. */
.shelf-toolbar:hover + .shelf .shelf-book {
  border-color: var(--gold-dark);
  box-shadow: 0 0 12px rgba(234, 181, 58, 0.35), var(--shadow-card);
}

.mode-sombre .shelf-toolbar:hover + .shelf .shelf-book {
  border-color: var(--sombre-accent);
  box-shadow: 0 0 12px rgba(36, 87, 245, 0.35), var(--sombre-ombre);
}

.etagere-espace .shelf-slot {
  width: 128px;
  min-height: 212px;
  border-radius: 6px;
  font-size: 0.8rem;
}

/* La table de lecture : le vrai espace de travail. */

.table-lecture {
  width: calc(100% - 2 * var(--space-3));
  max-width: 1500px;
  margin: 0 auto var(--space-5);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid rgba(223, 185, 100, 0.45);
  border-radius: 14px;
  background: rgba(243, 234, 210, 0.07);
  min-height: 280px;
}

.table-lecture-titre {
  margin: 0 0 var(--space-3);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.table-indication {
  max-width: 380px;
  margin: var(--space-3) auto;
  padding: var(--space-3);
  border: 2px dashed rgba(223, 185, 100, 0.45);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(243, 221, 163, 0.8);
}

.mode-sombre .table-lecture { border-color: var(--sombre-bordure); background: rgba(23, 20, 15, 0.35); }
.mode-sombre .table-lecture-titre { color: rgba(242, 240, 234, 0.6); }
.mode-sombre .table-indication { border-color: var(--sombre-bordure); color: rgba(242, 240, 234, 0.7); }

/* ----- Page 404 : la Mer des Damnés ------------------------------------------ */
/* Fond dédié (404_BG.jpg, mer de lave) — texte simple, pas de carte.            */

:root {
  --404-braise: #ff7a3d;
  --404-braise-vive: #ffb27a;
}

.fixed-bg.bg-404 { background-image: url("brand_assets/BG/404_BG.jpg"); }

.fixed-bg.bg-404::after {
  background:
    radial-gradient(70% 55% at 82% 8%, rgba(255, 178, 122, 0.14) 0%, rgba(255, 178, 122, 0) 55%),
    radial-gradient(120% 90% at 50% 100%, rgba(6, 4, 3, 0.05) 0%, rgba(6, 4, 3, 0.4) 100%),
    linear-gradient(rgba(8, 5, 4, 0.12), rgba(8, 5, 4, 0.12));
}

.perdu {
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-2);
}

.perdu-contenu {
  text-align: center;
  animation: surgir 0.8s ease-out both;
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.perdu-oeil {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--404-braise-vive);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.perdu-nombre {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 16vw, 8.5rem);
  line-height: 1;
  color: var(--parchment);
  text-shadow:
    0 0 32px rgba(255, 122, 61, 0.5),
    0 4px 22px rgba(0, 0, 0, 0.8);
}

.perdu-titre {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  color: var(--parchment);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.perdu-retour-label {
  margin: clamp(2rem, 5vw, 2.6rem) 0 0.9rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: rgba(243, 221, 163, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.perdu-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.7rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(165deg, var(--gold-bright), var(--gold-dark));
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(255, 122, 61, 0.55);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
}

.perdu-retour:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -8px rgba(255, 122, 61, 0.7); }
.perdu-retour:active { transform: translateY(-1px); }
.perdu-retour:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.perdu-retour svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-spring); }
.perdu-retour:hover svg { transform: translateX(-3px); }

/* ----- Easter egg : la Flamme des Âmes -----------------------------------------
   7 clics rapprochés sur la lanterne. Palette validée par l'éditeur (vert-émeraude
   spectral, en écho à la Flamme des Âmes de Flameheart). Retteint les éléments
   d'interface (cartes, étagères, panneaux, punaises, boutons…) via les variables
   --sombre-* déjà utilisées par tout le mode sombre existant, PLUS le voile sur le
   fond fixe (BG_1 et consorts) — ce voile-là a été explicitement validé.
   Le header/footer (--night/--night-2) et les séparateurs restent inchangés. */

:root.mode-flamme {
  --sombre-surface: #0c1a15;
  --sombre-surface-2: #16281f;
  --sombre-bordure: #2c4a3d;
  --sombre-texte: #eafff3;
  --sombre-accent: #2de8a8;
  --sombre-accent-vif: #14b884;
  --sombre-ombre: 0 2px 8px rgba(0, 0, 0, 0.6), 0 10px 28px rgba(10, 70, 50, 0.45);
}

.mode-flamme .lanterne .flamme { opacity: 1; }

.mode-flamme .fixed-bg::after {
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(9, 26, 28, 0) 40%, rgba(6, 30, 22, 0.6) 100%),
    linear-gradient(rgba(10, 40, 30, 0.22), rgba(10, 40, 30, 0.22));
}

.revelation-flamme {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0.03em;
  color: #eafff3;
  text-shadow: 0 0 24px rgba(45, 232, 168, 0.65), 0 0 60px rgba(45, 232, 168, 0.35), 0 4px 18px rgba(0, 0, 0, 0.85);
  background: radial-gradient(60% 60% at 50% 50%, rgba(10, 40, 30, 0.55) 0%, rgba(6, 12, 10, 0.75) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.revelation-flamme.is-visible { opacity: 1; }

.lanterne.est-bloquee { cursor: default; }

/* ==========================================================================
   Hall de la Bibliothèque — refonte « le hall est la bibliothèque »
   Chaque aile = un caisson d'étagère en bois rempli de tranches de livres
   (CSS pur, générées par le script de bibliotheque.html). Le nombre de
   livres = le vrai nombre de textes de l'aile. Aucune photo dans le hall.
   ========================================================================== */

.halle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-4);
  max-width: 1180px;
  margin: 0 auto;
}

/* --- Caisson d'une aile --- */
.bibliocase {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  transition: transform 0.3s var(--ease-spring);
}
.bibliocase:hover { transform: translateY(-4px); }
.bibliocase:active { transform: translateY(-1px); }
.bibliocase:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 4px;
}

.caisson {
  display: block;
  position: relative;
  border: 10px solid transparent;
  border-image: linear-gradient(180deg, #5d4326 0%, #533b22 45%, #3c2a15 100%) 1;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(243, 221, 163, 0.07) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(180deg, #1b150c 0%, #141008 100%);
  box-shadow:
    inset 0 14px 22px -12px rgba(0, 0, 0, 0.85),
    inset 0 -6px 14px -8px rgba(0, 0, 0, 0.7),
    var(--shadow-card);
}
.caisson::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}

.rayon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 126px;
  padding: 0 14px;
  overflow: hidden;
}

/* --- Aile pas encore prête : étagère vide, sans indice sur son contenu futur --- */
.rayon-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 126px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 221, 163, 0.3);
}
.mode-sombre .rayon-vide { color: rgba(242, 240, 234, 0.25); }

/* --- La tablette de bois sous les livres --- */
.tablette {
  display: block;
  height: 13px;
  margin: 0 -10px -10px;
  background: linear-gradient(180deg, #6b4c2c 0%, #533b22 40%, #35240f 100%);
  box-shadow: 0 -1px 0 rgba(243, 221, 163, 0.18);
}

/* --- Tranches de livres --- */
.livre {
  display: block;
  width: 17px;
  height: 84px;
  border-radius: 2px 2px 0 0;
  background-color: var(--livre, #4a3a20);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: inset 0 -6px 8px -5px rgba(0, 0, 0, 0.6);
  transition: filter 0.3s ease, transform 0.3s var(--ease-spring);
}
.livre.l-filets {
  background-image:
    linear-gradient(0deg, transparent 12px, rgba(234, 181, 58, 0.55) 12px, rgba(234, 181, 58, 0.55) 14px, transparent 14px, transparent calc(100% - 16px), rgba(234, 181, 58, 0.55) calc(100% - 16px), rgba(234, 181, 58, 0.55) calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
}
.livre.l-glyphe { position: relative; }
.livre.l-glyphe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(234, 181, 58, 0.5);
  border-radius: 1px;
}
.livre.l-penche {
  transform: rotate(-8deg);
  transform-origin: bottom right;
  margin-left: 8px;
}
.livre.l-couche {
  width: 58px;
  height: 15px;
  border-radius: 2px;
  align-self: flex-end;
}

/* Reliures noires : décorations en vert émeraude plutôt que dorées */
.rayon[data-teinte="noir"] .livre.l-filets {
  background-image:
    linear-gradient(0deg, transparent 12px, rgba(16, 168, 122, 0.55) 12px, rgba(16, 168, 122, 0.55) 14px, transparent 14px, transparent calc(100% - 16px), rgba(16, 168, 122, 0.55) calc(100% - 16px), rgba(16, 168, 122, 0.55) calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
}
.rayon[data-teinte="noir"] .livre.l-glyphe::after {
  background: rgba(16, 168, 122, 0.7);
}

/* Reliures bleu sombre de Marisabel : décorations turquoise */
.rayon[data-teinte="bleu-noir"] .livre.l-filets {
  background-image:
    linear-gradient(0deg, transparent 12px, rgba(78, 198, 188, 0.7) 12px, rgba(78, 198, 188, 0.7) 14px, transparent 14px, transparent calc(100% - 16px), rgba(78, 198, 188, 0.7) calc(100% - 16px), rgba(78, 198, 188, 0.7) calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
}
.rayon[data-teinte="bleu-noir"] .livre.l-glyphe::after {
  background: rgba(78, 198, 188, 0.9);
}

/* Reliures beige des journaux de Duke : décorations crème */
.rayon[data-teinte="beige"] .livre.l-filets {
  background-image:
    linear-gradient(0deg, transparent 12px, rgba(224, 204, 149, 0.75) 12px, rgba(224, 204, 149, 0.75) 14px, transparent 14px, transparent calc(100% - 16px), rgba(224, 204, 149, 0.75) calc(100% - 16px), rgba(224, 204, 149, 0.75) calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
}
.rayon[data-teinte="beige"] .livre.l-glyphe::after {
  background: rgba(224, 204, 149, 0.9);
}

/* Reliures brun sombre des journaux d'Umbra : décorations ambre */
.rayon[data-teinte="brun-fonce"] .livre.l-filets {
  background-image:
    linear-gradient(0deg, transparent 12px, rgba(132, 105, 62, 0.75) 12px, rgba(132, 105, 62, 0.75) 14px, transparent 14px, transparent calc(100% - 16px), rgba(132, 105, 62, 0.75) calc(100% - 16px), rgba(132, 105, 62, 0.75) calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
}
.rayon[data-teinte="brun-fonce"] .livre.l-glyphe::after {
  background: rgba(132, 105, 62, 0.9);
}

/* Reliures rouge sang du mystère DeMarco : décorations noir charbon */
.rayon[data-teinte="sang"] .livre.l-filets {
  background-image:
    linear-gradient(0deg, transparent 12px, rgba(28, 28, 25, 0.75) 12px, rgba(28, 28, 25, 0.75) 14px, transparent 14px, transparent calc(100% - 16px), rgba(28, 28, 25, 0.75) calc(100% - 16px), rgba(28, 28, 25, 0.75) calc(100% - 14px), transparent calc(100% - 14px)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.3) 100%);
}
.rayon[data-teinte="sang"] .livre.l-glyphe::after {
  background: rgba(28, 28, 25, 0.9);
}

/* Survol : les livres se réchauffent, le volume vedette se soulève */
.bibliocase:hover .livre,
.bibliocase:focus-visible .livre,
.casier:hover .livre,
.casier:focus-visible .livre {
  filter: brightness(1.22) saturate(1.15);
}
.bibliocase:hover .l-vedette,
.bibliocase:focus-visible .l-vedette,
.casier:hover .l-vedette,
.casier:focus-visible .l-vedette {
  transform: translateY(-7px);
}
.bibliocase:hover .l-penche,
.bibliocase:focus-visible .l-penche {
  transform: rotate(-8deg) translateY(-2px);
}

/* --- Cartouche : plaque de bois gravée --- */
.cartouche {
  display: block;
  text-align: center;
  margin: 14px auto 0;
  max-width: 82%;
  padding: 0.55rem 1rem 0.65rem;
  background: linear-gradient(180deg, #5d4326 0%, #4a3520 55%, #3c2a15 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(243, 221, 163, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
.aile-nom {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: var(--parchment);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
  transition: color 0.25s ease;
}
.aile-compte {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: rgba(243, 221, 163, 0.62);
}
.bibliocase:hover .aile-nom,
.bibliocase:focus-visible .aile-nom { color: var(--gold-bright); }

/* Aile à venir : caisson présent mais assombri */
.bibliocase.a-venir { cursor: default; }
.bibliocase.a-venir .rayon { opacity: 0.42; }
.bibliocase.a-venir:hover { transform: none; }
.bibliocase.a-venir:hover .livre { filter: none; }
.bibliocase.a-venir:hover .l-vedette { transform: none; }
.bibliocase.a-venir:hover .aile-nom { color: var(--parchment); }

/* --- Le meuble bas « D'autres récits » --- */
.buffet-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: 1180px;
  margin: var(--space-5) auto var(--space-2);
}
.buffet-titre h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--parchment);
}
.buffet-titre span {
  font-family: var(--font-serif);
  color: rgba(243, 221, 163, 0.6);
}
.buffet {
  max-width: 1180px;
  margin: 0 auto;
  border: 10px solid transparent;
  border-image: linear-gradient(180deg, #5d4326 0%, #533b22 45%, #3c2a15 100%) 1;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(243, 221, 163, 0.06) 0%, rgba(0, 0, 0, 0) 40%),
    linear-gradient(180deg, #1b150c 0%, #141008 100%);
  box-shadow:
    inset 0 12px 18px -10px rgba(0, 0, 0, 0.85),
    var(--shadow-card);
}
.buffet-groupe-titre {
  margin: 0;
  padding: var(--space-4) 0 var(--space-3);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}
.buffet-grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 3px solid #3c2a15;
  border-bottom: 3px solid #3c2a15;
}
.buffet-separateur { height: var(--space-3); }
.casier {
  display: block;
  text-decoration: none;
  padding-bottom: 0.65rem;
  border-left: 3px solid #3c2a15;
  transition: background-color 0.25s ease;
}
.buffet-grille .casier:nth-child(5n + 1) { border-left: none; }
.buffet-grille .casier:nth-child(n + 6) { border-top: 3px solid #3c2a15; }
.casier:hover { background-color: rgba(243, 221, 163, 0.045); }
.casier:active { background-color: rgba(243, 221, 163, 0.08); }
.casier:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: -3px;
}
.casier .rayon {
  height: 86px;
  gap: 2px;
  padding: 0 10px;
}
.casier .livre { height: 56px; width: 14px; }
.casier .livre.l-couche { width: 40px; height: 12px; }
.casier .tablette { margin: 0; height: 10px; }

/* Livre isolé (.rayon-solo) : une icône de carnet dessinée à la main (couverture + tranche
   de pages + silhouette), façon icône de journal du jeu — occupe l'étagère au lieu d'une
   fine tranche perdue dans le vide. */
.rayon-solo { padding: 0; }
.livre-icone {
  display: block;
  height: 78px;
  width: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s var(--ease-spring), filter 0.3s ease;
}
.casier:hover .livre-icone,
.casier:focus-visible .livre-icone { transform: translateY(-4px); }
.casier-infos {
  display: block;
  text-align: center;
  padding: 0.55rem 0.5rem 0;
}
.casier-nom {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--parchment);
  line-height: 1.3;
  transition: color 0.25s ease;
}
.casier-meta {
  display: block;
  font-size: 0.82rem;
  color: rgba(243, 221, 163, 0.55);
}
.casier:hover .casier-nom,
.casier:focus-visible .casier-nom { color: var(--gold-bright); }
.casier.a-venir .rayon { opacity: 0.42; }
.casier.a-venir:hover .livre { filter: none; }
.casier.a-venir:hover .l-vedette { transform: none; }
.casier.a-venir { cursor: default; }
.casier.a-venir:hover { background-color: transparent; }
.casier.a-venir:hover .casier-nom { color: var(--parchment); }

.casier .rayon-vide { height: 86px; font-size: 0.95rem; }

@media (max-width: 860px) {
  .halle { grid-template-columns: minmax(0, 1fr); }
  .buffet-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .casier { border-left: none; border-top: 3px solid #3c2a15; }
  .buffet-grille .casier:nth-child(-n + 2) { border-top: none; }
}

/* --- Hall : mode sombre — le bois passe en brun éteint (entre-deux validé) --- */
.mode-sombre .caisson,
.mode-sombre .buffet {
  border-image: linear-gradient(180deg, #46392a 0%, #382d20 45%, #262017 100%) 1;
  background:
    linear-gradient(180deg, rgba(242, 240, 234, 0.05) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(180deg, #1a1712 0%, #12100c 100%);
  box-shadow:
    inset 0 14px 22px -12px rgba(0, 0, 0, 0.85),
    inset 0 -6px 14px -8px rgba(0, 0, 0, 0.7),
    var(--sombre-ombre);
}

.mode-sombre .tablette {
  background: linear-gradient(180deg, #46392a 0%, #382d20 40%, #241e14 100%);
  box-shadow: 0 -1px 0 rgba(242, 240, 234, 0.12);
}
.mode-sombre .cartouche {
  background: linear-gradient(180deg, #3b3023 0%, #2f261b 55%, #241e14 100%);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 234, 0.14),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
.mode-sombre .aile-nom { color: var(--sombre-texte); }
.mode-sombre .aile-compte { color: rgba(242, 240, 234, 0.55); }
.mode-sombre .bibliocase:hover .aile-nom,
.mode-sombre .bibliocase:focus-visible .aile-nom { color: var(--sombre-accent); }
.mode-sombre .bibliocase.a-venir:hover .aile-nom { color: var(--sombre-texte); }
.mode-sombre .casier { border-left-color: #262017; border-top-color: #262017; }
.mode-sombre .casier:hover { background-color: rgba(242, 240, 234, 0.05); }
.mode-sombre .casier-nom { color: var(--sombre-texte); }
.mode-sombre .casier-meta { color: rgba(242, 240, 234, 0.55); }
.mode-sombre .casier:hover .casier-nom,
.mode-sombre .casier:focus-visible .casier-nom { color: var(--sombre-accent); }
.mode-sombre .casier.a-venir:hover { background-color: transparent; }
.mode-sombre .casier.a-venir:hover .casier-nom { color: var(--sombre-texte); }
.mode-sombre .buffet-titre h2 { color: var(--sombre-texte); }
.mode-sombre .buffet-titre span { color: rgba(242, 240, 234, 0.55); }
.mode-sombre .buffet-groupe-titre { color: var(--sombre-texte); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 16px rgba(242, 240, 234, 0.2); }
.mode-sombre .buffet-grille { border-color: #262017; }
.mode-sombre .buffet-grille .casier:nth-child(n + 6) { border-top-color: #262017; }
.mode-sombre .bibliocase:focus-visible,
.mode-sombre .casier:focus-visible { outline-color: var(--sombre-accent); }

/* --- Hall : mode Flamme des Âmes — le bois suit la palette spectrale --- */
.mode-sombre.mode-flamme .caisson,
.mode-sombre.mode-flamme .buffet {
  border-image: linear-gradient(180deg, #2c4a3d 0%, #16281f 45%, #0c1a15 100%) 1;
  background:
    linear-gradient(180deg, rgba(234, 255, 243, 0.05) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(180deg, #0e1a14 0%, #08110d 100%);
}
.mode-sombre.mode-flamme .tablette {
  background: linear-gradient(180deg, #2c4a3d 0%, #16281f 40%, #0c1a15 100%);
  box-shadow: 0 -1px 0 rgba(234, 255, 243, 0.12);
}
.mode-sombre.mode-flamme .cartouche {
  background: linear-gradient(180deg, #1d3328 0%, #16281f 55%, #0c1a15 100%);
}
.mode-sombre.mode-flamme .casier { border-left-color: #0c1a15; border-top-color: #0c1a15; }
.mode-sombre.mode-flamme .buffet-grille { border-color: #0c1a15; }
.mode-sombre.mode-flamme .buffet-grille .casier:nth-child(n + 6) { border-top-color: #0c1a15; }

/* Infobulle d'aperçu au survol prolongé d'une case : ancrée au-dessus de la case, avec une flèche
   qui pointe vers elle (voir script en bas de bibliotheque.html). */
.casier-preview {
  position: fixed;
  z-index: 50;
  width: 360px;
  padding: 8px;
  background: var(--ink);
  border: 1px solid rgba(234, 181, 58, 0.4);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.casier-preview.is-visible { opacity: 1; transform: translateY(0); }
.casier-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
}
.casier-preview::after {
  content: "";
  position: absolute;
  left: var(--fleche-x, 50%);
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: var(--ink);
  border-right: 1px solid rgba(234, 181, 58, 0.4);
  border-bottom: 1px solid rgba(234, 181, 58, 0.4);
  transform: translateX(-50%) rotate(45deg);
}
.casier-preview.preview-dessous::after {
  bottom: auto;
  top: -8px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(234, 181, 58, 0.4);
  border-top: 1px solid rgba(234, 181, 58, 0.4);
}

.mode-sombre .casier-preview {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
  box-shadow: var(--sombre-ombre);
}
.mode-sombre .casier-preview::after {
  background: var(--sombre-surface);
  border-color: var(--sombre-bordure);
}