/* =====================================================================
   INVITATION BAR MITSVA — OLIVER-DAVID SALMONA
   EHBH Agency · Charte noir / blanc / or · Thème finance
   ---------------------------------------------------------------------
   SOMMAIRE
   1. Variables & reset
   2. Base typographique
   3. Utilitaires (boutons, filets, reveal)
   4. Ticker finance
   5. Hero
   6. Responsive
   7. Accessibilité / prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES & RESET
   --------------------------------------------------------------------- */
:root{
  --noir:        #0a0a0a;   /* fond principal */
  --noir-2:      #141414;   /* cartes / surfaces */
  --blanc:       #f7f5f0;   /* texte clair, cassé (pas blanc pur) */
  --or:          #d4af37;   /* accent principal EHBH */
  --or-clair:    #e8d18a;   /* highlights / dégradés */
  --or-fonce:    #9a7b22;   /* ombres dorées */
  --gris:        #8a8a8a;   /* texte secondaire */

  /* Dégradé or réutilisable */
  --grad-or: linear-gradient(135deg, var(--or-clair) 0%, var(--or) 45%, var(--or-fonce) 75%, var(--or-clair) 100%);

  /* Rythme */
  --maxw: 1100px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 10vw, 8rem);

  /* Typo */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body{
  background-color: var(--noir);
  color: var(--blanc);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  /* Grain subtil + vignettage léger — ambiance "salle des marchés feutrée" */
  background-image:
    radial-gradient(140% 120% at 50% 0%, rgba(212,175,55,0.06) 0%, rgba(10,10,10,0) 45%),
    radial-gradient(120% 120% at 50% 100%, rgba(0,0,0,0.6) 0%, rgba(10,10,10,0) 60%);
  background-attachment: fixed;
}

/* Texture grain via pseudo-élément global (très discrète) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------
   2. BASE TYPOGRAPHIQUE
   --------------------------------------------------------------------- */
h1,h2,h3{ font-family: var(--serif); font-weight: 500; line-height: 1.1; }

.eyebrow,
.hero__eyebrow{
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.72rem;
  color: var(--or);
}

/* Texte doré (dégradé clippé) */
.text-or{
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------
   3. UTILITAIRES
   --------------------------------------------------------------------- */
.section{
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--section-y) var(--pad-x);
}

/* Filet doré horizontal */
.rule-or{
  width: 64px; height: 1px;
  background: var(--grad-or);
  border: none;
}

/* Boutons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.9em 2em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn--ghost{
  color: var(--or-clair);
  background: transparent;
  border: 1px solid var(--or-fonce);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  background: var(--grad-or);
  color: var(--noir);
  box-shadow: 0 8px 30px -10px rgba(212,175,55,0.6);
  transform: translateY(-2px);
}
.btn--solid{
  color: var(--noir);
  background: var(--grad-or);
  border: 1px solid transparent;
}
.btn--solid:hover,
.btn--solid:focus-visible{
  box-shadow: 0 10px 36px -10px rgba(212,175,55,0.7);
  transform: translateY(-2px);
}

/* Bouton RSVP flottant */
.float-cta{
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  padding: 0 1.4rem;
  border-radius: 100px;
  background: var(--grad-or);
  color: var(--noir);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px -10px rgba(212,175,55,0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.94);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s var(--ease);
}
.float-cta.is-shown{ opacity: 1; visibility: visible; transform: none; }
.float-cta:hover, .float-cta:focus-visible{ transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(212,175,55,0.75); }

/* Reveal au scroll (activé par JS — GATE 3) */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   4. TICKER FINANCE
   --------------------------------------------------------------------- */
.ticker{
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0d0d, #060606);
  border-bottom: 1px solid rgba(212,175,55,0.18);
  height: 34px;
  display: flex;
  align-items: center;
}
.ticker__track{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 1.1rem;
  padding-left: 1rem;
  animation: ticker-scroll 38s linear infinite;
}
.ticker__item{
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}
.ticker__item em{ color: var(--or); font-style: normal; }
.ticker__sep{ color: var(--or-fonce); font-size: 0.6rem; }
.ticker.is-paused .ticker__track{ animation-play-state: paused; }

