/* ==================================================================
   Carte de mariage · Eden & Netanel
   Design « beige doré chic » — mobile-first, FR / HE (RTL)
   ================================================================== */

:root{
  --cream:#FBF7F0;
  --ivory:#F4ECDD;
  --beige:#EADFC7;
  --sand:#DCC9A4;
  --gold:#B89B5E;
  --gold-d:#9A7E45;
  --gold-l:#D7C193;
  --ink:#4A4036;
  --ink-soft:#857a68;
  --line:#E4D7BD;
  --white:#FFFFFF;
  --ok:#3f7d4f;
  --shadow:0 18px 50px rgba(74,64,54,.12);
  --radius:18px;
  --font-display:'Cormorant Garamond','Frank Ruhl Libre',serif;
  --font-body:'Jost','Heebo',sans-serif;
  --font-script:'Great Vibes','Cormorant Garamond',cursive;
}
html[lang="he"]{
  --font-display:'Frank Ruhl Libre','Cormorant Garamond',serif;
  --font-body:'Heebo','Jost',sans-serif;
}

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

html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 50% -10%, #fff 0%, transparent 60%),
    linear-gradient(180deg,#EFE6D4 0%,#E7DAC0 100%);
  line-height:1.7;
  overflow-x:hidden;            /* évite tout débordement latéral */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ----- Colonne invitation ---------------------------------------- */
.sheet{
  max-width:620px;
  margin:0 auto;
  background:var(--cream);
  overflow:hidden;
  position:relative;
}
@media(min-width:660px){
  .sheet{
    margin:34px auto;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
}

/* ----- Sélecteur de langue (discret) ----------------------------- */
.lang-switch{
  position:fixed;
  top:14px;
  inset-inline-end:14px;
  z-index:400;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 13px;
  font-family:var(--font-body);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold-d);
  background:rgba(251,247,240,.82);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(74,64,54,.10);
  opacity:.72;
  transition:opacity .25s,transform .25s;
}
.lang-switch:hover{opacity:1;transform:translateY(-1px)}
.lang-switch svg{width:13px;height:13px}

/* bouton musique (à côté du sélecteur de langue) */
.music-toggle{
  position:fixed;
  top:14px;
  inset-inline-end:84px;
  z-index:400;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  color:var(--gold-d);
  background:rgba(251,247,240,.82);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(74,64,54,.10);
  cursor:pointer;
  opacity:.78;
  transition:opacity .25s,transform .25s;
}
.music-toggle[hidden]{display:none}
.music-toggle:hover{opacity:1;transform:translateY(-1px)}
.music-toggle svg{width:18px;height:18px}
/* le trait barré n'apparaît que quand le son est coupé */
.music-toggle .mt-slash{opacity:0;transition:opacity .2s}
.music-toggle.is-muted .mt-wave{opacity:.25}
.music-toggle.is-muted .mt-slash{opacity:1}

/* ----- Sections -------------------------------------------------- */
section{
  padding:64px 26px;
  text-align:center;
  position:relative;
}
.bg-cream{background:var(--cream)}
.bg-ivory{background:var(--ivory)}

.eyebrow{
  font-size:.76rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-d);
}
html[lang="he"] .eyebrow{letter-spacing:.18em}

.section-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:2.15rem;
  line-height:1.2;
  color:var(--ink);
  margin:.35em 0;
}

