/* ==========================================================================
   Château de Drakula — chateau-de-drakula.fr
   Design v2 « maximaliste gothique » (direction du propriétaire, 2026-07-17) :
   site sombre de bout en bout, gravure, or antique, texture rugueuse.
   Discipline conservée : données du planning lisibles, contraste AA,
   aucun blackletter en texte vivant, corps de texte sur fond uni.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin + latin-ext : ő ű vérifiés) ---------- */
@font-face {
  font-family: 'Grenze Gotisch';
  src: url('../fonts/grenze-gotisch-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* RETENUE (Andrei, 2026-07-19) : Old London (Steffmann) — la lettre
   noire qui SE LIT (k et y latinisés).
   Déclarée 600 pour répondre aux titres sans grasse synthétique.
   WOFF2 (23 Ko, le TTF de 50 Ko est dans l'historique git). */
@font-face {
  font-family: 'Old London';
  src: url('../fonts/old-london.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('../fonts/cinzel-decorative-700-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-v19-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-v19-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --canvas: #171009;
  --surface: #221812;
  --ink: #EDE3D0;
  --muted: #A89880;
  --gold: #C9A15A;
  --gold-dim: #8A6D3B;
  /* or éteint LISIBLE : --gold-dim ne fait que 3,9:1 sur le fond, sous le
     seuil AA — il reste pour les objets (filets, sertis, losanges), jamais
     pour du texte. Celui-ci monte à 5,1:1 et se lit en petit corps. */
  --gold-dim-text: #A07F45;
  /* or « travaillé » : réservé aux éléments-objets (cadres, boutons, sertis),
     jamais au texte courant */
  --gold-metal: linear-gradient(160deg, #E8CA88 0%, #C9A15A 38%, #8A6D3B 68%, #D9B36A 100%);
  --oxblood: #7A1F1F;
  --oxblood-bright: #8E2626;
  --hairline: #3A2B1D;
  --radius: 8px;
  /* gothique ornementé : TITRES SEULEMENT, jamais en capitales suivies,
     jamais sur les données (heures, prix, adresses) — règle du client */
  --font-black: 'Old London', 'Cinzel Decorative', 'Grenze Gotisch', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1080px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* grain + vignette : la « rugosité » du fond, sous le contenu */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: url('../assets/noise.png') repeat;
  opacity: 0.05; pointer-events: none;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
::selection { background: var(--oxblood); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 0.5em; }
h2 {
  font-family: var(--font-black); font-weight: 600;
  font-size: clamp(2.2rem, 4.8vw, 3.1rem); line-height: 1.08;
  color: var(--gold);
}
/* mobile : le plancher de 2.2rem faisait plier « Le gâteau à la broche
   transylvain » sur quatre lignes — corps ramené vers 1.75–2.2rem */
@media (max-width: 640px) {
  h2 { font-size: clamp(1.75rem, 7.8vw, 2.2rem); }
}

/* ornement gravé au-dessus de chaque titre de section.
   L'ornement n'est PAS une image plate : c'est un masque, et l'or travaillé
   (--gold-metal, le même dégradé que les boutons) passe au travers. Un PNG doré
   à plat resterait doré à plat ; là, le motif prend la lumière du reste. */
h2::before {
  content: ''; display: block; width: 200px; height: 38px;
  margin: 0 0 16px;
  background: var(--gold-metal);
  -webkit-mask: url('../assets/ornaments/losange-filets.webp') no-repeat center / contain;
          mask: url('../assets/ornaments/losange-filets.webp') no-repeat center / contain;
}
/* pas d'ornement sur « Le gâteau » ni « Écrire au château » : ces deux sections
   sont en colonnes, le titre y est aligné à gauche, et un bandeau de 200 px
   posé au-dessus n'avait rien à quoi s'aligner. L'ornement reste aux sections
   centrées (apparitions, légende), où il coiffe vraiment le titre. */
#gateau h2::before, #contact h2::before { content: none; }

.centered h2 { text-align: center; }
.centered h2::before { margin-left: auto; margin-right: auto; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
section { padding: clamp(56px, 9vw, 104px) 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--oxblood); color: #fff; padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Nav ---------- */
/* sans coquille : l'index flotte sur le hero et défile avec lui ; un
   voile dégradé assure la lisibilité sur la gravure */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
}
.nav::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 6, 3, 0.92) 0%,
    rgba(10, 6, 3, 0.55) 55%, transparent 100%);
}
/* index de grimoire : la table d'un vieux livre — quatre chapitres en
   chiffres romains, fleurons-losanges entre eux, filet d'or au survol.
   (Marque d'imprimeur en colophon retirée à la demande d'Andrei.) */
.nav-inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 26px 20px 10px; max-width: var(--container); margin: 0 auto;
}
.nav-inner a {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 20px; color: var(--ink); text-decoration: none;
  /* libellés en linéale espacée ; seuls les chiffres romains restent gothiques */
  font-family: var(--font-text); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav-inner a i {
  font-style: normal; color: var(--gold-dim-text);
  font-family: var(--font-black); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: none;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}
.nav-inner a::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 3px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform 0.28s ease;
}
.nav-inner a:hover { color: var(--gold); }
.nav-inner a:hover i { color: var(--gold); text-shadow: 0 0 10px rgba(201, 161, 90, 0.5); }
.nav-inner a:hover::after { transform: scaleX(1); }
/* fleuron losange entre chapitres */
.nav-inner a + a::before {
  content: ''; position: absolute; left: -3px; top: 50%; width: 4px; height: 4px;
  background: var(--gold-dim); transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 640px) {
  .nav-inner a { font-size: 0.68rem; padding: 6px 11px; }
  .nav-inner a::after { left: 11px; right: 11px; }
}
/* sous ~500px les quatre chapitres ne tiennent plus sur un rang : l'index
   se replie en table 2×2 délibérée (au lieu d'un rebond de flex-wrap
   déséquilibré), fleurons-losanges retirés — ils flotteraient au hasard */
@media (max-width: 500px) {
  .nav-inner {
    display: grid; grid-template-columns: repeat(2, auto);
    justify-content: center; padding: 16px 12px 8px;
  }
  .nav-inner a { justify-self: center; padding: 7px 12px; }
  .nav-inner a::after { left: 12px; right: 12px; }
  .nav-inner a + a::before { display: none; }
}

/* ---------- Hero : gravure pleine page, type vivant dans le ciel ---------- */
.hero {
  position: relative; overflow: hidden;
  isolation: isolate;
  min-height: 100vh;  /* plein premier écran — la nav flotte, plus rien à déduire */
  min-height: 100svh;
  display: grid; text-align: center;  /* l'enfant s'étire sur toute la hauteur */
  padding: 0;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0; /* hors flux : seul .hero-content occupe la
                                   grille et s'étire sur toute la hauteur */
}
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* ESSAI : gravure poussée en contraste/luminosité — à retirer quand
     les masters régénérés arriveront (voir hero-drafts/BRIEF-HERO-V2.md) */
  filter: brightness(1.5);
}
@media (max-width: 640px) {
  /* master vertical : le kürtős du rendu n'est pas exactement sur l'axe —
     recalé ~16px vers la gauche */
  .hero-media img { object-position: calc(50% - 16px) center; }
}
/* (l'ancien chevron de défilement a cédé sa place aux portes : les panneaux
   à cheval sur le pli sont eux-mêmes l'appel à descendre) */

/* indexeur de sections : chapelet de joyaux sur un fil d'or (écrans larges) */
.section-dots {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: none; flex-direction: column; gap: 18px;
}
@media (min-width: 900px) { .section-dots { display: flex; } }
/* le fil */
.section-dots::before {
  content: ''; position: absolute; top: -8px; bottom: -8px; left: 50%;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent,
    var(--gold-dim) 18%, var(--gold-dim) 82%, transparent);
  opacity: 0.6;
}
/* embouts du fil : deux fins chevrons fondus aux extrémités */
.chain-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 20px; height: 9px; pointer-events: none;
}
.chain-cap-top { top: -22px; }
.chain-cap-bottom { bottom: -22px; transform: translateX(-50%) scaleY(-1); }
.chain-cap::before, .chain-cap::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 1px;
}
.chain-cap::before {
  left: -1px; transform: rotate(-28deg); transform-origin: right center;
  background: var(--gold-dim);
}
.chain-cap::after {
  right: -1px; transform: rotate(28deg); transform-origin: left center;
  background: var(--gold-dim);
}

