/* ==========================================================================
   CLARA & BENJAMIN — Feuille de style
   Palette : blanc · or · crème/beige   |   Style : prestige, élégant, luxe
   ========================================================================== */

/* ----- Polices ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Frank+Ruhl+Libre:wght@400;500;700&family=Great+Vibes&display=swap');

/* ----- Variables --------------------------------------------------------- */
:root {
  /* Crèmes & blancs */
  --ivory:        #FBF7EF;
  --cream:        #F4EBD9;
  --cream-deep:   #EADFC6;
  --white:        #FFFFFF;

  /* Ors — champagne satiné, raffiné (moins jaune/cuivré) */
  --gold:         #BFA15F;
  --gold-deep:    #9A7B33;
  --gold-soft:    #D8C28C;
  --gold-pale:    #EADFBE;
  --champagne:    #F3E8C4;
  --gold-line:    rgba(154, 123, 51, 0.30);

  /* Touches rose-gold (très légères) */
  --rose:         #D9A6A0;
  --rose-soft:    #EBC7C0;
  --rose-deep:    #C98C86;

  /* Dégradé or métallique raffiné (monogramme, titres) :
     base antique → champagne crème en reflet, sans jaune criard */
  --gold-grad: linear-gradient(125deg, #836428 0%, #b89a55 18%, #e7d6a3 36%, #f6efd6 46%, #d6bd84 60%, #a9863f 78%, #7d5f28 100%);

  /* Dégradé dédié aux prénoms (Clara & Benjamin) : or franc d'un bout à l'autre,
     sans teinte crème quasi-blanche → la fin des prénoms reste toujours visible */
  --gold-name: linear-gradient(115deg, #7d5f28 0%, #a9863f 20%, #c9a24b 40%, #d8b85f 50%, #c19b46 64%, #9a7b33 82%, #7d5f28 100%);

  /* Texte */
  --ink:          #3A3327;   /* brun chaud foncé, contraste AA sur crème */
  --ink-soft:     #6B5E48;
  --ink-faint:    #9A8B6E;

  /* UI */
  --shadow-soft:  0 18px 50px -22px rgba(80, 60, 20, 0.35);
  --shadow-card:  0 30px 80px -40px rgba(80, 60, 20, 0.55);
  --radius:       18px;
  --maxw:         1120px;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --caps:   'Cinzel', 'Cormorant Garamond', serif;
  --script: 'Great Vibes', cursive;
  --hebrew: 'Frank Ruhl Libre', 'Cormorant Garamond', serif;
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 17.5px; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
section { position: relative; }
::selection { background: var(--gold-pale); color: var(--ink); }

/* Texture crème subtile en fond global */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(201,162,75,0.10), transparent 60%),
    radial-gradient(1000px 800px at -10% 110%, rgba(201,162,75,0.08), transparent 55%),
    var(--ivory);
  z-index: -3;
}

/* Canvas poussière d'or (Three.js) */
#gold-canvas {
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* ----- Utilitaires ------------------------------------------------------- */
.container { width: min(var(--maxw), 92vw); margin-inline: auto; }
.center { text-align: center; }

.blessing {
  font-family: var(--hebrew);
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
  direction: rtl;
}

.kicker {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.82rem;
  color: var(--gold-deep);
  display: inline-block;
}

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
}

/* Filet doré décoratif */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 1.5rem auto;
}
.divider .line {
  height: 1px; width: 90px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider .line.right { background: linear-gradient(90deg, var(--gold), transparent); }
.divider .diamond {
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--gold-grad);
  box-shadow: 0 0 12px rgba(201,162,75,0.6);
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  font-family: var(--caps);
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.btn-gold {
  color: #4a3a14;
  background: var(--gold-grad);
  background-size: 200% auto;
  box-shadow: 0 14px 34px -16px rgba(168,126,46,0.9);
}
.btn-gold:hover { transform: translateY(-3px); background-position: right center; box-shadow: 0 20px 44px -16px rgba(168,126,46,1); }

.btn-ghost {
  color: var(--gold-deep);
  border-color: var(--gold-line);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-soft); }

.btn .ic { width: 17px; height: 17px; }

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