/* ----- Ornement (séparateur branche d'olivier dorée) ------------- */
.ornament{
  width:230px;
  height:26px;
  margin:18px auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 28'%3E%3Cg fill='none' stroke='%23B89B5E' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M118 14C96 14 76 10 50 16'/%3E%3Cpath d='M142 14C164 14 184 10 210 16'/%3E%3C/g%3E%3Cg fill='%23B89B5E'%3E%3Cpath d='M96 13q-7-7-4-13 6 5 4 13z'/%3E%3Cpath d='M80 12q-8-5-7-12 7 3 7 12z'/%3E%3Cpath d='M64 13q-9-3-10-10 8 1 10 10z'/%3E%3Cpath d='M104 16q-6 8-13 8 3-7 13-8z'/%3E%3Cpath d='M86 17q-7 7-14 6 4-7 14-6z'/%3E%3Cpath d='M68 18q-8 5-15 3 5-6 15-3z'/%3E%3Cpath d='M164 13q7-7 4-13-6 5-4 13z'/%3E%3Cpath d='M180 12q8-5 7-12-7 3-7 12z'/%3E%3Cpath d='M196 13q9-3 10-10-8 1-10 10z'/%3E%3Cpath d='M156 16q6 8 13 8-3-7-13-8z'/%3E%3Cpath d='M174 17q7 7 14 6-4-7-14-6z'/%3E%3Cpath d='M192 18q8 5 15 3-5-6-15-3z'/%3E%3C/g%3E%3Crect x='125.5' y='9.5' width='9' height='9' fill='none' stroke='%23B89B5E' transform='rotate(45 130 14)'/%3E%3Crect x='128.3' y='12.3' width='3.4' height='3.4' fill='%23B89B5E' transform='rotate(45 130 14)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.ornament span{display:none}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:72px 26px 40px;
  background:
    radial-gradient(600px 420px at 50% 28%,#fff 0%,transparent 70%),
    var(--cream);
}
.bsd{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Frank Ruhl Libre',serif;
  font-size:.82rem;
  color:var(--gold-d);
  letter-spacing:.06em;
  opacity:.85;
}
.hero-frame{
  position:relative;
  border:1px solid var(--gold-l);
  outline:1px solid var(--gold-l);
  outline-offset:6px;
  padding:56px 30px;
  width:100%;
  max-width:430px;
  background:
    radial-gradient(320px 220px at 50% 38%,rgba(255,255,255,.85) 0%,transparent 75%);
}

/* branches fleuries dans les 4 coins du cadre */
.corner{
  position:absolute;
  width:74px;
  height:74px;
  color:var(--gold);
  opacity:.85;
  pointer-events:none;
}
.corner svg{display:block;width:100%;height:100%}
.c-tl{top:9px;left:9px}
.c-tr{top:9px;right:9px;transform:scaleX(-1)}
.c-bl{bottom:9px;left:9px;transform:scaleY(-1)}
.c-br{bottom:9px;right:9px;transform:scale(-1,-1)}
.logo{
  width:132px;
  margin:0 auto 18px;
  color:var(--gold-d);
}
.logo-svg{display:block;width:100%;height:auto}
/* photo des alliances : le fond blanc se fond dans le beige */
.logo-img{
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}
.monogram{
  width:96px;height:96px;
  margin:0 auto 22px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.monogram::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid var(--gold-l);
  border-radius:50%;
}
.monogram b{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:500;
  color:var(--gold-d);
  letter-spacing:.04em;
}
.hero .eyebrow{margin-bottom:8px}
.couple-names{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.7rem,13vw,4rem);
  letter-spacing:.02em;
  line-height:1.08;
  color:var(--ink);
  margin:8px 0 6px;
}
html[lang="he"] .couple-names{font-weight:500}
.couple-names .amp{
  display:block;
  font-family:var(--font-script);
  font-size:.78em;
  font-weight:400;
  font-style:normal;
  color:var(--gold);
  margin:2px 0;
}

