/* ── Polices, hébergées sur le site ────────────────────────────────
   Cormorant Garamond (titres) et Jost (texte), téléchargées depuis
   Google Fonts le 25 septembre 2026 et servies depuis fonts/ : plus
   aucune requête vers les serveurs de Google, donc aucune adresse IP
   de visiteur transmise sans consentement (RGPD).
   Polices variables : un fichier couvre toutes les graisses d'un style.
   « latin » contient les accents français ; « latin-ext » n'est
   téléchargé que si une page contient un caractère qu'il est seul à
   couvrir (unicode-range). Licence SIL Open Font License : usage libre. */
/* Cormorant Garamond, normal, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond, normal, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond, italic, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond, italic, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost, normal, latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/jost-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost, normal, latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/jost-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   PÉPIN PARIS — style.css
   Palette : Jardin de Paris
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --cream:        #f2f5ee;
  --cream2:       #e2eeda;
  --cream3:       #d4e4ca;
  --cream4:       #c4d8b8;
  --green-accent: #4a7a35;
  --green-light:  #5f9448;
  --dark:         #141a10;
  --dark2:        #3a5430;
  --dark3:        #7a9870;
  --border:       rgba(40, 70, 25, 0.13);
  --border2:      rgba(40, 70, 25, 0.22);
  --status-ok:    #5a9e3a;
  --status-off:   #c0392b;
  --status-tbc:   #2980b9;
  --status-limited: #d4820a;   /* orange — disponibilité réduite */
  --ft-accent:    #f3c178;     /* miel doré — accent du footer */
  --gold:         #c4923a;     /* or antique — thème Louvre */
  --brown2:       #6b5744;     /* texte secondaire Louvre */
  --max-w:        1200px;
  --nav-h:        72px;
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--dark);
  font-family: 'Jost', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.1;
  color: var(--dark);
}
h1 { font-size: clamp(42px, 5.5vw, 72px); }
h2 { font-size: clamp(32px, 4vw, 52px); }
h3 { font-size: clamp(22px, 2.8vw, 32px); }
h4 { font-size: 22px; }
em { font-style: italic; color: var(--green-accent); }
p  { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }

.sec-tag {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-accent);
  display: block;
  margin-bottom: 16px;
}
.sec-title { margin-bottom: 24px; }
.sec-intro {
  font-size: 18px;
  font-weight: 300;
  color: var(--dark2);
  max-width: 640px;
  line-height: 1.7;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section-alt { background: var(--cream2); }
.section-alt:has(+ .coupon-band) { padding-bottom: 48px; }

/* ── NAVIGATION ─────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}
.nav-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--dark);
}
.logo span { color: var(--green-accent); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark2);
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--green-accent); }
.nav-cta {
  padding: 10px 24px;
  border: 1px solid var(--green-accent);
  color: var(--green-accent) !important;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s !important;
}
.nav-cta:hover {
  background: var(--green-accent);
  color: var(--cream) !important;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dark);
  transition: transform 0.3s;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-request {
  display: inline-block;
  background: var(--green-accent);
  color: var(--cream);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 2px;
  transition: background 0.2s;
}
.btn-request:hover { background: var(--green-light); }
.btn-outline {
  display: inline-block;
  border: 1px solid var(--green-accent);
  color: var(--green-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 36px;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover {
  background: var(--green-accent);
  color: var(--cream);
}
.btn-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--green-accent);
  text-transform: uppercase;
}
.btn-text::after { content: ' →'; }

/* ── HERO (HOMEPAGE) ─────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--dark) center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding-bottom: 96px;
  padding-top: var(--nav-h);
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,15,8,0.75) 0%, rgba(10,15,8,0.2) 60%, transparent 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  color: white;
}
.hero-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream3);
  display: block;
  margin-bottom: 20px;
}
.hero h1 {
  color: white;
  max-width: 700px;
  margin-bottom: 24px;
}
.hero h1 em { color: var(--cream3); }
.hero-sub {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  max-width: 480px;
  margin-bottom: 40px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── PAGE HERO (tour pages, about, contact) ──────────────────── */
.page-hero {
  min-height: 460px;
  background: var(--dark) center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding-bottom: 64px;
  padding-top: var(--nav-h);
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,15,8,0.72) 0%, rgba(10,15,8,0.18) 70%, transparent 100%);
}
/* Variante claire du hero : pour les photos déjà sombres, où le voile
   standard écrase l'image. Ajouter la classe "hero-light" au .page-hero
   de la page concernée. Le bas reste assez dense pour le titre blanc. */
.page-hero.hero-light::after {
  background: linear-gradient(to top, rgba(10,15,8,0.58) 0%, rgba(10,15,8,0.10) 58%, transparent 86%);
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  color: white;
}
.page-hero-inner .sec-tag { color: var(--cream3); }
.page-hero-inner h1 { color: white; margin-bottom: 12px; }
/* Le mot en italique des titres sur photo sombre : miel, comme sur
   tours.php. Le vert du site y était presque invisible (« d'Orsay »,
   « private tour »). Le thème Louvre garde son or (plus bas). */
.page-hero-inner h1 em { color: #f3c178; }
/* Italique dans les sous-titres sur photo (« guide-conférencier ») :
   la couleur du sous-titre, pas le vert, illisible sur fond sombre. */
.hero-sub em, .home-hero-sub em, .lv-hero-sub em { color: inherit; }
.page-hero-inner .hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin-bottom: 0;
}

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.breadcrumb-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 400;
  color: var(--dark3);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--dark3); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--green-accent); }
.breadcrumb span { color: var(--dark); }

/* ── META BAR ────────────────────────────────────────────────── */
/* Masquée dès que la page a une carte de prix, sur ordinateur comme sur
   téléphone (2 oct. 2026) : ses cinq informations y sont déjà, et elle
   repoussait la carte sous la ligne de flottaison. Versailles Exclusive,
   sans prix, garde la sienne. */
:root:has(.tour-layout .booking-price) .meta-bar { display: none; }
.meta-bar {
  background: var(--cream2);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.meta-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.meta-item { display: flex; flex-direction: column; gap: 4px; }
.meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark3);
}
.meta-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--dark);
}

/* ── TOUR PAGE LAYOUT ────────────────────────────────────────── */
.tour-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 72px;
  align-items: start;
}
.tour-body h2 {
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 20px;
  margin-top: 48px;
}
.tour-body h2:first-child { margin-top: 0; }
.tour-body p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--dark);
  margin-bottom: 1.3em;
}
.tour-intro {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--dark);
  border-left: 3px solid var(--green-accent);
  padding-left: 24px;
  margin-bottom: 40px;
}
.tour-photo {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 2px;
  margin: 40px 0;
  background: var(--cream3);
}

/* ── HIGHLIGHTS LIST ─────────────────────────────────────────── */
.highlights {
  list-style: none;
  margin: 24px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.highlights li {
  padding: 14px 18px;
  background: var(--cream2);
  border-left: 3px solid var(--green-accent);
  font-size: 16px;
  line-height: 1.5;
  border-radius: 0 2px 2px 0;
}
.highlights li strong { color: var(--dark); }

/* ── WHO IS THIS TOUR FOR ────────────────────────────────────── */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 40px;
}
.audience-card {
  background: var(--cream2);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 2px;
}
.audience-card em {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: var(--dark);
  display: block;
  margin-bottom: 8px;
}
.audience-card p {
  font-size: 15px;
  color: var(--dark2);
  line-height: 1.6;
  margin: 0;
}

/* ── BOOKING SIDEBAR ─────────────────────────────────────────── */
.tour-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.booking-card {
  background: var(--cream);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 32px;
}
.booking-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 4px;
}
.booking-price strong { font-weight: 400; }
.booking-note {
  font-size: 13px;
  color: var(--dark3);
  margin-bottom: 24px;
  font-weight: 300;
}
.booking-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 28px;
}
.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.day-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark2);
}
.day-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cream3);
}
.day-pill.available .day-dot { background: var(--status-ok); }
.day-pill.unavailable .day-dot { background: var(--status-off); }
.day-pill.unavailable .day-name { color: var(--dark3); }
.day-pill.pending .day-dot { background: var(--status-tbc); }
.day-pill.limited .day-dot  { background: var(--status-limited); }
.day-pill.limited .day-name { color: var(--status-limited); }
/* Légende des couleurs, sous les jours (render_day_pills) */
.day-legend {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--dark3);
}
.day-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.day-legend-item::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cream3); }
.day-legend-item.available::before   { background: var(--status-ok); }
.day-legend-item.unavailable::before { background: var(--status-off); }
.day-legend-item.limited::before     { background: var(--status-limited); }
.day-legend-item.pending::before     { background: var(--status-tbc); }
.booking-card .btn-request { width: 100%; text-align: center; margin-bottom: 28px; }
.booking-details { border-top: 1px solid var(--border); padding-top: 20px; }
.bd-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.bd-row:last-child { border-bottom: none; }
.bd-row span:first-child { color: var(--dark3); font-weight: 400; }
.bd-row span:last-child  { color: var(--dark); font-weight: 400; text-align: right; }

/* ── KIDS PILL ───────────────────────────────────────────────── */
.pill-kids {
  display: inline-block;
  background: rgba(90,158,58,0.12);
  color: var(--status-ok);
  border: 1px solid rgba(90,158,58,0.25);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}

/* ── DISCLAIMER ──────────────────────────────────────────────── */
.disclaimer {
  background: var(--cream2);
  border: 1px solid var(--border2);
  border-left: 4px solid var(--dark3);
  padding: 24px;
  border-radius: 0 2px 2px 0;
  margin: 48px 0;
}
.disclaimer-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark2);
  margin-bottom: 8px;
}
.disclaimer-text {
  font-size: 14px;
  color: var(--dark2);
  line-height: 1.7;
  margin: 0;
}

/* ── TOUR CARDS ──────────────────────────────────────────────── */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.tour-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.tour-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(20,26,16,0.1);
}
.tour-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center 50%;   /* CADRAGE vignettes RELATED (bas des pages tour). 2e nombre : 0%=haut, 100%=bas */
  background: var(--cream3);
}
.tour-card-body { padding: 24px; }
.tour-card-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-accent);
  display: block;
  margin-bottom: 8px;
}
.tour-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.2;
}
.tour-card-tagline {
  font-size: 13px;
  font-weight: 300;
  color: var(--dark3);
  margin-bottom: 12px;
  font-style: italic;
}
.tour-card-excerpt {
  font-size: 14px;
  color: var(--dark2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tour-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--dark3);
  font-weight: 300;
}

/* Special: Louvre external card */
.tour-card-external {
  background: var(--cream2);
  border: 1px solid var(--border2);
}
.tour-card-external .tour-card-tag { color: var(--dark3); }
.tour-card-external-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* ── TABS (tours.php) ────────────────────────────────────────── */
.tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 48px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark3);
  padding: 16px 24px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.2s;
  cursor: pointer;
}
.tab-btn:hover { color: var(--dark2); }
.tab-btn.active {
  color: var(--green-accent);
  border-bottom-color: var(--green-accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Curated grid */
.curated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.curated-card {
  background: var(--cream2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 20px;
  transition: border-color 0.2s;
}
.curated-card:hover { border-color: var(--border2); }
.curated-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 6px;
}
.curated-teaser {
  font-size: 13px;
  font-weight: 300;
  color: var(--dark3);
  margin-bottom: 14px;
  line-height: 1.5;
}
.curated-cta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-accent);
}

