/* ============================================================
   La Gazette d'Élisabeth — Feuille principale
   Desktop · iPad · iPhone (responsive complet)
   ============================================================ */

/* tokens.css est désormais chargé via <link> direct AVANT main.css dans chaque
   page (plus d'@import) : le CSS se télécharge en parallèle au lieu d'être
   sérialisé, et le @font-face est découvert tôt → le preload de la police
   (index.html) est réclamé sans délai (fini l'avertissement « preloaded but not
   used »). Ne PAS réintroduire l'@import ici. */

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* réserve l'espace scrollbar en permanence → évite le saut de layout au redimensionnement */
  overflow-x: hidden;
}
html, body { margin: 0; padding: 0; }

body {
  background-color: var(--cream-50);
  background-image:
    radial-gradient(1400px 900px at 80% -10%, var(--rose-50) 0%, transparent 60%),
    radial-gradient(1100px 700px at -10% 110%, var(--bleu-50) 0%, transparent 65%),
    var(--grain-url);
  background-blend-mode: normal, normal, multiply;
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--encre-900);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-4);
}
p { margin: 0 0 var(--sp-4); color: var(--fg-1); }

a { color: inherit; text-decoration: none; }

/* ─── Layout helpers ─── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }
.container.wide { max-width: 1500px; }
.container.narrow { max-width: 900px; padding: 0 48px; }
.text-center { text-align: center; }
.hide { display: none !important; }

/* ─── Eyebrow ─── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow.with-rules::before {
  content: ""; display: inline-block; width: 26px; height: 0;
  border-bottom: 1px solid var(--accent); vertical-align: middle; position: relative; top: 1px;
}
.eyebrow.with-rules::after {
  content: ""; display: inline-block; width: 26px; height: 0;
  border-bottom: 1px solid var(--accent); vertical-align: middle; position: relative; top: 1px;
}
.eyebrow .dot { color: var(--accent); }

/* ─── Display headings ─── */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--encre-900);
  margin: 0;
}
.h-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--bleu-500);
}
.h-display .script {
  font-family: var(--font-script);
  display: block;
  font-style: normal;
  color: var(--accent-deep);
  font-size: 0.55em;
  line-height: 0.7;
  margin-bottom: 6px;
  letter-spacing: 0;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--accent-deep);
  line-height: 1;
}
/* Sissi en violet */
.sissi-highlight {
  color: var(--violet-500);
}

.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lead-page, 1.35rem);
  line-height: 1.45;
  color: var(--encre-700);
}

/* ─── Boutons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px; letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all 220ms var(--ease-romance);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--bleu-500); color: var(--cream-50); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--bleu-600); box-shadow: var(--shadow-md); color: var(--cream-50); }
.btn-secondary { background: transparent; color: var(--encre-900); border-color: var(--encre-900); }
.btn-secondary:hover { background: var(--encre-900); color: var(--cream-50); }
.btn-gold {
  background: linear-gradient(180deg, var(--or-200), var(--or-400));
  color: var(--encre-900);
  box-shadow: 0 2px 6px rgba(140,109,38,.22), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover { box-shadow: 0 8px 22px rgba(140,109,38,.30); color: var(--encre-900); }
.btn-ghost { background: var(--cream-100); color: var(--encre-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--cream-200); }
.btn-sm { padding: 8px 16px; font-size: 12.5px; }

/* ─── Cartes ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: all 280ms var(--ease-romance);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ─── Filet ornemental ─── */
.ornament-rule {
  border: 0;
  height: 22px;
  background:
    linear-gradient(90deg, transparent, var(--or-300) 20%, var(--or-300) 80%, transparent) center/100% 1px no-repeat,
    radial-gradient(circle at center, var(--or-300) 0 3.5px, transparent 4.5px) center/22px 22px no-repeat;
  margin: var(--sp-7) auto;
  max-width: 280px;
}

a.text-link {
  color: var(--bleu-500);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat;
  transition: background-size .25s var(--ease-romance), color .15s;
}
a.text-link:hover { color: var(--accent-deep); background-size: 100% 2px; }

/* ============================================================
   MASTHEAD + HEADER + MENU MOBILE
   ============================================================ */
/* Anti-CLS : le header est injecté en JS dans #chrome-top → sans hauteur
   réservée, toute la page descend d'un bloc à l'injection. 72px = plus
   petite hauteur réelle mesurée du header (elle varie de 73 à 170px selon
   la largeur) — réserve sans risque de vide résiduel. */
#chrome-top { min-height: 72px; }

.masthead {
  background: var(--cream-100);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.masthead .container {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-top: 10px; padding-bottom: 10px;
  gap: 28px;
}
.masthead .container > div:nth-child(1) {
  text-align: left;
}
.masthead .container > div:nth-child(2) {
  justify-self: center;
}
.masthead .container > div:nth-child(3) {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead .center { display: flex; align-items: center; gap: 12px; color: var(--accent-deep); }
.masthead .center span { color: var(--accent); }

.site-header {
  background: rgba(251, 247, 238, 0.92);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 28px;
}
.site-header .left  { display: flex; align-items: center; gap: 12px; }
.site-header .right { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }

.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--encre-900);
  text-align: center;
  text-decoration: none;
  line-height: 1;
  display: inline-block;
}
.wordmark .sub {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  color: var(--accent-deep);
  text-transform: uppercase;
  margin-top: 6px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}