/* ----- Bloc date « save the date » bien visible ------------------ */
.date-block{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  margin-top:14px;
}
.db-weekday{
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-inline-start:.34em;
}
html[lang="he"] .db-weekday{letter-spacing:.12em;padding:0}
.db-mid{
  display:flex;
  align-items:center;
  gap:16px;
}
.db-line{
  width:44px;
  height:1px;
  background:linear-gradient(to right,transparent,var(--gold));
}
.db-mid .db-line:last-child{background:linear-gradient(to left,transparent,var(--gold))}
.db-day{
  font-family:'Cinzel',var(--font-display);
  font-size:3.4rem;
  font-weight:600;
  line-height:1;
  color:var(--gold-d);
}
.db-monthyear{
  font-family:'Cinzel',var(--font-display);
  font-size:1.08rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  padding-inline-start:.22em;
}
html[lang="he"] .db-monthyear{letter-spacing:.06em;padding:0}
.hebrew-date{
  margin-top:10px;
  font-family:'Frank Ruhl Libre',serif;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--gold-d);
  opacity:.9;
}
.event-block .hebrew-date{margin-top:4px}
.hero-date{
  font-size:.92rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:10px;
}
.scroll-cue{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--gold-d);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.scroll-cue svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ================================================================
   COMPTE À REBOURS
   ================================================================ */
.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:420px;
  margin:22px auto 0;
}
.cd-box{
  position:relative;
  padding:10px 4px;
}
.cd-box + .cd-box::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:16%;
  height:62%;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--gold-l),transparent);
}
.cd-num{
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:500;
  color:var(--gold-d);
  line-height:1;
}
.cd-label{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:6px;
}
.cd-today{
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--gold-d);
}

/* ================================================================
   FAIRE-PART
   ================================================================ */
.fp-bless{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.25rem;
  color:var(--gold-d);
}
/* familles côte à côte : Cohen | Serfaty, séparées d'un filet doré */
.fp-parents{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:16px;
  max-width:480px;
  margin:0 auto;
}
/* Grands-parents : aux deux extrémités, sans filet, plus petits */
.fp-gp{
  margin-top:2px;
  max-width:none;
  width:100%;
  gap:0;
  justify-content:space-between;
}
.fp-gp .fp-rule{display:none}
/* aligne par le bas : un côté qui a moins de noms se cale sur le dernier d'en face */
.fp-gp{align-items:flex-end}
.fp-gp .fp-col{flex:0 1 auto;max-width:46%;justify-content:flex-end}
.fp-gp .ff-name{
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.35;
  color:var(--ink);
}
.fp-gp .fp-col:first-child{text-align:left}
.fp-gp .fp-col:last-child{text-align:right}
html[dir="rtl"] .fp-gp .fp-col:first-child{text-align:right}
html[dir="rtl"] .fp-gp .fp-col:last-child{text-align:left}

.fp-bless{margin-top:16px}
.fp-pa{margin-top:14px}
.fp-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.fp-rule{
  flex:none;
  width:1px;
  align-self:stretch;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);
}
.ff-name{
  font-family:var(--font-display);
  font-size:1.04rem;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.4;
  color:var(--ink);
}
.fp-intro{
  max-width:340px;
  margin:22px auto 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.12rem;
  color:var(--ink-soft);
}
.fp-names{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,9.5vw,3.2rem);
  font-weight:400;
  letter-spacing:.03em;
  color:var(--ink);
  margin:16px 0 4px;
}
.fp-names .amp{
  font-family:var(--font-script);
  font-size:.72em;
  color:var(--gold);
  margin:0 .12em;
}

/* bloc événement fusionné (le grand jour + lieu + horaires + boutons) */
.event-block{
  max-width:460px;
  margin:26px auto 0;
  padding:28px 22px;
  background:var(--cream);
  border:1px solid var(--gold-l);
  border-radius:4px;
}
.event-block .eyebrow{display:block}
.event-block .detail-date{
  margin-top:6px;
}
.event-block .venue-eyebrow{margin-top:22px}
.event-block .venue-name{margin-top:6px}
.event-block .schedule-one{margin-top:18px}

/* texte d'invitation fluide dans le cadre */
.ev-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  margin:0 auto 14px;
  border:1px solid var(--gold-l);
  border-radius:50%;
  color:var(--gold-d);
}
.ev-ico svg{width:22px;height:22px}
.invite-text{
  font-family:var(--font-display);
  font-size:1.18rem;
  line-height:1.85;
  color:var(--ink);
}
.invite-text strong{
  font-weight:600;
  color:var(--gold-d);
}
.invite-text .it-he{
  font-family:'Frank Ruhl Libre',serif;
  font-size:.92em;
  color:var(--gold-d);
  letter-spacing:.04em;
}