@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Logo blanc sur fond transparent (PNG alpha) */
.hero__logo,
.footer__brand-logo{
  background: transparent;
}
.hero__logo{
  filter: drop-shadow(0 6px 26px rgba(212,175,55,0.28));
}

/* ---------------------------------------------------------------------
   4b. ENVELOPPE — animation d'ouverture
   --------------------------------------------------------------------- */
/* Sans JS : pas d'enveloppe, la carte/site reste accessible */
html:not(.js) .env-overlay{ display: none; }

/* Verrou de scroll pendant l'enveloppe */
html.env-locked, body.env-locked{ overflow: hidden; height: 100%; }

.env-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0) 55%),
    radial-gradient(120% 100% at 50% 30%, #14100c 0%, #0a0a0a 55%, #050505 100%);
  perspective: 1400px;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
/* Overlay fermé : on l'efface et on laisse passer les clics */
.env-overlay.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Courbe boursière fantôme en fond */
.env-curve{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  pointer-events: none;
}

.env-stage{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  transform: translateZ(0);
}

/* --- Bouton enveloppe --- */
.envelope{
  position: relative;
  width: min(86vw, 420px);
  aspect-ratio: 3 / 2;
  background: transparent;
  border: none;
  transform-style: preserve-3d;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.7));
  /* Apparition : fade + scale-in (géré par classe .is-in) */
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.envelope.is-in{ opacity: 1; transform: none; }
.envelope:focus-visible{
  outline: 1px solid var(--or);
  outline-offset: 8px;
  border-radius: 8px;
}

/* Doublure intérieure — fines rayures or (révélée à l'ouverture) */
.envelope__lining{
  position: absolute; inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.16) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, #191510 0%, #0e0b07 100%);
  border-radius: 6px;
}

/* Facettes de pliage — tuilent toute la face avant, cachent la carte.
   Valeurs de gris légèrement différentes : les plis se lisent par la lumière. */
