/* ═══════════════════════════════════════════════════════════
   Laura & Loïc — 28 mai 2027
   Direction artistique : aquarelle pastel + rigueur "Apple"
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Palette issue du faire-part */
  --cream: #F5EDE7;
  --cream-deep: #EFE3DA;
  --paper: #FBF8F3;
  --navy: #172E63;
  --navy-soft: #38507F;
  --gold: #C98A2B;
  --gold-light: #EBBA6A;
  --coral: #EE9781;
  --coral-deep: #E0765E;
  --blue: #8AA4CD;
  --blue-deep: #4D688F;
  --sage: #97A886;

  --ink: var(--navy);
  --ink-mute: #4A5A7D;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: "Parisienne", "Cormorant Garamond", cursive;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1180px;
}

/* Chiffres alignés (Cormorant utilise des chiffres elzéviriens par défaut) */
.cd__n,
.tl__time span,
.ocard__num {
  font-feature-settings: 'lnum' 1;
  font-variant-numeric: lining-nums;
}

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

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

  /* Le débordement horizontal est masqué ici, et non sur `body` : sinon body
     devient lui-même une boîte de défilement et l'accrochage ci-dessous,
     qui s'applique au document, resterait sans effet. */
  overflow-x: hidden;

  /* « proximity » et non « mandatory » : les sections ne s'accrochent que
     lorsqu'on s'arrête tout près d'une frontière. Un défilement franc les
     traverse sans être retenu — ce qui compte, plusieurs sections étant
     plus hautes que l'écran. */
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

body.is-locked {
  overflow: hidden;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--coral);
  color: #fff;
}

/* ── Fond WebGL aquarelle ── */
/* La hauteur est celle du GRAND viewport, barre d'adresse repliée.
   Avec « 100% » — soit le petit viewport —, le canvas cessait de couvrir
   l'écran dès que la barre d'adresse se rétractait au défilement : une bande
   claire apparaissait en bas, puis se remplissait d'un coup à la fin du geste.
   En le dimensionnant sur le grand viewport, le bas déborde simplement sous
   la ligne de flottaison tant que la barre est visible. */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  background:
    radial-gradient(120% 90% at 10% 0%, #FBE4DA 0%, transparent 55%),
    radial-gradient(110% 80% at 95% 15%, #E8EEF8 0%, transparent 60%),
    radial-gradient(120% 90% at 20% 100%, #FAEBD2 0%, transparent 55%),
    var(--cream);
}

#bg-canvas.on {
  opacity: 1;
}

/* ── Grain papier ── */
#grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: 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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}

@keyframes grainShift {
  0% {
    transform: translate(0, 0)
  }

  16% {
    transform: translate(-2%, 1%)
  }

  33% {
    transform: translate(1%, -2%)
  }

  50% {
    transform: translate(-1%, 2%)
  }

  66% {
    transform: translate(2%, 1%)
  }

  83% {
    transform: translate(-2%, -1%)
  }

  100% {
    transform: translate(0, 0)
  }
}

/* ═══════════════════════ INTRO ═══════════════════════ */
/* On tombe directement sur la première image de la vidéo : c'est elle,
   le faire-part. Aucune image intermédiaire, le clic la met en marche. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 40%, #FDF7F2 0%, var(--cream) 55%, #EEE0D6 100%);
}

#film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Voile clair en bas : le bouton doit rester lisible quelle que soit l'image */
.film-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(251, 248, 243, .10) 0%, rgba(251, 248, 243, 0) 26%,
      rgba(251, 248, 243, 0) 52%, rgba(251, 248, 243, .62) 100%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

#intro.ready .film-veil {
  opacity: 1;
}

.film-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 20vw 5vw rgba(70, 50, 42, .14);
}

#intro-ui {
  position: absolute;
  inset: auto 0 clamp(48px, 11vh, 120px);
  z-index: 5;
  display: flex;
  justify-content: center;
}

.open-btn {
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  padding: 17px 32px;
  border-radius: 999px;
  opacity: 0;
  transition: transform .5s var(--ease);
}

.open-btn__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(251, 248, 243, .62);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 14px 34px -18px rgba(63, 44, 38, .55);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}

.open-btn__ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid rgba(201, 138, 43, .6);
  opacity: 0;
  animation: ringPulse 3.4s ease-out infinite;
}