/* Full Day Builder placeholder */
.builder-placeholder {
  background: var(--cream2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 64px;
  text-align: center;
}
.builder-placeholder h3 {
  font-size: 32px;
  margin-bottom: 16px;
  color: var(--dark);
}
.builder-placeholder p {
  font-size: 17px;
  font-weight: 300;
  color: var(--dark2);
  max-width: 480px;
  margin: 0 auto 32px;
}

/* ── RELATED TOURS ───────────────────────────────────────────── */
.related-section {
  background: var(--cream2);
  padding: 80px 0;
}
.related-section .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.related-section .sec-tag { text-align: center; }
.related-section h2 { text-align: center; margin-bottom: 48px; }

/* ── HOMEPAGE SECTIONS ───────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 40px;
  margin-top: 56px;
}
.why-item {}
.why-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 300;
  color: var(--cream3);
  line-height: 1;
  margin-bottom: 12px;
}
.why-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 10px;
}
.why-text {
  font-size: 15px;
  font-weight: 300;
  color: var(--dark2);
  line-height: 1.7;
}
.testimonial-band {
  background: var(--dark);
  padding: 80px 0;
}
.testimonial-band blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.4;
}
.testimonial-band cite {
  display: block;
  margin-top: 20px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  font-style: normal;
  color: var(--dark3);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── ABOUT PAGE ──────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
}
.about-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 2px;
  background: var(--cream3);
}
.about-credentials {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.credential-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.credential-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-accent);
  margin-top: 7px;
  flex-shrink: 0;
}
.credential-text { font-size: 15px; color: var(--dark2); line-height: 1.6; }
.press-logos {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.press-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark3);
  margin-bottom: 16px;
}
.press-list {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.press-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--dark3);
}

/* ── CONTACT FORM ────────────────────────────────────────────── */
.contact-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 96px;
  align-items: start;
}
.contact-form-wrap { max-width: 520px; }
.form-step { display: none; }
.form-step.active { display: block; }
.form-step-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark3);
  margin-bottom: 8px;
}
.form-step h2 {
  font-size: 32px;
  margin-bottom: 32px;
}
.pill-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.pill-option {
  padding: 12px 24px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  background: var(--cream);
}
.pill-option:hover,
.pill-option.selected {
  border-color: var(--green-accent);
  background: var(--cream2);
  color: var(--green-accent);
}
.form-group { margin-bottom: 24px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark2);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--border2);
  border-radius: 2px;
  padding: 14px 18px;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--dark);
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--green-accent); }
.form-group textarea { min-height: 140px; resize: vertical; }
.form-nav { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.form-back {
  font-size: 13px;
  font-weight: 400;
  color: var(--dark3);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: color 0.2s;
}
.form-back:hover { color: var(--dark); }
.contact-aside h3 { margin-bottom: 16px; }
.contact-aside p { font-size: 15px; color: var(--dark2); line-height: 1.7; }
.contact-detail {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-detail-item { font-size: 15px; color: var(--dark2); }
.contact-detail-item a { color: var(--green-accent); }
.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}
.form-success h3 { font-size: 32px; margin-bottom: 16px; }
.form-success p { color: var(--dark2); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list { max-width: 760px; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 24px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Cormorant Garamond', serif;
}
.faq-question::after {
  content: '+';
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--green-accent);
  flex-shrink: 0;
  transition: transform 0.3s;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-answer-inner {
  padding: 0 0 28px;
  font-size: 16px;
  color: var(--dark2);
  line-height: 1.8;
}

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 32px;
}
.testimonial-stars {
  color: var(--green-accent);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.testimonial-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 300;
  font-style: italic;
  color: var(--dark);
  line-height: 1.5;
  margin-bottom: 20px;
}
.testimonial-author { font-size: 13px; font-weight: 300; color: var(--dark3); }
.testimonial-author strong { font-weight: 500; color: var(--dark2); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #dbe8cf 0%, #e8f0e0 50%, #eef3e7 100%);
  color: var(--dark);
}
.ft-top {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px 24px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}
.ft-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 24px;
  color: var(--dark);
  display: block;
  margin-bottom: 8px;
}
.ft-logo span { color: var(--green-accent); }
.ft-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--dark2);
  line-height: 1.6;
  max-width: 260px;
}
.ft-nav {
  display: flex;
  flex-direction: row;
  gap: 2.4rem;
  align-items: center;
  justify-content: center;
}
.ft-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark2);
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
  letter-spacing: 0.02em;
}
.ft-nav a::before {
  content: '';
  position: absolute;
  left: -1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: var(--border2);
  border-radius: 50%;
}
.ft-nav a:first-child::before {
  content: none;
}
.ft-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green-accent);
  transition: width 0.3s ease;
}
.ft-nav a:hover {
  color: var(--green-accent);
}
.ft-nav a:hover::after {
  width: 100%;
}
.ft-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ft-request {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-accent);
  border: 1px solid rgba(74, 122, 53, 0.45);
  padding: 9px 16px;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.ft-request:hover { background: var(--green-accent); color: #fff; }
.ft-link {
  font-size: 14px;
  color: var(--dark2);
  transition: color 0.2s;
}
.ft-link:hover { color: var(--green-accent); }
/* Skyline de Paris au trait, bandeau léger de bas de page */
.ft-skyline {
  display: block;
  width: 100%;
  height: auto;
  color: var(--green-accent);
}
.ft-bot {
  border-top: 1px solid rgba(40, 70, 25, 0.14);
}
.ft-bot-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--dark3);
}
.ft-bot-inner a { color: var(--dark3); transition: color 0.2s; }
.ft-bot-inner a:hover { color: var(--green-accent); }
.ft-bot-inner button {
  background: none;
  border: none;
  color: var(--dark3);
  cursor: pointer;
  font-size: 12px;
  transition: color 0.2s;
  text-decoration: none;
  font-family: inherit;
}
.ft-bot-inner button:hover { color: var(--green-accent); }
.ft-cred { color: var(--dark2); }
.ft-cred em { font-style: italic; }
.ft-dot { color: #c4923a; margin: 0 6px; }

/* Footer Louvre variant — gold theme */
.is-louvre .ft-nav a {
  color: var(--brown2);
}
.is-louvre .ft-nav a::after {
  background: var(--gold);
}
.is-louvre .ft-nav a:hover {
  color: var(--gold);
}

/* ── SIMPLE PAGE (terms, privacy) ────────────────────────────── */
.simple-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px;
}
.simple-page h1 { font-size: 48px; margin-bottom: 40px; }
.simple-page h2 { font-size: 28px; margin-top: 40px; margin-bottom: 16px; }
.simple-page p, .simple-page li {
  font-size: 16px;
  color: var(--dark2);
  line-height: 1.8;
  margin-bottom: 1em;
}
.simple-page ul { padding-left: 20px; list-style: disc; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tour-layout { grid-template-columns: 1fr; }
  .tour-sidebar { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { aspect-ratio: 4/3; max-width: 480px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { display: none; }
  .ft-top { gap: 32px; }
}
@media (max-width: 640px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--border); padding: 24px; gap: 0; }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-cta { border: none; padding: 14px 0 !important; }
  .nav-toggle { display: flex; }
  .site-header { position: relative; }
  .hero { min-height: 80vh; padding-bottom: 60px; }
  .page-hero { min-height: 340px; }
  .section { padding: 64px 0; }
  .meta-bar-inner { gap: 24px; }
  .audience-grid { grid-template-columns: 1fr; }
  .ft-top { flex-direction: column; gap: 26px; padding-top: 30px; }
  .ft-nav { flex-wrap: wrap; gap: 1rem; }
  .ft-bot-inner { flex-direction: column; gap: 10px; text-align: center; }
  .tabs-nav { padding: 0; }
  .tab-btn { padding: 14px 16px; font-size: 11px; }
  .builder-placeholder { padding: 32px 24px; }
  .booking-card { padding: 24px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}


/* ════════════════════════════════════════════════════════════════
   COUPON  ·  "Plan your visit" (accueil + Louvre)
   ----------------------------------------------------------------
   Ticket qui mord sur le footer. Base = thme accueil (miel, bouton
   vert). La page Louvre ajoute .coupon-band--louvre (voir plus bas)
   pour passer en marbre + or.
   La rgle .coupon-band ~ .site-footer suppose que le coupon est un
   FRRE du footer : sur la page Louvre, le placer aprs </main>.
═══════════════════════════════════════════════════════════════════ */
.coupon-band {
  --tk-bg:        linear-gradient(155deg, #f7d79f 0%, #f3c178 100%);
  --tk-ink:       #2a2113;
  --tk-ink-soft:  rgba(42,33,19,.78);  /* .62 → .78 le 4 oct. 2026 : 4:1 → 5,4:1 sur le miel */
  --tk-line:      rgba(42,33,19,.26);
  --tk-accent:    #674a13;             /* or-brun gravé ; #7a5a1e → #674a13 (3,9:1 → 4,9:1) */
  --btn-bg:       var(--green-accent);
  --btn-ghost:    #335a24;             /* bouton contour : vert plus sombre, 4,8:1 sur le miel */
  --btn-ink:      #fff;
  --n:    24px;   /* rayon des encoches */
  --stub: 300px;  /* largeur du talon */
  background: var(--cream2);
  padding: 28px 24px 0;
  position: relative;
  margin-top: -32px;
}
.coupon-wrap {
  max-width: 980px;
  margin: 0 auto -82px;          /* mord 82px sur le footer */
  position: relative; z-index: 2;
  filter: drop-shadow(0 26px 46px rgba(20,26,16,.22));
}
/* pousse le contenu du footer sous le coupon, page d'accueil uniquement */
.coupon-band ~ .site-footer .ft-top { padding-top: 140px; }

/* Le coupon : corps à gauche (l'invitation), talon à droite, séparés
   par la perforation. */
.ticket {
  position: relative;
  display: flex;
  min-height: 230px;
  background: var(--tk-bg);
  color: var(--tk-ink);
  border-radius: 16px;
  -webkit-mask:
    radial-gradient(circle var(--n) at 0 0,    transparent calc(var(--n) - .5px), #000 var(--n)),
    radial-gradient(circle var(--n) at 100% 0,  transparent calc(var(--n) - .5px), #000 var(--n)),
    radial-gradient(circle var(--n) at calc(100% - var(--stub)) 0,    transparent calc(var(--n) - .5px), #000 var(--n)),
    radial-gradient(circle var(--n) at calc(100% - var(--stub)) 100%, transparent calc(var(--n) - .5px), #000 var(--n));
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle var(--n) at 0 0,    transparent calc(var(--n) - .5px), #000 var(--n)),
    radial-gradient(circle var(--n) at 100% 0,  transparent calc(var(--n) - .5px), #000 var(--n)),
    radial-gradient(circle var(--n) at calc(100% - var(--stub)) 0,    transparent calc(var(--n) - .5px), #000 var(--n)),
    radial-gradient(circle var(--n) at calc(100% - var(--stub)) 100%, transparent calc(var(--n) - .5px), #000 var(--n));
          mask-composite: intersect;
}

/* corps */
.tk-body { flex: 1; padding: 38px 44px; display: flex; flex-direction: column; justify-content: center; }
.tk-tag {
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tk-accent); margin: 0 0 14px;
}
.tk-body h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; margin: 0 0 14px; color: var(--tk-ink);
}
.tk-body h2 em { font-style: italic; color: var(--tk-accent); }
.tk-body p {
  font-size: 14px; font-weight: 300; line-height: 1.66;
  color: var(--tk-ink-soft); margin: 0 0 24px; max-width: 440px;
}

/* les deux boutons, l'un à côté de l'autre */
.tk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tk-btn {
  display: inline-block; background: var(--btn-bg); color: var(--btn-ink);
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 3px; border: 1px solid var(--btn-bg);
  transition: filter .18s, transform .18s, background .18s, color .18s;
}
.tk-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* second bouton : contour, secondaire */
.tk-btn--ghost { background: transparent; color: var(--btn-ghost, var(--btn-bg)); border-color: var(--btn-ghost, var(--btn-bg)); }
.tk-btn--ghost:hover { background: var(--btn-bg); color: #fff; filter: none; }

/* perforation */
.perf {
  position: absolute; top: var(--n); bottom: var(--n); right: var(--stub);
  border-left: 2px dashed var(--tk-line); pointer-events: none;
}

/* talon */
.tk-stub {
  width: var(--stub); flex-shrink: 0;
  padding: 32px 32px 32px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stub-admit {
  font-size: 9.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tk-accent); margin: 0 0 14px;
}
.tk-stub-logo {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 26px; line-height: 1; margin: 0 0 6px;
}
.tk-stub-logo span { color: var(--tk-accent); }
.tk-stub-sub {
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tk-ink-soft); margin: 0;
}
.tk-stub-line {
  border-top: 1px solid var(--tk-line);
  padding-top: 12px; margin-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tk-ink-soft);
}
.tk-stub-serial {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 15px; letter-spacing: .03em; text-transform: none; color: var(--tk-accent);
}

@media (max-width: 760px) {
  .coupon-band { --n: 20px; padding: 30px 18px 0; }
  .coupon-wrap { margin-bottom: -66px; }
  .coupon-band ~ .site-footer .ft-top { padding-top: 104px; }
  .ticket {
    flex-direction: column;
    -webkit-mask:
      radial-gradient(circle var(--n) at 0 0,    transparent calc(var(--n) - .5px), #000 var(--n)),
      radial-gradient(circle var(--n) at 100% 0,  transparent calc(var(--n) - .5px), #000 var(--n)),
      radial-gradient(circle var(--n) at 0 calc(100% - 156px),    transparent calc(var(--n) - .5px), #000 var(--n)),
      radial-gradient(circle var(--n) at 100% calc(100% - 156px), transparent calc(var(--n) - .5px), #000 var(--n));
    -webkit-mask-composite: source-in;
            mask:
      radial-gradient(circle var(--n) at 0 0,    transparent calc(var(--n) - .5px), #000 var(--n)),
      radial-gradient(circle var(--n) at 100% 0,  transparent calc(var(--n) - .5px), #000 var(--n)),
      radial-gradient(circle var(--n) at 0 calc(100% - 156px),    transparent calc(var(--n) - .5px), #000 var(--n)),
      radial-gradient(circle var(--n) at 100% calc(100% - 156px), transparent calc(var(--n) - .5px), #000 var(--n));
            mask-composite: intersect;
  }
  .tk-body { padding: 30px 26px 26px; }
  .perf {
    top: auto; bottom: 156px; left: var(--n); right: var(--n);
    border-left: none; border-top: 2px dashed var(--tk-line);
  }
  .tk-stub {
    width: 100%; height: 156px;
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    padding: 24px 26px;
  }
  .tk-stub-bot { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-btn { transition: none; }
}


/* ════════════════════════════════════════════════════════════════
   SECTION LOUVRE  ·  thème or (centralisé)
   ----------------------------------------------------------------
   Tout ce qui était dupliqué en <style> inline dans louvre/index.php
   et les 13 pages de tour vit désormais ici. Le wrapper .theme-louvre
   bascule l'accent en or et réchauffe les fonds ; la nav et le footer
   (hors wrapper) restent verts = identité Pépin Paris.
   --accent-text : or assombri réservé au TEXTE sur fond clair, pour
   le contraste (WCAG AA). L'or vif --green-accent reste pour les
   aplats, bordures et les fonds sombres (héros, CTA).
═══════════════════════════════════════════════════════════════════ */
.theme-louvre {
  --green-accent: #c4923a;   /* or antique — aplats, bordures, fonds sombres */
  --green-light:  #d4a64f;
  --accent-text:  #c4923a;   /* or antique (identique à --green-accent) */
  --cream2:       #f3ece0;   /* fond secondaire réchauffé (marbre/beige) */
  --cream3:       #e8dfd2;
  --border:       rgba(120, 90, 40, 0.14);
  --border2:      rgba(120, 90, 40, 0.24);
}

/* ── Footer doré sur les pages du Louvre ───────────────────────────
   Le footer est hors du wrapper .theme-louvre ; footer.php pose la
   classe .is-louvre, qui rebascule l'accent en or et réchauffe le fond.
   La skyline, les liens et les survols suivent --green-accent, ils
   passent donc en or automatiquement. */
.site-footer.is-louvre {
  --green-accent: #c4923a;
  --green-light:  #d4a64f;
  background: linear-gradient(180deg, #ece1cf 0%, #f4ede1 52%, #faf7f1 100%);
}
.site-footer.is-louvre .ft-request { border-color: rgba(196, 146, 58, 0.45); }
.site-footer.is-louvre .ft-bot     { border-top-color: rgba(120, 90, 40, 0.16); }

/* ── Coupon en version Louvre : carte marbre, accent et bouton or ──
   Plac aprs </main> sur louvre/index.php pour rester frre du footer. */
.coupon-band--louvre {
  --tk-bg:       linear-gradient(155deg, #fbf5ea 0%, #efe4d2 100%);  /* marbre */
  --tk-ink:      #241c10;
  --tk-ink-soft: rgba(36, 28, 16, .78);
  --tk-line:     rgba(120, 90, 40, .30);
  --tk-accent:   #a6781f;   /* or-bronze gravé (tag, em, talon) ; gardé en or à la demande de Simon (4 oct. 2026) */
  --btn-bg:      #c4923a;   /* or plein, comme .lv-btn */
  background:    #ece2d2;   /* la bande, ton marbre, sous le coupon */
}

/* ── Contraste : or-texte sur fond clair → version assombrie ────── */
.theme-louvre .tour-body em,
.theme-louvre .related-section .sec-tag,
.theme-louvre .related-section h2 em,
.theme-louvre .related-section .tour-card-tag,
.theme-louvre .lv-fam-titles h3,
.theme-louvre .lv-combo-text h3 em,
.theme-louvre .advice em,
.theme-louvre .thread,
.theme-louvre .tab-btn.active { color: var(--accent-text); }
.theme-louvre .tab-btn.active { border-bottom-color: var(--accent-text); }

/* ── Or vif sur fond sombre (héros de page de tour) ─────────────── */
.theme-louvre .page-hero-inner h1 em { color: var(--green-accent); }

/* ── PAGES DE TOUR : photos, fil rouge, conseils, alignement ────── */

/* Version générique (pages NON-Louvre). Mêmes composants que .theme-louvre,
   palette verte. C'est ce qui donne aux mots-clés et aux photos le même
   traitement que sur les pages du Louvre. */
.photo-single { margin: 36px 0; }
.photo-single img { width: 100%; height: 320px; object-fit: cover; display: block; border-radius: 2px; }
.photo-cap { font-size: 11px; color: var(--dark3); margin-top: 8px; letter-spacing: .04em; }
.photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 36px 0; }
.photo-duo img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 2px; }
/* Variante portrait : deux photos verticales côte à côte. */
.photo-duo.portrait img { height: 360px; }
.advice p { margin-bottom: 14px; }
.advice em { font-style: italic; font-weight: 400; color: var(--green-accent); }
.thread {
  margin: 28px 0 8px; padding-top: 22px; border-top: 1px solid var(--border);
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dark2);
}
.thread span { color: var(--dark3); margin: 0 10px; font-weight: 300; font-size: 1.35em; line-height: 0; vertical-align: -.04em; }

/* Aligne le bas du corps de texte avec le bas de la sidebar (pages non-Louvre). */
.tour-layout { align-items: stretch; }
.tour-sidebar { align-self: start; }
.tour-body { display: flex; flex-direction: column; }
.tour-body > :last-child { flex: 1 1 auto; margin-bottom: 0; }

.theme-louvre .photo-single { margin: 36px 0; }
.theme-louvre .photo-single img { width: 100%; height: 380px; object-fit: cover; display: block; border-radius: 2px; }
.theme-louvre .photo-cap { font-size: 11px; color: var(--dark3); margin-top: 8px; letter-spacing: .04em; }
.theme-louvre .photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 36px 0; }
.theme-louvre .photo-duo img { width: 100%; height: 220px; object-fit: cover; display: block; }
.theme-louvre .advice p { margin-bottom: 14px; }
.theme-louvre .advice em { font-style: italic; font-weight: 400; }
.theme-louvre .thread {
  /* Même rendu que les pages de tour hors Louvre, seule la couleur
     (or antique, héritée de la règle .theme-louvre plus haut) diffère.
     Attention : hors Louvre, le corps réel du fil vient de .tour-body p
     (17px, ligne 345), plus spécifique que .thread. Les 11px déclarés
     dans .thread ne s'appliquent jamais. C'est donc 17px qu'il faut
     reprendre ici, et non la valeur déclarée. */
  margin: 28px 0 1.3em; padding-top: 22px; border-top: 1px solid var(--border);
  font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 500;
  line-height: 1.8; letter-spacing: .16em; text-transform: uppercase;
}
.theme-louvre .thread span { color: var(--dark3); margin: 0 10px; font-weight: 300; font-size: 1.35em; line-height: 0; vertical-align: -.04em; }
/* Aligne le bas du contenu avec le bas de la sidebar */
.theme-louvre .tour-layout { align-items: stretch; }
.theme-louvre .tour-sidebar { align-self: start; }
.theme-louvre .tour-body { display: flex; flex-direction: column; }
.theme-louvre .tour-body .disclaimer { flex: 1 1 auto; margin-bottom: 0; }

/* ── INDEX LOUVRE : héro ────────────────────────────────────────── */
.lv-hero {
  position: relative; min-height: 48vh;
  display: flex; align-items: flex-end;
  padding: 0 0 52px; margin-top: var(--nav-h); overflow: hidden;
}
.lv-hero-bg { position: absolute; inset: 0; }
.lv-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.lv-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(24, 16, 6, .82) 0%, rgba(24, 16, 6, .28) 58%, rgba(24, 16, 6, .08) 100%);
}
.lv-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max-w); margin: 0 auto; width: 100%; padding: 0 32px;
}
@media (max-width: 640px) { .lv-hero-inner { padding: 0 24px; } }
.lv-hero-tag {
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-light); margin-bottom: 18px; display: block;
}
.lv-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 6vw, 72px); font-weight: 300;
  color: white; line-height: 1.04; margin-bottom: 20px;
}
.lv-hero h1 em { color: var(--green-light); font-style: italic; }
.lv-hero-sub {
  font-size: 16px; color: rgba(255,255,255,.78);
  font-weight: 300; line-height: 1.7; max-width: 560px; margin-bottom: 32px;
}
.lv-hero-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.62);
}
.lv-hero-meta span strong { color: var(--green-light); font-weight: 500; }

/* ── INDEX LOUVRE : barre d'onglets ─────────────────────────────── */
.tabs-bar {
  background: var(--cream); border: none;
  position: sticky; top: calc(var(--nav-h) - 1px); z-index: 50;
  box-shadow: inset 0 -1px 0 var(--border), 0 8px 20px -16px rgba(60, 40, 15, .4);
}
.tabs-nav {
  display: flex; gap: 2px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  max-width: var(--max-w); margin: 0 auto; padding: 0 32px;
}
.tabs-nav::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .tabs-nav { padding: 0 16px; } }
.tab-btn {
  font-family: 'Jost', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark3); background: none; border: none;
  padding: 20px 32px; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; line-height: 1;
  transition: color .2s, border-color .2s;
}
.tab-btn:hover { color: var(--dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── INDEX LOUVRE : familles + grille de cards ──────────────────── */
.lv-families { background: var(--cream); padding: 0 0 96px; }
.lv-fam { max-width: var(--max-w); margin: 0 auto; padding: 40px 32px 0; }
.lv-fam-head { border-bottom: 1px solid var(--border2); padding-bottom: 20px; margin-bottom: 32px; }
.lv-fam-titles { width: 100%; }
.lv-fam-titles h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; margin-bottom: 8px;
}
.lv-fam-titles p {
  font-size: 14px; color: var(--dark2); font-weight: 300; line-height: 1.6; max-width: 640px;
}
.lv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lv-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .lv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lv-grid { grid-template-columns: 1fr; } }
@media (min-width: 541px) { .lv-grid--two .lv-card { aspect-ratio: 16 / 9; } }
.lv-card {
  position: relative; overflow: hidden; text-decoration: none;
  aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--cream3); border-radius: 3px;
  /* Halo or, comme la carte Louvre de l'accueil (4 oct. 2026) */
  box-shadow: 0 0 0 1px rgba(196,146,58,.55), 0 12px 38px rgba(196,146,58,.26);
  transition: box-shadow .35s;
}
.lv-card:hover { box-shadow: 0 0 0 1px rgba(196,146,58,.72), 0 16px 48px rgba(196,146,58,.36); }
.lv-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,16,6,.86) 0%, rgba(24,16,6,.14) 56%, transparent 100%);
  transition: opacity .35s;
}
.lv-card:hover::after { opacity: .94; }
.lv-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .55s ease;
  object-position: center 50%;   /* CADRAGE vignettes de la page LOUVRE (louvre/index.php). 2e nombre : 0%=haut, 100%=bas */
}
.lv-card:hover img { transform: scale(1.045); }
.lv-card-body { position: relative; z-index: 1; padding: 22px 22px 26px; }
.lv-card-tag {
  font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(212,166,79,.85); margin-bottom: 8px; display: block;
}
.lv-card-title {
  font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 300;
  color: white; line-height: 1.15; margin-bottom: 6px;
}
.lv-card-tagline {
  font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.55; font-weight: 300; margin-bottom: 12px;
}
.lv-card-meta {
  font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.lv-empty {
  grid-column: 1 / -1; padding: 40px; text-align: center;
  font-size: 14px; color: var(--dark3); font-style: italic;
  border: 1px dashed var(--border2); border-radius: 2px;
}

/* ── INDEX LOUVRE : encart combo / full day ─────────────────────── */
.lv-combo { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.lv-combo-inner {
  margin-top: 72px;
  background: var(--cream); border: 1px solid var(--border2); border-radius: 3px;
  padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.lv-combo-text { max-width: 560px; }
.lv-combo-text h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 26px; color: var(--dark); line-height: 1.15; margin-bottom: 10px;
}
.lv-combo-text h3 em { font-style: italic; }
.lv-combo-text p { font-size: 14px; color: var(--dark2); line-height: 1.75; }

/* ── INDEX LOUVRE : bande CTA ───────────────────────────────────── */
.lv-cta { position: relative; padding: 110px 24px; text-align: center; overflow: hidden; }
.lv-cta-bg { position: absolute; inset: 0; }
.lv-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.lv-cta::after { content: ''; position: absolute; inset: 0; background: rgba(24,16,6,.82); }
.lv-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.lv-cta h2 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 5vw, 54px);
  font-weight: 300; color: white; line-height: 1.08; margin-bottom: 20px;
}
.lv-cta h2 em { color: var(--green-light); font-style: italic; }
.lv-cta p {
  font-size: 15px; color: rgba(255,255,255,.6); font-weight: 300; line-height: 1.8; margin-bottom: 40px;
}
.lv-btn {
  display: inline-block; background: var(--green-accent); color: white;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 16px 36px; border-radius: 2px; text-decoration: none; transition: background .2s;
}
.lv-btn:hover { background: var(--green-light); }


