/* =====================================================================
   INVITATION DE MARIAGE — FEUILLE DE STYLE PRINCIPALE
   ---------------------------------------------------------------------
   LES COULEURS SE CHOISISSENT DANS  js/config.js  :

       theme: 'or'          beige & or       (la version d'origine)
       theme: 'sauge'       vert & crème     (botanique, clair)
       theme: 'nuit'        bleu & platine   (chic, soirée)
       theme: 'terracotta'  terre & sable    (chaleureux, méditerranéen)

   Chaque palette est décrite plus bas dans un bloc [data-theme="…"].
   Les variables « …-rgb » ne servent qu'aux transparences : ce sont les
   mêmes couleurs, écrites en canaux R, G, B pour pouvoir faire varier
   l'opacité. Si vous modifiez une couleur, modifiez son « -rgb » aussi.
   ===================================================================== */

:root {
  /* --- Palette par défaut : OR (identique à la version d'origine) --- */
  --ivory:        #FBF8F3;
  --ivory-deep:   #F3EDE3;
  --gold:         #C1A265;
  --gold-light:   #E0CFA4;
  --gold-dark:    #9A7F49;
  --sage:         #8A9A8B;
  --ink:          #3A3733;
  --ink-soft:     #6B655D;
  --night:        #484036;   /* fond des sections sombres : brun taupe */
  --white:        #FFFFFF;
  --wa:           #25D366;
  --wa-dark:      #128C7E;

  --ivory-rgb:      251, 248, 243;
  --gold-rgb:       193, 162, 101;
  --gold-light-rgb: 224, 207, 164;
  --gold-shade-rgb:  90,  70,  34;   /* ombre chaude du sceau de cire */
  --sage-rgb:       138, 154, 139;
  --ink-rgb:         58,  55,  51;

  /* --night-rgb reste TRÈS sombre : il ne sert qu'aux voiles posés sur
     les photos et la vidéo, où il faut de la densité pour lire le texte.
     Le fond des sections sombres, lui, c'est --night (bien plus clair). */
  --night-rgb:       20,  18,  16;

  /* --- Typographie --- */
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Rythme --- */
  --space:      clamp(3.5rem, 9vw, 7rem);
  --radius:     2px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --shadow-sm:  0 2px 12px rgba(var(--ink-rgb), .07);
  --shadow-md:  0 12px 40px rgba(var(--ink-rgb), .12);
  --shadow-lg:  0 24px 70px rgba(var(--ink-rgb), .18);
}


/* =====================================================================
   LES QUATRE PALETTES
   ---------------------------------------------------------------------
   « gold » a gardé son nom dans tout le fichier : lisez-le simplement
   comme « la couleur d'accent », qui est verte, bleue ou terre selon la
   palette choisie. Rien d'autre à changer dans la feuille de style.
   ===================================================================== */

/* --- VERT SAUGE & CRÈME — botanique, clair et frais ----------------- */
[data-theme="sauge"] {
  --ivory:        #F8F7F2;
  --ivory-deep:   #EDEDE3;
  --gold:         #6E8168;   /* accent : vert sauge */
  --gold-light:   #B4C5AD;
  --gold-dark:    #4A5A46;
  --sage:         #7E9C86;
  --ink:          #2E332C;
  --ink-soft:     #616B5D;
  --night:        #3B4F42;   /* fond des sections sombres : vert forêt */

  --ivory-rgb:      248, 247, 242;
  --gold-rgb:       110, 129, 104;
  --gold-light-rgb: 180, 197, 173;
  --gold-shade-rgb:  40,  54,  38;
  --sage-rgb:       126, 156, 134;
  --ink-rgb:         46,  51,  44;
  --night-rgb:       30,  38,  32;
}

/* --- BLEU NUIT & PLATINE — chic, ambiance soirée -------------------- */
[data-theme="nuit"] {
  --ivory:        #F7F8FA;
  --ivory-deep:   #E9ECF2;
  --gold:         #6E7893;   /* accent : bleu platine */
  --gold-light:   #A8B1C6;
  --gold-dark:    #2E3A55;
  --sage:         #7C8CA0;
  --ink:          #232733;
  --ink-soft:     #5A6274;
  --night:        #36435F;   /* fond des sections sombres : bleu nuit */

  --ivory-rgb:      247, 248, 250;
  --gold-rgb:       110, 120, 147;
  --gold-light-rgb: 168, 177, 198;
  --gold-shade-rgb:  30,  38,  58;
  --sage-rgb:       124, 140, 160;
  --ink-rgb:         35,  39,  51;
  --night-rgb:       19,  24,  36;
}