/* ==========================================================================
   ENVELOPPE D'INVITATION (écran d'accueil)
   ========================================================================== */
.env-screen {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px, 4vh, 40px); padding: 30px;
  background:
    radial-gradient(120% 90% at 50% 20%, #fffdf7 0%, var(--ivory) 55%, #f0e6d2 100%);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
.env-screen.opened { opacity: 0; visibility: hidden; pointer-events: none; }

/* Pétales de rose (rose-gold) qui tombent à l'ouverture */
.env-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; }
.petal {
  position: absolute; top: -6%; left: var(--x, 50%);
  width: var(--s, 14px); height: var(--s, 14px);
  background: radial-gradient(circle at 32% 28%, var(--rose-soft), var(--rose-deep));
  border-radius: 60% 0 60% 0;
  opacity: 0; transform: rotate(0);
  filter: drop-shadow(0 2px 3px rgba(160,90,80,.25));
}
.petal.g { background: radial-gradient(circle at 32% 28%, var(--champagne), var(--gold)); filter: drop-shadow(0 2px 3px rgba(154,123,51,.25)); }
.env-screen.opening .petal { animation: petalFall var(--d, 2.6s) cubic-bezier(.4,.1,.6,1) var(--delay, 0s) forwards; }
@keyframes petalFall {
  0%   { opacity: 0; transform: translateY(-30px) translateX(0) rotate(0deg); }
  12%  { opacity: .95; }
  100% { opacity: 0; transform: translateY(112vh) translateX(var(--sway, 30px)) rotate(620deg); }
}
.env-blessing {
  font-family: var(--hebrew); font-weight: 500; font-size: 1.2rem;
  color: var(--gold-deep); direction: rtl; margin: 0;
  opacity: 0; animation: fadeDown .8s ease .2s forwards;
}
@keyframes fadeDown { from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} }

.env {
  position: relative; width: min(84vw, 430px); aspect-ratio: 1.4 / 1;
  perspective: 1300px; cursor: pointer;
  opacity: 0; animation: envIn 1s cubic-bezier(.2,.7,.2,1) .35s forwards;
  outline: none;
}
@keyframes envIn { from{opacity:0; transform:translateY(26px) scale(.96)} to{opacity:1; transform:none} }
.env:focus-visible .env-front { box-shadow: 0 0 0 3px var(--gold); }