/* ── Versailles, blocs 'visit builder' (.vb-*) ─────────────────
   Partagé par tours/versailles.php et tours/versailles-full-day.php.
   Déplacé ici depuis les <style> inline des deux pages. */
.vb-wrap {
  background: var(--cream2);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 28px;
  margin: 40px 0 24px;
}
.vb-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; color: var(--dark); margin-bottom: 6px; }
.vb-sub { font-size: 13px; color: var(--dark3); margin-bottom: 24px; font-weight: 300; line-height: 1.6; }
.vb-options { display: flex; flex-direction: column; gap: 10px; }
.vb-option {
  display: flex; align-items: flex-start; gap: 18px; padding: 18px 20px;
  background: white; border: 1px solid var(--border); border-radius: 2px;
}
.vb-option.selected { border-color: var(--green-accent); background: white; }
.vb-num {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 22px; color: var(--green-accent); flex-shrink: 0;
  min-width: 18px; line-height: 1.1; margin-top: 1px;
}
.vb-opt-name {
  font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300;
  color: var(--dark); margin-bottom: 5px; line-height: 1.2;
}
.vb-opt-desc { font-size: 13px; color: var(--dark2); line-height: 1.6; }
.vb-result {
  display: flex; align-items: center; justify-content: flex-end;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.vb-extend {
  background: #fdf6e3; border: 1px solid rgba(180,140,40,.22);
  border-radius: 3px; padding: 28px; margin: 0 0 40px;
}
.vb-extend .vb-option { background: #fffdf5; border-color: rgba(180,140,40,.18); }
.vb-extend .vb-option.special { border-left: 3px solid rgba(180,140,40,.45); padding-left: 17px; }
.vb-opt-supplement {
  font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #a07820; margin-top: 6px;
}
.vb-extend-more { font-size: 12px; color: #a07820; margin-top: 5px; font-weight: 300; }
.vb-extend-more a { color: #a07820; text-decoration: underline; text-underline-offset: 3px; }
.vb-extend .vb-result { border-top-color: rgba(180,140,40,.22); }

/* ── Journal ─────────────────────────────────────────────────────
   Hub (journal.php) + pages d'articles (/journal/). Les articles
   réutilisent .page-hero et la prose de .tour-body. */
.journal-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 760px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card {
  display: block; background: white; border: 1px solid var(--border);
  border-radius: 3px; overflow: hidden; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.journal-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.journal-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--cream3); }
.journal-card-body { padding: 24px 26px 28px; }
.journal-card-meta {
  font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-accent); margin-bottom: 10px;
}
.journal-card-meta span { color: var(--dark3); }
.journal-card-title {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300;
  color: var(--dark); line-height: 1.2; margin-bottom: 10px;
}
.journal-card-excerpt { font-size: 13.5px; color: var(--dark2); line-height: 1.65; font-weight: 300; }
.journal-meta-line {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark3); margin-bottom: 28px;
}
.journal-meta-line b { color: var(--green-accent); font-weight: 500; }
.journal-body { max-width: 680px; margin: 0 auto; padding: 56px 24px 24px; }
.journal-body h2 {
  font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300;
  color: var(--dark); margin: 40px 0 14px; line-height: 1.2;
}
.journal-body p { font-size: 15px; color: var(--dark2); line-height: 1.8; font-weight: 300; margin-bottom: 18px; }
.journal-body p em { color: var(--dark); }
.journal-body a { color: var(--green-accent); text-decoration: none; border-bottom: 1px solid var(--border2); }
.journal-cta {
  background: var(--cream2); border: 1px solid var(--border2); border-radius: 3px;
  padding: 26px 28px; margin: 44px 0 8px;
}
.journal-cta-tag {
  font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-accent); margin-bottom: 8px;
}
.journal-cta-title {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300;
  color: var(--dark); margin-bottom: 14px; line-height: 1.25;
}
.journal-cta .btn-request { display: inline-block; }
.journal-back { text-align: center; padding: 24px 0 64px; }
.journal-back a {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark3); text-decoration: none;
}
.journal-back a:hover { color: var(--green-accent); }

