/* ═════════════════════════════════════════════════════════════════════════════
   TCF INVITATION — Styles complets pour l'expérience invitation
   ═════════════════════════════════════════════════════════════════════════════ */

/* Watermark anti-reproduction IA — invisible visuellement. Le bloc reste
   dans le DOM (lisible par crawlers et scrappers) mais ne consomme aucun
   espace de mise en page. Voir templates/invitation/_ai_watermark.html.twig. */
.tch-ai-watermark {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VARIABLES & ROOT
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Charte Tchefon */
  --tch-primary: #1E2A5A;
  --tch-primary-hover: #16204A;
  --tch-secondary: #1F7A5C;
  --tch-secondary-hover: #17624A;
  --tch-tertiary: #1E2A5A;
  --tch-accent: #C6A15B;
  --tch-accent-hover: #A8843D;
  --tch-bg: #FFF7EA;
  --tch-surface: #FFFFFF;
  --tch-text: #1a1a2e;
  --tch-text-muted: #6b6b7b;
  --tch-error: #DC2626;

  /* Timing animations — Easing sacrés */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --dur-slow: 600ms;
  --dur-dramatic: 1200ms;

  /* Élévation — 3 niveaux standardisés (delivery et chapitres) */
  --dl-shadow-sm: 0 1px 6px rgba(28, 43, 74, 0.06);
  --dl-shadow-md: 0 4px 16px rgba(28, 43, 74, 0.08);
  --dl-shadow-lg: 0 8px 24px rgba(28, 43, 74, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CURSEUR BAGUE DE MARIAGE — Bague dorée + pétales de roses
   ───────────────────────────────────────────────────────────────────────────── */
@media (pointer: fine) {
  /* Curseur natif système restauré pour fluidité (le cursor-ring JS est désactivé).
     Le sélecteur universel * remettait cursor:auto sur les éléments interactifs
     non standards (cards cliquables, divs avec data-action, articles role=button…)
     qui devraient afficher le pointer. On restaure explicitement le curseur main :
     — éléments interactifs HTML natifs (a[href], button, input, label, select…)
     — éléments ARIA accessibles (role=button|link|tab|menuitem|option|checkbox…)
     — éléments avec attributs data-* d'action ou de navigation
     — tout élément focusable au clavier ([tabindex] non négatif) — convention
       qui couvre les cards customisées accessibles
     — classes Tchefon connues comme interactives */
  * { cursor: auto; }
  a[href],
  button:not(:disabled),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="file"],
  label[for],
  select,
  summary,
  details,
  [role="button"]:not([aria-disabled="true"]),
  [role="link"],
  [role="tab"],
  [role="menuitem"],
  [role="menuitemcheckbox"],
  [role="menuitemradio"],
  [role="option"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="treeitem"],
  [data-action],
  [data-target],
  [data-toggle],
  [data-open],
  [data-close],
  [data-href],
  [data-link],
  [data-story-index],
  [data-event-id],
  [data-value],
  [tabindex]:not([tabindex="-1"]):not(input):not(textarea),
  [onclick],
  .magnetic-btn,
  .glightbox,
  .inv-zoomable,
  /* Conventions de nommage Tchefon — les classes BEM qui contiennent __btn,
     __cta, __link, __nav ou se terminent par -btn / -cta sont cliquables
     par convention (cards cliquables, CTAs custom, liens stylés). Couvre
     tous les themes (tinhoetina, royal, sablier, baobab) sans les énumérer. */
  [class*="__btn"],
  [class*="__cta"],
  [class*="__link"],
  [class*="__chip"],
  [class*="__photo-link"],
  [class*="__page"],
  [class*="__continue"],
  [class*="__crafted-mark"],
  [class*="__powered-name"],
  [class*="__share"],
  [class*="__action"],
  [class*="__close"],
  [class*="__open"],
  [class*="__toggle"],
  [class*="-bg-link"],
  [class$="-btn"]:not(input):not(select):not(textarea),
  [class$="-cta"]:not(input),
  [class$="__card"]:not([class*="__card-img"]):not([class*="__card-bg"]):not([class*="__card-cover"]),
  [class*="__promo-code"],
  [class*="__name"][href],
  [class*="__name"][target] {
    cursor: pointer;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea,
  [contenteditable="true"] {
    cursor: text;
  }
  input[type="range"] {
    cursor: ew-resize;
  }
  button:disabled,
  [aria-disabled="true"],
  [disabled] {
    cursor: not-allowed;
  }
  .cursor-ring,
  .cursor-petal-canvas,
  .cursor-shockwave { display: none !important; }

  /* Canvas explosion de petales au clic — invisible quand canvas vide, ne capte
     aucun event pointer-events: none. Z-index sous les modales (10001+). */
  .click-petals-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
  }

  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 10003;
    /* Translation GPU-friendly via CSS vars maj par requestAnimationFrame.
       translate3d() force un layer dédié → pas d'invalidation de layout. */
    transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%);
    will-change: transform;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  .cursor-ring__band {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 4px solid var(--tch-accent);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
      inset 0 0 5px rgba(0, 0, 0, 0.2),
      0 0 5px rgba(198, 161, 91, 0.5);
  }

  .cursor-ring__diamond {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #ffffff 100%);
    top: 2px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.8),
      inset 0 0 5px rgba(255, 255, 255, 0.5);
    animation: cursor-sparkle 2s infinite;
  }

  .cursor-ring__diamond::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    top: 2px;
    left: 2px;
    transform: rotate(45deg);
  }

  .cursor-ring__spark {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
  }

  .cursor-ring__spark--1 {
    width: 4px;
    height: 4px;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    animation: cursor-spark-anim 2s infinite 0.3s;
  }

  .cursor-ring__spark--2 {
    width: 3px;
    height: 3px;
    top: 0;
    right: 8px;
    animation: cursor-spark-anim 2s infinite 0.6s;
  }

  .cursor-ring__spark--3 {
    width: 2px;
    height: 2px;
    top: 0;
    left: 8px;
    animation: cursor-spark-anim 2s infinite 0.9s;
  }

  @keyframes cursor-sparkle {
    0%, 100% { transform: translateX(-50%) rotate(45deg) scale(1); }
    50% { transform: translateX(-50%) rotate(45deg) scale(1.1); }
  }

  @keyframes cursor-spark-anim {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
  }

  .cursor-ring--clicking {
    transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%) scale(0.9);
  }

  .cursor-ring--clicking .cursor-ring__diamond {
    box-shadow:
      0 0 20px rgba(255, 255, 255, 1),
      0 0 40px rgba(198, 161, 91, 0.8),
      inset 0 0 5px rgba(255, 255, 255, 0.5);
  }

  /* Canvas pétales */
  .cursor-petal-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10004;
  }

  /* Shockwave au clic */
  .cursor-shockwave {
    position: fixed;
    border-radius: 50%;
    background: transparent;
    border: 3px solid rgba(198, 161, 91, 0.8);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9998;
    animation: cursor-shockwave 0.8s ease-out forwards;
  }

  @keyframes cursor-shockwave {
    0% { width: 10px; height: 10px; opacity: 1; border-width: 3px; }
    100% { width: 120px; height: 120px; opacity: 0; border-width: 0; }
  }
}

@media (pointer: coarse) {
  .cursor-ring,
  .cursor-petal-canvas {
    display: none !important;
  }
}

/* Canvas pétales tombants — actif sur TOUS les appareils.
   z-index: 1 pour rester derrière les cards delivery (z-index 10) tout en
   restant au-dessus du fond de page. */
.falling-petals-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .falling-petals-canvas {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ENVELOPPE SPLASH — Animation WOW
   ───────────────────────────────────────────────────────────────────────────── */
.env-splash-container {
  --env-primary: var(--tch-primary, #1E2A5A);
  --env-accent: var(--tch-accent, #C6A15B);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--env-primary) 0%, color-mix(in srgb, var(--env-primary), #000 30%) 100%);
  overflow: hidden;
}

/* Particules dorées en arrière-plan */
.env-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.env-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--env-accent);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 8s infinite ease-in-out;
}

@keyframes particle-float {
  0%, 100% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1);
  }
}

/* Contenu central */
.env-content {
  position: relative;
  z-index: 10;
  text-align: center;
  perspective: 1500px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   ENVELOPPE SPLASH — Animation Narrative Cinématographique
   Durée: 5 secondes | Boucle: indéfinie jusqu'au clic

   HISTOIRE:
   Acte 1 (0-1s):   L'ARRIVÉE     — L'enveloppe émerge de l'ombre avec flou
   Acte 2 (1-2.5s): L'INVITATION — "Vous êtes invité(e)" + noms apparaissent
   Acte 3 (2.5-4s): L'ATTENTE    — Le sceau pulse, l'enveloppe flotte doucement
   Acte 4 (4-5s+):  L'ACTION      — Le bouton pulse pour inciter au clic

   DOPAMINE TRIGGERS:
   - Anticipation: Sceau qui pulse
   - Curiosité: Contenu qui se révèle progressivement
   - Action: Bouton qui pulse doucement
   ═════════════════════════════════════════════════════════════════════════════ */

/* ACTE 1 : L'ARRIVÉE (0-1s) — L'enveloppe émerge de l'ombre */
.env-envelope-wrapper {
  position: relative;
  width: 320px;
  height: 220px;
  margin: 0 auto 3rem;
  transform-style: preserve-3d;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation:
    envelope-arrive 1s var(--ease-out-expo),
    envelope-float 4s ease-in-out 1s infinite;
}

@keyframes envelope-arrive {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes envelope-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Corps de l'enveloppe */
.env-envelope {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-spring);
}

.env-envelope.opening {
  transform: translateY(-40px);
}

/* Dos de l'enveloppe */
.env-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--env-accent) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%);
  border-radius: 0 0 12px 12px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* Rabat supérieur */
.env-flap-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--env-accent), #fff 15%) 0%, var(--env-accent) 100%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top;
  transition: transform 0.8s var(--ease-out-expo);
  z-index: 20;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.env-envelope.opening .env-flap-top {
  transform: rotateX(180deg);
  z-index: 5;
}

/* Rabat inférieur */
.env-flap-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--env-accent), #000 10%) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  z-index: 15;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
}

/* Côtés */
.env-flap-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--env-accent), #000 15%) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 10;
}

.env-flap-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 100%;
  background: linear-gradient(-90deg, color-mix(in srgb, var(--env-accent), #000 15%) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  z-index: 10;
}

/* ACTE 3 : L'ANTICIPATION — Le sceau pulse doucement */
.env-seal {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, var(--env-primary) 0%, color-mix(in srgb, var(--env-primary), #000 30%) 100%);
  border-radius: 50%;
  z-index: 25;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4),
    inset 0 -3px 8px rgba(0, 0, 0, 0.3),
    inset 0 3px 8px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: seal-pulse 2s ease-in-out infinite;
}

.env-seal::before {
  content: "♥";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes seal-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px 10px rgba(220, 38, 38, 0);
  }
}

/* Disparition du sceau à l'ouverture */
.env-envelope.opening .env-seal {
  animation: seal-break 0.6s var(--ease-spring) forwards;
}

@keyframes seal-break {
  to {
    transform: translateX(-50%) scale(0) rotate(180deg);
    opacity: 0;
  }
}

/* La carte intérieure */
.env-card {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 180px;
  background: linear-gradient(135deg, #fffef8 0%, #fdf9f0 100%);
  border-radius: 8px;
  z-index: 8;
  transform: translateY(0);
  transition: transform 1s var(--ease-spring);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.env-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 161, 91, 0.3);
  border-radius: 4px;
  pointer-events: none;
}

.env-envelope.opening .env-card {
  transform: translateY(-120px);
  transition-delay: 0.4s;
}

/* ACTE 2 : L'INVITATION (1-2.5s) — Le message se révèle */
.env-card-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  animation: content-reveal 5s var(--ease-out-expo) 1s;
}

@keyframes content-reveal {
  0%, 20% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  30%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Séquence narrative des textes */
.env-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--env-primary);
  margin-bottom: 0.75rem;
  opacity: 0;
  animation: text-reveal 5s var(--ease-out-expo) forwards;
}

.env-card-names {
  font-family: 'Alex Brush', cursive;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--tch-error);
  line-height: 1;
  opacity: 0;
  animation: text-reveal 5s var(--ease-out-expo) 0.3s forwards;
}

.env-card-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--tch-primary);
  margin-top: 0.5rem;
  opacity: 0;
  animation: text-reveal 5s var(--ease-out-expo) 0.6s forwards;
}

@keyframes text-reveal {
  0%, 20% {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(5px);
  }
  30%, 100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ACTE 4 : L'ACTION (3-5s) — Le bouton appelle au clic */
.env-open-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: transparent;
  border: 2px solid var(--env-accent);
  border-radius: 100px;
  color: var(--env-accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  animation: btn-entrance 5s var(--ease-out-expo) forwards;
  overflow: hidden;
}

@keyframes btn-entrance {
  0%, 50% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  70%, 100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(198, 161, 91, 0.4);
  }
}

/* Pulse continu après l'animation d'entrée */
.env-open-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--env-accent);
  border-radius: 100px;
  opacity: 0;
  animation: btn-pulse 2s ease-out 5s infinite;
}

@keyframes btn-pulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

.env-open-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--env-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
  z-index: -1;
}

.env-open-btn:hover {
  color: var(--tch-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(198, 161, 91, 0.3);
}

.env-open-btn:hover::before {
  transform: scaleX(1);
}

.env-open-btn:active {
  transform: translateY(0) scale(0.98);
}

.env-open-btn i {
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease-spring);
}

.env-open-btn:hover i {
  transform: translateX(4px);
}

.env-open-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

/* Bouton "Découvrir mon invitation" — après 5s */
.env-open-btn--discover {
  background: var(--env-accent);
  color: var(--env-primary);
  border-color: var(--env-accent);
  opacity: 0;
  animation: discover-entrance 0.8s var(--ease-out-expo) forwards;
  font-size: 0.85rem;
  padding: 1.1rem 2.8rem;
}

.env-open-btn--discover::after {
  border-color: var(--env-accent);
}

.env-open-btn--discover:hover {
  background: #fff;
  color: var(--env-primary);
  border-color: #fff;
}

@keyframes discover-entrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Carte intérieure — lisibilité améliorée */
.env-card-content {
  background: rgba(255, 255, 255, 0.95);
}

/* Animation de sortie du splash */
.env-splash-container.exiting {
  animation: splash-exit 0.8s var(--ease-in-out-circ) forwards;
}

@keyframes splash-exit {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGES DE STATUT (DRAFT, IN_REVIEW, ARCHIVED)
   ───────────────────────────────────────────────────────────────────────────── */
.status-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.status-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(198, 161, 91, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(31, 122, 92, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.status-container {
  position: relative;
  z-index: 10;
  max-width: 480px;
  text-align: center;
  animation: status-entrance 1s var(--ease-out-expo) forwards;
}

@keyframes status-entrance {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.status-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
}

.status-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed;
  animation: icon-rotate 20s linear infinite;
}

@keyframes icon-rotate {
  to { transform: rotate(360deg); }
}

/* Variantes de statut */
.status-draft .status-icon {
  background: rgba(107, 107, 123, 0.15);
  color: #9ca3af;
}

.status-draft .status-icon::before {
  border-color: rgba(156, 163, 175, 0.3);
}

.status-review .status-icon {
  background: rgba(217, 119, 6, 0.15);
  color: #f59e0b;
}

.status-review .status-icon::before {
  border-color: rgba(245, 158, 11, 0.3);
}

.status-archived .status-icon {
  background: rgba(30, 42, 90, 0.2);
  color: #6b7280;
}

.status-archived .status-icon::before {
  border-color: rgba(107, 114, 128, 0.3);
}

.status-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.status-message {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.status-couple {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--tch-accent);
  margin-bottom: 0.5rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2rem;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-draft .status-badge::before {
  background: #9ca3af;
  animation: pulse 2s infinite;
}

.status-review .status-badge::before {
  background: #f59e0b;
  animation: pulse 2s infinite;
}

.status-archived .status-badge::before {
  background: #6b7280;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.status-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.4s var(--ease-out-expo);
}

.status-btn-primary {
  background: var(--tch-accent);
  color: var(--tch-primary);
  border: 2px solid var(--tch-accent);
}

.status-btn-primary:hover {
  background: transparent;
  color: var(--tch-accent);
  transform: translateY(-2px);
}

.status-btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .env-envelope-wrapper {
    width: 260px;
    height: 180px;
  }

  .env-card {
    height: 140px;
  }

  .env-card-names {
    font-size: 1.4rem;
  }

  .env-open-btn {
    padding: 0.875rem 2rem;
    font-size: 0.75rem;
  }

  .status-title {
    font-size: 2rem;
  }

  .status-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
}

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

  .env-particle {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — Focus Visible
   ───────────────────────────────────────────────────────────────────────────── */
.inv-hero__cta:focus-visible,
.inv-resp-btn:focus-visible,
.inv-submit-btn:focus-visible,
.inv2-prog-card__btn:focus-visible,
.inv-input:focus-visible {
  outline: 2px solid var(--tch-accent, #C6A15B);
  outline-offset: 3px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   INVITATION PAGE — Styles dédiés
   Police : Cormorant Garamond (serif) + Jost (sans-serif)
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── Variables Invitation ─────────────────────────────────────── */
:root {
    --inv-cream: #FBF9F6;
    --inv-white: #FFFFFF;
    --inv-navy: var(--tch-primary, #1E2A5A);
    --inv-navy-lt: color-mix(in srgb, var(--tch-primary, #1E2A5A), #fff 15%);
    --inv-rose: color-mix(in srgb, var(--tch-primary, #1E2A5A), #000 20%);
    --inv-gold: var(--tch-accent, #C6A15B);
    --inv-gold-lt: color-mix(in srgb, var(--tch-accent, #C6A15B), #fff 35%);
    --inv-muted: #6B655D;
    --inv-text: #2D2D2D;
    --inv-border: #E8E0D5;
}

/* ─── Base (scoped to invitation page) ─────────────────────────── */
.p-page {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    background: var(--inv-cream);
    color: var(--inv-text);
    overflow-x: hidden;
}

/* ─── Preview banner ─────────────────────────────────────────────── */
.p-preview {
    background: #D97706;
    color: #fff;
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ─── HERO ───────────────────────────────────────────────────────── */
.p-hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4.5rem 2rem 5rem;
    position: relative;
    overflow: hidden;
    background-color: var(--inv-navy);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.p-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            var(--inv-cream) 100%);
    z-index: 0;
}

.p-hero-content {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
}

.p-guest-badge {
    display: inline-block;
    margin-bottom: 2rem;
    padding: 0.3rem 1.1rem;
    border: 1px solid rgba(184, 146, 74, 0.3);
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--inv-gold);
    font-weight: 400;
}

.p-eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--inv-gold);
    display: block;
    margin-bottom: 2rem;
}

/* Ornament */
.p-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 0 auto 2rem;
    max-width: 200px;
}

.p-orn-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--inv-gold-lt));
}

.p-orn-line.rev {
    background: linear-gradient(90deg, var(--inv-gold-lt), transparent);
}

.p-orn-dot {
    width: 4px;
    height: 4px;
    background: var(--inv-gold);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Names */
.p-names {
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    color: var(--inv-white);
    line-height: 0.9;
    margin-bottom: 0.2rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.p-name {
    display: block;
    font-size: clamp(4.5rem, 18vw, 7.5rem);
}

.p-amp {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-style: italic;
    font-weight: 300;
    color: var(--inv-gold);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Date + City */
.p-when {
    margin-top: 2rem;
    margin-bottom: 2.8rem;
    color: var(--inv-white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.p-date {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

.p-city {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 400;
    margin-top: 0.3rem;
    opacity: 0.9;
}

/* Countdown */
.p-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.p-cd-item {
    background: var(--inv-navy);
    color: var(--inv-white);
    text-align: center;
    padding: 1.5rem 0.5rem;
    min-width: 80px;
    border-radius: 40px;
    box-shadow: 0 8px 24px rgba(122, 27, 27, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.p-cd-num {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 8vw, 3rem);
    font-weight: 400;
    line-height: 1;
}

.p-cd-lbl {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--inv-gold-lt);
    margin-top: 0.5rem;
    font-weight: 600;
}

.p-cd-sep {
    display: none;
}

/* CTA Button */
.p-cta {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--inv-navy);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.p-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--inv-rose);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.p-cta:hover::before {
    transform: translateX(0);
}

.p-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: cta-glint 5s infinite;
    z-index: 1;
}

@keyframes cta-glint {
    0%, 80% { left: -150%; opacity: 0; }
    85% { opacity: 1; }
    90%, 100% { left: 150%; opacity: 0; }
}

.p-cta span {
    position: relative;
    z-index: 2;
}

.p-cta.p-cta--compact {
    padding: 0.6rem 2rem;
    font-size: 0.65rem;
}

/* Scroll indicator */
.p-scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.p-scroll-text {
    font-size: 0.45rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--inv-gold-lt);
    font-weight: 400;
}

.p-scroll-line {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, var(--inv-gold-lt), transparent);
    animation: inv-scroll-anim 2.5s ease-in-out infinite;
}

@keyframes inv-scroll-anim {
    0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ─── Fade-up animations ─────────────────────────────────────────── */
@keyframes inv-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.pf  { animation: inv-fade-up 0.9s ease both; }
.pf1 { animation: inv-fade-up 0.9s 0.1s ease both; }
.pf2 { animation: inv-fade-up 0.9s 0.25s ease both; }
.pf3 { animation: inv-fade-up 0.9s 0.4s ease both; }
.pf4 { animation: inv-fade-up 0.9s 0.58s ease both; }
.pf5 { animation: inv-fade-up 0.9s 0.75s ease both; }

/* ─── ARCHED PHOTOS & ROMANCE ───────────────────────────────────── */
.p-photo-arc {
    width: 240px;
    height: 340px;
    border-radius: 120px 120px 0 0;
    object-fit: cover;
    margin: 0 auto 2.5rem;
    display: block;
    box-shadow: 0 10px 40px rgba(122, 27, 27, 0.15);
    border: 6px solid var(--inv-white);
}

/* ─── PROGRAMME ──────────────────────────────────────────────────── */
.p-prog {
    background: var(--inv-cream);
    padding: 2rem 0;
}

.p-section {
    max-width: 560px;
    margin: 0 auto;
    padding: 4.5rem 2rem;
    text-align: center;
}

.p-section-tag {
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--inv-gold);
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
}

.p-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 9vw, 3.8rem);
    font-style: italic;
    font-weight: 400;
    color: var(--inv-navy);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.p-section-rule {
    width: 50px;
    height: 1px;
    background: var(--inv-gold);
    margin: 1.5rem auto 3rem;
}

/* Event card */
.p-event {
    background: var(--inv-white);
    border-radius: 20px;
    border: 1px solid rgba(198, 161, 91, 0.2);
    box-shadow: 0 8px 30px rgba(122, 27, 27, 0.04);
    padding: 2.5rem 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
}

.p-event:last-child { margin-bottom: 0; }

.p-ev-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.p-ev-time-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--inv-navy);
    color: var(--inv-white);
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(122, 27, 27, 0.15);
}

.p-ev-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--inv-navy);
    line-height: 1.2;
}

.p-ev-venue {
    font-size: 0.9rem;
    color: var(--inv-muted);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.p-ev-venue-icon {
    color: var(--inv-gold);
    margin-right: 0.35rem;
    font-size: 0.8rem;
}

.p-ev-desc {
    font-size: 0.84rem;
    color: var(--inv-muted);
    opacity: 0.65;
    margin-top: 0.3rem;
    margin-bottom: 0.7rem;
    line-height: 1.7;
    font-style: italic;
}

.p-ev-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: var(--inv-navy);
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-radius: 999px;
    margin-top: 0.4rem;
    transition: background 0.25s ease;
}

.p-ev-link:hover {
    background: var(--inv-rose);
    color: #fff;
}

/* ─── RSVP ───────────────────────────────────────────────────────── */
.p-rsvp {
    background: var(--inv-cream);
    padding: 3rem 1rem 5rem;
}

.p-rsvp-section {
    max-width: 580px;
    margin: 0 auto;
    padding: 4.5rem 3rem;
    background: var(--inv-white);
    border-radius: 16px;
    border: 1px solid rgba(198, 161, 91, 0.3);
    box-shadow: 0 15px 50px rgba(122, 27, 27, 0.08);
    text-align: center;
}

.p-rsvp-lead {
    font-size: 1.05rem;
    color: var(--inv-text);
    line-height: 1.8;
    margin-bottom: 3rem;
    font-weight: 300;
}

.p-field { margin-bottom: 2rem; }

.p-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--inv-navy);
    opacity: 0.5;
    margin-bottom: 0.65rem;
    font-weight: 500;
}

.p-input {
    width: 100%;
    background: var(--inv-white);
    border: 1.5px solid var(--inv-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--inv-navy);
    outline: none;
    transition: border-color 0.3s;
}

.p-input::placeholder { color: #9CA3AF; }
.p-input:focus { border-color: var(--inv-navy); }

.p-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.p-guest-name-light {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 300;
    color: var(--inv-navy);
}

.p-guest-label-section {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--inv-border);
}

.p-pres-title {
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--inv-navy);
    opacity: 0.4;
    display: block;
    margin: 2.5rem 0 1.8rem;
    font-weight: 500;
}

.p-ev-rsvp {
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--inv-border);
}

.p-ev-rsvp:first-child { border-top: 1px solid var(--inv-border); }

.p-ev-rsvp-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 300;
    color: var(--inv-navy);
    margin-bottom: 0.9rem;
}

/* Toggle buttons (Chips) */
.p-toggles {
    display: flex;
    gap: 0.6rem;
    background: rgba(122, 27, 27, 0.03);
    padding: 0.4rem;
    border-radius: 12px;
    border: 1px solid rgba(122, 27, 27, 0.08);
}

.p-toggles input[type="radio"] { display: none; }

.p-toggles label {
    flex: 1;
    text-align: center;
    padding: 0.8rem 0.25rem;
    border-radius: 8px;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    color: rgba(28, 43, 74, 0.45);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    position: relative;
    border: 1px solid transparent;
}

.p-toggles input[type="radio"]:checked+label {
    background: var(--inv-white);
    color: var(--inv-navy);
    box-shadow: 0 4px 15px rgba(122, 27, 27, 0.12);
    border-color: rgba(122, 27, 27, 0.15);
    transform: scale(1.02);
}

.p-toggles input[type="radio"]:checked+label::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    margin-right: 0.4rem;
    color: var(--inv-gold);
    opacity: 0;
    animation: fadeInCheck 0.3s forwards;
}

@keyframes fadeInCheck {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.p-toggles label:hover {
    color: var(--inv-navy);
    background: rgba(255, 255, 255, 0.5);
}

.p-num-input {
    width: 60px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--inv-border);
    padding: 0.4rem 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--inv-navy);
    text-align: center;
    outline: none;
    font-style: italic;
}

.p-plus-field { margin-top: 2rem; }

.p-submit {
    display: block;
    width: 100%;
    padding: 1.05rem;
    margin-top: 3rem;
    background: var(--inv-navy);
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    font-weight: 500;
    transition: background 0.3s ease;
}

.p-submit:hover { background: var(--inv-rose); }

/* Closed state */
.p-closed { text-align: center; padding: 2.5rem 0; }

.p-closed-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    color: var(--inv-navy);
    margin-bottom: 0.75rem;
}

.p-closed-text {
    font-size: 0.78rem;
    color: var(--inv-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.p-call {
    display: inline-block;
    padding: 0.85rem 2rem;
    border: 1px solid var(--inv-navy);
    color: var(--inv-navy);
    text-decoration: none;
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s;
}

.p-call:hover { background: var(--inv-navy); color: #fff; }

/* ─── FOOTER ─────────────────────────────────────────────────────── */
.p-footer {
    background: var(--inv-navy);
    text-align: center;
    padding: 3rem 1.5rem;
}

.p-footer-names {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    color: var(--inv-gold-lt);
}

.p-footer-rule {
    width: 28px;
    height: 1px;
    background: rgba(212, 180, 131, 0.25);
    margin: 0.8rem auto;
}

.p-footer-brand {
    font-size: 0.62rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
}

/* ═════════════════════════════════════════════════════════════════════════════
   DELIVERY / CLIENT SPACE — Styles dédiés (préfixe dl-)
   ═════════════════════════════════════════════════════════════════════════════ */

.dl-page {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    background: var(--inv-cream);
    color: var(--inv-navy);
    min-height: 100vh;
    padding-bottom: 5rem;
}

.dl-header {
    background: var(--inv-navy);
    text-align: center;
    padding: 4rem 2rem 5.5rem;
    position: relative;
    overflow: hidden;
}

.dl-header-arc {
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: min(120vw, 700px);
    height: min(120vw, 700px);
    border-radius: 50%;
    border: 1px solid rgba(212, 180, 131, 0.12);
    pointer-events: none;
}

.dl-header-tag {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--inv-gold);
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.dl-header-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 10vw, 4rem);
    font-style: italic;
    font-weight: 300;
    color: var(--inv-gold-lt);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.dl-header-names {
    font-family: 'Alex Brush', cursive;
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.dl-header-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
    font-weight: 300;
    line-height: 1.7;
}

/* .dl-content V1 supprimée — voir V2 mobile-first plus bas */

/* .dl-card / .dl-card-header / .dl-card-icon / .dl-card-title / .dl-card-lead
   / .dl-btn* / .dl-expiry V1 supprimés — versions unifiées mobile-first
   avec variables dynamiques --tch-* plus bas. */

.dl-card-icon--green {
    background: color-mix(in srgb, var(--tch-secondary, #1F7A5C), transparent 88%);
    color: var(--tch-secondary, #1F7A5C);
}

.dl-copy-btn--copied {
    background: color-mix(in srgb, var(--tch-secondary, #1F7A5C), transparent 88%) !important;
    color: var(--tch-secondary, #1F7A5C) !important;
    border-color: color-mix(in srgb, var(--tch-secondary, #1F7A5C), transparent 70%) !important;
}

.dl-msg-block { margin-bottom: 1.8rem; }
.dl-msg-block:last-child { margin-bottom: 0; }

.dl-msg-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tch-accent, #C6A15B);
    flex-shrink: 0;
}

/* .dl-textarea V1 supprimée — voir V2 mobile-first plus bas */

.dl-qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.dl-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--inv-cream);
    border: 1px solid var(--inv-border);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
}

.dl-qr-badge {
    display: inline-block;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--inv-gold);
    background: rgba(184, 146, 74, 0.1);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.dl-qr-image-wrap {
    background: #fff;
    border: 1px solid var(--inv-border);
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.dl-qr-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
}

.dl-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--inv-navy);
    color: #fff;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(28, 43, 74, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100;
}

.dl-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dl-toast-icon { color: var(--inv-gold-lt); }

.dl-footer { text-align: center; padding: 3rem 1rem 1rem; }

.dl-footer-brand {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--inv-muted);
    opacity: 0.45;
}

/* ─── Sticky Action Bar ─────────────────────────────────────────── */
.sticky-action-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.sticky-action-bar--visible {
    transform: translateY(0);
    opacity: 1;
}

.sticky-action-bar-inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* ═════════════════════════════════════════════════════════════════════════════
   INVITATION PAGE — Styles post-enveloppe
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --inv-primary: var(--tch-primary, #1E2A5A);
  --inv-primary-light: #2d3d7a;
  --inv-accent: var(--tch-accent, #C6A15B);
  --inv-accent-light: color-mix(in srgb, var(--tch-accent, #C6A15B), #fff 30%);
  --inv-success: var(--tch-accent, #1F7A5C);
  --inv-warning: #d97706;
  --inv-error: #DC2626;
  --inv-text-muted: #6b6b7b;
  --inv-bg: var(--tch-bg, #FFF7EA);
  --inv-radius-sm: 8px;
  --inv-radius-md: 12px;
  --inv-radius-lg: 20px;
  --inv-radius-xl: 50px;
  --inv-shadow-sm: 0 2px 8px rgba(30, 42, 90, 0.08);
  --inv-shadow-md: 0 8px 24px rgba(30, 42, 90, 0.12);
  --inv-shadow-lg: 0 16px 48px rgba(30, 42, 90, 0.16);
  --inv-shadow-accent: 0 8px 32px rgba(198, 161, 91, 0.3);
  --inv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --inv-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

body, main {
  margin: 0;
  padding: 0;
}

/* ── Page mot de passe — Accès protégé ────────────────────────────── */
.inv-password-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tch-primary, #1E2A5A) 0%, color-mix(in srgb, var(--tch-primary, #1E2A5A), #000 30%) 100%);
  padding: 2rem;
}

.inv-password-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.inv-password-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 90%);
  color: var(--tch-accent, #C6A15B);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1.5rem;
}

.inv-password-title {
  font-family: 'Alex Brush', cursive;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--tch-primary, #1E2A5A);
  margin: 0 0 0.8rem;
  line-height: 1.2;
}

.inv-password-sub {
  font-size: 0.85rem;
  color: #6b6b7b;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.inv-password-error {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.inv-password-form {
  margin-bottom: 1.5rem;
}

.inv-password-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1.5px solid #E8E0D5;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.15em;
  transition: border-color 0.25s ease;
  outline: none;
  box-sizing: border-box;
}

.inv-password-input:focus {
  border-color: var(--tch-accent, #C6A15B);
}

.inv-password-submit {
  width: 100%;
  padding: 0.9rem;
  background: var(--tch-primary, #1E2A5A);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.2s ease;
}

.inv-password-submit:hover {
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A), #fff 15%);
  transform: translateY(-1px);
}

.inv-password-hint {
  font-size: 0.72rem;
  color: #9ca3af;
  margin: 0;
}

/* Masquer tout élément audio natif du navigateur */
audio {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.invitation-wrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--inv-bg);
  color: var(--inv-text);
  line-height: 1.6;
  overflow-x: clip;
}

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

/* Hero */
.inv-hero {
  padding-top: 50px;
  position: relative;
  /* min-height: 100vh;*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--inv-primary);
}

.inv-hero__bg { position: absolute; inset: 0; }
.inv-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
/* <picture> wrapper transparent : l'<img> enveloppé participe à la mise en page
   comme s'il était enfant direct du conteneur. Règle globale (invitation-scopée,
   ce fichier n'est chargé que sur /w/) → couvre TOUS les thèmes sans énumérer
   leurs conteneurs, indispensable depuis que les images passent par tch_picture
   (<picture><source avif><source webp><img></picture>). */
picture { display: contents; }

.inv-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 70%) 0%, color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 55%) 100%);
}

.inv-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  max-width: 800px;
}

.inv-hero__badge {
  display: inline-block;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 80%);
  border: 1px solid var(--inv-accent);
  border-radius: var(--inv-radius-xl);
  color: var(--inv-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Bloc couple : [portrait] & [portrait] */
.inv-hero__couple-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.5rem;
  position: relative;
}

.inv-hero__couple-row .inv-hero__portrait {
  position: relative;
  opacity: 0;
  flex-shrink: 0;
}

.inv-hero__couple-row .inv-hero__portrait--left { left: auto; }
.inv-hero__couple-row .inv-hero__portrait--right { right: auto; }

.inv-hero__couple-row .inv-hero__amp-solo {
  margin: 0 0.5rem;
  align-self: center;
}

.inv-hero__names {
  font-family: 'Alex Brush', cursive;
  font-weight: 400;
  font-size: clamp(4rem, 14vw, 7.5rem);
  color: var(--tch-bg, #FFF7EA);
  line-height: 0.85;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.inv-hero__name { display: block; }

.inv-hero__amp {
  color: var(--inv-accent);
  font-size: 0.5em;
  display: inline-block;
  margin: 0.2em 0;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 10px var(--inv-accent); }
  50% { text-shadow: 0 0 30px var(--inv-accent), 0 0 50px var(--inv-accent); }
}

/* Date graphique — bloc stylisé */
.inv-hero__date-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 0.5rem;
}

.inv-hero__date-day {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 10vw, 4.5rem);
  font-weight: 300;
  color: var(--tch-bg, #FFF7EA);
  line-height: 1;
}

.inv-hero__date-sep {
  width: 1px;
  height: 40px;
  background: var(--inv-accent);
  opacity: 0.5;
}

.inv-hero__date-month {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  text-transform: capitalize;
  color: var(--inv-accent-light);
  letter-spacing: 0.1em;
}

.inv-hero__date-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 10vw, 4.5rem);
  font-weight: 300;
  color: var(--tch-bg, #FFF7EA);
  line-height: 1;
}

.inv-hero__location {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.inv-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--inv-accent), var(--inv-accent-light));
  color: var(--inv-primary);
  border-radius: var(--inv-radius-xl);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--inv-shadow-accent);
  transition: all 0.3s var(--inv-ease-spring);
  border: none;
  cursor: pointer;
}