/* --- TERRACOTTA & SABLE — chaleureux, méditerranéen ----------------- */
[data-theme="terracotta"] {
  --ivory:        #FAF6F1;
  --ivory-deep:   #F0E7DC;
  --gold:         #C0714F;   /* accent : terracotta */
  --gold-light:   #E0AC8D;
  --gold-dark:    #8E4B31;
  --sage:         #93A48F;
  --ink:          #3B302A;
  --ink-soft:     #6E5C51;
  --night:        #593F32;   /* fond des sections sombres : brun chaud */

  --ivory-rgb:      250, 246, 241;
  --gold-rgb:       192, 113,  79;
  --gold-light-rgb: 224, 172, 141;
  --gold-shade-rgb:  90,  42,  24;
  --sage-rgb:       147, 164, 143;
  --ink-rgb:         59,  48,  42;
  --night-rgb:       42,  31,  26;
}


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; height: 100%; }

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Une règle `display` déclarée plus loin l'emporterait sur l'attribut
   hidden du navigateur : on s'assure qu'un élément masqué le reste. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  letter-spacing: .01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--gold-light); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   ÉLÉMENTS PARTAGÉS
   --------------------------------------------------------------- */

/* Filet ornemental --------------------------------------------- */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  color: var(--gold);
  font-size: .7rem;
  margin: 1.5rem auto;
  max-width: 260px;
}
.rule span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.rule span:last-of-type {
  background: linear-gradient(270deg, transparent, var(--gold));
}
.rule--light { color: var(--gold-light); }
.rule--light span { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.rule--light span:last-of-type { background: linear-gradient(270deg, transparent, var(--gold-light)); }

/* Boutons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }

.btn--primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(154, 127, 73, .3);
}
.btn--primary:hover { box-shadow: 0 16px 40px rgba(154, 127, 73, .42); transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
}
.btn--ghost:hover { background: var(--gold); color: var(--white); }

/* variante posée sur une image ou une vidéo */
.btn--light {
  background: rgba(var(--ivory-rgb), .1);
  color: var(--white);
  border-color: rgba(var(--ivory-rgb), .6);
  backdrop-filter: blur(6px);
}
.btn--light:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.btn--wa {
  background: linear-gradient(135deg, var(--wa) 0%, var(--wa-dark) 100%);
  color: var(--white);
  font-size: .82rem;
  padding: 1.25rem 2.6rem;
  box-shadow: 0 12px 34px rgba(18, 140, 126, .32);
}
.btn--wa:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(18, 140, 126, .45); }

.ico { width: 20px; height: 20px; flex: none; }

/* Sections ------------------------------------------------------ */
.page { opacity: 0; transition: opacity 1s var(--ease); }
.page.is-visible { opacity: 1; }

.section {
  padding: var(--space) 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.section--tight { padding-top: calc(var(--space) * .65); padding-bottom: calc(var(--space) * .65); }

.section--alt {
  max-width: none;
  background: var(--ivory-deep);
}
.section--alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

.section__title {
  font-size: clamp(2rem, 6.5vw, 3.1rem);
  color: var(--ink);
}
.section__title::first-letter { color: var(--gold-dark); }

.section__sub {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .9rem;
}

/* ---------------------------------------------------------------
   ÉCRAN D'OUVERTURE
   --------------------------------------------------------------- */
.opening {
  /* Taille de l'enveloppe. Le plafond en « vh » garantit que le carton
     sorti ET l'enveloppe tiennent en entier dans l'écran, même bas. */
  --w: min(360px, 84vw, 44vh);
  --h: calc(var(--w) * .66);
  --stage-shift: 0%;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFDF9 0%, var(--ivory) 45%, var(--ivory-deep) 100%);
  transition: opacity .9s var(--ease), visibility .9s;
}
.opening.is-gone { opacity: 0; visibility: hidden; }

/* Carton sorti : on redescend la scène pour que le carton — et non
   l'enveloppe — se retrouve exactement au centre de l'écran. */
.opening.is-letter-out { --stage-shift: 86.8%; }

.opening__stage {
  position: relative;
  text-align: center;
  perspective: 1400px;
  /* Seule l'enveloppe compte pour le centrage vertical : les légendes
     débordent sous la scène au lieu de décaler l'ensemble vers le haut. */
  height: var(--h);
  transform: translateY(var(--stage-shift));
  transition: transform 1.15s var(--ease);
}

/* ---------------------------------------------------------------
   L'ENVELOPPE
   Empilement en 3D (translateZ) : dos < carton < poche < rabat.
   --------------------------------------------------------------- */
.envelope {
  position: relative;
  width: var(--w);
  height: var(--h);
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease);
}
/* léger redressement pendant l'ouverture */
.opening.is-opening .envelope { transform: translateY(-2%) rotateX(6deg); }
/* puis on descend l'enveloppe pour laisser sortir le carton */
.opening.is-letter-out .envelope { transform: translateY(16%) rotateX(6deg); }

/* Dos ----------------------------------------------------------- */
.envelope__back {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  background: linear-gradient(150deg, #F6EFE1 0%, #EDE2CD 100%);
  box-shadow: var(--shadow-lg);
}

/* Carton d'invitation ------------------------------------------- */
.envelope__letter {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5%;
  height: 132%;
  /* Fermé : le carton est derrière la poche, et la partie qui dépasserait
     au-dessus de l'enveloppe est découpée — donc rien ne se voit. */
  transform: translateZ(1px);
  clip-path: inset(28% 0 0 0);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(1.1rem, 4.5vw, 1.8rem) 1rem 1rem;
  background: var(--white);
  border: 1px solid rgba(var(--gold-rgb), .5);
  box-shadow: 0 -6px 24px rgba(var(--ink-rgb), .1);
  transition: transform 1.15s var(--ease), clip-path 1.15s var(--ease),
              box-shadow 1.15s var(--ease);
}
.envelope__letter::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(var(--gold-rgb), .35);
  pointer-events: none;
}

