/* ── Noa & Kevin — style suisse / grotesque : Helvetica Neue Black caps + cercles + aplats ── */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --red: #E4201B; --ink: #1A2C30; --cream: #FBFAF9;
  --orange: #FE7E3C; --teal: #0E6873;
  --grotesk: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { font-family: var(--grotesk); background: var(--cream); color: var(--cream); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.serif, .display, .script { font-family: var(--grotesk); }

/* grain filmique sur TOUT (2 couches) : overlay = visible sur tons moyens/clairs,
   screen = fait ressortir le grain sur les fonds sombres (noir du cover inclus). */
body.wave-page::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: var(--grain); background-size: 200px; opacity: .45; mix-blend-mode: overlay; }
body.wave-page::before { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: var(--grain); background-size: 230px; opacity: .1; mix-blend-mode: screen; }

/* Landing */
.page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 22px; text-align: center; background: var(--red); color: var(--cream); }
.names { font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(60px, 19vw, 150px); line-height: .84; color: var(--cream); }
.monogram, .sedirons, .kicker, .savedate { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 13px; color: var(--cream); }
.oui { font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 9vw, 64px); color: var(--cream); margin-top: 8px; }
.intro { font-weight: 600; color: var(--cream); font-size: clamp(16px, 3.2vw, 20px); max-width: 460px; margin: 14px auto 0; }
.countdown { display: flex; gap: clamp(14px, 5vw, 40px); justify-content: center; margin: 28px 0 8px; }
.countdown .num { font-family: var(--grotesk); font-weight: 900; font-size: clamp(40px, 10vw, 64px); line-height: 1; color: var(--cream); }
.countdown .lbl { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 11px; color: var(--cream); margin-top: 6px; }

/* ── Pinned stage ── */
body.wave-page { background: var(--cream); scrollbar-width: none; -ms-overflow-style: none; }
body.wave-page::-webkit-scrollbar { display: none; }
.story { position: relative; z-index: -1; }
.stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
.step { position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(30px, 6vh, 70px) clamp(18px, 5vw, 56px); text-align: center; pointer-events: none; transform: translateY(100%); transition: transform .55s cubic-bezier(.65, 0, .3, 1); overflow: hidden; will-change: transform; }
.step.active { transform: translateY(0); pointer-events: auto; }
.step .inner { width: 100%; max-width: 900px; position: relative; z-index: 2; }

/* colour schemes (set by poster.js) */
/* dégradés directement sur la section (pas de calque qui déborde -> le scroll reste OK).
   Fonds "bleus" = teal (jamais le Black Pearl, réservé aux cercles/écriture). */