.envelope__facet{
  position: absolute; inset: 0;
  border-radius: 6px;
  filter: drop-shadow(0 0 0.6px rgba(212,175,55,0.4));
}
.envelope__facet--left{
  z-index: 3;
  background: linear-gradient(100deg, #1c1813 0%, #120f0b 80%);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.envelope__facet--right{
  z-index: 3;
  background: linear-gradient(260deg, #1a1611 0%, #110e0a 80%);
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}
.envelope__facet--bottom{
  z-index: 4;
  background: linear-gradient(175deg, #1e1a14 0%, #100d09 90%);
  clip-path: polygon(0 100%, 50% 42%, 100% 100%);
}

/* Cadre doré (au-dessus des facettes, sous le rabat) */
.envelope__frame{
  position: absolute; inset: 0;
  z-index: 6;
  border: 1px solid rgba(212,175,55,0.55);
  border-radius: 6px;
  pointer-events: none;
}

/* Rabat supérieur — triangle pleine largeur, s'ouvre en rotateX */
.envelope__flap{
  position: absolute; inset: 0;
  z-index: 7;
  transform-origin: top center;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  transition: transform 0.9s var(--ease), z-index 0s linear 0.45s;
  background: linear-gradient(178deg, #221d16 0%, #16120d 70%, #120f0a 100%);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  border-radius: 6px 6px 0 0;
  filter: drop-shadow(0 1px 0 rgba(212,175,55,0.35));
}
/* Rabat ouvert : bascule derrière la carte */
.envelope.is-open .envelope__flap{
  transform: rotateX(-168deg);
  z-index: 1;
}

/* Sceau-médaille posé sur la pointe du rabat (hors clip du rabat) */
.envelope__seal{
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 8;
  width: 26%;
  max-width: 104px;
  transform: translate(-50%, -58%);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.65));
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
  animation: seal-pulse 2.6s var(--ease) infinite;
}
@keyframes seal-pulse{
  0%,100%{ filter: drop-shadow(0 6px 16px rgba(0,0,0,0.65)); }
  50%{ filter: drop-shadow(0 8px 26px rgba(212,175,55,0.45)); }
}
/* Sceau brisé : il tombe avec l'ouverture */
.envelope.is-open .envelope__seal{
  animation: none;
  transform: translate(-50%, -58%) scale(0.55) translateY(90px) rotate(-22deg);
  opacity: 0;
}

/* Le certificat ivoire qui glisse hors de l'enveloppe
   — l'unique surface claire du site : le moment de la révélation. */
.envelope__card{
  position: absolute;
  left: 8%; right: 8%;
  top: 5%;
  z-index: 2;
  height: 90%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(168deg, #f6f0e1 0%, #eadfc8 100%);
  border: 1px solid rgba(154,123,34,0.55);
  border-radius: 3px;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.6rem 1.2rem;
  transform: translateY(0);
  transition: transform 1s var(--ease) 0.25s;
}
/* Double filet or intérieur, façon certificat */
.envelope__card::before{
  content:"";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(154,123,34,0.35);
  border-radius: 2px;
  pointer-events: none;
}
.envelope.is-open .envelope__card{
  transform: translateY(-72%); /* sort vers le haut */
}
/* Logo blanc inversé → gravure encre sur ivoire */
.envelope__card-logo{
  width: 74px; height: auto;
  margin-bottom: 0.2rem;
  filter: invert(1);
  opacity: 0.85;
}
.envelope__card-eyebrow{
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.42em; font-size: 0.6rem;
  padding-left: 0.42em; /* compense le tracking pour un centrage optique */
  color: #8a6d1d;
}
.envelope__card-name{
  font-family: var(--serif); font-size: 2rem; font-weight: 600;
  color: #221c10;
}
.envelope__card-rule{ width: 54px; height: 1px; background: var(--grad-or); }
.envelope__card-date{
  font-family: var(--sans); letter-spacing: 0.3em; font-size: 0.7rem;
  padding-left: 0.3em;
  color: #7a6a45;
}

/* Indices texte */
.env-hint{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.68rem;
  color: var(--gris);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  animation: hint-blink 2.4s var(--ease) infinite;
}
.envelope.is-in ~ .env-hint{ opacity: 1; }
.env-stage .env-hint{ opacity: 0; }
.env-stage.is-ready .env-hint{ opacity: 1; }
/* Ouverture : les indices s'effacent, place à la carte */
.envelope.is-open ~ .env-hint,
.envelope.is-open ~ .env-skip{ opacity: 0 !important; animation: none; pointer-events: none; }
@keyframes hint-blink{ 0%,100%{ opacity: 0.45; } 50%{ opacity: 1; } }

.env-skip{
  background: none;
  border: none;
  color: var(--or-fonce);
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.env-skip:hover, .env-skip:focus-visible{ opacity: 1; color: var(--or); }

/* Paillettes dorées */
.env-sparkles{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.spark{
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--or-clair), var(--or) 60%, transparent 70%);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes spark-fly{
  0%{ opacity: 0; transform: translate(0,0) scale(0.4); }
  15%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* ---------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) var(--pad-x);
  overflow: hidden;
}

.hero__curve{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.55;
}

.hero__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
}

.hero__logo{
  width: clamp(96px, 22vw, 150px);
  height: auto;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  filter: drop-shadow(0 6px 24px rgba(212,175,55,0.25));
}

.hero__eyebrow{ margin-bottom: 1.1rem; }

.hero__title{
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 1.4rem;
}
.hero__name{
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.hero__amp{
  font-style: italic;
  font-weight: 400;
  padding-inline: 0.12em;
  color: var(--or);
  -webkit-text-fill-color: var(--or);
}
.hero__surname{
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--blanc);
  padding-left: 0.5em; /* compense le letter-spacing */
}

.hero__rule{
  width: 90px; height: 1px;
  background: var(--grad-or);
  margin: 0.6rem 0 1.6rem;
  position: relative;
}
.hero__rule::after{
  content:"";
  position:absolute; top:50%; right:-3px;
  width:6px; height:6px; border-radius:50%;
  background: var(--or-clair);
  transform: translateY(-50%);
}

.hero__tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  color: var(--blanc);
  max-width: 30ch;
  margin-bottom: 1.6rem;
}

.hero__date{
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 2.4rem;
}

.hero__scroll{
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
}
.hero__scroll span{
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--or), transparent);
  animation: scroll-pulse 2.2s var(--ease) infinite;
}
@keyframes scroll-pulse{
  0%,100%{ opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%{ opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---------------------------------------------------------------------
   5b. SECTIONS DE CONTENU
   --------------------------------------------------------------------- */
.eyebrow--center{ display: block; text-align: center; }
.rule-or--center{ margin: 1rem auto 1.6rem; }
.section__title{
  text-align: center;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--blanc);
}

/* --- INVITATION --- */
.section--invite{ text-align: center; }
.invite__text{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.45;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--blanc);
}

/* --- LE THÈME --- */
.theme__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.theme__title{
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  margin: 0.6rem 0 1.4rem;
  background: var(--grad-or);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme__lead{
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  color: var(--blanc);
  margin-bottom: 1.2rem;
}
.theme__lead strong{ color: var(--or-clair); font-weight: 600; }
.theme__note{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gris);
}
.theme__chart{
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 6px;
  background: linear-gradient(160deg, var(--noir-2), #0c0c0c);
  padding: 1.2rem;
}
.theme__chart svg{ width: 100%; height: auto; display: block; }
/* Tracé de la courbe qui se "dessine" quand la section apparaît */
.chart-path{
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transition: stroke-dashoffset 1.8s var(--ease) 0.2s;
}
.reveal.is-visible .chart-path{ stroke-dashoffset: 0; }

/* --- TEXTE HÉBREU (RTL, police dédiée) --- */
.hero__he, .theme__he, .event__he, .he{
  font-family: 'Frank Ruhl Libre', var(--serif);
  direction: rtl;
  unicode-bidi: isolate;
}
/* Date hébraïque dans les métadonnées */
.event__meta .he{ color: var(--or-clair); font-size: 1.05rem; }
.hero__he{
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 500;
  color: var(--or-clair);
  margin: 0.2rem 0 0.2rem;
  letter-spacing: 0;
}
.theme__he{
  display: inline-block;
  color: var(--or-clair);
  font-weight: 500;
  margin-right: 0.15em;
}

/* --- PROGRAMME (intro) --- */
.section--program-intro{ text-align: center; padding-bottom: clamp(2rem, 5vw, 3rem); }
.program__head{ margin-bottom: 0; }
.program__sub{ color: var(--gris); margin-top: -0.6rem; margin-bottom: 1.8rem; }
.program__jump{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.program__jump a{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--blanc);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.program__jump a:hover, .program__jump a:focus-visible{
  border-color: var(--or); color: var(--or-clair);
}
.program__jump-num{ font-family: var(--serif); color: var(--or); font-size: 1rem; }

/* --- ÉVÉNEMENT (section détaillée) --- */
.event{
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x);
  border-top: 1px solid rgba(212,175,55,0.1);
  scroll-margin-top: 1rem;
}
.event--feature{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212,175,55,0.06), transparent 60%);
}
.event__inner{
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
}