.inv-hero__cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 40px rgba(198, 161, 91, 0.5);
}

.inv-hero__cta i { animation: heartbeat 1.5s ease-in-out infinite; }

/* ── Portraits dans le hero — L'Entrée des Mariés ── */
.inv-hero__portrait {
  position: relative;
  z-index: 5;
  width: clamp(130px, 22vw, 280px);
  /* Invisible par défaut — animation déclenchée quand le wrapper est visible */
  opacity: 0;
}

/* Animation déclenchée seulement quand invitation-wrapper est visible (pas pendant l'enveloppe) */
.invitation-wrapper:not(.inv-hidden) .inv-hero__portrait--left {
  animation: hero-enter-left 1s var(--ease-out-expo) 0.8s forwards;
}

.invitation-wrapper:not(.inv-hidden) .inv-hero__portrait--right {
  animation: hero-enter-right 1s var(--ease-out-expo) 1.1s forwards;
}

@keyframes hero-enter-left {
  0% { opacity: 0; transform: translateX(-60px) scale(0.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes hero-enter-right {
  0% { opacity: 0; transform: translateX(60px) scale(0.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.inv-hero__portrait img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
  transition: transform 0.6s var(--ease-out-expo);
}

.inv-hero__portrait:hover img {
  transform: scale(1.02) translateY(-4px);
}

/* Shimmer — désactivé */
.inv-hero__portrait::after {
  display: none;
  transform: translateX(-120%);
  pointer-events: none;
}

.invitation-wrapper:not(.inv-hidden) .inv-hero__portrait::after {
  animation: couple-shimmer 1.2s var(--ease-out-expo) 2.2s forwards;
}

/* Halo doré pulsant derrière le portrait */
.inv-hero__portrait-glow {
  display: none;
}

/* Nom sur le portrait — c'est LUI la star, pas le texte central */
.inv-hero__portrait-name {
  display: block;
  text-align: center;
  font-family: 'Alex Brush', cursive;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--tch-accent, #C6A15B);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 40px color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 70%);
  padding: 8px 0 16px;
  letter-spacing: 0.02em;
  /* Invisible par défaut — animé quand wrapper visible */
  opacity: 0;
}

.invitation-wrapper:not(.inv-hidden) .inv-hero__portrait--left .inv-hero__portrait-name {
  animation: hero-name-reveal 0.8s var(--ease-out-expo) 1.2s forwards;
}

.invitation-wrapper:not(.inv-hidden) .inv-hero__portrait--right .inv-hero__portrait-name {
  animation: hero-name-reveal 0.8s var(--ease-out-expo) 1.5s forwards;
}

@keyframes hero-name-reveal {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Ampersand solo au centre — connecte visuellement les deux portraits */
.inv-hero__amp-solo {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 400;
  color: var(--inv-accent);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0 0 1rem;
  line-height: 1;
}

/* ── Couple band (3ème photo pleine largeur) ── */
.inv-couple-band {
  position: relative;
  max-height: 500px;
  overflow: hidden;
}

.inv-couple-band img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: cover;
  object-position: center top;
}

.inv-couple-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 90%) 0%, color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 70%) 100%);
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.15); }
}

/* RSVP Section */
.inv-rsvp { padding: 24px 16px; max-width: 800px; margin: 0 auto; }
.inv-rsvp__header { text-align: center; margin-bottom: 48px; }

.inv-rsvp__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--inv-accent);
  margin-bottom: 12px;
}

.inv-rsvp__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--inv-primary);
  margin-bottom: 12px;
}

.inv-rsvp__subtitle { color: var(--inv-text-muted); font-size: 1.1rem; }

/* Intro card */
.inv-intro {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--inv-radius-md);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 90%);
  margin-bottom: 40px;
  box-sizing: border-box;
}
@media (min-width: 480px) {
  .inv-intro { padding: 36px 28px; }
}

.inv-intro__icon { font-size: 4rem; margin-bottom: 20px; animation: bounce 2s infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.inv-intro h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--inv-primary);
  margin-bottom: 12px;
}

.inv-intro > p { color: var(--inv-text-muted); margin-bottom: 32px; line-height: 1.6; }
.inv-intro--spaced { margin-bottom: 30px; }

/* Utilitaire masquage */
.inv-hidden { display: none; }

.inv-name-field { max-width: 400px; width: 100%; margin: 0 auto 24px; box-sizing: border-box; }

.inv-name-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--inv-text-muted);
  margin-bottom: 8px;
  text-align: left;
}

.inv-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 2px solid rgba(30, 42, 90, 0.1);
  border-radius: var(--inv-radius-md);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s;
  background: white;
}

.inv-input:focus { outline: none; border-color: var(--inv-accent); box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.1); }
.inv-input--error { border-color: var(--inv-error); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); animation: shake 0.4s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.inv-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--inv-primary);
  color: var(--tch-bg, #FFF7EA);
  border: none;
  border-radius: var(--inv-radius-xl);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--inv-ease-spring);
}

.inv-btn:hover { transform: translateY(-2px); box-shadow: var(--inv-shadow-lg); }

/* ─────────────────────────────────────────────────────────────────────────────
   PROGRAMME — Cards enrichies avec dopamine design
   ───────────────────────────────────────────────────────────────────────────── */
.inv-programme {
  padding: 80px 24px 60px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* Fond alternance : section programme sur fond clair */
.inv-programme-section {
  background: var(--inv-bg);
  position: relative;
}

/* Fond alternance : section RSVP sur fond plus sombre */
.inv-rsvp-section {
  background: var(--inv-primary);
  position: relative;
}

.inv-rsvp-section .inv-rsvp__eyebrow { color: var(--inv-accent-light); }
.inv-rsvp-section .inv-rsvp__title { color: var(--tch-bg, #FFF7EA); }
.inv-rsvp-section .inv-rsvp__subtitle { color: rgba(255, 255, 255, 0.75); }
.inv-rsvp-section .inv-guest-greeting { color: rgba(255, 255, 255, 0.85); }
.inv-rsvp-section .inv-guest-greeting strong { color: var(--inv-accent-light); }
.inv-rsvp-section .inv-event { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); }
.inv-rsvp-section .inv-event__badge { background: color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 75%); color: var(--inv-accent-light); }
.inv-rsvp-section .inv-event__name { color: var(--tch-bg, #FFF7EA); }
.inv-rsvp-section .inv-event__question { color: var(--inv-accent-light); }
.inv-rsvp-section .inv-resp-btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.75); }
.inv-rsvp-section .inv-resp-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); }
.inv-rsvp-section .inv-resp-btn--yes.selected { background: var(--inv-success); border-color: transparent; color: var(--tch-bg, #FFF7EA); }
.inv-rsvp-section .inv-resp-btn--maybe.selected { background: var(--inv-warning); border-color: transparent; color: var(--tch-bg, #FFF7EA); }
.inv-rsvp-section .inv-resp-btn--no.selected { background: var(--inv-error); border-color: transparent; color: var(--tch-bg, #FFF7EA); }
.inv-rsvp-section .inv-name-field label { color: rgba(255, 255, 255, 0.65); }
.inv-rsvp-section .inv-input { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--tch-bg, #FFF7EA); }
.inv-rsvp-section .inv-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.inv-rsvp-section .inv-input:focus { border-color: var(--inv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 80%); }
.inv-rsvp-section .inv-intro { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.inv-rsvp-section .inv-summary { background: linear-gradient(135deg, color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 80%), color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 90%)); }
.inv-rsvp-section .inv-summary h3 { color: var(--tch-bg, #FFF7EA); }

/* Ornement décoratif entre sections */
.inv-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.inv-ornament svg {
  display: block;
  width: 120px;
  height: auto;
  color: var(--inv-accent);
  opacity: 0.5;
}

/* Ornement sur fond sombre */
.inv-ornament--dark svg {
  color: var(--inv-accent-light);
  opacity: 0.3;
}

/* Séparateur doré fin */
.inv-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 0;
}

.inv-divider__line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--inv-accent));
}

.inv-divider__line--rev {
  background: linear-gradient(90deg, var(--inv-accent), transparent);
}

.inv-divider__diamond {
  width: 8px;
  height: 8px;
  background: var(--inv-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Divider dans sections sombres */
.inv-ornament--dark .inv-divider__line { background: linear-gradient(90deg, transparent, rgba(198, 161, 91, 0.3)); }
.inv-ornament--dark .inv-divider__line--rev { background: linear-gradient(90deg, rgba(198, 161, 91, 0.3), transparent); }
.inv-ornament--dark .inv-divider__diamond { background: rgba(198, 161, 91, 0.4); }

.inv-programme__header {
  text-align: center;
  margin-bottom: 48px;
}

.inv-programme__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--inv-accent);
  margin-bottom: 12px;
}

.inv-programme__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--inv-primary);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.inv-programme__rule {
  width: 50px;
  height: 1px;
  background: var(--inv-accent);
  margin: 1.2rem auto 0;
}

.inv-programme__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Programme card — rendu flottant, pas de boîte */
.inv-prog-card {
  display: flex;
  gap: 20px;
  background: transparent;
  padding: 24px 0;
  border: none;
  border-bottom: 1px solid rgba(198, 161, 91, 0.15);
  transition: background 0.3s ease;
  position: relative;
  z-index: 1;
}

.inv-prog-card:last-child { border-bottom: none; }

.inv-prog-card:hover {
  background: rgba(198, 161, 91, 0.04);
}

.inv-prog-card__time {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.inv-prog-card__hour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--inv-primary);
  color: var(--tch-bg, #FFF7EA);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 7px 16px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(30, 42, 90, 0.15);
}

.inv-prog-card__body {
  flex: 1;
  min-width: 0;
}

.inv-prog-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--inv-primary);
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.25;
}

.inv-prog-card__location {
  font-size: 0.82rem;
  color: var(--inv-text-muted);
  margin: 0 0 4px;
  line-height: 1.5;
}

.inv-prog-card__location i {
  color: var(--inv-accent);
  margin-right: 5px;
  font-size: 0.72rem;
}

.inv-prog-card__address {
  font-size: 0.75rem;
  color: var(--inv-text-muted);
  opacity: 0.6;
  margin: 0 0 8px;
  line-height: 1.5;
  padding-left: 18px;
}

.inv-prog-card__desc {
  font-size: 0.8rem;
  color: var(--inv-text-muted);
  margin: 10px 0 0;
  line-height: 1.65;
  opacity: 0.75;
  font-style: italic;
  border-top: 1px solid rgba(30, 42, 90, 0.06);
  padding-top: 12px;
}

/* Guest greeting */
.inv-guest-greeting {
  text-align: center;
  margin-bottom: 32px;
  font-size: 1.05rem;
  color: var(--inv-primary);
}

.inv-guest-greeting strong {
  color: var(--inv-accent);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
}

/* Question per RSVP card */
.inv-event__question {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--inv-accent);
  text-align: center;
  margin: 0 0 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RSVP EVENT CARDS — Poll/Story style (gros boutons, mobile-first)
   ───────────────────────────────────────────────────────────────────────────── */
.inv-event {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--inv-radius-md);
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 90%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.inv-event--entering { opacity: 0; transform: translateY(16px); }
.inv-event--entered { opacity: 1; transform: translateY(0); transition: all 0.5s ease; }

.inv-event--yes { border-color: rgba(31, 122, 92, 0.3); box-shadow: 0 2px 12px rgba(31, 122, 92, 0.08); }
.inv-event--no { border-color: rgba(220, 38, 38, 0.25); box-shadow: 0 2px 12px rgba(220, 38, 38, 0.06); }
.inv-event--maybe { border-color: rgba(217, 119, 6, 0.25); box-shadow: 0 2px 12px rgba(217, 119, 6, 0.06); }

.inv-event__top {
  margin-bottom: 16px;
  text-align: center;
}

.inv-event__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--inv-accent);
  background: rgba(198, 161, 91, 0.1);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.inv-event__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  color: var(--inv-primary);
  font-weight: 500;
  margin: 0 0 6px;
  line-height: 1.25;
}

/* Response buttons — gros pills avec texte (style poll) */
.inv-responses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.inv-resp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1.5px solid rgba(30, 42, 90, 0.1);
  border-radius: var(--inv-radius-xl);
  background: white;
  cursor: pointer;
  transition: all 0.2s var(--inv-ease-spring);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--inv-text-muted);
}

.inv-resp-btn i { font-size: 0.75rem; }
.inv-resp-btn:hover { transform: translateY(-2px); box-shadow: var(--inv-shadow-sm); }

.inv-resp-btn--yes:hover { border-color: var(--inv-success); color: var(--inv-success); }
.inv-resp-btn--maybe:hover { border-color: var(--inv-warning); color: var(--inv-warning); }
.inv-resp-btn--no:hover { border-color: var(--inv-error); color: var(--inv-error); }

.inv-resp-btn--yes.selected {
  background: var(--inv-success);
  color: var(--tch-bg, #FFF7EA);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(31, 122, 92, 0.3);
  transform: scale(1.03);
}

.inv-resp-btn--maybe.selected {
  background: var(--inv-warning);
  color: var(--tch-bg, #FFF7EA);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.3);
  transform: scale(1.03);
}

.inv-resp-btn--no.selected {
  background: var(--inv-error);
  color: var(--tch-bg, #FFF7EA);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.25);
  transform: scale(1.03);
}

/* Progress bar */
.inv-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--inv-ease-spring);
  z-index: 1000;
  box-shadow: var(--inv-shadow-sm);
}

.inv-progress.visible { transform: translateY(0); }
.inv-progress__bar { flex: 1; height: 6px; background: rgba(30, 42, 90, 0.1); border-radius: 3px; overflow: hidden; }
.inv-progress__fill { height: 100%; background: linear-gradient(90deg, var(--inv-accent), var(--inv-accent-light)); width: 0%; transition: width 0.5s var(--inv-ease-spring); box-shadow: 0 0 10px rgba(198, 161, 91, 0.5); }
.inv-progress__text { font-size: 0.75rem; font-weight: 600; color: var(--inv-primary); min-width: 90px; text-align: right; }

/* Summary */
.inv-summary { background: linear-gradient(135deg, var(--inv-primary), var(--inv-primary-light)); border-radius: var(--inv-radius-lg); padding: 40px 32px; color: var(--tch-bg, #FFF7EA); text-align: center; margin-top: 40px; }
.inv-summary h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; margin-bottom: 24px; }

.inv-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--inv-accent), var(--inv-accent-light));
  color: var(--inv-primary);
  border: none;
  border-radius: var(--inv-radius-xl);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--inv-ease-spring);
  box-shadow: 0 8px 24px rgba(198, 161, 91, 0.3);
}

.inv-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(198, 161, 91, 0.4); }
.inv-submit-btn--success { background: var(--inv-success); color: var(--tch-bg, #FFF7EA); box-shadow: 0 8px 24px rgba(31, 122, 92, 0.3); }
.inv-submit-btn--success:hover { box-shadow: 0 12px 40px rgba(31, 122, 92, 0.4); }

/* Footer */
/* ──────────────────────────────────────────────────────────────────────────
   FOOTER — Bandeau de signature mono-ligne (compact, ciselé, adaptatif)
   Toutes les couleurs passent par les custom properties pour s'adapter aux
   thèmes (tinhoetina, royal, classique, tropical) et aux weddingColors :
     - var(--inv-primary)  : fond du bandeau
     - var(--tch-accent)   : accent doré ou couleur secondaire du mariage
     - var(--tch-bg)       : ivoire texte
   ────────────────────────────────────────────────────────────────────────── */

.inv-footer {
  padding: 26px 24px 22px;
  text-align: center;
  background: var(--inv-primary);
  color: var(--tch-bg, #FFF7EA);
  position: relative;
  overflow: hidden;
}

/* Bandeau mono-ligne horizontal */
.inv-footer__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: nowrap;
}

/* Tirets dorés latéraux — fade vers les losanges */
.inv-footer__rule {
  flex: 1 1 auto;
  height: 1px;
  max-width: 110px;
  min-width: 20px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 45%) 100%
  );
}
.inv-footer__rule--right {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 45%) 0%,
    transparent 100%
  );
}

/* Losanges scintillants — pulsation lente décalée et rotation 45° */
.inv-footer__mark {
  flex: 0 0 auto;
  font-size: 0.5rem;
  color: var(--tch-accent, #C6A15B);
  opacity: 0.85;
  line-height: 1;
  animation: footer-mark-twinkle 4.5s ease-in-out infinite;
}
.inv-footer__mark:last-of-type { animation-delay: 2.25s; }

@keyframes footer-mark-twinkle {
  0%, 100% { opacity: 0.45; transform: scale(1)    rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.35) rotate(45deg); text-shadow: 0 0 8px currentColor; }
}

/* ── Anciennes classes inutilisées — conservées pour compatibilité backward */
.inv-footer__glow,
.inv-footer__sparkles,
.inv-footer__seal,
.inv-footer__aurora { display: none; }
.inv-footer__seal-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 65%));
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.inv-footer__seal-circle {
  stroke-dashoffset: 182;
  animation: footer-seal-draw 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
@keyframes footer-seal-draw {
  to { stroke-dashoffset: 0; }
}
.inv-footer__seal:hover {
  transform: rotate(8deg) scale(1.08);
}
.inv-footer__seal:hover .inv-footer__seal-svg {
  filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 40%));
}
.inv-footer__seal:focus-visible {
  outline: 2px solid var(--tch-accent, #C6A15B);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Croix dorée */
.inv-footer__cross {
  font-size: 1.6rem;
  color: var(--tch-accent, #C6A15B);
  margin-bottom: 20px;
  line-height: 1;
  opacity: 0.7;
  position: relative;
}

/* Ornement — ligne + losange + ligne */
.inv-footer__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.inv-footer__line {
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
}
.inv-footer__ornament .inv-footer__line:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
}
.inv-footer__diamond {
  font-size: 0.45rem;
  color: var(--tch-accent, #C6A15B);
  opacity: 0.6;
}

.inv-footer__names {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  margin-bottom: 12px;
  line-height: 1.2;
  color: var(--tch-bg, #FFF7EA);
  position: relative;
}

.inv-footer__date {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--tch-accent, #C6A15B);
  margin-bottom: 24px;
  opacity: 0.9;
}

.inv-footer__brand {
  font-size: 0.68rem;
  opacity: 0.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────────────────────
   FOOTER — Crédit « Powered by ST Lab »
   Sobre, double échelle typographique, adapté aux couleurs du mariage
   (var(--tch-accent) pour l'or, var(--inv-primary) pour le fond).
   ────────────────────────────────────────────────────────────────────────── */

/* Crédit — inline, baseline aligned, sur une seule ligne */
.inv-footer__credit {
  position: relative;
  z-index: 1;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.inv-footer__credit-prefix {
  font-family: 'Inter', 'Source Sans Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-left: 0.32em; /* compense le letter-spacing pour centrage optique */
  color: color-mix(in srgb, var(--tch-bg, #FFF7EA), transparent 55%);
  line-height: 1;
  flex: 0 0 auto;
}

/* Nom signature — dégradé doré shimmer qui glisse en boucle lente */
.inv-footer__credit-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  flex: 0 0 auto;
  position: relative;
  background-image: linear-gradient(
    110deg,
    var(--tch-accent, #C6A15B) 0%,
    color-mix(in srgb, var(--tch-accent, #C6A15B), #fff 42%) 35%,
    var(--tch-accent, #C6A15B) 70%,
    color-mix(in srgb, var(--tch-accent, #C6A15B), #fff 42%) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: footer-shimmer 6s linear infinite;
  transition: letter-spacing 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Soulignement doré qui se trace au hover du nom (lien vers stlab.ci) */
.inv-footer__credit-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--tch-accent, #C6A15B);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}

.inv-footer__credit-name:hover {
  letter-spacing: 0.1em;
}
.inv-footer__credit-name:hover::after,
.inv-footer__credit-name:focus-visible::after {
  transform: scaleX(1);
}

.inv-footer__credit-name:focus-visible {
  outline: 2px solid var(--tch-accent, #C6A15B);
  outline-offset: 4px;
  border-radius: 2px;
}

@keyframes footer-shimmer {
  to { background-position: 220% 50%; }
}

/* Aurore dorée — ligne fine animée sous le crédit, va-et-vient lent */
.inv-footer__aurora {
  position: relative;
  z-index: 1;
  margin: 14px auto 0;
  width: min(220px, 60%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 30%) 50%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 0% 0%;
  animation: footer-aurora 5.5s ease-in-out infinite;
}

@keyframes footer-aurora {
  0%, 100% { background-position: -110% 0; opacity: 0.35; }
  50%      { background-position: 110% 0;  opacity: 1; }
}

/* Mobile compact : on réduit gaps et tailles pour garder la ligne unique */
@media (max-width: 640px) {
  .inv-footer { padding: 22px 16px 18px; }
  .inv-footer__inner { gap: 10px; }
  .inv-footer__rule { max-width: 60px; }
  .inv-footer__credit { gap: 8px; }
  .inv-footer__credit-prefix { font-size: 0.55rem; letter-spacing: 0.26em; padding-left: 0.26em; }
}
@media (max-width: 380px) {
  .inv-footer__inner { gap: 8px; }
  .inv-footer__rule { max-width: 32px; min-width: 14px; }
  .inv-footer__credit { gap: 6px; }
  .inv-footer__credit-prefix { font-size: 0.5rem; letter-spacing: 0.2em; }
}

/* Réduction du mouvement : neutralise les animations en boucle */
@media (prefers-reduced-motion: reduce) {
  .inv-footer__mark,
  .inv-footer__credit-name {
    animation: none;
  }
  .inv-footer__credit-name {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--tch-accent, #C6A15B);
    transition: none;
  }
}

/* ── Mention parrainage discrète (viralité K-factor) ──────────────────────
   Format texte sobre, ne casse pas l'élégance du footer.
   Lien souligné au hover uniquement, opacité subtile au repos. */
.inv-footer__referral {
  margin-top: 28px;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.55;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--tch-bg, #FFF7EA);
}

.inv-footer__referral-link {
  display: inline;
  color: var(--tch-bg, #FFF7EA);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.inv-footer__referral-link:hover {
  border-bottom-color: var(--tch-accent, #C6A15B);
  opacity: 1;
}

.inv-footer__referral-link strong {
  font-style: normal;
  font-weight: 600;
  color: var(--tch-accent, #C6A15B);
  letter-spacing: 0.04em;
}

/* Toast */
/* ── Navigation scroll haut/bas ─────────────────────────────────────────── */
/* Empilé au-dessus du bouton WhatsApp (bottom: 24px + ~50px hauteur + 14px gap) */
.inv-scroll-nav {
  position: fixed;
  right: 24px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
  pointer-events: none;
}
.inv-scroll-nav--visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.inv-scroll-nav__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 40%);
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 15%);
  color: var(--tch-accent, #C6A15B);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease-out-expo);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.inv-scroll-nav__btn:hover {
  background: var(--tch-accent, #C6A15B);
  color: var(--tch-primary, #1E2A5A);
  border-color: var(--tch-accent, #C6A15B);
  transform: scale(1.1);
}
.inv-scroll-nav__btn:active {
  transform: scale(0.95);
}
.inv-scroll-nav__btn:focus-visible {
  outline: 2px solid var(--tch-accent, #C6A15B);
  outline-offset: 3px;
}

/* Masquer le bouton down quand on est en bas */
.inv-scroll-nav__btn--down.inv-scroll-nav__btn--hidden,
.inv-scroll-nav__btn--up.inv-scroll-nav__btn--hidden {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 480px) {
  /* Au-dessus du bouton WhatsApp circulaire mobile (~52px + 20px bottom + 12px gap) */
  .inv-scroll-nav { right: 20px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .inv-scroll-nav__btn { width: 40px; height: 40px; font-size: 0.75rem; }
}

.inv-toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; pointer-events: none; }
.inv-toast { background: var(--inv-primary); color: var(--tch-bg, #FFF7EA); padding: 16px 32px; border-radius: var(--inv-radius-xl); font-size: 0.9rem; font-weight: 500; box-shadow: var(--inv-shadow-lg); animation: toast-in 0.4s var(--inv-ease-spring); margin-top: 8px; }

@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Pétales */
.inv-petals-container { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.inv-petal { position: absolute; font-size: 24px; animation: inv-petal-fall 2s ease-out forwards; }

@keyframes inv-petal-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
  20% { opacity: 0.8; transform: translate(var(--tx), var(--ty)) rotate(90deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * 2), calc(var(--ty) * 3)) rotate(360deg) scale(0.5); }
}

/* ─── Focus states — Accessibilité ─────────────────────────────── */
.inv-resp-btn:focus-visible {
  outline: 2px solid var(--inv-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.2);
}

.inv-hero__cta:focus-visible,
.inv-submit-btn:focus-visible,
.inv-input:focus-visible {
  outline: 2px solid var(--inv-accent);
  outline-offset: 2px;
}

/* ─── Ripple effect — Boutons (UX.md non-negotiable #2) ────────── */
.inv-resp-btn,
.inv-hero__cta,
.inv-submit-btn {
  position: relative;
  overflow: hidden;
}

.inv-resp-btn::after,
.inv-hero__cta::after,
.inv-submit-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.inv-resp-btn:active::after,
.inv-hero__cta:active::after,
.inv-submit-btn:active::after {
  opacity: 1;
}

/* ─── Toast exit animation ─────────────────────────────────────── */
.inv-toast {
  animation: toast-in 0.4s var(--inv-ease-spring), toast-out 0.4s ease 2.6s forwards;
}

@keyframes toast-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

/* ─── Card checkmark animation (dopamine success state) ─────────── */
.inv-checkmark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: var(--inv-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tch-bg, #FFF7EA);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s var(--inv-ease-spring), transform 0.45s var(--inv-ease-spring);
  z-index: 2;
  pointer-events: none;
}

.inv-checkmark--done {
  opacity: 1;
  transform: scale(1);
}

.inv-checkmark__path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}

.inv-checkmark--done .inv-checkmark__path {
  animation: checkmark-draw 0.5s ease 0.15s forwards;
}

@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

/* ─── Submit button checkmark SVG ──────────────────────────────── */
.inv-check-anim {
  vertical-align: middle;
  margin-right: 4px;
}

.inv-check-anim path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: checkmark-draw 0.5s ease forwards;
}

/* ─── Sending dots animation (no spinner — UX.md rule) ─────────── */
.inv-sending-dots span {
  animation: dot-pulse 1.2s infinite;
  opacity: 0;
}

.inv-sending-dots span:nth-child(1) { animation-delay: 0s; }
.inv-sending-dots span:nth-child(2) { animation-delay: 0.2s; }
.inv-sending-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 60%, 100% { opacity: 0; }
  30% { opacity: 1; }
}

/* ─── Locked response buttons (after submission) ───────────────── */
.inv-resp-btn--locked {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ─── Reduced motion — Invitation section ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .inv-hero__amp { animation: none; }
  .inv-hero__cta i { animation: none; }
  .inv-resp-btn { transition: none; }
  .inv-event--entering { opacity: 1; transform: none; }
  .inv-event--entered { transition: none; }
  .inv-petal { display: none; }
  .inv-toast { animation: none; opacity: 1; }
  .inv-progress__fill { transition: none; }
  .inv-checkmark { transition: none; opacity: 1; transform: scale(1); }
  .inv-checkmark__path { animation: none; stroke-dashoffset: 0; }
  .inv-check-anim path { animation: none; stroke-dashoffset: 0; }
  .inv-sending-dots span { animation: none; opacity: 1; }
  .inv-hero__portrait { animation: none; opacity: 1; }
  .inv-hero__portrait::after { display: none; }
  .inv-hero__portrait img { transition: none; }
  .inv-hero__portrait-glow { animation: none; }
  .inv-hero__portrait-name { animation: none; opacity: 1; }
  .inv-hero__amp-solo { animation: none; }
}

@media (max-width: 640px) {
  .inv-hero__names { font-size: clamp(3.2rem, 12vw, 5rem); }

  /* Date block mobile */
  .inv-hero__date-block { gap: 12px; }
  .inv-hero__date-day,
  .inv-hero__date-year { font-size: clamp(4rem, 10vw, 6rem); }
  .inv-hero__date-sep { height: 28px; }
  .inv-hero__date-month { font-size: 2.5rem; }

  /* Programme cards mobile */
  .inv-programme { padding: 60px 16px 40px; }
  .inv-prog-card { padding: 20px 0; gap: 14px; }
  .inv-prog-card__hour { font-size: 0.72rem; padding: 6px 12px; }
  .inv-prog-card__name { font-size: 1.2rem; }
  .inv-prog-card__desc { font-size: 0.76rem; }

  /* RSVP poll cards mobile */
  .inv-event { padding: 20px 16px; }
  .inv-event__name { font-size: 1.15rem; }
  .inv-resp-btn { padding: 14px 6px; font-size: 0.78rem; }

  /* Divider mobile */
  .inv-divider { padding: 32px 0; }
  .inv-divider__line { width: 40px; }

  /* Hero mobile — portraits larges, couple mis en avant */
  .inv-hero__couple-row .inv-hero__portrait { width: clamp(200px, 100vw, 200px); }
  .inv-hero__portrait-name { font-size: clamp(3rem, 5vw, 6rem); }
  .inv-hero__portrait-glow { inset: -12px; }
  .inv-hero__content { padding: 1.5rem; }
  .inv-hero__couple-row .inv-hero__amp-solo { font-size: clamp(4rem, 8vw, 6rem); }
  .inv-footer { padding: 32px 20px 24px; }
  .inv2-couple-band img { width: 100%; }

  /* Love story mobile */
  .inv-story-card--left,
  .inv-story-card--right { flex-direction: column; }
  .inv-story-card__media { max-width: 100%; }

  /* Dress code mobile */
  .inv-dresscode__img { max-width: 280px; }

  /* Colors mobile */
  .inv-colors__grid { gap: 16px; }
  .inv-colors__circle { width: 48px; height: 48px; }

  /* Music player mobile */
  .inv-music-player { max-width: 100%; }
}

/* ── Extreme mobile (< 380px) ─────────────────────────────────────────────── */
@media (max-width: 380px) {
  .inv-hero__couple-row .inv-hero__portrait { width: clamp(110px, 30vw, 130px); }
  .inv-hero__portrait-name { font-size: 1.2rem; }
  .inv-hero__names { font-size: clamp(2.5rem, 11vw, 4rem); }
  .inv-hero__amp-solo { font-size: clamp(2rem, 7vw, 3rem); }
  .inv-hero__badge { padding: 8px 16px; font-size: 0.65rem; }
  .inv-hero__content { padding: 1rem; }
  .inv-footer { padding: 28px 16px 22px; }
  .inv-footer__names { font-size: 2.2rem; }
  .inv-resp-btn { padding: 12px 4px; font-size: 0.72rem; }
  .inv-event { padding: 16px 12px; }
}

/* ── Tablette (641px — 768px) ─────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 768px) {
  .inv-hero__content { padding: 2rem; }
  .inv-hero__couple-row .inv-hero__portrait { width: clamp(150px, 20vw, 220px); }
  .inv-prog-card { padding: 28px 0; }
  .inv2-tenue__split { gap: 28px; }
}

/* ── Desktop (> 768px) ────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .inv-hero__content { padding: 3rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION MARIÉS — OBSOLÈTE (portraits maintenant intégrés dans le hero)
   Voir .inv-hero__portrait ci-dessus
   ───────────────────────────────────────────────────────────────────────────── */
.inv-couple {
  padding: 80px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--inv-bg) 0%, rgba(198, 161, 91, 0.04) 50%, var(--inv-bg) 100%);
}

/* ── Particules dorées flottantes ── */
.inv-couple__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.inv-couple__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--inv-accent);
  border-radius: 50%;
  opacity: 0;
  animation: couple-float 6s ease-in-out infinite;
}

.inv-couple__dot:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
.inv-couple__dot:nth-child(2) { left: 85%; top: 30%; animation-delay: 1.2s; animation-duration: 5.5s; width: 3px; height: 3px; }
.inv-couple__dot:nth-child(3) { left: 25%; top: 70%; animation-delay: 2.4s; animation-duration: 8s; width: 5px; height: 5px; }
.inv-couple__dot:nth-child(4) { left: 75%; top: 65%; animation-delay: 0.8s; animation-duration: 6.5s; }
.inv-couple__dot:nth-child(5) { left: 50%; top: 15%; animation-delay: 3s; animation-duration: 7.5s; width: 3px; height: 3px; }
.inv-couple__dot:nth-child(6) { left: 40%; top: 80%; animation-delay: 1.8s; animation-duration: 6s; width: 5px; height: 5px; }

@keyframes couple-float {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 0.6; }
  50% { opacity: 0.3; transform: translateY(-30px) scale(1); }
  85% { opacity: 0.6; }
}

/* ── Side panel (mobile-first : vertical stack) ── */
.inv-couple__side {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

/* Gauche : photo collée au bord gauche de l'écran */
.inv-couple__side--left {
  padding-right: 18%;
  padding-left: 0;
}

/* Droite : photo collée au bord droit de l'écran */
.inv-couple__side--right {
  padding-left: 18%;
  padding-right: 0;
}

/* ── Photo container ── */
.inv-couple__photo {
  position: relative;
  height: clamp(340px, 60vw, 480px);
  overflow: hidden;
  box-shadow:
    0 16px 48px rgba(198, 161, 91, 0.18),
    0 6px 20px rgba(30, 42, 90, 0.08);
  transition: transform 0.6s var(--ease-out-expo),
              box-shadow 0.6s var(--ease-out-expo);
}

/* Bord gauche : arrondi seulement à droite + bordure sur 3 côtés */
.inv-couple__side--left .inv-couple__photo {
  border-radius: 0 24px 24px 0;
  border: 3px solid var(--inv-accent);
  border-left: none;
}

/* Bord droit : arrondi seulement à gauche + bordure sur 3 côtés */
.inv-couple__side--right .inv-couple__photo {
  border-radius: 24px 0 0 24px;
  border: 3px solid var(--inv-accent);
  border-right: none;
}

.inv-couple__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s var(--ease-out-expo);
}

.inv-couple__photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 64px rgba(198, 161, 91, 0.25),
    0 10px 28px rgba(30, 42, 90, 0.1);
}

.inv-couple__photo:hover img {
  transform: scale(1.03);
}

/* ── Halo doré derrière la photo ── */
.inv-couple__glow {
  position: absolute;
  inset: -20px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(198, 161, 91, 0.12) 0%, transparent 60%);
  animation: couple-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes couple-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ── Shimmer doré auto au scroll reveal ── */
.inv-couple__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(198, 161, 91, 0.08) 42%,
    rgba(198, 161, 91, 0.22) 50%,
    rgba(198, 161, 91, 0.08) 58%,
    transparent 65%
  );
  transform: translateX(-120%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

[data-revealed] .inv-couple__photo::after {
  animation: couple-shimmer 1.2s var(--ease-out-expo) 0.6s forwards;
}

.inv-couple__photo:hover::after {
  animation: couple-shimmer 0.8s var(--ease-out-expo) forwards;
}

@keyframes couple-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* ── Nom calligraphié + trait doré ── */
.inv-couple__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Alex Brush', cursive;
  font-size: clamp(1.8rem, 5vw, 2.2rem);
  color: var(--inv-primary);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 16px;
  padding: 0 20px;
}

.inv-couple__name-line {
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--inv-accent), transparent);
}

/* ── Centre : connecteur + photo couple ── */
.inv-couple__center {
  position: relative;
  z-index: 1;
  padding: 0 20px;
  margin-bottom: 24px;
}

.inv-couple__heart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.inv-couple__flourish {
  color: var(--inv-accent);
  opacity: 0.4;
  line-height: 0;
}

.inv-couple__flourish svg {
  width: 32px;
  height: 16px;
}

.inv-couple__heart-icon {
  font-size: 1.6rem;
  color: var(--inv-accent);
  filter: drop-shadow(0 0 14px rgba(198, 161, 91, 0.5));
  animation: couple-heart-glow 2.5s ease-in-out infinite;
}

@keyframes couple-heart-glow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(198, 161, 91, 0.3));
  }
  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 24px rgba(198, 161, 91, 0.7));
  }
}

/* ── Photo couple (cadre arche centré) ── */
.inv-couple__together {
  max-width: 340px;
  margin: 0 auto 20px;
}

.inv-couple__together img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 999px 999px 12px 12px;
  border: 3px solid var(--inv-accent);
  outline: 2px solid rgba(198, 161, 91, 0.2);
  outline-offset: 5px;
  box-shadow:
    0 20px 60px rgba(198, 161, 91, 0.2),
    0 8px 24px rgba(30, 42, 90, 0.1);
}

/* ══ DESKTOP (≥768px) — CSS Grid 3 colonnes ══ */
@media (min-width: 768px) {
  .inv-couple {
    padding: 100px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    align-items: center;
    gap: 0;
  }

  .inv-couple__particles {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .inv-couple__side {
    margin-bottom: 0;
    grid-row: 1;
  }

  .inv-couple__side--left {
    grid-column: 1;
    padding-right: 0;
    padding-left: 0;
    justify-self: start;
    /* Déborde du bord gauche */
    margin-left: -20px;
  }

  .inv-couple__side--right {
    grid-column: 3;
    padding-left: 0;
    padding-right: 0;
    justify-self: end;
    /* Déborde du bord droit */
    margin-right: -20px;
  }

  .inv-couple__center {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    padding: 0 40px;
  }

  .inv-couple__photo {
    width: clamp(240px, 22vw, 320px);
    height: clamp(380px, 35vw, 500px);
  }

  .inv-couple__together {
    max-width: 380px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   VERSET RELIGIEUX
   ───────────────────────────────────────────────────────────────────────────── */
.inv-verse {
  padding: 40px 24px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.inv-verse__text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-style: italic;
  color: var(--inv-primary);
  line-height: 1.8;
  margin: 0;
  quotes: "\201C" "\201D";
}

.inv-verse__text::before { content: open-quote; }
.inv-verse__text::after { content: close-quote; }

.inv-verse__source {
  display: block;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-style: normal;
  color: var(--inv-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION PROGRAMME — réutilise inv2-nav-chip (voir section V2)
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   LOVE STORY TIMELINE
   ───────────────────────────────────────────────────────────────────────────── */
.inv-story-section {
  background: linear-gradient(180deg, var(--tch-bg) 0%, #f5efe6 100%);
  padding: 20px 0;
}

.inv-story {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px 40px;
}

.inv-story__header {
  text-align: center;
  margin-bottom: 48px;
}

.inv-story__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--inv-accent);
  margin-bottom: 12px;
}

.inv-story__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--inv-primary);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.inv-story__rule {
  width: 50px;
  height: 1px;
  background: var(--inv-accent);
  margin: 1.2rem auto 0;
}

.inv-story__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Ligne centrale timeline */
.inv-story__timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--inv-accent), transparent);
  transform: translateX(-50%);
}

.inv-story-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  width: 45%;
}

/* Point sur la timeline */
.inv-story-card::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--inv-accent);
  border-radius: 50%;
  border: 2px solid var(--tch-bg);
  top: 20px;
  z-index: 1;
}

.inv-story-card--left {
  align-self: flex-start;
  text-align: right;
  flex-direction: row-reverse;
}

.inv-story-card--left::before {
  right: -8%;
}

.inv-story-card--right {
  align-self: flex-end;
  text-align: left;
}

.inv-story-card--right::before {
  left: -8%;
}

.inv-story-card__media {
  max-width: 180px;
  flex-shrink: 0;
}

.inv-story-card__media img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.inv-story-card__content {
  flex: 1;
}

.inv-story-card__date {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--inv-accent);
  margin-bottom: 6px;
}

.inv-story-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--inv-primary);
  font-weight: 600;
  margin: 0 0 8px 0;
}