/* liens rapides discrets sous le cadre (Waze · Maps · Calendrier) */
.quick-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  max-width:420px;
  margin:16px auto 0;
}
.qlink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 15px;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.03em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.qlink svg{width:16px;height:16px;flex:none}
.qlink:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,64,54,.16)}

/* Waze — bleu de la marque */
.ql-waze{
  background:#33CCFF;
  color:#fff;
}
.ql-waze svg{color:#fff}

/* Google Maps — fond blanc + icône multicolore de la marque */
.ql-maps{
  background:#fff;
  color:#3c4043;
  border-color:#e3ddd0;
}

/* Calendrier — couleurs adaptées au thème doré */
.ql-cal{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
  color:#fff;
}
.ql-cal svg{color:#fff}
.citation{
  margin:26px auto 0;
  max-width:440px;
  padding:18px 10px;
  border-top:1px solid var(--gold-l);
  border-bottom:1px solid var(--gold-l);
}
.citation-he{
  font-family:'Frank Ruhl Libre',serif;
  font-size:1.45rem;
  line-height:1.9;
  color:var(--gold-d);
  direction:rtl;
}
.citation-tr{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-soft);
  margin-top:8px;
}

/* ================================================================
   DÉTAILS
   ================================================================ */
.detail-date{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:1.3rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}

/* programme : une seule ligne « Houppa 18h, suivie de la réception » */
.schedule-one{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:18px;
}
.so-ico{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--gold-l);
  border-radius:50%;
  color:var(--gold-d);
  margin-bottom:2px;
}
.so-ico svg{width:21px;height:21px}
.so-name{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--ink);
  line-height:1.1;
}
.so-time{
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--gold-d);
}
.so-after{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1rem;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ================================================================
   LIEU + BOUTONS
   ================================================================ */
.venue-name{
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--ink);
  margin-top:6px;
}
.venue-addr{
  color:var(--ink-soft);
  margin-top:4px;
}
.actions{
  display:flex;
  gap:10px;
  max-width:380px;
  margin:26px auto 0;
}
.action-tile{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 6px;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
  font-size:.82rem;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.action-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(74,64,54,.14);
  border-color:var(--gold);
}
.app-ico{
  width:48px;height:48px;
  border-radius:13px;
  overflow:hidden;
  border:1px solid rgba(74,64,54,.10);
  box-shadow:0 4px 11px rgba(74,64,54,.16);
}
.app-ico svg{display:block;width:100%;height:100%}
.tile-label{font-weight:500;letter-spacing:.02em}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  font-family:var(--font-body);
  font-size:.92rem;
  letter-spacing:.04em;
  text-decoration:none;
  border-radius:12px;
  border:1px solid var(--gold);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(74,64,54,.14)}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
  border-color:var(--gold-d);
  color:#fff;
  font-size:1rem;
  padding:16px 22px;
}
.btn-block{width:100%}

/* ================================================================
   FORMULAIRE RSVP
   ================================================================ */
.form-wrap{
  max-width:400px;
  margin:24px auto 0;
  text-align:start;
}
.field{margin-bottom:16px}
.field label,.field .lbl{
  display:block;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-d);
  margin-bottom:7px;
}
.field input[type=text],
.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,155,94,.18);
}

/* présence : deux gros boutons */
.presence{display:flex;gap:10px}
.presence label{
  flex:1;
  margin:0;
  text-transform:none;
  letter-spacing:0;
  color:var(--ink);
}
.presence input{position:absolute;opacity:0;width:0;height:0}
.presence .opt{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 8px;
  text-align:center;
  font-size:.95rem;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--white);
  cursor:pointer;
  transition:all .2s;
}
.presence input:checked+.opt{
  border-color:var(--gold-d);
  background:var(--ivory);
  box-shadow:0 0 0 2px rgba(184,155,94,.25) inset;
  font-weight:500;
}