/* Intérieur / dos de l'enveloppe (visible quand le rabat s'ouvre) */
.env-back {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(160deg, #f1e4c6, #e6d2a6);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--gold-line);
  z-index: 1; overflow: hidden;
}
/* "Bouche" intérieure plus foncée — visible quand le rabat se relève (contraste) */
.env-back::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(170deg, #d9c391, #cbb27c);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: inset 0 2px 8px rgba(120,90,30,.25);
}

/* La lettre (papier) — démarre enfoncée dans la poche, sort par le V */
.env-letter {
  position: absolute; left: 5%; right: 5%; top: 7%; height: 48%;
  border-radius: 8px; background: linear-gradient(180deg,#fffdf8,#f7efdd);
  box-shadow: 0 18px 40px -18px rgba(120,90,30,.5), inset 0 0 0 1px var(--gold-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  z-index: 2;
  transform: translateY(92%);                 /* enfoncée, cachée sous la pointe du V */
  transition: transform 1.7s cubic-bezier(.33,0,.18,1) .55s;   /* glisse lentement hors de la poche */
}
.env-letter img { width: auto; max-width: 78%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(154,123,51,.4)); }
.env-letter-names { font-family: var(--script); font-size: 2rem; line-height: 1.2; padding-top: 0.08em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.env-letter-sub { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.55rem; color: var(--gold-deep); }
.env.open .env-letter { transform: translateY(-112%); }   /* monte et sort par le haut */

/* Façade avant (poche) — masque la lettre, porte le nom.
   Bord haut en V (triangle inversé) : la carte sort de cette ouverture. */
.env-front {
  position: absolute; inset: 0;
  background: linear-gradient(158deg, #fbf4e3 0%, #f3e7c9 62%, #ecdcb8 100%);
  /* découpe en V (alignée sur les bords du rabat) : pointe au centre, bras vers les coins haut */
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  border-radius: 12px; z-index: 3;
  transition: opacity .5s ease;
}
.env-front::before, .env-front::after {
  content:""; position:absolute; bottom:0; width:55%; height:55%;
  background: linear-gradient(122deg, transparent 49.4%, var(--gold-line) 49.6%, transparent 50%);
}
.env-front::before { left:0; }
.env-front::after  { right:0; transform: scaleX(-1); }
.env-addr {
  position: absolute; left: 0; right: 0; bottom: 13%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 8%; z-index: 2;
}
.env-to { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.56rem; color: var(--gold-deep); }
.env-name { font-family: var(--script); font-size: clamp(1.3rem, 4.6vw, 2rem); line-height: 1.2; padding-top: 0.06em; color: var(--ink); text-align: center; }
/* La façade RESTE pendant l'ouverture (la lettre glisse derrière et émerge) */

/* Rabat supérieur (triangle) — reste visible et se relève nettement */
.env-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(158deg, #efdcad, #e0c88e);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; transform: rotateX(0deg);
  transition: transform 1.1s cubic-bezier(.5,.05,.25,1), z-index 0s .55s, filter 1.1s ease;
  z-index: 4;
  box-shadow: 0 5px 14px rgba(120,90,30,.25);
}
.env.open .env-flap { transform: rotateX(-156deg); z-index: 1; filter: brightness(0.94); }

/* Sceau de cire doré (sur la pointe du rabat) */
.env-seal {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  width: clamp(52px, 13.5vw, 70px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; z-index: 6;
  background: radial-gradient(circle at 35% 30%, #d9bd7e, #a9863f 70%, #836428);
  box-shadow: 0 6px 16px rgba(120,90,30,.5), inset 0 0 0 2px rgba(255,247,214,.35);
  transition: opacity .5s ease, transform .65s cubic-bezier(.5,-0.3,.4,1);
}
.env-seal img { width: 62%; filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg) opacity(.92); }
.env.open .env-seal { opacity: 0; transform: translate(-50%,-130%) scale(.3) rotate(-30deg); }

/* Phase finale : la lettre (sortie) grandit et s'efface → révèle le site */
.env.zoom .env-letter {
  transform: translateY(-112%) scale(2.5); opacity: 0;
  transition: transform 1.1s cubic-bezier(.42,0,.12,1), opacity .85s ease .2s;
}
.env.zoom .env-back, .env.zoom .env-flap, .env.zoom .env-seal, .env.zoom .env-front {
  opacity: 0; transition: opacity .55s ease;
}

.env-open {
  opacity: 0; animation: fadeDown .8s ease .7s forwards;
}
.env.open ~ .env-open, .env-screen.opening .env-open { pointer-events: none; }
.env-hint {
  font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.62rem; color: var(--ink-faint); margin: 0;
  opacity: 0; animation: fadeDown .8s ease .9s forwards;
}
.env-screen.opening .env-open, .env-screen.opening .env-hint, .env-screen.opening .env-blessing { opacity: 0; transition: opacity .4s ease; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 54px);
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled {
  background: rgba(251,247,239,0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--gold-line), 0 10px 30px -24px rgba(80,60,20,0.5);
  padding-top: 12px; padding-bottom: 12px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--script); font-size: 1.5rem; color: var(--ink);
}
.nav-brand img { width: 40px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-family: var(--caps); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.72rem; color: var(--ink-soft);
  position: relative; padding: 6px 0; transition: color .3s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .35s ease;
}
.nav-links a:hover { color: var(--gold-deep); }
.nav-links a:hover::after { width: 100%; }
.nav-links .btn { padding: 10px 22px; }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Desktop : deux colonnes — photo plein cadre à gauche, contenu crème à droite */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  text-align: center;
  position: relative; overflow: hidden;
}
.hero-photo {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 0;
  background-size: cover; background-position: center 30%;
  filter: saturate(1.04) contrast(1.02);
}
/* Le bord droit de la photo se fond dans le panneau crème */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(251,247,239,0) 58%, rgba(251,247,239,0.55) 84%, var(--ivory) 100%),
    linear-gradient(180deg, rgba(251,247,239,0) 78%, rgba(251,247,239,0.5) 100%);
}
.hero-inner {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 110px 5.5% 90px;
  position: relative; z-index: 2;
  max-width: 100%;
}
.hero-logo-wrap {
  width: clamp(140px, 11vw, 184px);
  margin: 0 auto 10px;
  position: relative;
  perspective: 900px;
}
/* Halo doré rayonnant derrière le monogramme */
.hero-logo-wrap::before {
  content: ""; position: absolute; inset: -18%;
  background: radial-gradient(circle, rgba(243,232,196,0.55) 0%, rgba(214,189,131,0.18) 42%, transparent 68%);
  filter: blur(6px);
  animation: halo 5s ease-in-out infinite;
  z-index: -1;
}
@keyframes halo { 0%,100%{ transform: scale(0.92); opacity:.75 } 50%{ transform: scale(1.08); opacity:1 } }
.hero-logo {
  width: 100%;
  filter: drop-shadow(0 16px 34px rgba(154,123,51,0.5));
  animation: floaty 5s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero .save {
  font-family: var(--caps); text-transform: uppercase;
  letter-spacing: 0.5em; font-size: 0.8rem; color: var(--gold-deep);
  padding-left: 0.5em; margin-bottom: 0.5rem;
}
.hero-names {
  font-family: var(--script);
  font-size: clamp(3.4rem, 6.2vw, 6rem);
  line-height: 1.3; margin: 0.05em 0 0.12em;
  /* marge généreuse : sans elle, le dégradé clippé "efface"/rogne les fioritures
     (fin des prénoms + boucle haute du « C » de Clara) */
  padding: 0.3em 0.34em 0.24em;
  background: var(--gold-name); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
  overflow: visible;
}
@keyframes shimmer { to { background-position: 200% center; } }
.hero-sub {
  font-size: 1.15rem; color: var(--ink-soft); letter-spacing: 0.04em;
  font-style: italic;
}
.hero-date {
  font-family: var(--caps); letter-spacing: 0.28em; text-transform: uppercase;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem); color: var(--ink);
  margin-top: 1.1rem;
}

/* Compte à rebours */
.countdown { display: flex; gap: clamp(14px, 4vw, 40px); justify-content: center; margin-top: 2.2rem; }
.cd-cell { text-align: center; min-width: 56px; }
.cd-num {
  font-family: var(--caps); font-size: clamp(1.7rem, 5vw, 2.7rem);
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.cd-label {
  font-family: var(--caps); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.62rem; color: var(--gold-deep);
  margin-top: 8px;
}
.cd-sep { font-size: 1.6rem; color: var(--gold); align-self: flex-start; margin-top: 4px; }

.hero-cta { margin-top: 2.4rem; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Indicateur de scroll */
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-deep); z-index: 2;
}
.scroll-cue .mouse {
  width: 22px; height: 36px; border: 1.5px solid var(--gold-line); border-radius: 14px;
  display: flex; justify-content: center; padding-top: 6px;
}
.scroll-cue .mouse i { width: 3px; height: 7px; background: var(--gold); border-radius: 2px; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0;transform:translateY(-4px)} 40%{opacity:1} 100%{opacity:0;transform:translateY(8px)} }

