/* =========================================================================
   Estelle & Théo — 11 & 12 septembre 2027, Le Rocher, Lumio.
   Direction artistique établie par les mariés (Canva, août 2026).

   Trois polices reprises de leur maquette :
     Pinyon Script  — leurs prénoms, tels quels dans le fichier d'origine
     Allura         — remplace New Icon Script (exclusive à Canva) pour les
                      titres de section : proportions et graisse les plus
                      proches parmi les fontes libres, et assez robuste pour
                      les noms d'hôtels qui sont dans ce même script.
     Bodoni Moda    — remplace Bauer Bodoni Pro (commerciale). Corps de texte,
                      petites capitales espacées, et l'italique qui tient les
                      deux lignes réglées en Fraunces dans la maquette.
   ========================================================================= */

:root {
  /* v5 (13 septembre) : la charte passe du pétrole au bleu ciel. « petrole »
     reste le nom de la variable pour ne pas réécrire 40 règles : c'est le
     bleu des textes sur fond blanc, relevé dans leur PDF. */
  --petrole: #398ebd;
  --petrole-fonce: #2b78a6;
  --petrole-clair: #8ab9d6;
  --bleu: #238fc4;                 /* fond des sections, relevé sur leur site */
  --rose: #edb8b1;                 /* corail choisi par Estelle (16/09) */
  --encre: #30566f;                /* bleu profond du texte sur le corail */
  --creme: #ffffff;
  --creme-2: #f7f7f7;
  --beige: #eee9e3;
  --champ: #e6f1f7;                 /* lignes d'options du formulaire, leur maquette */
  --trait: #cfd8da;

  --script: "Imperial Script", "Snell Roundhand", cursive;
  --fraunces: "Fraunces", "Bodoni Moda", serif;
  --main: "Pinyon Script", "Snell Roundhand", cursive;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;

  --mesure: 33rem;
  /* Titres et prénoms : 1 sur ordinateur, 0,84 sur téléphone (mesuré). */
  --k: 1px;          /* largeur de lecture du texte courant */
  --large: 74rem;           /* largeur maximale des grilles */
  --air: clamp(3rem, 6.5vw, 5.5rem);      /* leurs sections : titre à ~110 px du haut */
}

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

html {
  /* clip et non hidden : hidden casserait tout position:sticky descendant. */
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--petrole);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  font-size: clamp(1.03rem, .85rem + .6vw, 1.33rem);   /* 16,5 → 21,3 px */
  letter-spacing: .05em;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement : premier élément focalisable de la page. */
.saut {
  position: absolute; left: -9999px;
  background: var(--creme); color: var(--petrole);
  padding: .8rem 1.2rem; z-index: 99;
}
.saut:focus { left: 1rem; top: 1rem; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Blocs ---------------------------------------------------------------- */

.bloc {
  padding: var(--air) clamp(1.25rem, 5vw, 3rem);
}
.bloc-inner { max-width: var(--large); margin-inline: auto; }
.prose { max-width: var(--mesure); margin-inline: auto; text-align: center; }
.prose p + p { margin-top: 1.5em; }

.bleu    { background: var(--bleu);    color: var(--creme); }
.creme   { background: var(--creme);   color: var(--petrole); }

/* --- Titres --------------------------------------------------------------- */

/* Palette v3 (04/09) : titres bleu clair sur les sections pétrole, corail sur
   les sections blanches. Nota : le corail sur blanc rend ~2,6:1, sous le seuil
   3:1 des grands textes — choix de leur maquette, conservé tel quel. */


.sur-titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.67rem);
  letter-spacing: .08em;
  text-indent: .08em;              /* compense l'interlettre sur le dernier signe */
  text-transform: uppercase;
  margin: 0 0 .3em;
  text-align: center;
}

.titre {
  font-family: var(--script);
  font-weight: 400;
  /* 14 vw : « L'invitation » chez eux fait 62 % de la largeur du téléphone,
     « Le lieu du mariage » 78 % sur UNE ligne — Allura est plus large que
     leur script, 14 vw est le plus grand corps qui garde ce titre entier. */
  --t: 83;                          /* 40 pt × 1,334 × 1,55 (Imperial Script) */
  font-size: calc(var(--t) * var(--k));
  line-height: 1.05;
  margin: 0 0 .45em;
  text-align: center;
  text-wrap: balance;
  /* Allura porte de longues hampes ; sans ça le « g » touche le paragraphe. */
  padding-bottom: .12em;
}
.titre--petit { --t: 58; }

/* Titres en New Icon Script : vectorisés depuis leur maquette (comme
   « Vectoriser » dans Canva). La police n'est jamais servie, seulement les
   contours des mots du design. --w = largeur en unités de page (1024).
   Mobile : ,2857 vw par unité — « L'invitation » = 63 % de l'écran, comme
   dans leur aperçu mobile ; ordinateur : 1 unité = 100vw/1024. */