/* steppers nombre */
.stepper{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--white);
  width:150px;
}
.stepper button{
  width:42px;height:46px;
  border:none;
  background:var(--ivory);
  color:var(--gold-d);
  font-size:1.3rem;
  cursor:pointer;
  transition:background .15s;
}
.stepper button:hover{background:var(--beige)}
.stepper input{
  flex:1;
  width:100%;
  border:none;
  text-align:center;
  font-family:var(--font-body);
  font-size:1.05rem;
  color:var(--ink);
  background:transparent;
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field-hideable{transition:opacity .25s}
.guest-grid{display:flex;gap:12px}
.guest-grid .field{flex:1;min-width:0}
.guest-grid .stepper{width:100%}
.select-nb{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 14px;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A7E45' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
html[dir="rtl"] .select-nb{background-position:left 14px center}
.select-nb:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,155,94,.18)}
.is-hidden{display:none !important}

.form-err{
  background:#FCEDEC;
  border:1px solid #E5B4AF;
  color:#9b2c22;
  border-radius:10px;
  padding:11px 14px;
  font-size:.88rem;
  margin-bottom:16px;
}
.form-note{
  font-size:.85rem;
  color:var(--ink-soft);
  background:var(--ivory);
  border:1px dashed var(--sand);
  border-radius:10px;
  padding:12px 14px;
}

/* ================================================================
   MESSAGE DE REMERCIEMENT
   ================================================================ */
.merci{
  max-width:420px;
  margin:24px auto 0;
  background:var(--white);
  border:1px solid var(--gold-l);
  border-radius:16px;
  padding:30px 24px;
}
.merci .heart{
  width:48px;height:48px;
  margin:0 auto 12px;
  color:var(--gold);
}
.merci h3{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:500;
  color:var(--gold-d);
}
.merci p{color:var(--ink-soft);margin-top:8px}

/* ================================================================
   PIED DE PAGE
   ================================================================ */
#rsvp{padding-bottom:30px}
.footer{
  background:linear-gradient(180deg,var(--cream),var(--beige));
  padding:30px 26px 40px;
  text-align:center;
}
/* In memoriam (chers disparus) */
.memoriam{
  max-width:340px;
  margin:0 auto 30px;
  padding-bottom:26px;
  border-bottom:1px solid var(--gold-l);
}
.mem-title{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.mem-name{
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--gold-d);
  line-height:1.6;
}
.mem-name .zal{
  font-family:'Frank Ruhl Libre',serif;
  unicode-bidi:isolate;
  direction:rtl;
  margin-inline-start:.1em;
}
.footer .sig{
  font-family:var(--font-script);
  font-size:3rem;
  font-weight:400;
  color:var(--gold-d);
  line-height:1.2;
}
.footer .sig-amp{
  font-size:.62em;       /* & plus petit que les noms */
  margin:0 .28em;        /* espace entre le & et les noms */
  vertical-align:.06em;
}
html[lang="he"] .footer .sig{
  font-family:var(--font-display);
  font-style:italic;
  font-size:2.2rem;
}
.footer p{color:var(--ink-soft);max-width:360px;margin:8px auto 0}
.footer .footer-date{
  margin-top:16px;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-d);
}

/* carte du formulaire RSVP */
.rsvp-card{
  max-width:480px;
  margin:8px auto 0;
  padding:30px 24px;
  background:var(--white);
  border:1px solid var(--gold-l);
  outline:1px solid var(--gold-l);
  outline-offset:5px;
}
.rsvp-card .merci{
  border:none;
  background:transparent;
  padding:6px 0;
  margin:0 auto;
}
.rsvp-card .form-wrap{margin-top:16px}