/* ==========================================================================
   SECTIONS ÉVÈNEMENTS
   ========================================================================== */
.section { padding: clamp(30px, 5vw, 58px) 0; }
.section-head { text-align: center; margin-bottom: 1.5rem; }
.section-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.14; margin: 0.5rem 0 0;
  color: var(--ink); overflow: visible;
}
/* Illustration / image par évènement (mairie / houppa / chabbat) */
.event-illu { margin: 1rem auto 0.3rem; width: clamp(96px, 20vw, 150px); color: var(--gold-deep); }
.event-illu svg,
.event-illu img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(154,123,51,0.30));
  animation: floaty 6s ease-in-out infinite;
}
.section-title em {
  font-family: var(--script); font-style: normal; font-size: 1.2em;
  display: inline-block;
  background: var(--gold-name); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
  padding: 0 0.24em 0.12em 0.06em; overflow: visible;
}

/* Carte évènement */
.event-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,235,217,0.88));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow .5s ease;
  will-change: transform;
}
/* Filet doré scintillant en haut de chaque carte */
.event-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--champagne), var(--gold), var(--champagne), transparent);
  background-size: 200% 100%;
  animation: sweep 5s linear infinite;
  opacity: 0.8;
}
@keyframes sweep { to { background-position: 200% 0; } }
.event-card:hover { box-shadow: 0 40px 100px -42px rgba(120,90,30,0.6); }
/* Coins dorés ornementaux */
.event-card .corner {
  position: absolute; width: 46px; height: 46px; border: 1.5px solid var(--gold); opacity: 0.7;
}
.event-card .corner.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.event-card .corner.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.event-card .corner.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.event-card .corner.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.event-grid {
  display: grid; grid-template-columns: 1fr; gap: 15px;
  align-items: center; text-align: center; position: relative;
}
.event-title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin: 0 0 0.3rem;
}
.event-title em { font-family: var(--script); font-style: normal; font-size: 1.2em; color: var(--gold-deep); }