/* le carton sort de l'enveloppe */
.opening.is-letter-out .envelope__letter {
  transform: translateZ(4px) translateY(-62%);
  clip-path: inset(0 0 0 0);
  box-shadow: 0 26px 60px rgba(var(--ink-rgb), .28);
}

/* Fleuron ornemental réutilisable */
.flourish { display: block; width: 72px; height: 18px; }

.letter__ornament { color: var(--gold); margin: 0 auto; }
.letter__eyebrow {
  margin: .7rem 0 .5rem;
  font-size: clamp(.54rem, 2.1vw, .64rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 26ch;
}
.letter__monogram {
  font-size: clamp(2.1rem, 10vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--gold-dark);
  line-height: 1.1;
}
.envelope__letter .rule { margin: .55rem auto; max-width: 130px; }
.letter__date {
  font-family: var(--serif);
  font-size: clamp(.9rem, 3.4vw, 1.1rem);
  color: var(--ink-soft);
  margin: 0;
}

/* Poche avant ---------------------------------------------------
   Elle couvre toute l'enveloppe, sauf une échancrure en V au sommet
   — exactement la place occupée par le rabat. Le carton reste donc
   invisible tant que l'enveloppe est fermée.
   --------------------------------------------------------------- */
.envelope__front {
  position: absolute;
  inset: 0;
  transform: translateZ(2px);
  background: linear-gradient(165deg, #FBF6EC 0%, #F3EADA 55%, #EADEC6 100%);
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -1px 0 rgba(var(--gold-rgb), .4));
}
/* pli horizontal discret de la poche */
.envelope__front::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 66%;
  border-top: 1px solid rgba(var(--gold-rgb), .18);
}

/* Rabat --------------------------------------------------------- */
.envelope__flap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 46%;
  transform: translateZ(3px) rotateX(0deg);
  transform-origin: top center;
  transform-style: preserve-3d;
  background: linear-gradient(180deg, #F8F1E3 0%, #E9DCC3 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 1s var(--ease);
}
.opening.is-opening .envelope__flap { transform: translateZ(3px) rotateX(-172deg); }

/* Sceau de cire -------------------------------------------------- */
.envelope__seal {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 5;
  transform: translate(-50%, -50%) translateZ(6px);
  width: clamp(56px, 17vw, 68px);
  height: clamp(56px, 17vw, 68px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 30%, #D9BC7C 0%, var(--gold) 42%, var(--gold-dark) 100%);
  box-shadow:
    inset 0 -2px 6px rgba(var(--gold-shade-rgb), .45),
    inset 0 2px 5px rgba(255, 255, 255, .5),
    0 8px 22px rgba(var(--gold-shade-rgb), .35);
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
/* bord dentelé du cachet */
.envelope__seal::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255, 255, 255, .55);
  border-radius: 50%;
}
.envelope__seal:hover { transform: translate(-50%, -50%) translateZ(6px) scale(1.06); }

.seal__text {
  font-family: var(--serif);
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
  font-style: italic;
  letter-spacing: .02em;
  color: #FFF8E7;
  text-shadow: 0 1px 2px rgba(var(--gold-shade-rgb), .55);
}

/* le sceau se brise */
.opening.is-opening .envelope__seal {
  transform: translate(-50%, -50%) translateZ(6px) scale(1.5) rotate(14deg);
  opacity: 0;
  pointer-events: none;
}

/* Légendes sous l'enveloppe -------------------------------------- */
.opening__cta {
  margin-top: clamp(2.5rem, 9vw, 3.6rem);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-dark);
  transition: opacity .4s var(--ease);
}
.opening__hint {
  margin-top: .5rem;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .6;
  transition: opacity .4s var(--ease);
}
.opening.is-opening .opening__cta,
.opening.is-opening .opening__hint { opacity: 0; }

/* Temps de lecture : le carton reste affiché quelques secondes.
   Un simple contact permet de passer à la suite sans attendre. */
.opening.is-readable { cursor: pointer; }
.opening.is-readable::after {
  content: 'Touchez pour continuer';
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(.9rem, env(safe-area-inset-bottom, 0px));
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-dark);
  opacity: 0;
  animation: hintIn .8s var(--ease) .8s forwards;
  pointer-events: none;
}
.opening.is-gone::after { animation: none; opacity: 0; }

/* enveloppe un peu plus généreuse sur grand écran */
@media (min-width: 900px) {
  .opening { --w: min(440px, 44vh); }
  .opening__cta { font-size: .78rem; }
  .opening__hint { font-size: .7rem; }
}

/* =====================================================================
   =====================================================================
   L'INVITATION — tout ce qui suit l'ouverture de l'enveloppe
   =====================================================================
   ===================================================================== */

/* ---------------------------------------------------------------
   RAIL DE PROGRESSION (colonne de points, à droite)
   --------------------------------------------------------------- */