.titre img, .hotel-nom img, .noces-fin img, .bandeau-date img, .pied-noms img,
.hero-dates img, .lieu-nom img, .coord img, .jour img, .horaire-nom img, .programme-note img,
.sur-titre img, .vol-ligne img, .trajet-titre img, .btn-img img {
  display: block; margin: 0 auto; height: auto;
  width: min(calc(var(--w) * .2857vw), 88vw);
}
/* Boutons : leurs images Canva (ombre comprise), texte porté par l'alt. */
/* Aucun soulignement : le rectangle et l'ombre suffisent à dire « cliquable ».
   Les images elles-mêmes sont nettoyées par build/boutons.py. */
.btn-img { display: inline-block; line-height: 0; border-radius: 2px; text-decoration: none; }
.btn-img:hover img, .btn-img:focus-visible img { filter: brightness(1.07); }
.btn-img:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
/* Hero : halo clair au ras des lettres, pour ne pas blanchir l'aquarelle. */
.hero-dates img { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(255,255,255,.9)); }
.hero-dates .hero-an { display: flex; justify-content: center; margin-top: .55em; }
.hero-dates .hero-an img { margin: 0; }
.titre img + img { margin-top: .12em; }        /* Questions / fréquentes empilés */
@media (min-width: 48rem) {
  .titre img, .hotel-nom img, .noces-fin img, .bandeau-date img, .pied-noms img,
  .hero-dates img, .lieu-nom img, .coord img, .jour img, .horaire-nom img, .programme-note img,
  .sur-titre img, .vol-ligne img, .trajet-titre img, .btn-img img { width: min(calc(var(--w) * 100vw / 1024), 88vw); }
  .titre img + img { display: inline-block; margin: 0 0 0 .35em; vertical-align: baseline; }
  .titre img:first-child:not(:only-child) { display: inline-block; }
}
@media (max-width: 48rem) { :root { --k: .84px; } }

.jour {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 1.92rem);
  letter-spacing: .04em;
  margin: 0 0 1.9em;
  text-align: center;
}

/* Petites capitales espacées : libellés d'horaire, dates, mentions. */
.capitales {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  font-size: clamp(.86rem, .78rem + .32vw, 1rem);
  line-height: 1.9;
}

.italique { font-style: italic; }

/* --- Boutons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, .95rem + .25vw, 1.12rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .7rem 2.1rem;
  min-height: 2.75rem;             /* 44 px : cible tactile */
  border: 0; border-radius: 2px;
  cursor: pointer;
  color: var(--encre);             /* Estelle : texte des boutons en bleu profond, 4,5:1 sur le corail */
  /* Estelle : le rose de leur maquette, uni, sans contour ni bande d'une
     autre couleur. Le relief vient uniquement de l'ombre portée, comme un
     bouton qui se détache de la page ; il se soulève au survol et s'enfonce
     au clic. */
  background: var(--rose);
  box-shadow: 0 .55rem 1.1rem rgba(30, 50, 80, .28), 0 .15rem .35rem rgba(30, 50, 80, .16);
  font-weight: 600;                /* 15/09 : « on les lit pas assez bien », le blanc paraissait beige */
  letter-spacing: .06em;
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-.1rem); box-shadow: 0 .75rem 1.4rem rgba(30, 50, 80, .3), 0 .2rem .4rem rgba(30, 50, 80, .16); }
.btn:active { transform: translateY(.12rem); box-shadow: 0 .15rem .4rem rgba(30, 50, 80, .22); }
.btn:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn--plein, .btn--clair { min-width: 0; }

.btn-ligne { margin-top: 1.8rem; text-align: center; }

/* --- 2. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  /* Cadre au ratio de leur maquette (1024/813). Sur téléphone le plancher
     l'emporte, et le rapport s'approche alors de celui de l'aquarelle : elle
     est montrée presque en entier au lieu d'être rognée sur les côtés. */
  /* width:100% est indispensable : avec une hauteur relevée par min-height,
     aspect-ratio recalculait la LARGEUR à partir d'elle et le hero débordait
     la page de 250 px sur téléphone. */
  width: 100%;
  /* Mesuré sur leur site publié : le hero fait 1214 px de haut pour 1512 de
     large, soit exactement le ratio de la maquette. Pas de plafond en svh :
     l'aquarelle doit être vue presque entière, quitte à dépasser la fenêtre —
     c'est le parti pris de leur mise en page. */
  aspect-ratio: 1024 / 813;
  min-height: min(60svh, 560px);
  display: grid;
  justify-items: center;
  align-content: start;
  /* 12,7 % de la largeur = 16 % de la hauteur quand le ratio gouverne : c'est
     là que leur bloc de texte commence. */
  padding: 11.5% 1.25rem clamp(1.5rem, 5svh, 3rem);
  text-align: center;
  color: var(--petrole);
}
/* Relevé sur leur rendu mobile : le hero fait 256 × 606, l'aquarelle y est
   montrée sur toute sa hauteur (rognée sur les côtés), le texte commence à
   12 % et le couple occupe le bas. */