/* cover : fond noir À PLAT (sans dégradé) + cercle crème, texte crème dehors / noir dedans */
/* --bgc = couleur de FOND de la page (sert aux états actifs : radio coché, submit…) */
.sch-cover { --fg: var(--cream); --bgc: #1C1F20; background: #1C1F20; background-image: none; }
.sch-black { --fg: var(--cream); --bgc: var(--teal); background: var(--teal);
  background-image: radial-gradient(72% 62% at 90% 12%, rgba(254,126,60,.62), transparent 60%), radial-gradient(70% 60% at 6% 92%, rgba(228,32,27,.42), transparent 60%); }
.sch-red   { --fg: var(--cream); --bgc: var(--red); background: var(--red);
  background-image: radial-gradient(90% 78% at 6% 2%, rgba(254,126,60,.85), transparent 62%), radial-gradient(62% 56% at 96% 96%, rgba(254,126,60,.34), transparent 60%); }
.sch-cream { background: var(--cream); --fg: var(--ink); --bgc: var(--cream); }
/* houppa : fond teal (Blue Lagoon) ; lueur chaude côté gauche (pas en haut à droite) */
.sch-teal  { --fg: var(--cream); --bgc: var(--teal); background: var(--teal);
  background-image: radial-gradient(74% 64% at 12% 44%, rgba(254,126,60,.6), transparent 58%), radial-gradient(60% 54% at 95% 6%, rgba(228,32,27,.4), transparent 58%); }
/* mairie : fond Burnt Orange, texte foncé (Black Pearl) pour le contraste */
.sch-orange { --fg: var(--ink); --bgc: var(--orange); background: var(--orange);
  background-image: radial-gradient(90% 78% at 8% 4%, rgba(228,32,27,.42), transparent 60%), radial-gradient(64% 56% at 96% 96%, rgba(228,32,27,.26), transparent 60%); }
/* sections (not the cover): text anchored to the top, over the flat colour; circles bleed below */
.step:not(.sch-cover) { justify-content: flex-start; padding-top: clamp(46px, 11vh, 116px); padding-bottom: clamp(56px, 11vh, 110px); }
.step:not(.sch-cover) .inner { max-width: 880px; }
/* la section active peut scroller si son contenu dépasse (formulaire "oui" étendu) */
.step:not(.sch-cover).active { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }

/* geometric circles behind the type */
.poster-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.circ { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.circ.cc { background: var(--cream); } .circ.cb { background: var(--ink); } .circ.cw { background: var(--cream); } .circ.cr { background: var(--red); }
.circ.co { background: var(--orange); } .circ.ct { background: var(--teal); }
.circ.cnb { background: var(--ink); border: 5px solid var(--cream); }
/* deux cercles qui se croisent avec intersection rouge (SVG, injecté par poster.js) */
.lens { position: absolute; left: 50%; transform: translateX(-50%); height: auto; pointer-events: none; }

/* ── Page d'intro (avant le cover) : texte centré qui s'inverse sur le lens (3 couleurs) ── */
/* message : MÊME code couleurs que le cover — noir à plat + lentille crème/beige (croisement noir) */
.step.intro-step { --msgA:#E4201B; --msgB:#FBFAF9; justify-content: center; align-items: center; padding-top: clamp(30px, 6vh, 70px); padding-bottom: clamp(30px, 6vh, 70px);
  background: #1C1F20; background-image: none; }
.intro-in { max-width: 680px; text-align: center; color: var(--cream); display: flex; flex-direction: column; align-items: center; }
/* titre (grand) — garde sa taille */
.intro-title { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(34px, 8vw, 62px); color: var(--cream); }
/* les 2 cercles qui se croisent, ENTRE le titre et les paragraphes (en ligne) */
.intro-lens { width: 100%; display: flex; justify-content: center; margin: clamp(22px, 4.5vh, 46px) 0; }
.lens-inline { width: min(58vmin, 300px); height: auto; display: block; }
/* paragraphes (plus petits) */
.intro-body { font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.24; font-size: clamp(15px, 3.2vw, 22px); color: var(--cream); max-width: 480px; }
.intro-body + .intro-body { margin-top: 10px; }

/* Inversion couleur sur les cercles crème : clone du contenu, découpé au cercle (poster.js),
   recoloré foncé -> le texte s'inverse là où il passe sur le cercle. Le padding/flex DOIT
   rester identique à .step:not(.sch-cover) pour que le clone se superpose pile au vrai texte. */
.invert-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(46px, 11vh, 116px) clamp(18px, 5vw, 56px) clamp(56px, 11vh, 110px); }
.invert-layer .inner { --fg: var(--ink); --bgc: var(--cream); color: var(--ink); max-width: 880px; }

/* rotated side labels + star */
.side { position: absolute; top: 50%; font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; color: var(--fg); white-space: nowrap; z-index: 3; opacity: .85; }
.side-l { left: 12px; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.side-r { right: 12px; transform: translateY(-50%); writing-mode: vertical-rl; }
.pstar { position: absolute; right: 22px; bottom: 20px; font-size: 26px; color: var(--fg); z-index: 3; }

/* ── Section text (sections 1-4): solid grotesk caps ── */
.sectiontext { width: 100%; }
.blk { margin: 0 auto; max-width: 820px; color: var(--fg); }
.blk + .blk { margin-top: 14px; }
.blk-xl { font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .86; font-size: clamp(48px, 13vw, 132px); color: var(--fg); }
.blk-l  { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(26px, 6.5vw, 58px); color: var(--fg); }
.blk-s  { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(13px, 2.4vw, 18px); color: var(--fg); margin-bottom: 16px; }
.blk-p  { font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(14px, 2.6vw, 20px); color: var(--fg); line-height: 1.2; margin-top: 14px; }
.blk-accent { } .f-script, .f-serif, .f-sans { font-family: var(--grotesk); }

/* ═══════════ RÉGLAGES DU COVER — édite juste ces nombres (px) ═══════════ */
:root {
  --cover-name: 92px;      /* taille de « NOA & KEVIN » sur mobile */
  --cover-phrase: 66px;    /* taille de « SE / MARIENT » sur mobile */
  --cover-gap: 140px;      /* espace vertical entre les noms et la phrase */
  --cover-circle: 80;      /* taille du cercle : + le nombre est grand, + le cercle est grand (≈ % de l'écran — 50 petit, 66 moyen, 80 grand) */
}
@media (min-width: 800px) {          /* valeurs sur grand écran (desktop) */
  :root {
    --cover-name: 210px;
    --cover-phrase: 132px;
    --cover-gap: 60px;
  }
}
/* (le diamètre du cercle se règle dans js/poster.js, 1ʳᵉ ligne CFG : d: 66) */

/* ── COVER (step 0) : type s'inverse sur le cercle (mix-blend difference) ── */
.sch-cover { justify-content: center; align-items: center; }
.sch-cover .inner { display: flex; justify-content: center; align-items: center; max-width: 100%; }
.sch-cover .cover-in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--cover-gap); text-align: left;
  width: auto; max-width: 96vw; padding: 0; color: var(--red); }
.cover-in .grp { display: flex; flex-direction: column; }
.cover-in .big { font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .82; font-size: var(--cover-name); color: var(--cream); }
.cover-in .bot { align-items: flex-start; }
.cover-in .mid { font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .98; font-size: var(--cover-phrase); color: var(--cream); }
/* le cercle du cover suit --cover-circle (override la valeur inline de poster.js) */
.sch-cover .circ { width: calc(var(--cover-circle) * 1vmin) !important; height: calc(var(--cover-circle) * 1vmin) !important; }
/* cover : clone foncé découpé au cercle -> le texte est FONCÉ dans le cercle, ROUGE en dehors */
.cover-invert { justify-content: center; padding: clamp(30px, 6vh, 70px) clamp(18px, 5vw, 56px);
  clip-path: circle(calc(var(--cover-circle) * 1vmin / 2) at 50% 50%);
  -webkit-clip-path: circle(calc(var(--cover-circle) * 1vmin / 2) at 50% 50%); }
.cover-invert .big, .cover-invert .mid { color: #1C1F20; }

/* contenu sans fondu — la transition entre sections se fait en SLIDE du panneau (voir .step) */
.step .blk, .step .cover-in .grp, .step .actions, .step .evrsvp, .step .rsvp .field, .step .rsvp button.submit { opacity: 1; animation: none; }

/* Icon actions */
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }
.actions .ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--fg); border-radius: 50%; color: var(--fg); text-decoration: none; }
.actions .ico:hover { background: var(--fg); color: var(--red); }
.actions .ico svg { width: 21px; height: 21px; }