/* la lueur voyageuse : glisse le long du fil jusqu'au joyau suivant
   (position pilotée par ui.js via --traveler-y) */
.section-dots::after {
  content: ''; position: absolute; left: 50%; z-index: -1;
  top: var(--traveler-y, 6px);
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 9px 2px rgba(201, 161, 90, 0.4);
  transition: top 0.5s ease-in-out;
}
/* les joyaux : losanges sertis ; l'actif est en or travaillé */
.section-dots a { position: relative; width: 13px; height: 13px; }
.section-dots a::before {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; transform: rotate(0deg); /* perle au repos… */
  background: #1E1710; border: 1px solid var(--gold-dim);
  transition: border-color 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease, inset 0.25s ease,
    transform 0.3s ease, border-radius 0.3s ease;
}
.section-dots a:hover::before {
  border-color: var(--gold);
  box-shadow: 0 0 7px rgba(201, 161, 90, 0.45);
}
.section-dots a.active::before {
  inset: 0;
  border-radius: 0; transform: rotate(45deg); /* …taillée en joyau à l'arrivée */
  background: var(--gold-metal); border-color: transparent;
  box-shadow: 0 0 9px rgba(201, 161, 90, 0.5);
  transition-delay: 0.35s; /* attend l'arrivée de la lueur pour s'épanouir */
}
/* étiquette */
.section-dots a::after {
  content: attr(aria-label);
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(13, 8, 4, 0.88); border: 1px solid var(--gold-dim);
  padding: 3px 12px; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.section-dots a:hover::after, .section-dots a:focus-visible::after { opacity: 1; }
/* voile de sécurité : garantit le contraste du type quel que soit l'artwork */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 8, 4, 0.42) 0%, rgba(13, 8, 4, 0.08) 45%, rgba(13, 8, 4, 0.46) 100%);
}
/* deux registres : le lockup épinglé dans le ciel par un unique padding
   (le H1 baigne dans l'ellipse de chaleur centrée à 27 %) ; le groupe au
   sol [bandeau + portes] se centre dans l'espace restant sous la tagline
   grâce à ses marges auto */