/* lieu : nom de salle plus majestueux */
.venue-name{
  font-size:1.9rem;
  font-weight:400;
  letter-spacing:.02em;
}
/* ================================================================
   VERSET EN ARC (קול ששון) + TENUE TSNIOUT
   ================================================================ */
.verset-line{
  max-width:340px;
  margin:8px auto 0;
  font-family:'Frank Ruhl Libre',serif;
  font-size:1.18rem;
  line-height:1.7;
  letter-spacing:.01em;
  color:var(--gold-d);
  direction:rtl;
  text-align:center;
}
/* verset en arc (image) — rendu identique sur tous les téléphones */
.verset-img{
  display:block;
  width:100%;
  max-width:330px;
  height:auto;
  margin:6px auto 0;
}
.tsniout{
  margin:20px auto 0;
  max-width:360px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-soft);
}
/* tsniout placé dans le cadre événement, sous l'horaire */
.event-block .tsniout{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--gold-l);
  font-size:1rem;
  color:var(--gold-d);
}

/* ================================================================
   ENVELOPPE D'OUVERTURE (première page)
   ================================================================ */
html.cover-active,
body.cover-active{overflow:hidden;height:100%}

#cover{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:24px;
  background:radial-gradient(circle at 50% 38%, #FCF8F1 0%, #EADfC8 60%, #E3D4B7 100%);
  transition:opacity .9s ease, transform .9s ease;
}
#cover.is-open{opacity:0;transform:scale(1.14);pointer-events:none}
#cover.is-gone{display:none}

.env{
  position:relative;
  width:300px;
  max-width:80vw;
  height:200px;
  perspective:1100px;
  cursor:pointer;
}
.env-body{
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,#F6EEE0 0%,#E8D8BD 100%);
  border:1px solid var(--gold-l);
  border-radius:7px;
  box-shadow:0 26px 54px rgba(74,64,54,.24);
  overflow:hidden;
}
/* rabat triangulaire (fermé), s'ouvre vers le haut */
.env-flap{
  position:absolute;
  top:0;left:0;right:0;
  height:64%;
  background:linear-gradient(160deg,#F1E7D5 0%,#E1CFAF 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1s cubic-bezier(.5,.05,.3,1);
  z-index:5;
  box-shadow:0 2px 6px rgba(74,64,54,.12);
}
.env-seal{
  position:absolute;
  top:54%;left:50%;
  transform:translate(-50%,-50%);
  width:58px;height:58px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #C9A961, #9A7E45 70%, #836A38);
  border:1px solid #8A6E2F;
  box-shadow:0 4px 12px rgba(74,64,54,.3);
  display:flex;align-items:center;justify-content:center;
  z-index:6;
  transition:opacity .5s ease, transform .6s ease;
}
.env-seal span{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.04em;
  color:#FBF5E6;
}
/* à l'ouverture : le rabat se relève, le sceau disparaît */
#cover.is-open .env-flap{transform:rotateX(-172deg)}
#cover.is-open .env-seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}

.open-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 26px;
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
  border:none;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(154,126,69,.32);
  animation:pulse 2.4s ease-in-out infinite;
}
.open-btn svg{width:16px;height:16px}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media(prefers-reduced-motion:reduce){
  #cover,.env-flap,.open-btn{transition:none;animation:none}
}

/* ================================================================
   ANIMATIONS D'APPARITION
   ================================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue svg{animation:none}
}

/* ================================================================
   ESPACES FAMILLE & ADMIN (back-office)
   ================================================================ */
.admin-body{
  background:#F1E9DA;
  font-family:var(--font-body);
  color:var(--ink);
  min-height:100vh;
}
.admin-wrap{max-width:1040px;margin:0 auto;padding:22px 16px 60px}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 20px;
  margin-bottom:20px;
}
.topbar h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.5rem;
  color:var(--gold-d);
}
.topbar .who{font-size:.85rem;color:var(--ink-soft)}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.topbar nav form{display:flex}
.topbar nav a,
.topbar nav form button{
  font-family:var(--font-body);
  font-size:.84rem;
  line-height:1.2;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
}
.topbar nav a:hover,
.topbar nav form button:hover{background:var(--ivory)}
.topbar nav a.active{background:var(--gold);color:#fff}

.card-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  margin-bottom:20px;
}
.card-panel h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.3rem;
  color:var(--ink);
  margin-bottom:14px;
}