/* Articles repris de Substack : intertitres secondaires, listes,
   citations, photos légendées. La ligne de date passe à la ligne
   proprement quand elle porte « First published in… ». */
.journal-meta-line em { text-transform: none; letter-spacing: .02em; font-style: italic; }
.journal-body h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400;
  color: var(--dark); margin: 32px 0 10px; line-height: 1.25;
}
.journal-body ul, .journal-body ol { margin: 0 0 18px; padding-left: 22px; }
.journal-body li { font-size: 15px; color: var(--dark2); line-height: 1.8; font-weight: 300; margin-bottom: 8px; }
.journal-body li p { margin-bottom: 6px; }
.journal-body li ul { margin: 8px 0 0; }
.journal-body strong { font-weight: 500; color: var(--dark); }
.journal-body blockquote {
  margin: 28px 0; padding: 18px 22px;
  background: var(--cream2); border-left: 2px solid var(--green-accent); border-radius: 0 3px 3px 0;
}
.journal-body blockquote p:last-child { margin-bottom: 0; }
.journal-body blockquote h2 { margin-top: 4px; font-size: 24px; }
.journal-fig { margin: 32px 0; }
.journal-fig img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh;
  margin: 0 auto; border-radius: 2px; background: var(--cream3);
}
.journal-fig figcaption {
  font-size: 12.5px; color: var(--dark3); line-height: 1.6; font-weight: 300;
  text-align: center; margin-top: 10px;
}
.journal-body .journal-video a {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}

/* Journal : catégories sous le hero. .tabs-bar apporte la barre collante
   et son décalage sous l'en-tête et le bandeau (mêmes règles que les
   onglets du Louvre) ; les boutons reprennent les pastilles du contact. */