.hero-content {
  position: relative; z-index: 3;
  width: 100%; /* item de grille : les marges auto du .container annulent le
                  stretch — sans largeur explicite il se réduit au H1 */
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(76px, 15vh, 170px) 20px 24px; /* plancher : la nav flottante (~66px) */
}
.hero-lockup { display: flex; flex-direction: column; align-items: center; }
.hero-ground {
  width: 100%; margin: auto 0; /* centrage vertical dans l'espace restant */
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
}

/* ---------- Ambiance animée : bancs de brume ----------
   Texture de brume en défilement continu (marquee GPU, boucle parfaite par
   construction). L'air chaud et tous les filtres de distorsion ont été
   retirés le 2026-07-20 — le mécanisme est à refaire de zéro. */
.hero-ambience {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
/* voile noir sur les bords horizontaux, à l'image de la vignette : la
   brume naît et meurt dans l'ombre au lieu de surgir au bord de l'écran */
.hero-ambience::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(90deg,
    rgba(9, 5, 2, 0.8), transparent 13%, transparent 87%, rgba(9, 5, 2, 0.8));
}

.fog-wrap { position: absolute; inset: 0; z-index: 2; }
/* bancs de brume générés et animés par js/ui.js (spawner, config FOG) :
   naissent à droite, traversent, sont supprimés passé le bord gauche.
   Un puff survolé s'efface (transition) puis se reforme. */
.puff {
  position: absolute; left: 100%;
  background: no-repeat center / contain;
  opacity: var(--op);
  transition: opacity 3.6s ease; /* re-formation très lente */
  will-change: transform, opacity;
}
.puff.cleared { opacity: 0; transition: opacity 0.6s ease; } /* dissipation */