.inv-story-card__desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--tch-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Timeline mobile */
@media (max-width: 768px) {
  .inv-story__timeline::before {
    left: 16px;
  }

  .inv-story-card {
    width: 100%;
    padding-left: 40px;
    text-align: left;
    flex-direction: column;
  }

  .inv-story-card--left {
    align-self: auto;
    text-align: left;
    flex-direction: column;
  }

  .inv-story-card--left::before,
  .inv-story-card--right::before {
    left: 10px;
    right: auto;
  }

  .inv-story-card__media {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DRESS CODE
   ───────────────────────────────────────────────────────────────────────────── */
.inv-dresscode {
  padding: 40px 24px 60px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.inv-dresscode__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--inv-accent);
  margin-bottom: 12px;
}

.inv-dresscode__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--inv-primary);
  font-weight: 400;
  font-style: italic;
  margin: 0 0 16px 0;
}

.inv-dresscode__desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--tch-text-muted);
  line-height: 1.7;
  margin: 0 0 24px 0;
}

.inv-dresscode__img {
  max-width: 320px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   COULEURS DU MARIAGE
   ───────────────────────────────────────────────────────────────────────────── */
.inv-colors {
  padding: 40px 24px 60px;
  text-align: center;
}

.inv-colors__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--inv-accent);
  margin-bottom: 12px;
}

.inv-colors__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--inv-primary);
  font-weight: 400;
  font-style: italic;
  margin: 0 0 32px 0;
}

.inv-colors__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.inv-colors__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.inv-colors__circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform var(--dur-normal) var(--ease-spring);
}

.inv-colors__circle:hover {
  transform: scale(1.15);
}

.inv-colors__label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--tch-text-muted);
  letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MUSIQUE D'ENTRÉE — Lecteur intégré
   ───────────────────────────────────────────────────────────────────────────── */
.inv-entrance-music {
  padding: 40px 24px 60px;
  text-align: center;
}

.inv-entrance-music__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--inv-accent);
  margin-bottom: 12px;
}

.inv-entrance-music__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: var(--inv-primary);
  font-weight: 400;
  font-style: italic;
  margin: 0 0 8px 0;
}

.inv-entrance-music__artist {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--tch-text-muted);
  margin: 0 0 24px 0;
}

.inv-music-player {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: rgba(30, 42, 90, 0.04);
  border-radius: 40px;
  border: 1px solid rgba(198, 161, 91, 0.2);
  max-width: 320px;
  width: 100%;
}

.inv-music-player__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--inv-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-normal) var(--ease-smooth);
}

.inv-music-player__btn:hover {
  background: var(--inv-primary);
  transform: scale(1.08);
}

.inv-music-player__progress {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.inv-music-player__bar {
  width: 0%;
  height: 100%;
  background: var(--inv-accent);
  border-radius: 2px;
  transition: width 200ms linear;
}

.inv-music-player__time {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--tch-text-muted);
  min-width: 32px;
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   JOYAU SONORE — Musique de fond flottante
   Bouton vinyle rotatif + aura pulsante + panneau infos piste
   Pilote les couleurs du mariage via --tch-primary / --tch-accent.
   ───────────────────────────────────────────────────────────────────────────── */

.inv-bg-music {
  --bgm-primary: var(--tch-primary, #1E2A5A);
  --bgm-accent: var(--tch-accent, #C6A15B);
  --bgm-accent-soft: color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 55%);
  --bgm-accent-glow: color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 70%);
  --bgm-cream: var(--tch-bg, #FFF7EA);
  --bgm-size: 60px;
  --bgm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bgm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  /* Pas de transform ici : sinon les enfants position:fixed (panel mobile)
     seraient contenus par le widget au lieu du viewport. */
  transition: opacity 450ms var(--bgm-ease);
}

.inv-bg-music--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Animation d'entrée portée par le bouton via @keyframes (pas par le
   conteneur) pour préserver le containing block du panneau bottom-sheet
   mobile. Les keyframes n'interfèrent pas avec les transitions de hover. */
.inv-bg-music--visible .inv-bg-music__btn {
  animation: bgm-btn-entrance 500ms var(--bgm-spring);
}

@keyframes bgm-btn-entrance {
  from { transform: translateY(-8px) scale(0.9); }
  to   { transform: translateY(0) scale(1); }
}

@media (min-width: 768px) {
  .inv-bg-music {
    top: 28px;
    right: 32px;
    --bgm-size: 72px;
  }
}

/* ── Bouton joyau : conteneur couches multiples ───────────────────────────── */
.inv-bg-music__btn {
  position: relative;
  width: var(--bgm-size);
  height: var(--bgm-size);
  border: none;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--bgm-ease);
}

.inv-bg-music__btn:hover { transform: scale(1.05); }
.inv-bg-music__btn:active { transform: scale(0.94); }
.inv-bg-music__btn:focus-visible {
  outline: 2px solid var(--bgm-accent);
  outline-offset: 6px;
}

/* ── Aura : halo radial qui respire quand la musique joue ─────────────────── */
.inv-bg-music__aura {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--bgm-accent-glow) 0%,
    transparent 65%
  );
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms var(--bgm-ease);
  pointer-events: none;
  z-index: 0;
  filter: blur(6px);
}

.inv-bg-music--playing .inv-bg-music__aura {
  opacity: 0.55;
  animation: bgm-aura-breathe 3.2s ease-in-out infinite;
}

@keyframes bgm-aura-breathe {
  0%, 100% { transform: scale(0.85); opacity: 0.35; }
  50%      { transform: scale(1.15); opacity: 0.75; }
}

/* ── Anneau extérieur gravé : fin trait or qui tourne lentement ───────────── */
.inv-bg-music__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--bgm-accent-soft);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
  transition: opacity 400ms var(--bgm-ease);
}

.inv-bg-music--playing .inv-bg-music__ring {
  opacity: 1;
  animation: bgm-ring-rotate 22s linear infinite;
}

@keyframes bgm-ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Joyau : corps principal, dégradé bordeaux → or ───────────────────────── */
.inv-bg-music__jewel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in srgb, var(--bgm-accent), #fff 25%) 0%,
    var(--bgm-accent) 28%,
    color-mix(in srgb, var(--bgm-primary), var(--bgm-accent) 30%) 70%,
    var(--bgm-primary) 100%
  );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 12px 28px -6px color-mix(in srgb, var(--bgm-primary), transparent 50%),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -6px 14px rgba(0, 0, 0, 0.22);
  z-index: 2;
  transition: transform 400ms var(--bgm-ease), box-shadow 400ms var(--bgm-ease);
}

/* Rotation continue du joyau quand la musique joue (vinyle) */
.inv-bg-music--playing .inv-bg-music__jewel {
  animation: bgm-jewel-rotate 14s linear infinite;
}

@keyframes bgm-jewel-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Grooves : cercles concentriques rappelant un disque vinyle */
.inv-bg-music__grooves {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.06) 2.5px,
      transparent 3px
    );
  opacity: 0.85;
  pointer-events: none;
  mask-image: radial-gradient(circle, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 100%);
}

/* Centre du joyau : pastille centrale avec l'icône */
.inv-bg-music__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bgm-cream), #fff 30%) 0%,
    var(--bgm-cream) 60%,
    color-mix(in srgb, var(--bgm-cream), var(--bgm-accent) 15%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bgm-primary);
  font-size: 0.9rem;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px color-mix(in srgb, var(--bgm-accent), transparent 70%),
    0 0 0 3px color-mix(in srgb, var(--bgm-primary), transparent 40%);
  z-index: 3;
  /* Compense la rotation du jewel pour que l'icône reste stable */
  animation: bgm-center-counter-rotate 14s linear infinite paused;
}

.inv-bg-music--playing .inv-bg-music__center {
  animation-play-state: running;
}

@keyframes bgm-center-counter-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

@media (min-width: 768px) {
  .inv-bg-music__center { font-size: 1rem; }
}

/* État muet : désature et fige les animations */
.inv-bg-music--muted .inv-bg-music__jewel { filter: grayscale(0.55) brightness(0.85); }
.inv-bg-music--muted .inv-bg-music__aura,
.inv-bg-music--muted .inv-bg-music__ring {
  opacity: 0;
  animation: none;
}

/* ── Ripple (compat JS existant) ──────────────────────────────────────────── */
.inv-bg-music__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bgm-accent), transparent 40%) 0%,
    transparent 70%
  );
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.inv-bg-music__ripple--active {
  animation: bgm-ripple 600ms var(--bgm-ease);
}

@keyframes bgm-ripple {
  0%   { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Particules dorées : poussière qui flotte autour du joyau ─────────────── */
.inv-bg-music__particles {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--bgm-ease);
  z-index: 0;
}

.inv-bg-music--playing .inv-bg-music__particles { opacity: 1; }

.inv-bg-music__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bgm-accent);
  box-shadow: 0 0 6px var(--bgm-accent);
  opacity: 0;
}

.inv-bg-music--playing .inv-bg-music__particles span {
  animation: bgm-particle-float 4.5s ease-in-out infinite;
}

.inv-bg-music__particles span:nth-child(1) { top: 20%; left: 14%; animation-delay: 0s; }
.inv-bg-music__particles span:nth-child(2) { top: 70%; left: 82%; animation-delay: 0.7s; }
.inv-bg-music__particles span:nth-child(3) { top: 14%; left: 78%; animation-delay: 1.4s; }
.inv-bg-music__particles span:nth-child(4) { top: 82%; left: 20%; animation-delay: 2.1s; }
.inv-bg-music__particles span:nth-child(5) { top: 48%; left: 6%; animation-delay: 2.8s; }
.inv-bg-music__particles span:nth-child(6) { top: 50%; left: 92%; animation-delay: 3.5s; }

@keyframes bgm-particle-float {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: translate(calc(-8px + var(--rnd, 4px)), -18px) scale(1); opacity: 0; }
}

/* ── Panneau développé : infos piste + visualiseur + slider ───────────────── */
.inv-bg-music__panel {
  width: 220px;
  max-height: 0;
  padding: 0 18px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bgm-primary), transparent 8%) 0%,
    color-mix(in srgb, var(--bgm-primary), #000 15%) 100%
  );
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--bgm-accent), transparent 60%);
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px) scale(0.92);
  transform-origin: top right;
  transition:
    opacity 280ms var(--bgm-ease),
    transform 280ms var(--bgm-ease),
    max-height 320ms var(--bgm-ease),
    padding 280ms var(--bgm-ease);
  pointer-events: none;
  box-shadow:
    0 18px 40px -14px color-mix(in srgb, var(--bgm-primary), transparent 40%),
    0 4px 12px rgba(0, 0, 0, 0.12);
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.inv-bg-music__panel::-webkit-scrollbar { display: none; }

/* Filet doré décoratif en haut du panneau */
.inv-bg-music__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bgm-accent) 50%,
    transparent 100%
  );
  opacity: 0.7;
}

.inv-bg-music--expanded .inv-bg-music__panel {
  max-height: 260px;
  padding: 16px 18px;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (min-width: 768px) {
  .inv-bg-music__panel { width: 240px; }
}

/* Info piste : eyebrow doré + titre Playfair + artiste */
.inv-bg-music__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--bgm-cream);
}

.inv-bg-music__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bgm-accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.inv-bg-music__eyebrow i { font-size: 0.6rem; }

.inv-bg-music__title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--bgm-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-bg-music__artist {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--bgm-cream), transparent 30%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Controls : visualiseur à gauche + slider vertical à droite */
.inv-bg-music__controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 6px;
  height: 80px;
}

/* Visualiseur : 5 barres dorées pseudo-réactives */
.inv-bg-music__visualizer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  flex: 1;
}

.inv-bg-music__visualizer span {
  flex: 1;
  height: 30%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bgm-accent), transparent 40%) 0%,
    var(--bgm-accent) 100%
  );
  transform-origin: bottom;
  opacity: 0.7;
  transition: opacity 300ms var(--bgm-ease);
}

.inv-bg-music--playing .inv-bg-music__visualizer span {
  opacity: 1;
  animation: bgm-bar-wave 1.1s ease-in-out infinite;
}

.inv-bg-music__visualizer span:nth-child(1) { animation-delay: 0s;    animation-duration: 1.2s; }
.inv-bg-music__visualizer span:nth-child(2) { animation-delay: 0.15s; animation-duration: 0.9s; }
.inv-bg-music__visualizer span:nth-child(3) { animation-delay: 0.3s;  animation-duration: 1.4s; }
.inv-bg-music__visualizer span:nth-child(4) { animation-delay: 0.45s; animation-duration: 1s; }
.inv-bg-music__visualizer span:nth-child(5) { animation-delay: 0.6s;  animation-duration: 1.3s; }

@keyframes bgm-bar-wave {
  0%, 100% { height: 20%; }
  25%      { height: 75%; }
  50%      { height: 45%; }
  75%      { height: 90%; }
}

.inv-bg-music--muted .inv-bg-music__visualizer span {
  animation: none;
  height: 20%;
  opacity: 0.35;
}

/* Slider vertical — conserve la structure JS d'origine */
.inv-bg-music__track {
  position: relative;
  width: 4px;
  height: 100%;
  background: color-mix(in srgb, var(--bgm-cream), transparent 80%);
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;
  z-index: 1;
  flex-shrink: 0;
}

.inv-bg-music__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  border-radius: 4px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bgm-accent), #fff 10%) 0%,
    var(--bgm-accent) 100%
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--bgm-accent), transparent 50%);
  transition: height 120ms linear;
  z-index: 2;
}

.inv-bg-music__thumb {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bgm-cream);
  transform: translate(-50%, 50%);
  box-shadow:
    0 0 0 2px var(--bgm-accent),
    0 2px 8px color-mix(in srgb, var(--bgm-primary), transparent 60%);
  transition: transform 150ms var(--bgm-ease), box-shadow 150ms var(--bgm-ease);
  cursor: grab;
  touch-action: none;
  z-index: 3;
}

@media (pointer: coarse) {
  .inv-bg-music__thumb { width: 22px; height: 22px; }
}

.inv-bg-music__thumb:hover,
.inv-bg-music__thumb--dragging {
  transform: translate(-50%, 50%) scale(1.25);
  cursor: grabbing;
  box-shadow:
    0 0 0 3px var(--bgm-accent),
    0 4px 14px color-mix(in srgb, var(--bgm-accent), transparent 40%);
}

/* ── iOS Safari : audio.volume verrouillé en hardware par l'OS ─────────────
   La piste Web Audio (GainNode) ne fonctionne pas de manière fiable —
   createMediaElementSource silencie l'audio si le contexte ne résume pas
   correctement. On masque slider + visualiseur FFT pour éviter une
   affordance cassée. Le bouton mute (audio.muted natif) reste fonctionnel.
   Le volume se règle via les boutons matériels latéraux du téléphone. */
.inv-bg-music.is-ios .inv-bg-music__track,
.inv-bg-music.is-ios .inv-bg-music__visualizer {
  display: none;
}

.inv-bg-music.is-ios .inv-bg-music__controls {
  justify-content: center;
}

.inv-bg-music.is-ios .inv-bg-music__controls::after {
  content: "Volume : touches latérales du téléphone";
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-style: italic;
  color: color-mix(in srgb, var(--bgm-cream), transparent 35%);
  text-align: center;
  width: 100%;
}

/* ── Anneau de progression : arc doré qui suit la lecture ─────────────────── */
.inv-bg-music__progress {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--bgm-accent) 0,
    var(--bgm-accent) var(--bgm-progress, 0%),
    transparent var(--bgm-progress, 0%),
    transparent 100%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent calc(50% - 3px),
    #000 calc(50% - 3px),
    #000 50%,
    transparent 50%
  );
  mask: radial-gradient(
    circle,
    transparent calc(50% - 3px),
    #000 calc(50% - 3px),
    #000 50%,
    transparent 50%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 300ms var(--bgm-ease);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bgm-accent), transparent 60%));
}

.inv-bg-music--playing .inv-bg-music__progress { opacity: 0.9; }
.inv-bg-music--muted .inv-bg-music__progress { opacity: 0.4; }

/* ── Éclat métallique : sweep lumineux périodique sur le joyau ────────────── */
.inv-bg-music__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.35) 52%,
    transparent 65%
  );
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.inv-bg-music--playing .inv-bg-music__shine {
  animation: bgm-shine-sweep 7s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes bgm-shine-sweep {
  0%, 80%, 100% { opacity: 0; transform: translateX(-60%) rotate(0deg); }
  86%           { opacity: 1; }
  94%           { opacity: 0.4; transform: translateX(60%) rotate(0deg); }
}

/* ── Bloc temps : minutage élégant en Playfair italic ─────────────────────── */
.inv-bg-music__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--bgm-cream), transparent 40%);
  letter-spacing: 0.02em;
}

.inv-bg-music__time-sep {
  color: var(--bgm-accent);
  opacity: 0.6;
}

.inv-bg-music__time-current {
  color: var(--bgm-accent);
  font-weight: 500;
  transition: color 200ms var(--bgm-ease);
}

/* Variante personnalisée : clin d'œil à l'invité identifié */
.inv-bg-music__eyebrow--personal {
  color: color-mix(in srgb, var(--bgm-accent), #fff 10%);
}

.inv-bg-music__eyebrow--personal i {
  color: color-mix(in srgb, var(--bgm-accent), #fff 10%);
  animation: bgm-heart-pulse 1.8s ease-in-out infinite;
  font-size: 0.65rem;
}

@keyframes bgm-heart-pulse {
  0%, 100% { transform: scale(1); }
  20%, 60% { transform: scale(1.18); }
  40%      { transform: scale(0.95); }
}

/* ── Visualiseur audio-réactif : hauteur pilotée par --bgm-bar-level ───────── */
.inv-bg-music--reactive .inv-bg-music__visualizer span {
  animation: none !important;
  height: calc(12% + var(--bgm-bar-level, 0) * 0.78%);
  transition: height 110ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
}

/* ── Grabber iOS-style en haut du panneau (mobile) ────────────────────────── */
.inv-bg-music__grabber {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bgm-cream), transparent 70%);
}

/* ── Bouton fermer le panneau ─────────────────────────────────────────────── */
.inv-bg-music__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bgm-cream), transparent 85%);
  color: var(--bgm-cream);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 180ms var(--bgm-ease),
    transform 180ms var(--bgm-spring),
    background 180ms var(--bgm-ease);
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.inv-bg-music--expanded .inv-bg-music__close {
  opacity: 1;
  transform: scale(1);
  transition-delay: 180ms;
}

.inv-bg-music__close:hover,
.inv-bg-music__close:focus-visible {
  background: color-mix(in srgb, var(--bgm-accent), transparent 70%);
  outline: none;
}

/* ── Bouton mute/unmute intégré au panneau ────────────────────────────────── */
.inv-bg-music__mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bgm-accent), transparent 60%);
  background: color-mix(in srgb, var(--bgm-accent), transparent 85%);
  color: var(--bgm-cream);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 180ms var(--bgm-ease),
    border-color 180ms var(--bgm-ease),
    transform 120ms var(--bgm-ease);
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
}

.inv-bg-music__mute-btn:hover,
.inv-bg-music__mute-btn:focus-visible {
  background: color-mix(in srgb, var(--bgm-accent), transparent 70%);
  border-color: var(--bgm-accent);
  outline: none;
}

.inv-bg-music__mute-btn:active { transform: scale(0.97); }

.inv-bg-music__mute-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bgm-accent);
  color: var(--bgm-primary);
  font-size: 0.75rem;
  transition: background 180ms var(--bgm-ease);
}

.inv-bg-music--muted .inv-bg-music__mute-icon {
  background: color-mix(in srgb, var(--bgm-cream), transparent 70%);
  color: var(--bgm-cream);
}

/* Swap du libellé selon l'état muet */
.inv-bg-music__mute-label::before { content: "Couper le son"; }
.inv-bg-music__mute-label { font-size: 0; line-height: 0; }
.inv-bg-music__mute-label::before { font-size: 0.8rem; line-height: 1.2; }
.inv-bg-music--muted .inv-bg-music__mute-label::before { content: "Réactiver le son"; }

/* ── Mobile : panneau en bottom sheet, interactions tactiles confortables ── */
@media (max-width: 639px) {
  /* Joyau déplacé en bas à gauche pour libérer le hero et mirrorer
     le bouton WhatsApp en bas à droite. Zone pouce-friendly. */
  .inv-bg-music {
    top: auto;
    right: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 14px;
    --bgm-size: 60px;
  }

  /* Quand le panneau bottom-sheet s'ouvre, on atténue le joyau
     pour qu'il disparaisse discrètement derrière la feuille. */
  .inv-bg-music--expanded .inv-bg-music__btn {
    opacity: 0.35;
    transform: scale(0.88);
    pointer-events: none;
    transition:
      opacity 240ms var(--bgm-ease),
      transform 240ms var(--bgm-ease);
  }

  /* Panneau = bottom sheet glissant depuis le bas */
  .inv-bg-music__panel {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 440px;
    max-height: none;
    margin: 0 auto;
    padding: 22px 18px 16px;
    border-radius: 24px;
    transform-origin: bottom center;
    transform: translateY(130%) scale(0.96);
    transition:
      opacity 320ms var(--bgm-ease),
      transform 360ms var(--bgm-spring),
      max-height 360ms var(--bgm-ease),
      padding 320ms var(--bgm-ease);
    box-shadow:
      0 24px 60px -18px color-mix(in srgb, var(--bgm-primary), transparent 30%),
      0 4px 12px rgba(0, 0, 0, 0.14);
    order: 0;
    gap: 16px;
  }

  .inv-bg-music--expanded .inv-bg-music__panel {
    transform: translateY(0) scale(1);
    max-height: 380px;
  }

  .inv-bg-music__grabber { display: block; }

  .inv-bg-music__info {
    padding-right: 44px; /* évite le chevauchement avec le bouton fermer */
  }

  .inv-bg-music__title { font-size: 1.12rem; }
  .inv-bg-music__artist { font-size: 0.82rem; }
  .inv-bg-music__eyebrow { font-size: 0.68rem; }

  .inv-bg-music__controls {
    height: 88px;
    gap: 16px;
  }

  /* Slider vertical plus généreux au toucher */
  .inv-bg-music__track { width: 6px; }
  .inv-bg-music__thumb { width: 26px; height: 26px; }
  .inv-bg-music__fill { border-radius: 6px; }

  /* Moins de particules pour ne pas saturer visuellement */
  .inv-bg-music__particles span:nth-child(n+4) { display: none; }

  /* Voile qui assombrit l'arrière-plan quand le panneau est ouvert */
  .inv-bg-music::before {
    content: "";
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bgm-primary), transparent 60%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--bgm-ease);
    z-index: -1;
  }

  .inv-bg-music--expanded::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* Close button plus grand pour le pouce */
  .inv-bg-music__close {
    width: 36px;
    height: 36px;
    top: 14px;
    right: 14px;
  }
}

/* ── Tablette : panneau plus large et lisible ─────────────────────────────── */
@media (min-width: 640px) and (max-width: 899px) {
  .inv-bg-music__panel { width: 260px; }
  .inv-bg-music__info { padding-right: 36px; }
}

/* ── Réduction de mouvement ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .inv-bg-music__jewel,
  .inv-bg-music__center,
  .inv-bg-music__ring,
  .inv-bg-music__aura,
  .inv-bg-music__particles span,
  .inv-bg-music__visualizer span,
  .inv-bg-music__shine,
  .inv-bg-music__eyebrow--personal i {
    animation: none !important;
  }
  .inv-bg-music__ring { opacity: 0.4; }
  .inv-bg-music__aura { opacity: 0; }
  .inv-bg-music__shine { opacity: 0; }
  .inv-bg-music__panel,
  .inv-bg-music__close {
    transition-duration: 1ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DELIVERY — Hero redesign (cohérence avec invitation)
   ───────────────────────────────────────────────────────────────────────────── */
/* .dl-hero V1 + .dl-hero__bg/overlay/content/tag/names/date/sub/badge V1
   supprimés — voir V2 mobile-first plus bas.
   .dl-msg-card V1 supprimée — voir V2 mobile-first plus bas. */

.dl-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dl-card-actions--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.dl-card-icon--indigo { background: rgba(30, 42, 90, 0.08); color: var(--inv-navy); }

/* ── Carte avec lift au hover ───────────────────────────────────────── */
.dl-card--lift {
  transition: transform 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo);
}
.dl-card--lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--dl-shadow-md);
}

/* ── Carte d'invitation (preview mobile-first) ────────────────────────
   Hauteur dictée par le contenu, pas d'aspect-ratio rigide sur mobile.
   La capture Canvas reste en 1080×1350 (pilotée par JS, indépendante). */
.dl-invite-card {
  --card-primary: var(--inv-navy, #1E2A5A);
  --card-accent: var(--inv-gold, #C6A15B);
  background: linear-gradient(170deg, #FDFCFA 0%, #FFFFFF 40%, #FAF8F5 100%);
  border: none;
  border-radius: 6px;
  padding: 2rem 1.1rem 1.75rem;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: visible;
  display: block;
  box-shadow: var(--dl-shadow-md, 0 4px 16px rgba(28, 43, 74, 0.08));
}

/* Carte à partager personnalisée (image uploadée) — remplace la version générée */
.dl-invite-card--uploaded {
  padding: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  border-radius: 8px;
}
.dl-invite-card__uploaded-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--dl-shadow-md, 0 4px 16px rgba(28, 43, 74, 0.08));
}

@media (min-width: 768px) {
  .dl-invite-card {
    padding: 2.5rem 2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
  }
}

/* Bandes couleur haut et bas */
.dl-invite-card__band {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2;
}
.dl-invite-card__band--top {
  top: 0;
  background: linear-gradient(90deg, var(--card-primary), var(--card-accent));
}
.dl-invite-card__band--bottom {
  bottom: 0;
  background: linear-gradient(90deg, var(--card-accent), var(--card-primary));
}

/* Cadre intérieur subtil */
.dl-invite-card::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(198, 161, 91, 0.18);
  pointer-events: none;
  z-index: 1;
}

/* Filigrane décoratif */
.dl-invite-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(198, 161, 91, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(198, 161, 91, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* Portraits des mariés — format arche, contour fin */
.dl-invite-card__portraits {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}

.dl-invite-card__portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dl-invite-card__portrait img {
  width: 88px;
  height: 120px;
  object-fit: cover;
  object-position: top center;
  border-radius: 44px 44px 4px 4px;
  border: 2px solid var(--card-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dl-invite-card__portrait-name {
  font-family: 'Alex Brush', cursive;
  font-size: 0.9rem;
  color: var(--card-primary);
}

.dl-invite-card__amp {
  font-family: 'Alex Brush', cursive;
  font-size: 1.8rem;
  color: var(--card-accent);
  align-self: center;
  margin-top: 40px;
}

/* Textes */
.dl-invite-card__tag {
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--card-accent);
  font-weight: 500;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}

.dl-invite-card__names {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  font-weight: 400;
  color: var(--card-primary);
  line-height: 1.1;
  margin: 0 0 0.8rem 0;
  position: relative;
  z-index: 1;
}

/* Ornement central */
.dl-invite-card__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.dl-invite-card__ornament-line {
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
}

.dl-invite-card__ornament-diamond {
  font-size: 0.4rem;
  color: var(--card-accent);
  opacity: 0.6;
}

.dl-invite-card__date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}

.dl-invite-card__day,
.dl-invite-card__year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--card-primary);
  line-height: 1;
}

.dl-invite-card__sep {
  width: 28px;
  height: 1px;
  background: var(--card-accent);
  opacity: 0.4;
}

.dl-invite-card__month {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--card-accent);
  text-transform: capitalize;
}

.dl-invite-card__city {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--card-primary);
  opacity: 0.5;
  margin: 0 0 1.2rem 0;
  position: relative;
  z-index: 1;
}

.dl-invite-card__qr {
  background: #fff;
  border: 1.5px solid rgba(198, 161, 91, 0.2);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 0.5rem;
  display: inline-block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
}

.dl-invite-card__qr-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.dl-invite-card__scan-hint {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.75rem;
  color: var(--card-primary);
  font-style: italic;
  opacity: 0.45;
  margin: 0;
  position: relative;
  z-index: 1;
}