.rail {
  position: fixed;
  right: max(.9rem, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: none;
  flex-direction: column;
  gap: .95rem;
  align-items: flex-end;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.page.is-visible ~ .rail { opacity: 1; }

.rail__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
}
.rail__label {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.rail__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  transition: opacity .3s, transform .3s var(--ease);
}
.rail__item:hover .rail__label,
.rail__item.is-active .rail__label { opacity: .8; transform: none; }
.rail__item.is-active .rail__dot { opacity: 1; transform: scale(1.7); background: var(--gold-dark); }

/* sur fond nuit, le rail passe en clair */
.rail.on-night .rail__item { color: var(--ivory); }
.rail.on-night .rail__item.is-active .rail__dot { background: var(--gold-light); }

@media (min-width: 1024px) { .rail { display: flex; } }

/* ---------------------------------------------------------------
   HERO
   ---------------------------------------------------------------
   Parti pris : un accueil CLAIR. La photo n'est plus un fond
   assombri (qui virait au brun quelle que soit l'image) : elle est
   présentée en arche, au-dessus des prénoms, sur un fond crème
   travaillé qui tient debout même sans photo.
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  /* Deux rangées : le contenu, puis l'invite à défiler. Cette dernière
     était en position absolue et venait donc chevaucher le texte dès
     que la date passait sur deux lignes. En flux, c'est impossible. */
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.6rem;
  overflow: hidden;
  text-align: center;
  background: var(--ivory);
  color: var(--ink);
}

/* Halo coloré : deux taches douces dans la couleur d'accent, plus un
   dégradé vers le bas qui raccorde le hero à la section suivante. */
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 44% at 50% 6%,   rgba(var(--gold-light-rgb), .9)  0%, transparent 68%),
    radial-gradient(76% 50% at 6%  92%,  rgba(var(--gold-rgb), .38) 0%, transparent 70%),
    radial-gradient(70% 48% at 96% 78%,  rgba(var(--sage-rgb), .34) 0%, transparent 68%),
    linear-gradient(180deg, var(--white) 0%, var(--ivory) 38%, var(--ivory-deep) 100%);
}

.hero__inner {
  position: relative;
  padding: 2.5rem 1.5rem;
  max-width: 760px;
}

/* --- L'illustration d'accueil ---
   Aucun cadre : ni arche, ni filet, ni ombre. L'image est posée
   directement sur le fond. « contain » plutôt que « cover » pour ne
   rien rogner : le sujet est vu en entier. Un PNG transparent se fond
   donc naturellement dans le crème de la page. */
.hero__portrait {
  position: relative;
  display: grid;
  place-items: center;
  /* Dimensionnée par la HAUTEUR d'écran, la largeur suivant le ratio :
     c'est ce qui garantit que l'illustration, les prénoms, la date et
     l'invite à défiler tiennent tous ensemble sans rien pousser hors
     de l'écran. max-width protège les téléphones très étroits. */
  height: clamp(210px, 38svh, 400px);
  width: auto;
  max-width: 66vw;
  aspect-ratio: 1024 / 1536;
  margin: 0 auto 1.2rem;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Aucune image fournie : on retombe sur un panneau au monogramme --- */
.hero__mono {
  position: relative;
  display: none;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--gold-dark);
  opacity: .8;
}
.hero__portrait.is-empty .hero__bg { display: none; }
.hero__portrait.is-empty .hero__mono { display: block; }
.hero__portrait.is-empty {
  border-radius: 50% 50% 4px 4px / 32% 32% 3px 3px;
  background: linear-gradient(165deg,
              var(--white) 0%, var(--ivory-deep) 45%, rgba(var(--gold-light-rgb), .75) 100%);
  box-shadow: 0 18px 44px rgba(var(--ink-rgb), .12);
}

.hero__eyebrow {
  font-size: .64rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  color: var(--gold-dark);
  padding-left: .42em;
}

/* Prénoms côte à côte, et non plus empilés sur trois lignes */
.hero__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 .3em;
  font-size: clamp(2.4rem, 11vw, 4.6rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--ink);
}
.hero__amp {
  font-size: .52em;
  font-style: italic;
  color: var(--gold);
  transform: translateY(-.08em);
}

.hero__rule { margin: 1.4rem auto 1.2rem; max-width: 210px; }

.hero__meta {
  display: grid;
  gap: .4rem;
  /* Taille et interlettrage proportionnels : la ligne de date est
     longue, elle doit pouvoir se resserrer sur les écrans étroits
     plutôt que de se casser n'importe où. */
  font-size: clamp(.58rem, 2.5vw, .68rem);
  letter-spacing: clamp(.1em, .8vw, .24em);
  line-height: 1.8;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink-soft);
}
.hero__meta i { font-style: normal; }
.hero__meta i:first-child { color: var(--gold-dark); font-weight: 400; }

.hero__scroll {
  display: grid;
  justify-items: center;
  gap: .55rem;
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  opacity: .75;
}
.hero__scroll b { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent); }

