/* ==========================================================
   Mariage Mégane & Victor — page d'attente animée
   Charte : orange faire-part, motif magenta/rouge/rose, Jost
   ========================================================== */

:root {
  --orange: #E9500E;
  --orange-fonce: #C2410C;
  --magenta: #E5007E;
  --rouge: #D30F12;
  --rose: #EA5497;
  --rose-clair: #FFE3D6;
  --blanc: #FFFFFF;

  --police: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --ease-sortie: cubic-bezier(.2, .8, .2, 1);
  --ease-ressort: cubic-bezier(.34, 1.56, .64, 1);

  /* compteur */
  --carte-h: 112px;
  --carte-fs: 64px;
}

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

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

body {
  margin: 0;
  font-family: var(--police);
  background: var(--orange);
  color: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.intro { overflow: hidden; }

p, h1, h2, h3, ol { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--blanc); }

:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 4px;
  border-radius: 4px;
}

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

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  transition: height 1.2s var(--ease-sortie);
}

body.intro .hero { height: 100vh; height: 100svh; }

.hero__motif {
  position: absolute;
  inset: -8%;
  z-index: -2;
  transform: translate3d(
    calc(var(--mx, 0) * -22px),
    calc(var(--my, 0) * -14px + var(--sy, 0) * 0.35px),
    0
  );
  will-change: transform;
}

.hero__motif::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/motif-paysage.jpg') center / cover no-repeat;
  animation: derive 34s ease-in-out infinite alternate;
}

body.anime .hero__motif::before {
  animation:
    zoom-intro 3.4s var(--ease-sortie) both,
    derive 34s 3.4s ease-in-out infinite alternate;
}

@keyframes zoom-intro {
  from { transform: scale(1.22) rotate(-1.5deg); filter: saturate(.6) blur(6px); }
  to   { transform: scale(1.04); filter: none; }
}

@keyframes derive {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, 1.5%); }
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 38% 55% at 50% 50%, rgba(140, 10, 20, .28), transparent 70%),
    linear-gradient(to bottom, transparent 70%, rgba(233, 80, 14, .55));
}

/* ---------- Monogramme ---------- */
.hero__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Grand logo, limité par la largeur ET la hauteur de l'écran */
  width: min(440px, 72vw, 54vh);
  width: min(440px, 72vw, 54svh);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform:
    translate(
      calc(-50% + var(--mx, 0) * 12px),
      calc(-50% + var(--my, 0) * 8px - var(--sy, 0) * 0.12px)
    );
  transition: transform 1.2s var(--ease-sortie);
  -webkit-tap-highlight-color: transparent;
}

body.intro .hero__logo {
  transform: translate(-50%, -50%);
}

.hero__logo:focus-visible { outline-offset: 10px; border-radius: 160px; }

.logo { width: 100%; height: auto; display: block; overflow: visible; }

.logo__arche { transition: stroke-width .4s; }

.hero__logo:hover .logo__arche { stroke-width: 1.8; }

.logo__m,
.logo__v { transition: transform .5s var(--ease-ressort); transform-box: fill-box; transform-origin: center; }

.hero__logo:hover .logo__m { transform: translateY(-4px); }
.hero__logo:hover .logo__v { transform: translateY(4px); }

/* Intro du logo */
body.anime .logo__arche { animation: trace 1.6s .2s cubic-bezier(.65, 0, .35, 1) both; }
body.anime .logo__m     { animation: tombe 1s .9s var(--ease-sortie) both; }
body.anime .logo__v     { animation: monte 1s 1.05s var(--ease-sortie) both; }
body.anime .logo__haut,
body.anime .logo__bas   { animation: apparait .9s 1.7s var(--ease-sortie) both; }