.journal-cats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 980px; margin: 0 auto; padding: 14px 24px;
}
.journal-cat {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--dark2); background: white; text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--border2); border-radius: 2px; padding: 9px 14px;
  transition: border-color .18s, background .18s, color .18s;
}
.journal-cat:hover { border-color: var(--green-accent); color: var(--dark); }
.journal-cat.active { border-color: var(--green-accent); background: var(--green-accent); color: #fff; }
.journal-cat-n { font-size: 10px; font-weight: 400; letter-spacing: .04em; color: var(--dark3); }
.journal-cat.active .journal-cat-n { color: rgba(255, 255, 255, .8); }
.journal-list { padding: 48px 24px 72px; }
.journal-grid { scroll-margin-top: calc(var(--nav-h) + 90px); }
/* !important : la version téléphone des cartes (:root .journal-card,
   plus bas) redéclare display et l'emporterait sur le masquage. */
.journal-card[hidden] { display: none !important; }
/* Téléphone : barre non collante, boutons sur deux lignes au besoin,
   tous visibles d'un coup plutôt qu'un rail à faire défiler. */
@media (max-width: 640px) {
  .journal-cats-bar { position: static; }
  .journal-cats { justify-content: flex-start; gap: 6px; padding: 12px 16px; }
  .journal-cat { font-size: 11px; letter-spacing: .06em; padding: 8px 11px; }
  .journal-list { padding: 24px 16px 56px; }
}


/* ==================================================================
   Cookie consent — Pépin Paris
   À coller à la fin de style.css. Utilise les tokens existants
   (--green-accent, --cream, --dark, --border) et la typographie
   Cormorant Garamond + Jost déjà chargée.
   ================================================================== */

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--cream, #f2f5ee);
  border-top: 1px solid var(--border2, rgba(40,70,25,.22));
  box-shadow: 0 -8px 32px rgba(20, 26, 16, .10);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.cookie-banner-text { flex: 1 1 auto; }

.cookie-banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 21px;
  color: var(--dark, #141a10);
  margin: 0 0 4px;
}

.cookie-banner-text p:not(.cookie-banner-title) {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark2, #3a5430);
  margin: 0;
  max-width: 70ch;
}
.cookie-banner-text a { color: var(--green-accent, #4a7a35); text-decoration: underline; }

.cookie-banner-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Boutons partagés bannière + modal */
.cookie-btn {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 11px 20px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.cookie-btn-solid {
  background: var(--green-accent, #4a7a35);
  color: #fff;
}
.cookie-btn-solid:hover { background: #3d6a2b; }
.cookie-btn-ghost {
  background: transparent;
  color: var(--dark2, #3a5430);
  border-color: var(--border2, rgba(40,70,25,.22));
}
.cookie-btn-ghost:hover { border-color: var(--green-accent, #4a7a35); color: var(--green-accent, #4a7a35); }

/* Modal de gestion */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cookie-modal[hidden] { display: none; }

.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 16, .45);
}

.cookie-modal-card {
  position: relative;
  background: var(--cream, #f2f5ee);
  border: 1px solid var(--border2, rgba(40,70,25,.22));
  border-radius: 4px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 36px 28px;
  box-shadow: 0 24px 64px rgba(20, 26, 16, .25);
}

.cookie-modal-eyebrow {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-accent, #4a7a35);
  margin: 0 0 6px;
}
.cookie-modal-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.1;
  color: var(--dark, #141a10);
  margin: 0 0 14px;
}
.cookie-modal-card h2 em { color: var(--green-accent, #4a7a35); font-style: italic; }

.cookie-modal-lead {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark2, #3a5430);
  margin: 0 0 24px;
}

.cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--border, rgba(40,70,25,.13));
}
.cookie-row-text { flex: 1 1 auto; }
.cookie-row-title {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--dark, #141a10);
  margin: 0 0 4px;
}
.cookie-row-desc {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dark2, #3a5430);
  margin: 0;
}
.cookie-row-fixed {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--green-accent, #4a7a35);
  white-space: nowrap;
  padding-top: 2px;
}

/* Interrupteur */
.cookie-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--cream4, #c4d8b8);
  border: 1px solid var(--border2, rgba(40,70,25,.22));
  border-radius: 26px;
  transition: background .2s ease;
}
.cookie-slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cookie-switch input:checked + .cookie-slider { background: var(--green-accent, #4a7a35); }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(20px); }

.cookie-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
}

/* Lien discret de réouverture en pied de page */
.cookie-settings-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 720px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .cookie-banner-actions { flex-wrap: wrap; }
  .cookie-banner-actions .cookie-btn { flex: 1 1 auto; }
  .cookie-modal-card { padding: 26px 22px 22px; }
  .cookie-modal-card h2 { font-size: 28px; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE  ·  refonte septembre 2026
   ----------------------------------------------------------------
   Deux tiers des visites se font sur téléphone. Tout ce qui suit ne
   s'applique qu'aux petits écrans : le rendu desktop ne change pas.
   Les comportements (menu, en-tête qui se masque, barre de
   réservation, textes repliés) sont dans mobile.js.
   Préfixe « :root » : passe devant les <style> propres à chaque page,
   chargés après cette feuille.
═══════════════════════════════════════════════════════════════════ */

/* Éléments créés pour le mobile : masqués par défaut (desktop). */
.nav-quick, .m-book, .bd-toggle, .cookie-more, .mobile-cta, .booking-rating,
.acc-teaser { display: none; }

/* Accordéons (pages de tour, About) : le bouton reprend exactement le
   style du titre qui le contient. L'icône +/× et le repli ne sont
   actifs que dans les media queries mobiles plus bas. */
.acc-btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
}
@media (max-width: 900px) {
  .acc-btn::after {
    content: '+'; flex-shrink: 0; line-height: 1;
    font-family: 'Jost', sans-serif; font-size: 28px; font-weight: 300; font-style: normal;
    color: var(--green-accent); transition: transform .25s;
  }
  .acc-btn[aria-expanded="true"]::after { transform: rotate(45deg); }
  .acc-panel:not(.open) { display: none; }
}

/* ── Pages de tour sur une colonne (tablette + téléphone) ──────── */
@media (max-width: 900px) {
  /* Réservation en tête : prix, jours et bouton avant la description. */
  :root .tour-sidebar { order: -1; }
  :root .tour-layout { padding-top: 32px; gap: 40px; }

  /* Détails de réservation repliables */
  .bd-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    min-height: 44px; margin-top: -12px; padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    color: var(--dark2);
  }
  .bd-toggle::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--green-accent); transition: transform .25s; }
  .bd-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
  :root .booking-card.has-bd-toggle .booking-details { display: none; border-top: none; padding-top: 0; }
  :root .booking-card.has-bd-toggle.details-open .booking-details { display: block; }

  /* Barre Duration / From / Group : masquée à toutes les tailles, voir
     META BAR plus haut. */

  /* Étoiles Google sous le prix */
  .booking-rating {
    display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 12px;
    font-size: 13px; color: var(--dark2); text-decoration: none;
  }
  .booking-rating-stars { color: var(--green-accent); letter-spacing: 2px; font-size: 13px; }
  .m-book-rating span { color: var(--green-accent); letter-spacing: 1px; }
  :root .booking-card .btn-request { margin-bottom: 20px; }

  /* Sections repliables (« What you will see », « Pépin's advice »…) :
     le titre devient un bouton, le contenu s'ouvre et se referme.
     Construit par mobile.js. */
  :root .tour-body > * { flex-shrink: 0; }
  /* Une colonne de grille s'élargit à la taille de son contenu le plus
     large (photo panoramique) : on l'en empêche. */
  :root .tour-body, :root .tour-sidebar { min-width: 0; }
  :root .tour-body h2.acc-head { margin: 0 0 -1px; border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); font-size: clamp(24px, 3vw, 36px); }
  :root .tour-body h2.acc-head:first-of-type { margin-top: 12px; }
  :root .tour-body .acc-btn { padding: 18px 0; min-height: 60px; }
  :root .tour-body .acc-panel.open { padding: 22px 0 12px; }
  :root .tour-body .acc-panel > :first-child { margin-top: 0; }
  :root .tour-body .acc-panel .in-advice { margin: 28px 0 8px; }

  /* Barre de réservation fixée en bas */
  .m-book {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--cream); border-top: 1px solid var(--border2);
    box-shadow: 0 -6px 22px rgba(20, 26, 16, .10);
    transform: translateY(110%); transition: transform .28s ease;
  }
  .m-book.show { transform: translateY(0); }
  .m-book-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .m-book-price { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; color: var(--dark); white-space: nowrap; }
  .m-book-price strong { font-weight: 500; }
  .m-book-note { font-size: 12px; color: var(--dark3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-book-btn {
    flex-shrink: 0; min-height: 46px; display: inline-flex; align-items: center;
    padding: 0 20px; border-radius: 2px;
    background: var(--green-accent); color: #fff;
    font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  }

  /* Tours similaires : carrousel horizontal au doigt */
  :root .related-section { padding: 56px 0; }
  :root .related-section h2 { margin-bottom: 28px; }
  :root .related-section .tours-grid {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -24px; padding: 4px 24px 12px; scroll-padding: 0 24px;
    scrollbar-width: none;
  }
  :root .related-section .tours-grid::-webkit-scrollbar { display: none; }
  :root .related-section .tour-card { flex: 0 0 78%; max-width: 340px; scroll-snap-align: start; }
  :root .related-section .tour-card:hover { transform: none; }
}

/* ── Téléphone ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  /* Filet de sécurité contre la bande blanche à droite : si un élément
     dépasse en largeur, la page ne peut plus glisser sur le côté.
     Safari iPhone ignore souvent overflow-x sur html seul : on coupe
     aussi au niveau de body avec « clip », qui (contrairement à hidden)
     ne casse ni l'en-tête collant ni les éléments « sticky ». */
  html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-x: clip; }
  main, section, .tour-layout, .container { max-width: 100%; }

  /* En-tête collé en haut, qui s'efface quand on descend */
  :root .site-header {
    position: sticky; top: 0;
    transition: transform .28s ease;
  }
  html.hdr-hide .site-header { transform: translateY(-100%); }
  .nav-wrap { padding: 0 16px; }

  /* Bouton menu : 44 × 44, se transforme en croix */
  :root .nav-toggle {
    width: 44px; height: 44px; margin-right: -10px;
    align-items: center; justify-content: center; gap: 5px;
  }
  .nav-toggle span { transition: transform .25s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Menu plein écran */
  :root .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 24px calc(32px + env(safe-area-inset-bottom));
    border-bottom: none; z-index: 110;
    align-items: stretch; text-align: left;
  }
  :root .nav-links.open { display: flex; }
  :root .nav-links li a {
    font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300;
    letter-spacing: 0; text-transform: none; color: var(--dark);
    padding: 14px 0;
  }
  :root .nav-links .nav-louvre { color: #a8791f; }
  :root .nav-links li a.active { color: var(--green-accent); }
  :root .nav-links .nav-cta {
    margin-top: 24px; padding: 16px !important; text-align: center;
    font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    background: var(--green-accent); color: #fff !important; border: none; border-radius: 2px;
  }
  :root .nav-links .nav-quick { display: flex; gap: 10px; margin-top: 12px; }
  :root .nav-links .nav-quick a.nav-quick-link {
    flex: 1; text-align: center; padding: 13px 8px;
    font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase; color: var(--green-accent);
    border: 1px solid var(--border2); border-radius: 2px;
  }
  /* Sur html seulement : sur body, overflow ferait décrocher l'en-tête collant. */
  html.menu-open { overflow: hidden; }
  html.menu-open .site-header { position: fixed; left: 0; right: 0; top: 0; transform: none; }

  /* Éléments collants : suivent l'en-tête quand il s'efface */
  :root .tabs-bar { transition: top .28s ease; }
  html.hdr-hide .tabs-bar { top: 0; }

  /* Onglets du Louvre : les trois tiennent à l'écran, sur deux lignes
     si besoin, au lieu d'un rail où le troisième restait caché. */
  :root .tabs-nav { padding: 0 8px; gap: 0; overflow-x: visible; }
  :root .tab-btn {
    flex: 1 1 0; min-width: 0; white-space: normal; text-align: center;
    padding: 14px 6px 12px; font-size: 12px; letter-spacing: .08em; line-height: 1.3;
  }
  :root .lv-hero { min-height: 42svh; padding: 48px 0 36px; }

  /* Louvre : tours sur deux colonnes, comme la page Tours */
  :root .lv-grid, :root .lv-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root .lv-card { min-width: 0; }
  :root .lv-card, :root .lv-grid--two .lv-card { aspect-ratio: 3 / 4.4; }
  /* Nombre impair : la dernière carte prend toute la largeur */
  :root .lv-grid > .lv-card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  :root .lv-card-body { padding: 12px 12px 13px; }
  :root .lv-card-tag { letter-spacing: .06em; margin-bottom: 4px; }
  :root .lv-card-title { font-size: 18px; margin-bottom: 4px; }
  :root .lv-card-tagline {
    font-size: 12px; line-height: 1.35; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  :root .lv-card-meta { letter-spacing: 0; line-height: 1.35; }
  :root .lv-card-badges .badge { padding: 3px 6px; }

  /* About : héros à la hauteur des pages Tours et Louvre, sans les
     étiquettes blanches ni le mot « About » */
  :root .about-hero { min-height: 340px; }
  :root .about-hero-content { padding: 40px 24px; }
  :root .about-hero-tag, :root .about-badges { display: none; }
  :root .about-hero h1 { margin-bottom: 14px; }
  :root .about-hero-sub { margin-bottom: 0; }

  /* About : sections en cartes repliables (construites par mobile.js).
     Fermées : vignette + étiquette + titre + accroche.
     Ouvertes : la vignette et l'accroche s'effacent devant le texte. */
  :root .about-sections { border-left: none; }
  :root .about-section { padding: 0 !important; border-bottom: 1px solid var(--border); }
  :root .about-section:last-child { border-bottom: 1px solid var(--border); }
  .about-acc-row { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; cursor: pointer; }
  .about-acc-text { flex: 1; min-width: 0; }
  .acc-thumb {
    flex: 0 0 68px; width: 68px; height: 68px; border-radius: 3px; overflow: hidden;
    background: var(--cream3); display: flex; align-items: center; justify-content: center;
    color: var(--green-accent);
  }
  .acc-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .acc-thumb svg { width: 30px; height: 30px; }
  :root .about-section .section-tag { margin: 0 0 4px; }
  :root .about-section .acc-head { margin: 0; }
  :root .about-section .section-h2,
  :root .about-section .founder-title { font-size: 22px; line-height: 1.2; }   /* taille du titre « Simon » */
  :root .about-section .acc-btn { padding: 0; align-items: flex-start; }
  :root .about-section .acc-btn::after { margin-top: -2px; }
  :root .acc-teaser { display: block; font-size: 13.5px; line-height: 1.5; color: var(--dark3); margin: 6px 0 0; }
  :root .about-section.is-open .acc-thumb, :root .about-section.is-open .acc-teaser { display: none; }
  :root .about-section .acc-panel.open { padding-bottom: 36px; }
  :root .about-section .acc-panel > :first-child { margin-top: 0; }
  :root .lv-fam { padding: 32px 24px 0; }
  :root .lv-families { padding-bottom: 64px; }

  /* L'en-tête occupe sa place dans la page : plus de marge de compensation */
  :root .lv-hero { margin-top: 0; }
  :root .page-hero, :root .hero { padding-top: 32px; }
  :root [style*="padding-top:var(--nav-h)"] { padding-top: 0 !important; }

  /* Rythme vertical plus serré */
  :root .section { padding: 56px 0; }
  :root .sec-head, :root .tsec-head { margin-bottom: 32px; }
  :root .page-hero { min-height: 340px !important; padding-bottom: 40px; }

  /* Liens du pied de page : zones de toucher confortables */
  :root .ft-nav { gap: 4px 22px; }
  :root .ft-nav a { display: inline-block; padding: 10px 0; }
  :root .ft-nav a::before { content: none; }
  :root .ft-bot-inner a, :root .ft-bot-inner button { display: inline-block; padding: 10px 2px; }
  :root .ft-request { padding: 13px 20px; }

  /* Photos des pages de tour */
  :root .photo-duo img, :root .theme-louvre .photo-duo img { height: 240px !important; }
  :root .photo-duo.portrait img { height: 280px !important; }
  :root .photo-single img, :root .theme-louvre .photo-single img { height: 240px !important; }
  /* Photo panoramique (ex. série des Cathédrales, Orsay) : on la garde
     haute et lisible, et on la fait défiler au doigt. */
  :root .photo-single:has(img[style*="object-fit:contain"]) {
    overflow-x: auto; margin-left: -24px; margin-right: -24px; padding: 0 24px;
    scrollbar-width: none;
  }
  :root .photo-single img[style*="object-fit:contain"] {
    height: 220px !important; width: auto !important; max-width: none; aspect-ratio: auto !important;
  }

  /* Barre d'infos du tour : grille compacte de 3 colonnes */
  :root .meta-bar { padding: 18px 0; }
  :root .meta-bar-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
  :root .meta-value { font-size: 18px; line-height: 1.2; }
  :root .meta-label { letter-spacing: .04em; white-space: nowrap; }

  /* Jours de disponibilité : pastilles plus lisibles */
  :root .booking-days { gap: 3px; }
  :root .day-pill { padding: 8px 0 7px; }

  /* Journal : cartes compactes, image à gauche */
  :root .journal-grid { gap: 12px; }
  :root .journal-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  :root .journal-card-img { aspect-ratio: auto; height: 100%; min-height: 112px; }
  :root .journal-card-body { padding: 12px 14px; }
  :root .journal-card-meta { margin-bottom: 4px; letter-spacing: .04em; }
  :root .journal-card-title { font-size: 19px; margin-bottom: 0; }
  :root .journal-card-excerpt { display: none; }
  :root section[style*="padding: 72px 24px"] { padding: 32px 16px 48px !important; }

  /* Taille minimale des petites étiquettes : 12 px */
  :root .sec-tag, :root .hero-tag, :root .meta-label, :root .day-name, :root .pill-kids,
  :root .tour-card-tag, :root .tour-card-external-label, :root .curated-cta, :root .press-label,
  :root .form-step-label, :root .tk-tag, :root .tk-btn, :root .stub-admit, :root .tk-stub-sub,
  :root .tk-stub-line, :root .photo-cap, :root .lv-hero-tag, :root .lv-card-tag, :root .lv-card-meta,
  :root .lv-btn, :root .vb-opt-supplement, :root .journal-card-meta, :root .journal-meta-line,
  :root .journal-cta-tag, :root .journal-back a, :root .notfound-tag,
  :root .home-hero-tag, :root .btn-hero, :root .btn-hero-outline, :root .hero-bar-item,
  :root .tour-home-card-tag, :root .tour-home-card-go, :root .editorial-strip-caption cite,
  :root .about-reviews-tag, :root .pricing-label, :root .pricing-included-label, :root .pricing-ethos-tag,
  :root .byd-ideas-lbl, :root .byd-idea-tag, :root .byd-idea-sites, :root .byd-group-name, :root .byd-mode-lbl,
  :root .byd-reset, :root .byd-mode-help, :root .byd-dots-legend, :root .byd-side-stretch-lbl, :root .byd-note,
  :root .byd-days, :root .byd-days-sub, :root .byd-side-hint, :root .byd-inc-lbl, :root .byd-inc-list li,
  :root .byd-bar-mode, :root .ty-tag, :root .ml-tag, :root .ml-meta, :root .louvre-link, :root .tcard-tag,
  :root .tcard-tagline, :root .tcard-meta, :root .index-h,
  :root .form-block-label, :root .contact-layout label, :root .label-opt, :root .pill-exp .pill-sub,
  :root .stepper-label span, :root .form-note, :root .photo-strip-caption,
  :root .faq-sidebar .sidebar-label, :root .about-hero-tag, :root .about-badge, :root .sidebar-label,
  :root .sidebar-sub, :root .section-tag, :root .cred-inline-label, :root .founder-press-label,
  :root .stat-label, :root .cred-main-badge, :root .cred-side-label, :root .dual-cta-label, :root .dual-cta-btn,
  :root .block-disclaimer, :root .door-cta, :root .door-facts, :root .door-season, :root .excl-details > summary,
  :root .excl-switch, :root .fit-cta, :root .fit-tag, :root .nd-alert-label, :root .outfit-label,
  :root .outfit-text a, :root .side-back, :root .side-switch,
  :root .reviews-page .award-badge, :root .reviews-page .gi-eyebrow, :root .reviews-page .gr-eyebrow,
  :root .reviews-page .gr-link, :root .reviews-page .note-eyebrow, :root .reviews-page .review-source,
  :root .reviews-page .track-lbl {
    font-size: 12px;
  }
  /* Étiquettes très espacées : on resserre pour éviter le retour à la ligne */
  :root .home-hero-tag, :root .lv-hero-tag, :root .hero-bar-item { letter-spacing: .1em; text-wrap: balance; }
  /* Boutons du héros : pleine largeur, faciles à atteindre du pouce */
  :root .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  :root .hero-actions a { text-align: center; }

  /* Badges posés sur les photos : 11 px, pour ne pas masquer l'image */
  :root .badge, :root .home-soon-badge, :root .lv-card-badges .badge,
  :root .reviews-page .gr-badge, :root .reviews-page .guide-pill { font-size: 11px; }
  :root .day-name { letter-spacing: 0; }

  /* Sur écran tactile, pas de survol : on affiche ce qui ne se
     révélait qu'au passage de la souris. */
  :root .tour-home-card-go { opacity: 1; transform: none; }

  /* Bouton « Request a tour » flottant, ajouté par mobile.js sur toutes
     les pages qui n'ont pas déjà leur barre (fiches tours, contact,
     Build your day). Apparaît sous le héros, disparaît au footer. */
  .mobile-cta {
    display: block; position: fixed; z-index: 50;
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 16px; border-radius: 3px; text-align: center;
    background: var(--green-accent); color: #fff;
    font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
    box-shadow: 0 8px 28px rgba(14, 20, 10, .35);
    opacity: 0; transform: translateY(130%); pointer-events: none;
    transition: opacity .3s, transform .3s;
  }
  .mobile-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* Coupon « Plan your visit » retiré sur mobile (gardé sur ordinateur) :
     le bouton flottant fait ce travail. Le footer perd la marge haute
     qui laissait la place au ticket. */
  :root .coupon-band { display: none; }
  :root .coupon-band ~ .site-footer .ft-top { padding-top: 30px; }
  :root .section-alt:has(+ .coupon-band) { padding-bottom: 56px; }

  /* Bannière cookies compacte : texte replié sur 2 lignes, boutons sur une ligne */
  :root .cookie-banner-inner { gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  /* Titre masqué sur mobile : le texte parle déjà des cookies, et la
     bannière reste annoncée « Cookie consent » aux lecteurs d'écran. */
  :root .cookie-banner-title { display: none; }
  :root .cookie-banner-text p:not(.cookie-banner-title):not(.is-open) {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px;
  }
  .cookie-more {
    display: inline-block; padding: 4px 0 0; font-size: 12.5px; font-weight: 500;
    color: var(--green-accent); text-decoration: underline; text-underline-offset: 2px;
  }
  :root .cookie-banner-actions { flex-wrap: nowrap; gap: 8px; }
  :root .cookie-banner-actions .cookie-btn { flex: 1 1 0; padding: 10px 6px; min-height: 42px; }
}

/* ══════════════════════════════════════════════════════════════
   SITE-UI · éléments communs posés par site-ui.js
   Infobulles du glossaire, notification éphémère (toast), bouton de
   retour en haut, heure de Paris sur l'accueil.
   --ui-lift : hauteur des barres fixées en bas (réservation mobile,
   bouton « Request a tour », cookies), mise à jour par le script.
══════════════════════════════════════════════════════════════ */

/* Mot du glossaire dans le texte : souligné en pointillé, rien d'autre */
.gloss {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  display: inline; cursor: help; text-align: inherit;
  text-decoration: underline dotted; text-decoration-thickness: 1px;
  text-underline-offset: .22em; text-decoration-color: currentColor;
  -webkit-tap-highlight-color: transparent;
}
.gloss:hover, .gloss[aria-expanded="true"] { text-decoration-style: solid; }
.gloss:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; border-radius: 1px; }

.ui-tip {
  position: fixed; z-index: 130; left: 0; top: 0;
  width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 12px 14px 11px; border-radius: 3px;
  background: var(--dark); color: var(--cream);
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.55;
  box-shadow: 0 14px 34px -12px rgba(14, 20, 10, .45);
  opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s;
}
.ui-tip.is-below { transform: translateY(-4px); }
.ui-tip.show { opacity: 1; transform: none; }
.ui-tip::after {
  content: ''; position: absolute; left: var(--arrow-x, 50%); top: 100%;
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--dark);
}
.ui-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dark); }
.ui-tip-term { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.2; margin-bottom: 3px; color: #fff; }
.ui-tip-def  { display: block; }
.ui-tip-link {
  display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream3); text-decoration: none;
}
.ui-tip-link:hover { color: #fff; }

/* Notification éphémère */
.ui-toast {
  position: fixed; z-index: 140; left: 50%;
  bottom: calc(20px + var(--ui-lift, 0px) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 12px 10px 12px 16px; border-radius: 3px;
  background: var(--dark); color: var(--cream);
  font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4;
  box-shadow: 0 16px 40px -14px rgba(14, 20, 10, .5);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.ui-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ui-toast-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-accent); }
.ui-toast.is-error .ui-toast-ic { background: #b0402d; }
.ui-toast.is-info .ui-toast-ic { background: transparent; }
.ui-toast-ic svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ui-toast.is-info .ui-toast-ic svg { width: 20px; height: 20px; stroke: var(--cream3); }
.ui-spin { animation: ui-spin .9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-toast-x {
  flex: none; width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  color: var(--cream3); font-size: 20px; line-height: 1; border-radius: 2px;
}
.ui-toast-x:hover { color: #fff; }

/* Retour en haut */
.ui-top {
  position: fixed; z-index: 55; right: 20px;
  bottom: calc(20px + var(--ui-lift, 0px) + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--cream); color: var(--green-accent);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 22px -8px rgba(14, 20, 10, .35);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s, bottom .25s, background .2s, color .2s;
}
.ui-top.show { opacity: 1; transform: none; pointer-events: auto; }
.ui-top:hover { background: var(--green-accent); color: #fff; border-color: var(--green-accent); }
.ui-top:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 3px; }
.ui-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .ui-top { right: 16px; width: 42px; height: 42px; } }

/* Heure de Paris (accueil) : dernier élément de la barre sous le héros,
   même typographie que les mentions voisines. */
.paris-clock { gap: 8px; }
.paris-clock::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: #9fcf85; box-shadow: 0 0 0 0 rgba(159, 207, 133, .6);
}
.paris-clock.is-live::before { animation: paris-pulse 2.6s ease-out infinite; }
@keyframes paris-pulse { 0% { box-shadow: 0 0 0 0 rgba(159, 207, 133, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(159, 207, 133, 0); } }
.paris-clock time { color: #fff; font-variant-numeric: tabular-nums; }
.paris-clock [data-paris-diff] { color: rgba(255, 255, 255, .55); }
.paris-clock [data-paris-diff]:empty { display: none; }
.paris-clock [data-paris-diff]::before { content: '·'; margin-right: 8px; opacity: .6; }
/* Avec l'heure, la barre compte six mentions. Pour qu'elle tienne sur
   une ligne (mesuré le 30 septembre 2026) :
   - le décalage (« 6 hours ahead of you ») n'apparaît qu'au-delà de 1480 px ;
   - l'espacement resserré d'index.php (641–1100 px) est prolongé à 1260 px ;
   - sous 1020 px (tablettes), l'heure est retirée : la barre y passait
     déjà sur deux lignes avec cinq mentions. Sous 640 px, toute la barre
     est masquée par index.php. */
@media (max-width: 1480px) { .paris-clock [data-paris-diff] { display: none; } }
@media (min-width: 1101px) and (max-width: 1260px) {
  .home-hero .hero-bar { padding: 16px 30px; gap: 8px 13px; }
  .home-hero .hero-bar .hero-bar-item { letter-spacing: .09em; }
  .home-hero .hero-bar .hero-bar-item:not(:last-child)::after { margin-left: 13px; }
}
@media (max-width: 1020px) {
  .home-hero .hero-bar .paris-clock { display: none; }
  .home-hero .hero-bar .hero-bar-item:nth-last-child(2)::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-tip, .ui-toast, .ui-top { transition: none; }
  .ui-spin, .paris-clock.is-live::before { animation: none; }
}

/* Adresse e-mail mal tapée : suggestion sous le champ (site-ui.js) */
.ui-mailfix {
  margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--dark2);
}
.ui-mailfix[hidden] { display: none; }
.ui-mailfix button {
  font: inherit; font-weight: 500; color: var(--green-accent); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* Sélecteur € / US$ (site-ui.js) */
.ui-cur {
  display: inline-flex; padding: 2px; border-radius: 999px;
  background: var(--cream2); border: 1px solid var(--border);
}
.ui-cur button {
  font: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; line-height: 1;
  padding: 6px 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: #55694c; transition: background .2s, color .2s;  /* 5:1 sur crème (--dark3 : 2,7:1), 4 oct. 2026 */
}
.ui-cur button[aria-pressed="true"] { background: #fff; color: var(--dark); box-shadow: 0 1px 4px rgba(20, 26, 16, .12); }
.ui-cur button:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 1px; }
.ui-cur-host { margin: -4px 0 14px; }
.ui-cur-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #55694c; }
/* Fiches de tour : prix et sélecteur sur une ligne (site-ui.js). Si la
   place manque, le sélecteur passe dessous, aligné à gauche. */
.booking-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.booking-price-row .booking-price { margin-bottom: 0; }
:root .booking-price-row .ui-cur-host { margin: 0; }
.booking-price-row + .ui-cur-note { margin: 0 0 12px; }
.ui-cur-note[hidden] { display: none; }
.px.is-usd { white-space: nowrap; }

/* ── Journal : fin d'article (includes/journal-more.php) ─────────
   « Keep reading », précédent / suivant. Barre de lecture : site-ui.js. */
.journal-more { max-width: 980px; margin: 0 auto; padding: 56px 24px 8px; border-top: 1px solid var(--border); }
.journal-more-h {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(28px, 3.4vw, 36px); text-align: center; margin-bottom: 28px;
}
.journal-more-h em { color: var(--green-accent); }
.journal-pn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 980px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--border);
}
.journal-pn a {
  display: block; text-decoration: none; color: var(--dark);
  font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.25;
}
.journal-pn a:hover { color: var(--green-accent); }
.journal-pn small {
  display: block; margin-bottom: 4px; font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dark3);
}
.journal-pn-next { text-align: right; }
.journal-more .journal-back { padding-top: 32px; }
@media (max-width: 640px) {
  .journal-more { padding: 44px 20px 0; }
  .journal-pn { grid-template-columns: 1fr; gap: 18px; }
  .journal-pn-next { text-align: left; }
}

/* Barre de lecture des articles */
.ui-read {
  position: fixed; top: 0; left: 0; right: 0; z-index: 125; height: 3px;
  background: var(--green-accent); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* Liens du menu téléphone seulement (Build your day, FAQ) : un cran
   plus discrets que les rubriques principales. */
.nav-links .nav-m { display: none; }
@media (max-width: 640px) {
  :root .nav-links .nav-m { display: list-item; }
  :root .nav-links .nav-m a { font-size: 22px; padding: 11px 0; color: var(--dark2); }
}

/* Cibles tactiles (audit du 2 octobre 2026) : le sélecteur € / US$ et le
   fil d'Ariane faisaient 21 à 24 px de haut au doigt, sous les 32 px
   conseillés. On agrandit la zone, pas l'apparence. */
@media (max-width: 640px) {
  .ui-cur button { padding: 10px 13px; }
  .breadcrumb a { display: inline-block; padding: 8px 0; }
}

/* Note de mise à jour en tête d'un article du Journal */
.journal-update {
  margin: 0 0 28px; padding: 12px 16px; border-left: 3px solid #c4923a; border-radius: 0 2px 2px 0;
  background: #faf2e3; font-size: 14.5px; line-height: 1.6; color: #5b4519;
}
.journal-update strong { font-weight: 500; }
.journal-update a { color: var(--green-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ── En-tête posé sur la photo de l'accueil ────────────────────────
   index.php met $header_over_hero = true ; header.php ajoute
   .site-header--over, et son petit script pose .is-top tant qu'on est
   en haut de page. Sans .is-top (on a défilé, ou pas de JavaScript),
   l'en-tête reste crème, comme partout ailleurs.
   Un voile sombre en haut garde le menu lisible sur un ciel clair. */
:root .site-header--over {
  transition: background-color .35s ease, border-color .35s ease, transform .28s ease;
}
/* 4 oct. 2026 : le voile ne descend plus qu'à 24 px sous le menu (le
   reste du ciel bleu n'est plus voilé), et un ovale plus dense se pose
   derrière le logo, sur la partie la plus claire du ciel. Le centre de
   l'ovale suit le logo (conteneur de 1200 px centré). */
.site-header--over::before {
  content: ''; position: absolute; inset: 0 0 -80px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(320px 136px at max(80px, calc(50% - 520px)) 0, rgba(14,20,10,.62), rgba(14,20,10,0)),
    linear-gradient(to bottom, rgba(14,20,10,.46), rgba(14,20,10,0) calc(100% - 56px));
  opacity: 0; transition: opacity .35s ease;
}
.site-header--over .logo,
.site-header--over .logo span,
.site-header--over .nav-links a,
.site-header--over .nav-toggle span { transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
.site-header--over.is-top { background-color: transparent; border-bottom-color: transparent; }
.site-header--over.is-top::before { opacity: 1; }
.site-header--over.is-top .logo { color: #fff; }
.site-header--over.is-top .logo span { color: #b9d6a6; }
@media (min-width: 641px) {
  /* Liens en blanc plein et or plus clair (4 oct. 2026) : le voile
     derrière le menu est plus léger. Survol : un filet sous le lien. */
  .site-header--over.is-top .nav-links a { color: #fff; }
  .site-header--over.is-top .nav-links a:not(.nav-cta):hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .site-header--over.is-top .nav-links .nav-louvre { color: #e3b462; }   /* jaune doré (Simon, 4 oct. 2026 : « revenir au jaune doré ») */
  .site-header--over.is-top .nav-links .nav-louvre:hover { color: #f0c779; }
  .site-header--over.is-top .nav-cta { border-color: rgba(255,255,255,.62); color: #fff !important; }
  .site-header--over.is-top .nav-cta:hover { background: #fff; border-color: #fff; color: var(--dark) !important; }
}
@media (max-width: 640px) {
  /* Téléphone : l'en-tête est collant (dans le flux) ; la marge négative
     fait remonter la photo dessous. */
  :root .site-header--over { margin-bottom: calc(-1 * var(--nav-h)); }
  .site-header--over.is-top .nav-toggle span { background: #fff; }
  /* Menu ouvert : en-tête crème, comme le menu */
  html.menu-open .site-header--over.is-top { background-color: var(--cream); border-bottom-color: var(--border); }
  html.menu-open .site-header--over.is-top::before { opacity: 0; }
  html.menu-open .site-header--over.is-top .logo { color: var(--dark); }
  html.menu-open .site-header--over.is-top .logo span { color: var(--green-accent); }
  html.menu-open .site-header--over.is-top .nav-toggle span { background: var(--dark); }
}

/* ── Carte de réservation épurée (ESSAI du 2 oct. 2026) ─────────────
   Sur la fiche Musée d'Orsay seulement, pour l'instant. Prix et
   sélecteur € | $, une ligne de conditions, bouton, trois points clés,
   puis les jours, visibles sans clic.
   La note longue sur le taux de change (site-ui.js, sous le prix) est
   masquée : une phrase courte la remplace en bas de carte, en dollars
   seulement. */
.booking-card--lite { background: #fff; padding: 30px 30px 24px; box-shadow: 0 10px 34px rgba(20,26,16,.06); }
.booking-card--lite .booking-price { font-size: 40px; line-height: 1.1; }
.booking-card--lite .booking-price-row + .ui-cur-note { display: none; }
.booking-card--lite .booking-note { margin-bottom: 20px; }
.booking-card--lite .btn-request { margin-bottom: 20px; }
.booking-key { list-style: none; margin: 0; padding: 0; }
.booking-key li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 14px; line-height: 1.45; color: var(--dark2); }
.booking-key li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--green-accent); transform: translateY(-2px); }
.booking-avail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.booking-avail-label { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dark3); }
.booking-avail .booking-days { margin-bottom: 0; }
.booking-lite-note { margin: 14px 0 0; }
@media (max-width: 640px) { .booking-card--lite { padding: 24px 22px 20px; } }

/* ══ LISIBILITÉ DES TEXTES SUR PHOTO (2 oct. 2026) ═══════════════════
   Mesurée sur tout le site, ordinateur et téléphone : contraste WCAG de
   chaque texte contre les pixels de la photo derrière lui (10 % des
   pixels les plus défavorables). Sur la plupart des héros, la petite
   ligne au-dessus du titre, le mot en italique et le sous-titre
   tombaient sous le seuil : le voile s'arrêtait sous eux, et ces textes
   étaient en partie transparents. Voile plus dense jusqu'en haut du
   texte, couleurs pleines, légère ombre portée. */
.page-hero::after {
  background: linear-gradient(to top, rgba(10,15,8,.84) 0%, rgba(10,15,8,.62) 40%, rgba(10,15,8,.42) 72%, rgba(10,15,8,.28) 100%);
}
.page-hero.hero-light::after {
  background: linear-gradient(to top, rgba(10,15,8,.78) 0%, rgba(10,15,8,.56) 42%, rgba(10,15,8,.38) 76%, rgba(10,15,8,.26) 100%);
}
.page-hero-inner { text-shadow: 0 1px 22px rgba(0,0,0,.3); }
/* La petite ligne en capitales : blanc plein, ombre serrée qui la
   détache même sur un détail clair de la photo */
.page-hero-inner .sec-tag, .lv-hero-tag { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 18px rgba(0,0,0,.35); }
.theme-louvre .page-hero-inner .sec-tag { color: #fff; }
.page-hero-inner .hero-sub { color: rgba(255,255,255,.93); }
.page-hero-inner h1 em { color: #f7d29a; }                 /* miel, plus clair */

/* Héros de la page du Louvre */
.lv-hero::after {
  background: linear-gradient(to top, rgba(24,16,6,.86) 0%, rgba(24,16,6,.6) 42%, rgba(24,16,6,.32) 76%, rgba(24,16,6,.18) 100%);
}
.lv-hero-inner { text-shadow: 0 1px 22px rgba(0,0,0,.3); }
.lv-hero-sub { color: rgba(255,255,255,.92); }
.lv-hero-meta { color: rgba(255,255,255,.86); }


/* Logo sur la photo de l'accueil : « · Paris » plus clair. Le voile
   derrière le menu (ici à .56 sur toute la largeur jusqu'au 4 oct. 2026)
   est désormais réglé une seule fois, plus haut (.site-header--over::before). */
.site-header--over.is-top .logo span { color: #d2e7c3; }

@media (max-width: 640px) {
  /* Héros plus courts : le texte occupe presque toute la photo */
  .page-hero::after {
    background: linear-gradient(to top, rgba(10,15,8,.86) 0%, rgba(10,15,8,.68) 48%, rgba(10,15,8,.48) 100%);
  }
  .page-hero.hero-light::after {
    background: linear-gradient(to top, rgba(10,15,8,.8) 0%, rgba(10,15,8,.6) 48%, rgba(10,15,8,.4) 100%);
  }
  .lv-hero::after {
    background: linear-gradient(to top, rgba(24,16,6,.88) 0%, rgba(24,16,6,.66) 48%, rgba(24,16,6,.42) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════
   FICHES DE TOUR : FINITION (4 oct. 2026, demande de Simon : « même
   tenue » que la page des tarifs, rates.php)
   - (Une largeur de paragraphe limitée a été essayée puis retirée le
     même soir : Simon la trouvait « ridicule ». Ne pas la remettre.)
   - Prix en chiffres alignés : Cormorant dessine par défaut des
     chiffres elzéviriens, qui montent et descendent sur la ligne.
   - Petits textes secondaires en #55694c (5:1 sur crème) au lieu de
     --dark3 (2,9 à 3,2:1) : fil d'Ariane, note sous le prix, libellé
     des disponibilités, légende, détails, accroches des cartes,
     libellés de la barre d'infos. Les jours fermés du calendrier
     restent pâles exprès (le point rouge dit l'état).
   - Petite ligne en capitales sur fond crème (« Continue exploring ») :
     vert plus sombre, 5,2:1 au lieu de 4,2:1.
══════════════════════════════════════════════════════════════════ */
.booking-price { font-variant-numeric: lining-nums; }
.breadcrumb a, .booking-note, .booking-avail-label, .day-legend,
.bd-row span:first-child, .tour-card-tagline, .meta-label { color: #55694c; }
.booking-note, .tour-card-tagline { font-weight: 400; }
.meta-label { font-size: 11px; }
.related-section .sec-tag { color: #3f6b2c; }
:root .food-link-tag { color: #3f6b2c; }   /* :root : passe devant le <style> de includes/food-link.php */
.theme-louvre .related-section .sec-tag { color: var(--green-accent); }   /* or vif (Simon) */

/* ══════════════════════════════════════════════════════════════════
   MOUVEMENT SUR TOUT LE SITE (4 oct. 2026, demande de Simon : « comme
   sur l'accueil, là où c'est pertinent »). Même langage, mêmes vitesses
   que l'accueil (index.php) et la page des prix (rates.php), qui gardent
   leurs propres règles.
   1. Arrivée, sans script : la photo du héros se pose (léger zoom
      arrière) et le texte monte en fondu, ligne après ligne. Contact et
      Build your day : le texte seulement (on y vient pour agir).
      Pages de tour : la barre d'infos suit, élément par élément.
   2. Au défilement : site-ui.js (section 9) pose .mv-wait (bloc caché
      en attendant) ou .mv-zoom (photo légèrement agrandie, dans un cadre
      .mv-frame) sur ce qui est encore sous l'écran, puis l'anime en
      entrant. Sans script, tout est visible d'emblée.
   Rien ne bouge pour qui a demandé moins d'animations à son système.
══════════════════════════════════════════════════════════════════ */
@keyframes mv-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes mv-rise   { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* Photo du héros : un calque qui reprend le fond du héros (background:
     inherit, y compris la version téléphone posée par includes/head.php)
     et se pose. Le voile (::after) et le texte restent au-dessus. */
  .page-hero:not(.rt-hero):not(.contact-hero):not(.byd-hero),
  .reviews-page .rev-hero { overflow: hidden; }
  .page-hero:not(.rt-hero):not(.contact-hero):not(.byd-hero)::before,
  .reviews-page .rev-hero::before {
    content: ''; position: absolute; inset: 0;
    background: inherit; background-color: transparent;
    animation: mv-settle 9s cubic-bezier(.2,.6,.2,1) both;
  }
  .lv-hero-bg img { animation: mv-settle 9s cubic-bezier(.2,.6,.2,1) both; }

  /* Texte du héros, ligne après ligne */
  .page-hero:not(.rt-hero) .page-hero-inner > *,
  .lv-hero-inner > * { animation: mv-rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .page-hero:not(.rt-hero) .page-hero-inner > :nth-child(1), .lv-hero-inner > :nth-child(1) { animation-delay: .2s; }
  .page-hero:not(.rt-hero) .page-hero-inner > :nth-child(2), .lv-hero-inner > :nth-child(2) { animation-delay: .35s; }
  .page-hero:not(.rt-hero) .page-hero-inner > :nth-child(3), .lv-hero-inner > :nth-child(3) { animation-delay: .6s; }
  .page-hero:not(.rt-hero) .page-hero-inner > :nth-child(4), .lv-hero-inner > :nth-child(4) { animation-delay: .8s; }
  .page-hero:not(.rt-hero) .page-hero-inner > :nth-child(n+5) { animation-delay: .95s; }

  /* Pages de tour : la barre d'infos sous le héros, juste après le titre */
  .meta-bar .meta-item { animation: mv-rise 1s cubic-bezier(.2,.7,.2,1) both; }
  .meta-bar .meta-item:nth-child(1) { animation-delay: .85s; }
  .meta-bar .meta-item:nth-child(2) { animation-delay: .93s; }
  .meta-bar .meta-item:nth-child(3) { animation-delay: 1.01s; }
  .meta-bar .meta-item:nth-child(4) { animation-delay: 1.09s; }
  .meta-bar .meta-item:nth-child(5) { animation-delay: 1.17s; }
  .meta-bar .meta-item:nth-child(n+6) { animation-delay: 1.25s; }

  /* Au défilement (site-ui.js) */
  .mv-wait { opacity: 0 !important; }
  .mv-zoom { scale: 1.08; }
  .mv-frame { display: block; overflow: hidden; }
  /* Photos des articles : centrées, parfois moins larges que le texte */
  .journal-fig .mv-frame { width: fit-content; max-width: 100%; margin: 0 auto; }
}
@media print {
  .mv-wait { opacity: 1 !important; }
  .mv-zoom { scale: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HÉROS DES PAGES, HARMONISÉS (7 oct. 2026, demande de Simon :
   « ressembler à celui de la page Tours », titre + mini texte, centrés,
   même taille). Classe .hero-std posée sur le héros de : tours, about,
   build-your-day, contact, faq, glossary, journal, rates, testimonials,
   tours/food-tours, louvre/index. Plus de petite ligne en capitales
   au-dessus du titre (« All Tours », « Contact »…), plus de ligne de
   faits sous le sous-titre.
   - Ordinateur (> 640 px, en-tête fixe posé sur la photo) : 360 px de
     haut, en-tête compris, comme Tours ; le texte est centré dans la
     partie visible sous l'en-tête.
   - Téléphone (en-tête dans le flux) : 300 px, texte centré.
   - Voile : celui de Tours (plus dense en bas, assez dense au centre
     pour le texte centré). Louvre : même voile, teinte chaude.
   Étendu le même jour aux fiches de tour (tours/*.php) et aux fiches
   du Louvre (louvre/*.php) : catégorie au-dessus du titre retirée
   (« Neighborhood Walk », « Highlights »…), 460 px ramenés au gabarit
   commun. Les articles du Journal gardent leur héros.
══════════════════════════════════════════════════════════════════ */
html:root .hero-std {
  position: relative; box-sizing: border-box;
  min-height: 360px !important; margin-top: 0 !important;
  padding: calc(var(--nav-h) + 30px) 24px 42px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border-bottom: 0;
}
html:root .hero-std > .page-hero-inner,
html:root .hero-std > .lv-hero-inner,
html:root .hero-std > .about-hero-content {
  width: 100%; max-width: 980px; margin: 0 auto; padding: 0; text-align: center;
}
html:root .hero-std h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(42px, 5.5vw, 72px); line-height: 1.1;
  color: #fff; margin: 0 0 12px;
}
html:root .hero-std .hero-sub,
html:root .hero-std .about-hero-sub,
html:root .hero-std .rev-hero-sub,
html:root .hero-std .lv-hero-sub {
  display: block; max-width: 580px; margin: 0 auto;
  font-size: 17px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.93);
}
html:root .hero-std::after {
  background: linear-gradient(to top, rgba(20,26,16,.72) 0%, rgba(20,26,16,.56) 50%, rgba(20,26,16,.42) 100%) !important;
}
html:root .lv-hero.hero-std::after {
  background: linear-gradient(to top, rgba(24,16,6,.74) 0%, rgba(24,16,6,.58) 50%, rgba(24,16,6,.44) 100%) !important;
}
/* Fiches du Louvre et Versailles Exclusive : même voile, teinte chaude */
html:root .theme-gold .hero-std::after {
  background: linear-gradient(to top, rgba(24,16,6,.74) 0%, rgba(24,16,6,.58) 50%, rgba(24,16,6,.44) 100%) !important;
}
/* Fiches du Louvre : voile plus dense, pour que l'italique or vif
   (#c4923a, gardé tel quel à la demande de Simon) reste lisible au
   centre de la photo */
html:root .theme-louvre .page-hero.hero-std::after {
  background: linear-gradient(to top, rgba(24,16,6,.82) 0%, rgba(24,16,6,.72) 50%, rgba(24,16,6,.6) 100%) !important;
}
/* Build your day et About posent leur voile en ::before : un seul voile */
html:root .byd-hero.hero-std::before { background: transparent; }
html:root .about-hero.hero-std::before { background: linear-gradient(to top, rgba(20,26,16,.72) 0%, rgba(20,26,16,.56) 50%, rgba(20,26,16,.42) 100%); }
html:root .about-hero.hero-std::after { content: none; }
/* Fiches (tours, Louvre, Food tours) : le fil d'Ariane passe sous
   l'en-tête fixe, où il était caché sur ordinateur (Simon : « garde les
   fils d'Ariane, c'est important »). Le héros qui suit n'est plus sous
   l'en-tête : 288 px, la même partie visible que les autres héros. */
@media (min-width: 641px) {
  html:root .breadcrumb, html:root .tour-wip { margin-top: var(--nav-h); }
  html:root .breadcrumb + .hero-std, html:root .tour-wip + .hero-std { min-height: 288px !important; padding: 42px 24px !important; }
}
/* Reviews : la photo était sous l'en-tête décalée de --nav-h */
html:root .reviews-page.has-hero-std { padding-top: 0 !important; }

/* Contact : le portrait de Simon (rond + légende) passe sous le
   sous-titre, centré : à droite, il touchait la fin du titre centré. */
html:root .contact-hero.hero-std > .page-hero-inner { max-width: 980px; }
html:root .contact-hero.hero-std .hero-host {
  position: static; justify-content: center; margin: 18px auto 0;
}
html:root .contact-hero.hero-std .hero-host figcaption { display: block; max-width: none; text-align: left; }
html:root .contact-hero.hero-std .hero-host-face { width: 58px; height: 58px; }
html:root .contact-hero.hero-std h1 { padding: 0; }
html:root .contact-hero.hero-std .hero-sub { max-width: 580px; }

@media (max-width: 640px) {
  html:root .hero-std {
    min-height: 300px !important;
    padding: 40px 22px 44px !important;
  }
  html:root .hero-std .hero-sub,
  html:root .hero-std .about-hero-sub,
  html:root .hero-std .rev-hero-sub,
  html:root .hero-std .lv-hero-sub { font-size: 16px; }
  html:root .hero-std::after {
    background: linear-gradient(to top, rgba(20,26,16,.76) 0%, rgba(20,26,16,.62) 50%, rgba(20,26,16,.5) 100%) !important;
  }
}