/* Sur grand écran, l'arche se place à côté du texte plutôt qu'au-dessus */
@media (min-width: 900px) {
  .hero__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: 940px;
    text-align: left;
  }
  .hero__portrait {
    grid-row: 1 / span 4;
    height: clamp(320px, 58svh, 520px);
    max-width: 32vw;
    margin: 0;
  }
  .hero__eyebrow  { margin-bottom: 1.3rem; }
  .hero__names    { justify-content: flex-start; }
  .hero__rule     { margin-left: 0; }
  .hero__rule span:first-of-type { display: none; }
  .hero__meta     { justify-items: start; }
}

/* ---------------------------------------------------------------
   SECTIONS — ossature commune
   --------------------------------------------------------------- */
.sec {
  position: relative;
  padding: var(--space) 1.4rem;
  overflow: hidden;
}
.sec__in { max-width: 1060px; margin: 0 auto; }

/* variante « nuit » */
.sec--night {
  background: var(--night);
  color: var(--ivory);
}
.sec--night .sec__title { color: var(--ivory); }
.sec--night .sec__lead  { color: rgba(var(--ivory-rgb), .72); }
.sec--night .sec__num   { color: var(--gold-light); }
.sec--night .sec__line  { background: rgba(var(--gold-light-rgb), .35); }

/* variante « crème » */
.sec--cream { background: var(--ivory-deep); }

/* en-tête de section : 01 ─── Titre */
.sec__head { margin-bottom: clamp(2.2rem, 6vw, 3.4rem); }

.sec__kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.sec__num {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold-dark);
}
.sec__line { height: 1px; width: 56px; background: var(--gold); opacity: .8; }
.sec__eyebrow {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .7;
}

.sec__title {
  font-size: clamp(2.1rem, 7vw, 3.5rem);
  color: var(--ink);
  max-width: 18ch;
}
.sec__lead {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* date limite mise en avant sous le chapô */
.sec__deadline {
  margin-top: 1.2rem;
  display: inline-block;
  padding: .5rem 1.1rem;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(var(--gold-light-rgb), .35);
  border-radius: 999px;
}

/* en-tête centré (variante) */
.sec--center { text-align: center; }
.sec--center .sec__kicker { justify-content: center; }
.sec--center .sec__title,
.sec--center .sec__lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------
   01 · COMPTE À REBOURS
   --------------------------------------------------------------- */
.count {
  display: grid;
  /* minmax(0, …) et non 1fr : sans cela les colonnes ne peuvent pas
     descendre sous la largeur du mot « SECONDES » et la 4e case
     déborde de l'écran sur les téléphones. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.3rem, 1.6vw, .5rem);
  max-width: 640px;
  margin: 0 auto;
}

.count__cell {
  position: relative;
  padding: clamp(1rem, 4vw, 1.5rem) .25rem clamp(.85rem, 3.2vw, 1.2rem);
  text-align: center;
  background: rgba(var(--ivory-rgb), .05);
  border: 1px solid rgba(var(--gold-light-rgb), .28);
}
.count__cell::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--gold-light-rgb), .14);
  pointer-events: none;
}

.count__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 8vw, 3.4rem);
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.count__label {
  display: block;
  margin-top: .55rem;
  font-size: clamp(.46rem, 1.9vw, .54rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
}

.count__done {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--gold-light);
}

/* ---------------------------------------------------------------
   02 · FRISE « NOTRE HISTOIRE »
   Une timeline VERTICALE : un fil continu, une pastille par étape.
   Sur grand écran, les étapes alternent de part et d'autre du fil.
   --------------------------------------------------------------- */
.tl {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: .6rem 0;
}

.tl__track {
  display: grid;
  gap: clamp(2.1rem, 6vw, 3.1rem);
}

/* le fil doré qui relie les étapes */
.tl::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: linear-gradient(180deg,
              transparent, var(--gold-light) 7%, var(--gold-light) 93%, transparent);
}

.tl__step {
  position: relative;
  padding-left: 2.3rem;
  text-align: left;
}
/* la pastille, posée sur le fil */
.tl__step::before {
  content: '';
  position: absolute;
  top: .5rem;
  left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px var(--ivory);   /* masque le fil derrière la pastille */
}

.tl__year {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  color: var(--gold-dark);
  line-height: 1;
  margin-bottom: .4rem;
}
.tl__title {
  font-size: clamp(1.15rem, 4.4vw, 1.35rem);
  margin-bottom: .35rem;
}
.tl__text {
  color: var(--ink-soft);
  font-size: .96rem;
  max-width: 40ch;
  margin-bottom: 0;
}

/* --- Grand écran : le fil passe au centre, les étapes alternent --- */
@media (min-width: 760px) {
  /* Le fil étant centré, l'en-tête de la section l'est aussi : un titre
     calé à gauche au-dessus d'une frise centrée paraîtrait de travers. */
  #histoire .sec__head { text-align: center; }
  #histoire .sec__kicker { justify-content: center; }
  #histoire .sec__title,
  #histoire .sec__lead { margin-left: auto; margin-right: auto; }

  .tl::before { left: 50%; margin-left: -.5px; }

  .tl__track { gap: clamp(2.6rem, 4vw, 3.6rem); }

  .tl__step {
    width: 50%;
    padding-left: 0;
    padding-right: 2.8rem;
    text-align: right;
  }
  .tl__step::before { left: auto; right: -5.5px; }
  .tl__step .tl__text { margin-left: auto; }

  .tl__step:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 2.8rem;
    text-align: left;
  }
  .tl__step:nth-child(even)::before { right: auto; left: -5.5px; }
  .tl__step:nth-child(even) .tl__text { margin-left: 0; margin-right: auto; }
}