@keyframes trace   { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes tombe   { from { opacity: 0; transform: translateY(-60px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes monte   { from { opacity: 0; transform: translateY(60px);  filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Indication de défilement ---------- */
.hero__suite {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  text-decoration: none;
  transition: opacity .8s 1s;
}

body.intro .hero__suite { opacity: 0; transition-delay: 0s; }

.hero__trait {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, .35);
  position: relative;
  overflow: hidden;
}

.hero__trait::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--blanc);
  animation: goutte 2.2s ease-in-out infinite;
}

@keyframes goutte { to { top: 100%; } }

.passer {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(233, 80, 14, .35);
  backdrop-filter: blur(6px);
  color: var(--blanc);
  font: 500 13px/1 var(--police);
  letter-spacing: .08em;
  cursor: pointer;
  transition: opacity .4s, background .3s;
}

.passer:hover { background: rgba(233, 80, 14, .7); }
body:not(.intro) .passer { opacity: 0; pointer-events: none; }

/* ==========================================================
   MOMENT « ILS SE SONT DIT OUI ! »
   ========================================================== */
.hero__voile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(110, 0, 30, .5), transparent 78%);
  opacity: 0;
  transition: opacity .7s ease;
}

body.oui-actif .hero__voile::after { opacity: 1; }

.logo { transition: opacity .7s ease, transform .9s var(--ease-sortie); }

body.oui-actif .hero__logo .logo {
  opacity: .12;
  transform: scale(.82);
}

.oui {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  visibility: hidden;
  text-align: center;
}

body.oui-actif .oui { visibility: visible; }

.oui__haut {
  font-size: clamp(18px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(110, 0, 30, .45);
}

.oui__mot {
  font-size: clamp(96px, 25vw, 340px);
  font-weight: 600;
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 14px 50px rgba(110, 0, 30, .45);
}

/* Chaque lettre est animée séparément (découpage en JS) */
.lettre {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(.4em) scale(.2) rotate(var(--r0, 0deg));
  transition:
    transform .9s var(--ease-ressort),
    opacity .35s ease,
    filter .5s ease;
}

.oui__haut .lettre { transition-delay: calc(var(--i) * 28ms); }
.oui__mot .lettre  { transition-delay: calc(.35s + var(--i) * 90ms); }

body.oui-actif .lettre {
  opacity: 1;
  filter: none;
  transform: none;
}

/* L'explosion : chaque lettre part dans sa direction */
body.oui-actif .lettre.eclate {
  opacity: 0;
  filter: blur(8px);
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s));
  transition:
    transform 1s cubic-bezier(.15, .7, .3, 1),
    opacity .8s ease-in .15s,
    filter .8s ease-in;
  transition-delay: 0s;
}

/* ==========================================================
   CONTENU
   ========================================================== */
.contenu {
  max-width: 1040px;
  margin: 0 auto;
  padding: 88px 24px 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}

/* Entrées orchestrées après l'intro */
.date,
.compteur,
.programme,
.actions {
  transition: opacity .9s var(--ease-sortie), transform .9s var(--ease-sortie);
}

.date      { transition-delay: .25s; }
.compteur  { transition-delay: .75s; }
.programme { transition-delay: .9s; }
.actions   { transition-delay: 1s; }

body.intro .date,
body.intro .compteur,
body.intro .programme,
body.intro .actions {
  opacity: 0;
  transform: translateY(28px);
}