/* Les sélecteurs sont préfixés par .hero : ce bloc précède les règles de base
   des enfants dans la feuille, il perdrait sinon la cascade. */
@media (max-width: 48rem) {
  .hero { aspect-ratio: 256 / 606; min-height: 0; padding-top: 25.5%; overflow: hidden; }
  /* Cadrage retrouvé par corrélation sur leur rendu : l'aquarelle est agrandie
     de 1,42 × par rapport au simple « cover », ancrée en bas, centrée. */
  .hero .hero-fond { object-position: 50% 100%; transform: translateY(4.3%) scale(1.42); transform-origin: 50% 100%; }
  .hero .hero-noms { font-size: 21.4vw; line-height: .98; margin-bottom: .5em; }
  .hero .hero-texte { max-width: none; }
  .hero .hero-lieu { margin-top: 1.25em; }
}
.hero-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 77%;
  filter: contrast(1.07) saturate(1.06);   /* 15/09 : « un peu pâlichonne » */
}
/* Le lavis n'est plus simulé en CSS : il est CUIT dans hero.webp, à partir
   d'une transformation ajustée sur le PNG exporté depuis Canva — la seule
   référence fidèle. L'export PDF, lui, neutralise les couleurs : c'est sur lui
   que j'avais calibré, d'où une image trop froide.
   Bande visible relevée sur leur rendu : 28 % → 91,5 % de la hauteur, soit
   object-position 77 % pour un cadre au ratio 1,26. */
.hero-texte { max-width: min(100%, 22rem); }

.hero-noms {
  font-family: var(--main);
  font-weight: 400;
  font-size: clamp(3.2rem, 1.4rem + 8vw, 6.4rem);
  line-height: 1.0;
  margin: 0 0 .45em;
  /* v3 : l'aquarelle n'est presque plus voilée (17 % au lieu de 73 %) — la
     lisibilité repose sur un halo clair au ras des lettres, pas sur un voile. */
  color: var(--petrole-fonce);           /* un ton plus profond que leur bleu : lisibilité */
  text-shadow: 0 0 6px #fff, 0 0 12px rgba(255,255,255,.95), 0 0 28px rgba(255,255,255,.8);
}
/* Lisibilité (demande de Théo) : une lueur blanche diffuse derrière le bloc
   de texte, qui s'éteint vers les bords sans blanchir l'aquarelle. */
.hero-texte { position: relative; }
.hero-texte::before {
  content: ""; position: absolute; z-index: -1;
  inset: -12% -18%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.78) 0%, rgba(255,255,255,.55) 42%, rgba(255,255,255,0) 76%);
  pointer-events: none;
}
.hero-noms .esp { display: block; font-size: .82em; }
.hero-dates {
  font-weight: 700;
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 12px rgba(255,255,255,.9);
  /* Mesuré sur les pixels rendus : sur l'aquarelle, la ligne plafonne à
     4,3:1 — sous les 4,5:1 exigés du texte courant. Passée au-dessus de
     18,66 px en gras, elle relève du « grand texte », dont le seuil est 3:1,
     et gagne au passage la lisibilité qui manquait vraiment sur téléphone. */
  font-size: clamp(1.3rem, 1.05rem + 1.05vw, 1.67rem);   /* 21 → 26,7 px */
  line-height: 1.3;
  margin: 0;
}
.hero-filet {
  font-size: clamp(1.22rem, 1rem + 1.05vw, 1.5rem);
  display: flex; align-items: center; justify-content: center;
  gap: .9rem;
  line-height: 1.3;
  margin: 0 0 1.6em;
}
/* « 2027 » entre deux filets, sur les deux formats. */
.hero-an { display: inline-flex; align-items: center; gap: .9rem; }
.hero-an::before, .hero-an::after { content: ""; width: clamp(2rem, 7vw, 3.4rem); height: 1px; background: currentColor; opacity: .6; box-shadow: 0 0 3px 1px rgba(255,255,255,.8); }
.hero-filet::before, .hero-filet::after {
  content: ""; height: 1px; width: clamp(2rem, 7vw, 3.4rem);
  background: currentColor; opacity: .6;
}
.hero-lieu, .decouvrez { font-family: var(--fraunces); font-style: italic; }
.hero-lieu img { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.decouvrez { font-weight: 700; margin-top: 2.2em; }
.hero-lieu {
  /* Mesurée sur les pixels rendus, cette ligne plafonnait à 4,27:1 — juste
     sous les 4,5:1 du texte courant. Le pétrole foncé, déjà dans la palette,
     la porte à 5,5:1 sans que la nuance se voie à 18 px. */
  color: var(--petrole-fonce);
  font-style: italic;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.375rem);     /* 17 → 22 px */
  letter-spacing: .12em;
  margin: 0;
}

/* --- 4. Le lieu : illustration + texte ------------------------------------ */