@keyframes ringPulse {
  0% {
    opacity: .6;
    transform: scale(1)
  }

  70% {
    opacity: 0;
    transform: scale(1.2)
  }

  100% {
    opacity: 0
  }
}

.open-btn:hover {
  transform: translateY(-2px);
}

.open-btn:hover .open-btn__ring {
  background: rgba(251, 248, 243, .85);
  border-color: rgba(201, 138, 43, .7);
}

.open-btn__label {
  position: relative;
}

#skip {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vh, 34px);
  z-index: 6;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(251, 248, 243, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--navy);
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease), background .3s;
}

#skip.show {
  opacity: .8;
  pointer-events: auto;
}

#skip:hover {
  opacity: 1;
  background: rgba(251, 248, 243, .85);
}

#loader {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 14vh;
  z-index: 5;
  display: flex;
  gap: 9px;
}

#loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  opacity: .25;
  animation: dot 1.3s ease-in-out infinite;
}

#loader span:nth-child(2) {
  animation-delay: .18s
}

#loader span:nth-child(3) {
  animation-delay: .36s
}

@keyframes dot {

  0%,
  100% {
    opacity: .18;
    transform: translateY(0)
  }

  50% {
    opacity: .7;
    transform: translateY(-5px)
  }
}

#loader.hide {
  opacity: 0;
  transition: opacity .4s;
}

/* ═══════════════════════ SITE ═══════════════════════ */
#site {
  position: relative;
  z-index: 2;
  opacity: 0;
}

body.revealed #site {
  opacity: 1;
}

.wrap {
  width: min(100% - 2*var(--gut), var(--maxw));
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - 2*var(--gut), 680px);
}

/* ── Typo commune ── */
.eyebrow,
.kicker {
  font-size: .66rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy-soft);
  margin: 0 0 10px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  letter-spacing: .005em;
  margin: 0 0 22px;
}

.h2 em {
  font-family: var(--script);
  font-style: normal;
  color: var(--gold);
  font-size: 1.12em;
}

.h2--center {
  text-align: center;
}

.sec-head {
  text-align: center;
  margin-bottom: clamp(44px, 7vw, 84px);
}

.sec-head .kicker {
  text-align: center;
}

.sec-sub {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--ink-mute);
  font-size: clamp(.94rem, 1.5vw, 1.06rem);
}

.lead {
  font-size: clamp(.98rem, 1.6vw, 1.1rem);
  color: var(--ink-mute);
  max-width: 46ch;
}

.link {
  display: inline-block;
  margin-top: 14px;
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 138, 43, .4);
  padding-bottom: 3px;
  transition: .3s var(--ease);
}

.link:hover {
  border-color: var(--gold);
  letter-spacing: .24em;
}

/* Chaque panneau occupe au moins la hauteur de l'écran : avec un accrochage
   « mandatory », une section plus courte laisserait apparaître le haut de la
   suivante. Le contenu est centré verticalement pour que les sections courtes
   ne semblent pas posées en haut d'un grand vide.

   Le pied de page en fait partie : privé de point d'ancrage, l'accrochage
   obligatoire ramènerait sans cesse à la section précédente et il deviendrait
   impossible de l'atteindre. */
section,
.foot {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

section {
  padding: clamp(68px, 9vh, 128px) 0;
}

/* ── Hero ── */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(90px, 12vh, 140px) var(--gut) clamp(80px, 10vh, 120px);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 3;
}

.crest {
  margin: 0 auto clamp(14px, 2.4vh, 26px);
}

.crest img {
  width: clamp(142px, 23vw, 232px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 6px 18px rgba(63, 44, 38, .10));
}

.names {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 15vw, 9.5rem);
  line-height: .94;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

.names__line {
  display: block;
}

.names__amp {
  display: block;
  font-family: var(--script);
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
  font-size: .42em;
  line-height: 1;
  margin: .02em 0 .04em;
  opacity: 0;
  transform: translateY(14px);
}

/* Pas de `will-change` ici : il promeut les lettres sur un calque permanent,
   où elles sont rendues sans lissage sous-pixel — visiblement plus fines que
   le reste de la page. L'animation est courte, le navigateur s'en sort seul. */
.names .char {
  display: inline-block;
}

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 34px auto 22px;
  width: min(340px, 72vw);
}

.rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
}

.rule b {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
}

.date {
  font-size: clamp(.78rem, 1.9vw, .92rem);
  letter-spacing: .36em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 6px;
}

.place {
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 44px);
  margin-top: clamp(38px, 6vh, 62px);
}

.cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
}

.cd__n {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.cd__l {
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(22px, 4vh, 44px);
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.scroll-cue__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--gold), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-100%)
  }

  60%,
  100% {
    transform: translateY(100%)
  }
}

.scroll-cue__txt {
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Les taches d'aquarelle en CSS qui vivaient ici ont été retirées : leur
   pseudo-élément était détouré par un border-radius qui tranchait le dégradé
   en pleine opacité, d'où la coupure franche visible dans le bandeau
   d'accueil. Le bain d'encre WebGL fait ce travail bien mieux. */

/* ── Invitation ── */
.invitation {
  overflow: hidden;
}

.invitation__inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

.invitation .h2 {
  font-size: clamp(2.2rem, 5.6vw, 4rem);
}

.lead--center {
  margin-inline: auto;
  max-width: 52ch;
}

.signature {
  font-family: var(--script);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--gold);
  margin: 30px 0 0;
}

/* Deux diffusions d'encre qui respirent derrière le texte */
.bloom {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(38px);
  opacity: .5;
}

.bloom--a {
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  top: -4vh;
  left: -10vw;
  background: radial-gradient(closest-side, rgba(238, 151, 129, .65), rgba(238, 151, 129, 0) 70%);
  animation: bloomA 26s ease-in-out infinite alternate;
}

.bloom--b {
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  bottom: -6vh;
  right: -8vw;
  background: radial-gradient(closest-side, rgba(138, 164, 205, .6), rgba(138, 164, 205, 0) 70%);
  animation: bloomB 30s ease-in-out infinite alternate;
}

@keyframes bloomA {
  from {
    transform: scale(.92) translate(0, 0)
  }

  to {
    transform: scale(1.18) translate(4%, 5%)
  }
}

@keyframes bloomB {
  from {
    transform: scale(1.14) translate(2%, -3%)
  }

  to {
    transform: scale(.94) translate(-4%, 4%)
  }
}

/* ── Timeline ── */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: clamp(58px, 9vw, 120px);
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(transparent, rgba(201, 138, 43, .45) 12%, rgba(201, 138, 43, .45) 88%, transparent);
}

.tl {
  position: relative;
  display: grid;
  grid-template-columns: clamp(58px, 9vw, 120px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(20px, 3vw, 36px) 0;
}

.tl__time {
  font-family: var(--serif);
  text-align: right;
  line-height: 1;
  color: var(--navy);
  padding-right: clamp(16px, 2.4vw, 30px);
  padding-top: 6px;
}

.tl__time span {
  display: block;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 300;
}

.tl__time i {
  font-style: normal;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--ink-mute);
}

.tl__time--soft span {
  font-size: clamp(1.4rem, 3.2vw, 2rem);
}

.tl__blob {
  position: absolute;
  left: clamp(58px, 9vw, 120px);
  top: clamp(34px, 5vw, 54px);
  width: 18px;
  height: 18px;
  translate: -50% 0;
  border-radius: 52% 48% 41% 59%/46% 55% 45% 54%;
  background: var(--tint);
  box-shadow: 0 0 0 7px var(--cream), 0 0 22px 5px color-mix(in srgb, var(--tint) 45%, transparent);
}

.tl__body {
  position: relative;
  padding-left: clamp(8px, 1.5vw, 18px);
}

.tl__body::before {
  content: "";
  position: absolute;
  left: -6%;
  top: -14%;
  width: 180px;
  height: 180px;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 34%, transparent), transparent 72%);
  filter: blur(14px);
  opacity: .75;
  mix-blend-mode: multiply;
}

.tl h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0 0 6px;
}

.tl__place {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  font-weight: 500;
}

.tl__note {
  color: var(--ink-mute);
  margin: 0;
  max-width: 48ch;
  font-size: clamp(.92rem, 1.5vw, 1rem);
}

/* ── Olympiades ── */
.olympiades::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 50% at 50% 40%, rgba(235, 186, 106, .14), transparent 70%);
}

.olymp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.ocard {
  position: relative;
  padding: clamp(28px, 3.4vw, 42px);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(251, 248, 243, .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 44px -22px rgba(63, 44, 38, .32);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}

.ocard::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -60px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 55%, transparent), transparent 70%);
  filter: blur(12px);
  mix-blend-mode: multiply;
}

.ocard:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -26px rgba(63, 44, 38, .4);
}

.ocard__num {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .16em;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}