/* Grille 2×2 : rangée 1 = grands-parents, rangée 2 = parents.
   → les parents des deux côtés commencent toujours sur la même ligne. */
.families {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 0;
  max-width: 620px; margin: 0.2rem auto 0.4rem;
}
.fam-cell { display: flex; flex-direction: column; gap: 8px; }
.fam-cell.left  { text-align: left;  align-items: flex-start; }
.fam-cell.right { text-align: right; align-items: flex-end; }
/* grands-parents collés vers le bas de leur rangée → écart régulier avant les parents */
.gp-cell  { justify-content: flex-end; }
.par-cell { margin-top: 14px; }
.families p {
  margin: 0; font-family: var(--serif);
  font-size: clamp(0.92rem, 2.6vw, 1.08rem); line-height: 1.4;
  letter-spacing: 0.01em;
}
/* Grands-parents : fins, discrets & nettement plus petits que les parents */
.families .gp { font-style: italic; font-weight: 400; font-size: clamp(0.72rem, 2vw, 0.86rem); color: var(--ink-faint); }
/* Parents : un peu plus marqués */
.families .par { font-weight: 600; color: var(--ink); }
@media (max-width: 480px) {
  .families { column-gap: 22px; }
  .families p { font-size: 0.9rem; }
}
.announce { max-width: 640px; margin: 0 auto; font-style: italic; color: var(--ink-soft); }

/* Noms du faire-part : Clara/רות  &  Benjamin/אהרן — en diagonale.
   Le décalage diagonal déborde du bloc → marges suffisantes pour ne pas
   chevaucher les textes au-dessus/en dessous (le reste de la carte reste compact). */
.fairepart-names { margin: 1.3rem auto 1.5rem; }
.fp-couple {
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.fp-line { display: flex; flex-direction: column; align-items: center; }
.fp-line:first-child { transform: translateY(-26%); }   /* Clara → haut-gauche */
.fp-line:last-child  { transform: translateY(26%); }    /* Benjamin → bas-droite */
.fp-name {
  font-family: var(--script); font-size: clamp(2.2rem, 6vw, 3.9rem);
  background: var(--gold-name); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.28; padding: 0.1em 0.22em 0.16em; white-space: nowrap; overflow: visible;
}
.fp-heb {
  direction: rtl; font-family: var(--hebrew); font-weight: 500;
  font-size: clamp(1.15rem, 3vw, 1.75rem);
  color: var(--gold-deep); margin-top: 2px; letter-spacing: 0.02em;
}
.fp-amp {
  font-family: var(--script); font-size: clamp(2.4rem, 6.5vw, 3.6rem);
  color: var(--gold-deep); align-self: center; margin: 0 0.18em; line-height: 1;
}
.fp-line:first-child  { margin-right: 0.1em; }
.fp-line:last-child   { margin-left: 0.1em; }

/* In memoriam */
.memoriam {
  max-width: 560px; margin: 0 auto; padding-top: 0.9rem;
  border-top: 1px solid var(--gold-line);
  font-style: italic; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6;
}
.memoriam strong { font-weight: 600; font-style: normal; color: var(--ink); }
.memoriam .heb { font-style: normal; font-family: var(--hebrew); }
.memoriam .mem-et { font-style: italic; color: var(--ink-faint); }

.event-when {
  font-family: var(--caps); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); font-size: clamp(1rem, 2.6vw, 1.3rem); margin: 0;
}
.event-when .time { color: var(--gold-deep); display: block; letter-spacing: 0.2em; margin-top: 5px; font-size: 0.82em; }