.lieu { padding: 0; }
.lieu-grille {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.lieu-illu {
  /* 51 % : mesuré sur leur maquette (voile clair à 49 %). Le crème du bloc
     joue le rôle du fond. */
  opacity: .70;      /* v5 : voile blanc de 30 %, mesuré sur leur site */
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  max-height: 46svh;
}
/* Leur rendu téléphone : l'aquarelle en retrait de 4 % de chaque côté,
   rognée en paysage sur la table et la mer. */
.lieu-cadre { display: contents; }
@media (max-width: 56rem) {
  /* Téléphone : la photo était collée au bloc bleu et rognée en bandeau.
     On lui laisse de l'air au-dessus, la même marge que sur les côtés, et un
     cadrage plus haut qui montre la table entière et les rochers. */
  /* Estelle : collée en haut, comme sur leur site. Cadre presque carré, du
     feuillage aux chaises, marges latérales de 4 % comme chez eux. */
  .lieu { padding-top: 0; }
  .lieu-illu {
    width: 92%; height: auto; max-height: none; margin: 0 auto;
    aspect-ratio: 20 / 19; object-position: 50% 12%;
  }
  .lieu-texte { padding-top: clamp(3rem, 10vw, 4.5rem); }
}
.lieu-texte { padding: var(--air) clamp(1.25rem, 5vw, 3rem); }
@media (min-width: 56rem) {
  .lieu-grille { grid-template-columns: 1fr 1fr; }
  .lieu-illu { max-height: 40rem; object-position: 50% 70%; }   /* 641 px chez eux, cadré sur la table */
  #lieu .prose { max-width: 24rem; }
}

#lieu .titre { --t: 66; }              /* 31,9 pt */
#lieu strong { font-size: 1.0em; letter-spacing: .1em; }
.lieu-nom + .coord { margin-top: 0; }
.coord {
  font-variant-numeric: lining-nums;
  letter-spacing: .02em;
}

/* --- 5. Le programme ------------------------------------------------------ */

.horaires {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Trois colonnes fermes, comme la maquette. En auto-fit, la largeur
     minimale faisait basculer le samedi à deux colonnes dès 500 px et
     « Dîner & soirée » se retrouvait seul sur une deuxième ligne. */
  grid-template-columns: repeat(3, minmax(0, 10.5rem));
  gap: clamp(.7rem, 2.5vw, 1.6rem);
  justify-content: center;
  margin-inline: auto;
  justify-items: center;
}
.horaires--un { grid-template-columns: minmax(0, 14rem); }
@media (max-width: 40rem) {
  /* Comme sur leur site : les trois moments côte à côte, pas empilés. */
  .horaires { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .horaires--un { grid-template-columns: minmax(0, 14rem); }
  .horaire { max-width: none; }
  .horaires:not(.horaires--un) .horaire-nom img { width: min(calc(var(--w) * .2987vw), 27vw) !important; }
}

.horaire { text-align: center; }
/* Les pictogrammes sont des masques : leur canal alpha porte le dessin, la
   couleur vient du CSS. Un PNG en niveaux de gris donnerait un rectangle plein
   — mask-image lit l'alpha, jamais la luminance. */
.horaire-ico {
  display: block;
  width: clamp(5.5rem, 8.6vw, 7.4rem);
  height: clamp(5.5rem, 8.6vw, 7.4rem);
  margin: 0 auto 2.2rem;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.horaire-nom, .horaire-heure {
  display: block;
  font-size: clamp(.94rem, .8rem + .55vw, 1.19rem);
  line-height: 1.4;
}
.horaire { max-width: 9.5rem; }
.horaire-heure { white-space: nowrap; }
.jour--dimanche { margin-top: clamp(3rem, 7vw, 4.5rem); }

.programme-note {
  margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
  text-align: center;
  font-style: italic;
  letter-spacing: .04em;
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.35rem);
}

/* --- 6. RSVP : la carte dans son enveloppe -------------------------------- */
/* Repères relevés dans leur PDF : la composition fait 42,6 % de la largeur de
   la scène, commence à 16,5 % de sa hauteur et finit à 79,8 % ; la scène est
   au ratio 4/3. Sur téléphone, leur rendu l'élargit à ~92 %. */

.rsvp-scene {
  position: relative;
  isolation: isolate;
  background: var(--bleu);
  padding: clamp(2.5rem, 8vw, 4rem) 1.25rem clamp(3rem, 9vw, 4.5rem);
  text-align: center;
}
/* Composition = enveloppe + fleurs + carte, dans une boîte de 776,1 × 543 unités
   (relevée dans leur PDF). Chaque pièce est placée en % de cette boîte, donc la
   scène reste identique à toute largeur. */
.rsvp-compo { width: min(100%, 44rem); margin: 0 auto; }
@media (max-width: 48rem) { .rsvp-compo { width: calc(100% + 2.5rem); max-width: none; margin-inline: -1.25rem; } }   /* Théo : « un peu petit » */
/* Composition « éléments marins » de la maman de Théo (15/09), détourée de son
   fond : enveloppe, carte et texte en une seule image, rien ne recouvre rien. */
.rsvp-marin { display: block; width: 100%; height: auto; }
.rsvp-scene .btn-ligne { margin-top: clamp(1.5rem, 4vw, 2.2rem); }

/* --- 7. Où loger ---------------------------------------------------------- */

.hotels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 21rem));
  justify-content: center;
  gap: clamp(2.4rem, 4vw, 3rem);
  margin-top: clamp(3rem, 7vw, 4.5rem);
}
.hotel { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hotel p { max-width: 20rem; margin: 0; font-size: 1.05em; }
.hotel-route { font-weight: 700; }
.hotel-atout { margin-bottom: 1.4rem !important; }
.hotel-nom {
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(38 * var(--k));        /* 20,3 pt × 1,39 */
  line-height: 1.1;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hotel dl { margin: 0 0 1.6rem; }
.hotel dt { font-weight: 700; }
.hotel dd { margin: 0; }
.hotel-atout { font-style: italic; font-size: .82em; }                  /* 13,8 pt */
.hotel .btn { min-width: 12rem; text-align: center; }
.hotel .btn { margin-top: auto; align-self: center; }

/* --- 8. Le transport ------------------------------------------------------ */

.avion {
  display: block;
  width: clamp(9.75rem, 13.7vw, 11.7rem);
  aspect-ratio: 360 / 200;
  margin: -.95rem auto 1.55rem;          /* même air au-dessus et en dessous */
  background: currentColor;
  -webkit-mask: url("/images/da/ico-avion.webp") center / contain no-repeat;
  mask: url("/images/da/ico-avion.webp") center / contain no-repeat;
}
.trajet-titre {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.05em;
  margin: 1.6rem 0 0;
}
#transport .prose { max-width: 37rem; }   /* leur mesure : 584 px à 1366 */
#transport .vol-ligne { margin-top: 0; }
/* « L'AVION » et la ligne de vol se suivent sans blanc chez eux. */
#transport .sur-titre { margin-bottom: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); }   /* 21 pt */
.vol-ligne {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.5rem);
  letter-spacing: .06em;
  line-height: 1.3;
  margin: 0 0 1.3em;
}
.vols { margin: 0; padding: 0; list-style: none; font-style: italic; }

/* --- 9. Questions fréquentes ---------------------------------------------- */

.faq-scene {
  position: relative;
  isolation: isolate;
  color: var(--petrole);
}
.faq-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Le voile dérive du crème : une valeur écrite à la main dérivait de quelques
   unités et la jointure avec le bloc suivant se voyait. */
.faq-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(250, 251, 250, .62);    /* 15/09 : « on voit pas assez la photo », voile ramené de 79 à 62 % */
}
/* Présentation refaite le 14/09 sur la remarque de la mère de Théo : plus de
   cadres ni de noir, une colonne douce sur un voile blanc aux bords fondus,
   les questions en bleu, les réponses en bleu-gris, un filet rose entre elles. */
