:root {
  --bg: #000;
  --fg: #fff;
  --warm: #FFE5B4;
  --warm-soft: rgba(255, 229, 180, 0.18);
  --grey-soft: rgba(255, 255, 255, 0.55);

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Poppins', -apple-system, sans-serif;

  --ease-paper: cubic-bezier(0.32, 0, 0.16, 1);
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* iOS: pas de flash bleu au tap */
}

html, body {
  background:
    radial-gradient(ellipse 50% 42% at 50% 45%, #3d3d3d 0%, #1a1a1a 50%, #050505 100%);
  color: var(--fg);
  font-family: var(--font-sans);
  height: 100%;
  /* dynamic viewport height pour iOS Safari (compense la barre URL) */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none; /* pas de bounce/pull-to-refresh */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; /* iOS: pas de zoom auto landscape */
  text-rendering: optimizeLegibility;
  touch-action: pan-y;
}

/* Mode test fond blanc (?bg=white) — pour bien voir la boîte 3D */
html.bg-white, html.bg-white body {
  background: #ffffff;
  color: #000000;
}
html.bg-white .hint { color: #555; }

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:
    max(clamp(20px, 6vw, 60px), env(safe-area-inset-top))
    max(clamp(20px, 6vw, 60px), env(safe-area-inset-right))
    max(clamp(20px, 6vw, 60px), env(safe-area-inset-bottom))
    max(clamp(20px, 6vw, 60px), env(safe-area-inset-left));
  text-align: center;
}

#overlay > * { pointer-events: auto; }

.hint {
  position: fixed;
  bottom: max(8vh, calc(env(safe-area-inset-bottom) + 24px));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-soft);
  opacity: 0;
  pointer-events: none;
}

.chapter {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vh, 40px);
  align-items: center;
}

/* Hidden tient le pas sur tout (sinon les rules per-chapter écrasent display:none) */
[hidden] { display: none !important; }

/* Chapter 1 et 2 : layout fixed full-screen, contenu géré par les enfants */
.chapter[data-chapter="1"]:not([hidden]),
.chapter[data-chapter="2"]:not([hidden]) {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}
/* Intro chap 1 : centré au milieu de l'écran */
.chapter[data-chapter="1"] .chapter__intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 92vw;
}
/* Reveal chap 1 : logo + info groupés haut, bouton ancré bas — disposition Inti */
/* 3 zones explicites : logo @25% / info @50% / bouton @80% */
.chapter[data-chapter="1"] .chapter__reveal {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 35% 30% 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 0 4vw;
}
.chapter[data-chapter="1"] .reveal__info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chapter[data-chapter="1"] .cta[data-action="lever-voile"] {
  margin-top: 0;
}
/* Chapter 2 : tout centré */
.chapter[data-chapter="2"] > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Voile : overlay full-screen pour transition cinématique */
.veil {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transform: translateY(-100%);
  will-change: transform;
  overflow: hidden;
}
.veil__layer {
  position: absolute;
  inset: 0;
  background:
    /* Plis verticaux profonds (tissu lourd qui tombe) */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.92) 0px,
      rgba(28,28,32,0.85) 22px,
      rgba(8,8,10,0.95) 44px,
      rgba(35,35,40,0.78) 70px,
      rgba(0,0,0,0.95) 92px),
    /* Vignette centrale chaude (lumière qui filtre derrière le tissu) */
    radial-gradient(ellipse 80% 55% at 50% 40%, rgba(80,70,60,0.18), rgba(0,0,0,0.95) 65%),
    #000;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.veil__grain {
  position: absolute;
  inset: -50%;
  background-image:
    /* Trame velours (diagonale fine) */
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px, transparent 1px, transparent 3px),
    /* Plis horizontaux faibles (mouvement du tissu) */
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 12px);
  opacity: 0.85;
  mix-blend-mode: overlay;
  will-change: transform;
}
.veil__shine {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 22%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,0.04) 25%,
    rgba(255,240,210,0.12) 50%,
    rgba(255,255,255,0.04) 75%,
    transparent 100%);
  bottom: -22%;
  filter: blur(8px);
  will-change: transform;
}
.veil[hidden] { display: none; }