/* écran de connexion */
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-box{
  width:100%;
  max-width:380px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:34px 28px;
  text-align:center;
}
.login-box .monogram{margin-bottom:18px}
.login-box h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.6rem;
  color:var(--gold-d);
  margin-bottom:4px;
}
.login-box p.sub{font-size:.88rem;color:var(--ink-soft);margin-bottom:20px}
.login-box .field{text-align:start}
.login-box select,
.login-box input{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 13px;
  background:var(--white);
  color:var(--ink);
}
.login-box select:focus,
.login-box input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,155,94,.18);
}

/* stats */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
}
.stat{
  background:linear-gradient(160deg,var(--ivory),var(--white));
  border:1px solid var(--line);
  border-radius:13px;
  padding:18px;
  text-align:center;
}
.stat .n{
  font-family:var(--font-display);
  font-size:2.3rem;
  font-weight:600;
  color:var(--gold-d);
  line-height:1;
}
.stat .l{
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:6px;
}

/* barre filtres */
.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:16px;
}
.toolbar input,
.toolbar select{
  font-family:var(--font-body);
  font-size:.9rem;
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px 11px;
  background:var(--white);
  color:var(--ink);
}
.toolbar input{flex:1;min-width:160px}
.toolbar input:focus,
.toolbar select:focus{outline:none;border-color:var(--gold)}

/* tableau */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
table.data th,
table.data td{
  padding:11px 12px;
  text-align:start;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.data th{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--ivory);
}
table.data tbody tr:hover{background:var(--cream)}
table.data td.msg{white-space:normal;min-width:180px;color:var(--ink-soft)}