.nav-list {
  display: flex; gap: 20px;
  list-style: none; padding: 0; margin: 0;
}
.nav-list a {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-700);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color .2s;
}
.nav-list a:hover { color: var(--accent-deep); }
.nav-list a.active { color: var(--encre-900); }
.nav-list a.active::after {
  content: "";
  position: absolute; left: 50%; bottom: -2px;
  transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ─── Nav "···" dropdown ─── */
.nav-more-item { position: relative; list-style: none; }
.nav-more-btn {
  background: transparent; border: none;
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--encre-700);
  padding: 6px 2px;
  cursor: pointer; line-height: 1;
  transition: color .2s;
  display: flex; align-items: center;
}
.nav-more-btn:hover { color: var(--accent-deep); }
.nav-more-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  list-style: none;
  padding: 8px 0; margin: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-romance),
              transform var(--dur-fast) var(--ease-romance);
  z-index: 200;
}
.nav-more-dropdown::before {
  content: "";
  position: absolute; top: -5px; right: 14px;
  width: 8px; height: 8px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.nav-more-dropdown.open,
.nav-more-item:focus-within .nav-more-dropdown {
  opacity: 1; pointer-events: all;
  transform: translateY(0);
}
.nav-more-dropdown li a {
  display: block;
  padding: 10px 36px 10px 20px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-700);
  transition: color .15s, background .15s;
  white-space: nowrap;
  position: relative;
}
.nav-more-dropdown li a:hover { color: var(--accent-deep); background: var(--cream-100); }
.nav-more-dropdown li a.active { color: var(--accent-deep); }
.nav-more-dropdown li a.active::after {
  left: auto; right: 16px;
  bottom: 50%; transform: translateY(50%);
}

.icon-btn {
  background: transparent; border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--encre-700);
  transition: all .2s;
  text-decoration: none;
}
.icon-btn:hover { background: var(--cream-100); color: var(--encre-900); }

/* ============================================================
   RECHERCHE GLOBALE
   ============================================================ */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.search-container.open .search-input {
  opacity: 1;
  width: 280px;
  padding: 0 14px;
  pointer-events: auto;
}
.search-inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.search-input {
  position: relative;
  z-index: 10;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0;
  font-size: 14px;
  color: var(--encre-700);
  font-family: inherit;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width .25s var(--ease-romance), opacity .25s;
  min-height: 40px;
}
.search-input::placeholder { color: var(--fg-2); }
.search-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: var(--shadow-sm);
  max-height: 400px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}
.search-result-item {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  cursor: pointer;
}
.search-result-item:hover { background: var(--cream-50); }
.search-result-item:last-child { border-bottom: none; }
.search-result-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--encre-900);
  margin-bottom: 2px;
}
.search-result-subtitle {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.3;
}
.search-result-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 4px;
}
.search-result-more {
  display: block;
  padding: 12px 16px;
  text-align: center;
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  transition: background .15s;
  cursor: pointer;
}
.search-result-more:hover { background: var(--cream-50); }
.search-no-result {
  padding: 20px 16px;
  text-align: center;
  color: var(--fg-2);
  font-size: 14px;
}

/* Menu mobile (hamburger overlay) */
.mobile-menu-btn { display: none; }
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--cream-50);
  z-index: 100;
  padding: 24px;
  transform: translateX(100%);
  transition: transform .35s var(--ease-romance);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.mobile-nav li {
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a {
  display: block;
  padding: 22px 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--encre-900);
  text-decoration: none;
}
.mobile-nav a.active { color: var(--accent-deep); }
.mobile-nav .footer-note {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
  font-family: var(--font-script);
  color: var(--accent-deep);
  font-size: 24px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--encre-900);
  color: #E5D5B3;
  padding-top: 72px;
  margin-top: 96px;
}
.site-footer .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
}
.site-footer .brand-block .word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  color: var(--cream-50);
}
.site-footer .brand-block .sub {
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--or-300);
  margin-top: 6px;
  text-transform: uppercase;
}
.site-footer .brand-block p {
  margin-top: 18px; font-size: 13.5px; line-height: 1.7;
  color: #C8B89A; max-width: 38ch;
}
.site-footer h6 {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--or-300);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a {
  color: #E5D5B3; text-decoration: none; font-size: 14px;
  transition: color .15s;
}
.site-footer ul a:hover { color: var(--cream-50); }
.site-footer .bottom {
  border-top: 1px solid #4A3E2E;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-size: 11.5px; color: #9B8B70; letter-spacing: 0.04em;
  flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--cream-100);
  color: var(--encre-700);
  border: 1px solid var(--line);
}
.badge.gold { background: var(--or-50); color: var(--accent-deep); border-color: var(--or-200); }
.badge.blue { background: var(--bleu-50); color: var(--bleu-600); border-color: var(--bleu-100); }
.badge.rose { background: var(--rose-50); color: var(--rose-500); border-color: var(--rose-100); }
.badge.sage { background: var(--sauge-100); color: #5C7349; border-color: #C9D5BC; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ============================================================
   PORTRAITS
   ============================================================ */
.portrait-oval {
  position: relative;
  border-radius: 50% / 14%;
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--shadow-md);
}
.portrait-oval img { display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: cover; }

/* Double médaillon violet pour Sissi (sur la page d'accueil) */
.portrait-double-violet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px 22px;
  background: var(--violet-50);
  border: 5px solid var(--violet-300);
  border-radius: 50% / 10%;
}

.portrait-double-violet .script {
  align-self: flex-end;
  margin-right: 8px;
  margin-bottom: 4px;
}

.portrait-double-violet figcaption {
  width: 100%;
  text-align: center;
}

.portrait-rect {
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--shadow-md);
  border: 6px solid var(--cream-50);
  outline: 1.2px solid var(--or-300);
  outline-offset: -9px;
}
.portrait-rect img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 60px 0 80px;
  overflow: hidden; /* clip les ornements SVG qui dépassent sur les bords */
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.hero-ornament {
  position: absolute;
  pointer-events: none;
  opacity: 0.18;
}
.hero h1.h-display { font-size: 5.5rem; margin: 22px 0 6px; }

/* Stat strip */
.stat-strip {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 20px 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--cream-100), transparent);
  flex-wrap: wrap;
}
.stat-strip .stat { display: flex; align-items: baseline; gap: 10px; }
.stat-strip .stat + .stat { border-left: 1px solid var(--line); padding-left: 36px; }
.stat-strip .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--accent-deep);
  line-height: 1;
}
.stat-strip .lbl {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.stat-strip .meta {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-2);
}