.event-venue { font-size: 1.4rem; color: var(--ink); margin: 0 0 0.2rem; }
.event-venue strong { font-weight: 700; }
.event-address { color: var(--ink-soft); margin: 0; font-weight: 600; }
.event-note {
  max-width: 620px; margin: 0 auto; font-style: italic; color: var(--ink-soft);
  padding-top: 0.9rem; border-top: 1px solid var(--gold-line);
}
.event-actions { margin-top: 0.5rem; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Bouton de fin de section → mène à la section suivante */
.section-next { text-align: center; margin-top: 2.6rem; }
.section-next .toward-btn { gap: 12px; }
.section-next .arr {
  display: inline-block; font-size: 1.05em; line-height: 1;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp { padding-bottom: clamp(80px,12vw,150px); }
.rsvp-card {
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,235,217,0.9));
  border: 1px solid var(--gold-line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: clamp(28px, 5vw, 58px);
}
.field { margin-bottom: 22px; text-align: left; }
.field label {
  display: block; font-family: var(--caps); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.68rem; color: var(--gold-deep); margin-bottom: 8px;
}
.field label .req { color: #b5562e; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; font-family: var(--serif); font-size: 1.05rem;
  color: var(--ink); background: rgba(255,255,255,0.7);
  border: 1px solid var(--gold-line); border-radius: 12px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,75,0.18); background: var(--white);
}
.field textarea { min-height: 110px; resize: vertical; }