/* ---------------------------------------------------------------
   03 · GALERIE
   (les noms de classes sont conservés : ils sont utilisés par gallery.js)
   --------------------------------------------------------------- */
.gallery__viewport { position: relative; }

.gallery__track {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .4rem .2rem 1.6rem;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__item {
  position: relative;
  flex: 0 0 74%;
  scroll-snap-align: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--night);
  transition: transform .6s var(--ease);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); opacity: .82; }

/* la légende glisse depuis le bas */
.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1rem .9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ivory);
  background: linear-gradient(180deg, transparent, rgba(var(--night-rgb), .8));
}
.gallery__index {
  position: absolute;
  top: .8rem; left: .9rem;
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--gold-light);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.gallery__nav {
  position: absolute;
  top: 40%;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1;
  color: var(--ink);
  background: rgba(var(--ivory-rgb), .94);
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .3s, color .3s, opacity .3s;
}
.gallery__nav:hover { background: var(--gold); color: var(--white); }
.gallery__nav--prev { left: -4px; }
.gallery__nav--next { right: -4px; }

.gallery__dots { display: flex; justify-content: center; gap: .45rem; }
.gallery__dot {
  width: 6px; height: 6px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: var(--gold-light);
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s;
}
.gallery__dot.is-active { background: var(--gold-dark); transform: scale(1.7); }

@media (min-width: 760px) {
  .gallery__item { flex-basis: 33%; }
  .gallery__nav--prev { left: -18px; }
  .gallery__nav--next { right: -18px; }
}

/* ---------------------------------------------------------------
   04 · LE JOUR J (programme)
   --------------------------------------------------------------- */
.day {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding-left: 2.4rem;
}
.day::before {
  content: '';
  position: absolute;
  left: 7px; top: .7rem; bottom: .7rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--gold-light-rgb), .5) 10%,
                                      rgba(var(--gold-light-rgb), .5) 90%, transparent);
}

.day__item { position: relative; padding-bottom: 2.4rem; }
.day__item:last-child { padding-bottom: 0; }
.day__item::before {
  content: '';
  position: absolute;
  left: -2.4rem; top: .5rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--night);
  border: 1px solid var(--gold-light);
  box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 9px rgba(var(--gold-light-rgb), .55);
}

.day__hour {
  display: block;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .25rem;
}
.day__name { font-size: 1.6rem; }
.day__desc { margin: .3rem 0 0; font-size: .95rem; color: rgba(var(--ivory-rgb), .74); }

/* ---------------------------------------------------------------
   05 · LE LIEU
   --------------------------------------------------------------- */
.venue {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(340px, 62vh, 520px);
  padding: clamp(2.6rem, 8vw, 4rem) 1.4rem;
  border: 0;                                   /* sans bordure */
  background: var(--night);                    /* fond le temps du chargement */
  box-shadow: var(--shadow-md);
  color: var(--ivory);
}

/* La vidéo d'ambiance couvre toute la carte */
.venue__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.venue.is-playing .venue__video { opacity: 1; }

/* Voile sombre : sans lui, le texte deviendrait illisible sur l'image */
.venue__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--night-rgb), .62) 0%, rgba(var(--night-rgb), .38) 45%,
                            rgba(var(--night-rgb), .78) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 75%);
}

.venue__body { position: relative; max-width: 34ch; }

.venue__name {
  font-size: clamp(2rem, 7vw, 2.8rem);
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.venue__address {
  color: rgba(var(--ivory-rgb), .8);
  margin: .7rem 0 1.8rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* Repli si aucune vidéo n'est renseignée : la carte redevient claire */
.venue--plain {
  min-height: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  padding: clamp(2.2rem, 6vw, 3rem) 1.4rem;
}
.venue--plain .venue__veil,
.venue--plain .venue__video { display: none; }
.venue--plain .venue__name    { color: var(--gold-dark); text-shadow: none; }
.venue--plain .venue__address { color: var(--ink-soft); text-shadow: none; }
.venue--plain .btn--light {
  color: var(--ink);
  border-color: var(--gold);
  background: transparent;
  backdrop-filter: none;
}
.venue--plain .btn--light:hover { background: var(--gold); color: var(--white); }

/* ---------------------------------------------------------------
   06 · INFOS PRATIQUES (accordéon)
   --------------------------------------------------------------- */
.faq { max-width: 640px; margin: 0 auto; border-top: 1px solid rgba(var(--gold-rgb), .35); }

.faq__item { border-bottom: 1px solid rgba(var(--gold-rgb), .35); }

.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem .2rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  transition: color .3s;
}
.faq__btn:hover { color: var(--gold-dark); }

.faq__icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  margin-left: auto;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--gold-dark);
  transition: transform .4s var(--ease), opacity .3s;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); opacity: 0; }

.faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s var(--ease);
}
.faq__inner {
  padding: 0 .2rem 1.4rem;
  color: var(--ink-soft);
  font-size: .97rem;
}

/* ---------------------------------------------------------------
   07 · TENUE SOUHAITÉE (dress code)
   --------------------------------------------------------------- */
.dress {
  display: grid;
  gap: clamp(2rem, 6vw, 3.2rem);
  align-items: center;
}
@media (min-width: 820px) { .dress { grid-template-columns: 1.1fr 1fr; } }

.dress__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}
.dress__chip {
  width: clamp(64px, 19vw, 88px);
  text-align: center;
}
.dress__disc {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .12), 0 8px 20px rgba(var(--ink-rgb), .14);
  border: 1px solid rgba(255, 255, 255, .55);
}
.dress__name {
  display: block;
  margin-top: .6rem;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.dress__notes li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .8rem;
  color: var(--ink-soft);
}
.dress__notes li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 1px;
  background: var(--gold);
}
.dress__avoid {
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--gold);
  background: rgba(var(--gold-rgb), .08);
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   08 · LE QUIZ DES MARIÉS
   --------------------------------------------------------------- */
.quiz { max-width: 620px; margin: 0 auto; }

.quiz__stage {
  background: rgba(var(--ivory-rgb), .05);
  border: 1px solid rgba(var(--gold-light-rgb), .28);
  padding: clamp(1.6rem, 5vw, 2.4rem);
}

.quiz__meter {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.6rem;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .65;
}
.quiz__bar {
  flex: 1;
  height: 2px;
  background: rgba(var(--gold-light-rgb), .2);
  position: relative;
}
.quiz__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gold-light);
  transition: width .5s var(--ease);
}

.quiz__q {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  line-height: 1.3;
  margin-bottom: 1.4rem;
}

.quiz__answers { display: grid; gap: .6rem; }

.quiz__answer {
  width: 100%;
  text-align: left;
  padding: .95rem 1.1rem;
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 300;
  color: var(--ivory);
  background: transparent;
  border: 1px solid rgba(var(--gold-light-rgb), .3);
  cursor: pointer;
  transition: background-color .3s, border-color .3s, transform .2s var(--ease);
}
.quiz__answer:hover:not(:disabled) { background: rgba(var(--gold-light-rgb), .1); border-color: var(--gold-light); }
.quiz__answer:disabled { cursor: default; }
.quiz__answer.is-right {
  background: rgba(var(--sage-rgb), .28);
  border-color: var(--sage);
}
.quiz__answer.is-wrong {
  background: rgba(168, 106, 106, .22);
  border-color: #A86A6A;
}

.quiz__feedback {
  margin-top: 1.2rem;
  min-height: 1.6em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-light);
}

.quiz__result { text-align: center; }
.quiz__score {
  font-family: var(--serif);
  font-size: clamp(3rem, 14vw, 4.6rem);
  color: var(--gold-light);
  line-height: 1;
}
.quiz__score small { font-size: .35em; opacity: .6; }
.quiz__verdict {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: .8rem 0 1.6rem;
}
.quiz__replay {
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--gold-light);
  color: var(--gold-light);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem .2rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   09 · LA PLAYLIST DES INVITÉS
   --------------------------------------------------------------- */
.tune { max-width: 560px; margin: 0 auto; }

.tune__form { display: grid; gap: 1rem; }

.tune__row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tune__row { grid-template-columns: 1fr 1fr; } }

.tune__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
  justify-content: center;
}
.tune__chip {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--gold-light);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.tune__chip:hover { background: var(--gold); color: var(--white); border-color: var(--gold); }

/* ---------------------------------------------------------------
   10 · AJOUTER À MON AGENDA
   --------------------------------------------------------------- */
.cal {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}
.cal__card {
  width: min(320px, 100%);
  background: var(--white);
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.cal__top {
  background: var(--gold-dark);
  color: var(--white);
  padding: .55rem;
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.cal__day {
  font-family: var(--serif);
  font-size: 4.6rem;
  line-height: 1;
  color: var(--ink);
  padding: 1.4rem 0 .2rem;
}
.cal__month {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 1.4rem;
}
.cal__time {
  border-top: 1px solid var(--gold-light);
  padding: .9rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.cal__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.cal__actions .btn { padding: .85rem 1.6rem; font-size: .68rem; }

/* ---------------------------------------------------------------
   11 · CONFIRMATION DE PRÉSENCE
   --------------------------------------------------------------- */
.rsvp__form { max-width: 520px; margin: 0 auto; display: grid; gap: 1.1rem; text-align: left; }

.field { display: grid; gap: .45rem; }
.field__label {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 300;
  color: var(--ink);
  padding: .95rem 1rem;
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18);
}
.field textarea { resize: vertical; min-height: 84px; }

.field--row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field--row { grid-template-columns: 1fr 1fr; } }

.rsvp__form .btn { justify-self: center; margin-top: .4rem; }

.rsvp__note, .tune__note {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-soft);
  opacity: .85;
}