.faq-scene .bloc { position: relative; }
.faq-grille {
  position: relative;
  max-width: 36rem;
  margin: clamp(1.4rem, 5vw, 2.4rem) auto 0;
  padding: clamp(.6rem, 2vw, 1.2rem) clamp(.4rem, 3vw, 1.6rem);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 2.5rem 2rem rgba(255, 255, 255, .55);   /* bords fondus */
  border-radius: 1rem;
}
.faq-item {
  padding: clamp(.9rem, 3vw, 1.4rem) 0;
  text-align: center;
}
.faq-item + .faq-item { position: relative; }
/* Filet rose avec un point au centre, entre deux questions */
.faq-item + .faq-item::before {
  content: ""; display: block;
  /* Estelle : juste un trait, sans le point ; un peu plus épais et plus
     saturé que le Pantone 162 C, qui paraissait terne en 1 px sur la photo. */
  width: clamp(7rem, 30%, 11rem); height: 2px;
  margin: 0 auto clamp(.9rem, 3vw, 1.4rem);
  background: var(--encre);
}
.faq-item h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  color: #2b6a99;
  letter-spacing: .01em;
  line-height: 1.2;
  margin: 0 0 .45rem;
  text-wrap: balance;
}
.faq-item p {
  margin: 0; line-height: 1.45;
  font-size: clamp(1rem, .92rem + .35vw, 1.15rem);
  color: #5c7a8c;
  max-width: 30rem; margin-inline: auto;
}
.br-mobile { display: none; }
@media (max-width: 48rem) { .br-mobile { display: inline; } }

/* --- 10. Voyage de noces + merci ------------------------------------------ */

.noces-scene {
  position: relative;
  isolation: isolate;
  color: var(--petrole);
  text-align: center;
  padding: clamp(3rem, 9vw, 4.5rem) 1.25rem clamp(3rem, 8vw, 4rem);
}
.noces-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.noces-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 254, .843);   /* v5 : mesuré sur leur site */
}
.noces-fin {
  font-family: var(--script);
  font-size: calc(49 * var(--k));        /* 27 pt × 1,36 */
  text-align: center;
  margin: clamp(2rem, 5vw, 2.6rem) 0 0;
  line-height: 1;
}