/* ---------- Date ---------- */
.date {
  position: relative;
  overflow: hidden;
  padding: 11px 24px;
  border-radius: 999px;
  background: var(--rose-clair);
  color: var(--orange-fonce);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.date sup { font-size: 10px; letter-spacing: .1em; }

.date__reflet {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: reflet 5s 3.4s ease-in-out infinite;
}

@keyframes reflet {
  0%   { transform: translateX(-120%); }
  30%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---------- Titre ---------- */
.titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  line-height: 1.05;
}

.ligne { display: block; overflow: hidden; padding: 0 .1em; }

.ligne__in {
  display: block;
  transition: transform 1.1s var(--ease-sortie);
}

.ligne:nth-child(1) .ligne__in { transition-delay: .3s; }
.ligne:nth-child(2) .ligne__in { transition-delay: .42s; }
.ligne:nth-child(3) .ligne__in { transition-delay: .54s; }

body.intro .ligne__in { transform: translateY(110%); }

.titre__petit {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .34em;
  margin-bottom: 8px;
  margin-top: 8px;
}

.titre__grand {
  font-size: clamp(30px, 5.6vw, 66px);
  font-weight: 600;
  letter-spacing: .08em;
}

.titre .ligne:nth-child(3) .titre__grand {
  font-weight: 300;
  letter-spacing: .14em;
}

/* ---------- Compte à rebours ---------- */
.compteur__cases {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.unite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.unite__nom {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
}

.carte {
  position: relative;
  height: var(--carte-h);
  min-width: calc(var(--carte-h) * .82);
  padding: 0 16px;
  perspective: 500px;
  font-size: var(--carte-fs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
  filter: drop-shadow(0 14px 22px rgba(120, 20, 0, .22));
}

.carte__mesure { visibility: hidden; line-height: var(--carte-h); display: block; }

.moitie {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--rose-clair);
  backface-visibility: hidden;
}

.moitie span {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--carte-h);
  line-height: var(--carte-h);
  text-align: center;
}

.moitie--haut { top: 0; border-radius: 14px 14px 0 0; }
.moitie--bas  { top: 50%; border-radius: 0 0 14px 14px; border-top: 1px solid #F3C2AC; }
.moitie--bas span { top: calc(var(--carte-h) / -2); }

.rabat--haut {
  transform-origin: 50% 100%;
  animation: rabat-haut .3s ease-in both;
  z-index: 2;
}

.rabat--bas {
  transform-origin: 50% 0;
  animation: rabat-bas .3s .3s ease-out both;
  z-index: 2;
}

@keyframes rabat-haut { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes rabat-bas  { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ---------- Programme ---------- */
.programme { position: relative; width: 100%; max-width: 900px; }

.programme__etapes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.programme__fil {
  position: absolute;
  top: 87px;              /* icône 56 + marge 24 + moitié du point 7 */
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}

.programme__fil span {
  position: absolute;
  inset: 0;
  background: var(--blanc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s .2s var(--ease-sortie);
}

.programme.visible .programme__fil span { transform: scaleX(1); }

.etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.etape__icone {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  fill: none;
  stroke: var(--blanc);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etape__icone path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease-sortie);
}

.programme.visible .etape__icone path { stroke-dashoffset: 0; }

.etape:nth-child(1) .etape__icone path { transition-delay: .3s; }
.etape:nth-child(2) .etape__icone path { transition-delay: .8s; }
.etape:nth-child(3) .etape__icone path { transition-delay: 1.3s; }

.etape__point {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 0 0 6px var(--orange);
  margin-bottom: 14px;
  transform: scale(0);
  transition: transform .6s var(--ease-ressort);
  position: relative;
  z-index: 1;
}

.programme.visible .etape__point { transform: scale(1); }
.etape:nth-child(1) .etape__point { transition-delay: .3s; }
.etape:nth-child(2) .etape__point { transition-delay: .9s; }
.etape:nth-child(3) .etape__point { transition-delay: 1.5s; }

.etape__heure {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.etape__nom { font-size: 24px; font-weight: 500; }

.etape__lieu { font-size: 17px; line-height: 1.5; }

.etape__lien {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  background: linear-gradient(var(--blanc), var(--blanc)) left bottom / 100% 1px no-repeat;
  transition: background-size .4s var(--ease-sortie);
}

.etape__lien:hover { background-size: 0 1px; background-position: right bottom; }

/* ---------- Actions ---------- */
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bouton {
  position: relative;
  overflow: hidden;
  padding: 18px 36px;
  border: 0;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--orange-fonce);
  font: 600 16px/1 var(--police);
  letter-spacing: .06em;
  cursor: pointer;
  isolation: isolate;
  transition: color .45s, transform .3s var(--ease-ressort);
}

.bouton__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--magenta);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-sortie);
}

.bouton:hover { color: var(--blanc); }
.bouton:hover .bouton__fond { transform: scaleX(1); }
.bouton:active { transform: scale(.96); }

.rsvp { font-size: 16px; line-height: 1.6; max-width: 34ch; }

/* ==========================================================
   BANDEAU DÉFILANT
   ========================================================== */
.bandeau {
  overflow: hidden;
  background: var(--magenta);
  padding: 26px 0;
  transform: rotate(-2deg) scale(1.04);
  margin: 0 0 -20px;
  position: relative;
  z-index: 1;
}

.bandeau__piste {
  display: flex;
  align-items: center;
  width: max-content;
  animation: defile 36s linear infinite;
}

.bandeau__piste span {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 300;
  letter-spacing: .06em;
  white-space: nowrap;
}

.bandeau__piste sup { font-size: .45em; }

.bandeau__piste i {
  width: 10px;
  height: 10px;
  margin: 0 36px;     
  border: 0;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;     
}

@keyframes defile { to { transform: translateX(-50%); } }

/* ==========================================================
   PIED DE PAGE
   ========================================================== */
.pied {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 120px 24px 96px;
  background: url('../img/motif-bande.jpg') center / cover no-repeat;
  text-align: center;
}

.pied__logo { width: 96px; height: auto; filter: drop-shadow(0 4px 14px rgba(120, 0, 40, .35)); }

.pied__texte { font-size: 20px; font-weight: 500; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(120, 0, 40, .45); }

/* ==========================================================
   CONFETTIS
   ========================================================== */
.confettis {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 760px) {
  :root { --carte-h: 78px; --carte-fs: 42px; }

  .hero { height: 100svh; }

  .contenu { padding: 56px 20px 88px; gap: 40px; }

  .date { font-size: 13px; letter-spacing: .22em; padding: 9px 18px; }

  .titre__petit { font-size: 15px; }
  .titre__grand { letter-spacing: .04em; }

  .compteur__cases { gap: 10px; }
  .carte { padding: 0 10px; min-width: 64px; }
  .unite__nom { font-size: 13px; }

  .programme__etapes { grid-template-columns: 1fr; gap: 44px; }
  .programme__fil { display: none; }
  .etape__point { display: none; }
  .etape__icone { margin-bottom: 4px; }

  .bandeau { padding: 18px 0; }
  .bandeau__piste i { margin: 0 22px; width: 8px; height: 8px; }

  .pied { padding: 88px 20px 72px; }
}

@media (max-width: 380px) {
  :root { --carte-h: 68px; --carte-fs: 36px; }
  .compteur__cases { gap: 8px; }
  .carte { min-width: 56px; padding: 0 8px; }
}

/* ==========================================================
   ANIMATIONS RÉDUITES
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero__motif { transform: none; }
}