/* Form (Swiss, bold) */
.rsvp { margin: 26px auto 0; max-width: 460px; text-align: left; }
/* espace entre le titre (Confirmez-nous votre présence) et le premier champ */
.rsvp .sectiontext { margin-bottom: 38px; }
.rsvp .sectiontext .blk-xl { line-height: 1.1; }
.field { margin-bottom: 26px; }
.field label, .evrsvp-q { display: block; font-family: var(--grotesk); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); margin-bottom: 12px; }
.field label .opt { opacity: .7; font-weight: 600; }
.field input[type=text], .field input[type=number], .field textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--fg); border-radius: 0; background: transparent; font-family: var(--grotesk); font-weight: 700; font-size: 17px; color: var(--fg); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fg); }
.field textarea { min-height: 80px; resize: vertical; }
.choice { display: flex; gap: 10px; }
.choice label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 2px solid var(--fg); cursor: pointer; color: var(--fg); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; margin: 0; }
.choice input { accent-color: var(--fg); }
/* radio coché : fond TRANSPARENT — l'état actif = contour épais (2px + 3px intérieur) */
.choice label:has(input:checked) { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 3px var(--fg); }
.row { display: flex; gap: 12px; } .row .field { flex: 1; }
.hidden { display: none !important; }
button.submit { width: 100%; margin-top: 6px; padding: 15px; border: none; cursor: pointer; font-family: var(--grotesk); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; color: var(--red); background: var(--fg); }
.sch-cream button.submit, .sch-black button.submit, .sch-cover button.submit { color: var(--ink); }
.formmsg { text-align: center; margin-top: 12px; font-weight: 700; min-height: 20px; }
.formmsg.ok { color: var(--fg); } .formmsg.err { color: var(--fg); text-decoration: underline; }

.evrsvp { margin: 24px auto 0; max-width: 440px; }
.evrsvp-counts { margin-top: 18px; }

.thanksfull { position: fixed; inset: 0; background: var(--red); color: var(--cream); z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.thanksfull h3 { font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(48px, 13vw, 120px); line-height: .86; color: var(--cream); }
.thanksfull p { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-top: 16px; max-width: 460px; color: var(--cream); }

/* couleur crème + mix-blend difference -> s'inverse selon le fond (foncé sur le clair,
   clair sur le foncé) pour rester lisible partout, texte ET flèche. */
.wave-scrollhint { position: fixed; bottom: 11px; left: 0; right: 0; text-align: center; z-index: 20; color: var(--cream); font-weight: 800; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; transition: opacity .4s; pointer-events: none; mix-blend-mode: difference; }
.wave-scrollhint .arrow { display: block; font-size: 18px; margin-top: 5px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} }
@media (prefers-reduced-motion: reduce) { .wave-scrollhint .arrow { animation: none; } }