/* ─── Reveal on scroll ─── */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease-romance), transform .8s var(--ease-romance);
}
.reveal.in { opacity: 1; transform: none; }

/* ─── Page À propos ─── */
.apropos-frame {
  padding: 44px 48px;
}
.apropos-auteure-header {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-bottom: 28px;
}

/* ─── Section auteure (Mot de l'auteure) ─── */
.auteure-grid {
  padding: 44px 56px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  align-items: center;
}

/* ─── Encadrement papier ─── */
.frame {
  border: 1px solid var(--or-200);
  outline: 1px solid var(--or-100);
  outline-offset: 5px;
  border-radius: 4px;
  padding: 28px;
  background: var(--surface);
}

/* ============================================================
   GRILLES
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* Modificateur pour les sections dont le nombre de cartes vient des données
   (séjour → promenades/documents liés, promenade → documents, ville → articles).
   Avec `.grid-3` seule, 1 carte reste collée à gauche (2 colonnes vides).
   Ici `auto-fit` fait s'effondrer les colonnes vides et `justify-content:center`
   centre la/les carte(s) : 1 carte centrée, 2 → 2 colonnes centrées, jusqu'à 3.
   `min(280px,100%)` = anti-débordement iOS (leçon WBS). Spécificité 0,2,0 pour
   battre les media-queries de `.grid-3`. */
.grid-3.grid-center {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 442px));
  justify-content: center;
}

/* ============================================================
   FRISE CHRONOLOGIQUE
   ============================================================ */
.tl-row {
  position: relative;
  height: 90px;
  margin-top: 22px;
}
.tl-row .axis {
  position: absolute; left: 1%; right: 1%; top: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-300) 5%, var(--or-300) 95%, transparent);
}
.tl-row .tick {
  position: absolute; top: 44px;
  width: 1px; height: 12px;
  background: var(--or-400);
}
.tl-row .year-mark {
  position: absolute; top: 62px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-2);
}
.tl-row .dot {
  position: absolute; top: 50px; /* centré sur l'axe : translate(-50%,-50%) ramène le centre à exactement 50px */
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--rose-300);
  border: 2px solid var(--cream-50);
  outline: 1px solid var(--or-300);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .25s var(--ease-bloom);
  padding: 0;
}
.tl-row .dot:hover { transform: translate(-50%, -50%) scale(1.4); }
.tl-row .dot.gold { background: var(--or-300); }
.tl-row .dot.bleu { background: var(--bleu-300); }
.tl-row .dot.sage { background: var(--sauge-200); }
.tl-row .dot.lg   { width: 22px; height: 22px; }
.tl-row .dot-label {
  position: absolute; top: 8px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  color: var(--encre-700);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.tl-row .dot:hover + .dot-label,
.tl-row .dot.active + .dot-label { opacity: 1; }

.timeline-band {
  padding: 38px 60px 50px;
  background: linear-gradient(180deg, var(--cream-50), var(--cream-100));
}
.legend {
  display: flex; gap: 22px; align-items: center;
  margin-top: 22px;
  font-size: 12px; color: var(--fg-2);
  flex-wrap: wrap;
}
.legend .swatch {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%; margin-right: 6px;
  border: 2px solid var(--cream-50); outline: 1px solid var(--or-300);
  vertical-align: middle;
}

/* En-tête de la page Dates — aligné sur la colonne des cards */
.dates-hero {
  padding-left: 140px;
  text-align: center;
}

/* Frise verticale */
.tl-vertical {
  position: relative;
  padding-left: 140px;
}
.tl-vertical::before {
  content: "";
  position: absolute;
  left: 120px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--or-300) 4%, var(--or-300) 96%, transparent);
}
.tl-vertical .entry {
  position: relative;
  margin-bottom: 32px;
}
.tl-vertical .year-block {
  position: absolute;
  left: -145px;
  width: 100px;
  text-align: right;
  padding-top: 4px;
}
.tl-vertical .year-block .year {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--encre-900);
  line-height: 1;
  font-style: italic;
}
.tl-vertical .year-block .month {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 6px;
}
.tl-vertical .pip {
  position: absolute;
  left: -27px; top: 18px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rose-300);
  border: 3px solid var(--cream-50);
  outline: 1px solid var(--or-300);
}
.tl-vertical .pip.gold { background: var(--or-300); }
.tl-vertical .pip.bleu { background: var(--bleu-300); }
.tl-vertical .pip.sage { background: var(--sauge-200); }

/* ============================================================
   FILTRES (chips)
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px 24px;
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-wrap: nowrap;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.filter-label {
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-2);
  font-weight: 600; flex-shrink: 0;
}
.area-chips-container {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.area-chips-container::-webkit-scrollbar { display: none; }
.filter-bar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chip-filter {
  display: inline-flex; gap: 6px; align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--encre-700);
  cursor: pointer;
  transition: all .2s;
}
.chip-filter:hover { border-color: var(--accent); color: var(--encre-900); }
.chip-filter.active { background: var(--encre-900); color: var(--cream-50); border-color: var(--encre-900); }
.chip-filter strong { font-weight: 600; opacity: .65; }

/* ─── Recherche inline dans la barre de filtres (page Presse) ─── */
.presse-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  flex-shrink: 0;
  color: var(--fg-2);
  transition: border-color .2s;
}
.presse-search-wrap:focus-within {
  border-color: var(--accent);
  color: var(--encre-900);
}
.presse-search-input {
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--encre-900);
  outline: none;
  width: 190px;
}
.presse-search-input::placeholder { color: var(--fg-3); font-style: italic; }