/* Colonne "aside" : grand numéro + hébreu */
.event__aside{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid rgba(212,175,55,0.18);
  padding-bottom: 0.8rem;
}
.event__num{
  font-family: var(--serif);
  font-size: clamp(3rem, 12vw, 5.5rem);
  line-height: 0.9;
  background: var(--grad-or);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.event__he{
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 500;
  color: var(--or-clair);
}

.event__title{
  font-size: clamp(2rem, 7vw, 3.2rem);
  color: var(--blanc);
  margin: 0.3rem 0 0.9rem;
}
.event__lead{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--gris);
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

/* Métadonnées en lignes étiquetées */
.event__meta{ margin-bottom: 1.8rem; }
.event__meta > div{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.event__meta > div:last-child{ border-bottom: 1px solid rgba(255,255,255,0.06); }
.event__meta dt{
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  padding-top: 0.15rem;
}
.event__meta dd{ color: var(--blanc); }

.event__actions{ display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; }

/* Bouton "lien" discret (Ajouter au calendrier) */
.btn--link{
  background: none;
  border: none;
  color: var(--or);
  padding: 0.6em 0;
  min-height: 44px;
  letter-spacing: 0.14em;
  border-bottom: 1px solid rgba(212,175,55,0.4);
  border-radius: 0;
}
.btn--link:hover, .btn--link:focus-visible{
  color: var(--or-clair);
  border-color: var(--or-clair);
  transform: none;
  box-shadow: none;
}

/* --- DRESS CODE --- */
.section--dress{ text-align: center; }
.dress__inner{ display: flex; flex-direction: column; align-items: center; }
.dress__swatches{ display: flex; gap: 0; margin: 0.4rem 0 1.2rem; }
.dress__swatch{
  width: 56px; height: 56px;
  border: 1px solid var(--or-fonce);
}
.dress__swatch--noir{ background: #0c0c0c; border-radius: 100px 0 0 100px; }
.dress__swatch--blanc{ background: var(--blanc); border-radius: 0 100px 100px 0; border-left: none; }
.dress__title{
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  background: var(--grad-or);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dress__sub{ color: var(--gris); margin-top: 0.4rem; }

/* --- RSVP --- */
.section--rsvp{ text-align: center; }
.rsvp__wrap{ max-width: 560px; margin: 0 auto; }
.rsvp__deadline{
  margin-top: 0.8rem; margin-bottom: 2.4rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--or-clair);
}

/* Réponses closes */
.rsvp__closed{
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  background: var(--noir-2);
}
.rsvp__closed p{ font-family: var(--serif); font-size: 1.4rem; color: var(--blanc); }
.rsvp__closed-sub{ font-family: var(--sans) !important; font-size: 0.9rem !important; color: var(--gris) !important; margin-top: 0.5rem; }
.rsvp__closed-sub a{ color: var(--or); }

/* Formulaire */
.rsvp-form{ text-align: left; }
.field{ margin-bottom: 1.2rem; }
.field label,
.field__label,
.events legend{
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.5rem;
}
.req{ color: var(--or); }
.opt{ color: var(--or-fonce); font-weight: 400; text-transform: none; letter-spacing: 0; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field textarea{
  width: 100%;
  background: var(--noir-2);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 6px;
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  min-height: 48px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea{ resize: vertical; min-height: 90px; }
.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.field input::placeholder{ color: #5a5a5a; }

/* Champ en erreur */
.field.is-invalid input{ border-color: #c0563f; box-shadow: 0 0 0 3px rgba(192,86,63,0.12); }
.field__err{
  display: none;
  font-size: 0.74rem;
  color: #e08a72;
  margin-top: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
}
.field.is-invalid .field__err{ display: block; }

.field-row{ display: flex; gap: 1rem; }
.field-row .field{ flex: 1; }

/* Champs "nom" générés dynamiquement */
.names:not(:empty){ margin-bottom: 0.4rem; }
.names__title{
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0.2rem 0 0.7rem;
}
.names__field{ margin-bottom: 0.7rem; }
.names__field label{
  font-size: 0.68rem;
  color: var(--gris);
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
/* petite apparition douce de chaque champ */
.names__field{ animation: name-in 0.35s var(--ease); }
@keyframes name-in{ from{ opacity: 0; transform: translateY(-4px);} to{ opacity:1; transform:none; } }

/* Toggle présence */
.toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 8px;
  overflow: hidden;
}
.toggle__input{ position: absolute; opacity: 0; pointer-events: none; }
.toggle__btn{
  text-align: center;
  padding: 0.85rem 0.6rem;
  min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: none !important;
  color: var(--gris);
  cursor: pointer;
  margin: 0 !important;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.toggle__btn:first-of-type{ border-right: 1px solid rgba(212,175,55,0.2); }
.toggle__input:checked + .toggle__btn{
  background: var(--grad-or);
  color: var(--noir);
  font-weight: 600;
}
.toggle__input:focus-visible + .toggle__btn{ outline: 2px solid var(--or); outline-offset: -2px; }

/* Bloc "présent" repliable */
.rsvp-attending{
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.4s var(--ease);
}
.rsvp-attending.is-hidden{ max-height: 0 !important; opacity: 0; margin: 0; pointer-events: none; }

/* Événements (checkboxes) */
.events{ border: none; padding: 0; margin-bottom: 1.2rem; }
.check{
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.92rem !important;
  color: var(--blanc) !important;
  margin-bottom: 0.6rem !important;
  cursor: pointer;
}
.check input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border: 1px solid var(--or-fonce);
  border-radius: 5px;
  background: var(--noir-2);
  display: grid; place-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.check input[type="checkbox"]::after{
  content:""; width: 11px; height: 7px;
  border-left: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.18s var(--ease);
  margin-top: -2px;
}
.check input[type="checkbox"]:checked{ background: var(--grad-or); border-color: var(--or); }
.check input[type="checkbox"]:checked::after{ transform: rotate(-45deg) scale(1); }
.check input[type="checkbox"]:focus-visible{ outline: 2px solid var(--or); outline-offset: 2px; }

/* Bouton submit + spinner */
.rsvp-form__submit{ width: 100%; margin-top: 0.6rem; position: relative; }
.rsvp-form__submit[disabled]{ opacity: 0.7; cursor: not-allowed; }
.spinner{
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(10,10,10,0.35);
  border-top-color: var(--noir);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.rsvp-form.is-sending .spinner{ display: inline-block; }
.rsvp-form.is-sending .btn__label{ opacity: 0.6; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.rsvp-form__error{
  color: #e08a72;
  font-size: 0.86rem;
  margin: 0.4rem 0 0.8rem;
  text-align: center;
}

/* Succès */
.rsvp-success{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
  background: linear-gradient(160deg, #16130c, #0c0a06);
  animation: success-in 0.6s var(--ease);
}
@keyframes success-in{ from{ opacity: 0; transform: translateY(14px);} to{ opacity:1; transform:none; } }
.rsvp-success__mark svg{ width: 64px; height: 64px; }
.rsvp-success__mark path{
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: draw-check 0.6s var(--ease) 0.25s forwards;
}
@keyframes draw-check{ to{ stroke-dashoffset: 0; } }
.rsvp-success__text{
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--blanc);
}

/* --- CONTACT --- */
.section--contact{ text-align: center; }
.contact__inner{ display: flex; flex-direction: column; align-items: center; }
.contact__title{ font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--blanc); margin-bottom: 0.4rem; }
.contact__name{
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--or-clair);
  margin-bottom: 1.2rem;
}

/* --- FOOTER --- */
.footer{
  position: relative;
  z-index: 2;
  overflow: hidden;
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) var(--pad-x);
  border-top: 1px solid rgba(212,175,55,0.15);
}
.footer__watermark{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 420px);
  opacity: 0.04;
  pointer-events: none;
}
.footer__inner{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.footer__brand-logo{ width: 80px; height: auto; margin-bottom: 0.4rem; }
.footer__names{
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--blanc);
}
.footer__date{
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris);
}
.footer__credit{ font-size: 0.8rem; color: var(--gris); margin-top: 0.4rem; }

/* ---------------------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------------------- */
@media (min-width: 768px){
  .ticker{ height: 38px; }
  .ticker__item{ font-size: 0.7rem; }
}

@media (min-width: 860px){
  /* Thème en deux colonnes (texte + courbe) */
  .theme__grid{ grid-template-columns: 1.1fr 0.9fr; }

  /* Événements : aside latéral + corps, alternance gauche/droite */
  .event__inner{ grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .event__aside{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    border-bottom: none;
    border-left: 1px solid rgba(212,175,55,0.25);
    padding: 0.2rem 0 0.2rem 1.4rem;
    position: sticky;
    top: 2rem;
  }
  /* Variante inversée (événement principal) : aside à droite */
  .event__inner--reverse .event__aside{ order: 2; border-left: none; border-right: 1px solid rgba(212,175,55,0.25); padding: 0.2rem 1.4rem 0.2rem 0; align-items: flex-end; text-align: right; }
  .event__inner--reverse .event__body{ order: 1; }
}

@media (min-width: 1024px){
  .hero__curve{ opacity: 0.7; }
}

/* ---------------------------------------------------------------------
   7. ACCESSIBILITÉ / PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1; transform: none; }
  .ticker__track{ animation: none; }
}

/* Focus visible cohérent */
:focus-visible{
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}