@media (prefers-reduced-motion: reduce) {
  .puff { display: none; }
}
@media (max-width: 640px) {
  /* même anatomie, ciel plus court : le gâteau du master vertical commence
     vers 44 % de haut, le lockup reste au-dessus. Plancher relevé : la nav
     repliée en 2×2 descend jusqu'à ~90px, le chapeau doit passer dessous.
     20vh (réglage Andrei sur vrai téléphone) : le lockup plonge dans le
     ciel sans coller au gâteau ; plafond en proportion */
  .hero-content { padding: clamp(96px, 20vh, 224px) 20px 24px; }
}
/* la marque doit exister à côté du produit : « Chimney Cake » reste le mot
   qui vend (et le seul que le voile de chaleur sache déformer), mais un
   filet de 12px ne suffisait pas à faire enregistrer le nom du château */
.hero-eyebrow {
  font-weight: 600; font-size: clamp(0.92rem, 1.8vw, 1.25rem);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
  /* lueur d'or (losanges retirés) : halo serré + halo large + ombre de lisibilité */
  text-shadow: 0 0 12px rgba(201, 161, 90, 0.55), 0 0 28px rgba(201, 161, 90, 0.3),
    0 1px 10px rgba(0, 0, 0, 0.85);
}
.hero h1 {
  font-family: var(--font-black); font-weight: 600;
  /* plein format tant que « Chimney Cake » tient sur une ligne : la pente
     18.5vw-8px suit le point de rupture (ratio largeur/corps ≈ 5.3) au lieu
     de rétrécir en continu ; le plafond 6rem tient dès ~560px de large */
  font-size: clamp(3rem, calc(18.5vw - 8px), 6rem);
  letter-spacing: 0.015em; margin: 0; color: var(--ink);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* filet or à losange sous le titre */
.hero-rule {
  position: relative; width: min(280px, 50vw); height: 1px;
  margin: 18px auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}
.hero-rule::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}
.hero-tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--ink); margin: 0; /* clôt le lockup, l'espace vient du registre */
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.85);
}
/* ---------- Plaque-cartouche « prochaine apparition » ----------
   Seule occupante du sol du hero (les portes ont été retirées). Même
   orfèvrerie que le bouton-plaque : serti --gold-metal de 2 px, coins
   coupés, fond sombre. Trois lignes : chapeau doré, date en vedette,
   lieu en dessous. Cliquable vers le programme. */
/* l'éphéméride : « apparition » au sens astronomique — pas de boîte,
   gravure pure entre deux filets d'or sous un croissant de lune.
   (Variante 2 du mock Opus ; losanges retirés, aérée à la demande.) */
.hero-next {
  display: none; position: relative;
  width: min(560px, 100%); margin: 0; padding: 20px 28px 22px;
  text-align: center; text-decoration: none; letter-spacing: 0.04em;
}
/* lavis noir logé ENTRE les deux filets d'or : même empreinte qu'eux —
   il naît au filet du croissant, meurt au filet de clôture, et son fondu
   horizontal suit la rampe des lignes (zéro à leurs pointes) */