/* ─── Selects natifs — version mobile des filtres (≤820px) ─── */
.filter-selects {
  display: none; /* masqué par défaut ; affiché par le media-query ≤820px */
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.filter-select {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 200px; /* basis 200px → deux selects côte à côte sur tablette, empilés en pleine largeur sur téléphone (pas de troncature du libellé) */
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  color: var(--encre-700);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22 viewBox=%220 0 12 8%22><path fill=%22%23888%22 d=%22M0 0l6 8 6-8z%22/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .2s;
}
.filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ─── Responsive ≤820px : chips → selects (la barre passe en mode « mobile », comme la nav burger) ─── */
@media (max-width: 820px) {
  .filter-bar {
    flex-wrap: wrap;
    overflow: visible; /* annule l'overflow:hidden du desktop pour que les selects soient visibles */
  }
  /* Masquer les chips et le bloc saison */
  .filter-bar .chip-filter,
  .filter-bar .area-chips-container,
  .filter-bar .filter-bar-right {
    display: none;
  }
  /* Masquer les labels "Top N villes …" (présents dans les 3 barres) */
  .filter-bar .filter-label {
    display: none;
  }
  /* Le champ de recherche reste visible (au-dessus des selects) */
  .filter-bar .presse-search-wrap {
    display: flex;
    flex: 0 0 100%; /* pleine largeur */
    order: -1;
  }
  /* Afficher le conteneur selects */
  .filter-selects {
    display: flex;
    width: 100%;
  }
}

/* ─── Dropdown "Plus de régions" ─── */
.area-more {
  position: relative;
  display: inline-flex;
}
.area-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.area-more-btn.active {
  background: var(--encre-900);
  color: var(--cream-50);
  border-color: var(--encre-900);
}
.area-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  display: none;
}
.area-dropdown.open { display: block; }
.area-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--encre-700);
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s;
}
.area-dropdown-item:last-child { border-bottom: none; }
.area-dropdown-item:hover { background: var(--cream-100); color: var(--encre-900); }
.area-dropdown-item.active { background: var(--encre-900); color: var(--cream-50); }
.area-dropdown-item.active .area-dropdown-count { opacity: .5; }
.area-dropdown-count {
  font-size: 11px;
  font-weight: 600;
  opacity: .45;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   EXPLORER (carte + side panel)
   ============================================================ */
.explorer-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  background: var(--cream-50);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.map-pane {
  position: relative;
  height: 640px;
  border-right: 1px solid var(--line);
}
#gmap { width: 100%; height: 100%; }
.side-pane {
  background: var(--cream-100);
  padding: 28px 28px 32px;
  overflow-y: auto;
  max-height: 640px;
}
.sejour-mini {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: all .25s var(--ease-romance);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.sejour-mini:hover {
  border-color: var(--or-200);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.sejour-mini.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--or-50), var(--surface));
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   FICHE SÉJOUR
   ============================================================ */
.sejour-hero {
  padding: 60px 0 24px;
}
.sejour-fact-card {
  background: var(--surface);
  border: 1px solid var(--or-200);
  outline: 1px solid var(--or-100);
  outline-offset: 4px;
  border-radius: var(--r-sm);
  padding: 28px 32px;
}
.sejour-fact-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 14px;
}
.sejour-fact-card dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
  padding-top: 2px;
}
.sejour-fact-card dd {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--encre-900);
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}
/* Même logique que .grid-3.grid-center : une photo seule ne doit pas rester
   collée à gauche (2 colonnes vides). auto-fit + justify-content:center →
   1 photo centrée, 2 → 2 colonnes, jusqu'à 3 ; mobile → 1 colonne. Plafond
   450px = largeur d'une photo en grille 3-col sur le conteneur le plus large. */
.galerie.grid-center {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 450px));
  justify-content: center;
}
.galerie figure {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  background: var(--cream-100);
  aspect-ratio: 4/3;
}
.galerie figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-romance);
}
.galerie figure:hover img { transform: scale(1.04); }
.galerie .placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script);
  font-size: 36px;
  color: var(--accent-deep);
  background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
}

.map-embed {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  height: 360px;
}
.map-embed iframe, .map-embed #sejour-map { width: 100%; height: 100%; border: 0; }

/* Récit narratif */
.recit {
  max-width: 64ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.85;
  color: var(--encre-700);
}
.recit p { margin-bottom: 1.4em; }

/* Lettrine relevée (raised cap) — uniquement sur le premier paragraphe.
   Pas de float : le texte continue sur la même ligne de base que le bas du grand "I". */
.recit p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: .75;   /* réduit la contribution à la hauteur de ligne sans affecter le rendu */
  color: var(--accent-deep);
  font-style: italic;
  margin-right: 4px;
}

/* ─── Récit par blocs (éléments intercalés) ─── */
.recit .recit-soustitre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--encre-900);
  margin: 1.4em 0 .4em;
}
.recit .recit-citation {
  border-left: 3px solid var(--accent);
  margin: 1.2em 0;
  padding: 2px 0 2px 20px;
  font-style: italic;
  font-size: 1.18em;
  color: var(--fg-1);
}
.recit .recit-figure {
  margin: 1.6em 0;
  text-align: center;
}
.recit .recit-figure img {
  max-width: 100%;
  height: auto;            /* jamais object-fit:cover + hauteur fixe (leçon WBS) */
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.recit .recit-figure figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--fg-2);
}

/* ─── Indice de confiance des sources ───
   Quatre niveaux : preuve · faisceau d'indices · indice isolé · tradition.
   L'information est portée par TROIS canaux redondants — la forme du disque (SVG),
   le mot, et la couleur en renfort. Jamais la couleur seule : le bloc reste lisible
   en niveaux de gris, à l'impression, et pour un œil qui ne distingue pas les teintes. */