/* Ratios relevés : 1366/941 sur ordinateur, 383/730 sur téléphone ; le bloc de
   texte occupe la moitié basse, les visages restent dans la moitié haute. */
.merci-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 383 / 730;
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 0 1.25rem 10%;
  overflow: hidden;
  text-align: center;
  color: var(--petrole);
}
@media (min-width: 48rem) { .merci-scene { aspect-ratio: 1366 / 941; padding-bottom: 4.5%; } }
.merci-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Leur cadre est resserré sur le couple : ×1,5 sur ordinateur, ×1,9 sur
   téléphone par rapport au simple « cover », les visages dans le tiers haut. */
@media (max-width: 48rem) {
  .merci-fond { transform: scale(1.25); transform-origin: 50% 40%; object-position: 50% 35%; }
}
/* Voile relevé sur le PNG natif : 62,3 % de blanc. */
.merci-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(193, 205, 221, .50);    /* v5 : voile gris-bleu, ajusté sur leur rendu */
}
.merci-scene { color: #fff; }
/* Leur texte blanc porte une ombre grise diffuse (effet Canva, dessiné en
   plusieurs copies dans le PDF) : sans elle, il se perd sur le ciel et la mer. */
.merci-scene p { text-shadow: 0 0 2px rgba(30, 45, 60, .55), 0 1px 7px rgba(30, 45, 60, .5); }
.merci-scene .prose { max-width: 26rem; }   /* leur mesure : ~420 px */
.merci-scene p:not(.merci-noms) {
  font-weight: 700;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.56rem);
  line-height: 1.35;
}
.merci-noms {
  font-family: var(--main);
  font-size: calc(68 * var(--k));        /* 50,7 pt */
  line-height: 1;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
}

/* --- Page RSVP ------------------------------------------------------------ */

.bandeau {
  background: var(--bleu); color: var(--creme);
  padding: 0 1.25rem;
  text-align: center;
}
/* Page merci : la composition marine sans texte, la carte porte un texte
   vivant, incliné comme elle (3,9°). */
.merci-page { display: grid; place-items: center; align-content: center; padding: clamp(2rem, 6vw, 4rem) 1.25rem; text-align: center; }
.rsvp-compo--merci { position: relative; container-type: inline-size; }
.merci-carte {
  position: absolute; left: 37.5%; top: 47%; width: 33%;
  color: var(--petrole); transform: rotate(3.9deg);
}
.merci-carte-titre { font-family: var(--script); font-weight: 400; font-size: clamp(2rem, 9cqw, 3.4rem); line-height: 1; margin: 0 0 .25em; }
.merci-carte p { margin: 0; font-size: clamp(.8rem, 2.6cqw, 1rem); }
.merci-carte-corse { font-style: italic; margin-top: .3em !important; }
.blanc { background: #fff; color: var(--petrole); }
.rose  { background: var(--rose); color: var(--encre); }
.btn--blanc { background: #fff; text-shadow: none; }
.bandeau-date { font-family: var(--script); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem); line-height: 1; margin: .1em 0 0; }
.bandeau-coeur {
  display: block;
  width: clamp(3.4rem, 9vw, 4.6rem); height: clamp(3rem, 8vw, 4.1rem);
  background: currentColor;
  -webkit-mask: url("/images/da/coeur.webp") center / contain no-repeat;
  mask: url("/images/da/coeur.webp") center / contain no-repeat;
  flex: none;
}
.coupes {
  display: block;
  width: clamp(4.2rem, 12vw, 6rem); height: clamp(3.6rem, 10vw, 5.1rem);
  margin: 0 auto clamp(1.4rem, 4vw, 2rem);
  background: currentColor;
  -webkit-mask: url("/images/da/coupes.webp") center / contain no-repeat;
  mask: url("/images/da/coupes.webp") center / contain no-repeat;
}

.compte-scene {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  padding: clamp(2.5rem, 7vw, 4rem) 1.25rem;
  text-align: center; color: var(--creme);
}
.compte-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 76%;
}

.compte {
  display: flex; justify-content: center;
  gap: clamp(.9rem, 3.5vw, 2rem);
  margin: 1.4rem 0 2rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.compte-groupe { display: block; text-align: center; }
.compte-groupe b {
  display: block;
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.2rem);
  line-height: 1.05;
}
.compte-groupe i {
  display: block;
  font-style: normal;
  font-size: clamp(.72rem, .64rem + .26vw, .84rem);
  letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase;
  opacity: .92;
}

/* --- Formulaire ----------------------------------------------------------- */

.form { max-width: 34rem; margin: 0 auto; text-align: left; }
.champ { margin-bottom: 2rem; }
.champ > legend, .champ > label {
  display: block;
  font-weight: 700;
  margin-bottom: .7rem;
  line-height: 1.4;
  font-size: clamp(.98rem, .92rem + .3vw, 1.1rem);
}
fieldset.champ { border: 0; padding: 0; margin-inline: 0; }
/* Un <legend> porte un padding horizontal par défaut : les intitulés de groupe
   étaient décalés de quelques pixels par rapport aux <label> voisins. */