.dl-btn--card-download {
  width: 100%;
}

.dl-card-hint {
  font-size: 0.76rem;
  color: #6b7280;
  margin: 0.85rem 0 0;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  text-align: center;
  max-width: 100%;
}

.dl-card-hint i { flex-shrink: 0; color: var(--tch-accent, #C6A15B); }

/* ── Footer ornement ────────────────────────────────────────────────── */
.dl-footer__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.dl-footer__line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--inv-gold), transparent);
}

.dl-footer__diamond {
  font-size: 0.5rem;
  color: var(--inv-gold);
  opacity: 0.7;
}

/* ── Carte d'invitation — resserrement mobile étroit (< 480px) ───────── */
@media (max-width: 480px) {
  .dl-invite-card {
    padding: 1.5rem 0.85rem 1.25rem;
  }
  .dl-invite-card::before {
    inset: 12px;
  }
  .dl-invite-card__portraits {
    gap: 14px;
    margin-bottom: 0.5rem;
  }
  .dl-invite-card__portrait {
    gap: 4px;
  }
  .dl-invite-card__portrait img {
    width: 70px;
    height: 96px;
    border-radius: 35px 35px 3px 3px;
  }
  .dl-invite-card__portrait-name {
    font-size: 0.8rem;
  }
  .dl-invite-card__amp {
    font-size: 1.5rem;
    margin-top: 26px;
  }
  .dl-invite-card__tag {
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    margin-bottom: 0.35rem;
    padding: 0 0.5rem;
    line-height: 1.5;
  }
  .dl-invite-card__names {
    font-size: 2rem;
    margin-bottom: 0.65rem;
  }
  .dl-invite-card__ornament {
    gap: 6px;
    margin-bottom: 0.75rem;
  }
  .dl-invite-card__ornament-line {
    width: 28px;
  }
  .dl-invite-card__date-row {
    gap: 8px;
    margin-bottom: 0.3rem;
  }
  .dl-invite-card__day,
  .dl-invite-card__year {
    font-size: 1.45rem;
  }
  .dl-invite-card__month {
    font-size: 0.88rem;
  }
  .dl-invite-card__sep {
    width: 20px;
  }
  .dl-invite-card__city {
    margin-bottom: 0.9rem;
  }
  .dl-invite-card__qr {
    margin-bottom: 0.4rem;
  }
  .dl-invite-card__qr-img {
    width: 88px;
    height: 88px;
  }
  .dl-invite-card__scan-hint {
    font-size: 0.68rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V2 — RÉCIT EN CHAPITRES
   Préfixe inv2- pour isolation totale vis-à-vis du V1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper : fonts custom via CSS variables ─────────────────────────── */
.inv2-wrapper {
  --inv2-font-title: 'Cormorant Garamond', serif;
  --inv2-font-body: 'Inter', sans-serif;
}
.inv2-wrapper h1,
.inv2-wrapper h2,
.inv2-wrapper h3,
.inv2-wrapper blockquote {
  font-family: var(--inv2-font-title);
}

/* ── Chapter wrapper (mobile-first) ───────────────────────────────────── */
.inv2-chapter {
  position: relative;
  padding-top: 28px;
  contain: layout style paint;
}
@media (min-width: 768px) {
  .inv2-chapter { padding-top: 56px; }
}

/* ── Chapter indicator (numéro + label) ───────────────────────────────── */
.inv2-chapter__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
@media (min-width: 768px) {
  .inv2-chapter__indicator { gap: 10px; margin-bottom: 28px; }
}

.inv2-chapter__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tch-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--inv2-font-title);
  font-size: 1.05rem;
  color: var(--tch-accent);
  background: rgba(255, 247, 234, 0.6);
}
@media (min-width: 768px) {
  .inv2-chapter__number { width: 48px; height: 48px; font-size: 1.2rem; background: transparent; }
}

.inv2-chapter__label {
  font-family: var(--inv2-font-title);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tch-text-muted);
  text-align: center;
}
@media (min-width: 768px) {
  .inv2-chapter__label { font-size: 0.85rem; letter-spacing: 0.2em; }
}

/* Variante claire (sur fond sombre/image) */
.inv2-chapter__indicator--light .inv2-chapter__number {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}
.inv2-chapter__indicator--light .inv2-chapter__label {
  color: rgba(255, 255, 255, 0.6);
}

/* Variante sombre (RSVP) */
.inv2-chapter__indicator--dark .inv2-chapter__number {
  border-color: rgba(198, 161, 91, 0.5);
  color: var(--tch-accent);
}
.inv2-chapter__indicator--dark .inv2-chapter__label {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Hero V2 additions ────────────────────────────────────────────────── */
.inv2-hero__greeting {
  font-family: var(--inv2-font-body);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.03em;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.inv2-hero__greeting strong {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-weight: 600;
  color: var(--tch-accent);
}

/* Carte d'honneur — invité VIP/Honneur reconnu par son lien personnel.
   Mise en valeur forte : verre teinté or, eyebrow couronne, phrase dédiée. */
.inv2-hero__honour-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: min(90vw, 460px);
  margin: 0 auto 16px;
  padding: 16px 26px;
  background: linear-gradient(180deg, rgba(30, 42, 90, 0.34), rgba(0, 0, 0, 0.30));
  border: 1px solid color-mix(in srgb, var(--tch-accent), transparent 50%);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.inv2-hero__honour {
  font-family: var(--inv2-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--tch-accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.inv2-hero__honour i {
  font-size: 0.9em;
}
.inv2-hero__honour-line {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #FFF7EA;
  margin: 2px 0 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.inv2-hero__welcome {
  font-family: var(--inv2-font-title);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  margin: 16px auto 0;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ── Verse V2 (épigraphe — fluidité sans divider) ─────────────────────── */
.inv2-verse {
  text-align: center;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* Halo lumineux sacré — lueur divine derrière le verset */
.inv2-verse__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 85%) 0%, transparent 70%);
  pointer-events: none;
  animation: inv2-verse-pulse 4s ease-in-out infinite;
}

@keyframes inv2-verse-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.08); }
}

/* Croix latine — visible, dorée, sacrée */
.inv2-verse__cross {
  font-size: 1.8rem;
  color: var(--tch-accent, #C6A15B);
  margin-bottom: 20px;
  line-height: 1;
  opacity: 0.8;
}

/* Ornement décoratif — ligne + losange + ligne */
.inv2-verse__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.inv2-verse__ornament--bottom {
  margin-bottom: 0;
  margin-top: 24px;
}
.inv2-verse__line {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tch-accent, #C6A15B));
}
.inv2-verse__ornament--bottom .inv2-verse__line {
  background: linear-gradient(90deg, var(--tch-accent, #C6A15B), transparent);
}
.inv2-verse__ornament--bottom .inv2-verse__line:first-child {
  background: linear-gradient(90deg, transparent, var(--tch-accent, #C6A15B));
}
.inv2-verse__ornament--bottom .inv2-verse__line:last-child {
  background: linear-gradient(90deg, var(--tch-accent, #C6A15B), transparent);
}
.inv2-verse__diamond {
  font-size: 0.5rem;
  color: var(--tch-accent, #C6A15B);
  opacity: 0.7;
}

/* Texte du verset — serif, italique, sacré */
.inv2-verse__text {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  line-height: 2;
  color: var(--tch-primary);
  margin: 0;
  letter-spacing: 0.01em;
  position: relative;
  padding: 0 16px;
}

/* Guillemets décoratifs */
.inv2-verse__text::before,
.inv2-verse__text::after {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 4rem;
  color: var(--tch-accent, #C6A15B);
  opacity: 0.25;
  position: absolute;
  line-height: 1;
}
.inv2-verse__text::before {
  content: "\201C";
  top: -20px;
  left: -8px;
}
.inv2-verse__text::after {
  content: "\201D";
  bottom: -30px;
  right: -8px;
}

/* Typewriter — curseur clignotant */
.inv2-verse__typed {
  display: inline;
}
.inv2-verse__cursor {
  display: inline-block;
  color: var(--tch-accent, #C6A15B);
  font-weight: 300;
  font-style: normal;
  animation: inv2-cursor-blink 0.8s step-end infinite;
  margin-left: 2px;
}
.inv2-verse__cursor--hidden {
  opacity: 0;
  animation: none;
}
@keyframes inv2-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Source — référence biblique */
.inv2-verse__source {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--inv2-font-body, 'Inter'), sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  color: var(--tch-accent, #C6A15B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ── Tenue (dress code fusionné) ──────────────────────────────────────── */
.inv2-tenue {
  text-align: center;
  padding: 24px 16px;
  max-width: 800px;
  margin: 0 auto;
}
.inv2-tenue__title {
  font-family: var(--inv2-font-title);
  font-size: 1.8rem;
  color: var(--tch-text);
  margin: 0 0 12px;
}
.inv2-tenue__desc {
  font-size: 1rem;
  color: var(--tch-text-muted);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 40px;
}

/* Split cards Hommes / Femmes */
.inv2-tenue__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (max-width: 600px) {
  .inv2-tenue__split { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.inv2-tenue__card {
  background: var(--tch-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.inv2-tenue__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.inv2-tenue__card-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--tch-bg);
}
.inv2-tenue__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out-expo);
}
.inv2-tenue__card:hover .inv2-tenue__card-img img {
  transform: scale(1.04);
}
.inv2-tenue__card-label {
  font-family: var(--inv2-font-title);
  font-size: 1.2rem;
  color: var(--tch-text);
  margin: 16px 0 4px;
  padding: 0 16px;
}
@media (max-width: 600px) {
  .inv2-tenue__card { border-radius: 12px; }
  .inv2-tenue__card-label { font-size: 0.85rem; margin: 10px 0 4px; padding: 0 8px; }
}
.inv2-tenue__card-desc {
  font-size: 0.9rem;
  color: var(--tch-text-muted);
  line-height: 1.5;
  padding: 0 16px 20px;
  margin: 0;
}
@media (max-width: 600px) {
  .inv2-tenue__card-desc { font-size: 0.75rem; padding: 0 8px 12px; }
}
.inv2-tenue__img {
  max-width: 400px;
  width: 100%;
  border-radius: 12px;
  margin: 24px auto 0;
  display: block;
}

/* ── Palette (intégrée au chapitre tenue) ─────────────────────────────── */
.inv2-palette {
  text-align: center;
  padding: 32px 24px 0;
  max-width: 640px;
  margin: 0 auto;
}
.inv2-palette__title {
  font-family: var(--inv2-font-title);
  font-size: 1.3rem;
  color: var(--tch-text);
  margin: 0 0 28px;
}
.inv2-palette__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}
.inv2-palette__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.inv2-palette__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}
.inv2-palette__swatch:hover .inv2-palette__circle {
  transform: scale(1.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.inv2-palette__label {
  font-size: 0.8rem;
  color: var(--tch-text-muted);
  letter-spacing: 0.02em;
}

/* ── Chanson (section musique immersive) ───────────────────────────────── */
.inv2-chapter--immersive {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.inv2-chanson__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.inv2-chanson__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35);
}
.inv2-chanson__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 40%) 0%,
    color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 15%) 100%
  );
}
.inv2-chanson {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px 60px;
  max-width: 520px;
}
.inv2-chanson__narrative {
  font-family: var(--inv2-font-title);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 20px;
  line-height: 1.6;
}
.inv2-chanson__title {
  font-family: var(--inv2-font-title);
  font-size: 1.8rem;
  color: #fff;
  margin: 0 0 6px;
}
.inv2-chanson__artist {
  font-size: 0.95rem;
  color: var(--tch-accent);
  margin: 0 0 28px;
  letter-spacing: 0.04em;
}
.inv2-chapter--immersive .inv-music-player {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  padding: 12px 24px;
}
.inv2-chapter--immersive .inv-music-player__btn {
  color: #fff;
}
.inv2-chapter--immersive .inv-music-player__time {
  color: rgba(255, 255, 255, 0.6);
}
/* Fallback gradient si pas de photo couple */
.inv2-chapter--immersive:not(:has(.inv2-chanson__bg)) {
  background: linear-gradient(135deg, var(--tch-primary) 0%, #0f1a3d 100%);
}

/* ── Social proof (RSVP) ──────────────────────────────────────────────── */
.inv2-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.inv2-social-proof i {
  color: var(--tch-accent);
  font-size: 0.85rem;
}
.inv2-social-proof strong {
  color: #fff;
  font-weight: 600;
}

/* ── Guest greeting V2 ────────────────────────────────────────────────── */
.inv2-guest-greeting {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--tch-accent);
  border-radius: 0 8px 8px 0;
  padding: 14px 24px;
  margin: 0 auto 24px;
  max-width: 400px;
}

/* ── Footer V2 (bookend verse — bénédiction de clôture) ──────────────── */
.inv2-footer__verse {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 400px;
  margin: 4px auto 24px;
  line-height: 1.8;
  text-align: center;
  position: relative;
  padding: 0 16px;
  border: none;
}
.inv2-footer__verse::before,
.inv2-footer__verse::after {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 2rem;
  color: var(--tch-accent, #C6A15B);
  opacity: 0.3;
  position: absolute;
  line-height: 1;
}
.inv2-footer__verse::before {
  content: "\201C";
  top: -8px;
  left: 0;
}
.inv2-footer__verse::after {
  content: "\201D";
  bottom: -12px;
  right: 0;
}

/* ── Responsive fine-tuning ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .inv2-chapter { padding-top: 64px; }
  .inv2-chapter__number { width: 40px; height: 40px; font-size: 1rem; }
  .inv2-tenue__title { font-size: 1.5rem; }
  .inv2-chanson__title { font-size: 1.4rem; }
  .inv2-verse { padding: 48px 20px 40px; }
  .inv2-verse__glow { width: 200px; height: 200px; }
  .inv2-verse__line { width: 32px; }
  .inv2-verse__text::before, .inv2-verse__text::after { font-size: 2.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2 — COUPLE BAND (photo pleine largeur immersive)
   ═══════════════════════════════════════════════════════════════════════════ */
.inv2-couple-band {
  position: relative;
  width: 100%;
  padding: 0;
  background: var(--tch-primary, #1E2A5A);
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.inv2-couple-band img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: top;
}

.inv2-couple-band__overlay {
  display: none;
}
.inv2-couple-band__caption {
  display: none;
}
.inv2-couple-band__names {
  font-family: var(--inv2-font-title);
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .inv2-couple-band__names { font-size: 2.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2 — PROGRAMME (timeline verticale + cards pleine largeur)
   ═══════════════════════════════════════════════════════════════════════════ */
.inv2-programme {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}
.inv2-programme__header {
  text-align: center;
  margin-bottom: 36px;
}
.inv2-programme__title {
  font-family: var(--inv2-font-title);
  font-size: 1.8rem;
  color: var(--tch-text);
  margin: 0 0 8px;
}
.inv2-programme__rule {
  width: 60px;
  height: 2px;
  background: var(--tch-accent);
  margin: 0 auto;
  border-radius: 1px;
}

/* Timeline verticale */
.inv2-programme__timeline {
  position: relative;
  padding-left: 32px;
}
.inv2-programme__timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--tch-accent) 0%, rgba(198,161,91,0.2) 100%);
  border-radius: 1px;
}

/* Card événement */
.inv2-prog-card {
  position: relative;
  background: var(--tch-surface);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  transition: transform 0.4s var(--ease-out-expo) 50ms, box-shadow 0.4s var(--ease-out-expo) 50ms;
}
.inv2-prog-card:last-child { margin-bottom: 0; }
.inv2-prog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.1);
}

/* Dot sur la timeline */
.inv2-prog-card__dot {
  position: absolute;
  left: -29px;
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tch-accent);
  border: 3px solid var(--tch-bg);
  box-shadow: 0 0 0 2px var(--tch-accent);
  z-index: 1;
}

/* Heure en grand */
.inv2-prog-card__time { margin-bottom: 8px; }
.inv2-prog-card__hour {
  font-family: var(--inv2-font-title);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--tch-primary);
  line-height: 1;
}

/* Contenu */
.inv2-prog-card__name {
  font-family: var(--inv2-font-title);
  font-size: 1.3rem;
  color: var(--tch-text);
  margin: 0 0 8px;
}
.inv2-prog-card__location {
  font-size: 0.9rem;
  color: var(--tch-accent);
  margin: 0 0 4px;
  font-weight: 500;
}
.inv2-prog-card__pin {
  display: inline-block;
  animation: inv2-pin-bounce 2s ease-in-out infinite;
}
@keyframes inv2-pin-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.inv2-prog-card__address {
  font-size: 0.85rem;
  color: var(--tch-text-muted);
  margin: 0 0 6px;
}
.inv2-prog-card__desc {
  font-size: 0.9rem;
  color: var(--tch-text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* ── Navigation chips — Google Maps + Yango ────────────────────────────── */
.inv2-nav-strip {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(198, 161, 91, 0.12);
}
.inv2-nav-strip__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tch-text-muted, #6b6b7b);
  margin-bottom: 10px;
}
.inv2-nav-strip__label i {
  color: var(--tch-accent, #C6A15B);
  margin-right: 4px;
}
.inv2-nav-strip__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Chip de navigation */
.inv2-nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.inv2-nav-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.inv2-nav-chip:hover {
  transform: translateY(-2px);
}
.inv2-nav-chip:hover::before {
  opacity: 1;
}
.inv2-nav-chip:active {
  transform: translateY(0) scale(0.97);
}
.inv2-nav-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}
.inv2-nav-chip:hover .inv2-nav-chip__icon {
  transform: scale(1.1);
}
.inv2-nav-chip__text {
  white-space: nowrap;
}
.inv2-nav-chip__arrow {
  font-size: 0.6rem;
  opacity: 0.5;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.inv2-nav-chip:hover .inv2-nav-chip__arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* Google Maps — bleu/rouge Google */
.inv2-nav-chip--gmaps {
  background: rgba(66, 133, 244, 0.08);
  color: #1a73e8;
  border: 1px solid rgba(66, 133, 244, 0.2);
}
.inv2-nav-chip--gmaps::before {
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.12), rgba(234, 67, 53, 0.06));
}
.inv2-nav-chip--gmaps:hover {
  box-shadow: 0 4px 16px rgba(66, 133, 244, 0.2);
  color: #1a73e8;
  border-color: rgba(66, 133, 244, 0.35);
}
.inv2-nav-chip--gmaps .inv2-nav-chip__icon {
  background: rgba(66, 133, 244, 0.12);
  color: #ea4335;
}

/* Yango — vert/jaune Yango */
.inv2-nav-chip--yango {
  background: rgba(31, 122, 92, 0.08);
  color: #1a6b4e;
  border: 1px solid rgba(31, 122, 92, 0.2);
}
.inv2-nav-chip--yango::before {
  background: linear-gradient(135deg, rgba(31, 122, 92, 0.12), rgba(255, 204, 0, 0.06));
}
.inv2-nav-chip--yango:hover {
  box-shadow: 0 4px 16px rgba(31, 122, 92, 0.2);
  color: #1a6b4e;
  border-color: rgba(31, 122, 92, 0.35);
}
.inv2-nav-chip--yango .inv2-nav-chip__icon {
  background: rgba(31, 122, 92, 0.12);
  color: #1F7A5C;
}

/* Mobile compact */
@media (max-width: 600px) {
  .inv2-nav-chip { padding: 8px 12px; font-size: 0.78rem; gap: 8px; }
  .inv2-nav-chip__icon { width: 28px; height: 28px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .inv2-prog-card__hour { font-size: 2rem; }
  .inv2-prog-card { padding: 20px; }
  .inv2-programme__timeline { padding-left: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2 — ENVELOPPE SPLASH V2 (env2-*) — états d'interaction uniquement
   ─────────────────────────────────────────────────────────────────────────
   Les styles STATIQUES du splash (géométrie, carte, rabats, sceau, textes,
   @media 480px, keyframes) sont la SOURCE UNIQUE dans
   public/assets/css/invitation-critical.css (chargé bloquant AVANT ce fichier,
   cf. base.html.twig). Le splash est above-the-fold : ses styles servent le LCP
   et ne doivent PAS être redéclarés ici — le doublon désynchronisait les deux
   feuilles. Ne restent ici que les états :hover / :active (hors chemin critique,
   l'invité ne survole qu'après chargement de invitation.css). Les styles de
   récompense post-ouverture (env2-seal--hover, env2-reward-badge, …) sont plus
   bas, section « ENVELOPPE V2 — RÉCOMPENSES ET INTERACTIONS ».
   ═══════════════════════════════════════════════════════════════════════════ */
.env2-card__portrait:hover { transform: scale(1.08); }
.env2-card__portrait:active { transform: scale(0.95); }
.env2-open-btn:hover { color: var(--env-primary); transform: translateY(-2px); box-shadow: 0 10px 40px rgba(198,161,91,0.3); }
.env2-open-btn:hover::before { transform: scaleX(1); }
.env2-open-btn:active { transform: translateY(0) scale(0.98); }
.env2-open-btn:hover i { transform: scale(1.2); }
.env2-open-btn--discover:hover { background: #fff; color: var(--env-primary); border-color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   V2 — EFFETS DOPAMINE
   ═══════════════════════════════════════════════════════════════════════════ */

/* 5b. Ripple effect sur boutons */
.inv2-ripple {
  position: relative;
  overflow: hidden;
}
.inv2-ripple::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.inv2-ripple.rippling::after {
  animation: inv2-ripple-wave 0.6s ease-out forwards;
}
@keyframes inv2-ripple-wave {
  0% { width: 0; height: 0; opacity: 0.4; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

/* 5c. SVG checkmark animé (drawn) sur RSVP */
.inv2-check-svg {
  display: inline-block;
  vertical-align: middle;
}
.inv2-check-svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.01s;
}
.inv-resp-btn--yes.selected .inv2-check-svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s var(--ease-out-expo);
}

/* 5d. Social proof enrichi */
.inv2-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  background: rgba(198,161,91,0.12);
  padding: 8px 20px;
  border-radius: 24px;
  border: 1px solid rgba(198,161,91,0.2);
}
.inv2-social-proof i {
  color: var(--tch-accent);
  font-size: 0.85rem;
  animation: inv2-sp-pulse 3s ease-in-out infinite;
}
@keyframes inv2-sp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.inv2-social-proof strong {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

/* 5f. Hover intent (50ms delay) */
.inv2-tenue__card,
.inv2-prog-card {
  transition-delay: 50ms;
}

/* 5h. Progress ring SVG (RSVP) */
.inv2-progress-ring {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}
.inv2-progress-ring svg { display: block; }
.inv2-progress-ring__fill {
  transition: stroke-dashoffset 0.8s var(--ease-out-expo);
}
.inv2-progress-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tch-accent);
}

/* Confetti canvas overlay */
.inv2-confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ── Bloc après questions (coordonnées + message — révélé après réponses) */
.inv2-after-questions {
  margin-top: 32px;
  animation: inv2-msg-appear 0.6s var(--ease-out-expo);
}

/* ── Section identité (nom + téléphone) ───────────────────────────────── */
.inv2-identity-section {
  max-width: 500px;
  width: 100%;
  margin: 0 auto 24px;
  text-align: center;
  box-sizing: border-box;
  padding: 28px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}
.inv2-identity-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
}
.inv2-identity-title {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 6px;
}
.inv2-identity-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
}
.inv2-identity-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 380px;
  margin: 0 auto;
}
.inv2-identity-field {
  text-align: left;
}
.inv2-identity-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.inv2-identity-field .inv-input {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--tch-bg, #FFF7EA);
}
.inv2-identity-field .inv-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.inv2-identity-field .inv-input:focus {
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 80%);
}
/* intl-tel-input : le conteneur .iti est inline-block par défaut, ce qui rend
   le champ téléphone plus étroit que les autres. On le force pleine largeur. */
.inv2-identity-field .iti { display: block; width: 100%; }

/* Microcopies Carnegie — texte d'aide doux et mention « facultatif » */
.inv2-identity-field--full { grid-column: 1 / -1; }
.inv2-identity-optional {
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, transparent);
  margin-left: 4px;
}
.inv2-identity-help {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 480px) {
  .inv2-identity-section { padding: 24px 16px; }
  .inv2-identity-title { font-size: 1.1rem; }
  .inv2-identity-help { font-size: 0.7rem; }
}

/* ── Message aux mariés — section émotionnelle ────────────────────────── */
.inv2-message-section {
  max-width: 500px;
  width: 100%;
  margin: 36px auto;
  text-align: center;
  box-sizing: border-box;
  padding: 32px 20px;
  background: rgba(198, 161, 91, 0.06);
  border: 1px solid rgba(198, 161, 91, 0.15);
  border-radius: 20px;
  animation: inv2-msg-appear 0.6s var(--ease-out-expo);
}
@keyframes inv2-msg-appear {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.inv2-message-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  background: rgba(198, 161, 91, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--tch-accent);
  animation: inv2-heart-pulse 2s ease-in-out infinite;
}
@keyframes inv2-heart-pulse {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
  60% { transform: scale(1); }
}
.inv2-message-title {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 8px;
}
.inv2-message-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
  line-height: 1.5;
}
.inv2-message-subtitle em {
  color: var(--tch-accent);
  font-style: italic;
}
.inv2-message-field {
  position: relative;
  text-align: left;
}
.inv2-textarea {
  resize: vertical;
  min-height: 90px;
  max-height: 200px;
  line-height: 1.6;
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.inv2-textarea:focus {
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.15);
}
.inv2-message-counter {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
@media (max-width: 480px) {
  .inv2-message-section { padding: 24px 16px; margin: 24px auto; }
  .inv2-message-title { font-size: 1.15rem; }
}

/* ── Submit loader overlay (dopamine) ──────────────────────────────────── */
.inv2-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 85%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  animation: inv2-overlay-in 0.4s var(--ease-out-expo) forwards;
}
@keyframes inv2-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.inv2-submit-overlay.exiting {
  animation: inv2-overlay-out 0.5s var(--ease-out-expo) forwards;
}
@keyframes inv2-overlay-out {
  to { opacity: 0; }
}

.inv2-submit-ring {
  position: relative;
  width: 100px;
  height: 100px;
}
.inv2-submit-ring svg { display: block; }
.inv2-submit-ring__track {
  stroke: rgba(255, 255, 255, 0.1);
}
.inv2-submit-ring__fill {
  stroke: var(--tch-accent);
  stroke-dasharray: 276.5;
  stroke-dashoffset: 276.5;
  transition: stroke-dashoffset 1.2s var(--ease-out-expo);
}
.inv2-submit-ring--filling .inv2-submit-ring__fill {
  stroke-dashoffset: 0;
}
.inv2-submit-ring__check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s, transform 0.4s var(--ease-spring);
}
.inv2-submit-ring--done .inv2-submit-ring__check {
  opacity: 1;
  transform: scale(1);
}
.inv2-submit-ring--done .inv2-submit-ring__fill {
  stroke: var(--tch-secondary);
}

.inv2-submit-text {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  transition: opacity 0.3s;
}
.inv2-submit-text--name {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 600;
}

/* ── Summary card — état final post-submit ─────────────────────────────── */
.inv2-summary-done {
  text-align: center;
  padding: 32px 24px;
}
.inv2-summary-done__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--tch-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: inv2-done-pop 0.5s var(--ease-spring);
}
@keyframes inv2-done-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.inv2-summary-done__icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.inv2-summary-done__title {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0 8px;
}
.inv2-summary-done__sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRÉDITS DÉVELOPPEUR — Footer signature (effet wow)
   ═══════════════════════════════════════════════════════════════════════════ */
.tch-credits {
  position: relative;
  padding: 64px 24px 48px;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(30, 42, 90, 0.95) 30%, #0f1528 100%);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.tch-credits.tch-credits--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Particules dorées flottantes */
.tch-credits__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tch-credits__particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--tch-accent, #C6A15B);
  border-radius: 50%;
  opacity: 0;
  animation: tch-particle-drift 6s ease-in-out infinite;
}
.tch-credits__particles span:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
.tch-credits__particles span:nth-child(2) { left: 25%; animation-delay: 1.2s; animation-duration: 5s; }
.tch-credits__particles span:nth-child(3) { left: 40%; animation-delay: 0.5s; animation-duration: 8s; }
.tch-credits__particles span:nth-child(4) { left: 55%; animation-delay: 2s; animation-duration: 6s; }
.tch-credits__particles span:nth-child(5) { left: 70%; animation-delay: 0.8s; animation-duration: 7s; }
.tch-credits__particles span:nth-child(6) { left: 85%; animation-delay: 1.5s; animation-duration: 5.5s; }
.tch-credits__particles span:nth-child(7) { left: 15%; animation-delay: 3s; animation-duration: 6.5s; }
.tch-credits__particles span:nth-child(8) { left: 60%; animation-delay: 2.5s; animation-duration: 8s; }
.tch-credits__particles span:nth-child(9) { left: 35%; animation-delay: 1s; animation-duration: 5s; }
.tch-credits__particles span:nth-child(10) { left: 80%; animation-delay: 0.3s; animation-duration: 7.5s; }
@keyframes tch-particle-drift {
  0% { opacity: 0; transform: translateY(60px) scale(0); }
  20% { opacity: 0.6; }
  80% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}

/* Contenu */
.tch-credits__content {
  position: relative;
  z-index: 1;
}

/* Logo coeur SVG */
.tch-credits__logo {
  margin: 0 auto 20px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s 0.2s, transform 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tch-credits--visible .tch-credits__logo {
  opacity: 1;
  transform: scale(1);
}
.tch-credits__logo-svg {
  color: var(--tch-accent, #C6A15B);
  filter: drop-shadow(0 0 12px rgba(198, 161, 91, 0.3));
  animation: tch-logo-glow 3s ease-in-out infinite;
}
@keyframes tch-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(198, 161, 91, 0.2)); }
  50% { filter: drop-shadow(0 0 20px rgba(198, 161, 91, 0.5)); }
}

/* Eyebrow */
.tch-credits__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(198, 161, 91, 0.5);
  margin: 0 0 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s 0.3s, transform 0.6s 0.3s;
}
.tch-credits--visible .tch-credits__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* Nom — shimmer doré */
.tch-credits__name {
  display: block;
  text-decoration: none;
  margin: 0 auto 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s 0.4s, transform 0.6s 0.4s;
}
.tch-credits--visible .tch-credits__name {
  opacity: 1;
  transform: translateY(0);
}
.tch-credits__name-text {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #fff 0%, var(--tch-accent, #C6A15B) 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tch-name-shimmer 4s linear infinite;
}
@keyframes tch-name-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.tch-credits__name:hover .tch-credits__name-text {
  animation-duration: 1.5s;
}

/* CTA bouton */
.tch-credits__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border: 1px solid rgba(198, 161, 91, 0.3);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tch-accent, #C6A15B);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s 0.5s, transform 0.6s 0.5s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.tch-credits--visible .tch-credits__cta {
  opacity: 1;
  transform: translateY(0);
}
.tch-credits__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tch-accent, #C6A15B);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.tch-credits__cta:hover {
  color: #0f1528;
  border-color: var(--tch-accent, #C6A15B);
  box-shadow: 0 4px 24px rgba(198, 161, 91, 0.3);
}
.tch-credits__cta:hover::before {
  transform: scaleX(1);
}
.tch-credits__cta i {
  font-size: 0.65rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tch-credits__cta:hover i {
  transform: translateX(4px);
}

@media (max-width: 480px) {
  .tch-credits { padding: 48px 20px 36px; }
  .tch-credits__name-text { font-size: 1.2rem; letter-spacing: 0.1em; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .inv2-tenue__card,
  .inv2-palette__circle,
  .inv2-tenue__card-img img,
  .inv2-prog-card,
  .inv2-prog-card__pin,
  .inv2-social-proof i,
  .inv2-check-svg path,
  .inv2-progress-ring__fill,
  .tch-credits__logo-svg,
  .tch-credits__name-text,
  .tch-credits__particles span {
    transition: none;
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY VIEWER — Expérience TikTok fullscreen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CTA Card (remplace la timeline) ───────────────────────────────────── */
.inv-stories-cta {
  position: relative;
  max-width: 480px;
  width: 90%;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
.inv-stories-cta__preview {
  position: relative;
  aspect-ratio: 9 / 14;
  overflow: hidden;
}
.inv-stories-cta__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.inv-stories-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.65) 100%);
}
.inv-stories-cta__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 24px;
  text-align: center;
  z-index: 1;
}
.inv-stories-cta__title {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.6rem;
  color: #fff;
  margin: 0 0 4px;
}
.inv-stories-cta__count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.inv-stories-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--tch-accent, #C6A15B);
  color: var(--tch-primary, #1E2A5A);
  border: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}
.inv-stories-cta__btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 50%);
}
.inv-stories-cta__btn i {
  font-size: 0.75rem;
}

/* ── Overlay fullscreen ────────────────────────────────────────────────── */
.inv-stories {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #000;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-expo);
}
.inv-stories--open {
  opacity: 1;
}

/* Track vertical */
.inv-stories__track {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
}
.inv-stories__track--dragging .inv-stories__slide {
  transition: none !important;
}