.recit .recit-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: -.5em 0 1.4em;
  padding-left: 14px;
  border-left: 2px solid var(--cream-300, #E5D5B3);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.recit .recit-source .src-niveau {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 2px 10px 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.recit .recit-source .src-niveau svg { flex: 0 0 auto; display: block; }
.recit .recit-source .src-ref { min-width: 0; }   /* anti-débordement iOS (leçon WBS) */
.recit .recit-source .src-ref a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recit .recit-source .src-ref a:hover { color: var(--bleu-600, #3A5F60); }

/* Lien écrit DANS un paragraphe de récit — même traitement que la référence ci-dessus.
   La règle globale `a { color: inherit; text-decoration: none }` rendait ces liens
   rigoureusement invisibles : sur « Notre méthode », l'invitation « écrivez-nous » ne se
   distinguait en rien du texte autour. Le défaut était surtout un piège en attente — la
   mise en forme inline des récits autorise [texte](url) depuis le lot « Partage &
   sources », et le jour où une source est citée en plein paragraphe elle aurait été
   muette elle aussi. Mesuré le 2026-08-07 : 0 lien inline en base, donc rien à rattraper,
   seulement à empêcher. Le soulignement, et non la couleur seule — cohérent avec le reste
   du site et lisible sans distinguer les teintes. */
.recit p a, .recit li a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recit p a:hover, .recit li a:hover { color: var(--bleu-600, #3A5F60); }

/* Les teintes viennent de la palette du site — aucune couleur d'alerte : une tradition
   locale n'est pas une erreur, c'est une information dont on dit la nature.

   SEULE LA COULEUR change d'un niveau à l'autre. Les quatre pastilles doivent se lire
   comme une même famille à quatre degrés : casse, graisse, style et corps identiques,
   sinon l'œil y voit une hiérarchie typographique qui n'existe pas. Deux variantes
   sortaient en capitales et une en italique jusqu'au 2026-08-06 — divergence par rapport
   à la maquette validée, où les quatre libellés sont en casse normale. Le mot est le
   porteur principal du sens (la forme et la couleur ne sont que des renforts pour l'œil
   qui ne distingue pas les teintes) : il doit rester le plus lisible possible, et
   « Faisceau d'indices » se lit mieux que « FAISCEAU D'INDICES ».
   Verrouillé par scripts/tests/test-methode.php. */
.recit .src-preuve    .src-niveau { color: var(--bleu-600, #3A5F60); }
.recit .src-faisceau  .src-niveau { color: var(--or-500,  #8C6D26); }
.recit .src-indice    .src-niveau { color: var(--fg-2); }
.recit .src-tradition .src-niveau { color: var(--rose-500, #A55E53); }

/* ── Sources : plusieurs références sous une même pastille ──────────────
   Empilées, jamais repliées : cacher les références derrière un clic irait
   contre le but (rendre le fonds parcourable). Seule la COULEUR distingue
   les niveaux — test-methode.php verrouille l'absence de text-transform,
   font-style, font-weight, font-size et font-family sur .src-niveau. */
.src-refs { list-style: none; margin: .35rem 0 0; padding: 0; }
.src-refs li { margin: 0 0 .2rem; line-height: 1.45; }
.src-refs li:last-child { margin-bottom: 0; }

/* Le commentaire du bloc : au-dessus de la liste, jamais mêlé aux références. */
.src-note { display: block; margin: .1rem 0 .3rem; font-style: italic; opacity: .9; }

/* Une référence sans cible reste NOMMÉE. On ne fabrique jamais d'URL. */
.src-muette { opacity: .72; }

/* Annotation courte par référence — « Madame » / « Miss ». */
.src-precision { opacity: .8; }

/* Pas de classe « src-multi » sur l'enveloppe : INV-54 (test-sources-render.js)
   fige son attribut à « recit-source src-{niveau} », guillemet fermant compris.
   Une règle déclarée ici sans émetteur serait du CSS mort, et le marqueur
   n'apporterait rien de toute façon — la présence de <ul class="src-refs"> dit
   déjà la pluralité, et seule la COULEUR doit distinguer les blocs entre eux. */

/* ─── Légende de l'échelle, repliée en fin de fiche ─── */
.methode-legende { margin: 2.5em 0 0; font-size: 14px; }
.methode-legende > summary {
  cursor: pointer;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bleu-600, #3A5F60);
}
.methode-legende dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* minmax(0,…) : anti-pan horizontal iOS */
  gap: 10px 16px;
  margin: 16px 0 0;
}
.methode-legende dt { white-space: nowrap; }
.methode-legende dd { margin: 0; color: var(--fg-2); }
@media (max-width: 560px) {
  .methode-legende dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .methode-legende dd { margin: 0 0 10px; }
}

@media print {
  /* Un article imprimé sans ses sources perd ce qui fait sa valeur : on garde tout,
     et la légende se déplie puisque le lecteur ne pourra plus cliquer. */
  .recit .recit-source { break-inside: avoid; }
  .methode-legende > summary { list-style: none; }
  /* Déplie la légende même repliée à l'écran : sur papier, on ne clique pas. */
  .methode-legende > *:not(summary) { display: block !important; }
  .methode-legende dl { display: block; }
  .methode-legende dt { font-weight: 700; margin-top: 8px; }
}

/* ============================================================
   GRILLE DE VILLES
   ============================================================ */
.ville-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 280ms var(--ease-romance);
  display: flex;
  flex-direction: column;
}
.ville-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--or-200); }
.ville-card .img-area {
  height: 200px;
  background: linear-gradient(135deg, var(--bleu-100), var(--rose-100));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script);
  font-size: 48px;
  color: var(--accent-deep);
  text-align: center;
  padding: 0 16px;
  line-height: 1;
}
.ville-card .img-area img {
  width: 100%; height: 100%; object-fit: cover;
}
.ville-card .body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex; flex-direction: column;
}
.ville-card h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 6px 0 8px;
}
.ville-card .count {
  margin-top: 12px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-deep);
  font-size: 14px;
}

/* ============================================================
   MODALS — Politique de confidentialité, mentions légales
   ============================================================ */
dialog.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15), 0 0 0 9999px rgba(0,0,0,0.25);
  overflow: auto;
  animation: modal-in 280ms var(--ease-romance);
}
dialog.modal::backdrop {
  background-color: rgba(0,0,0,0.4);
  animation: fade-in 280ms ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.modal-header h2 {
  margin: 0;
  font-size: 1.55rem;
  color: var(--encre-900);
}
.modal-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
}
.modal-close:hover { color: var(--encre-900); }

.modal-body {
  padding: 28px 32px;
}
.modal-body h3 {
  font-size: 1.2rem;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--encre-900);
}
.modal-body h3:first-child { margin-top: 0; }
.modal-body p {
  margin-bottom: 14px;
  line-height: var(--lh-body);
}
.modal-body ul {
  margin: 12px 0 12px 20px;
  padding: 0;
  list-style: disc;
}
.modal-body li {
  margin-bottom: 8px;
}
.modal-body a {
  color: var(--primary-deep);
  text-decoration: underline;
  transition: color 150ms ease;
}
.modal-body a:hover { color: var(--accent-deep); }
.modal-body blockquote {
  margin: 16px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--accent);
  background: var(--cream-50);
  font-style: italic;
  color: var(--fg-1);
}