.champ > legend { padding-inline: 0; }

.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%;
  font: inherit;
  color: var(--petrole);
  background: #fff;
  border: 1.5px solid #8fbfd9;             /* leur maquette */
  padding: .8rem .9rem;
  min-height: 3rem;
  border-radius: 0;
}
.form textarea { min-height: 6rem; resize: vertical; }
.form input::placeholder { color: var(--petrole-clair); opacity: 1; }

.option {
  display: flex; align-items: center; gap: .8rem;
  background: var(--champ);
  padding: .85rem 1rem;
  min-height: 3rem;
  margin-bottom: .55rem;
  cursor: pointer;
  transition: background-color .2s;
}
.option:hover { background: #d6e8f2; }
.option input { flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--petrole); margin: 0; }
.option:has(input:checked) { background: #c9e0ee; }
.option:has(input:focus-visible) { outline: 2px solid var(--petrole); outline-offset: 2px; }

.aide { font-size: .9em; font-style: italic; margin: .5rem 0 0; }

.form .btn { width: 100%; text-align: center; margin-top: 1rem; }

.form-status { margin-top: 1rem; min-height: 1.5em; text-align: center; }
.form-status.error { color: #8c2f22; font-weight: 700; }
.erreur-bandeau {
  border: 2px solid #8c2f22; color: #8c2f22;
  padding: .9rem 1rem; margin-bottom: 1.5rem;
  font-weight: 700;
}

.piege { position: absolute; left: -9999px; }

/* Récapitulatif après envoi (chemin avec JavaScript). */
.recap { max-width: 34rem; margin: 0 auto; text-align: center; }
.recap h3 { font-family: var(--script); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); margin: 0 0 .4em; }
.recap dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; text-align: left; margin: 1.6rem 0; }
.recap dt { font-weight: 700; }
.recap dd { margin: 0; }
.recap-modifier {
  font: inherit; font-style: italic;
  background: none; border: 1px solid currentColor; color: inherit;
  padding: .8rem 1.6rem; min-height: 44px; cursor: pointer;
}
.corse { font-style: italic; margin: 0; }
.corse-glose { display: block; font-size: .8em; font-style: normal; opacity: .75; }

/* --- Pied ---------------------------------------------------------------- */

.pied {
  background: var(--rose); color: var(--encre);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 3.5rem) 1.25rem;
}
.pied p { margin: 0 0 .6rem; font-style: italic; }
.pied-noms {
  font-family: var(--script);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1;
  margin: .6rem 0 1.2rem;
}

/* --- Apparition au défilement --------------------------------------------- */
/* Chaque élément monte de 18 px en se révélant, avec un léger décalage entre
   voisins : c'est l'effet de leur maquette, où titres, textes et icônes
   apparaissent l'un après l'autre. Sans JavaScript, tout est visible. */
/* `translate` et non `transform` : la propriété se compose avec le centrage
   (translateX(-50 %)) des éléments positionnés sur ordinateur. */
/* Entre Théo (« que ça bouge pas trop ») et Estelle (« un peu, comme sur
   Canva ») : un fondu qui monte de 8 px, un demi-seconde, léger décalage
   entre les éléments d'une même section. */
.js .rv { opacity: 0; translate: 0 8px; }
.js .rv.vu { opacity: 1; translate: 0 0; transition: opacity .5s ease-out, translate .5s cubic-bezier(.2,.6,.2,1); transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; translate: none; } }