/* Bloc présence par évènement */
.attend {
  border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 18px 18px 8px; margin-bottom: 18px; background: rgba(255,255,255,0.45);
}
.attend > .attend-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 6px;
}
.attend-head .name {
  font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.82rem; color: var(--ink);
}
/* Toggle Oui/Non */
.seg { display: inline-flex; border: 1px solid var(--gold-line); border-radius: 999px; overflow: hidden; }
.seg label { padding: 7px 18px; font-family: var(--caps); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; transition: .25s; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + label { background: var(--gold-grad); color: #4a3a14; }
.attend .count { margin-top: 10px; transition: max-height .3s ease, opacity .3s ease; }
.attend.no .count { display: none; }
/* Sur petit écran : label au-dessus, toggle Présent/Absent en pleine largeur */
@media (max-width: 480px) {
  .attend > .attend-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .attend-head .name { letter-spacing: 0.1em; }
  .seg { width: 100%; }
  .seg label { flex: 1 1 0; text-align: center; padding: 9px 8px; }
}

.form-msg {
  margin-top: 8px; padding: 14px 16px; border-radius: 12px; font-size: 0.95rem;
  display: none;
}
.form-msg.show { display: block; }
.form-msg.error { background: #fbeae3; color: #8a3b1c; border: 1px solid #e7b9a3; }

.rsvp-success { text-align: center; display: none; }
.rsvp-success.show { display: block; animation: fadeUp .8s ease both; }
.rsvp-success img { width: 90px; margin: 0 auto 12px; }
.rsvp-success h3 { font-family: var(--script); font-size: 2.6rem; color: var(--gold-deep); margin: 0 0 8px; }
@keyframes fadeUp { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }

.deadline-note { text-align: center; color: var(--ink-faint); font-style: italic; margin-top: 1.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { text-align: center; padding: 60px 20px 50px; }
.footer img { width: 88px; margin: 0 auto 14px; filter: drop-shadow(0 8px 20px rgba(154,123,51,0.4)); animation: floaty 6s ease-in-out infinite; }
.footer .f-names { font-family: var(--script); font-size: 2.1rem; line-height: 1.3; padding: 0.1em 0.22em 0.16em; color: var(--gold-deep); }
.footer .f-credit {
  font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 0.66rem; color: var(--ink-faint); margin-top: 16px;
}

/* ==========================================================================
   Bouton musique
   ========================================================================== */
.music-btn {
  position: fixed; bottom: 22px; right: 22px; z-index: 40;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: rgba(251,247,239,0.85);
  backdrop-filter: blur(8px); display: grid; place-items: center;
  box-shadow: var(--shadow-soft); transition: transform .3s ease;
}
.music-btn[hidden] { display: none; }
.music-btn:hover { transform: scale(1.08); }
.music-btn svg { width: 20px; height: 20px; color: var(--gold-deep); }
.music-btn .bars { display: none; }
.music-btn.playing .ic-off { display: none; }
.music-btn.playing .bars { display: flex; gap: 2px; align-items: flex-end; height: 16px; }
.music-btn .bars i { width: 2.5px; background: var(--gold-deep); animation: eq 0.9s ease-in-out infinite; }
.music-btn .bars i:nth-child(1){height:7px; animation-delay:-.2s}
.music-btn .bars i:nth-child(2){height:14px; animation-delay:-.4s}
.music-btn .bars i:nth-child(3){height:9px; animation-delay:-.1s}
@keyframes eq { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }

/* ==========================================================================
   ANIMATIONS SCROLL (état initial avant révélation GSAP)
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  body { font-size: 20px; }
  /* Barre : logo seul (sans « C & B »), plus grand */
  .nav-brand span { display: none; }
  .nav-brand img { width: 56px; }
  /* Menu mobile = overlay plein écran opaque (fiable même scrollé) */
  .nav-links {
    position: fixed; inset: 0; width: 100%;
    flex-direction: column; justify-content: center; align-items: center; gap: 30px;
    background: linear-gradient(165deg, #fffdf7 0%, var(--ivory) 55%, #efe4cd 100%);
    transform: translateX(100%); transition: transform .45s cubic-bezier(.5,0,.2,1);
    z-index: 55; padding: 48px 32px;
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 1.15rem; letter-spacing: 0.2em; color: var(--ink); }
  .nav-links a::after { bottom: -4px; }
  .nav-links .btn { margin-top: 8px; padding: 14px 34px; }
  .nav-toggle { display: block; position: relative; z-index: 70; }
  /* IMPORTANT : pas de backdrop-filter sur mobile, sinon la barre devient le
     bloc conteneur du menu fixed et le rogne à sa hauteur. */
  .nav, .nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.scrolled { background: rgba(251,247,239,0.95); }
  .nav.menu-open { background: transparent; box-shadow: none; }
  .nav.menu-open .nav-toggle span { background: var(--ink); }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg);}
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0;}
  .nav.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}
}
@media (max-width: 600px) {
  .families { column-gap: 16px; }
  .cd-sep { display: none; }
  .countdown { gap: 16px; }
  .event-actions, .hero-cta { width: 100%; }
  .event-card .corner { width: 30px; height: 30px; }
}

/* ----- HERO sur mobile/tablette : empilé — photo en haut, texte en dessous --- */
@media (max-width: 900px) {
  .hero {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 0 18px 60px;
  }
  /* La photo occupe le haut de l'écran et se fond dans le crème */
  .hero-photo {
    position: absolute; inset: 0 0 auto 0;
    width: 100%; height: 56svh;
    background-position: center 22%;   /* cadre sur les visages */
  }
  .hero-photo::after {
    background: linear-gradient(180deg,
      rgba(251,247,239,0) 42%,
      rgba(251,247,239,0.55) 74%,
      rgba(251,247,239,0.94) 90%,
      var(--ivory) 100%);
  }
  /* Le contenu démarre sous la photo */
  .hero-inner { margin-top: 46svh; padding: 0 22px; }
  .hero-logo-wrap { width: clamp(118px, 30vw, 160px); margin-bottom: 4px; }
  .hero .save { font-size: 0.7rem; letter-spacing: 0.4em; }
  .hero-names { font-size: clamp(2.8rem, 13vw, 4.6rem); padding: 0.3em 0.3em 0.24em; line-height: 1.32; }
  .hero-sub { font-size: 1.05rem; }
  .hero-date { margin-top: 0.8rem; }
  .countdown { margin-top: 1.6rem; }
  .scroll-cue { display: none; }
}

/* ==========================================================================
   Réduction de mouvement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Éléments de l'enveloppe normalement révélés par animation */
  .env, .env-blessing, .env-open, .env-hint { opacity: 1 !important; }
}