.legal-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease;
}
.legal-link:hover { color: var(--accent-deep); }

/* ============================================================
   RESPONSIVE — iPad portrait (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .hero { padding: 48px 0 56px; }
  .hero h1.h-display { font-size: 4rem; }
  .portrait-double-violet .portrait-oval { width: 300px !important; height: 390px !important; }
  .hero-grid { gap: 48px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .site-footer .grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .explorer-grid { grid-template-columns: 1fr; }
  .map-pane { height: 460px; border-right: none; border-bottom: 1px solid var(--line); }
  .side-pane { max-height: none; }
  .timeline-band { padding: 28px 24px 40px; }
  .dates-hero   { padding-left: 110px; }
  .tl-vertical  { padding-left: 110px; }
  .tl-vertical::before { left: 90px; }
  .tl-vertical .year-block { left: -115px; width: 78px; }
  .tl-vertical .year-block .year { font-size: 24px; }
  .tl-vertical .pip { left: -27px; } /* identique au desktop : padding et ligne ont bougé de la même valeur */
}

/* ============================================================
   RESPONSIVE — LA NAV PASSE EN BURGER AVANT DE SORTIR DE L'ÉCRAN (≤ 960px)
   ============================================================

   ⚠️ RÈGLE SÉPARÉE DE CELLE DE 820px, ET CE N'EST PAS UN CAPRICE.
   La media query ≤820px ci-dessous gouverne TOUTE la mise en page tablette
   (hero, grilles, galerie, pied de page, gouttières). La bascule de la nav,
   elle, dépend d'une tout autre chose : la place que réclament ses libellés.
   Les deux seuils n'ont aucune raison de coïncider, et les avoir confondus a
   coûté ce qui suit.

   CE QUI S'EST PASSÉ, MESURÉ EN PRODUCTION LE 2026-08-11 À 830px :
   l'ajout de « Promenades » à la nav principale le matin même — plus « Dates »
   devenu « Séjours », 22px de plus — a porté la barre de 757px à 907px de bord
   droit. Or la bascule burger n'intervenait qu'à 820px. Entre 821 et ~907px, le
   bouton « ··· » sortait donc de l'écran, et avec lui les CINQ pages qu'il
   contient : Cartes postales, Livres, Actus, À propos, Contact. Sans même que
   la page puisse défiler horizontalement pour les rejoindre — donc
   inaccessibles, purement et simplement.

   POURQUOI ÇA N'A PAS ÉTÉ VU : la vérification du matin portait sur 1280, 1024,
   900 et 375px. À 900px la nav tenait — avec exactement ZÉRO pixel de marge, ce
   qui n'a pas été relevé. La bande [821, 900] n'a jamais été regardée.

   LE SEUIL, MESURÉ ET NON ESTIMÉ : la nav commence à x=329 et réclame 577px,
   soit 906px. On bascule à 960 pour garder ~54px de marge — de quoi encaisser
   un libellé un peu plus long sans repasser par ici.

   Tenu par scripts/tests/test-nav-largeur.php, qui refuse qu'une entrée soit
   ajoutée à la nav sans que ce seuil soit revu. */
@media (max-width: 960px) {
  .nav-list { display: none; }
  .mobile-menu-btn { display: inline-flex; }
}

/* ============================================================
   RESPONSIVE — Tablette portrait / grand téléphone (≤ 820px)
   ============================================================ */
@media (max-width: 820px) {
  .masthead { display: none; }
  .site-header .container {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-top: 14px; padding-bottom: 14px;
  }
  .wordmark { font-size: 24px; }
  .wordmark .sub { font-size: 8.5px; letter-spacing: 0.28em; }

  .hero h1.h-display { font-size: 3.2rem; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: left;
  }
  .hero figure { justify-self: center; }
  .portrait-double-violet .portrait-oval { width: clamp(180px, 40vw, 240px) !important; height: clamp(230px, 52vw, 310px) !important; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-strip { gap: 18px; }
  .stat-strip .stat + .stat { border-left: 0; padding-left: 0; }
  .stat-strip .meta { margin-left: 0; width: 100%; }

  .ornament-rule { margin: var(--sp-6) auto; }
  .container { padding: 0 20px; }
  .site-footer .grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding-top: 56px; margin-top: 64px; }

  .galerie { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .recit p:first-of-type::first-letter { font-size: 3.4em; }

  .filter-bar { padding: 14px 16px; gap: 8px; }
}

/* ============================================================
   RESPONSIVE — Section auteure (≤ 540px) : empilement vertical
   ============================================================ */
@media (max-width: 540px) {
  .auteure-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
  }
  .auteure-grid .eyebrow { justify-content: center; }
}