.chapter__intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: min(5.2vw, 4vh, 30px);
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--fg);
  max-width: min(92vw, 720px);
  padding: 0 4vw;
}

.reveal-logo {
  width: clamp(200px, 65vw, 360px);
  height: auto;
  display: block;
}

.reveal-tagline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 5.4vw, 30px);
  letter-spacing: 0.08em;
  color: var(--fg);
  margin-top: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.reveal-date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 6vw, 36px);
  letter-spacing: 0.04em;
  margin-top: 20px;
}

.reveal-place {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 3.6vw, 17px);
  color: var(--grey-soft);
  letter-spacing: 0.04em;
  margin-top: 14px;
}

.manifesto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manifesto__line {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 4.8vw, 26px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  opacity: 0; /* GSAP fade-in : évite flash visible avant gsap.set au boot */
}

/* Staccato : les 3 mots se superposent au MÊME endroit via CSS Grid (centrage dynamique, pas figé) */
.staccato {
  width: 100%;
  height: clamp(60px, 15vw, 90px);
  margin-top: 24px;
  opacity: 0;
  display: grid;
  place-items: center;
}

.staccato__word {
  grid-area: 1 / 1; /* tous les mots dans la même cellule = même point */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 8.4vw, 50px);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  padding: 0 4px;
  opacity: 0;
}

.nominative-block { opacity: 0; }

.nominative {
  margin-top: 32px;
}

.nominative__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 4vw, 18px);
  letter-spacing: 0.34em;
}

.nominative__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 3.6vw, 16px);
  letter-spacing: 0.04em;
  color: var(--grey-soft);
  margin-top: 12px;
}

/* Tous les CTAs en style ghost — DA cohérente sur toute l'expérience */
.cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 18px 44px;
  cursor: pointer;
  transition: background 0.25s var(--ease-soft), color 0.25s var(--ease-soft);
  margin-top: 28px;
  touch-action: manipulation; /* élimine le 300ms tap delay legacy iOS */
  min-height: 48px; /* WCAG/Apple HIG tap target min */
  -webkit-appearance: none;
  appearance: none;
}
.cta:hover { background: var(--fg); color: var(--bg); }
.cta:active { transform: translateY(1px); }

.cta--primary,
.cta--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
}

.rsvp {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  text-align: left;
}

.rsvp label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-soft);
}

.rsvp input[type="text"],
.rsvp input[type="email"],
.rsvp input:not([type]) {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 18px;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s;
}

.rsvp input:focus { border-color: var(--warm); }

.presence { border: none; }
.presence legend { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-soft); margin-bottom: 8px; }
.presence label { display: inline-flex; flex-direction: row; gap: 6px; margin-right: 18px; text-transform: none; font-family: var(--font-serif); letter-spacing: 0; }

.checkbox { flex-direction: row !important; gap: 10px !important; align-items: center; }

.qr__title { font-family: var(--font-sans); font-weight: 300; font-size: 14px; letter-spacing: 0.32em; }
.qr__code { width: clamp(220px, 60vw, 280px); height: auto; background: var(--fg); padding: 14px; margin: 18px 0; }
.qr__hint { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--grey-soft); }

.actions-row { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; width: 100%; max-width: 360px; }
.action-btn { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; padding: 16px 24px; background: var(--fg); color: var(--bg); text-decoration: none; cursor: pointer; transition: opacity 0.2s; text-align: center; display: block; }
.action-btn:hover { opacity: 0.85; }

.wallet-row { display: flex; flex-direction: row; gap: 10px; margin-top: 8px; width: 100%; max-width: 360px; justify-content: center; }
.wallet__btn { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 22px; border: 1px solid var(--fg); color: var(--fg); text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; flex: 1; text-align: center; }
.wallet__btn:hover { background: var(--fg); color: var(--bg); }

.closing__line { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 5vw, 30px); }
.closing__line--strong { font-family: var(--font-sans); font-weight: 700; font-style: normal; font-size: clamp(24px, 6vw, 38px); letter-spacing: 0.04em; margin-top: 26px; }
.closing__logo { width: clamp(160px, 35vw, 200px); margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}