.js .reveal { opacity: 0; }
.js .reveal.vu {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* Enveloppe RSVP : chaque élément à sa place exacte du PDF, en unités de la
   composition (433,2 unités de large), donc identique à toute taille. */

/* ---- Téléphone : la règle de Canva -------------------------------------
   Relevée sur l'aperçu mobile de l'éditeur (6 éléments vérifiés) : chaque
   unité de la page ordinateur (1024) vaut 0,2987 % de la largeur de l'écran,
   textes, images et boutons compris. Les corps ci-dessous sont donc les
   corps du PDF × 0,2987 vw. */
@media (max-width: 48rem) {
  .titre img, .hotel-nom img, .noces-fin img, .bandeau-date img, .pied-noms img,
  .hero-dates img, .lieu-nom img, .coord img, .jour img, .horaire-nom img, .programme-note img,
  .sur-titre img, .vol-ligne img, .trajet-titre img, .btn-img img { width: min(calc(var(--w) * .2987vw), 92vw); }
  .hero .hero-noms { font-size: 16.4vw; }           /* « Estelle » = 46 % de l’écran, comme chez eux */
  .hero-lieu { font-size: 5.15vw; }                 /* 19,1 pt */
  #invitation .prose { font-size: 4.17vw; }         /* 14,7 pt */
  #lieu .prose { font-size: 4.11vw; }               /* 14,3 pt */
  #loger .prose { font-size: 3.90vw; }              /* 14 pt */
  #transport .prose, .vols { font-size: 3.94vw; }   /* 13,7 pt */
  .hotel p { font-size: 4.24vw; }                   /* 14,8 pt : minutes de route */
  .hotel .hotel-prix { font-size: 3.72vw; }         /* 13 pt */
  .hotel .hotel-atout { font-size: 3.07vw; }         /* 10,7 pt */
  .faq-item h3 { font-size: 4.42vw; }                /* 15,4 pt */
  .faq-item p { font-size: 3.78vw; }                /* 13,2 pt */
  #noces .prose { font-size: 4.5vw; }               /* Estelle : un peu plus petit */              /* 17,2 pt — « le texte des noces est petit » */
  /* Demande des mariés : le texte centré sur la photo et un peu plus petit.
     Les prénoms restent en bas, comme dans leur maquette. */
  .merci-scene p:not(.merci-noms) { font-size: 5vw; }
  .merci-scene { align-content: center; padding-bottom: 0; }
  .merci-noms { position: absolute; left: 0; right: 0; bottom: 6%; margin: 0; }
  .horaire-ico { width: 24vw; height: 24vw; margin-bottom: 1.4rem; }
  .horaires--un .horaire-ico { width: 30vw; height: 30vw; }
}

/* Champ conjoint désactivé : visible comme dans leur maquette, mais inerte
   tant que l'invité n'a pas indiqué venir accompagné. */
.champ--off { opacity: .45; }
.champ--off input { cursor: not-allowed; }

/* Page RSVP : le bloc du formulaire est crème chez eux (mesuré page 3),
   alors que les sections claires de la page d'accueil sont blanc pur. */



.hero-lieu img { display: block; margin: 0 auto; height: auto; width: min(calc(var(--w) * .2987vw), 92vw); }
@media (min-width: 48rem) { .hero-lieu img { width: min(calc(var(--w) * 100vw / 1024), 88vw); } }

/* --- Sommaire (demande de Théo) ------------------------------------------ */
.sommaire { position: fixed; top: max(.9rem, env(safe-area-inset-top)); right: max(.9rem, env(safe-area-inset-right)); z-index: 40; }
.sommaire-btn {
  width: 3rem; height: 3rem; border: 0; border-radius: 50%;
  background: #fff; color: var(--petrole);
  box-shadow: 0 .5rem 1rem rgba(20,60,90,.3), 0 .15rem .3rem rgba(20,60,90,.15);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sommaire-btn:active { transform: translateY(.1rem); box-shadow: 0 .15rem .5rem rgba(20,60,90,.25); }
.sommaire-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sommaire-icone, .sommaire-icone::before, .sommaire-icone::after {
  display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.sommaire-icone { position: relative; }
.sommaire-icone::before, .sommaire-icone::after { content: ""; position: absolute; left: 0; }
.sommaire-icone::before { top: -6px; } .sommaire-icone::after { top: 6px; }
.sommaire-btn[aria-expanded="true"] .sommaire-icone { background: transparent; }
.sommaire-btn[aria-expanded="true"] .sommaire-icone::before { transform: translateY(6px) rotate(45deg); }
.sommaire-btn[aria-expanded="true"] .sommaire-icone::after  { transform: translateY(-6px) rotate(-45deg); }
.sommaire-liste[hidden] { display: none; }
.sommaire-liste {
  position: absolute; top: calc(100% + .7rem); right: 0;
  min-width: 15rem; padding: .6rem 0;
  background: var(--bleu); color: #fff;
  border-radius: 4px;
  box-shadow: 0 .8rem 2rem rgba(20,60,90,.35);
  display: flex; flex-direction: column;
}
.sommaire-liste a {
  color: #fff; text-decoration: none;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .75rem 1.4rem;
  transition: background-color .15s;
}
.sommaire-liste a:hover, .sommaire-liste a:focus-visible { background: rgba(255,255,255,.16); outline: none; }
@media (max-width: 34rem) {
  .sommaire-liste { position: fixed; inset: 0; top: 0; right: 0; border-radius: 0; justify-content: center; align-items: center; padding: 4rem 1rem; }
  .sommaire-liste a { font-size: 1.15rem; padding: .9rem 1.5rem; }
  .sommaire-btn { position: relative; z-index: 1; }
  body.sommaire-ouvert { overflow: hidden; }
}
main [id] { scroll-margin-top: 0; }

/* En-tête du questionnaire : la même composition que sur le site. */
.bandeau .rsvp-compo { margin-block: 0; padding-block: clamp(1rem, 4vw, 2rem); }
/* Retour au site, juste sous le bouton d'envoi (Théo, 15/11). */
.retour-site { text-align: center; margin: .2rem 0 0; }
.retour-site a {
  display: inline-block; padding: .8rem 1rem; min-height: 44px;
  font-family: var(--serif); letter-spacing: .2em; text-transform: uppercase; font-size: .85rem;
  color: var(--encre); text-decoration: none;
}
.retour-site a:hover, .retour-site a:focus-visible { text-decoration: underline; }