/* cover : noms + phrase alignés à gauche, MÊME bord gauche (flush), dans le cercle */
.cover-in .grp { align-items: flex-start; text-align: left; }
.cover-in .grp.top { padding-left: 0; }
.cover-in .grp.bot { padding-left: 5px; transform: translateY(-49px); }
/* menu toujours visible (fixe en haut) */
/* navigation latérale = menu + indicateur de progression : liste verticale à droite,
   section active en surbrillance (trait plein), clic pour naviguer. Toujours visible. */
/* Menu burger (coin haut-droit, toujours visible) + overlay plein écran = page simple */
/* burger TOUJOURS blanc (pas de blend : il changeait de couleur selon le fond) */
.menu-btn { position: fixed; top: 12px; right: 12px; z-index: 60; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; }
.menu-btn span { display: block; width: 26px; height: 2px; background: var(--cream); transition: transform .3s, opacity .3s; }
body.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-overlay { position: fixed; inset: 0; z-index: 55; background: var(--red);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .35s; }
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
.menu-list { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.menu-list a { display: flex; align-items: baseline; gap: 16px; color: var(--cream); text-decoration: none; cursor: pointer;
  font-family: var(--grotesk); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em;
  line-height: 1.06; font-size: clamp(38px, 11vw, 88px); opacity: .5; transition: opacity .25s; }
.menu-list a:hover, .menu-list a.active { opacity: 1; }
.menu-list a .mi-num { font-family: var(--grotesk); font-weight: 800; font-size: 13px; letter-spacing: .12em; opacity: .7; }

/* ── Switcher de langue (FR / EN / עברית), en bas du menu ── */
.lang-row { display: flex; gap: 14px; margin-top: 34px; }
.lang-row button { background: none; border: 2px solid var(--cream); color: var(--cream); cursor: pointer;
  font-family: var(--grotesk); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; opacity: .5; transition: opacity .25s; }
.lang-row button:hover, .lang-row button.active { opacity: 1; }

/* ── Desktop / tablette paysage : le -49px du "se marient" (réglé pour mobile) mangeait
   le gap de 60px et chevauchait KEVIN ; le titre confirm à 132px prenait la moitié de l'écran. ── */
@media (min-width: 800px) {
  .cover-in .grp.bot { transform: translateY(-12px); }
  .rsvp .sectiontext .blk-xl { font-size: 96px; }
}
/* laptops peu hauts : tout doit tenir SANS scroll interne (sinon chaque transition
   coûte un geste perdu). Compression cover + message + confirm. */
@media (min-width: 800px) and (max-height: 780px) {
  :root { --cover-name: 150px; --cover-phrase: 96px; --cover-gap: 40px; }
  .rsvp .sectiontext .blk-xl { font-size: 60px; }
  .rsvp .sectiontext { margin-bottom: 20px; }
  .rsvp { margin-top: 8px; }
  .field { margin-bottom: 18px; }
  .field textarea { min-height: 64px; }
  .step:not(.sch-cover) { padding-top: clamp(36px, 7vh, 64px); padding-bottom: clamp(36px, 7vh, 64px); }
  .invert-layer { padding-top: clamp(36px, 7vh, 64px); padding-bottom: clamp(36px, 7vh, 64px); }
  .intro-title { font-size: clamp(30px, 5vh, 44px); }
  .lens-inline { width: min(58vmin, 220px); }
  .intro-lens { margin: clamp(14px, 3vh, 28px) 0; }
  .intro-body { font-size: clamp(14px, 2.4vh, 18px); }
}

/* ── Hébreu (RTL) : la page passe en dir=rtl ; ajustements des blocs alignés à gauche ── */
[dir="rtl"] .rsvp { text-align: right; }
[dir="rtl"] .intro-in, [dir="rtl"] .sectiontext, [dir="rtl"] .evrsvp { direction: rtl; }
/* adresses/lieux non traduits (pas de data-i18n) : rester LTR pour ne pas déplacer les numéros */
[dir="rtl"] .sectiontext .blk-p:not([data-i18n]) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .cover-in .grp { align-items: flex-end; text-align: right; }
[dir="rtl"] .menu-list { align-items: flex-end; }