/* sur fond nuit */
.sec--night .field__label { color: rgba(var(--ivory-rgb), .74); }
.sec--night .field input,
.sec--night .field select,
.sec--night .field textarea {
  background: rgba(var(--ivory-rgb), .06);
  border-color: rgba(var(--gold-light-rgb), .3);
  color: var(--ivory);
}
.sec--night .field input::placeholder,
.sec--night .field textarea::placeholder { color: rgba(var(--ivory-rgb), .5); }
.sec--night .rsvp__note,
.sec--night .tune__note { color: rgba(var(--ivory-rgb), .7); }
.sec--night .tune__chip { color: rgba(var(--ivory-rgb), .7); border-color: rgba(var(--gold-light-rgb), .35); }

/* ---------------------------------------------------------------
   12 · PARTAGER L'INVITATION
   --------------------------------------------------------------- */
.share { display: grid; justify-items: center; gap: 1.3rem; }

.share__secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.share__secondary .btn { padding: .85rem 1.6rem; font-size: .68rem; }

.share__picker {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--gold);
  padding: .3rem .2rem;
  cursor: pointer;
}
.share__note {
  margin-top: .4rem;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-soft);
  opacity: .8;
  max-width: 44ch;
}

/* liste des contacts (bonus Chrome Android) */
.contacts {
  width: min(520px, 100%);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow-sm);
}
.contacts__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--ivory-deep);
}
.contacts__title { font-size: 1.15rem; }
.contacts__count { color: var(--gold-dark); font-size: .9rem; }
.contacts__clear {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: underline;
}
.contacts__item {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--ivory-deep);
}
.contacts__item:last-child { border-bottom: 0; }
.contacts__item.is-sent { background: rgba(var(--sage-rgb), .09); }
.contacts__avatar {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ivory-deep);
  color: var(--gold-dark);
  font-family: var(--serif); font-size: 1.05rem;
}
.contacts__info { flex: 1; min-width: 0; }
.contacts__name {
  display: block; font-size: .95rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contacts__tel { display: block; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.contacts__send {
  flex: none;
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); background: var(--wa);
  border: 0; border-radius: 999px;
  padding: .55rem 1.1rem; cursor: pointer;
  transition: background-color .3s, transform .2s;
}
.contacts__send:active { transform: scale(.95); }
.contacts__item.is-sent .contacts__send { background: var(--sage); }

/* ---------------------------------------------------------------
   PIED DE PAGE
   --------------------------------------------------------------- */
.footer {
  padding: var(--space) 1.5rem calc(var(--space) * .6);
  text-align: center;
  background: var(--night);
  color: var(--ivory);
}
.footer__ornament { color: var(--gold-light); margin: 0 auto 1.4rem; width: 86px; height: 22px; }
.footer__thanks {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-style: italic;
  max-width: 22ch;
  margin: 0 auto 1.6rem;
  line-height: 1.4;
}
.footer__mono {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: .12em;
  color: var(--gold-light);
  margin: 0 0 1.2rem;
}
.footer__date {
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .62;          /* le fond ayant été éclairci, .45 devenait illisible */
  margin: 0;
}

/* ---------------------------------------------------------------
   BOUTON MUSIQUE FLOTTANT
   --------------------------------------------------------------- */
.music {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 60;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--ivory-rgb), .93);
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), background-color .3s;
}
.music:hover { transform: scale(1.07); }
.music__bars { display: flex; align-items: flex-end; gap: 3px; height: 17px; }
.music__bars i {
  display: block; width: 3px; height: 5px;
  border-radius: 2px; background: var(--gold-dark);
  transform-origin: bottom;
}

/* ---------------------------------------------------------------
   VISIONNEUSE PLEIN ÉCRAN
   --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  background: rgba(var(--night-rgb), .96);
  backdrop-filter: blur(6px);
}
.lightbox__fig { margin: 0; text-align: center; max-height: 88svh; }
.lightbox__fig img {
  max-width: 100%; max-height: 78svh;
  margin: 0 auto; object-fit: contain;
  box-shadow: var(--shadow-lg);
}
.lightbox__fig figcaption {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-light);
}
.lightbox__nav, .lightbox__close {
  background: none; border: 0;
  color: var(--ivory); cursor: pointer;
  line-height: 1; opacity: .75;
  transition: opacity .3s;
}
.lightbox__nav { font-size: 2.6rem; padding: 1rem .4rem; }
.lightbox__nav:hover, .lightbox__close:hover { opacity: 1; }
.lightbox__close {
  position: absolute;
  top: max(.8rem, env(safe-area-inset-top));
  right: 1rem;
  font-size: 2.4rem;
  padding: .2rem .7rem;
}

/* ---------------------------------------------------------------
   MESSAGE DE CONFIRMATION (TOAST)
   --------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 200;
  transform: translate(-50%, 140%);
  max-width: min(90vw, 380px);
  padding: .9rem 1.5rem;
  background: var(--night);
  color: var(--ivory);
  font-size: .85rem;
  text-align: center;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.toast.is-shown { transform: translate(-50%, 0); opacity: 1; }