/* Slide */
.inv-stories__slide {
  position: absolute;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Fond velours bordeaux au lieu du noir — élimine le flash noir entre les slides */
  background: radial-gradient(ellipse at center, #2a1820 0%, #14080d 100%);
}
.inv-stories__slide--text-only {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tch-primary, #1E2A5A);
}

/* Média (photo/vidéo) */
.inv-stories__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Cross-fade quand le média est chargé */
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
.inv-stories__media--photo,
.inv-stories__media--video {
  object-fit: contain;
}
.inv-stories__media--loading {
  opacity: 0;
}

/* Skeleton shimmer doré — affiché pendant le buffer vidéo/image (élimine l'écran noir) */
.inv-stories__media-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(198, 161, 91, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(198, 161, 91, 0.12) 0%, transparent 60%),
    linear-gradient(135deg, #2a1820 0%, #4b2e3f 50%, #2a1820 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: inv-stories-shimmer 2.2s ease-in-out infinite;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}
.inv-stories__media-skeleton--out {
  opacity: 0;
}
.inv-stories__media-skeleton--error {
  animation: none;
  background: linear-gradient(135deg, #2a1820 0%, #1a0e13 100%);
}
.inv-stories__media-skeleton-spinner {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--tch-accent, #C6A15B);
  filter: drop-shadow(0 0 12px rgba(198, 161, 91, 0.45));
}
@keyframes inv-stories-shimmer {
  0% { background-position: 0% 0%, 100% 100%, 0% 0%; }
  50% { background-position: 100% 100%, 0% 0%, 100% 100%; }
  100% { background-position: 0% 0%, 100% 100%, 0% 0%; }
}

/* Axe 2 — Overlay opt-in vidéo pour connexions lentes (2G/3G/save-data) */
.inv-stories__opt-in {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  padding: 24px;
  border: 0;
  background: radial-gradient(circle at center, rgba(20, 8, 13, 0.55) 0%, rgba(20, 8, 13, 0.85) 100%);
  transition: opacity 0.3s ease-out;
  font-family: inherit;
}
.inv-stories__opt-in:hover .inv-stories__opt-in-icon,
.inv-stories__opt-in:focus-visible .inv-stories__opt-in-icon {
  transform: scale(1.08);
  box-shadow: 0 0 64px rgba(198, 161, 91, 0.95), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.inv-stories__opt-in--hiding {
  opacity: 0;
  pointer-events: none;
}
.inv-stories__opt-in-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C6A15B 0%, #e3c98a 50%, #C6A15B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #1a0e13;
  padding-left: 6px;
  box-shadow: 0 0 36px rgba(198, 161, 91, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  animation: inv-stories-opt-in-pulse 2.2s ease-in-out infinite;
  transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.25s ease-out;
}
@keyframes inv-stories-opt-in-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 36px rgba(198, 161, 91, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
  50% { transform: scale(1.05); box-shadow: 0 0 64px rgba(198, 161, 91, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
}
.inv-stories__opt-in-label {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 1.45rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  margin-top: 4px;
}
.inv-stories__opt-in-hint {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  text-align: center;
  max-width: 280px;
}

/* ─── Axe 6 — Social proof RÉEL (badge + ticker commentaires) ────────────── */

/* Badge social proof — vrai compteur de réactions ou « Soyez le premier » */
.inv-stories__social-proof {
  position: absolute;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0) + 200px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 8, 13, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 161, 91, 0.35);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.2;
  max-width: calc(100% - 100px);
  animation: inv-stories-fade-up 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.3s both;
}
.inv-stories__social-proof i {
  color: var(--tch-accent, #C6A15B);
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px rgba(198, 161, 91, 0.55));
}
.inv-stories__social-proof strong {
  font-weight: 700;
  color: var(--tch-accent, #C6A15B);
  margin: 0 2px;
}
.inv-stories__social-proof--first {
  background: linear-gradient(135deg, rgba(198, 161, 91, 0.22), rgba(20, 8, 13, 0.6));
  border-color: rgba(198, 161, 91, 0.6);
  animation: inv-stories-fade-up 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.3s both, inv-stories-first-pulse 2.6s ease-in-out 0.8s infinite;
}
.inv-stories__social-proof--first i {
  color: #ff4d6d;
  filter: drop-shadow(0 0 8px rgba(255, 77, 109, 0.6));
}
.inv-stories__social-proof--bump {
  animation: inv-stories-bump 0.6s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes inv-stories-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes inv-stories-first-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 77, 109, 0); }
}
@keyframes inv-stories-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); box-shadow: 0 0 24px rgba(198, 161, 91, 0.55); }
  100% { transform: scale(1); }
}

/* Ticker live — défilement vertical des vrais commentaires récents */
.inv-stories__ticker {
  position: absolute;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0) + 152px);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  max-width: calc(100% - 100px);
  border-radius: 14px;
  background: rgba(20, 8, 13, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.inv-stories__ticker--in {
  opacity: 1;
  transform: translateY(0);
}
.inv-stories__ticker-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tch-accent, #C6A15B), #8b6a3a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a0e13;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.inv-stories__ticker-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.inv-stories__ticker-meta {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}
.inv-stories__ticker-meta strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  margin-right: 4px;
}
.inv-stories__ticker-text {
  font-size: 0.85rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .inv-stories__social-proof {
    bottom: calc(env(safe-area-inset-bottom, 0) + 220px);
    font-size: 0.88rem;
  }
  .inv-stories__ticker {
    bottom: calc(env(safe-area-inset-bottom, 0) + 168px);
  }
  .inv-stories__ticker-text {
    font-size: 0.92rem;
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}

/* ─── Axe 3 — Reaction hint (apparaît après 4s d'inactivité) ─────────────── */
.inv-stories__reaction-hint {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.92), rgba(198, 161, 91, 0.92));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 77, 109, 0.4);
  opacity: 0;
  animation: inv-stories-hint-in 0.45s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards,
             inv-stories-hint-bob 1.6s ease-in-out 0.5s infinite;
  pointer-events: none;
}
.inv-stories__reaction-hint::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(198, 161, 91, 0.92);
  border-radius: 2px;
}
.inv-stories__reaction-hint-arrow {
  font-size: 1rem;
  display: inline-block;
  transform: rotate(20deg);
}
.inv-stories__reaction-hint--out {
  animation: inv-stories-hint-out 0.3s ease-out forwards;
}
@keyframes inv-stories-hint-in {
  from { opacity: 0; transform: translateY(-50%) translateX(8px) scale(0.85); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
@keyframes inv-stories-hint-out {
  to { opacity: 0; transform: translateY(-50%) translateX(8px) scale(0.85); }
}
@keyframes inv-stories-hint-bob {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(-4px); }
}

/* Mark question Carnegie — accent or sur le « ? » du header commentaires */
.inv-stories__comments-header-mark {
  color: var(--tch-accent, #C6A15B);
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 1.1em;
  margin-left: 2px;
}

/* ─── Axe 5 — Particules dorées en trail (réaction burst) ────────────────── */
.inv-stories__spark-fly {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 99999;
  background:
    radial-gradient(circle, #fff 0%, var(--tch-accent, #C6A15B) 30%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(198, 161, 91, 0.85), 0 0 24px rgba(255, 255, 255, 0.4);
  animation: inv-stories-spark 1s ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes inv-stories-spark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(120deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-dx, 0)), calc(-50% + var(--spark-dy, -80px))) scale(0.6) rotate(360deg); }
}

/* ─── Axe 5 — Confetti final (dernier slide atteint) ─────────────────────── */
.inv-stories__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.inv-stories__confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  animation: inv-stories-confetti-fall linear forwards;
  transform-origin: center;
}
@keyframes inv-stories-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* Ken Burns (3 variantes) — subtil pour ne pas sur-zoomer */
.kenburns-1 { animation: kenburns-1 10s ease-in-out alternate infinite; }
.kenburns-2 { animation: kenburns-2 12s ease-in-out alternate infinite; }
.kenburns-3 { animation: kenburns-3 8s ease-in-out alternate infinite; }

@keyframes kenburns-1 {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1%, -0.5%); }
}
@keyframes kenburns-2 {
  0% { transform: scale(1.04) translate(0.5%, 0); }
  100% { transform: scale(1) translate(-0.5%, 1%); }
}
@keyframes kenburns-3 {
  0% { transform: scale(1) translate(0, 0.5%); }
  100% { transform: scale(1.04) translate(1%, -1%); }
}

/* Vidéo — barre de progression */
.inv-stories__video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 5;
}
.inv-stories__video-progress-fill {
  height: 100%;
  background: var(--tch-accent, #C6A15B);
  width: 0;
  transition: width 0.2s linear;
}

/* Icône pause */
.inv-stories__pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  transition: transform 0.2s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  z-index: 3;
}
.inv-stories__slide--paused .inv-stories__pause-icon {
  transform: translate(-50%, -50%) scale(1);
}

/* Caption (bas du slide) — cinématique storytelling */
.inv-stories__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 120px 80px 32px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 2;
  animation: caption-enter 0.6s var(--ease-out-expo) 0.15s both;
}
@keyframes caption-enter {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.inv-stories__date {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tch-accent, #C6A15B);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.4);
}
.inv-stories__title {
  font-family: var(--inv2-font-title, 'Cormorant Garamond'), serif;
  font-size: 1.8rem;
  font-style: italic;
  color: #fff;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}
.inv-stories__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-stories__media-indicator {
  display: inline-block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  letter-spacing: 0.05em;
}

/* Barre d'actions (droite, vertical — style TikTok) */
.inv-stories__actions {
  position: absolute;
  right: 12px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 3;
}
.inv-stories__action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: transform 0.2s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.inv-stories__action-btn:active {
  transform: scale(1.3);
}
.inv-stories__action-icon {
  font-size: 2.4rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s var(--ease-spring);
}
.inv-stories__action-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.inv-stories__action-btn--comment {
  font-size: 2.2rem;
}
.inv-stories__action-btn--comment i {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Bouton fermer */
.inv-stories__close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.inv-stories__close:hover {
  background: rgba(0, 0, 0, 0.6);
}
.inv-stories__close:focus-visible {
  outline: 2px solid var(--tch-accent, #C6A15B);
  outline-offset: 2px;
}

/* Compteur slides */
.inv-stories__counter {
  position: absolute;
  top: 20px;
  right: 16px;
  z-index: 10;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Double-tap coeur (dopamine TikTok) ────────────────────────────────── */
.inv-stories__heart-burst {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  font-size: 6rem;
  color: #ff2d55;
  filter: drop-shadow(0 0 20px rgba(255, 45, 85, 0.6));
  animation: heart-burst 0.9s var(--ease-out-expo) forwards;
}
@keyframes heart-burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ── Flash écran (double-tap dopamine) ─────────────────────────────────── */
.inv-stories__flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 4;
  animation: screen-flash 0.4s ease-out forwards;
}
@keyframes screen-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Barre de progression (style Instagram Stories) ────────────────────── */
.inv-stories__progress {
  position: absolute;
  top: 56px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 3px;
  z-index: 10;
}
.inv-stories__progress-dot {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  transition: background 0.35s ease, transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
  overflow: hidden;
  position: relative;
}
.inv-stories__progress-dot--active {
  background: linear-gradient(90deg, var(--tch-accent, #C6A15B) 0%, #e3c98a 50%, var(--tch-accent, #C6A15B) 100%);
  background-size: 200% 100%;
  transform: scaleY(1.8);
  box-shadow: 0 0 12px rgba(198, 161, 91, 0.55), 0 0 24px rgba(198, 161, 91, 0.25);
  animation: inv-stories-progress-shine 2.2s linear infinite;
}
.inv-stories__progress-dot--past {
  background: linear-gradient(90deg, rgba(198, 161, 91, 0.7), rgba(255, 255, 255, 0.65));
}
@keyframes inv-stories-progress-shine {
  0%   { background-position: 200% 50%; }
  100% { background-position: -100% 50%; }
}

/* ── Bounce réaction — multi-rebond dramatique ────────────────────────── */
.inv-stories__action-btn--reacted {
  animation: reaction-bounce 0.6s var(--ease-spring) !important;
}
@keyframes reaction-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.6); }
  50% { transform: scale(0.85); }
  75% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Réaction confirmée (glow persistant) ─────────────────────────────── */
.inv-stories__action-btn--has-reacted .inv-stories__action-icon {
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* ── Pop compteur ─────────────────────────────────────────────────────── */
.inv-stories__count-pop {
  animation: count-pop 0.35s var(--ease-spring);
}
@keyframes count-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.6); color: #fff; }
  100% { transform: scale(1); }
}

/* ── Bouton mute/unmute ────────────────────────────────────────────────── */
.inv-stories__mute-btn {
  position: absolute;
  top: 20px;
  right: 60px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s var(--ease-spring);
}
.inv-stories__mute-btn:hover { background: rgba(0, 0, 0, 0.6); }
.inv-stories__mute-btn:active { transform: scale(0.92); }
.inv-stories__mute-btn--hidden { display: none; }

/* ── Icônes volantes (animation dopamine) ──────────────────────────────── */
.inv-stories__emoji-fly {
  position: fixed;
  font-size: 2.2rem;
  pointer-events: none;
  z-index: 10002;
  animation: stories-emoji-fly 1.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
@keyframes stories-emoji-fly {
  0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  50% { transform: translateY(-120px) scale(1.8) rotate(10deg); opacity: 0.9; }
  100% { transform: translateY(-300px) scale(2) rotate(20deg); opacity: 0; }
}

/* ── Bottom sheet commentaires ─────────────────────────────────────────── */
.inv-stories__comments {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 60vh;
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A), #000 30%);
  border-radius: 16px 16px 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s var(--ease-out-expo);
}
.inv-stories__comments--open {
  transform: translateY(0);
}
.inv-stories__comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}
.inv-stories__comments-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.9rem;
}
.inv-stories__comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100px;
}
.inv-stories__comments-loading {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  padding: 32px 0;
}
.inv-stories__comments-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-size: 0.85rem;
  margin: 0;
  padding: 24px 0;
}

/* Commentaire individuel */
.inv-stories__comment {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-stories__comment-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tch-accent, #C6A15B);
}
.inv-stories__comment-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.4;
}

/* Formulaire commentaire */
.inv-stories__comments-form {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-stories__comments-name {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.85rem;
}
.inv-stories__comments-name::placeholder { color: rgba(255, 255, 255, 0.35); }
.inv-stories__comments-input-row {
  display: flex;
  gap: 8px;
}
.inv-stories__comments-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.85rem;
}
.inv-stories__comments-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.inv-stories__comments-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tch-accent, #C6A15B);
  color: var(--tch-primary, #1E2A5A);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.inv-stories__comments-send:hover { transform: scale(1.08); }
.inv-stories__comments-send:disabled { opacity: 0.5; }

/* Skeleton loading commentaires */
.inv-stories__comments-skeleton { padding: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.inv-stories__comments-skeleton-line { height: 12px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; animation: skeleton-pulse 1.5s ease-in-out infinite; }
.inv-stories__comments-skeleton-line--short { width: 60%; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* Animation nouveau commentaire */
.inv-stories__comment--new { animation: comment-enter 0.5s var(--ease-out-expo); }
@keyframes comment-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Identité sauvegardée */
.inv-stories__comments-identity { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); padding: 0 0 4px; }
.inv-stories__comments-identity strong { color: rgba(255, 255, 255, 0.8); }
.inv-stories__comments-identity a { color: var(--tch-accent, #C6A15B); text-decoration: none; margin-left: 8px; font-size: 0.7rem; }

/* ── Mobile-first : overlay stories ──────────────────────────────────── */
.inv-stories {
  overscroll-behavior: none;
  touch-action: none;
}
.inv-stories__comments-list {
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.inv-stories__action-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
/* Safe area insets */
.inv-stories__close {
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
}
.inv-stories__counter {
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}
.inv-stories__mute-btn {
  top: calc(20px + env(safe-area-inset-top, 0px));
}
.inv-stories__progress {
  top: calc(56px + env(safe-area-inset-top, 0px));
}
.inv-stories__caption {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.inv-stories__comments-form {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Petits écrans en hauteur */
@media (max-height: 700px) {
  .inv-stories__actions { bottom: 80px; }
  .inv-stories__caption { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Empêcher zoom iOS sur les inputs */
@media (max-width: 768px) {
  .inv-stories__comments-name,
  .inv-stories__comments-input { font-size: 16px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kenburns-1, .kenburns-2, .kenburns-3 { animation: none !important; }
  .inv-stories__emoji-fly { display: none; }
  .inv-stories__heart-burst { display: none; }
  .inv-stories__flash { display: none; }
  .inv-stories__caption { animation: none; }
  .inv-stories { transition: none; }
  .inv-stories__comments { transition: none; }
  .inv-stories__action-btn { transition: none; }
  .inv-stories__action-btn--reacted { animation: none !important; }
  .inv-stories__count-pop { animation: none; }
  .inv-stories__progress-dot { transition: none; }
  .inv-stories__media-skeleton { animation: none; }
  .inv-stories__media { transition: none; }
  .inv-stories__opt-in-icon { animation: none; }
  .inv-stories__social-proof,
  .inv-stories__social-proof--first { animation: none !important; }
  .inv-stories__ticker { transition: none; }
  .inv-stories__reaction-hint { animation: none !important; opacity: 1 !important; }
  .inv-stories__progress-dot--active { animation: none; }
  .inv-stories__spark-fly,
  .inv-stories__confetti,
  .inv-stories__confetti-piece { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   REFINEMENTS — Effets visuels subtils et micro-interactions
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── Variables additionnelles pour raffinement ─────────────────────────────── */
:root {
  --ref-glow-accent: 0 0 40px rgba(198, 161, 91, 0.15);
  --ref-glow-primary: 0 0 60px rgba(30, 42, 90, 0.12);
  --ref-shadow-elevated: 0 25px 80px rgba(30, 42, 90, 0.15), 0 10px 30px rgba(30, 42, 90, 0.1);
  --ref-shadow-floating: 0 8px 32px rgba(30, 42, 90, 0.08), 0 2px 8px rgba(30, 42, 90, 0.04);
  --ref-ease-dramatic: cubic-bezier(0.87, 0, 0.13, 1);
  --ref-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ─── Hero mobile-first — overlay dense par défaut, allégé en desktop ────── */
.dl-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dl-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* recadrage sur les visages du couple */
  transform: scale(1.06);
  animation: hero-ken-burns 22s ease-in-out infinite alternate;
}

@keyframes hero-ken-burns {
  0% { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}

/* Overlay mobile : opaque pour noyer tout texte parasite de la photo.
   Utilise la couleur primaire du mariage (var(--tch-primary)) via color-mix. */
.dl-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 92%, transparent) 0%,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 96%, transparent) 50%,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 99%, transparent) 100%
  );
  z-index: 1;
}

.dl-hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(198, 161, 91, 0.12) 0%, transparent 60%);
}

.dl-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2.25rem 1.25rem;
  max-width: 100%;
}

.dl-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  background: rgba(198, 161, 91, 0.14);
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tch-accent);
  margin-bottom: 1.25rem;
  animation: badge-entrance 0.6s var(--ease-out-expo) 0.2s both;
}

.dl-hero__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--tch-accent);
  border-radius: 50%;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes badge-entrance {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.25); }
}

.dl-hero__names {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(2.4rem, 13vw, 5.5rem);
  font-weight: 400;
  color: #FFF7EA;
  line-height: 1.05;
  margin: 0 0 0.65rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  animation: names-entrance 0.9s var(--ease-out-expo) 0.35s both;
}

@keyframes names-entrance {
  0% { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.dl-hero__date {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 3.5vw, 1.5rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.08em;
  margin: 0 0 0.6rem;
  animation: fade-up 0.7s var(--ease-out-expo) 0.55s both;
}

.dl-hero__sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 30ch;
  animation: fade-up 0.7s var(--ease-out-expo) 0.7s both;
}

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Desktop et tablette ≥ 768px : respiration + overlay allégé */
@media (min-width: 768px) {
  .dl-hero { min-height: 72vh; }
  .dl-hero__overlay {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--tch-primary, #1E2A5A) 70%, transparent) 0%,
      color-mix(in srgb, var(--tch-primary, #1E2A5A) 80%, transparent) 50%,
      color-mix(in srgb, var(--tch-primary, #1E2A5A) 94%, transparent) 100%
    );
  }
  .dl-hero__content { padding: 3rem 2rem; max-width: 700px; }
  .dl-hero__badge {
    padding: 0.6rem 1.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
  }
  .dl-hero__names { margin-bottom: 1rem; }
  .dl-hero__date { margin-bottom: 0.75rem; font-size: clamp(1.1rem, 3vw, 1.5rem); }
  .dl-hero__sub { font-size: 0.95rem; max-width: none; }
}

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Cartes Delivery — mobile-first, couleurs dynamiques du mariage ──── */
.dl-content {
  max-width: 680px;
  margin: -3rem auto 0;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

.dl-card {
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 14%, transparent);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--dl-shadow-sm, 0 1px 6px rgba(28, 43, 74, 0.06));
  transition: transform 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.dl-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 12%, transparent);
}

.dl-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tch-accent, #C6A15B) 12%, transparent);
  color: var(--tch-accent, #C6A15B);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.dl-card-icon--indigo {
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 10%, transparent);
  color: var(--tch-primary, #1E2A5A);
}

.dl-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  color: var(--tch-primary, #1E2A5A);
  line-height: 1.2;
  margin: 0;
}

.dl-card-lead {
  font-size: 0.9rem;
  color: var(--tch-text-muted, #6b6b7b);
  line-height: 1.65;
  margin: 0 0 1.1rem;
}

.dl-expiry {
  font-size: 0.76rem;
  color: var(--tch-text-muted, #6b6b7b);
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.5;
}

.dl-expiry i { color: var(--tch-accent, #C6A15B); }

.dl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tch-accent, #C6A15B), transparent, var(--tch-accent, #C6A15B));
  opacity: 0;
  transition: opacity 200ms ease;
}

.dl-card:hover {
  box-shadow: var(--dl-shadow-md, 0 4px 16px rgba(28, 43, 74, 0.08));
  transform: translateY(-2px);
}

.dl-card:hover::before { opacity: 0.6; }

@media (min-width: 768px) {
  .dl-content { margin-top: -4rem; padding: 0 1.5rem; }
  .dl-card { padding: 2rem; border-radius: 20px; margin-bottom: 1.5rem; }
  .dl-card-title { font-size: 1.5rem; }
  .dl-card-lead { font-size: 0.92rem; }
}

.dl-card--lift {
  animation: card-entrance 0.8s var(--ease-out-expo) both;
}

.dl-card:nth-child(1) { animation-delay: 0.1s; }
.dl-card:nth-child(2) { animation-delay: 0.2s; }
.dl-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes card-entrance {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Indicateurs de chapitre ───────────────────────────────────────────────── */
.inv2-chapter {
  position: relative;
  margin-bottom: 3rem;
}

.inv2-chapter__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--ease-out-expo);
}

.inv2-chapter__indicator[data-revealed] {
  opacity: 1;
  transform: translateY(0);
}

/* .inv2-chapter__number/__label V2 supprimés — la version mobile-first
   unique se trouve plus haut (ligne ~4633). */

/* ─── URL Box — mobile-first, couleurs dynamiques ──────────────────────── */
.dl-url-box {
  background: color-mix(in srgb, var(--tch-bg, #FFF7EA) 60%, #FFFFFF);
  border: 1.5px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 22%, transparent);
  border-radius: 12px;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 0.78rem;
  color: var(--tch-primary, #1E2A5A);
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
  outline: none;
  transition: box-shadow 160ms var(--ease-out-expo), border-color 160ms var(--ease-out-expo);
}

.dl-url-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tch-accent, #C6A15B);
}

.dl-url-box:focus-visible {
  border-color: var(--tch-accent, #C6A15B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent, #C6A15B) 22%, transparent);
}

@media (min-width: 768px) {
  .dl-url-box { font-size: 0.88rem; padding: 1rem 1.15rem 1rem 1.4rem; }
}

/* ─── Boutons Delivery — mobile-first, couleurs dynamiques du mariage ─── */
.dl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo), background-color 200ms var(--ease-out-expo);
}

.dl-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.dl-btn:active::after { opacity: 1; }

/* Primaire : couleur primaire du mariage */
.dl-btn--primary {
  background: var(--tch-primary, #1E2A5A);
  color: #FFFFFF;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--tch-primary, #1E2A5A) 28%, transparent);
}

.dl-btn--primary:hover {
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 88%, #000);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tch-primary, #1E2A5A) 34%, transparent);
  transform: translateY(-2px);
}

/* Copie : accent or du mariage, contour discret */
.dl-btn--copy {
  background: color-mix(in srgb, var(--tch-accent, #C6A15B) 8%, transparent);
  color: var(--tch-accent, #C6A15B);
  border: 1.5px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 28%, transparent);
  margin-top: 0.75rem;
}

.dl-btn--copy:hover {
  background: color-mix(in srgb, var(--tch-accent, #C6A15B) 14%, transparent);
  border-color: color-mix(in srgb, var(--tch-accent, #C6A15B) 44%, transparent);
}

.dl-btn--download {
  background: transparent;
  color: var(--tch-primary, #1E2A5A);
  border: 1.5px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 28%, transparent);
  margin-top: 0.75rem;
}

.dl-btn--download:hover {
  border-color: var(--tch-primary, #1E2A5A);
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 4%, transparent);
}

@media (min-width: 768px) {
  .dl-btn { padding: 0.9rem 1.75rem; font-size: 0.8rem; }
}

/* .dl-invite-card V2 supprimée — V1 mobile-first unique plus haut.
   Les sous-éléments __band, __names, __ornament, __date-row, __qr,
   __scan-hint etc. restent définis dans le bloc V1 plus haut. */

/* ─── Footer Delivery ───────────────────────────────────────────────────────── */
.inv-footer {
  position: relative;
  /* Padding aligné sur la version invitation (compact, ~40/28) */
  padding: 40px 24px 28px;
}

.inv-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 161, 91, 0.4), transparent);
}

.dl-footer__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.dl-footer__line {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
}

.dl-footer__line:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
}

.dl-footer__diamond {
  color: var(--tch-accent);
  font-size: 0.5rem;
  opacity: 0.7;
}

/* ─── Toast amélioré ────────────────────────────────────────────────────────── */
.dl-toast {
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(198, 161, 91, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: toast-entrance 0.5s var(--ease-spring);
}

@keyframes toast-entrance {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ─── Textareas WhatsApp — tout visible, hauteur dictée par le contenu ── */
.dl-textarea {
  width: 100%;
  display: block;
  min-height: 6rem;
  height: auto;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--tch-bg, #FFF7EA) 55%, #FFFFFF);
  border: 1.5px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 20%, transparent);
  border-radius: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 1rem; /* 16px minimum : évite le zoom forcé iOS sur focus */
  font-weight: 400;
  color: var(--tch-primary, #1E2A5A);
  line-height: 1.65;
  resize: none;
  overflow-y: auto; /* fallback : scroll si auto-size JS indisponible */
  field-sizing: content; /* natif navigateurs modernes */
  outline: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  transition: border-color 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo);
}

.dl-textarea:focus {
  border-color: color-mix(in srgb, var(--tch-accent, #C6A15B) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent, #C6A15B) 14%, transparent);
}

@media (min-width: 768px) {
  .dl-textarea { font-size: 0.95rem; padding: 1.1rem 1.25rem; }
}

/* ─── Tags de message ───────────────────────────────────────────────────────── */
.dl-msg-card {
  background: rgba(250, 248, 245, 0.8);
  border: 1px solid rgba(198, 161, 91, 0.12);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.dl-msg-card:hover {
  border-color: rgba(198, 161, 91, 0.2);
  box-shadow: 0 4px 15px rgba(30, 42, 90, 0.05);
}

.dl-msg-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tch-accent);
  margin-bottom: 0.75rem;
}

.dl-msg-dot {
  width: 6px;
  height: 6px;
  background: var(--tch-accent);
  border-radius: 50%;
  animation: dot-pulse 2s ease-in-out infinite;
}

/* Responsive delivery : la cascade est désormais mobile-first —
   les ajustements desktop sont dans les blocs min-width: 768px / 1024px
   au sein des règles concernées (hero, cards, chapitres, trifold). */

/* ═════════════════════════════════════════════════════════════════════════════
   EFFETS DOPAMINE — Micro-interactions et animations récompenses
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── Hover lift sur cartes ─────────────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--ref-shadow-elevated);
}

/* ─── Glow pulse sur éléments actifs ────────────────────────────────────────── */
.glow-pulse {
  animation: glow-pulse-anim 3s ease-in-out infinite;
}

@keyframes glow-pulse-anim {
  0%, 100% { box-shadow: 0 0 20px rgba(198, 161, 91, 0.2); }
  50% { box-shadow: 0 0 40px rgba(198, 161, 91, 0.4); }
}

/* ─── Shimmer effect ────────────────────────────────────────────────────────── */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: shimmer-anim 3s infinite;
}

@keyframes shimmer-anim {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ─── Entrée staggered des éléments ─────────────────────────────────────────── */
[data-stagger] {
  opacity: 0;
  transform: translateY(30px);
}

[data-stagger="1"] { animation: stagger-entrance 0.8s var(--ease-out-expo) 0.1s forwards; }
[data-stagger="2"] { animation: stagger-entrance 0.8s var(--ease-out-expo) 0.2s forwards; }
[data-stagger="3"] { animation: stagger-entrance 0.8s var(--ease-out-expo) 0.3s forwards; }
[data-stagger="4"] { animation: stagger-entrance 0.8s var(--ease-out-expo) 0.4s forwards; }
[data-stagger="5"] { animation: stagger-entrance 0.8s var(--ease-out-expo) 0.5s forwards; }

@keyframes stagger-entrance {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Particules flottantes ─────────────────────────────────────────────────── */
.floating-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.floating-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--tch-accent);
  border-radius: 50%;
  opacity: 0;
  animation: float-particle 8s ease-in-out infinite;
}

.floating-particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.floating-particles span:nth-child(2) { left: 30%; animation-delay: 2s; }
.floating-particles span:nth-child(3) { left: 50%; animation-delay: 4s; }
.floating-particles span:nth-child(4) { left: 70%; animation-delay: 1s; }
.floating-particles span:nth-child(5) { left: 90%; animation-delay: 3s; }

@keyframes float-particle {
  0%, 100% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-20px) scale(1); }
}

/* ─── Accent underline animation ────────────────────────────────────────────── */
.accent-underline {
  position: relative;
  display: inline-block;
}

.accent-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--tch-accent);
  transition: width 0.4s var(--ease-out-expo);
}

.accent-underline:hover::after {
  width: 100%;
}

/* ─── Magnetic button effect base ───────────────────────────────────────────── */
.magnetic-btn {
  transition: transform 0.3s var(--ease-out-expo);
}

/* ─── Progress ring animation ───────────────────────────────────────────────── */
.progress-ring-circle {
  transition: stroke-dashoffset 0.5s var(--ease-out-expo);
}

/* ─── Success check animation ───────────────────────────────────────────────── */
.success-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: draw-check 0.5s var(--ease-out-expo) forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* ─── Animation d'ouverture de l'invitation ──────────────────────────────────
   Pilotée par config.openingAnimation (éditable dans l'espace marié et l'admin) :
   fade / slide / zoom / none. La classe est posée sur #invitationContent par
   show_v2.html.twig. L'animation joue quand le splash retire .inv-hidden
   (ou immédiatement en aperçu, sans splash). Le bloc prefers-reduced-motion
   global (plus haut dans ce fichier) la neutralise pour l'accessibilité. */
.inv-open {
  animation-duration: 0.9s;
  animation-timing-function: var(--ease-out-expo);
  animation-fill-mode: both;
}

.inv-open--fade { animation-name: inv-open-fade; }
.inv-open--slide { animation-name: inv-open-slide; }
.inv-open--zoom { animation-name: inv-open-zoom; }
.inv-open--none { animation: none; }

@keyframes inv-open-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes inv-open-slide {
  from { opacity: 0; transform: translateY(42px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes inv-open-zoom {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── Carte d'identité de l'invité reconnu (hero + missive, tous thèmes) ───────
   Photo à gauche, nom + badge de catégorie + phrase d'accueil à droite (macro
   identityCard de components/_guest_honour.html.twig).
   S'ADAPTE au thème ET aux couleurs du mariage : bordure, anneau photo, nom,
   initiales et badges sont dérivés de var(--wedding-X, var(--tch-X, défaut)) —
   même chaîne que la section parrainage (cf. invitation-emotional.css). Les
   variables --wedding-* et --tch-* (surchargées par chaque thème) sont posées
   sur .invitation-wrapper par invitation.js. La surface reste ivoire claire
   pour garantir la lisibilité quelle que soit la palette. La phrase est DANS la
   carte (sur l'ivoire) → lisible sur n'importe quel fond de hero. */
.inv-guest-id {
  --id-accent: var(--wedding-accent, var(--tch-accent, #C6A15B));
  --id-primary: var(--wedding-primary, var(--tch-primary, #1E2A5A));
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: min(440px, 92vw);
  margin: 0 auto 0.7rem;
  padding: 0.75rem 1.4rem 0.75rem 0.7rem;
  background: linear-gradient(180deg, #fffdf9, #fff7ec);
  border: 1px solid rgba(198, 161, 91, 0.32);
  border: 1px solid color-mix(in srgb, var(--id-accent) 42%, transparent);
  border-radius: 22px;
  /* Ombre douce, diffuse, teintée par la couleur primaire (jamais noire). */
  box-shadow:
    0 24px 52px -30px color-mix(in srgb, var(--id-primary) 45%, transparent),
    0 6px 16px -10px color-mix(in srgb, var(--id-primary) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.inv-guest-id__photo {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  /* Double anneau : liseré blanc + fil d'or du mariage. */
  border: 3px solid #fff;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--id-accent) 85%, transparent),
    0 6px 14px -7px color-mix(in srgb, var(--id-primary) 45%, transparent);
}
.inv-guest-id__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inv-guest-id__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--id-primary) 82%, #fff) 0%, var(--id-primary) 62%, color-mix(in srgb, var(--id-primary) 78%, #000) 100%);
  color: color-mix(in srgb, var(--id-accent) 88%, #fff);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
.inv-guest-id__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  min-width: 0;
}
.inv-guest-id__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.02;
  font-weight: 600;
  color: #1E2A5A;
  color: var(--id-primary);
  letter-spacing: 0;
}
.inv-guest-id__line {
  display: block;
  margin: 0.18rem 0 0;
  text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.32;
  color: color-mix(in srgb, var(--id-primary) 74%, transparent);
}
@media (min-width: 480px) {
  .inv-guest-id { gap: 1.1rem; }
  .inv-guest-id__name { font-size: 1.5rem; }
  .inv-guest-id__photo { width: 62px; height: 62px; }
  .inv-guest-id__line { font-size: 1.05rem; }
}

/* Badge de catégorie d'invité — registre court, jamais le mot « VIP » (§6.2).
   Couleur par type, dérivée de la palette : VIP = accent du mariage, Amis =
   secondaire, Standard = primaire. Honneur garde un rose chaud (registre
   distinct, hors palette). Chaînes complètes de variables (le badge sert aussi
   seul dans le Cercle d'honneur, hors .inv-guest-id). */
.inv-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  line-height: 1.4;
}
.inv-tier-badge i { font-size: 0.68rem; opacity: 0.9; }
.inv-tier-badge--vip {
  background: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 15%, transparent);
  color: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 66%, #3a2c0c);
  border: 1px solid color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 52%, transparent);
}
.inv-tier-badge--amis {
  background: color-mix(in srgb, var(--wedding-secondary, var(--tch-secondary, #1F7A5C)) 14%, transparent);
  color: color-mix(in srgb, var(--wedding-secondary, var(--tch-secondary, #1F7A5C)) 70%, #06281c);
  border: 1px solid color-mix(in srgb, var(--wedding-secondary, var(--tch-secondary, #1F7A5C)) 46%, transparent);
}
.inv-tier-badge--standard {
  background: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 9%, transparent);
  color: var(--wedding-primary, var(--tch-primary, #1E2A5A));
  border: 1px solid color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 28%, transparent);
}
.inv-tier-badge--honneur { background: rgba(178, 93, 109, 0.12); color: #9c4357; border: 1px solid rgba(178, 93, 109, 0.42); }

/* Cortège — côté marié (primaire du mariage) : garçon d'honneur, puis best man
   plus appuyé ; côté mariée (rosé chaud) : fille d'honneur, puis dame de
   compagnie plus appuyée. Chaînes complètes de variables (badge utilisé seul). */
.inv-tier-badge--garcon_honneur {
  background: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 10%, transparent);
  color: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 78%, #0a1230);
  border: 1px solid color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 32%, transparent);
}
.inv-tier-badge--best_man {
  background: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 15%, transparent);
  color: var(--wedding-primary, var(--tch-primary, #1E2A5A));
  border: 1px solid color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 48%, transparent);
}
.inv-tier-badge--fille_honneur { background: rgba(178, 93, 109, 0.10); color: #a8576b; border: 1px solid rgba(178, 93, 109, 0.34); }
.inv-tier-badge--dame_compagnie { background: rgba(156, 67, 87, 0.14); color: #8c3a4d; border: 1px solid rgba(156, 67, 87, 0.48); }

/* Cercle d'honneur (tinhoetina) — sous-groupes par catégorie de cortège.
   Chaque groupe a son eyebrow serif et son intro (ton propre). Couleurs
   dérivées de la palette du mariage. */
.tt-honour-group { margin-top: clamp(2rem, 6vw, 3.4rem); }
.tt-honour-group:first-of-type { margin-top: 0; }
.tt-honour-group__head {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto clamp(1.2rem, 4vw, 2rem);
}
.tt-honour-group__eyebrow {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  line-height: 1.2;
  color: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 78%, #2a2018);
}
.tt-honour-group__word {
  margin: 0.5rem auto 0;
  font-size: clamp(0.9rem, 2.6vw, 1rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 66%, transparent);
}

/* ─── Floating animation ────────────────────────────────────────────────────── */
.floating {
  animation: floating-anim 4s ease-in-out infinite;
}

@keyframes floating-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   UTILITAIRES — Classes helper pour le raffinement
   ═════════════════════════════════════════════════════════════════════════════ */

.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.text-gradient {
  background: linear-gradient(135deg, var(--tch-accent), #e8d5a8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.border-gradient {
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, var(--tch-accent), transparent) border-box;
}

/* ─── Reduced motion respect ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dl-hero__bg img { animation: none; }
  .dl-hero__badge { animation: none; }
  .dl-hero__names { animation: none; }
  .dl-hero__date { animation: none; }
  .dl-hero__sub { animation: none; }
  .dl-card { animation: none; }
  .shimmer::after { animation: none; }
  .glow-pulse { animation: none; }
  .floating { animation: none; }
  .floating-particles span { animation: none; }
  .dl-toast { animation: none; }
}


/* ═════════════════════════════════════════════════════════════════════════════
   DOPAMINE ENHANCEMENTS — Phase 1-5: Chapter Rewards, Scroll Rewards, Easter Eggs
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── Chapter Rewards ───────────────────────────────────────────────────────── */

/* Indicateur de chapitre visité */
.chapter-visited {
  animation: chapter-visited-pulse 0.6s var(--ease-spring);
}

.chapter-visited .inv2-chapter__number {
  background: linear-gradient(135deg, var(--tch-accent), #2d5016) !important;
  box-shadow: 0 0 20px rgba(198, 161, 91, 0.5);
}

@keyframes chapter-visited-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Toast de chapitre */
.chapter-toast {
  position: fixed;
  top: 100px;
  right: 20px;
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tch-accent);
  border-radius: 12px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tch-bg, #FFF7EA);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transform: translateX(150%);
  transition: transform 0.5s var(--ease-spring);
}

.chapter-toast.show {
  transform: translateX(0);
}

.chapter-toast i {
  color: var(--tch-accent);
  font-size: 1.2rem;
}

/* Mini confetti */
.mini-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

.mini-confetti-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: mini-confetti-explode 1.5s var(--ease-out-expo) forwards;
}

@keyframes mini-confetti-explode {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + (var(--tx, 100px))),
      calc(-50% + (var(--ty, -100px)))
    ) scale(0.5);
    opacity: 0;
  }
}

/* ─── Scroll Rewards ────────────────────────────────────────────────────────── */

/* Toast de milestone de scroll */
.scroll-milestone-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tch-accent, #C6A15B);
  border-radius: 50px;
  padding: 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--tch-bg, #FFF7EA);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: transform 0.5s var(--ease-spring);
  min-width: 220px;
}

.scroll-milestone-toast.show {
  transform: translateX(-50%) translateY(0);
}

.scroll-milestone-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.scroll-milestone-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tch-accent), #ffd700);
  border-radius: 2px;
  transition: width 0.8s var(--ease-out-expo);
}

/* Confetti de scroll */
.scroll-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
}

.scroll-confetti-particle {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  background: var(--tch-accent);
  border-radius: 50%;
  animation: scroll-confetti-fall 3s var(--ease-out-expo) forwards;
}

@keyframes scroll-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ─── Time Tracker ──────────────────────────────────────────────────────────── */

.time-tracker-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tch-accent);
  border-radius: 50px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tch-bg, #FFF7EA);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: transform 0.5s var(--ease-spring);
}

.time-tracker-toast.show {
  transform: translateX(-50%) translateY(0);
}

.time-tracker-toast i {
  color: var(--tch-accent);
}

/* ─── Easter Eggs ───────────────────────────────────────────────────────────── */

/* Modal Easter Egg */
.easter-egg-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.easter-egg-modal.show {
  opacity: 1;
}

.easter-egg-content {
  background: linear-gradient(135deg, #1E2A5A, #2d3d7a);
  border: 2px solid var(--tch-accent);
  border-radius: 20px;
  padding: 40px 50px;
  text-align: center;
  color: var(--tch-bg, #FFF7EA);
  font-size: 1.2rem;
  font-weight: 500;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transform: scale(0.8);
  transition: transform 0.4s var(--ease-spring);
  max-width: 90%;
  width: 400px;
}

.easter-egg-modal.show .easter-egg-content {
  transform: scale(1);
}

.easter-egg-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.easter-egg-close:hover {
  opacity: 1;
}

/* Losanges cliquables */
.inv2-verse__diamond,
.inv-footer__diamond {
  transition: all 0.3s var(--ease-spring);
  cursor: pointer;
  display: inline-block;
}

.inv2-verse__diamond:hover,
.inv-footer__diamond:hover {
  transform: scale(1.3) rotate(45deg);
  color: var(--tch-accent);
  text-shadow: 0 0 20px var(--tch-accent);
}

.inv2-verse__diamond:active,
.inv-footer__diamond:active {
  transform: scale(0.9) rotate(45deg);
}

/* ─── Reduced Motion Support ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .chapter-toast,
  .scroll-milestone-toast,
  .time-tracker-toast {
    transition: none;
  }

  .mini-confetti-particle,
  .scroll-confetti-particle {
    animation: none;
    opacity: 0;
  }

  .easter-egg-content {
    transition: none;
  }

  .chapter-visited {
    animation: none;
  }
}

/* ─── Mobile Adjustments ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .chapter-toast {
    top: auto;
    bottom: 100px;
    right: 10px;
    left: 10px;
    transform: translateY(150%);
  }

  .chapter-toast.show {
    transform: translateY(0);
  }

  .scroll-milestone-toast {
    bottom: 80px;
    padding: 12px 20px;
    font-size: 0.8rem;
  }

  .easter-egg-content {
    padding: 30px;
    font-size: 1rem;
  }
}


/* ═════════════════════════════════════════════════════════════════════════════
   AGENTS.MD COMPLIANCE — Moving inline styles to CSS classes
   ═════════════════════════════════════════════════════════════════════════════ */

/* Floating particles (was inline) */
.floating-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* CTA Icon animations */
.cta-bounce {
  animation: bounce 2s infinite;
}

.cta-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════════════════════════════
   RSVP INPUT REWARDS — Phase 4
   ═════════════════════════════════════════════════════════════════════════════ */

/* Validation visuelle des champs */
.inv-input {
  transition: all 0.3s var(--ease-spring);
  border: 2px solid rgba(30, 42, 90, 0.1);
}

.inv-input:focus {
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.1);
  outline: none;
}

.inv-input.is-valid {
  border-color: var(--tch-secondary);
  background: rgba(31, 122, 92, 0.05);
}

.inv-input.is-valid + .input-validation-icon,
.inv-input-container .input-validation-icon {
  opacity: 1;
  transform: scale(1);
}

/* Container pour input avec icône */
.inv-input-container {
  position: relative;
}

.input-validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  color: var(--tch-secondary);
  opacity: 0;
  transition: all 0.3s var(--ease-spring);
}

/* Animation de validation */
@keyframes input-validated-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(31, 122, 92, 0.3);
  }
  100% {
    transform: scale(1);
  }
}

.inv-input.just-validated {
  animation: input-validated-pop 0.4s var(--ease-spring);
}

/* Récompense de champ complété */
.field-reward-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--tch-accent);
  border-radius: 50%;
  pointer-events: none;
  animation: field-reward-float 1s var(--ease-out-expo) forwards;
}

@keyframes field-reward-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px) scale(0);
    opacity: 0;
  }
}

/* Message de bienvenue personnalisé */
.personalized-greeting {
  background: linear-gradient(135deg, rgba(198, 161, 91, 0.1), rgba(198, 161, 91, 0.05));
  border: 1px solid rgba(198, 161, 91, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: center;
  animation: greeting-fade-in 0.6s var(--ease-out-expo);
  display: none;
}

.personalized-greeting.is-visible {
  display: block;
}

@keyframes greeting-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.personalized-greeting__name {
  color: var(--tch-accent);
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════════════════
   STORY VIEWER REWARDS — Phase 3
   ═════════════════════════════════════════════════════════════════════════════ */

/* Badge Story Master */
.story-master-badge {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, var(--tch-accent), #ffd700);
  color: var(--tch-primary);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(198, 161, 91, 0.4);
  z-index: 10001;
  transition: transform 0.5s var(--ease-spring);
}

.story-master-badge.show {
  transform: translateX(-50%) translateY(0);
}

.story-master-badge i {
  margin-right: 8px;
}

/* Enhanced reaction buttons */
.inv-stories__action-btn {
  transition: all 0.2s var(--ease-spring);
}

.inv-stories__action-btn:active {
  transform: scale(0.9);
}

.inv-stories__action-btn--reacted {
  animation: reaction-bounce 0.4s var(--ease-spring);
}

@keyframes reaction-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* Count pop animation */
.inv-stories__count-pop {
  animation: count-pop 0.4s var(--ease-spring);
}

@keyframes count-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    color: var(--tch-accent);
  }
  100% {
    transform: scale(1);
  }
}

/* Story completion overlay */
.story-completion-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.story-completion-overlay.show {
  opacity: 1;
}

.story-completion-content {
  text-align: center;
  color: var(--tch-bg, #FFF7EA);
  padding: 40px;
  transform: scale(0.8);
  transition: transform 0.5s var(--ease-spring);
}

.story-completion-overlay.show .story-completion-content {
  transform: scale(1);
}

.story-completion-content h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--tch-accent);
}

.story-completion-content p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

.story-completion-close {
  background: var(--tch-accent);
  color: var(--tch-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}

.story-completion-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(198, 161, 91, 0.4);
}

/* ═════════════════════════════════════════════════════════════════════════════
   ENHANCED RSVP BUTTONS — Variation des pétales
   ═════════════════════════════════════════════════════════════════════════════ */

/* Pétales dorées pour RSVP */
.inv-petal--golden {
  filter: hue-rotate(45deg) saturate(1.5);
}

/* Enhanced checkmark animation */
.inv-checkmark {
  filter: drop-shadow(0 2px 4px rgba(31, 122, 92, 0.3));
}

/* RSVP card celebration state */
.inv-event--celebrated {
  animation: card-celebration 0.6s var(--ease-spring);
}

@keyframes card-celebration {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(198, 161, 91, 0.3);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ENHANCED SUBMIT BUTTON
   ═════════════════════════════════════════════════════════════════════════════ */

/* Glow pulse amélioré */
.glow-pulse {
  position: relative;
}

.glow-pulse::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--tch-accent), transparent, var(--tch-accent));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  animation: glow-pulse-rotate 3s linear infinite;
}

