/* ═══════════════════════════════════════════════════════════════════════════
   Emilie & Lucas se marient — feuille de style unique.
   Parti pris : élégant, épuré, urbain. Une seule famille, Archivo, dont on
   joue sur la LARGEUR (font-stretch) : très condensée et grasse pour les
   titres façon affiche, étendue pour les petites capitales. Des filets fins,
   beaucoup d'air. Palette : vieux rose, vert olive, jaune clair, sur ivoire.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fonds */
  --ivory:       #fbf8f0;
  --butter:      #f4ebc8;   /* jaune clair */
  --butter-pale: #f9f3dc;
  --mat:         #fdfbf4;   /* passe-partout de la vidéo encadrée */

  /* Vert olive */
  --olive:       #676b3a;
  --olive-deep:  #474a26;
  --olive-soft:  #a7a97e;
  --olive-pale:  #e6e6cf;

  /* Vieux rose */
  --rose:        #c4959a;
  --rose-mid:    #b07d84;   /* le « & » : assez soutenu pour un grand titre */
  --rose-deep:   #8f565d;   /* textes en rose : lisibles sur ivoire comme sur jaune */
  --rose-pale:   #efdcdc;

  /* Jaune « vieux film » : titres de la version Vintage sur la vidéo.
     --v-name : les prénoms et le « & » ; --v-light : « Le mariage d' » et la date.
     Les teintes (data-teinte) ne changent que ces deux couleurs. */
  --film-yellow: #f1d57e;
  --v-name:  var(--film-yellow);
  --v-light: var(--film-yellow);

  /* Jaune paille de la version Éditorial (photos de mariage « moody ») */
  --straw: #f3e596;

  /* Jaune pâle des titres de réels (relevé sur la photo de référence) : teinte Vintage
     « Jaune pâle ». Uni, sans halo. */
  --reel-yellow: #fcf8c0;

  /* Encre */
  --ink:         #38362b;
  --ink-soft:    #6a6656;
  --line:        #e7dfc9;
  --line-strong: #d5cba9;

  /* Rythme */
  --measure: 60ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 10vw, 7.5rem);

  /* Largeurs d'Archivo (axe wdth) */
  --condensed: 66%;
  --wide: 122%;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1rem, 0.25vw + .95rem, 1.1rem);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--rose-pale); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--olive-deep); color: var(--ivory);
  padding: .6rem 1rem; z-index: 10000;
}
.skip:focus { left: 0; top: 0; }

:focus-visible {
  outline: 1.5px solid var(--olive);
  outline-offset: 4px;
}

/* ── Typographie ─────────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 400; line-height: 1.1; margin: 0; }

/* Titres de section : condensés, gras, en capitales — l'accent « affiche ». */
h2 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 650;
  font-stretch: var(--condensed);
  text-transform: uppercase;
  line-height: .95;
  color: var(--olive-deep);
  margin-bottom: 2rem;
  letter-spacing: .005em;
}

h3 {
  font-size: clamp(1.08rem, 1.3vw, 1.2rem);
  font-weight: 600;
  margin-bottom: .45rem;
  letter-spacing: -.005em;
  color: var(--ink);
}

p { margin: 0 0 1rem; }

/* Petites capitales étendues et espacées au-dessus des titres. */
.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 1rem;
}

.link, .card a, .faq a {
  color: var(--olive-deep);
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color .2s ease;
}
.link:hover { color: var(--rose-deep); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.1rem 2.1rem;
  color: var(--ivory);
  background: var(--olive);
  border: 1px solid var(--olive);
  border-radius: 1px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--olive-deep); border-color: var(--olive-deep); }

.btn--ghost {
  background: transparent;
  color: var(--olive-deep);
  border-color: var(--olive-soft);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--olive-pale); color: var(--olive-deep); border-color: var(--olive); }

.btn--small { font-size: .66rem; padding: .75rem 1.15rem; }
.btn--big   { font-size: .82rem; padding: 1.3rem 2.8rem; }

/* ── Navigation ──────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem var(--gutter);
  background: color-mix(in srgb, var(--ivory) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ivory) 97%, transparent);
}

.nav-mark {
  font-size: 1.35rem;
  font-weight: 700;
  font-stretch: var(--condensed);
  letter-spacing: .06em;
  color: var(--olive-deep);
  text-decoration: none;
  white-space: nowrap;
}
.nav-mark em { color: var(--rose-mid); font-style: normal; font-weight: 300; }

.nav nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
.nav ul {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }

.nav ul a {
  position: relative;
  display: inline-block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .66rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .3rem 0;
}
.nav ul a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1px;
  background: var(--rose);
  transition: left .25s ease, right .25s ease;
}
.nav ul a:hover, .nav ul a:focus-visible, .nav ul a.is-current { color: var(--olive-deep); }
.nav ul a:hover::after, .nav ul a:focus-visible::after, .nav ul a.is-current::after { left: 0; right: 0; }

@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; }
  .nav nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
  /* Capitales espacées trop larges pour cinq liens sur un téléphone : bas de casse. */
  .nav ul { gap: 1.1rem; }
  .nav ul a { font-size: .92rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}

.names {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(.6rem, 2.2vw, 1.6rem);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 250;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--olive-deep);
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
}
.amp {
  font-style: italic;
  font-weight: 200;
  color: var(--rose-mid);
  font-size: .8em;
}

.monogram { width: clamp(120px, 18vw, 170px); margin: 0 auto clamp(1.6rem, 4vw, 2.4rem); }
.monogram svg { display: block; width: 100%; height: auto; }

.hero-date {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-size: clamp(.76rem, 1.1vw, .86rem);
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem);
}

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* Bouton unique « Save the date » (data-boutons="std") : il remplace les deux autres. */
.cta-std { display: none; }
[data-boutons="std"] .cta-deux { display: none; }
[data-boutons="std"] .cta-std { display: inline-flex; }
.cal { flex-direction: column; align-items: center; }