.ocard h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin: 0 0 10px;
}

.ocard p {
  margin: 0;
  color: var(--ink-mute);
  font-size: .95rem;
}

.olymp-foot {
  text-align: center;
  margin: clamp(38px, 5vw, 60px) auto 0;
  max-width: 52ch;
  color: var(--ink-mute);
  font-size: .95rem;
}

/* ── Infos ── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

.icard {
  text-align: center;
  padding: clamp(22px, 2.6vw, 32px);
}

.icard__ico {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(201, 138, 43, .28);
  box-shadow: 0 10px 26px -14px rgba(63, 44, 38, .4);
}

.icard__ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icard h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 8px;
}

.icard p {
  margin: 0;
  color: var(--ink-mute);
  font-size: .93rem;
}

/* ── RSVP ── */
.rsvp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 46% at 50% 50%, rgba(138, 164, 205, .16), transparent 72%);
}

.form {
  background: rgba(251, 248, 243, .7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 26px;
  padding: clamp(26px, 4vw, 46px);
  box-shadow: 0 26px 60px -30px rgba(63, 44, 38, .42);
  display: grid;
  gap: 22px;
}

.field {
  position: relative;
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(23, 46, 99, .2);
  padding: 20px 0 8px;
  outline: none;
  transition: border-color .3s;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
}

.field label {
  position: absolute;
  left: 0;
  top: 20px;
  pointer-events: none;
  color: var(--ink-mute);
  font-size: .95rem;
  transition: .32s var(--ease);
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,
.field textarea:not(:placeholder-shown)+label {
  top: 0;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.choice {
  border: 0;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.choice--wrap {}

.choice legend {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
  float: left;
  width: 100%;
}

.pill {
  cursor: pointer;
}

.pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pill span {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 400;
  border: 1px solid rgba(23, 46, 99, .18);
  color: var(--navy-soft);
  transition: .3s var(--ease);
  background: rgba(255, 255, 255, .4);
}

.pill input:checked+span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pill input:focus-visible+span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.btn {
  justify-self: start;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 16px 38px;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow: 0 14px 30px -14px rgba(23, 46, 99, .7);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--coral), var(--gold));
  opacity: 0;
  transition: opacity .45s var(--ease);
}

.btn span {
  position: relative;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(23, 46, 99, .7);
}

.btn:hover::before {
  opacity: 1;
}

.form__hint {
  font-size: .72rem;
  color: var(--ink-mute);
  margin: 0;
}

.form.sent .btn span {}

/* ── Footer ── */
.foot {
  text-align: center;
  padding: clamp(70px, 10vh, 120px) var(--gut) clamp(44px, 6vh, 70px);
  position: relative;
  z-index: 2;
}

.foot__crest img {
  width: clamp(120px, 18vw, 180px);
  height: auto;
  margin: 0 auto 22px;
  opacity: .9;
}

.foot__names {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.foot__names em {
  font-family: var(--script);
  font-style: normal;
  text-transform: none;
  color: var(--gold);
  letter-spacing: 0;
}

.foot__date {
  font-size: .66rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 14px 0 0;
}

.foot__mini {
  font-size: .68rem;
  color: var(--ink-mute);
  opacity: .7;
  margin: 34px 0 0;
}

/* ── Animations d'apparition ── */
[data-anim] {
  opacity: 0;
}

[data-anim="fade"] {
  transform: translateY(24px);
}

[data-anim="card"] {
  transform: translateY(40px) scale(.97);
}

[data-anim="tl"] {
  transform: translateY(34px);
}

/* ── Responsive ── */
@media (max-width:900px) {
  .lead {
    margin-inline: auto;
  }
}

@media (max-width:620px) {
  .timeline::before {
    left: 8px;
  }

  .tl {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 34px;
  }

  .tl__blob {
    left: 8px;
    top: 14px;
  }

  .tl__time {
    text-align: left;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .tl__time span {
    font-size: 1.9rem;
  }

  .row {
    grid-template-columns: 1fr;
  }

  .countdown {
    gap: 10px;
  }

  .cd {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width:430px) {

  /* « MINUTES » et « SECONDES » finissaient par se toucher */
  .cd__l {
    font-size: .5rem;
    letter-spacing: .14em;
  }

  .countdown {
    gap: 4px;
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* Un défilement qui s'accroche tout seul peut désorienter : on le retire
     pour qui demande moins de mouvement. */
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
}