/* ============================================================
   RESPONSIVE — iPhone (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero { padding: 32px 0 40px; }
  .hero h1.h-display { font-size: 2.4rem; }
  .lead { font-size: 1.05rem; }
  .btn { padding: 11px 20px; font-size: 13px; }

  .portrait-double-violet .portrait-oval { width: 180px !important; height: 230px !important; }
  .portrait-rect { height: 320px !important; }

  .galerie { grid-template-columns: 1fr; }
  .map-pane { height: 360px; }
  .map-embed { height: 280px; }

  /* Page À propos : portrait + texte en colonne */
  .apropos-frame { padding: 28px 20px; }
  .apropos-auteure-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .timeline-band { padding: 20px 12px 32px; }
  .tl-row { height: 70px; }

  .dates-hero  { padding-left: 16px; text-align: left; }
  .tl-vertical { padding-left: 16px; }
  .tl-vertical::before { left: 4px; }
  .tl-vertical .year-block {
    position: static;
    text-align: left;
    width: auto;
    margin-bottom: 6px;
    margin-left: 14px;
  }
  .tl-vertical .year-block .year { font-size: 22px; display: inline-block; }
  .tl-vertical .year-block .month { display: inline-block; margin-left: 10px; margin-top: 0; vertical-align: middle; }
  .tl-vertical .pip { left: -19px; top: 6px; } /* -(padding-left 16 - line-left 4) - demi-pip 7 = -19 */
  .tl-vertical .entry { padding-left: 14px; }

  .sejour-fact-card { padding: 20px; }
  .sejour-fact-card dl { grid-template-columns: 1fr; row-gap: 4px; }
  .sejour-fact-card dt { padding-top: 12px; }
  .sejour-fact-card dd { font-size: 18px; }

  .site-footer { padding-top: 48px; margin-top: 48px; }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   ARTICLES DE PRESSE — tags + cartes
   ============================================================ */
.article-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.article-tag-icon { font-size: 11px; opacity: .8; }
.article-tag.tag-ville { background: var(--bleu-50);  color: var(--bleu-600); }
.article-tag.tag-lieu  { background: #E6EFDE;         color: #4A6238; }
.article-tag.tag-libre { background: var(--or-50);    color: var(--accent-deep); }
a.article-tag:hover    { transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }

/* ─── Cartes article sur la page ville ─── */
.article-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--or-200);
  text-decoration: none;
}
.article-card-thumb {
  height: 180px;
  background: var(--cream-100);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.article-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card-thumb-empty {
  font-family: var(--font-display);
  font-style: italic; font-size: 14px;
  color: var(--fg-3);
}
.article-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.article-card-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600; margin-bottom: 6px;
}
.article-card-titre {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.3rem; color: var(--encre-900); margin: 0 0 8px; line-height: 1.25;
}
.article-card-meta {
  font-size: 12.5px; color: var(--fg-2); margin: auto 0 0;
  font-style: italic;
}

/* ============================================================
   CARTES POSTALES — fonds documentaire (grille orientée image)
   ============================================================ */
/* Grille adaptative : min(260px,100%) évite qu'une colonne ne déborde sur
   les très petits écrans (iOS) ; minmax(0,1fr) + min-width:0 sur les enfants
   protègent contre le pan horizontal (cf. LECONS-WBS). */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 28px;
}
.cp-card {
  display: flex; flex-direction: column;
  min-width: 0;                         /* anti-débordement horizontal */
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--or-200);
  text-decoration: none;
}
/* Vignette en aspect-ratio (cartes postales plutôt paysage) + cover.
   aspect-ratio + object-fit:cover est OK ici car c'est une vignette
   recadrée, pas une image de contenu (distinction LECONS-WBS). */
.cp-card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--cream-100);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.cp-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder élégant quand aucune image de couverture */
.cp-card-thumb-empty {
  background: linear-gradient(135deg, var(--cream-50), var(--cream-100));
}
.cp-card-thumb-empty span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--or-200);
  line-height: 1;
}
.cp-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cp-card-titre {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.25rem; color: var(--encre-900); margin: 0 0 8px; line-height: 1.25;
}
.cp-card-meta {
  font-size: 12.5px; color: var(--fg-2); margin: 0;
  font-style: italic;
}

/* ============================================================
   ACTUS (#5) — cartes statiques (pas de fiche détail, donc pas
   de <a> englobant tout le .cp-card comme sur les autres grilles
   documentaires) + badges de statut.
   ============================================================ */

/* .cp-card est stylée comme un lien (cursor, hover translateY) ;
   ici la carte elle-même n'est PAS cliquable (seul le lien "En
   savoir plus" l'est) → on neutralise l'affordance de lien. */
.actu-card {
  cursor: default;
}
.actu-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line-soft);
}

.actu-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.actu-badge-encours { background: #E6EFDE; color: #4A6238; }
.actu-badge-terminee { background: var(--cream-100); color: var(--fg-3); }

.actu-card-desc {
  font-size: 14px;
  color: var(--fg-1);
  margin: 10px 0 14px;
  line-height: 1.5;
}

.actu-card.actu-terminee {
  opacity: 0.72;
}

.actus-section-titre {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  margin: 0 0 24px;
  color: var(--encre-900);
}

/* ============================================================
   TRADUCTION — bouton FR | EN + modale "Read in English"
   La version anglaise passe par Google Traduction (page hébergée
   translate.goog, nouvel onglet). Aucun widget ni script Google
   dans nos pages → la CSP stricte reste intacte.
   ============================================================ */

/* Masque la barre Google Translate injectée en haut de page (widget in-page) */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate { display: none !important; visibility: hidden !important; }
body, body.translated-ltr, body.translated-rtl { top: 0 !important; margin-top: 0 !important; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip,
.goog-te-ftab-float, .goog-te-menu-frame,
.goog-te-gadget, .goog-logo-link { display: none !important; }

/* Bouton FR | EN */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 1px solid var(--or-300);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-2);
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.lang-toggle:hover { border-color: var(--or-400); background: var(--or-50); }
.lt-sep { color: var(--or-300); margin: 0 2px; }
.lt-item { opacity: 0.45; transition: opacity 0.15s, color 0.15s; }
.lt-active { opacity: 1; font-weight: 700; color: var(--accent-deep); }

/* Bannière avertissement traduction */
.translate-banner {
  background: var(--or-50);
  border-bottom: 1px solid var(--or-200);
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  color: var(--fg-1);
  font-style: italic;
}
.translate-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--fg-2);
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.translate-banner-close:hover { color: var(--encre-900); }