@keyframes glow-pulse-rotate {
  0% {
    opacity: 0.5;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
    transform: rotate(360deg);
  }
}

/* Submit button celebration */
.inv-submit-btn.celebrating {
  animation: submit-celebration 0.8s var(--ease-spring);
}

@keyframes submit-celebration {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.98);
  }
  75% {
    transform: scale(1.02);
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ENHANCED COLOR PALETTE
   ═════════════════════════════════════════════════════════════════════════════ */

/* Enhanced color swatch hover */
.inv2-palette__circle {
  transition: all 0.4s var(--ease-spring);
  cursor: pointer;
}

.inv2-palette__circle:hover {
  transform: scale(1.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.inv2-palette__circle:active {
  transform: scale(0.95);
}

/* Copied feedback */
.inv2-palette__swatch {
  position: relative;
}

.inv2-palette__swatch.copied::after {
  content: 'Copié !';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tch-primary);
  color: var(--tch-bg, #FFF7EA);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  animation: copied-tooltip 1.5s var(--ease-out-expo) forwards;
}

@keyframes copied-tooltip {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ENHANCED MUSIC PLAYER
   ═════════════════════════════════════════════════════════════════════════════ */

/* Music visualizer bars */
.music-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  margin-left: 10px;
}

.music-visualizer-bar {
  width: 3px;
  background: var(--tch-accent);
  border-radius: 2px;
  animation: visualizer-dance 0.5s ease-in-out infinite alternate;
}

.music-visualizer-bar:nth-child(1) { animation-delay: 0s; height: 30%; }
.music-visualizer-bar:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.music-visualizer-bar:nth-child(3) { animation-delay: 0.2s; height: 40%; }
.music-visualizer-bar:nth-child(4) { animation-delay: 0.3s; height: 80%; }
.music-visualizer-bar:nth-child(5) { animation-delay: 0.15s; height: 50%; }

@keyframes visualizer-dance {
  from {
    transform: scaleY(0.5);
  }
  to {
    transform: scaleY(1);
  }
}

/* Playing state glow */
.inv-music-player__btn.playing {
  animation: music-btn-glow 2s ease-in-out infinite;
}

@keyframes music-btn-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(198, 161, 91, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(198, 161, 91, 0.2);
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   NAVIGATION CHIPS ENHANCEMENT
   ═════════════════════════════════════════════════════════════════════════════ */

.inv2-nav-chip {
  transition: all 0.3s var(--ease-spring);
}

.inv2-nav-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 42, 90, 0.15);
}

.inv2-nav-chip:active {
  transform: translateY(0);
}

.inv2-nav-chip.visited {
  border-color: var(--tch-accent);
  background: rgba(198, 161, 91, 0.1);
}

.inv2-nav-chip.visited::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: 6px;
  color: var(--tch-accent);
  font-size: 0.7rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAGES PUBLIQUES — Pricing, Onboarding, Payment
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- PRICING --- */
.pricing-hero { min-height: 100vh; padding: 3rem 1rem; background: linear-gradient(180deg, var(--tch-bg) 0%, #fff 100%); }
.pricing-container { max-width: 1100px; margin: 0 auto; }
.pricing-title { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: var(--tch-primary); text-align: center; margin-bottom: 0.5rem; }
.pricing-subtitle { text-align: center; color: var(--tch-text-muted); font-size: 1.1rem; margin-bottom: 3rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } .pricing-title { font-size: 1.8rem; } }
.pricing-card { background: #fff; border-radius: 16px; padding: 2rem 1.5rem; border: 2px solid #e5e7eb; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(30, 42, 90, 0.1); }
.pricing-card--featured { border-color: var(--tch-accent); box-shadow: 0 8px 30px rgba(198, 161, 91, 0.15); }
.pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--tch-accent); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 16px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
.pricing-card__header { text-align: center; margin-bottom: 1.5rem; }
.pricing-card__name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--tch-primary); margin-bottom: 0.5rem; }
.pricing-card__amount { font-size: 2.2rem; font-weight: 700; color: var(--tch-primary); }
.pricing-card__currency { font-size: 0.9rem; color: var(--tch-text-muted); margin-left: 4px; }
.pricing-card__billing { font-size: 0.85rem; color: var(--tch-text-muted); }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pricing-card__features li { padding: 6px 0; font-size: 0.9rem; color: var(--tch-text); display: flex; align-items: center; gap: 8px; }
.pricing-card__features li i.fa-check { color: var(--tch-secondary); font-size: 0.8rem; }
.pricing-card__features li i.fa-times { color: #ccc; font-size: 0.8rem; }
.pricing-card__feature--disabled { opacity: 0.45; }
.pricing-card__cta { display: block; width: 100%; padding: 12px; text-align: center; border-radius: 10px; font-weight: 600; text-decoration: none; background: var(--tch-primary); color: #fff; transition: background 0.2s ease; }
.pricing-card__cta:hover { background: var(--tch-primary-hover); color: #fff; }
.pricing-card__cta--featured { background: var(--tch-accent); }
.pricing-card__cta--featured:hover { background: var(--tch-accent-hover); }
.pricing-guarantee { text-align: center; margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--tch-text-muted); font-size: 0.9rem; }
.pricing-guarantee i { color: var(--tch-secondary); font-size: 1.1rem; }

/* --- ONBOARDING --- */
.onboarding-page { min-height: 100vh; padding: 2rem 1rem; background: var(--tch-bg); }
.onboarding-container { max-width: 680px; margin: 0 auto; }
.onboarding-header { text-align: center; margin-bottom: 2rem; }
.onboarding-back { display: inline-flex; align-items: center; gap: 6px; color: var(--tch-text-muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 1rem; }
.onboarding-back:hover { color: var(--tch-primary); }
.onboarding-title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--tch-primary); }
.onboarding-subtitle { color: var(--tch-text-muted); font-size: 1rem; }
.onboarding-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.onboarding-alert--error { background: #fef2f2; color: #dc2626; }
.onboarding-form { display: flex; flex-direction: column; gap: 1.5rem; }
.onboarding-section { background: #fff; border-radius: 16px; padding: 1.5rem; border: 1px solid #e5e7eb; }
.onboarding-section__title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: var(--tch-primary); margin-bottom: 1rem; font-weight: 600; }
.onboarding-step { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tch-accent); color: #fff; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.onboarding-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 600px) { .onboarding-packages { grid-template-columns: 1fr; } }
.onboarding-package { display: flex; flex-direction: column; align-items: center; padding: 1rem; border: 2px solid #e5e7eb; border-radius: 12px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; text-align: center; }
.onboarding-package input { display: none; }
.onboarding-package--selected, .onboarding-package:has(input:checked) { border-color: var(--tch-accent); background: rgba(198, 161, 91, 0.06); }
.onboarding-package__name { font-weight: 600; color: var(--tch-primary); font-size: 0.95rem; }
.onboarding-package__price { font-size: 0.85rem; color: var(--tch-text-muted); margin-top: 4px; }
.onboarding-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; }
@media (max-width: 500px) { .onboarding-row { grid-template-columns: 1fr; } }
.onboarding-field { display: flex; flex-direction: column; gap: 4px; }
.onboarding-field--full { grid-column: 1 / -1; }
.onboarding-field label { font-size: 0.85rem; font-weight: 500; color: var(--tch-primary); }
.onboarding-field label small { color: var(--tch-text-muted); font-weight: 400; }
.onboarding-field input { padding: 10px 12px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 1rem; font-family: inherit; transition: border-color 0.2s ease; background: #fff; }
.onboarding-field input:focus { outline: none; border-color: var(--tch-accent); box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.1); }
.onboarding-section--submit { text-align: center; border: none; background: transparent; padding: 0; }
.onboarding-recap { font-size: 0.8rem; color: var(--tch-text-muted); margin-bottom: 1rem; }
.onboarding-submit { display: inline-flex; align-items: center; gap: 10px; padding: 14px 40px; background: var(--tch-accent); color: #fff; border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.onboarding-submit:hover { background: var(--tch-accent-hover); transform: translateY(-2px); }
.onboarding-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 1rem; font-size: 0.8rem; color: var(--tch-text-muted); }
.onboarding-secure i { color: var(--tch-secondary); }

/* --- PAYMENT RESULT --- */
.payment-result { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--tch-bg); }
.payment-result__container { text-align: center; max-width: 480px; background: #fff; border-radius: 20px; padding: 3rem 2rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); }
.payment-result__icon { font-size: 4rem; margin-bottom: 1.5rem; }
.payment-result__icon--success { color: var(--tch-secondary); }
.payment-result__icon--pending { color: var(--tch-accent); }
.payment-result__icon--failed { color: #dc2626; }
.payment-result__icon--cancelled { color: var(--tch-text-muted); }
.payment-result__title { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--tch-primary); margin-bottom: 0.75rem; }
.payment-result__message { color: var(--tch-text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.payment-result__details { text-align: left; background: var(--tch-bg); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9rem; }
.payment-result__details p { margin: 4px 0; color: var(--tch-text); }
.payment-result__hint { font-size: 0.85rem; color: var(--tch-text-muted); font-style: italic; }
.payment-result__cta { display: inline-block; padding: 12px 32px; background: var(--tch-accent); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 600; transition: background 0.2s ease; }
.payment-result__cta:hover { background: var(--tch-accent-hover); color: #fff; }

/* --- WHATSAPP SHARE BUTTON --- */
.inv-share-whatsapp {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #25D366;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.inv-share-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.45);
  color: #fff;
}
.inv-share-whatsapp i { font-size: 1.3rem; }
@media (max-width: 600px) {
  .inv-share-whatsapp span { display: none; }
  .inv-share-whatsapp { padding: 14px; border-radius: 50%; right: 16px; }
  .inv-share-whatsapp i { font-size: 1.5rem; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═════════════════════════════════════════════════════════════════════════════ */

.landing-container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* --- HERO --- */
.landing-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem;
  background: linear-gradient(170deg, var(--tch-primary) 0%, #0f1a3d 60%, #0a1230 100%);
  position: relative;
  overflow: hidden;
}
.landing-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 91, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.landing-hero__content { position: relative; z-index: 1; max-width: 700px; }
.landing-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.landing-hero__accent { color: var(--tch-accent); }
.landing-hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.landing-hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.landing-hero__proof {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.landing-hero__proof i { color: var(--tch-secondary); }
@media (max-width: 600px) {
  .landing-hero__title { font-size: 2.2rem; }
  .landing-hero__subtitle { font-size: 1rem; }
  .landing-hero { min-height: 80vh; padding: 3rem 1rem; }
}

/* --- CTA BUTTONS --- */
.landing-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}
.landing-cta--primary {
  background: var(--tch-accent);
  color: #fff;
}
.landing-cta--primary:hover {
  background: var(--tch-accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(198, 161, 91, 0.3);
}
.landing-cta--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.landing-cta--secondary:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.landing-cta--large { padding: 16px 40px; font-size: 1.1rem; }

/* --- SECTIONS --- */
.landing-section { padding: 5rem 1.25rem; }
.landing-section--alt { background: var(--tch-bg); }
.landing-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  color: var(--tch-primary);
  text-align: center;
  margin-bottom: 0.5rem;
}
.landing-section__subtitle {
  text-align: center;
  color: var(--tch-text-muted);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .landing-section { padding: 3rem 1rem; }
  .landing-section__title { font-size: 1.7rem; }
}

/* --- PROBLEME / SOLUTION --- */
.landing-problems { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 800px; margin: 0 auto; }
@media (max-width: 600px) { .landing-problems { grid-template-columns: 1fr; } }
.landing-problem {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid #e5e7eb;
}
.landing-problem--solution {
  border-color: var(--tch-accent);
  background: linear-gradient(135deg, #fff 0%, rgba(198, 161, 91, 0.04) 100%);
}
.landing-problem__icon { font-size: 1.8rem; color: var(--tch-text-muted); margin-bottom: 1rem; }
.landing-problem--solution .landing-problem__icon { color: var(--tch-accent); }
.landing-problem__title { font-size: 1.1rem; font-weight: 600; color: var(--tch-primary); margin-bottom: 0.5rem; }
.landing-problem__text { font-size: 0.95rem; color: var(--tch-text-muted); line-height: 1.6; }

/* --- FEATURES --- */
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) { .landing-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .landing-features { grid-template-columns: 1fr; } }
.landing-feature {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  border: 1px solid #e5e7eb;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(30, 42, 90, 0.08);
}
.landing-feature__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(30, 42, 90, 0.06);
  color: var(--tch-primary);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.landing-feature__title { font-size: 1rem; font-weight: 600; color: var(--tch-primary); margin-bottom: 0.5rem; }
.landing-feature__text { font-size: 0.9rem; color: var(--tch-text-muted); line-height: 1.6; }

/* --- PRICING ROW (landing compact) --- */
.landing-pricing-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.landing-pricing-item {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.5rem 2rem;
  text-align: center;
  min-width: 180px;
  transition: transform 0.2s ease;
}
.landing-pricing-item:hover { transform: translateY(-3px); }
.landing-pricing-item--featured {
  border-color: var(--tch-accent);
  box-shadow: 0 4px 20px rgba(198, 161, 91, 0.12);
}
.landing-pricing-item__name { display: block; font-weight: 600; color: var(--tch-primary); font-size: 1rem; margin-bottom: 0.25rem; }
.landing-pricing-item__price { display: block; font-size: 1.4rem; font-weight: 700; color: var(--tch-primary); margin-bottom: 0.25rem; }
.landing-pricing-item__guests { display: block; font-size: 0.8rem; color: var(--tch-text-muted); }
.landing-pricing-cta { text-align: center; }

/* --- FINAL CTA --- */
.landing-final {
  text-align: center;
  padding: 5rem 1.25rem;
  background: linear-gradient(170deg, var(--tch-primary) 0%, #0f1a3d 100%);
}
.landing-final__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.landing-final__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* --- FOOTER --- */
.landing-footer {
  padding: 2.5rem 1.25rem;
  background: #0a1230;
  text-align: center;
}
.landing-footer__brand { margin-bottom: 1rem; }
.landing-footer__logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tch-accent);
  letter-spacing: 2px;
}
.landing-footer__tagline { color: rgba(255, 255, 255, 0.4); font-size: 0.85rem; margin-top: 0.25rem; }
.landing-footer__links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.landing-footer__links a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 0.9rem; transition: color 0.2s ease; }
.landing-footer__links a:hover { color: var(--tch-accent); }
.landing-footer__copy { font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); }

/* ═════════════════════════════════════════════════════════════════════════════
   CLIENT DASHBOARD
   ═════════════════════════════════════════════════════════════════════════════ */

.client-dash { min-height: 100vh; padding: 2rem 1rem; background: var(--tch-bg); }
.client-dash__container { max-width: 900px; margin: 0 auto; }
.client-dash__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.client-dash__title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--tch-primary); margin: 0; }
.client-dash__subtitle { color: var(--tch-text-muted); font-size: 0.95rem; margin: 0; }

/* Empty state */
.client-dash__empty { text-align: center; padding: 4rem 2rem; background: #fff; border-radius: 16px; border: 2px dashed #e5e7eb; }
.client-dash__empty-icon { font-size: 3rem; color: var(--tch-accent); margin-bottom: 1rem; }
.client-dash__empty h2 { font-size: 1.3rem; color: var(--tch-primary); margin-bottom: 0.5rem; }
.client-dash__empty p { color: var(--tch-text-muted); margin-bottom: 1.5rem; }

/* Wedding cards grid */
.client-dash__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.client-dash__card { background: #fff; border-radius: 16px; padding: 1.5rem; border: 1px solid #e5e7eb; transition: box-shadow 0.2s ease; }
.client-dash__card:hover { box-shadow: 0 4px 20px rgba(30, 42, 90, 0.06); }
.client-dash__card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.client-dash__card-names { font-size: 1.2rem; font-weight: 600; color: var(--tch-primary); margin: 0; }
.client-dash__card-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.client-dash__card-badge--published { background: #dcfce7; color: #16a34a; }
.client-dash__card-badge--draft { background: #f3f4f6; color: #6b7280; }
.client-dash__card-badge--in_review { background: #fef3c7; color: #d97706; }
.client-dash__card-badge--archived { background: #fee2e2; color: #dc2626; }
.client-dash__card-date, .client-dash__card-package { font-size: 0.9rem; color: var(--tch-text-muted); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.client-dash__card-unpaid { color: #d97706; font-size: 0.8rem; margin-left: 8px; }
.client-dash__card-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.client-dash__card-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; text-decoration: none; background: var(--tch-primary); color: #fff; transition: background 0.2s ease; }
.client-dash__card-btn:hover { background: var(--tch-primary-hover); color: #fff; }
.client-dash__card-btn--outline { background: transparent; color: var(--tch-primary); border: 1px solid #e5e7eb; }
.client-dash__card-btn--outline:hover { border-color: var(--tch-primary); color: var(--tch-primary); background: transparent; }

/* --- WEDDING DETAIL PAGE --- */
.client-detail__header { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0; flex-wrap: wrap; gap: 1rem; }
.client-detail__alert { display: flex; align-items: flex-start; gap: 12px; padding: 1rem 1.25rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; margin-bottom: 1.5rem; font-size: 0.9rem; }
.client-detail__alert i { font-size: 1.2rem; margin-top: 2px; }
.client-detail__alert p { margin: 0.25rem 0 0; font-size: 0.85rem; }
.client-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .client-detail__grid { grid-template-columns: 1fr; } }
.client-detail__card { background: #fff; border-radius: 16px; padding: 1.5rem; border: 1px solid #e5e7eb; }
.client-detail__card-title { font-size: 1rem; font-weight: 600; color: var(--tch-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.client-detail__card-title i { color: var(--tch-accent); }
.client-detail__url { background: var(--tch-bg); padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; color: var(--tch-primary); word-break: break-all; margin-bottom: 0.75rem; font-family: monospace; }
.client-detail__copy-btn, .client-detail__wa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: all 0.2s ease; margin-right: 0.5rem; margin-bottom: 0.5rem; }
.client-detail__copy-btn { background: var(--tch-primary); color: #fff; }
.client-detail__copy-btn:hover { background: var(--tch-primary-hover); }
.client-detail__wa-btn { background: #25D366; color: #fff; }
.client-detail__wa-btn:hover { background: #1da851; color: #fff; }

/* Stats RSVP */
.client-detail__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.client-detail__stat { text-align: center; padding: 1rem 0.5rem; border-radius: 10px; background: var(--tch-bg); }
.client-detail__stat-value { display: block; font-size: 1.8rem; font-weight: 700; color: var(--tch-primary); }
.client-detail__stat-label { display: block; font-size: 0.75rem; color: var(--tch-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.client-detail__stat--yes .client-detail__stat-value { color: #16a34a; }
.client-detail__stat--maybe .client-detail__stat-value { color: #d97706; }
.client-detail__stat--no .client-detail__stat-value { color: #dc2626; }

/* Info list */
.client-detail__info-list { list-style: none; padding: 0; margin: 0; }
.client-detail__info-list li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 0.9rem; color: var(--tch-text); }
.client-detail__info-list li:last-child { border-bottom: none; }

/* Actions */
.client-detail__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.client-detail__action-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; text-decoration: none; color: var(--tch-primary); background: var(--tch-bg); transition: background 0.2s ease; }
.client-detail__action-btn:hover { background: #e5e7eb; color: var(--tch-primary); }

/* ═════════════════════════════════════════════════════════════════════════════
   ENVELOPPE V2 — RECOMPENSES ET INTERACTIONS
   ═════════════════════════════════════════════════════════════════════════════ */

/* Sceau interactif */
.env2-seal--hover {
  transform: scale(1.15);
  box-shadow: 0 0 30px color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, transparent);
}

.env2-seal--pulse {
  animation: env2-seal-pulse 0.3s ease-out;
}

@keyframes env2-seal-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Halo du sceau */
.env2-seal-halo {
  position: absolute;
  inset: -15px;
  border: 3px solid var(--tch-primary, #1E2A5A);
  border-radius: 50%;
  animation: env2-halo-expand 1s ease-out forwards;
  pointer-events: none;
}

@keyframes env2-halo-expand {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Badges de récompense */
.env2-reward-badge {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent), color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent));
  color: var(--tch-bg, #FFF7EA);
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--tch-primary, #1E2A5A) 45%, transparent);
  z-index: 10001;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.env2-reward-badge.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* Messages secrets */
.env2-secret-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent), color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent));
  color: var(--tch-bg, #FFF7EA);
  padding: 24px 48px;
  border-radius: 50px;
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--tch-primary, #1E2A5A) 50%, transparent);
  z-index: 10002;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.env2-secret-message.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

/* Confetti et particules */
.env2-mini-confetti,
.env2-burst-confetti {
  will-change: transform, opacity;
  pointer-events: none;
}

.env2-heart-particle {
  will-change: transform, opacity;
  pointer-events: none;
}

/* Responsive récompenses */
@media (max-width: 768px) {
  .env2-reward-badge {
    font-size: 0.9rem;
    padding: 12px 24px;
  }
  .env2-secret-message {
    font-size: 1.4rem;
    padding: 20px 36px;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .env2-seal--pulse,
  .env2-seal-halo,
  .env2-reward-badge,
  .env2-secret-message {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  .env2-mini-confetti,
  .env2-burst-confetti,
  .env2-heart-particle {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DÉPLIANT IA — Affichage des deux faces uploadées (page delivery, chap. 4)
   Mobile-first : 1 colonne empilée ; 2 colonnes à partir de 900px.
   ═══════════════════════════════════════════════════════════════════════════ */

.dl-trifold-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 1.25rem 0 0.5rem;
    align-items: stretch;
}

.dl-trifold {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    height: 100%;
}

/* Caption : flex-column sur mobile (titre + badge en dessous, pas collés) */
.dl-trifold__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Playfair Display', serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tch-primary, #1E2A5A);
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

.dl-trifold__caption-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: rgba(31, 122, 92, 0.08);
    color: rgba(31, 122, 92, 0.9);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.dl-trifold__caption-badge i { font-size: 0.7rem; }

.dl-trifold__frame,
.dl-trifold__frame--image {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a0508 0%, #0a0104 100%);
    box-shadow: var(--dl-shadow-md, 0 4px 16px rgba(28, 43, 74, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms var(--ease-out-expo), box-shadow 220ms var(--ease-out-expo);
}

.dl-trifold:hover .dl-trifold__frame {
    transform: translateY(-2px);
    box-shadow: var(--dl-shadow-lg, 0 8px 24px rgba(28, 43, 74, 0.12));
}

.dl-trifold__uploaded-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.dl-trifold__download {
    min-width: 0;
    width: 100%;
    margin-top: 0.25rem;
}

/* Tablette : titre + badge inline, caption wrap si besoin */
@media (min-width: 640px) {
    .dl-trifold__caption {
        flex-direction: row;
        justify-content: center;
        gap: 0.6rem;
        flex-wrap: wrap;
    }
    .dl-trifold__caption-badge { margin-left: 0; }
}

/* Desktop : 2 colonnes alignées via subgrid (caption / image / bouton) */
@media (min-width: 900px) {
    .dl-trifold-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr auto;
        gap: 2rem;
        margin: 2rem auto 1rem;
        max-width: 1100px;
        align-items: stretch;
    }

    .dl-trifold {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 1rem;
    }

    .dl-trifold__caption {
        font-size: 0.85rem;
        letter-spacing: 0.06em;
        min-height: 2.4em;
        align-content: center;
    }

    .dl-trifold__caption-badge {
        font-size: 0.72rem;
        padding: 3px 10px;
    }

    .dl-trifold__frame,
    .dl-trifold__frame--image {
        border-radius: 14px;
        box-shadow:
            0 18px 40px -18px rgba(78, 1, 16, 0.35),
            0 2px 6px rgba(30, 42, 90, 0.08);
    }

    .dl-trifold:hover .dl-trifold__frame {
        transform: translateY(-3px);
        box-shadow:
            0 24px 50px -20px rgba(78, 1, 16, 0.42),
            0 4px 10px rgba(30, 42, 90, 0.1);
    }

    .dl-trifold__download {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        justify-self: center;
        align-self: end;
    }
}

/* Desktop large : plus d'air, boutons plus larges */
@media (min-width: 1200px) {
    .dl-trifold-pair {
        gap: 2.5rem;
        max-width: 1200px;
    }

    .dl-trifold__caption { font-size: 0.92rem; }
    .dl-trifold__download { max-width: 360px; }
}

/* Fallback navigateurs sans support subgrid : simulation via flex + min-height */
@supports not (grid-template-rows: subgrid) {
    @media (min-width: 900px) {
        .dl-trifold {
            display: flex;
            grid-row: auto;
        }
        .dl-trifold__caption { min-height: 2.6em; }
        .dl-trifold__download { margin-top: auto; }
    }
}

/* Le chapitre dépliant déborde du conteneur étroit 680px sur desktop
   pour afficher les 2 images côte à côte sans compression.
   Les autres chapitres gardent leur colonne de narration resserrée. */
@media (min-width: 900px) {
    #chapter-depliant {
        width: calc(100vw - 3rem);
        max-width: 1140px;
        margin-left: calc((680px - min(100vw - 3rem, 1140px)) / 2);
        margin-right: calc((680px - min(100vw - 3rem, 1140px)) / 2);
    }

    #chapter-depliant .dl-card {
        padding: 2rem 2rem 1.75rem;
    }

    #chapter-depliant .dl-card-lead {
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #chapter-depliant .dl-card-header {
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    #chapter-depliant .dl-card {
        padding: 2.5rem 2.5rem 2rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   AJOUT AU CALENDRIER — Google / Outlook / Apple
   Intégré sous la timeline du programme.
   Mobile-first, or comme accent dopaminergique, accessibilité.
   ══════════════════════════════════════════════════════════════════════ */

.inv2-calendar {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 3.5rem auto 1.5rem;
    padding: 2rem 1.25rem;
    max-width: 780px;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        rgba(255, 247, 234, 0.55) 0%,
        rgba(255, 255, 255, 0.92) 100%
    );
    border: 1px solid rgba(198, 161, 91, 0.22);
    box-shadow:
        0 6px 14px -8px rgba(30, 42, 90, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
}

/* Filet doré décoratif en haut */
.inv2-calendar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--tch-accent, #C6A15B) 50%,
        transparent 100%
    );
    opacity: 0.8;
}

.inv2-calendar__header {
    margin-bottom: 1.5rem;
}

.inv2-calendar__title {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--tch-primary, #1E2A5A);
    margin: 0 0 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.inv2-calendar__title-icon {
    font-size: 1.1rem;
    color: var(--tch-accent, #C6A15B);
}

.inv2-calendar__subtitle {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--tch-text-muted, #4b5563);
    margin: 0 auto;
    max-width: 48ch;
}

/* ── Boutons ─────────────────────────────────────────────────────── */

.inv2-calendar__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem auto 1rem;
    max-width: 380px;
}

.inv2-calendar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--tch-surface, #ffffff);
    color: var(--tch-primary, #1E2A5A);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 180ms var(--ease-out-expo),
        box-shadow 220ms var(--ease-out-expo),
        border-color 180ms var(--ease-out-expo),
        background-color 180ms var(--ease-out-expo);
    box-shadow: 0 1px 2px rgba(30, 42, 90, 0.06);
    position: relative;
    overflow: hidden;
}

.inv2-calendar__btn:focus-visible {
    outline: 2px solid var(--tch-accent, #C6A15B);
    outline-offset: 3px;
}

.inv2-calendar__btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px -12px rgba(30, 42, 90, 0.22),
        0 4px 6px -2px rgba(30, 42, 90, 0.08);
    border-color: rgba(198, 161, 91, 0.4);
}

.inv2-calendar__btn:active {
    transform: translateY(0);
    transition-duration: 80ms;
}

.inv2-calendar__btn-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: var(--tch-bg, #FFF7EA);
    color: var(--tch-primary, #1E2A5A);
    transition: background-color 180ms var(--ease-out-expo),
                color 180ms var(--ease-out-expo);
}

.inv2-calendar__btn-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.inv2-calendar__btn-eyebrow {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tch-text-muted, #6b7280);
    line-height: 1;
}

.inv2-calendar__btn-label {
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--tch-primary, #1E2A5A);
    line-height: 1.15;
}

/* Accents par fournisseur — spécialisation subtile sur hover */
.inv2-calendar__btn--google:hover .inv2-calendar__btn-icon {
    background: #e8f0fe;
    color: #1a73e8;
}

.inv2-calendar__btn--outlook:hover .inv2-calendar__btn-icon {
    background: #e1ecf9;
    color: #0078d4;
}

.inv2-calendar__btn--apple:hover .inv2-calendar__btn-icon {
    background: #1d1d1f;
    color: #ffffff;
}

/* État succès après téléchargement Apple */
.inv2-calendar__btn.is-success {
    border-color: var(--tch-secondary, #1F7A5C);
    background: rgba(31, 122, 92, 0.06);
}

.inv2-calendar__btn.is-success .inv2-calendar__btn-icon {
    background: var(--tch-secondary, #1F7A5C);
    color: #ffffff;
    animation: inv2CalendarCheck 500ms var(--ease-spring);
}

.inv2-calendar__btn.is-success .inv2-calendar__btn-label::after {
    content: " ✓";
    color: var(--tch-secondary, #1F7A5C);
    font-weight: 700;
}

@keyframes inv2CalendarCheck {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Effet ripple subtil — appuie l'intention de clic */
.inv2-calendar__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(198, 161, 91, 0.18) 0%,
        transparent 60%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out-expo);
}

.inv2-calendar__btn:active::after {
    opacity: 1;
    transition-duration: 80ms;
}

/* ── Hint bas ────────────────────────────────────────────────────── */

.inv2-calendar__hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--tch-text-muted, #6b7280);
    margin: 1rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.85;
}

.inv2-calendar__hint i {
    color: var(--tch-accent, #C6A15B);
    font-size: 0.7rem;
}

/* ── Tablette / desktop ─────────────────────────────────────────── */

@media (min-width: 640px) {
    .inv2-calendar {
        padding: 2.5rem 2rem;
        margin: 4rem auto 2rem;
    }

    .inv2-calendar__title {
        font-size: 1.75rem;
    }

    .inv2-calendar__buttons {
        flex-direction: row;
        justify-content: center;
        gap: 0.85rem;
        max-width: 100%;
    }

    .inv2-calendar__btn {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 220px;
    }
}

@media (min-width: 992px) {
    .inv2-calendar__title {
        font-size: 2rem;
    }

    .inv2-calendar__btn {
        padding: 1rem 1.25rem;
    }

    .inv2-calendar__btn-icon {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
}

/* ── Accessibilité — réduction de mouvement ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .inv2-calendar__btn,
    .inv2-calendar__btn:hover,
    .inv2-calendar__btn:active,
    .inv2-calendar__btn.is-success .inv2-calendar__btn-icon {
        transition: none;
        animation: none;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INV-ZOOMABLE — Images cliquables avec lightbox (GLightbox)
   Indication visuelle « cliquable pour agrandir » avec dopamine triggers.
   ═══════════════════════════════════════════════════════════════════════════ */

.inv-zoomable {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
    overflow: hidden;
    transition: transform 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo);
    -webkit-tap-highlight-color: transparent;
}

.inv-zoomable--block {
    display: block;
    width: 100%;
}

/* Sélecteurs descendants (et non « > img ») : l'image peut être enveloppée
   dans un <picture> par tch_picture — « > img » ne matcherait plus. */
.inv-zoomable img {
    transition: transform 300ms var(--ease-out-expo), filter 300ms var(--ease-out-expo);
    display: block;
    width: 100%;
    height: auto;
}

.inv-zoomable:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* Loupe subtile au hover — indication dopamine « cliquable » */
.inv-zoomable::after {
    content: '';
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.7) translateY(8px);
    transition: opacity 220ms var(--ease-out-expo), transform 220ms var(--ease-out-expo);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.inv-zoomable:hover::after,
.inv-zoomable:focus-visible::after {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.inv-zoomable:active img {
    transform: scale(0.99);
    transition-duration: 120ms;
}

/* Focus accessibilité — ring or subtil */
.inv-zoomable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent, #C6A15B) 45%, transparent);
    border-radius: inherit;
}

/* Sur petits écrans, loupe plus discrète (moins d'espace) */
@media (max-width: 480px) {
    .inv-zoomable::after {
        width: 34px;
        height: 34px;
        bottom: 8px;
        right: 8px;
        background-size: 15px;
    }
}

/* prefers-reduced-motion : désactiver hover scale */
@media (prefers-reduced-motion: reduce) {
    .inv-zoomable img,
    .inv-zoomable,
    .inv-zoomable::after {
        transition: none;
    }
    .inv-zoomable:hover img { transform: none; filter: none; }
}

/* Fond lightbox GLightbox : teinte indigo/primaire du mariage */
.gslide-description {
    font-family: 'Jost', sans-serif;
}

.goverlay {
    background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 92%, #000) !important;
}

.gclose, .gnext, .gprev {
    background-color: color-mix(in srgb, var(--tch-accent, #C6A15B) 18%, transparent) !important;
    transition: background-color 200ms var(--ease-out-expo);
}

.gclose:hover, .gnext:hover, .gprev:hover {
    background-color: color-mix(in srgb, var(--tch-accent, #C6A15B) 38%, transparent) !important;
}

/* Lightbox ouverte : masquer le curseur personnalisé ET restaurer
   le curseur système partout (override le * { cursor: none } global). */
body.glightbox-open .cursor-petal-canvas,
body.glightbox-open .cursor-ring,
body.glightbox-open .cursor-shockwave,
body.glightbox-open .falling-petals-canvas {
    display: none !important;
}

body.glightbox-open,
body.glightbox-open * {
    cursor: auto !important;
}

body.glightbox-open .gclose,
body.glightbox-open .gnext,
body.glightbox-open .gprev,
body.glightbox-open button,
body.glightbox-open a {
    cursor: pointer !important;
}

body.glightbox-open .gslide-image img {
    cursor: zoom-in !important;
}

body.glightbox-open .gslide-image.gslide-zoomed img {
    cursor: grab !important;
}

body.glightbox-open .gslide-image.gslide-zoomed img:active,
body.glightbox-open .gslide-image.gslide-dragging img {
    cursor: grabbing !important;
}

/* GLightbox : remonter uniquement le container au-dessus du curseur canvas
   (z-index 10004). Ne PAS toucher au z-index interne de .goverlay — sinon il
   passe devant la slider dans le stacking context du container. */
.glightbox-container { z-index: 100000 !important; }

/* Zoom : l'image garde ses transforms natifs GLightbox, ne transitionne que
   quand la classe .gslide-zoomed est présente (ne casse pas l'animation
   d'ouverture). */
.gslide-image.gslide-zoomed img {
    transition: transform 150ms ease-out;
    will-change: transform;
}

.gslide-image.gslide-dragging img {
    transition: none;
}

/* Indicateur de zoom — pill en haut à gauche quand zoomé */
.gslide-zoom-hint {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 85%, transparent);
    color: #FFFFFF;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out-expo), transform 200ms var(--ease-out-expo);
    pointer-events: none;
    z-index: 100001;
}

.gslide-zoom-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═════════════════════════════════════════════════════════════════════════════
   DEMO BANNER — Bandeau aperçu des thèmes depuis la page tarifs
   ═════════════════════════════════════════════════════════════════════════════ */
.demo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    /* Le bandeau suit la palette primaire du mariage en cours.
       Fallback indigo Tchefon si aucune surcharge active. */
    background: linear-gradient(
        135deg,
        var(--tch-primary, #1E2A5A) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 75%, #000) 100%
    );
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: background 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .demo-banner { transition: none; }
}
.demo-banner__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.demo-banner__inner i {
    color: #C6A15B;
}
.demo-banner__inner strong {
    color: #C6A15B;
    font-weight: 600;
}
.demo-banner__back {
    margin-left: 12px;
    padding: 6px 16px;
    background: rgba(198, 161, 91, 0.2);
    border: 1px solid rgba(198, 161, 91, 0.4);
    color: #C6A15B;
    text-decoration: none;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.25s ease;
}
.demo-banner__back:hover {
    background: #C6A15B;
    color: #1E2A5A;
}

/* ── Label "Aperçu du thème X" — groupé pour le wrap mobile ──────────── */
.demo-banner__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Toggle de bascule des couleurs (Thème ↔ Mariage) ────────────────── */
.demo-banner__toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(198, 161, 91, 0.3);
    border-radius: 999px;
    gap: 2px;
}
.demo-banner__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 220ms cubic-bezier(0.16, 1, 0.3, 1),
        color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-banner__toggle-btn i {
    font-size: 0.78rem;
    color: rgba(198, 161, 91, 0.7);
    transition: color 220ms ease-out;
}
.demo-banner__toggle-btn:hover {
    color: #FFFFFF;
}
.demo-banner__toggle-btn:hover i {
    color: #C6A15B;
}
.demo-banner__toggle-btn:focus-visible {
    outline: 2px solid #C6A15B;
    outline-offset: 2px;
}
.demo-banner__toggle-btn.is-active {
    background: linear-gradient(180deg, #C6A15B 0%, color-mix(in srgb, #C6A15B 80%, #000) 100%);
    color: #1E2A5A;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 10px -4px rgba(198, 161, 91, 0.5);
}
.demo-banner__toggle-btn.is-active i {
    color: #1E2A5A;
}

@media (prefers-reduced-motion: reduce) {
    .demo-banner__toggle-btn,
    .demo-banner__toggle-btn i { transition: none; }
}

@media (max-width: 720px) {
    .demo-banner__toggle-btn span {
        /* Sur mobile, on garde l'icone + le mot principal seulement */
        display: none;
    }
    .demo-banner__toggle-btn::after {
        content: attr(data-color-mode);
        text-transform: capitalize;
        font-size: 0.75rem;
    }
}

/* Ajout d'un padding en haut de la page quand le bandeau est présent */
body:has(.demo-banner) .invitation-wrapper {
    padding-top: 48px;
}
body:has(.demo-banner[data-color-toggle]) .invitation-wrapper,
body:has(.demo-banner__toggle) .invitation-wrapper {
    /* Bandeau plus haut quand le toggle est present */
    padding-top: 56px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   DÉCORS EXCLUSIFS DES THÈMES — Éléments SVG/CSS différenciants
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Thème Royal : blason doré + particules d'or ─────────────────────── */
.theme-royal-crest {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 88px;
    color: #D4AF37;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    animation: royal-crest-appear 1.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}
.theme-royal-crest svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.35));
}
@keyframes royal-crest-appear {
    from { opacity: 0; transform: translateX(-50%) scale(0.6); }
    to   { opacity: 0.9; transform: translateX(-50%) scale(1); }
}
.theme-royal-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.theme-royal-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #D4AF37;
    border-radius: 50%;
    opacity: 0;
    animation: royal-particle-float 12s linear infinite;
}
.theme-royal-particles span:nth-child(1)  { left: 10%; animation-delay: 0s; }
.theme-royal-particles span:nth-child(2)  { left: 20%; animation-delay: 1s; }
.theme-royal-particles span:nth-child(3)  { left: 30%; animation-delay: 3s; }
.theme-royal-particles span:nth-child(4)  { left: 40%; animation-delay: 2s; }
.theme-royal-particles span:nth-child(5)  { left: 50%; animation-delay: 4s; }
.theme-royal-particles span:nth-child(6)  { left: 60%; animation-delay: 5s; }
.theme-royal-particles span:nth-child(7)  { left: 70%; animation-delay: 6s; }
.theme-royal-particles span:nth-child(8)  { left: 80%; animation-delay: 7s; }
.theme-royal-particles span:nth-child(9)  { left: 15%; animation-delay: 8s; }
.theme-royal-particles span:nth-child(10) { left: 55%; animation-delay: 9s; }
.theme-royal-particles span:nth-child(11) { left: 85%; animation-delay: 10s; }
.theme-royal-particles span:nth-child(12) { left: 45%; animation-delay: 11s; }
@keyframes royal-particle-float {
    0%   { transform: translateY(100vh); opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-10vh); opacity: 0; }
}

/* ── Thème Baobab (slug : baobab) : feuilles aux coins ──────────────── */
.theme-baobab-leaves {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    color: #2E8B5F;
}
.theme-baobab-leaves__top-left,
.theme-baobab-leaves__bottom-right {
    position: absolute;
    width: 260px;
    height: 260px;
}
.theme-baobab-leaves__top-left {
    top: -60px;
    left: -60px;
    animation: tropical-leaf-sway 8s ease-in-out infinite;
}
.theme-baobab-leaves__bottom-right {
    bottom: -60px;
    right: -60px;
    transform: rotate(180deg);
    animation: tropical-leaf-sway-reverse 10s ease-in-out infinite;
}
@keyframes tropical-leaf-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(4deg); }
}
@keyframes tropical-leaf-sway-reverse {
    0%, 100% { transform: rotate(180deg); }
    50%      { transform: rotate(184deg); }
}

/* ── Thème Floral : couronne florale au-dessus du hero ───────────────── */
.theme-floral-wreath {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(300px, 70vw);
    height: 100px;
    color: #C47B8A;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    animation: floral-wreath-draw 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}
.theme-floral-wreath svg {
    width: 100%;
    height: 100%;
}
@keyframes floral-wreath-draw {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Thème Monogramme : sceau calligraphié fixe ──────────────────────── */
.theme-monogram-seal {
    position: fixed;
    top: 50%;
    right: 3vw;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    color: #D4AF37;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    animation: monogram-seal-stamp 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}
.theme-monogram-seal svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.3));
}
@keyframes monogram-seal-stamp {
    from { opacity: 0; transform: translateY(-50%) scale(1.6) rotate(-8deg); }
    to   { opacity: 0.9; transform: translateY(-50%) scale(1) rotate(0deg); }
}
@media (max-width: 900px) {
    .theme-monogram-seal {
        width: 72px;
        height: 72px;
        top: auto;
        bottom: 6vh;
        right: 4vw;
        transform: none;
    }
}

/* ── Accessibilité : respect des préférences de mouvement réduit ─────── */
@media (prefers-reduced-motion: reduce) {
    .theme-royal-crest,
    .theme-floral-wreath,
    .theme-monogram-seal {
        animation: none;
        opacity: 0.9;
    }
    .theme-royal-particles span,
    .theme-baobab-leaves__top-left,
    .theme-baobab-leaves__bottom-right {
        animation: none;
    }
}

/* Ancien thème Sablier (4 ornements calligraphiques aux coins) — supprimé
   avec la refonte V2 « L'Or Liquide ». Le nouveau décor (gouttes d'or
   flottantes) est défini dans public/assets/css/themes/sablier.css via
   .sb-decor-droplet et appliqué via body.theme-sablier-page. */

/* ═════════════════════════════════════════════════════════════════════════════
   THÈME ÉPURÉ — Trait vertical minimaliste + cadre fil de fer
   ═════════════════════════════════════════════════════════════════════════════ */
.theme-epure-marker {
    position: fixed;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 1px;
    pointer-events: none;
    z-index: 1;
    color: #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.theme-epure-marker__line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    opacity: 0;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: epure-line-draw 2s cubic-bezier(0.85, 0, 0.15, 1) 0.6s forwards;
}
.theme-epure-marker__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: epure-dot-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s forwards;
}
@keyframes epure-line-draw {
    to {
        opacity: 0.12;
        stroke-dashoffset: 0;
    }
}
@keyframes epure-dot-appear {
    to { transform: translate(-50%, -50%) scale(1); }
}
.theme-epure-frame {
    position: fixed;
    inset: 16px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: epure-frame-appear 1.2s ease-out 1.4s forwards;
}
@keyframes epure-frame-appear {
    to { opacity: 1; }
}
@media (max-width: 640px) {
    .theme-epure-frame { inset: 8px; }
    .theme-epure-marker__dot { width: 5px; height: 5px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   THÈME TRADITIONNEL — Frises africaines + symbole Adinkra central
   ═════════════════════════════════════════════════════════════════════════════ */
.theme-traditionnel-frieze {
    position: fixed;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: none;
    z-index: 3;
    color: #B8540E;
    opacity: 0;
}
.theme-traditionnel-frieze--top {
    top: 0;
    animation: traditionnel-frieze-down 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}
.theme-traditionnel-frieze--bottom {
    bottom: 0;
    animation: traditionnel-frieze-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}
.theme-traditionnel-frieze svg {
    width: 100%;
    height: 100%;
}
@keyframes traditionnel-frieze-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 0.85; transform: translateY(0); }
}
@keyframes traditionnel-frieze-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 0.85; transform: translateY(0); }
}
.theme-traditionnel-symbol {
    position: fixed;
    left: 3vw;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    width: 120px;
    height: 120px;
    color: #F4C05A;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: traditionnel-symbol-reveal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}
@keyframes traditionnel-symbol-reveal {
    to { opacity: 0.8; transform: translateY(-50%) scale(1); }
}
@media (max-width: 900px) {
    .theme-traditionnel-symbol {
        width: 72px;
        height: 72px;
        top: auto;
        bottom: 5rem;
        left: 4vw;
        transform: scale(0.7);
    }
    @keyframes traditionnel-symbol-reveal {
        to { opacity: 0.8; transform: scale(1); }
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   THÈME RUSTIQUE — Ruban vintage + épis/feuillage aux coins inférieurs
   ═════════════════════════════════════════════════════════════════════════════ */
.theme-rustique-ribbon {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(320px, 75vw);
    height: 50px;
    color: #8C6240;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    animation: rustique-ribbon-sway 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}
.theme-rustique-ribbon svg {
    width: 100%;
    height: 100%;
}
@keyframes rustique-ribbon-sway {
    to { opacity: 0.9; transform: translateX(-50%) translateY(0); }
}
.theme-rustique-foliage {
    position: fixed;
    bottom: 0;
    width: 160px;
    height: 200px;
    pointer-events: none;
    z-index: 2;
    color: #6B4423;
    opacity: 0;
    transform: translateY(30px);
    animation: rustique-foliage-grow 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards;
}
.theme-rustique-foliage--left  { left: 0; }
.theme-rustique-foliage--right { right: 0; }
@keyframes rustique-foliage-grow {
    to { opacity: 0.75; transform: translateY(0); }
}
@media (max-width: 640px) {
    .theme-rustique-foliage {
        width: 90px;
        height: 120px;
    }
    .theme-rustique-ribbon { top: 2.5rem; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   THÈME BOHÈME — Soleil, lune, étoiles filantes, horizon montagneux
   ═════════════════════════════════════════════════════════════════════════════ */
.theme-boheme-sun {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-30px) scale(0.6);
    width: 140px;
    height: 140px;
    color: #C66A3F;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    animation: boheme-sun-rise 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}
.theme-boheme-sun svg {
    width: 100%;
    height: 100%;
    animation: boheme-sun-rotate 60s linear infinite 2.6s;
    transform-origin: 50% 50%;
}
@keyframes boheme-sun-rise {
    to { opacity: 0.85; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes boheme-sun-rotate {
    to { transform: rotate(360deg); }
}
.theme-boheme-stars {
    position: fixed;
    top: 15vh;
    right: 3vw;
    width: 100px;
    height: 220px;
    color: #8B4A2F;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    animation: boheme-stars-twinkle 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}
@keyframes boheme-stars-twinkle {
    from { opacity: 0; }
    to   { opacity: 0.85; }
}
.theme-boheme-horizon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    color: #8B4A2F;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    animation: boheme-horizon-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}
.theme-boheme-horizon svg {
    width: 100%;
    height: 100%;
}
@keyframes boheme-horizon-reveal {
    to { opacity: 0.55; transform: translateY(0); }
}
@media (max-width: 640px) {
    .theme-boheme-sun { width: 90px; height: 90px; }
    .theme-boheme-stars { width: 70px; height: 160px; top: 12vh; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   THÈME SIGNATURE — Double cadre or shimmer + sceau personnalisé + particules
   ═════════════════════════════════════════════════════════════════════════════ */
.theme-signature-frame {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.theme-signature-frame__outer,
.theme-signature-frame__inner {
    position: absolute;
    border-style: solid;
    border-color: #D4AF37;
    opacity: 0;
}
.theme-signature-frame__outer {
    inset: 16px;
    border-width: 1.5px;
    animation: signature-frame-draw 2s cubic-bezier(0.85, 0, 0.15, 1) 1s forwards,
               signature-shimmer 6s ease-in-out 3s infinite;
}
.theme-signature-frame__inner {
    inset: 28px;
    border-width: 0.5px;
    animation: signature-frame-draw 2s cubic-bezier(0.85, 0, 0.15, 1) 1.4s forwards;
}
@keyframes signature-frame-draw {
    to { opacity: 0.75; }
}
@keyframes signature-shimmer {
    0%, 100% { border-color: #D4AF37; }
    50%      { border-color: #F4E1A1; box-shadow: 0 0 40px rgba(212, 175, 55, 0.25); }
}
.theme-signature-seal {
    position: fixed;
    top: 50%;
    right: 3vw;
    transform: translateY(-50%) scale(0.6) rotate(-12deg);
    width: 140px;
    height: 140px;
    color: #D4AF37;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    animation: signature-seal-appear 2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}
.theme-signature-seal svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 16px rgba(212, 175, 55, 0.4));
    animation: signature-seal-rotate 120s linear infinite 3.8s;
    transform-origin: 50% 50%;
}
@keyframes signature-seal-appear {
    to { opacity: 0.92; transform: translateY(-50%) scale(1) rotate(0deg); }
}
@keyframes signature-seal-rotate {
    to { transform: rotate(360deg); }
}
.theme-signature-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.theme-signature-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #D4AF37;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
    animation: signature-particle-drift 18s linear infinite;
}
.theme-signature-particles span:nth-child(1) { left: 12%; animation-delay: 0s; }
.theme-signature-particles span:nth-child(2) { left: 28%; animation-delay: 3s; }
.theme-signature-particles span:nth-child(3) { left: 44%; animation-delay: 6s; }
.theme-signature-particles span:nth-child(4) { left: 60%; animation-delay: 9s; }
.theme-signature-particles span:nth-child(5) { left: 76%; animation-delay: 12s; }
.theme-signature-particles span:nth-child(6) { left: 88%; animation-delay: 15s; }
.theme-signature-particles span:nth-child(7) { left: 20%; animation-delay: 8s; }
.theme-signature-particles span:nth-child(8) { left: 68%; animation-delay: 14s; }
@keyframes signature-particle-drift {
    0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.9; }
    100% { transform: translateY(-10vh) translateX(40px); opacity: 0; }
}
@media (max-width: 900px) {
    .theme-signature-seal {
        width: 80px;
        height: 80px;
        top: auto;
        bottom: 8vh;
        right: 4vw;
        transform: scale(0.6) rotate(-12deg);
    }
    @keyframes signature-seal-appear {
        to { opacity: 0.92; transform: scale(1) rotate(0deg); }
    }
    .theme-signature-frame__outer { inset: 10px; }
    .theme-signature-frame__inner { inset: 18px; }
}

/* Accessibilité — réduction de mouvement pour tous les nouveaux décors */
@media (prefers-reduced-motion: reduce) {
    .theme-epure-marker__line,
    .theme-epure-marker__dot,
    .theme-epure-frame,
    .theme-traditionnel-frieze--top,
    .theme-traditionnel-frieze--bottom,
    .theme-traditionnel-symbol,
    .theme-rustique-ribbon,
    .theme-rustique-foliage,
    .theme-boheme-sun,
    .theme-boheme-stars,
    .theme-boheme-horizon,
    .theme-signature-frame__outer,
    .theme-signature-frame__inner,
    .theme-signature-seal,
    .theme-signature-particles span {
        animation: none;
        opacity: 0.75;
    }
    .theme-boheme-sun svg,
    .theme-signature-seal svg {
        animation: none;
    }
    .theme-epure-marker__line { stroke-dashoffset: 0; opacity: 0.12; }
    .theme-epure-marker__dot  { transform: translate(-50%, -50%) scale(1); }
    .theme-boheme-sun         { transform: translateX(-50%); }
    .theme-rustique-ribbon    { transform: translateX(-50%); }
    .theme-rustique-foliage   { transform: translateY(0); }
    .theme-boheme-horizon     { transform: translateY(0); }
    .theme-traditionnel-symbol { transform: translateY(-50%) scale(1); }
    .theme-signature-seal      { transform: translateY(-50%) scale(1) rotate(0deg); }
}

/* ──────────────────────────────────────────────────────────────────────────
   STORY VIEWER — Panel Chapitres (navigation rapide + hover preview vidéo)
   ────────────────────────────────────────────────────────────────────────── */

.inv-stories__chapters-btn {
    position: absolute;
    top: 20px;
    right: 108px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s var(--ease-spring);
}
.inv-stories__chapters-btn:hover { background: rgba(0, 0, 0, 0.6); }
.inv-stories__chapters-btn:active { transform: scale(0.92); }
.inv-stories__chapters-btn:focus-visible {
    outline: 2px solid var(--tch-accent, #C6A15B);
    outline-offset: 2px;
}

/* Panel : slide-in droite (desktop), bottom sheet (mobile) */
.inv-stories__chapters-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    z-index: 11;
    background: rgba(15, 18, 32, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.inv-stories__chapters-panel--open { transform: translateX(0); }

.inv-stories__chapters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.inv-stories__chapters-title {
    margin: 0;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
}
.inv-stories__chapters-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.inv-stories__chapters-close:hover { background: rgba(255, 255, 255, 0.16); }

.inv-stories__chapters-list {
    flex: 1;
    margin: 0;
    padding: 12px;
    list-style: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(198, 161, 91, 0.4) transparent;
}
.inv-stories__chapters-list::-webkit-scrollbar { width: 6px; }
.inv-stories__chapters-list::-webkit-scrollbar-thumb {
    background: rgba(198, 161, 91, 0.4);
    border-radius: 3px;
}

.inv-stories__chapter-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.inv-stories__chapter-item:hover {
    background: rgba(198, 161, 91, 0.1);
    border-color: rgba(198, 161, 91, 0.3);
    transform: translateX(-2px);
}
.inv-stories__chapter-item:focus-visible {
    outline: 2px solid var(--tch-accent, #C6A15B);
    outline-offset: 2px;
}

.inv-stories__chapter-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-stories__chapter-thumb img,
.inv-stories__chapter-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.inv-stories__chapter-video-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.inv-stories__chapter-item:hover .inv-stories__chapter-video-icon { opacity: 0; }

.inv-stories__chapter-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
}

.inv-stories__chapter-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.inv-stories__chapter-date {
    font-size: 0.7rem;
    color: var(--tch-accent, #C6A15B);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.inv-stories__chapter-name {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.05rem;
    color: #fff;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.inv-stories__chapter-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.03em;
}

/* Bottom sheet sur mobile (sheet vertical depuis le bas) */
@media (max-width: 640px) {
    .inv-stories__chapters-panel {
        width: 100%;
        top: auto;
        height: 72vh;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .inv-stories__chapters-panel--open { transform: translateY(0); }
}

/* Réduction de mouvement : fondu au lieu du slide */
@media (prefers-reduced-motion: reduce) {
    .inv-stories__chapters-panel {
        transition: opacity 0.2s ease;
        transform: translateX(0);
        opacity: 0;
        pointer-events: none;
    }
    .inv-stories__chapters-panel--open {
        opacity: 1;
        pointer-events: auto;
    }
}


/* =============================================================================
   SPLASH CLASSIQUE — Carton + Monogramme + Ruban (5 secondes)
   Animation narrative : carton emerge → monogramme se trace → ruban descend
   ============================================================================= */
.cl-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.6s ease-out;
}
.cl-splash.cl-splash--closing {
    opacity: 0;
    pointer-events: none;
}

.cl-splash__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 40%, #FFFCF5 0%, #F5EFE2 50%, #E8DEC8 100%);
}

.cl-splash__card {
    position: relative;
    width: min(78vw, 360px);
    aspect-ratio: 3 / 4;
    background: #FFFCF5;
    border: none;
    border-radius: 4px;
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow:
        0 2px 6px rgba(60, 50, 30, 0.08),
        0 12px 36px rgba(60, 50, 30, 0.18),
        0 36px 72px rgba(60, 50, 30, 0.12);
    cursor: pointer;
    transform: scale(0.92);
    opacity: 0;
    animation: cl-card-appear 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    will-change: transform, opacity;
}
@keyframes cl-card-appear {
    to { transform: scale(1); opacity: 1; }
}

.cl-splash__frame {
    position: absolute;
    inset: 14px;
    border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B), transparent 50%);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    animation: cl-frame-fade 0.8s ease-out 0.6s forwards;
}
@keyframes cl-frame-fade { to { opacity: 1; } }

.cl-splash__ribbon {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 60px;
    height: 80px;
    transform: translateX(-50%);
    opacity: 0;
    animation: cl-ribbon-drop 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.6s forwards;
}
@keyframes cl-ribbon-drop {
    0%   { opacity: 0; transform: translate(-50%, -40px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}
.cl-splash__ribbon-knot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translateX(-50%);
    background: var(--tch-accent, #C6A15B);
    border-radius: 4px 4px 8px 8px;
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}
.cl-splash__ribbon-tail {
    position: absolute;
    top: 18px;
    width: 14px;
    height: 60px;
    background: linear-gradient(180deg, var(--tch-accent, #C6A15B) 0%, color-mix(in srgb, var(--tch-accent, #C6A15B), #000 30%) 100%);
}
.cl-splash__ribbon-tail--left  { left: calc(50% - 16px); transform: rotate(-12deg) skewY(8deg); clip-path: polygon(0 0, 100% 0, 80% 100%, 0 90%); }
.cl-splash__ribbon-tail--right { left: calc(50% + 2px);  transform: rotate(12deg) skewY(-8deg); clip-path: polygon(0 0, 100% 0, 100% 90%, 20% 100%); }

.cl-splash__monogram {
    width: 80%;
    max-width: 220px;
    height: auto;
    margin-top: 24px;
}
.cl-splash__letter {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: cl-letter-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.cl-splash__letter--first  { animation-delay: 0.6s; }
.cl-splash__letter--amp    { animation-delay: 1.4s; animation-duration: 1.4s; }
.cl-splash__letter--second { animation-delay: 1.8s; }
@keyframes cl-letter-draw {
    0%   { stroke-dashoffset: 600; fill-opacity: 0; }
    70%  { stroke-dashoffset: 0;   fill-opacity: 0; }
    100% { stroke-dashoffset: 0;   fill-opacity: 1; fill: url(#cl-ink); }
}

.cl-splash__rule {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: cl-letter-draw 0.8s ease-out 3s forwards;
}

.cl-splash__date {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    color: color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 30%);
    letter-spacing: 0.06em;
    margin-top: 4px;
    opacity: 0;
    animation: cl-frame-fade 0.6s ease-out 3.4s forwards;
}

.cl-splash__hint {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--tch-primary, #1E2A5A), transparent 40%);
    letter-spacing: 0.04em;
    margin: 0;
    padding-left: 18px;
    opacity: 0;
    animation: cl-frame-fade 0.5s ease-out 3.8s forwards;
}
.cl-splash__hint-pulse {
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tch-accent, #C6A15B);
    transform: translateY(-50%);
    animation: cl-hint-pulse 1.8s ease-in-out 3.8s infinite;
}
@keyframes cl-hint-pulse {
    0%, 100% { transform: translateY(-50%) scale(1);   opacity: 0.6; }
    50%      { transform: translateY(-50%) scale(1.4); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-splash__card,
    .cl-splash__frame,
    .cl-splash__ribbon,
    .cl-splash__date,
    .cl-splash__hint { animation: none; opacity: 1; transform: none; }
    .cl-splash__ribbon { transform: translateX(-50%); }
    .cl-splash__letter { stroke-dashoffset: 0; fill-opacity: 1; fill: url(#cl-ink); animation: none; }
    .cl-splash__rule   { stroke-dashoffset: 0; animation: none; }
    .cl-splash__hint-pulse { animation: none; opacity: 1; }
}

/* =============================================================================
   SPLASH TROPICAL — Aube qui se leve sur le lagon (5 secondes)
   Phases : ciel nocturne → aube rosee → soleil + palmiers → frangipaniers
   ============================================================================= */
.ib-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.6s ease-out;
}
.ib-splash.ib-splash--closing {
    opacity: 0;
    pointer-events: none;
}

.ib-splash__sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0a1428 0%, #1c2a52 50%, #2d3a6b 100%);
    animation: ib-splash-sky-shift 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ib-splash-sky-shift {
    0%   { background: linear-gradient(180deg, #0a1428 0%, #1c2a52 50%, #2d3a6b 100%); }
    40%  { background: linear-gradient(180deg, #2d3a6b 0%, #c97851 60%, #f6c744 100%); }
    70%  { background: linear-gradient(180deg, #5b8bbf 0%, #f1a472 55%, #ffd86b 100%); }
    100% { background: linear-gradient(180deg, #76b3e8 0%, #ffcb8a 60%, #ffe9b0 100%); }
}

.ib-splash__stars { position: absolute; inset: 0 0 40% 0; }
.ib-splash__star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px #fff;
    opacity: 0;
    animation: ib-splash-star-twinkle 1.4s ease-in-out infinite, ib-splash-star-fade 1.5s ease-out 1.2s forwards;
}
@keyframes ib-splash-star-twinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes ib-splash-star-fade { to { opacity: 0; } }
/* Position aleatoire des etoiles */
.ib-splash__star:nth-child(1)  { top: 8%;  left: 12%; }
.ib-splash__star:nth-child(2)  { top: 14%; left: 28%; }
.ib-splash__star:nth-child(3)  { top: 6%;  left: 44%; }
.ib-splash__star:nth-child(4)  { top: 18%; left: 58%; }
.ib-splash__star:nth-child(5)  { top: 10%; left: 72%; }
.ib-splash__star:nth-child(6)  { top: 22%; left: 88%; }
.ib-splash__star:nth-child(7)  { top: 28%; left: 18%; }
.ib-splash__star:nth-child(8)  { top: 26%; left: 38%; }
.ib-splash__star:nth-child(9)  { top: 32%; left: 64%; }
.ib-splash__star:nth-child(10) { top: 30%; left: 80%; }
.ib-splash__star:nth-child(11) { top: 38%; left: 8%;  }
.ib-splash__star:nth-child(12) { top: 36%; left: 50%; }
.ib-splash__star:nth-child(13) { top: 42%; left: 76%; }
.ib-splash__star:nth-child(14) { top: 16%; left: 6%;  }

.ib-splash__sun {
    position: absolute;
    bottom: 25%;
    left: 50%;
    width: clamp(120px, 28vw, 240px);
    height: clamp(120px, 28vw, 240px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #ffe9b0 0%, #f6c744 40%, #e8843b 80%, transparent 100%);
    box-shadow: 0 0 80px rgba(246, 199, 68, 0.6);
    transform: translate(-50%, 100%);
    opacity: 0;
    animation: ib-splash-sun-rise 3s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}
@keyframes ib-splash-sun-rise {
    0%   { transform: translate(-50%, 100%); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(-50%, -10%); opacity: 1; }
}

.ib-splash__palms {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    opacity: 0;
    animation: ib-splash-frame-fade 1s ease-out 2.5s forwards;
}
.ib-splash__palms svg { width: 100%; height: 100%; }
@keyframes ib-splash-frame-fade { to { opacity: 1; } }
.ib-splash__palm { transform-origin: bottom center; animation: ib-splash-palm-sway 5s ease-in-out infinite; }
.ib-splash__palm--1 { animation-delay: -1s; }
.ib-splash__palm--2 { animation-delay: -2s; }
.ib-splash__palm--3 { animation-delay: -3s; }
@keyframes ib-splash-palm-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

.ib-splash__petals { position: absolute; inset: 0; pointer-events: none; }
.ib-splash__petal {
    position: absolute;
    top: -60px;
    width: 30px;
    height: 30px;
    opacity: 0;
    animation: ib-splash-petal-fall 6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ib-splash__petal svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); }
.ib-splash__petal--1 { left: 15%; animation-delay: 3.4s; }
.ib-splash__petal--2 { left: 32%; animation-delay: 3.8s; }
.ib-splash__petal--3 { left: 48%; animation-delay: 3.6s; }
.ib-splash__petal--4 { left: 64%; animation-delay: 4.0s; }
.ib-splash__petal--5 { left: 78%; animation-delay: 3.9s; }
.ib-splash__petal--6 { left: 88%; animation-delay: 3.7s; }
@keyframes ib-splash-petal-fall {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    15%  { opacity: 1; }
    100% { opacity: 0.8; transform: translateY(110vh) rotate(540deg); }
}

.ib-splash__tap {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 25%;
}
.ib-splash__couple {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.8rem, 6vw, 3rem);
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.03em;
    opacity: 0;
    animation: ib-splash-frame-fade 1s ease-out 3.5s forwards;
}
.ib-splash__date {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.2rem);
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.08em;
    opacity: 0;
    animation: ib-splash-frame-fade 1s ease-out 4s forwards;
}

.ib-splash__hint {
    position: absolute;
    bottom: 6vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.04em;
    margin: 0;
    padding-left: 18px;
    opacity: 0;
    animation: ib-splash-frame-fade 0.6s ease-out 4.5s forwards;
}
.ib-splash__hint-pulse {
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    animation: cl-hint-pulse 1.8s ease-in-out 4.5s infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SILHOUETTE BAOBAB — Signature du splash, apparaît au centre-arrière entre
   T+2.0 et T+3.5. Stroke-draw des branches via stroke-dashoffset. Plus
   grande que les palmiers, en plan plus éloigné mais centrale.
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-splash__baobab {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: clamp(280px, 60vw, 480px);
    height: clamp(280px, 60vw, 480px);
    transform: translateX(-50%);
    opacity: 0;
    z-index: 2;
    animation: ib-splash-frame-fade 1.2s ease-out 2s forwards;
}
.ib-splash__baobab svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ib-splash__baobab-branches path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: ib-splash-branch-draw 1.4s ease-out 2.4s forwards;
}
.ib-splash__baobab-branches path:nth-child(1) { animation-delay: 2.4s; }
.ib-splash__baobab-branches path:nth-child(2) { animation-delay: 2.6s; }
.ib-splash__baobab-branches path:nth-child(3) { animation-delay: 2.8s; }
.ib-splash__baobab-branches path:nth-child(4) { animation-delay: 3.0s; }
.ib-splash__baobab-branches path:nth-child(5) { animation-delay: 3.2s; }
.ib-splash__baobab-leaves ellipse {
    opacity: 0;
    transform-origin: center center;
    animation: ib-splash-leaf-pop 0.5s var(--ib-ease-bird, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}
.ib-splash__baobab-leaves ellipse:nth-child(1) { animation-delay: 3.6s; }
.ib-splash__baobab-leaves ellipse:nth-child(2) { animation-delay: 3.7s; }
.ib-splash__baobab-leaves ellipse:nth-child(3) { animation-delay: 3.8s; }
.ib-splash__baobab-leaves ellipse:nth-child(4) { animation-delay: 3.9s; }
.ib-splash__baobab-leaves ellipse:nth-child(5) { animation-delay: 4.0s; }
@keyframes ib-splash-branch-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes ib-splash-leaf-pop {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 0.8; transform: scale(1.15); }
    100% { opacity: 0.75; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENVOL D'OISEAUX — 7 oiseaux en V qui partent de l'horizon vers le ciel,
   battent des ailes et disparaissent. Animation déclenchée à T+4.0s.
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-splash__birds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.ib-splash__bird {
    position: absolute;
    bottom: 35%;
    width: 22px;
    height: 12px;
    opacity: 0;
    animation: ib-splash-bird-fly 4.5s var(--ib-ease-bird, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
    will-change: transform, opacity;
}
.ib-splash__bird svg {
    width: 100%;
    height: 100%;
    display: block;
    animation: ib-splash-bird-flap 0.4s ease-in-out infinite;
}
/* Position de départ + délai par oiseau pour formation en V */
.ib-splash__bird--1 { left: 35%; animation-delay: 4.0s; }
.ib-splash__bird--2 { left: 38%; animation-delay: 4.15s; bottom: 38%; }
.ib-splash__bird--3 { left: 32%; animation-delay: 4.15s; bottom: 38%; }
.ib-splash__bird--4 { left: 42%; animation-delay: 4.3s; bottom: 41%; }
.ib-splash__bird--5 { left: 28%; animation-delay: 4.3s; bottom: 41%; }
.ib-splash__bird--6 { left: 46%; animation-delay: 4.45s; bottom: 44%; }
.ib-splash__bird--7 { left: 24%; animation-delay: 4.45s; bottom: 44%; }
@keyframes ib-splash-bird-fly {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(35vw, -55vh) scale(0.5); }
}
@keyframes ib-splash-bird-flap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .ib-splash__sky { animation: none; background: linear-gradient(180deg, #76b3e8 0%, #ffcb8a 60%, #ffe9b0 100%); }
    .ib-splash__stars { display: none; }
    .ib-splash__sun  { animation: none; opacity: 1; transform: translate(-50%, -10%); }
    .ib-splash__palms,
    .ib-splash__couple,
    .ib-splash__date,
    .ib-splash__hint { animation: none; opacity: 1; }
    .ib-splash__palm { animation: none; }
    .ib-splash__petals { display: none; }
    .ib-splash__hint-pulse { animation: none; }
    .ib-splash__baobab { animation: none; opacity: 1; }
    .ib-splash__baobab-branches path { animation: none; stroke-dashoffset: 0; }
    .ib-splash__baobab-leaves ellipse { animation: none; opacity: 0.75; transform: scale(1); }
    .ib-splash__birds { display: none; }
    .ib-splash__stage,
    .ib-splash__stele,
    .ib-splash__stele-portrait,
    .ib-splash__stele-letter,
    .ib-splash__stele-amp,
    .ib-splash__stele-lede,
    .ib-splash__stele-date,
    .ib-splash__stele-countdown,
    .ib-splash__cta { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPLASH BAOBAB — narration scénographique à 2 phases (pattern Tinhoetina)
   PHASE 1 (.ib-splash--idle) : sceau de pierre gravée avec initiales du
     couple est visible au centre. Le bouton affiche « Ouvrir l'invitation ».
     L'utilisateur clique → bascule en phase 2.
   PHASE 2 (.ib-splash--opening puis .ib-splash--discover) : le sceau se
     fend en deux moitiés qui s'écartent et tombent (0.9s), la stèle s'élève
     du sol et révèle son contenu en cascade (portraits, noms lettre-par-
     lettre, lede, date, countdown) sur ~5 secondes pour contempler.
     Puis le bouton réapparaît avec le label « Découvrir mon invitation ».
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SCEAU DE PIERRE ─ état initial (Phase 1) ─────────────────────────── */
.ib-splash__seal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(220px, 50vw, 320px);
    height: clamp(220px, 50vw, 320px);
    transform: translate(-50%, -50%);
    z-index: 12;
    pointer-events: none;
    opacity: 0;
    animation: ib-splash-seal-appear 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}

@keyframes ib-splash-seal-appear {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ib-splash__seal-aura {
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 55%, transparent) 0%,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 22%, transparent) 38%,
        transparent 72%
    );
    filter: blur(16px);
    animation: ib-splash-seal-aura-pulse 3.6s ease-in-out infinite 3.5s;
}

@keyframes ib-splash-seal-aura-pulse {
    0%, 100% { opacity: 0.7; transform: scale(0.96); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

.ib-splash__seal-half {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 0.9s cubic-bezier(0.55, -0.25, 0.4, 1.4),
                opacity 0.9s ease-out;
}
.ib-splash__seal-half svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

/* Disque du sceau : on mixe primary + accent pour que la teinte change
   visiblement entre les 2 palettes (les deux accents Baobab étant proches,
   c'est --tch-primary qui apporte le contraste entre les modes). */
.ib-splash__seal-disc {
    fill: color-mix(in srgb, var(--tch-primary, #1E2A5A) 18%, color-mix(in srgb, var(--tch-accent, #C6A15B) 40%, #FFF 60%) 82%);
}
.ib-splash__seal-ring {
    fill: none;
    stroke: color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, var(--tch-accent, #C6A15B) 40%);
    stroke-width: 1.5;
    opacity: 0.85;
    stroke-dasharray: 3 4;
}
.ib-splash__seal-ring-inner {
    fill: none;
    stroke: color-mix(in srgb, var(--tch-primary, #1E2A5A) 50%, transparent);
    stroke-width: 1;
    opacity: 0.6;
}
.ib-splash__seal-baobab {
    fill: var(--tch-primary, #1E2A5A);
    opacity: 0.7;
}

.ib-splash__seal-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2.8rem, 9vw, 4.5rem);
    color: var(--tch-primary, #1E2A5A);
    letter-spacing: 0.02em;
    text-shadow:
        0 2px 4px rgba(255, 255, 255, 0.6),
        0 -1px 2px rgba(0, 0, 0, 0.25);
    transition: opacity 0.6s ease-out;
    pointer-events: none;
}

/* État OPENING — le sceau se fend en deux moitiés qui s'écartent */
.ib-splash--opening .ib-splash__seal-half--left {
    transform: translateX(-110%) translateY(40%) rotate(-22deg);
    opacity: 0;
}
.ib-splash--opening .ib-splash__seal-half--right {
    transform: translateX(110%) translateY(40%) rotate(22deg);
    opacity: 0;
}
.ib-splash--opening .ib-splash__seal-initials {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.ib-splash--opening .ib-splash__seal-aura {
    animation: ib-splash-seal-burst 0.8s ease-out forwards;
}

@keyframes ib-splash-seal-burst {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 1; transform: scale(1.4); filter: blur(8px); }
    100% { opacity: 0; transform: scale(2); filter: blur(24px); }
}

.ib-splash--discover .ib-splash__seal {
    display: none;
}

/* ── STAGE — wrapper du contenu central (stèle + CTA) ─────────────────── */
.ib-splash__stage {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 6vh 5vw;
    pointer-events: none;
}

/* ── STÈLE — invisible en phase 1, révélée à partir du clic « Ouvrir » ─ */
.ib-splash__stele {
    position: relative;
    width: min(420px, 90vw);
    opacity: 0;
    transform: translateY(40px) scale(0.94);
    pointer-events: none;
    visibility: hidden;
}

/* En phase 2 (.ib-splash--opening) : la stèle s'élève après la fracture
   du sceau (0.6s laissés pour voir le sceau se briser). */
.ib-splash--opening .ib-splash__stele {
    visibility: visible;
    pointer-events: auto;
    animation: ib-splash-stele-rise 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

@keyframes ib-splash-stele-rise {
    0%   { opacity: 0; transform: translateY(60px) scale(0.88); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ib-splash__stele-aura {
    position: absolute;
    inset: -22% -18%;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 55%, transparent) 0%,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 22%, transparent) 35%,
        transparent 70%
    );
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

@keyframes ib-splash-aura-glow {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

.ib-splash__stele-frame {
    position: relative;
    padding: 28px 30px 26px;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--tch-bg, #FFF7EA) 95%, var(--tch-accent, #C6A15B) 5%) 0%,
        color-mix(in srgb, var(--tch-bg, #FFF7EA) 88%, #d8c9a5 12%) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 60%, transparent);
    border-radius: 12px;
    box-shadow:
        0 22px 48px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--tch-accent, #C6A15B) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -3px 6px color-mix(in srgb, var(--tch-accent, #C6A15B) 12%, transparent);
    text-align: center;
}

/* Frise gravée en haut : motif baobab miniature entre 2 traits or */
.ib-splash__stele-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--tch-accent, #C6A15B);
}
.ib-splash__stele-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, transparent),
        transparent
    );
    max-width: 80px;
}
.ib-splash__stele-baobab {
    width: 32px;
    height: 26px;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--tch-accent, #C6A15B) 30%, transparent));
}

/* Portraits dans des médaillons solaires */
.ib-splash__stele-portraits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}
.ib-splash__stele-portrait {
    position: relative;
    width: 68px;
    height: 68px;
    opacity: 0;
    transform: scale(0.6);
}

@keyframes ib-splash-portrait-bloom {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

.ib-splash__stele-halo {
    position: absolute;
    inset: -14%;
    width: 128%;
    height: 128%;
    color: var(--tch-accent, #C6A15B);
    animation: ib-splash-halo-rotate 30s linear infinite;
    pointer-events: none;
}
.ib-splash__stele-portrait--bride .ib-splash__stele-halo {
    animation-direction: reverse;
}

@keyframes ib-splash-halo-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ib-splash__stele-portrait img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px var(--tch-accent, #C6A15B),
        0 0 0 4px color-mix(in srgb, var(--tch-bg, #FFF7EA) 95%, transparent),
        0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Noms : cascade lettre-par-lettre, gravure Cormorant italique */
.ib-splash__stele-names {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    line-height: 1.1;
    color: color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, #000 10%);
    letter-spacing: -0.01em;
}
.ib-splash__stele-name {
    display: inline-flex;
    align-items: baseline;
}
.ib-splash__stele-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
}

@keyframes ib-splash-letter-drop {
    0%   { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.ib-splash__stele-amp {
    color: var(--tch-accent, #C6A15B);
    font-size: 0.8em;
    opacity: 0;
}

@keyframes ib-splash-fade-in {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

/* Phrase d'invitation — Cormorant italique avec partie emphase or */
.ib-splash__stele-lede {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.92rem, 2.6vw, 1.05rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--tch-primary, #1E2A5A) 75%, transparent);
    margin: 0 0 8px;
    opacity: 0;
}
.ib-splash__stele-lede-em {
    display: block;
    color: var(--tch-accent, #C6A15B);
    font-size: 1.05em;
    margin-top: 2px;
}

/* Date complète gravée en small caps Cormorant */
.ib-splash__stele-date {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    color: var(--tch-primary, #1E2A5A);
    margin: 0 0 14px;
    letter-spacing: 0.02em;
    opacity: 0;
}

/* Badge countdown — pastille pierre avec liseré or */
.ib-splash__stele-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 18%, var(--tch-bg, #FFF7EA) 82%),
        color-mix(in srgb, var(--tch-accent, #C6A15B) 8%, var(--tch-bg, #FFF7EA) 92%)
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 60%, transparent);
    border-radius: 999px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent);
    opacity: 0;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tch-accent, #C6A15B) 50%, transparent);
}
.ib-splash__stele-countdown-num {
    color: var(--tch-accent, #C6A15B);
    font-weight: 700;
    font-size: 1.15em;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}
.ib-splash__stele-countdown--today {
    background: linear-gradient(135deg, var(--tch-accent, #C6A15B), color-mix(in srgb, var(--tch-accent, #C6A15B) 70%, var(--tch-primary, #1E2A5A) 30%));
    color: #FFF;
    border-color: var(--tch-accent, #C6A15B);
}

/* CTA bouton-soleil — VALEURS HARDCODÉES identiques à
   .demo-banner__toggle-btn.is-active (or #C6A15B + indigo #1E2A5A) pour
   garantir l'identité visuelle avec la bannière de la démo. Le bouton
   ne suit PAS la palette du mariage : il porte la signature Tchefon brand
   pour que l'utilisateur reconnaisse immédiatement le pattern d'appel
   à l'action (cohérence forte avec demo banner > adaptation thématique).
   Visible en phase 1 (idle) avec label « Ouvrir l'invitation », masqué
   pendant l'animation (.ib-splash--opening), réapparaît en phase 2
   (.ib-splash--discover) avec label « Découvrir mon invitation ». */
.ib-splash__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    margin-top: 8px;
    background: linear-gradient(
        135deg,
        var(--tch-primary, #1E2A5A) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 75%, #000) 100%
    );
    color: #FFF;
    border: 1px solid color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, #000);
    border-radius: 999px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px -4px color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, transparent),
        0 14px 32px -10px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(12px);
    animation: ib-splash-cta-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 3.5s forwards;
    pointer-events: auto;
    z-index: 2;
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.3s ease,
                opacity 0.4s ease;
}
.ib-splash__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 14px -4px color-mix(in srgb, var(--tch-primary, #1E2A5A) 70%, transparent),
        0 18px 38px -10px rgba(0, 0, 0, 0.6);
}
.ib-splash__cta:focus-visible {
    outline: 2px solid var(--tch-accent, #C6A15B);
    outline-offset: 3px;
}

/* Deux labels coexistent en DOM, un seul est visible selon l'état */
.ib-splash__cta-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ib-splash__cta-content--discover { display: none; }
.ib-splash--discover .ib-splash__cta-content--open { display: none; }
.ib-splash--discover .ib-splash__cta-content--discover {
    display: inline-flex;
    animation: ib-splash-fade-in 0.5s ease-out forwards;
}

/* Pendant l'animation d'ouverture : le bouton est masqué pour laisser la
   stèle se révéler tranquillement. Réapparaît automatiquement quand le JS
   bascule le splash en classe .ib-splash--discover (après 5s). */
.ib-splash--opening:not(.ib-splash--discover) .ib-splash__cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    animation: none;
}

.ib-splash--discover .ib-splash__cta {
    animation: ib-splash-cta-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ib-splash__cta-icon {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
}
.ib-splash__cta-icon svg {
    width: 100%;
    height: 100%;
}
.ib-splash__cta:hover .ib-splash__cta-content--open .ib-splash__cta-icon {
    animation: ib-splash-heart-beat 1.2s ease-in-out infinite;
}
@keyframes ib-splash-heart-beat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.18); }
    50%      { transform: scale(1); }
    75%      { transform: scale(1.12); }
}
.ib-splash--discover .ib-splash__cta:hover .ib-splash__cta-icon {
    transform: translateX(4px);
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* ── ANIMATIONS DE LA STÈLE — déclenchées par .ib-splash--opening ─────── */
.ib-splash--opening .ib-splash__stele-aura {
    animation: ib-splash-aura-glow 2s ease-in-out 0.8s forwards;
}
.ib-splash--opening .ib-splash__stele-portrait {
    animation: ib-splash-portrait-bloom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}
.ib-splash--opening .ib-splash__stele-portrait--bride {
    animation-delay: 1.45s;
}
.ib-splash--opening .ib-splash__stele-letter {
    animation: ib-splash-letter-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ib-splash--opening .ib-splash__stele-letter:nth-child(1)  { animation-delay: 1.80s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(2)  { animation-delay: 1.85s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(3)  { animation-delay: 1.90s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(4)  { animation-delay: 1.95s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(5)  { animation-delay: 2.00s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(6)  { animation-delay: 2.05s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(7)  { animation-delay: 2.10s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(8)  { animation-delay: 2.15s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(9)  { animation-delay: 2.20s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(10) { animation-delay: 2.25s; }
.ib-splash--opening .ib-splash__stele-letter:nth-child(n+11) { animation-delay: 2.30s; }
.ib-splash--opening .ib-splash__stele-amp {
    animation: ib-splash-fade-in 0.5s ease-out 2.35s forwards;
}
.ib-splash--opening .ib-splash__stele-lede {
    animation: ib-splash-fade-in 0.7s ease-out 2.5s forwards;
}
.ib-splash--opening .ib-splash__stele-date {
    animation: ib-splash-fade-in 0.7s ease-out 2.65s forwards;
}
.ib-splash--opening .ib-splash__stele-countdown {
    animation: ib-splash-fade-in 0.7s ease-out 2.8s forwards;
}

@keyframes ib-splash-cta-rise {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ib-splash__cta-rays {
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 0deg 4deg,
        transparent 4deg 30deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 30deg 34deg,
        transparent 34deg 60deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 60deg 64deg,
        transparent 64deg 90deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 90deg 94deg,
        transparent 94deg 120deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 120deg 124deg,
        transparent 124deg 150deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 150deg 154deg,
        transparent 154deg 180deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 180deg 184deg,
        transparent 184deg 210deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 210deg 214deg,
        transparent 214deg 240deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 240deg 244deg,
        transparent 244deg 270deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 270deg 274deg,
        transparent 274deg 300deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 300deg 304deg,
        transparent 304deg 330deg,
        color-mix(in srgb, var(--tch-accent, #C6A15B) 80%, #FFF 20%) 330deg 334deg,
        transparent 334deg 360deg
    );
    -webkit-mask: radial-gradient(ellipse, transparent 58%, #000 64%, #000 100%);
            mask: radial-gradient(ellipse, transparent 58%, #000 64%, #000 100%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
    animation: ib-splash-cta-rays-spin 14s linear infinite paused;
    z-index: -1;
}

.ib-splash__cta:hover .ib-splash__cta-rays {
    opacity: 1;
    animation-play-state: running;
}

@keyframes ib-splash-cta-rays-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ib-splash__cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.ib-splash__cta:hover .ib-splash__cta-arrow {
    transform: translateX(5px);
}

/* Hint discret en bas (secondaire, après le CTA explicite) */
.ib-splash__hint {
    bottom: 4vh;
}

/* Mobile : stèle plus compacte, marges réduites */
@media (max-width: 559px) {
    .ib-splash__stele-frame {
        padding: 22px 22px 20px;
    }
    .ib-splash__stele-portraits {
        gap: 14px;
        margin-bottom: 14px;
    }
    .ib-splash__stele-portrait {
        width: 56px;
        height: 56px;
    }
    .ib-splash__stele-names {
        gap: 6px;
        margin-bottom: 8px;
    }
    .ib-splash__stele-lede {
        font-size: 0.88rem;
    }
    .ib-splash__cta {
        padding: 13px 26px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Delivery dashboard — onglets tier (VIP / Honneur / Amis)
   Mobile-first, ton sobre, palette neutre pour s'adapter aux variants
   thématiques (le wedding theme prend le dessus via override).
   ─────────────────────────────────────────────────────────────────────────── */
.dl-tier-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0 22px;
    flex-wrap: wrap;
}
.dl-tier-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid rgba(30, 42, 90, 0.12);
    border-radius: 999px;
    background: #FFFFFF;
    color: #1E2A5A;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.dl-tier-tab:hover {
    border-color: rgba(198, 161, 91, 0.55);
}
.dl-tier-tab--active {
    background: linear-gradient(135deg, #1E2A5A 0%, #2A3873 100%);
    border-color: #1E2A5A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(30, 42, 90, 0.22);
}
.dl-tier-tab > i {
    font-size: 0.95rem;
    opacity: 0.9;
}

.dl-tier-panel {
    display: none;
}
.dl-tier-panel--active {
    display: block;
    animation: dl-tier-fade 250ms ease-out;
}
@keyframes dl-tier-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dl-tier-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: rgba(198, 161, 91, 0.10);
    border-left: 3px solid #C6A15B;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #1E2A5A;
    line-height: 1.4;
}
.dl-tier-help > i {
    color: #C6A15B;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .dl-tier-tab {
        flex: 1 1 100%;
        padding: 12px 14px;
    }
    .dl-tier-tab span {
        font-size: 0.92rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   DELIVERY DASHBOARD — variantes thématiques
   Chaque theme applique sa direction artistique au dashboard delivery
   (couleurs, fonts, ornements) pour rester en harmonie avec l'invitation.
   Variables CSS propres au scope .dl-page :
     --dl-bg, --dl-surface, --dl-fg, --dl-fg-soft, --dl-accent,
     --dl-display-font, --dl-body-font, --dl-radius
   Les couleurs réelles du couple --dl-couple-primary / --dl-couple-accent
   sont injectées inline depuis Twig et prennent priorité quand définies.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Base commune (fallback : ressemble au theme sablier crème + or) ── */
.dl-page {
    --dl-bg: #FAF6EE;
    --dl-surface: #FFFFFF;
    --dl-fg: #1E2A5A;
    --dl-fg-soft: #6b7280;
    --dl-accent: var(--dl-couple-accent, #C6A15B);
    --dl-primary: var(--dl-couple-primary, #1E2A5A);
    --dl-display-font: 'Cormorant Garamond', Georgia, serif;
    --dl-body-font: 'Inter', system-ui, sans-serif;
    --dl-radius: 14px;
    background: var(--dl-bg);
}
.dl-page .dl-hero__names,
.dl-page .dl-card-title,
.dl-page .dl-hero__date,
.dl-page .inv-footer__names {
    font-family: var(--dl-display-font);
    color: var(--dl-primary);
}
.dl-page .dl-hero__sub,
.dl-page .dl-card-lead,
.dl-page .dl-tier-help {
    font-family: var(--dl-body-font);
}

/* ── SABLIER : crème solaire, élégance épurée, dorures fines ──────── */
.dl-theme-sablier {
    --dl-bg: linear-gradient(180deg, #FFF7EA 0%, #F5EBD3 100%);
    --dl-accent: var(--dl-couple-accent, #C6A15B);
    --dl-primary: var(--dl-couple-primary, #1E2A5A);
    --dl-display-font: 'Cormorant Garamond', Georgia, serif;
}

/* ── ROYAL : bordeaux velours, sceaux or, gravité cérémonielle ───── */
.dl-theme-royal {
    --dl-bg: linear-gradient(180deg, #4A1424 0%, #2A0810 100%);
    --dl-surface: #FAF1E2;
    --dl-fg: #2A0810;
    --dl-fg-soft: rgba(42, 8, 16, 0.65);
    --dl-accent: var(--dl-couple-accent, #D4AF67);
    --dl-primary: var(--dl-couple-primary, #4A1424);
    --dl-display-font: 'Cormorant Garamond', Georgia, serif;
    color: #FAF1E2;
}
.dl-theme-royal .dl-card,
.dl-theme-royal .dl-msg-card {
    background: var(--dl-surface);
    color: var(--dl-fg);
    border: 1px solid rgba(212, 175, 103, 0.35);
}
.dl-theme-royal .dl-hero__names,
.dl-theme-royal .dl-hero__date {
    color: #FAF1E2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.dl-theme-royal .dl-hero__sub { color: rgba(250, 241, 226, 0.85); }
.dl-theme-royal .dl-tier-tab--active {
    background: linear-gradient(135deg, #D4AF67 0%, #B8924E 100%);
    border-color: #D4AF67;
    color: #2A0810;
}

/* ── BAOBAB : tons terre, ocre + savane, ornements feuillus ──────── */
.dl-theme-baobab {
    --dl-bg: linear-gradient(180deg, #F4E8D5 0%, #E8D4B5 100%);
    --dl-surface: #FFFAF0;
    --dl-fg: #3D2817;
    --dl-fg-soft: rgba(61, 40, 23, 0.65);
    --dl-accent: var(--dl-couple-accent, #C9824E);
    --dl-primary: var(--dl-couple-primary, #3D2817);
    --dl-display-font: 'Cormorant Garamond', Georgia, serif;
}
.dl-theme-baobab .dl-hero__names { color: #3D2817; }
.dl-theme-baobab .dl-tier-tab--active {
    background: linear-gradient(135deg, #C9824E 0%, #A8623A 100%);
    border-color: #C9824E;
    color: #FFFAF0;
}

/* ── TINHOETINA : bordeaux velours + or signature ─────────────────── */
.dl-theme-tinhoetina {
    --dl-bg: linear-gradient(180deg, #4A1424 0%, #321018 100%);
    --dl-surface: #FAF1E2;
    --dl-fg: #2A0810;
    --dl-fg-soft: rgba(42, 8, 16, 0.65);
    --dl-accent: var(--dl-couple-accent, #E0C68A);
    --dl-primary: var(--dl-couple-primary, #4A1424);
    --dl-display-font: 'Bodoni Moda', 'Cormorant Garamond', serif;
    color: #FAF1E2;
}
.dl-theme-tinhoetina .dl-card,
.dl-theme-tinhoetina .dl-msg-card {
    background: var(--dl-surface);
    color: var(--dl-fg);
    border: 1px solid rgba(224, 198, 138, 0.4);
}
.dl-theme-tinhoetina .dl-hero__names,
.dl-theme-tinhoetina .dl-hero__date,
.dl-theme-tinhoetina .inv-footer__names {
    color: #FAF1E2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.dl-theme-tinhoetina .dl-hero__sub { color: rgba(250, 241, 226, 0.85); }
.dl-theme-tinhoetina .dl-tier-tab--active {
    background: linear-gradient(135deg, #E0C68A 0%, #C6A15B 100%);
    border-color: #E0C68A;
    color: #2A0810;
}
.dl-theme-tinhoetina .dl-tier-help {
    background: rgba(224, 198, 138, 0.18);
    border-left-color: #E0C68A;
    color: #FAF1E2;
}
.dl-theme-tinhoetina .dl-tier-help > i { color: #E0C68A; }

/* ── Composants communs scopés sur les variables theme ─────────────── */
.dl-page .dl-tier-tab {
    border-color: rgba(0, 0, 0, 0.12);
}
.dl-page .dl-tier-tab--active {
    background: linear-gradient(135deg, var(--dl-primary) 0%, var(--dl-accent) 100%);
    color: #FFFFFF;
    border-color: var(--dl-primary);
}

@media (prefers-reduced-motion: reduce) {
    .dl-tier-panel--active { animation: none; }
}