.hero-next::before {
  content: ''; position: absolute; z-index: -1;
  top: 30px;      /* centre du rang céleste (padding 20 + demi-lune 10) */
  bottom: 22px;   /* centre du filet de clôture (padding bas) */
  left: 50%; width: min(492px, 96%); transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(9, 5, 2, 0.7) 50%, transparent);
}
.hero-next.visible { display: block; }
.hero-next .celest {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 22px;
}
.hero-next .celest::before, .hero-next .celest::after {
  content: ''; height: 1px; width: min(220px, 30vw);
  background: linear-gradient(90deg, transparent, var(--gold-dim) 85%);
  transition: background 0.3s ease;
}
.hero-next .celest::after { transform: scaleX(-1); }
.hero-next .moon {
  width: 20px; height: 20px; border-radius: 50%;
  /* croissant naturel : disque d'or plein, recouvert d'un disque sombre
     PLUS LARGE et décalé vers le haut-gauche — le terminateur est l'arc
     d'un autre cercle, comme sur la vraie lune. Bords en fondu doux :
     plus de pixels noirs qui accrochent le bord clair. */
  /* le disque sombre glisse selon la phase réelle (--lune-cx posé par
     schedule.js ; sans JS : croissant par défaut) */
  background:
    radial-gradient(circle 12.6px at var(--lune-cx, 6px) 8px, #4A3822 96%, rgba(74, 56, 34, 0) 100%)
    #E8CA88;
  /* halo rayonnant du disque entier */
  box-shadow:
    0 0 14px 3px rgba(232, 202, 136, 0.9),
    0 0 34px 10px rgba(232, 202, 136, 0.5),
    0 0 70px 24px rgba(201, 161, 90, 0.28);
  transition: box-shadow 0.3s ease;
}
.hero-next strong {
  display: block; color: var(--gold); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.34em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.hero-next .next-date {
  display: block; margin: 16px 0 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 2.7rem); line-height: 1.04;
  color: var(--ink); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  transition: text-shadow 0.3s ease;
}
.hero-next .next-lieu {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
/* formule d'attente, plus longue qu'une date : corps réduit, une seule ligne.
   Le plancher suit le viewport (4.5vw dès ~340px) : à 320px la formule
   entière tient encore dans la plaque sans déborder */
.hero-next .next-date-attente {
  font-size: clamp(0.95rem, 4.5vw, 2.1rem);
  white-space: nowrap;
}
.hero-next .rule-bas {
  display: block; position: relative; width: min(460px, 84%); height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent);
  transition: background 0.3s ease;
}
.hero-next:hover .rule-bas, .hero-next:focus-visible .rule-bas {
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.hero-next:hover .moon, .hero-next:focus-visible .moon {
  box-shadow:
    0 0 18px 5px rgba(232, 202, 136, 1),
    0 0 46px 14px rgba(232, 202, 136, 0.6),
    0 0 90px 32px rgba(201, 161, 90, 0.35);
}
.hero-next:hover .celest::before, .hero-next:hover .celest::after {
  background: linear-gradient(90deg, transparent, var(--gold) 85%);
}
.hero-next:hover .next-date {
  text-shadow: 0 0 24px rgba(201, 161, 90, 0.4), 0 2px 18px rgba(0, 0, 0, 0.85);
}
/* mobile : l'éphéméride perd de l'embonpoint (gouttières et interlignes
   resserrés, date moins massive) et le groupe au sol s'ancre en bas du hero
   au lieu de flotter au centre de l'espace restant. Bloc placé APRÈS toutes
   les règles de base .hero-next : à spécificité égale, c'est l'ordre qui
   tranche — plus haut dans le fichier, rien ne s'appliquait */
@media (max-width: 640px) {
  .hero-next { padding: 14px 12px 16px; }
  .hero-next::before { top: 24px; bottom: 16px; } /* suit les paddings (20→14, 22→16) */
  .hero-next .celest { margin-bottom: 14px; }
  .hero-next .next-date { margin: 10px 0 8px; font-size: clamp(1.6rem, 5.5vw, 1.9rem); }
  /* réaffirmé APRÈS la règle ci-dessus (même spécificité) : sans elle la
     formule d'attente héritait du corps de date — 25px en nowrap = débord */
  .hero-next .next-date-attente { font-size: clamp(0.95rem, 4.5vw, 1.9rem); }
  .hero-next .rule-bas { margin-top: 14px; }
  .hero-ground { margin: auto 0 0; }
}
/* bouton-plaque : coins coupés, serti d'or travaillé sur fond sang-de-bœuf */
.btn {
  position: relative; display: inline-block;
  padding: 16px 36px; text-decoration: none;
  color: #fff; font-family: var(--font-text); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.04em;
  background: var(--gold-metal);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  transition: filter 0.2s ease;
}
.btn::before {
  content: ''; position: absolute; inset: 2px;
  background: linear-gradient(180deg, var(--oxblood-bright), var(--oxblood) 60%, #5E1717);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px),
    calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  transition: background 0.2s ease;
}
.btn > span { position: relative; z-index: 1; }
.btn:hover { color: #fff; filter: drop-shadow(0 0 12px rgba(201, 161, 90, 0.4)); }
.btn:hover::before {
  background: linear-gradient(180deg, #A03030, var(--oxblood-bright) 60%, var(--oxblood));
}
/* format de ligne : mêmes coins coupés, encoches resserrées pour que le
   serti reste un filet et non un cadre. ~43px de haut = cible tactile. */
.btn-sm {
  padding: 12px 18px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px),
    calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.btn-sm::before {
  inset: 1.5px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
/* variante filet : l'or plein devient or mat, le sang-de-bœuf devient le
   fond de page — même objet, une voix plus bas */
.btn-ghost { color: var(--gold); background: var(--gold-dim); }
.btn-ghost::before { background: var(--canvas); }
.btn-ghost:hover { color: var(--ink); }
.btn-ghost:hover::before { background: rgba(201, 161, 90, 0.12); }

/* ---------- Apparitions (planning) ---------- */
/* la ligne d'ambiance qui ouvre ou ferme un bloc : une seule voix pour
   tout le site (ici, sous le contact, sous les photos) — le Cormorant.
   Le Source Sans reste la voix de service : dates, prix, allergènes. */
.section-sub {
  color: var(--muted); max-width: 560px; margin: -4px 0 36px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.6;
}
.centered .section-sub { margin-left: auto; margin-right: auto; text-align: center; }
/* lisière hero -> page : simple filet d'or aux extrémités fondues */
.lisiere {
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent,
    rgba(201, 161, 90, 0.55) 18%, rgba(201, 161, 90, 0.55) 82%, transparent);
}

/* ---------- Le bandeau de la semaine ----------
   Sept nuits d'affilée. Les allumées sont en or et mènent à leur ligne ;
   les éteintes gardent leur chiffre, en sourdine, sans un mot — un « rien
   ce soir » répété six fois ferait passer une tournée pour un cimetière.
   Le bandeau donne son corps à la section même quand la semaine est
   creuse, et se soude à la liste (le filet du bas leur est commun). */
.semaine {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.semaine:empty { display: none; }         /* sans JS : pas de double filet orphelin */
.semaine + .dates .date-row:first-child { border-top: 0; }
.semaine li { position: relative; }
.semaine li + li::before {                /* filets courts entre les nuits */
  content: ''; position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px; background: var(--hairline);
}
.semaine .today { background: rgba(201, 161, 90, 0.05); }
.sem-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 4px 12px; text-decoration: none;
}
.sem-jour {
  color: #8A7A64; font-family: var(--font-text); font-weight: 600;
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.sem-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.25; color: #75634B;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* la marque : losange serti, éteint au repos — même langage que les
   fleurons de l'index et les joyaux du fil de section */
.sem-marque {
  width: 5px; height: 5px; margin-top: 3px;
  transform: rotate(45deg); background: var(--hairline);
  transition: box-shadow 0.3s ease;
}
.semaine .on .sem-jour { color: var(--gold); }
.semaine .on .sem-num { color: var(--gold); }
.semaine .on .sem-marque {
  background: var(--gold-metal); box-shadow: 0 0 7px rgba(201, 161, 90, 0.45);
}
.semaine a.sem-cell:hover .sem-num { text-shadow: 0 0 18px rgba(201, 161, 90, 0.5); }
.semaine a.sem-cell:hover .sem-marque { box-shadow: 0 0 12px rgba(201, 161, 90, 0.75); }
@media (max-width: 640px) {
  .sem-cell { padding: 11px 2px 10px; }
  .sem-jour { font-size: 0.52rem; letter-spacing: 0.12em; }
  .sem-num { font-size: 1.25rem; }
}

/* liste-affiche des apparitions : dates de tournée, pas cartes.
   Anatomie par ligne : [calendrier] [lieu + adresse + note] [heures/prix] */
/* le filet haut appartient aux lignes : pas de trait orphelin quand la
   liste n'affiche que le fallback */
.dates { list-style: none; margin: 0; padding: 0; text-align: left; }
.date-row:first-child { border-top: 1px solid var(--hairline); }
.date-row {
  display: grid; grid-template-columns: 88px 1fr auto;
  gap: clamp(18px, 4vw, 44px); align-items: center;
  padding: 24px clamp(4px, 2vw, 18px);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.35s ease, transform 0.35s ease;
}
.date-row:hover {
  background: linear-gradient(90deg, rgba(201, 161, 90, 0.07), transparent 72%);
  transform: translateX(6px);
}
.date-cal { text-align: center; }
.date-cal .jour, .date-cal .mois {
  display: block; color: var(--muted); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.date-cal .num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1.05; color: var(--gold);
  transition: text-shadow 0.35s ease;
}
.date-row:hover .num { text-shadow: 0 0 18px rgba(201, 161, 90, 0.5); }
.date-lieu { min-width: 0; }
.date-lieu .venue {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem); line-height: 1.2; color: var(--ink);
}
.date-lieu .ville {
  display: block; color: var(--muted); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 5px;
}
.date-lieu .note { display: block; color: var(--muted); font-style: italic; font-size: 0.9rem; margin-top: 4px; }
.date-meta { text-align: right; }
.date-meta .heures {
  display: block; color: var(--gold); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.16em; white-space: nowrap;
}
.date-meta .prix { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
/* la taille et la graisse viennent de .btn-sm : ne rien redéclarer ici,
   sinon la spécificité (0-2-0) écraserait le bouton */
.date-meta .itineraire { margin-top: 10px; }
/* tampon à l'encre rouge (aujourd'hui, nocturne…) */
.stamp {
  display: inline-block; vertical-align: 3px; margin-left: 12px;
  padding: 3px 10px 2px; border: 2px solid var(--oxblood-bright); border-radius: 3px;
  color: #D8AFA6; background: rgba(122, 31, 31, 0.28);
  font-family: var(--font-text); font-weight: 600;
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  transform: rotate(-2.5deg);
}
@media (max-width: 640px) {
  .date-row { grid-template-columns: 60px 1fr; }
  .date-cal .num { font-size: 2rem; }
  .date-meta { grid-column: 2; text-align: left; margin-top: 2px; }
  .stamp { margin: 8px 0 0; }
}
.fallback {
  border: 2px dashed var(--hairline); border-radius: var(--radius);
  background: transparent; padding: 36px 24px; text-align: center;
  color: var(--muted); max-width: 640px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
}
/* l'encadré collait au bandeau des sept nuits quand la semaine est vide : il
   faut de l'air entre le rail et le cadre, sinon les deux se lisent comme un
   seul bloc. Le fallback est DANS .dates, pas frère de .semaine. */
.semaine + .dates .fallback { margin-top: 30px; }

/* ---------- Le gâteau / Contact (splits) ---------- */
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 820px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split.reverse { grid-template-columns: 7fr 5fr; }
  .split.reverse .split-media { order: 2; }
}
/* photo « montée » comme une planche d'ouvrage ancien */
.split-media img {
  width: 100%; max-height: 560px; object-fit: cover;
  border: 1px solid var(--hairline); border-radius: 4px;
  padding: 8px; background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 90, 0.14), 0 6px 24px rgba(0, 0, 0, 0.5);
}
/* mobile : les planches empilées au-dessus du texte ne mangent plus les
   deux tiers de l'écran */
@media (max-width: 640px) {
  .split-media img { max-height: 420px; }
}
.price-line { font-size: 1.05rem; margin-top: 18px; }
.price-line strong { font-size: 1.4rem; font-family: var(--font-display); color: var(--gold); }
.price-caveat { color: var(--muted); font-size: 0.95rem; }
.allergenes {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline);
  color: var(--muted); font-size: 0.9rem;
}

/* ---------- La légende : la gravure en pleine page ---------- */
.legende {
  background:
    linear-gradient(rgba(13, 8, 4, 0.68), rgba(13, 8, 4, 0.88)),
    url('../assets/legende-backdrop.webp') center / cover no-repeat;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(201, 161, 90, 0.15), inset 0 -1px 0 rgba(201, 161, 90, 0.15);
}
.legende .container { max-width: 720px; text-align: center; }
.legende h2 { color: var(--gold); }
.legende p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.legende .legende-chute { color: var(--muted); }
/* corps de légende : aligné à gauche pour porter la lettrine gothique */
.legende .legende-corps { text-align: left; max-width: 620px; margin-left: auto; margin-right: auto; }
.legende .legende-corps::first-letter {
  font-family: var(--font-black); font-weight: 600;
  float: left; font-size: 3.4em; line-height: 0.82;
  padding: 0.1em 0.14em 0 0; color: var(--gold);
}
/* cul-de-lampe : la légende est le seul passage narratif du site, elle se
   ferme comme une page de livre au lieu de s'arrêter net. Même mécanisme que
   l'ornement de titre (masque traversé par --gold-metal). L'arc de couronne
   est RENVERSÉ — l'arc du titre monte pour annoncer, celui-ci retombe pour
   clore : c'est le même geste lu à l'envers. Le retournement est cuit dans le
   fichier, pas fait en CSS : un scaleY() aurait aussi retourné le dégradé, et
   l'or serait tombé à contre-jour du reste de la page.
   Décoratif : hors du flux de lecture. */
.legende .container::after {
  content: ''; display: block; width: 200px; height: 46px;
  margin: clamp(30px, 5vw, 46px) auto 0;
  background: var(--gold-metal);
  -webkit-mask: url('../assets/ornaments/couronne-renversee.webp') no-repeat center / contain;
          mask: url('../assets/ornaments/couronne-renversee.webp') no-repeat center / contain;
}

/* ---------- Contact ---------- */
/* le téléphone d'abord (on appelle pour ce soir, on écrit pour une soirée),
   l'adresse ensuite — même corps, même voix, une paire assumée */
.contact-mail, .contact-tel a {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.6rem);
  overflow-wrap: anywhere;
}
.contact-tel { margin-bottom: 2px; }
.contact-tel a { letter-spacing: 0.04em; white-space: nowrap; }
.contact-note { color: var(--muted); font-size: 0.95rem; }
/* les comptes du château : pas de couleur propre — l'or des liens dit que
   ça se clique, ce qu'un texte couleur encre ne disait pas */
.reseau { font-weight: 600; white-space: nowrap; }
/* légende sous la photo de la remorque */
.photo-legende {
  margin: 10px 0 0; text-align: center;
  color: var(--muted); font-family: var(--font-display);
  font-weight: 600; font-size: 0.95rem;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(201, 161, 90, 0.1);
  padding: 28px 0 36px; color: var(--muted); font-size: 0.85rem;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--muted); }
footer a:hover { color: var(--gold); }

/* ---------- Pages légales ---------- */
.legal-page main { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }
.legal-page h1 { font-size: clamp(2rem, 5vw, 2.6rem); color: var(--gold); }
/* pas de gothique dans les pages légales : « Éditeur », « Hébergeur »,
   « Médiation de la consommation » sont des rubriques administratives, pas de
   l'enseigne. Le blackletter y donnait un ton de parchemin à des mentions qui
   doivent se lire vite et sans ambiguïté. Cormorant, comme le h1 juste
   au-dessus : les deux niveaux de titre parlent enfin de la même voix.
   Effet de bord : plus AUCUN élément de ces pages ne demande Old London
   (vérifié en parcourant chaque nœud + ::before + ::after). Le navigateur ne
   tire une fonte que si un élément rendu la réclame, donc elle ne devrait plus
   partir sur le fil ici — mesuré à 0 octet transféré, mais sur cache chaud :
   le cas cache froid n'a pas été prouvé. */
.legal-page h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; color: var(--gold);
  margin-top: 1.6em;
}
.legal-page h2::before { display: none; }
.legal-page .back { display: inline-block; margin-bottom: 28px; font-weight: 600; font-size: 0.95rem; }
.pending {
  display: inline-block; border: 1.5px dashed var(--gold); color: var(--gold);
  border-radius: 6px; padding: 0 8px; font-weight: 600; font-size: 0.9em;
}