@media (max-width: 768px) {
  .lang-toggle { padding: 3px 8px; font-size: 10px; }
  .translate-banner { font-size: 12px; padding: 8px 16px; text-align: center; }
}

/* ============================================================
   FEUILLETEUR / DOCUMENT (page détail générique document.html)
   Feuilleteur d'images multi-pages + fiche d'extras (dl).
   ============================================================ */

/* Conteneur : contain:paint pour vraiment contenir la zone (leçon WBS),
   centrage. Aucune largeur fixe → pas de débordement horizontal iOS. */
.feuilleteur {
  contain: paint;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}

/* Figure = image + légende (figcaption valide uniquement dans un figure).
   margin:0 supprime la marge native du <figure>. */
.feuilleteur-figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

/* Zone d'image. L'image est du CONTENU (pas une vignette) :
   max-width:100% + height:auto + max-height raisonnable, JAMAIS de
   hauteur fixe avec object-fit:cover (leçon WBS critique). */
.feuilleteur-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}
.feuilleteur-link {
  display: inline-block;
  max-width: 100%;
  line-height: 0; /* supprime l'espace sous l'image inline */
}
.feuilleteur-img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: var(--cream-100);
  border-radius: var(--r-sm);
}

/* Élément PDF : un PDF ne s'affiche pas dans une <img> → carte d'ouverture */
.feuilleteur-pdf {
  line-height: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 48px 32px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--cream-100);
  color: var(--accent-deep);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.feuilleteur-pdf:hover { border-color: var(--accent); background: var(--cream-50); text-decoration: none; }
.feuilleteur-pdf-icon  { font-size: 48px; }
.feuilleteur-pdf-label { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }

/* Rangée de navigation : préc. · compteur · suiv. */
.feuilleteur-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.feuilleteur-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream-100);
  color: var(--encre-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.feuilleteur-btn:hover:not(:disabled) {
  background: var(--cream-200);
  color: var(--encre-900);
}
.feuilleteur-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.feuilleteur-compteur {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-2);
  min-width: 56px;
  text-align: center;
}

/* Légende sous l'image */
.feuilleteur-legende {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-2);
  text-align: center;
  max-width: 62ch;
}

/* Fiche d'extras (liste de définitions label/valeur) */
.doc-extras {
  margin: 0;
}
.doc-extra {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 6px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.doc-extra:last-child { border-bottom: none; }
.doc-extra dt {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg-2);
  font-size: 14px;
}
.doc-extra dd {
  margin: 0;
  color: var(--encre-900);
  font-size: 15px;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .doc-extra {
    grid-template-columns: 1fr; /* label au-dessus de la valeur sur mobile */
    gap: 2px;
  }
}

/* ============================================================
   PAGE SEO « Sissi en France » — cartes de villes
   ============================================================ */
.seo-ville-card {
  display: block;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.seo-ville-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
}
.seo-ville-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0;
  color: var(--encre-900);
}
.seo-ville-region {
  display: inline-block;
  margin: 6px 0 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.seo-ville-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
}

/* ============================================================
   IMPRESSION (bonus — fiches séjour imprimables)
   ============================================================ */
/* ─── Impression / export PDF ─── */
.feuilleteur-print-all { display: none; }  /* écran : masquée ; visible seulement à l'impression */
.print-brand { display: none; }            /* écran : masquée ; visible seulement à l'impression */

@media print {
  /* Habillage & interactif retirés (le CONTENU est conservé) */
  #chrome-top, #chrome-bottom,
  .cookie-consent, .translate-banner,
  .filter-bar, .filter-selects,
  .feuilleteur-figure, .feuilleteur-nav,
  .btn, .no-print { display: none !important; }

  /* Papier : noir sur blanc, pleine largeur */
  body { background: #fff !important; color: #000 !important; }
  main { max-width: 100% !important; }

  /* Feuilleteur : on déplie toutes les images */
  .feuilleteur-print-all { display: block !important; }
  .feuilleteur-print-item { margin: 0 0 14px; break-inside: avoid; page-break-inside: avoid; }
  .feuilleteur-print-item img { max-width: 100%; height: auto; }
  .feuilleteur-print-cap { font-style: italic; font-size: .9em; color: #333; margin-top: 4px; }

  /* Pas de coupure de page au milieu d'un média */
  figure, .galerie img, .cp-card, .article-card, .map-embed { break-inside: avoid; page-break-inside: avoid; }
  img { max-width: 100% !important; height: auto !important; }

  /* Liens de contenu : afficher l'URL (utile dans un PDF d'archive) */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; word-break: break-all; }

  /* Marque de provenance en bas de l'impression */
  .print-brand { display: block !important; margin-top: 18px; padding-top: 8px;
    border-top: 1px solid #ccc; font-size: .8em; color: #666; text-align: center; }
}

/* ─── Bandeau de consentement RGPD ─── */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: var(--encre-900, #1c1a17);
  color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-consent__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 100%;
}
.cookie-consent__text a { color: var(--accent, #D4B257); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn-consent {
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.btn-consent--accept {
  background: var(--accent, #D4B257);
  border-color: var(--accent, #D4B257);
  color: var(--encre-900, #1c1a17);
  font-weight: 600;
}
.btn-consent--refuse:hover { border-color: #fff; }
.footer-legal { display: inline-flex; gap: 14px; align-items: center; }

/* Pages légales par blocs */
.legal-soustitre { font-family: var(--font-display, serif); font-size: 1.25rem; margin: 22px 0 8px; }
.legal-liste { margin: 0 0 14px; padding-left: 1.4em; }
.legal-liste li { margin: 4px 0; line-height: 1.6; }