.tag{
  display:inline-block;
  font-size:.74rem;
  padding:3px 10px;
  border-radius:999px;
}
.tag-oui{background:#E4F2E6;color:#2f7a3f}
.tag-non{background:#FBE7E5;color:#a23a2e}
.tag-serfaty{background:#EAF0F7;color:#3a5a82}
.tag-cohen{background:#F6ECE2;color:#9a6b3f}

/* boutons back-office */
.btn-sm{
  font-family:inherit;
  font-size:.82rem;
  line-height:1.2;
  padding:8px 13px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s;
}
/* aligne Modifier / Supprimer dans la colonne Actions */
table.data td form{display:contents}
.btn-sm:hover{background:var(--ivory)}
.btn-gold{background:var(--gold);border-color:var(--gold-d);color:#fff}
.btn-gold:hover{background:var(--gold-d)}
.btn-danger{color:#a23a2e;border-color:#e3b8b2}
.btn-danger:hover{background:#FBE7E5}

.flash{
  border-radius:10px;
  padding:11px 15px;
  margin-bottom:16px;
  font-size:.9rem;
}
.flash-ok{background:#E4F2E6;border:1px solid #b6d8bb;color:#2f7a3f}
.flash-err{background:#FBE7E5;border:1px solid #e3b8b2;color:#a23a2e}

.share-link{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
}
.share-link code{
  flex:1;
  min-width:180px;
  font-size:.82rem;
  word-break:break-all;
  color:var(--gold-d);
}

.empty{
  text-align:center;
  color:var(--ink-soft);
  padding:32px 12px;
  font-style:italic;
}

/* cartes invité — affichées en mode portrait sur mobile */
.cards-mobile{display:none}
.gcard{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:var(--ink);
}
.gcard:active{background:var(--ivory)}
.gcard-name{font-weight:600;font-size:.95rem;line-height:1.3}
.gcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gcard-nb{font-size:.8rem;color:var(--ink-soft)}
.gcard-edit{font-size:.74rem;color:var(--gold-d);letter-spacing:.03em}
.cards-pager{
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:16px;
}
.cards-pager .pager-info{font-size:.85rem;color:var(--ink-soft)}
.cards-pager button[disabled]{opacity:.4;cursor:default}

/* modale de confirmation */
.modal-back{
  position:fixed;inset:0;
  background:rgba(53,46,38,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:100;
}
.modal-back.open{display:flex}
.modal{
  background:var(--white);
  border-radius:15px;
  padding:26px;
  max-width:380px;
  width:100%;
  text-align:center;
}
.modal h3{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--ink);
  margin-bottom:8px;
}
.modal p{color:var(--ink-soft);font-size:.92rem;margin-bottom:18px}
.modal .row{display:flex;gap:10px;justify-content:center}

/* formulaires back-office en grille */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.form-grid .full{grid-column:1/-1}
.form-grid label{
  display:block;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-d);
  margin-bottom:6px;
}
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:.95rem;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  background:var(--white);
  color:var(--ink);
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{outline:none;border-color:var(--gold)}
@media(max-width:520px){
  .form-grid{grid-template-columns:1fr}
}

/* ================================================================
   ADAPTATION MOBILE — espaces famille & admin (<= 640px)
   Ces règles ne s'appliquent qu'aux petits écrans : les grands
   écrans gardent l'affichage classique.
   ================================================================ */
@media(max-width:640px) and (orientation:portrait){

  .admin-wrap{padding:14px 11px 52px}
  .card-panel{padding:16px 14px;margin-bottom:14px}
  .card-panel h2{font-size:1.2rem}

  /* --- Barre de navigation --- */
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:15px 15px;
  }
  .topbar h1{font-size:1.35rem}
  .topbar nav{width:100%}
  .topbar nav a,
  .topbar nav form{flex:1 1 auto}
  .topbar nav a,
  .topbar nav form button{
    padding:11px 12px;
    border-color:var(--line);
  }
  .topbar nav a{text-align:center}
  .topbar nav a.active{border-color:var(--gold-d)}
  .topbar nav form button{width:100%}

  /* --- Barre de filtres / recherche --- */
  .toolbar{gap:8px}
  .toolbar input{flex:1 1 100%;min-width:0}
  .toolbar select{flex:1 1 calc(50% - 4px)}
  .toolbar .who{flex:1 1 100%;text-align:center;margin-top:2px}

  /* --- Liste d'invités : cartes 2 colonnes, tableau masqué --- */
  #guest-table{display:none}
  .cards-mobile{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .cards-pager{display:flex}

  /* --- Autres tableaux transformés en cartes --- */
  .table-scroll{overflow:visible}
  table.data thead{display:none}
  table.data,
  table.data tbody,
  table.data tr,
  table.data td{display:block;width:100%}
  table.data tr{
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:12px;
    padding:4px 8px;
    background:var(--white);
  }
  table.data tbody tr:hover{background:var(--white)}
  table.data td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:11px 6px;
    border:none;
    white-space:normal;
    text-align:end;
  }
  table.data td + td{border-top:1px solid var(--ivory)}
  table.data td::before{
    content:attr(data-label);
    flex:none;
    font-size:.68rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--ink-soft);
    text-align:start;
  }
  table.data td.msg{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    text-align:start;
  }
  table.data td[data-label="Actions"]{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  table.data td[data-label="Actions"] > div{display:flex;gap:8px}
  table.data td[data-label="Actions"] > div > a{flex:1}
  table.data td[data-label="Actions"] > div > form{flex:1;display:flex}
  table.data td[data-label="Actions"] > div > form button{flex:1}

  /* --- Statistiques --- */
  .stats-grid{grid-template-columns:repeat(2,1fr)}

  /* --- Connexion --- */
  .login-box{padding:28px 22px}
}