/* ── Panneau « Ajouter au calendrier » : monte du bas de l'écran ─────────── */
.sheet {
  width: 100%;
  max-width: 520px;
  margin: auto auto 0;
  padding: .7rem 1.25rem calc(1.2rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 -12px 40px rgba(30, 28, 20, .25);
}
.sheet[open] { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1); }
.sheet::backdrop { background: rgba(30, 28, 20, .45); animation: sheet-fade .3s ease; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 641px) {
  /* Sur ordinateur : une fenêtre au centre plutôt qu'un panneau. */
  .sheet { margin: auto; border-radius: 16px; padding-bottom: 1.4rem; }
  .sheet[open] { animation: sheet-fade .2s ease; }
  .sheet-handle { display: none; }
}
.sheet-handle { width: 40px; height: 4px; margin: 0 auto 1rem; border-radius: 4px; background: var(--line-strong); }
.sheet-title {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--holly);
  text-align: center;
  margin: 0 0 .2rem;
}
.sheet-sub {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: .66rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lima);
}
.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sheet-list [hidden] { display: none; }
.sheet-opt {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.sheet-opt:hover, .sheet-opt:focus-visible { border-color: var(--holly); background: #fffdf3; }
.sheet-opt small { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-soft); margin-top: .1rem; }
.sheet-ico { flex: none; width: 22px; height: 22px; color: var(--holly); }
.sheet-cancel {
  display: block;
  width: 100%;
  margin-top: .8rem;
  padding: .9rem;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.btn--std { font-size: .86rem; letter-spacing: .28em; padding: 1.3rem 3.2rem 1.3rem calc(3.2rem + .28em); }

/* ── Les trois titres du hero ────────────────────────────────────────────────
   Un seul bloc .hero-title est affiché, selon <html data-titre>. */

.hero-title { display: none; }
[data-titre="prenoms"] .hero-title--prenoms,
[data-titre="date"]    .hero-title--date,
[data-titre="std"]     .hero-title--std,
[data-titre="vintage"] .hero-title--vintage,
[data-titre="edito"]   .hero-title--edito { display: block; }

/* Titre « Date » : « Save the date » bien lisible, la date en très grand,
   les prénoms en retrait dessous. */
.std-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: clamp(.95rem, 2.2vw, 1.35rem);
  font-weight: 700;
  font-stretch: var(--wide);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
  /* L'espacement des lettres décale le texte à gauche : on compense. */
  padding-left: .3em;
}
.std-label::before, .std-label::after {
  content: '';
  width: clamp(1.5rem, 5vw, 3.5rem);
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.big-date { margin: 0 0 clamp(1.4rem, 3.5vw, 2.2rem); }
.big-date time { display: flex; flex-direction: column; align-items: center; }
.big-date-day {
  font-size: clamp(.8rem, 1.4vw, 1rem);
  font-weight: 500;
  font-stretch: var(--wide);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: .4em;
  margin-bottom: clamp(.8rem, 1.6vw, 1.1rem);
}
.big-date-main {
  font-size: clamp(3.6rem, 14vw, 10.5rem);
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.005em;
  color: var(--olive-deep);
}
.names--small {
  display: block;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -.02em;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* Titre « Save the date » : l'affiche — EMILIE & LUCAS en très grandes capitales condensées. */
.std {
  font-size: clamp(3.4rem, 11.5vw, 11.5rem);
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.005em;
  color: var(--olive-deep);
  margin: 0 0 clamp(1.4rem, 3.5vw, 2.4rem);
}
.std-and {
  color: var(--rose-mid);
  /* Plus grand que les prénoms et recentré sur la hauteur des capitales (réglé à l'œil). */
  position: relative;
  top: .055em;
  font-size: 1.34em;
}
@media (max-width: 640px) {
  /* Sur téléphone, l'affiche passe sur trois lignes : EMILIE / & / LUCAS. */
  /* Limitée aussi par la hauteur de l'écran, pour que le bouton reste visible sans défiler. */
  .std { font-size: min(36vw, 16.5svh); }
  .std-line { display: block; }
}
.std-date {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(.82rem, 1.8vw, 1.15rem);
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .9rem 0 .9rem .32em;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  margin: 0 0 clamp(2.2rem, 5vw, 3.2rem);
}

/* Titre « Vintage » : générique de film des années 70. La date sur une ligne, les prénoms
   sur une ligne en dessous. Quatre polices au choix (data-police), chacune avec sa taille —
   elles n'ont pas la même chasse, et la ligne doit tenir sur un téléphone. */
.vintage {
  font-family: 'Fraunces', 'Cooper Black', Georgia, serif;
  font-size: clamp(3rem, 10vw, 8.8rem);
  font-weight: 560;
  /* Fraunces « molle » et « bancale » : les empattements arrondis des titres des années 70. */
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  line-height: .95;
  letter-spacing: -.03em;
  white-space: nowrap;
  margin: 0 0 clamp(2.2rem, 5vw, 3.2rem);
  color: var(--olive-deep);
}
/* Le « & » entre les prénoms : celui d'Archivo Narrow, un « & » classique et étroit, le même
   sur tous les appareils (fichier hébergé, qui ne contient que ce caractère). Couleur de la date. */
.vintage-and,
.std-and {
  font-family: 'Archivo Narrow Amp', 'Archivo', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-variation-settings: normal;
  text-transform: none;
}
.vintage-and {
  font-size: .72em;
  letter-spacing: 0;
  color: var(--rose-deep);
}
/* La date : dans la police du bouton « SAVE THE DATE » — capitales larges et espacées
   (Archivo étendue), quelle que soit la police des prénoms. */
.vintage-date {
  margin: 0 0 .9em;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 500;
  font-stretch: var(--wide);
  font-size: clamp(1rem, 2.1vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: .24em;
  /* L'espacement des lettres décale le texte à gauche : on compense. */
  padding-left: .24em;
  line-height: 1;
  white-space: nowrap;
  color: var(--rose-deep);
}

[data-police="caprasimo"] .vintage {
  font-family: 'Caprasimo', 'Cooper Black', Georgia, serif;
  font-size: clamp(2.8rem, 8.8vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -.01em;
}
[data-police="young"] .vintage {
  font-family: 'Young Serif', Georgia, serif;
  font-size: clamp(2.9rem, 9.4vw, 8rem);
  font-weight: 400;
  letter-spacing: -.02em;
}
/* « Grasse » : la police des titres de réels (type « FREDDY ») — Archivo très grasse, en
   capitales serrées, et CONDENSÉE : des lettres plus hautes pour la même largeur. */
[data-police="grasse"] .vintage {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(3.2rem, 10.4vw, 9rem);
  font-weight: 800;
  font-stretch: 76%;
  font-variation-settings: normal;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .9;
}
@media (max-width: 640px) {
  /* Sur téléphone, trois lignes : Emilie / & / Lucas — d'où des tailles bien plus grandes. */
  .vintage { white-space: normal; line-height: .92; }
  .vintage-line { display: block; }
  .vintage { font-size: min(33vw, 15svh); }
  [data-police="caprasimo"] .vintage { font-size: min(25.5vw, 13svh); }
  [data-police="young"] .vintage { font-size: min(25vw, 13svh); }
  [data-police="grasse"] .vintage { font-size: min(30vw, 15svh); }
  /* Le « & » vient se poser à cheval sur les deux prénoms, avec une ombre pour se détacher. */
  .vintage-and,
  .std-and {
    position: relative;
    z-index: 1;
    margin: -.4em 0 -.36em;
    line-height: 1;
    text-shadow: 0 0 .12em rgba(20, 18, 12, .45), 0 .03em .06em rgba(20, 18, 12, .4);
  }
  .vintage-and { font-size: .95em; }
  /* Save the date : le « & », grand, passe DERRIÈRE les prénoms, qui se rapprochent. */
  .std-line:not(.std-and) { position: relative; z-index: 1; }
  .std-and {
    z-index: 0;
    top: 0;
    font-size: 1.34em;
    /* Marges en em du « & » lui-même (1,34 × les prénoms) : il reste ~0,08 em de prénom entre
       EMILIE et LUCAS, et le « & » dépasse dans l'espace, en dessous et au-dessus des lettres. */
    margin: -.48em 0 -.46em;
    text-shadow: none;
  }
  .std-line:not(.std-and) { text-shadow: 0 0 .08em rgba(20, 18, 12, .35); }
  .vintage-date { font-size: 4.1vw; }
}

/* Sur la vidéo : un jaune pâle uni, celui des génériques tirés sur pellicule, avec un halo
   (la lumière qui « bave » autour des lettres) et un très léger tremblement de projection. */
/* Teintes : jaune uni (par défaut) / deux tons / crème (un jaune moins jaune, en deux tons). */
[data-teinte="deux-tons"] { --v-light: #f8edc8; }
[data-teinte="creme"]     { --v-name: #eadcae; --v-light: #f8f2df; }
[data-teinte="pale"]      { --v-name: var(--reel-yellow); --v-light: #fffde8; }
/* Rendu « titre de réel » : couleur à plat, sans halo — avec la police Grasse ou le jaune pâle. */
[data-version="fond"][data-police="grasse"] :is(.vintage, .vintage-date),
[data-version="fond"][data-teinte="pale"] :is(.vintage, .vintage-date) { text-shadow: none; }

[data-version="fond"] .vintage { color: var(--v-name); }
[data-version="fond"] .vintage-and,
[data-version="fond"] .vintage-date { color: var(--v-light); }
[data-version="fond"] .vintage,
[data-version="fond"] .vintage-date {
  text-shadow:
    0 0 1px rgba(246, 218, 140, .8),
    0 0 .06em rgba(255, 196, 92, .5),
    0 0 .3em rgba(255, 180, 70, .18),
    0 .02em .05em rgba(40, 26, 6, .45);
  animation: gate-weave 3s steps(1) infinite;
}
/* Les boutons du hero prennent la couleur du « & » et de la date (Vintage), ou de la date (Save the date). */
[data-titre="vintage"][data-version="fond"] .hero .btn,
[data-titre="std"][data-version="fond"] .hero .btn {
  background: var(--v-light);
  border-color: var(--v-light);
  color: #3a2c0c;
}
[data-titre="vintage"][data-version="fond"] .hero .btn:hover,
[data-titre="std"][data-version="fond"] .hero .btn:hover,
[data-titre="vintage"][data-version="fond"] .hero .btn:focus-visible,
[data-titre="std"][data-version="fond"] .hero .btn:focus-visible { background: var(--ivory); border-color: var(--ivory); }
[data-titre="vintage"][data-version="fond"] .hero .btn--ghost,
[data-titre="std"][data-version="fond"] .hero .btn--ghost {
  background: rgba(20, 18, 14, .2);
  color: var(--v-light);
  border-color: color-mix(in srgb, var(--v-light) 70%, transparent);
}
[data-titre="vintage"][data-version="fond"] .hero .btn--ghost:hover,
[data-titre="std"][data-version="fond"] .hero .btn--ghost:hover,
[data-titre="vintage"][data-version="fond"] .hero .btn--ghost:focus-visible,
[data-titre="std"][data-version="fond"] .hero .btn--ghost:focus-visible { background: color-mix(in srgb, var(--v-light) 14%, transparent); color: var(--v-light); border-color: var(--v-light); }
/* Vidéo encadrée : la date et le « & » sont en vieux rose, le bouton aussi. */
[data-titre="vintage"][data-version="polaroid"] .hero .btn:not(.btn--ghost) { background: var(--rose-deep); border-color: var(--rose-deep); }
[data-titre="vintage"][data-version="polaroid"] .hero .btn:not(.btn--ghost):hover,
[data-titre="vintage"][data-version="polaroid"] .hero .btn:not(.btn--ghost):focus-visible { background: #74434a; border-color: #74434a; }

/* Tremblement de la pellicule dans le projecteur : quelques dixièmes de pixel, irréguliers. */
@keyframes gate-weave {
  0%   { transform: translate(0, 0); }
  13%  { transform: translate(.4px, -.3px); }
  27%  { transform: translate(-.3px, .2px); }
  41%  { transform: translate(.2px, .5px); }
  58%  { transform: translate(-.4px, -.2px); }
  72%  { transform: translate(.3px, .3px); }
  86%  { transform: translate(-.2px, -.4px); }
}

/* L'image sous le titre Vintage : naturelle (aucun filtre de couleur), juste un voile neutre
   pour lire le texte. Option « Grain » (data-image="grain") : un grain de pellicule par-dessus.
   Seulement pour la combinaison Vintage + vidéo en fond. */
.hero-grain { display: none; }
[data-titre="vintage"][data-version="fond"] .hero-film-video { filter: none; }
[data-titre="vintage"][data-version="fond"][data-image="grain"] .hero-grain,
[data-titre="edito"][data-version="fond"][data-image="grain"] .hero-grain {
  display: block;
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .8s steps(5) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
[data-titre="vintage"][data-version="fond"] .hero-film::after {
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%, rgba(20, 18, 14, .4), transparent 78%),
    radial-gradient(ellipse at center, transparent 50%, rgba(20, 18, 14, .4)),
    linear-gradient(to bottom, rgba(20, 18, 14, .28), rgba(20, 18, 14, .12) 45%, rgba(20, 18, 14, .4));
}
@media (min-width: 760px) {
  /* Bandes noires en haut et en bas, comme un film en 2.35. */
  [data-titre="vintage"][data-version="fond"] .hero-film::after {
    box-shadow: inset 0 clamp(18px, 4.5vh, 46px) 0 #0e0c09, inset 0 calc(-1 * clamp(18px, 4.5vh, 46px)) 0 #0e0c09;
  }
  [data-titre="vintage"][data-version="fond"] .hero-film .film-toggle { bottom: calc(clamp(18px, 4.5vh, 46px) + 1rem); }
}

/* ── Titre « Éditorial » ─────────────────────────────────────────────────────
   Inspiré des carrousels de photographes de mariage : grotesque grasse, interlettrage
   très serré, jaune paille, image sombre et feutrée. */
.edito { display: none; color: var(--olive-deep); }
[data-edito="bloc"]   .edito--bloc,
[data-edito="centre"] .edito--centre { display: block; }

/* Bloc à gauche : minuscules italiques empilées, tout à la même taille, « & » seul sur sa ligne. */
.edito--bloc {
  text-align: left;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 700;
  font-style: italic;
  font-stretch: 92%;
  letter-spacing: -.06em;
  line-height: .9;
  text-transform: lowercase;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.edito--bloc .edito-line { display: block; margin: 0; }
@media (max-width: 640px) { .edito--bloc { font-size: 12.5vw; } }
.edito--bloc .edito-names { font: inherit; letter-spacing: inherit; margin: 0; }

/* Centré : SAVE THE DATE en grandes capitales grasses, une ligne en dessous. */
.edito--centre { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.edito-big {
  margin: 0 0 .35em;
  font-size: clamp(3rem, 9vw, 7.4rem);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -.035em;
  line-height: .92;
  text-transform: uppercase;
}
.edito-sub {
  font-size: clamp(1rem, 2vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* Mise en page « bloc » : tout le hero s'aligne à gauche, boutons compris. */
[data-titre="edito"][data-edito="bloc"] .hero { text-align: left; padding-left: clamp(1.5rem, 8vw, 8rem); }
[data-titre="edito"][data-edito="bloc"] .hero-cta { justify-content: flex-start; }

/* Sur la vidéo : jaune paille, image assombrie et feutrée, voile olive. */
[data-version="fond"] .edito { color: var(--straw); text-shadow: 0 1px 18px rgba(15, 18, 8, .35); }
[data-titre="edito"][data-version="fond"] .hero-film-video { filter: saturate(.62) contrast(.92) brightness(.74); }
[data-titre="edito"][data-version="fond"] .hero-film::after {
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(16, 20, 10, .5)),
    linear-gradient(to bottom, rgba(34, 44, 20, .42), rgba(34, 44, 20, .3) 50%, rgba(34, 44, 20, .52));
}
[data-titre="edito"][data-edito="bloc"][data-version="fond"] .hero-film::after {
  /* Le texte est à gauche : on assombrit davantage ce côté-là. */
  background:
    linear-gradient(to right, rgba(16, 20, 10, .5), rgba(16, 20, 10, .12) 60%, transparent),
    radial-gradient(ellipse at center, transparent 45%, rgba(16, 20, 10, .45)),
    linear-gradient(to bottom, rgba(34, 44, 20, .38), rgba(34, 44, 20, .28) 50%, rgba(34, 44, 20, .5));
}
[data-titre="edito"][data-version="fond"] .hero .btn { background: var(--straw); border-color: var(--straw); color: #2e3218; }
[data-titre="edito"][data-version="fond"] .hero .btn:hover,
[data-titre="edito"][data-version="fond"] .hero .btn:focus-visible { background: var(--ivory); border-color: var(--ivory); }
[data-titre="edito"][data-version="fond"] .hero .btn--ghost { background: rgba(16, 20, 10, .2); color: var(--straw); border-color: color-mix(in srgb, var(--straw) 70%, transparent); }
[data-titre="edito"][data-version="fond"] .hero .btn--ghost:hover,
[data-titre="edito"][data-version="fond"] .hero .btn--ghost:focus-visible { background: color-mix(in srgb, var(--straw) 14%, transparent); color: var(--straw); border-color: var(--straw); }

/* ── Test « Rappel » : touches de Holly Berry dans le haut de page ───────────
   (data-rappel="holly") — le « & », les filets de la date et le bouton Save the date, pour faire
   le lien avec la section « Où » en Holly Berry. */
[data-rappel="holly"] .std-and,
[data-rappel="holly"] .vintage-and,
[data-rappel="holly"] .amp { color: var(--holly) !important; }
[data-rappel="holly"][data-version="fond"] .std-date { border-color: var(--holly); }
[data-rappel="holly"][data-version="fond"] .hero .cal-btn,
[data-rappel="holly"][data-version="fond"] .hero .btn:not(.btn--ghost) { background: var(--holly); border-color: var(--holly); color: var(--jaune); }
[data-rappel="holly"][data-version="fond"] .hero .cal-btn:hover,
[data-rappel="holly"][data-version="fond"] .hero .cal-btn:focus-visible { background: #9c4050; border-color: #9c4050; color: var(--jaune); }

/* ── Annotation griffonnée sur la vidéo en fond ──────────────────────────────
   Comme un commentaire écrit au feutre sur la vidéo : une flèche dessinée à la main qui pointe
   vers le couple, et une vanne en écriture manuscrite. La flèche « se dessine » à l'ouverture. */
.note { display: none; }
[data-version="fond"]:is([data-note="avec"], [data-note="holly"]) .note {
  display: flex;
  align-items: center;
  gap: .2rem;
  position: absolute;
  z-index: 1;
  right: clamp(1.5rem, 7vw, 7rem);
  bottom: clamp(5rem, 14vh, 9rem);
  color: var(--note-color, #fffde8);
  transform: rotate(-5deg);
  pointer-events: none;
  text-align: left;
}
[data-titre="vintage"], [data-titre="std"] { --note-color: var(--v-light); }
/* Essai : l'annotation en Holly Berry, un peu plus grasse pour rester lisible sur la vidéo. */
/* Holly Berry éclairci (même teinte, luminosité 70 %) pour ressortir sur la vidéo. */
[data-note="holly"] .note { --note-color: var(--holly-clair); }
[data-note="holly"] .note-text { font-weight: 700; text-shadow: 0 1px 10px rgba(40, 18, 22, .45); }
[data-note="holly"] .note-small { font-weight: 600; font-size: .7em; }
[data-note="holly"] .note-arrow { filter: drop-shadow(0 1px 5px rgba(40, 18, 22, .4)); }

.note-text {
  margin: 0;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: .95;
  text-shadow: 0 1px 12px rgba(20, 18, 12, .55);
}
.note-small {
  display: block;
  margin-top: .35em;
  font-size: .62em;
  font-weight: 500;
  opacity: .9;
}
.note-arrow {
  flex: none;
  width: clamp(70px, 9vw, 130px);
  height: auto;
  /* La flèche part du texte et remonte vers le couple, en haut à gauche. */
  margin-top: -2.4rem;
  overflow: visible;
  filter: drop-shadow(0 1px 6px rgba(20, 18, 12, .45));
}
.note-arrow path {
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Le tracé se dessine, puis la pointe. */
.note-arrow-line { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.1s .9s cubic-bezier(.6, 0, .3, 1) forwards; }
.note-arrow-head { stroke-dasharray: 40;  stroke-dashoffset: 40;  animation: draw .35s 1.9s ease-out forwards; }
.note-text { opacity: 0; animation: note-in .6s .6s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes note-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  /* Sur téléphone : en bas à droite, au-dessus du bouton pause. On remonte le contenu du hero
     pour lui laisser la place, et l'affiche « Save the date » rapetisse un peu. */
  [data-version="fond"]:is([data-note="avec"], [data-note="holly"]) .hero { padding-bottom: 9.5rem; }
  [data-version="fond"]:is([data-note="avec"], [data-note="holly"]) .std { font-size: min(36vw, 14.5svh); }
  [data-version="fond"]:is([data-note="avec"], [data-note="holly"]) .note { right: 1rem; bottom: 5rem; }
  .note-text { font-size: 1.4rem; }
  .note-arrow { width: 50px; margin-top: -1.3rem; }
}

/* ── Compte à rebours ────────────────────────────────────────────────────── */

.countdown {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}
.countdown-title {
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 1.6rem;
}
.cd-list {
  display: flex;
  justify-content: center;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.cd-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(70px, 18vw, 130px);
  padding: 0 clamp(.4rem, 2vw, 1.4rem);
}
.cd-list li + li { border-left: 1px solid color-mix(in srgb, var(--lima) 35%, transparent); }
.cd-num {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  font-weight: 300;
  font-stretch: var(--condensed);
  line-height: 1;
  color: var(--lima);
  font-variant-numeric: lining-nums tabular-nums;
}
.cd-lab {
  margin-top: .6rem;
  font-size: .62rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lima);
}
.countdown-note { font-weight: 400; color: var(--lima); margin: 0; }

/* ── Séparateur ──────────────────────────────────────────────────────────── */

.divider { max-width: 380px; margin: clamp(.5rem, 3vw, 1.5rem) auto clamp(2rem, 5vw, 3.5rem); padding: 0 var(--gutter); }
.divider svg { width: 100%; height: auto; display: block; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  text-align: center;
}

/* Bande jaune clair, bord à bord. */
.section--tint {
  max-width: none;
  background: var(--butter-pale);
}
.section--tint > * { max-width: 1080px; margin-inline: auto; }

.story {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: left;
  font-size: 1.08em;
}
.story p:first-of-type::first-letter {
  float: left;
  font-size: 3.6em;
  font-weight: 700;
  font-stretch: var(--condensed);
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--rose-deep);
}
.signature {
  font-size: .78rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: right;
  color: var(--olive);
  margin-top: 1.8rem;
}
.signature::before { content: '— '; color: var(--rose); }

/* ── La vidéo encadrée : un tirage sous passe-partout ────────────────────── */

.film {
  max-width: 760px;
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
}

.film-frame {
  position: relative;
  padding: clamp(.7rem, 2vw, 1.25rem);
  background: var(--mat);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(56, 54, 43, .05), 0 22px 44px -26px rgba(56, 54, 43, .35);
}
.film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 848 / 478;
  object-fit: cover;
  background: var(--olive-pale);
}

.film-caption {
  margin-top: 1.1rem;
  font-style: italic;
  font-weight: 300;
  font-size: .98rem;
  color: var(--ink-soft);
  text-align: center;
}
.film-caption::before, .film-caption::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1.6rem;
  height: 1px;
  margin: 0 .8rem;
  background: var(--rose);
}

/* Pause / lecture : un rond fin, discret, en bas à droite de l'image. */
.film-toggle {
  position: absolute;
  right: clamp(1.4rem, 3vw, 2rem);
  bottom: clamp(1.4rem, 3vw, 2rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--olive-deep);
  background: color-mix(in srgb, var(--ivory) 85%, transparent);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s ease, background .2s ease;
}
.film-toggle[hidden] { display: none; }
.film-toggle:hover, .film-toggle:focus-visible, [data-film].is-paused .film-toggle { opacity: 1; background: var(--ivory); }
.film-ico { width: 1rem; height: 1rem; }
.film-ico--play, [data-film].is-paused .film-ico--pause { display: none; }
[data-film].is-paused .film-ico--play { display: block; }

/* ── Version « fond » : la vidéo en plein cadre derrière les prénoms ────────
   Tout est piloté par <html data-version="fond">. Le monogramme et la vidéo
   encadrée s'effacent ; le texte passe en ivoire sur un voile olive. */

.hero-film { display: none; }

[data-version="fond"] .hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Plein écran moins la barre de nav (qui passe sur deux lignes sur mobile). */
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
  isolation: isolate;
  overflow: hidden;
}
@media (max-width: 760px) {
  [data-version="fond"] .hero { min-height: calc(100vh - 7rem); min-height: calc(100svh - 7rem); }
  /* Écran en hauteur : on recadre un peu vers la gauche pour garder les deux dans l'image. */
  .hero-film-video { object-position: 42% center; }
}

[data-version="fond"] .hero-film {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--olive-deep) url("media/save-the-date-fond.jpg?v=1") center / cover;
}
.hero-film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* On adoucit l'image pour qu'elle s'accorde à la palette. */
  filter: saturate(.78) sepia(.08);
}
/* Voile olive : plus dense au centre (le texte) et en bas. */
.hero-film::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 50% 50%, rgba(46, 48, 24, .46), transparent 80%),
    linear-gradient(to bottom, rgba(46, 48, 24, .4), rgba(46, 48, 24, .24) 45%, rgba(46, 48, 24, .5));
}
.hero-film .film-toggle {
  right: var(--gutter);
  bottom: clamp(1.4rem, 3vw, 2rem);
  color: var(--ivory);
  background: rgba(46, 48, 24, .25);
  border-color: rgba(251, 248, 240, .55);
}
.hero-film .film-toggle:hover, .hero-film .film-toggle:focus-visible,
.hero-film.is-paused .film-toggle { background: rgba(46, 48, 24, .45); }

[data-version="fond"] .monogram,
[data-version="fond"] .film { display: none; }

[data-version="fond"] .hero .eyebrow,
[data-version="fond"] .names,
[data-version="fond"] .hero-date { text-shadow: 0 1px 24px rgba(30, 30, 15, .45); }
[data-version="fond"] .hero .eyebrow { color: var(--butter); text-shadow: 0 1px 12px rgba(30, 30, 15, .7); }
[data-version="fond"] .names { color: var(--ivory); }
[data-version="fond"] .amp { color: var(--rose-pale); }
[data-version="fond"] .hero-date { color: rgba(251, 248, 240, .92); }
[data-version="fond"] .hero-date-sep { background: var(--rose-pale); }
[data-version="fond"] .std-label { color: var(--butter); }
[data-version="fond"] .big-date-day,
[data-version="fond"] .std-date { color: rgba(251, 248, 240, .92); }
[data-version="fond"] .std-date { border-color: rgba(251, 248, 240, .45); }
[data-version="fond"] .big-date-main,
[data-version="fond"] .std { color: var(--ivory); }
/* Titre « Save the date » sur la vidéo : les mêmes couleurs que la version Vintage (elles suivent
   le réglage Teinte) — jaune clair pour les prénoms, crème pour le « & » et la date. */
[data-titre="std"][data-version="fond"] .std { color: var(--v-name); }
[data-titre="std"][data-version="fond"] .std-and { color: var(--v-light); }
[data-titre="std"][data-version="fond"] .std-date {
  color: var(--v-light);
  border-color: color-mix(in srgb, var(--v-light) 50%, transparent);
}
[data-version="fond"] .std-label,
[data-version="fond"] .big-date,
[data-version="fond"] .std,
[data-version="fond"] .std-date { text-shadow: 0 1px 24px rgba(30, 30, 15, .45); }
[data-version="fond"] .hero .btn { background: var(--ivory); border-color: var(--ivory); color: var(--olive-deep); }
[data-version="fond"] .hero .btn:hover,
[data-version="fond"] .hero .btn:focus-visible { background: var(--butter); border-color: var(--butter); }
[data-version="fond"] .hero .btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(251, 248, 240, .7); }
[data-version="fond"] .hero .btn--ghost:hover,
[data-version="fond"] .hero .btn--ghost:focus-visible { background: rgba(251, 248, 240, .14); color: var(--ivory); border-color: var(--ivory); }

/* ── Timeline du jour J ──────────────────────────────────────────────────── */

.timeline {
  list-style: none;
  margin: 2.5rem auto 0;
  padding: 0;
  max-width: 680px;
  text-align: left;
  position: relative;
}
/* Le fil vertical : un filet fin qui s'estompe aux deux bouts. */
.timeline::before {
  content: '';
  position: absolute;
  top: .9rem; bottom: 2.4rem;
  left: calc(clamp(80px, 20vw, 120px) + 1.25rem);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--olive-soft) 8%, var(--olive-soft) 92%, transparent);
}

.timeline li {
  display: grid;
  grid-template-columns: clamp(80px, 20vw, 120px) 2.5rem 1fr;
  align-items: start;
  padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.tl-time {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 600;
  font-stretch: var(--condensed);
  color: var(--rose-deep);
  line-height: 1.3;
  text-align: right;
  padding-right: .4rem;
}
.tl-dot { position: relative; align-self: start; height: 1rem; margin-top: .62rem; }
.tl-dot::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  background: var(--ivory);
  border: 1px solid var(--olive);
  border-radius: 50%;
}
.timeline li:last-child .tl-dot::before { background: var(--rose); border-color: var(--rose); }
.tl-body h3 { font-weight: 500; }
.tl-body p  { color: var(--ink-soft); margin: 0; }

/* ── Cartes ──────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2.6vw, 1.8rem);
  margin-top: 2.5rem;
  text-align: left;
}
.cards--two { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); max-width: 860px; margin-inline: auto; }

.card {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--ivory);
  border: 1px solid var(--line);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.section--tint .card { background: var(--mat); }
.card:hover { border-color: var(--line-strong); box-shadow: 0 18px 36px -28px rgba(56, 54, 43, .4); }
.card h3 { padding-bottom: .7rem; margin-bottom: .9rem; position: relative; }
/* Un petit filet rose sous chaque titre de carte. */
.card h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 1.8rem; height: 1px;
  background: var(--rose);
}
.card p { color: var(--ink-soft); }
.card p strong { color: var(--ink); font-weight: 600; }
.card p:last-child { margin-bottom: 0; }
.card-ico { width: 40px; margin-bottom: 1rem; }

/* La carte « Où » : sans cadre, posée directement sur la bande jaune. */
.section--tint .card--lieu,
.section--tint .card--lieu:hover { background: none; border: 0; box-shadow: none; padding: 0; transform: none; }

/* La carte du lieu : traits fins, typographie du hero (Archivo condensée / étendue). */
.lieu-map { display: block; width: 100%; height: auto; overflow: visible; }
.lieu-map text { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; }
.map-city   { font-size: 15px; font-weight: 800; font-stretch: 76%; letter-spacing: .01em; fill: var(--m-city); }
.map-small  { font-size: 6.5px; font-weight: 600; font-stretch: 122%; letter-spacing: .2em; fill: var(--m-label); }
.m-north .map-small { fill: var(--m-north, var(--m-label)); }
.map-dest   { font-size: 7.5px; font-weight: 700; font-stretch: 122%; letter-spacing: .2em; fill: var(--m-dest); }
.map-time   { font-size: 7px; font-weight: 700; font-stretch: 122%; letter-spacing: .16em; fill: var(--m-dest); }
.map-region { font-size: 7px; font-weight: 600; font-stretch: 122%; letter-spacing: .32em; fill: var(--m-label); opacity: .85; }
.map-q      { font-size: 11px; font-weight: 800; fill: var(--m-pinq); text-transform: none; }
.m-region { fill: var(--m-fill); stroke: var(--m-stroke); }
.m-seine  { stroke: var(--m-seine); }
.m-forest { fill: var(--m-forest); }
.m-route  { stroke: var(--m-route); }
.m-paris-ring { stroke: var(--m-city); }
.m-paris  { fill: var(--m-city); }
.m-pin    { fill: var(--m-pin); }
.m-ring   { stroke: var(--m-pin); }
.m-north  { fill: var(--m-north, var(--m-label)); stroke: var(--m-north, var(--m-label)); }
.m-north text { stroke: none; }

/* Carte du lieu : palettes (comparaison temporaire). Teintes du mariage, relevées sur les
   nuanciers Pantone : Lima Bean Green 18-0540 #828c32 · Holly Berry 17-1633 #b54e5e ·
   Russet Orange 16-1255 #e47126 · jaune clair #fcf8c0. Chaque variante = un FOND de section
   (--m-bg) et une carte accordée dessus. */
:root {
  --lima: #828c32;  --lima-dark: #5c6322;
  --holly: #b54e5e; --russet: #e47126; --jaune: #fcf8c0;
  --holly-clair: #d2939d;   /* Holly Berry éclairci : annotation */
  --seine-rose: #e7c5cb;    /* Holly Berry très clair : la Seine, pour se détacher du contour */
}
.lieu-variant--jaune  { --m-bg: var(--jaune); --m-fill: #f2eaaa; --m-stroke: var(--lima); --m-seine: #a9bab0; --m-forest: #dfe0a4;
                        --m-route: var(--holly); --m-pin: var(--holly); --m-pinq: #fff; --m-city: var(--lima-dark);
                        --m-label: var(--lima-dark); --m-dest: var(--holly); --m-text: var(--ink); --m-soft: var(--lima-dark); }
.lieu-variant--lima   { --m-bg: var(--lima); --m-fill: #939e42; --m-stroke: var(--jaune); --m-seine: #cdd69a; --m-forest: #737c29;
                        --m-route: var(--jaune); --m-pin: var(--russet); --m-pinq: #fff; --m-city: var(--jaune);
                        --m-label: var(--jaune); --m-dest: var(--jaune); --m-text: var(--jaune); --m-soft: #f4f0cf; }
.lieu-variant--holly  { --m-bg: var(--holly); --m-fill: #c3636f; --m-stroke: var(--jaune); --m-seine: var(--seine-rose); --m-forest: #a0444f;
                        --m-route: var(--jaune); --m-pin: var(--jaune); --m-pinq: var(--holly); --m-city: var(--jaune);
                        --m-label: var(--jaune); --m-dest: var(--jaune); --m-text: var(--jaune); --m-soft: #fbeedd; }
.lieu-variant--russet { --m-bg: var(--russet); --m-fill: #ec8a4b; --m-stroke: #fff6d8; --m-seine: #fbd3ad; --m-forest: #cd6220;
                        --m-route: #fff; --m-pin: var(--holly); --m-pinq: #fff; --m-city: #fff;
                        --m-label: #fff; --m-dest: #fff; --m-text: #fff; --m-soft: #fff4e6; }
.lieu-variant--blanc-holly { --m-bg: #fff; --m-fill: var(--holly); --m-stroke: #8f3a48; --m-seine: var(--seine-rose); --m-forest: #9d4250;
                        --m-route: var(--jaune); --m-pin: var(--jaune); --m-pinq: var(--holly); --m-city: var(--jaune);
                        --m-label: var(--jaune); --m-dest: var(--jaune); --m-north: var(--holly);
                        --m-accent: var(--holly); --m-text: var(--lima); --m-soft: var(--lima); }
.lieu-variant--trait { --m-bg: #fff; --m-fill: #fff; --m-stroke: var(--holly); --m-seine: var(--seine-rose); --m-forest: #f7e7e9;
                        --m-route: var(--holly); --m-pin: var(--holly); --m-pinq: #fff; --m-city: var(--holly);
                        --m-label: var(--holly); --m-dest: var(--holly); --m-north: var(--holly);
                        --m-accent: var(--holly); --m-text: var(--lima); --m-soft: var(--lima); }
.lieu-variant--blanc  { --m-bg: #fff; --m-fill: var(--jaune); --m-stroke: var(--lima); --m-seine: #a9bab0; --m-forest: #e3e5bd;
                        --m-route: var(--russet); --m-pin: var(--holly); --m-pinq: #fff; --m-city: var(--lima-dark);
                        --m-label: var(--lima-dark); --m-dest: var(--holly); --m-text: var(--ink); --m-soft: var(--lima-dark); }

/* Les bandes : chacune prend toute la largeur de l'écran, fond plein, contenu centré. */
.lieu-maps { display: block; }
.lieu-variant {
  margin: 0 calc(50% - 50vw);
  padding: clamp(3rem, 7vw, 5rem) max(var(--gutter), calc(50vw - 280px));
  background: var(--m-bg);
  text-align: center;
}
.lieu-variant .lieu-map { margin: 0 0 1.6rem; }
.lieu-variant h3 { color: var(--m-text); }
.lieu-variant h3::after { left: 50%; margin-left: -.9rem; background: var(--m-accent, var(--m-dest)); }
.lieu-variant p { color: var(--m-soft); }
.lieu-variant .lieu-variant-eyebrow {
  color: var(--m-accent, var(--m-dest));
  margin-bottom: 1.6rem;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
}
.lieu-variant-name {
  margin-top: 1.6rem;
  font-size: .6rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--m-soft);
  opacity: .8;
}
/* Fond retenu : Holly Berry (data-ou="holly"), ou en test fond blanc + carte Holly Berry
   (data-ou="blanc"). Les autres variantes restent masquées (gardées dans le HTML au cas où),
   le petit nom de variante aussi. */
.lieu-variant,
.lieu-variant-name { display: none; }
[data-ou="holly"] .lieu-variant--holly,
[data-ou="blanc"] .lieu-variant--blanc-holly,
[data-ou="trait"] .lieu-variant--trait { display: block; }

/* La section elle-même s'efface : ce sont les bandes qui font le fond. */
[data-mode="teaser"] #lieu { background: none; padding: 0; }
[data-mode="teaser"] #lieu > .eyebrow { display: none; }
[data-mode="teaser"] #lieu .cards { margin-block: 0; }
.card-ico svg { width: 100%; height: auto; display: block; }

/* ── RSVP ────────────────────────────────────────────────────────────────── */

.rsvp {
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) var(--section-y);
  text-align: center;
}
/* Faire-part : fond jaune clair, double filet olive à l'intérieur. */
.rsvp-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.6rem, 6vw, 3.5rem);
  background: var(--butter);
  outline: 1px solid var(--olive-soft);
  outline-offset: -12px;
}
.rsvp-inner h2 { margin-bottom: 1.2rem; }
.rsvp-lead { max-width: 44ch; margin-inline: auto; }
.rsvp-lead strong { font-weight: 600; color: var(--olive-deep); }
.rsvp-actions { margin: 2rem 0 1.2rem; }
.rsvp-small { font-style: italic; color: var(--ink-soft); font-size: .98em; margin: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq { max-width: 720px; margin: 2.5rem auto 0; text-align: left; }

.faq details { border-bottom: 1px solid var(--line-strong); }
.faq details:first-of-type { border-top: 1px solid var(--line-strong); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.6rem 1.15rem 0;
  position: relative;
  font-size: 1.05em;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--olive); }
/* Un « + » fin qui devient « − » à l'ouverture. */
.faq summary::before, .faq summary::after {
  content: '';
  position: absolute;
  right: .4rem; top: 50%;
  width: 13px; height: 1px;
  background: var(--rose-deep);
  transition: transform .3s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p {
  margin: 0 0 1.3rem;
  padding-right: 2.6rem;
  color: var(--ink-soft);
  animation: unfold .35s ease both;
}
@keyframes unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Pied de page ────────────────────────────────────────────────────────── */

.footer {
  padding: clamp(3.5rem, 8vw, 5rem) var(--gutter) clamp(4.5rem, 9vw, 5.5rem);
  background: var(--olive-deep);
  color: var(--ivory);
  text-align: center;
}
.footer-mark { width: 92px; margin: 0 auto 1.4rem; }
.footer-mark svg { width: 100%; height: auto; display: block; }
.footer-names {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 650;
  font-stretch: var(--condensed);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 .6rem;
}
.footer-names em { color: var(--rose-pale); font-style: normal; font-weight: 250; }
.footer-date {
  font-size: .72rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .28em;
  color: var(--butter);
  margin: 0 0 1.8rem;
}
.footer-small { font-size: .9rem; opacity: .7; margin: 0; }
.footer a { color: var(--ivory); text-decoration-color: rgba(251, 248, 240, .4); text-underline-offset: .2em; }

/* ── Sélecteur de versions (temporaire) ──────────────────────────────────── */

.switch {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 600;
  max-width: calc(100vw - 2rem);
  background: color-mix(in srgb, var(--ivory) 95%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 30px -16px rgba(56, 54, 43, .5);
  backdrop-filter: blur(8px);
  font-size: .62rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.switch summary {
  cursor: pointer;
  list-style: none;
  padding: .6rem .9rem;
  color: var(--olive-deep);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.switch summary::-webkit-details-marker { display: none; }
.switch summary::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-135deg) translateY(-2px);
  transition: transform .2s ease;
}
.switch[open] summary::after { transform: rotate(45deg) translateY(-2px); }
.switch-panel { display: grid; gap: .15rem; padding: 0 .35rem .35rem; }
.switch-group { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; }
.switch-label { width: 4.4rem; padding-left: .55rem; color: var(--rose-deep); }
html:not([data-titre="vintage"]):not([data-titre="std"]) .switch-group--teinte,
html:not([data-titre="vintage"]) .switch-group--police,
html:not([data-titre="vintage"]):not([data-titre="edito"]) .switch-group--image,
html:not([data-titre="edito"]) .switch-group--edito,
html:not([data-version="fond"]) .switch-group--note { display: none; }
.switch-group--edito .switch-label { line-height: 1.2; }
.switch button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: .55rem .7rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.switch button:hover { color: var(--olive-deep); background: var(--butter-pale); }
.switch button[aria-pressed="true"] { color: var(--ivory); background: var(--olive); }
@media (max-width: 480px) {
  /* Sur téléphone : pas d'étiquettes, juste deux rangées de boutons séparées d'un filet. */
  .switch-label { display: none; }
  .switch-group + .switch-group { border-top: 1px solid var(--line); padding-top: .15rem; }
  .switch button { padding: .55rem .6rem; }
}

/* ── « Un petit mot » : la boîte à messages, sur fond Lima Bean Green ─────────── */
.mot {
  background: var(--lima);
  color: var(--jaune);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter);
}
.mot-inner { max-width: 560px; margin: 0 auto; }
.mot .mot-eyebrow { color: var(--jaune); font-size: clamp(1.2rem, 2.6vw, 1.9rem); margin-bottom: 1.4rem; white-space: nowrap; }
/* Sur téléphone, « Un truc à nous dire ? » doit tenir sur UNE ligne : taille et espacement
   suivent la largeur de l'écran. */
@media (max-width: 640px) {
  .mot .mot-eyebrow { font-size: 4.3vw; letter-spacing: .16em; margin-inline: -.5rem; }
}
.mot-title { color: var(--jaune); font-weight: 600; margin-bottom: .7rem; }
.mot-lead { color: #f4f0cf; margin-bottom: 2rem; }

.mot-form { display: grid; gap: 1.1rem; text-align: left; }
.mot-field { display: grid; gap: .45rem; }
.mot-label {
  font-size: .66rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--jaune);
}
.mot-label em { font-style: normal; font-weight: 400; font-stretch: 100%; letter-spacing: 0; text-transform: none; font-size: 1.35em; opacity: .9; }
.mot-form input,
.mot-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--jaune);
  border: 1px solid transparent;
  border-radius: 1px;
  padding: .85rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mot-form textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.mot-form input:focus,
.mot-form textarea:focus { outline: none; border-color: var(--lima-dark); box-shadow: 0 0 0 3px rgba(252, 248, 192, .45); }
.mot-form [aria-invalid="true"] { border-color: var(--holly); box-shadow: 0 0 0 2px var(--holly); }
.mot-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mot-btn {
  justify-self: center;
  margin-top: .4rem;
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--lima-dark);
  padding: 1.1rem 3rem;
}
.mot-btn:hover, .mot-btn:focus-visible { background: #fff; border-color: #fff; color: var(--lima-dark); }
.mot-btn[disabled] { opacity: .6; cursor: progress; }
.mot-status { min-height: 1.5em; margin: 0; text-align: center; color: var(--jaune); font-weight: 500; }
.mot-status.is-error { color: #fff; }

/* ── La musique : un bouton discret en haut à droite, sur toute la page ─────── */
.music-btn {
  position: fixed;
  top: max(.9rem, env(safe-area-inset-top));
  right: max(.9rem, env(safe-area-inset-right));
  z-index: 700;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .95rem .55rem .75rem;
  font: inherit;
  font-size: .64rem;
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jaune);
  background: rgba(30, 28, 20, .42);
  border: 1px solid rgba(252, 248, 192, .45);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.music-btn:hover, .music-btn:focus-visible { background: rgba(30, 28, 20, .6); border-color: var(--jaune); }
:not([data-mode="teaser"]) > body .music-btn { top: 5.2rem; }
.music-ico { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.music-note { width: 15px; height: 15px; }
.music-bars { display: none; align-items: flex-end; gap: 2px; height: 13px; }
.music-bars i { display: block; width: 2.5px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.music-bars i:nth-child(2) { animation-delay: -.35s; }
.music-bars i:nth-child(3) { animation-delay: -.7s; }
.music-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.music-btn.is-playing .music-note { display: none; }
.music-btn.is-playing .music-bars { display: flex; }
.music-btn.is-loading { opacity: .75; cursor: progress; }
@media (max-width: 480px) { .music-btn { padding: .5rem .8rem .5rem .65rem; font-size: .6rem; } }

/* ── Mode « teaser » : la page Save the date ─────────────────────────────────
   Activé par TEASER = true dans le script du <head>. Le menu et les sections pas encore prêtes
   sont cachés ; le hero prend tout l'écran, suivi du compte à rebours et de la section « Le lieu »,
   réduite à sa première carte (« À une heure de Paris »). Les réglages Vidéo et Boutons n'ont plus d'effet. */
[data-mode="teaser"] .nav,
[data-mode="teaser"] .skip,
[data-mode="teaser"] main > :not(.hero):not(.countdown):not(#lieu):not(#mot),
[data-mode="teaser"] .card--plus-tard,
[data-mode="teaser"] .footer,
[data-mode="teaser"] .switch-group--video,
[data-mode="teaser"] .switch-group--boutons { display: none; }
[data-mode="teaser"][data-version="fond"] .hero { min-height: 100vh; min-height: 100svh; }
[data-mode="teaser"] #lieu .cards { grid-template-columns: minmax(0, 560px); justify-content: center; }
[data-mode="teaser"] #lieu .card { text-align: center; }
[data-mode="teaser"] #lieu .card-ico { margin-inline: auto; }
[data-mode="teaser"] #lieu .card h3::after { left: 50%; margin-left: -.9rem; }

/* ── Apparition au scroll ────────────────────────────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .btn, .switch, .film-toggle, .hero-film, .music-btn { display: none !important; }
  body { background: #fff; }
}