:root{
  --ivory:#F6EAD7;
  --cream:#EFE8DC;
  --paper:#FBF8F1;
  --olive:#2F3F24;
  --olive-mid:#6F7A4B;
  --sage:#A8AD88;
  --gold:#9A8A4A;
  --ink:#1F1F1A;
  --warm-grey:#B8B1A4;
  --terracotta:#B86A4F; /* discreet Moroccan accent */
  --accent:#A63446;      /* accent grenat */

  --serif:"Cormorant Garamond", "EB Garamond", Garamond, serif;
  --script:"Allura", "Pinyon Script", cursive;
  --caps:"Cinzel", "Cormorant Garamond", serif;

  --serif-ar:"Amiri", "Cormorant Garamond", serif;
  --script-ar:"Aref Ruqaa", "Amiri", serif;
  --caps-ar:"Reem Kufi", "Amiri", serif;

  --gutter:24px;
  --shadow-card: 0 24px 60px -28px rgba(47,63,36,0.35), 0 4px 14px -8px rgba(47,63,36,0.18);
}
@media (min-width: 768px){ :root{ --gutter:48px; } }
@media (min-width: 1200px){ :root{ --gutter:80px; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{
  margin:0; padding:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Subtle grain on the whole page (premium paper) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(rgba(47,63,36,0.025) 1px, transparent 1.4px),
    radial-gradient(rgba(154,138,74,0.02) 1px, transparent 1.4px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode:multiply;
}

/* ───────────────── typography ───────────────── */
.eyebrow{ font-family:var(--caps); font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent);}
.caps{ font-family:var(--caps); letter-spacing:0.22em; text-transform:uppercase; }
.script{ font-family:var(--script); color:var(--olive); line-height:0.95; }
.serif-italic{ font-style:italic; }
h1,h2,h3,h4{ margin:0; font-weight:500; color:var(--olive); }
p{ margin:0; }
a{ color:var(--accent); text-decoration:none; transition:color .3s ease; }
a:hover{ color:var(--olive); }

.section-title{ font-family:var(--caps); font-weight:500; font-size:clamp(22px, 4vw, 34px); letter-spacing:0.22em; text-transform:uppercase; color:var(--olive); }
.section-name{ font-family:var(--script); font-size:clamp(48px, 9vw, 88px); color:var(--olive); }

/* ───────────────── nav ───────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.nav.scrolled{
  background:rgba(247,243,234,0.86);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  padding:12px var(--gutter);
  box-shadow:0 1px 0 rgba(47,63,36,0.06);
}
.nav .brand{ display:flex; align-items:center; gap:10px; font-family:var(--caps); font-size:11px; letter-spacing:0.28em; color:var(--olive); text-transform:uppercase;}
.nav .brand img{ height:32px; width:auto; transition:height .35s ease;}
.nav.scrolled .brand img{ height:26px;}
.nav .links{ display:none; }
@media (min-width:880px){
  .nav .links{ display:flex; gap:28px; align-items:center;}
  .nav .links a{ font-family:var(--caps); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--olive); text-decoration:none; position:relative; padding:6px 2px;}
  .nav .links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.65,0,.35,1);}
  .nav .links a:hover::after{ transform:scaleX(1);}
}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid var(--olive); border-radius:999px;
  font-family:var(--caps); font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--olive); background:transparent; text-decoration:none; cursor:pointer;
  transition: background .3s, color .3s;
}
.nav-cta:hover{ background:var(--olive); color:var(--ivory);}

.burger{
  display:inline-flex; flex-direction:column; gap:5px; width:34px; height:34px;
  align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
}
.burger span{ width:22px; height:1px; background:var(--olive); transition:transform .3s, opacity .3s;}
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg);}
.burger.open span:nth-child(2){ opacity:0;}
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg);}
@media (min-width:880px){ .burger{ display:none; } }

.mobile-drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition: transform .55s cubic-bezier(.86,0,.07,1);
}
.mobile-drawer.open{ transform:translateY(0); }
.mobile-drawer a{
  font-family:var(--caps); font-size:18px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--olive); text-decoration:none; opacity:0; transform:translateY(20px);
  transition: opacity .5s, transform .5s;
}
.mobile-drawer.open a{ opacity:1; transform:none; }
.mobile-drawer.open a:nth-child(1){ transition-delay:.15s;}
.mobile-drawer.open a:nth-child(2){ transition-delay:.22s;}
.mobile-drawer.open a:nth-child(3){ transition-delay:.29s;}
.mobile-drawer.open a:nth-child(4){ transition-delay:.36s;}
.mobile-drawer.open a:nth-child(5){ transition-delay:.43s;}
.mobile-drawer .script{ font-family:var(--script); font-size:54px; color:var(--olive); margin-top:24px;}

/* ───────────────── hero ───────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:120px var(--gutter) 60px;
  overflow:hidden;
  background-color:var(--ivory);
  background-image:url('assets/hero-couple.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:150% auto;
}
.hero-copy{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.hero-mobile-img{ display:none; }
@media (min-width:880px){
  .hero{
    flex-direction:column; align-items:flex-start; justify-content:center;
    text-align:left;
    padding-left:clamp(48px,8vw,140px); padding-right:clamp(24px,4vw,64px);
    background-position:right -20px center;
    background-size:auto 78%;
  }
  .hero-copy{ align-items:flex-start; max-width:440px; }
}
@media (min-width:880px){
  html[dir="rtl"] .hero{ padding-left:clamp(24px,4vw,64px); padding-right:clamp(48px,8vw,140px); align-items:flex-end; text-align:right; background-position:left -20px center; }
  html[dir="rtl"] .hero-copy{ align-items:flex-end; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero-monogram{
  width:clamp(140px, 28vw, 240px);
  height:auto;
  opacity:0; transform:translateY(18px) scale(0.96);
  transition: opacity 1.1s ease .2s, transform 1.2s cubic-bezier(.16,1,.3,1) .2s;
}
.hero.in .hero-monogram{ opacity:1; transform:none;}

.hero-eyebrow{ margin-top:0; color:var(--gold); opacity:0; transform:translateY(12px); transition: opacity .9s ease .5s, transform .9s ease .5s;}
.hero.in .hero-eyebrow{ opacity:1; transform:none;}
.hero-eyebrow{ letter-spacing:0.18em; max-width:420px; line-height:1.7; font-size:10.5px; color:var(--accent);}

.hero-overline{ font-family:var(--script); font-size:clamp(42px, 6.4vw, 76px); line-height:0.95; letter-spacing:normal; text-transform:none; color:var(--olive); margin-top:6px; opacity:0; transform:translateY(12px); transition:opacity .9s ease .6s, transform .9s ease .6s;}
.hero.in .hero-overline{ opacity:1; transform:none;}
.hero-invite{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.9vw,21px); line-height:1.5; color:var(--olive); max-width:440px; margin-top:18px; opacity:0; transform:translateY(10px); transition:opacity .9s ease 1.1s, transform .9s ease 1.1s;}
.hero.in .hero-invite{ opacity:1; transform:none;}
html[lang="ar"] .hero-overline{ font-family:var(--script-ar); letter-spacing:0;}
html[lang="ar"] .hero-invite{ font-family:var(--serif-ar); font-style:normal;}

.hero-script{
  font-family:var(--script); color:var(--olive);
  font-size:clamp(38px, 11vw, 76px);
  line-height:0.95;
  max-width:100%;
  margin: 14px 0 6px;
  opacity:0; transform:translateY(20px);
  transition: opacity 1.1s ease .7s, transform 1.2s cubic-bezier(.16,1,.3,1) .7s;
}
.hero.in .hero-script{ opacity:1; transform:none;}

.hero-rule{ display:flex; align-items:center; gap:14px; margin:18px 0 22px; width:min(360px, 70vw); color:var(--olive); opacity:0; transition:opacity 1s ease .9s;}
.hero.in .hero-rule{ opacity:1;}
.hero-rule .line{ flex:1; height:1px; background:var(--olive); opacity:0.7;}
.hero-rule svg{ width:14px; height:14px; color:var(--olive);}

.hero-meta{
  display:flex; align-items:center; gap:20px;
  margin-top:16px;
  flex-wrap:wrap; justify-content:center;
  font-family:var(--caps); font-size:12px; letter-spacing:0.34em; color:var(--olive-mid); text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .9s ease 1.1s, transform .9s ease 1.1s;
}
.hero.in .hero-meta{ opacity:1; transform:none;}
.hero-meta .dot{ width:3px; height:3px; background:var(--sage); opacity:0.9; border-radius:50%;}
.hero-meta strong{ font-weight:500;}

.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--caps); font-size:10px; letter-spacing:0.32em; color:var(--olive-mid); z-index:2;
  opacity:0; transition:opacity 1s ease 1.4s; text-transform:uppercase;
}
.hero.in .scroll-cue{ opacity:0.9;}
.scroll-cue::after{
  content:""; width:1px; height:38px; background:var(--sage); opacity:0.8;
  animation: scrollGrow 1.8s ease-in-out infinite alternate;
}
@keyframes scrollGrow{ from{ transform:scaleY(0.25); opacity:0.2;} to{ transform:scaleY(1); opacity:0.9;} }

/* ───────────────── sections ───────────────── */
section{ position:relative; z-index:2; padding: clamp(60px, 10vw, 120px) var(--gutter); }
.section-head{ text-align:center; margin-bottom: clamp(40px, 6vw, 72px);}
.section-num{ font-family:var(--caps); font-size:11px; letter-spacing:0.32em; color:var(--accent); text-transform:uppercase; }
.section-head .section-name{ margin: 6px 0 4px; color:var(--olive); }
.section-head .section-title{ color:var(--olive);}
.section-rule{ display:flex; align-items:center; gap:14px; max-width:280px; margin:20px auto 0; color:var(--olive); opacity:0.75;}
.section-rule .line{ flex:1; height:1px; background:var(--olive); opacity:0.6;}
.section-rule svg{ width:12px; height:12px; color:var(--accent);}

.section-alt{ background:var(--cream); }
#programme{ background:#F8ECD9; }

/* decorative watercolour branches / taches */
.deco{ position:absolute; z-index:-1; pointer-events:none; user-select:none; height:auto; opacity:0.72; }
.vibe-section, #programme, #logement, #rsvp, .footer{ overflow:hidden; }
.vibe-section, #logement{ position:relative; }
.footer{ position:relative; isolation:isolate; }
@media (max-width:760px){ .deco{ opacity:0.4; max-width:40vw; } }
.section-dark{ background:var(--olive); color:var(--ivory);}
.section-dark .section-num{ color:rgba(247,243,234,0.6);}
.section-dark .section-name, .section-dark .section-title{ color:var(--ivory);}
.section-dark .section-rule{ color:var(--ivory);}
.section-dark .section-rule .line{ background:var(--ivory);}

/* ───────────────── vibe ───────────────── */
.vibe{ text-align:center; max-width:840px; margin:0 auto; }
.vibe .lede{
  font-family:var(--serif); font-style:italic; color:var(--olive);
  font-size: clamp(20px, 2.6vw, 30px); line-height:1.45;
  max-width:680px; margin:0 auto;
}
.vibe-image{
  position:relative; left:50%; transform:translateX(-50%);
  width:min(1200px, 92vw);
  margin: clamp(40px,6vw,64px) 0 4px;
  overflow:hidden; border-radius:3px;
  box-shadow: var(--shadow-card);
}
.vibe-image img{
  display:block; width:100%; height:auto;
  aspect-ratio: 16 / 7; object-fit:cover;
}
.vibe-words{
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center;
  margin-top: clamp(36px, 6vw, 60px);
}
.vibe-word{
  display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--caps); font-size:13px; letter-spacing:0.3em; color:var(--olive); text-transform:uppercase;
}
.vibe-word .roman{ font-style:italic; color:var(--gold); font-family:var(--serif); letter-spacing:0.1em; font-size:14px;}

/* ───────────────── programme ───────────────── */
.programme{ max-width:1100px; margin:0 auto;}
.moments{ display:grid; grid-template-columns: 1fr; gap:18px; }
@media (min-width:720px){ .moments{ grid-template-columns: repeat(3, 1fr); gap:24px; max-width:940px; margin:0 auto; } }
.moment-card{
  position:relative;
  background:var(--paper);
  border:0.75px solid rgba(47,63,36,0.18);
  padding: 30px 24px 28px;
  display:flex; flex-direction:column; gap:12px;
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .35s ease;
  overflow:hidden;
}
.moment-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:var(--olive);}
.moment-card .num{ font-family:var(--caps); font-size:11px; letter-spacing:0.34em; color:var(--gold);}
.moment-card h3{ font-family:var(--caps); font-size:22px; letter-spacing:0.18em; text-transform:uppercase; color:var(--olive); margin:6px 0 0;}
.moment-card .when{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--olive-mid);}
.moment-card .desc{ font-size:15px; color:var(--ink); line-height:1.55; margin-top:6px;}
.moment-card .icon{ position:absolute; right:22px; top:22px; width:34px; height:34px; opacity:0.7;}
.moment-card .corner{ position:absolute; bottom:-22px; right:-22px; width:120px; height:120px; opacity:0.18;}

/* dark variant — deep olive background, ivory text */
.moment-card.dark{
  background: var(--olive);
  border-color: var(--olive);
  color: var(--ivory);
}
.moment-card.dark h3{ color: var(--ivory); }
.moment-card.dark .num{ color: var(--gold); }
.moment-card.dark .when{ color: rgba(247,243,234,0.7); }
.moment-card.dark .desc{ color: rgba(247,243,234,0.88); }
.moment-card.dark .icon svg{ stroke: var(--ivory); opacity:0.85; }
.moment-card.dark .corner svg{ stroke: var(--sage); }
.moment-card.dark .corner svg ellipse{ fill: rgba(168,173,136,0.45); stroke: var(--sage); }
.moment-card.dark .corner{ opacity:0.32; }
.moment-card.dark:hover{
  border-color: var(--gold);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.5);
}
/* subtle ornamental hairline on dark cards */
.moment-card.dark::before{
  content:""; position:absolute; left:24px; right:24px; top:0;
  height:1px; background: linear-gradient(to right, transparent, rgba(247,243,234,0.35), transparent);
}

/* timeline (la grande soirée) */
.timeline-wrap{ margin-top:64px; }
.address-block{ text-align:center; max-width:640px; margin:56px auto 0; padding:0 var(--gutter); }
.address-label{ font-family:var(--caps); font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.address-text{ font-family:var(--caps); font-weight:500; font-size:16px; letter-spacing:0.14em; text-transform:uppercase; line-height:1.7; color:var(--olive); }
html[lang="ar"] .address-label{ font-family:var(--caps-ar); letter-spacing:0; }
html[lang="ar"] .address-text{ font-family:var(--serif-ar); letter-spacing:0; text-transform:none; }
.samedi-layout{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; max-width:1000px; margin:0 auto; }
.samedi-image{ display:flex; justify-content:center; }
.samedi-image img{ display:block; width:100%; max-width:420px; height:auto; }
.samedi-head{ text-align:center; }
@media (min-width:880px){
  .samedi-layout{ grid-template-columns:minmax(0,0.85fr) 1fr; gap:clamp(40px,5vw,72px); }
  .samedi-image img{ max-width:100%; }
  .samedi-head{ text-align:left; }
}
.timeline{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
  max-width:760px; margin:0 auto;
}
.samedi-content .timeline{ max-width:none; margin:0; }
.timeline::before{
  content:""; position:absolute;
  left:14px; top:0; bottom:0; width:1px;
  background: linear-gradient(to bottom, transparent, rgba(47,63,36,0.4) 6%, rgba(47,63,36,0.4) 94%, transparent);
}
.t-step{
  position:relative; padding-left:46px; padding-top:6px; padding-bottom:8px;
}
.t-step .roman{
  position:absolute; left:0; top:0; width:30px; height:30px;
  background:var(--ivory); border:1px solid var(--olive); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--caps); font-size:11px; letter-spacing:0.1em; color:var(--olive);
}
.t-step h4{ font-family:var(--caps); font-size:14px; letter-spacing:0.24em; text-transform:uppercase; color:var(--olive); margin:0 0 4px;}
.t-step p{ font-size:14.5px; color:var(--ink); line-height:1.55;}

/* spaces (3 espaces) */
.spaces{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:60px;}
@media (min-width:880px){ .spaces{ grid-template-columns: repeat(3, 1fr);} }
.space-card{
  padding: 28px 24px;
  border:0.75px solid rgba(47,63,36,0.25);
  background:var(--ivory);
  position:relative; overflow:hidden;
  transition: background .4s ease;
}
.space-card .roman{ font-family:var(--caps); font-size:11px; letter-spacing:0.3em; color:var(--gold);}
.space-card h4{ font-family:var(--caps); font-size:15px; letter-spacing:0.22em; text-transform:uppercase; color:var(--olive); margin:6px 0 8px;}
.space-card p{ font-size:14.5px; color:var(--ink); line-height:1.55;}
.space-card:hover{ background:var(--paper);}

/* ───────────────── logement ───────────────── */
.logement{ max-width:1200px; margin:0 auto; }
.filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.filter-pill{
  font-family:var(--caps); font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--olive); border-radius:999px;
  background:transparent; color:var(--olive); cursor:pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.filter-pill:hover{ background:rgba(47,63,36,0.06);}
.filter-pill.active{ background:var(--olive); color:var(--ivory);}

.lodging-grid{
  display:grid; grid-template-columns: 1fr; gap:22px;
}
@media (min-width:720px){ .lodging-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1100px){ .lodging-grid{ grid-template-columns: repeat(3, 1fr); } }

.lodging-card{
  position:relative; background:var(--paper);
  border:0.75px solid rgba(47,63,36,0.2);
  overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .35s;
}
.lodging-card:hover{ transform:translateY(-6px); border-color:var(--olive); box-shadow:var(--shadow-card);}
.lodging-card.selected{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--shadow-card);}

.lodging-photo{
  aspect-ratio: 4/3; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--sage), var(--olive-mid));
}
.lodging-photo svg{ position:absolute; inset:0; width:100%; height:100%;}
.lodging-badge{
  position:absolute; top:14px; left:14px;
  padding:6px 12px; background:rgba(247,243,234,0.92); backdrop-filter:blur(6px);
  font-family:var(--caps); font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--olive);
}
.lodging-fav{
  position:absolute; top:14px; right:14px; width:36px; height:36px;
  background:rgba(247,243,234,0.92); backdrop-filter:blur(6px);
  border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s;
}
.lodging-fav:hover{ transform:scale(1.08);}
.lodging-fav svg{ width:16px; height:16px; color:var(--olive); transition: fill .3s;}
.lodging-card.selected .lodging-fav svg{ fill:var(--gold); color:var(--gold);}

.lodging-info{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:8px;}
.lodging-info .type{ font-family:var(--caps); font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);}
.lodging-info h3{ font-family:var(--caps); font-size:18px; letter-spacing:0.16em; text-transform:uppercase; color:var(--olive); margin:2px 0 6px;}
.lodging-info .meta{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--olive-mid); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;}
.lodging-info .meta .sep{ width:3px; height:3px; background:var(--olive-mid); border-radius:50%;}
.lodging-info .desc{ font-size:14.5px; color:var(--ink); line-height:1.5; margin-top:6px;}
.lodging-info .price{ margin-top:14px; display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid rgba(47,63,36,0.18);}
.lodging-info .price .amount{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--olive);}
.lodging-info .price .unit{ font-family:var(--caps); font-size:10px; letter-spacing:0.3em; color:var(--olive-mid); text-transform:uppercase;}
.lodging-info .price a{
  font-family:var(--caps); font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--olive); text-decoration:none; border-bottom:1px solid var(--olive); padding-bottom:2px;
}

/* ───────────────── RSVP ───────────────── */
.rsvp{ max-width:680px; margin:0 auto; }
.form-card{
  background:var(--paper);
  border:0.75px solid rgba(47,63,36,0.22);
  padding: clamp(28px, 5vw, 56px);
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-card);
}
.form-card::before, .form-card::after{
  content:""; position:absolute; width:24px; height:24px;
}
.form-card::before{ top:-1px; left:-1px; border-top:1px solid var(--olive); border-left:1px solid var(--olive);}
.form-card::after{ top:-1px; right:-1px; border-top:1px solid var(--olive); border-right:1px solid var(--olive);}
.form-card-corners-b{ position:absolute; left:0; right:0; bottom:0;}
.form-card-corners-b i{ position:absolute; width:24px; height:24px;}
.form-card-corners-b i:nth-child(1){ left:-1px; bottom:-1px; border-bottom:1px solid var(--olive); border-left:1px solid var(--olive);}
.form-card-corners-b i:nth-child(2){ right:-1px; bottom:-1px; border-bottom:1px solid var(--olive); border-right:1px solid var(--olive);}

.steps-indicator{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom: 34px;
}
.step-dot{ width:8px; height:8px; border-radius:50%; background:rgba(47,63,36,0.2); transition: all .4s ease;}
.step-dot.active{ background:var(--olive); width:24px; border-radius:4px;}
.step-dot.done{ background:var(--gold);}

.step{
  display:none;
  animation: stepIn .55s cubic-bezier(.16,1,.3,1) both;
}
.step.active{ display:flex; flex-direction:column; gap:18px;}
@keyframes stepIn{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} }

.step h3{ font-family:var(--caps); font-size:clamp(20px, 3.4vw, 26px); letter-spacing:0.18em; text-transform:uppercase; color:var(--olive); text-align:center; margin-bottom:6px;}
.step .step-lede{ font-style:italic; color:var(--olive-mid); text-align:center; margin-bottom:14px; font-size:16px;}

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--caps); font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--olive);}
.field input, .field textarea, .field select{
  font-family:var(--serif); font-size:17px; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid rgba(47,63,36,0.35);
  padding:12px 0; outline:none; width:100%;
  transition:border-color .3s ease, padding .3s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(31,31,26,0.4); font-style:italic;}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--olive);}
.field.error input, .field.error textarea, .field.error select{ border-color:#9a3b2c;}
.field .err{ color:#9a3b2c; font-size:13px; font-style:italic; min-height:0; transition:min-height .2s;}
.field.error .err{ min-height:18px;}

/* guest list (adults / children) */
.guest-groups{ display:flex; flex-direction:column; gap:28px; }
.guest-group-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.guest-group-label{ font-family:var(--caps); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--olive); }
.guest-count{ font-family:var(--caps); font-size:11px; color:var(--paper); background:var(--olive); border-radius:999px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.guest-none{ font-style:italic; color:var(--olive-mid); font-size:14px; margin:0 0 12px; }
.guest-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:center; margin-bottom:12px; }
.guest-row input{ font-family:var(--serif); font-size:16px; color:var(--ink); background:transparent; border:none; border-bottom:1px solid rgba(47,63,36,0.35); padding:9px 0; outline:none; width:100%; transition:border-color .3s ease; }
.guest-row input::placeholder{ color:rgba(31,31,26,0.4); font-style:italic; }
.guest-row input:focus{ border-color:var(--olive); }
.guest-remove{ width:28px; height:28px; border:1px solid rgba(47,63,36,0.3); background:transparent; border-radius:50%; color:var(--olive-mid); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s, color .25s, border-color .25s; }
.guest-remove:hover{ background:var(--olive); color:var(--paper); border-color:var(--olive); }
.guest-add{ font-family:var(--caps); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--olive); background:transparent; border:1px dashed rgba(47,63,36,0.4); padding:10px 18px; cursor:pointer; transition:background .25s, color .25s, border-style .25s; }
.guest-add:hover{ background:var(--olive); color:var(--paper); border-style:solid; }
html[lang="ar"] .guest-group-label, html[lang="ar"] .guest-add{ font-family:var(--caps-ar); letter-spacing:0; }

.row{ display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:520px){ .row.two{ grid-template-columns:1fr 1fr; gap:20px;} }

.counter{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--olive); width:max-content;
}
.counter button{
  width:44px; height:44px; background:transparent; border:none;
  font-size:20px; color:var(--olive); cursor:pointer; transition: background .25s;
  font-family:var(--serif);
}
.counter button:hover{ background:rgba(47,63,36,0.06);}
.counter .val{
  min-width:54px; text-align:center; font-family:var(--caps); font-size:16px; letter-spacing:0.18em; color:var(--olive);
  border-left:1px solid var(--olive); border-right:1px solid var(--olive); padding:11px 0;
}

.diet-people{ display:flex; flex-direction:column; gap:26px; }
.person-diet{ padding:18px 20px; background:var(--ivory); border:0.75px solid rgba(47,63,36,0.14); }
.person-diet-name{ font-family:var(--caps); font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--olive); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(47,63,36,0.14); }
html[lang="ar"] .person-diet-name{ font-family:var(--caps-ar); letter-spacing:0; }
.diet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:520px){ .diet-grid{ grid-template-columns:repeat(3, 1fr);} }
.diet-pill{
  position:relative; cursor:pointer; user-select:none;
  padding:14px 12px; border:1px solid rgba(47,63,36,0.3);
  font-family:var(--caps); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--olive); text-align:center; background:transparent;
  transition: all .3s ease;
}
.diet-pill input{ position:absolute; opacity:0; pointer-events:none;}
.diet-pill:hover{ background:rgba(47,63,36,0.05);}
.diet-pill.checked{ background:var(--olive); color:var(--ivory); border-color:var(--olive);}
.diet-pill .check{ position:absolute; top:6px; right:6px; width:14px; height:14px; opacity:0; transition:opacity .3s;}
.diet-pill.checked .check{ opacity:1;}

.step-actions{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top: 12px;}
.btn-ghost{
  background:transparent; border:none; color:var(--olive-mid);
  font-family:var(--caps); font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  cursor:pointer; padding:10px 0; transition:color .3s;
}
.btn-ghost:hover{ color:var(--olive);}
.btn-ghost:disabled{ opacity:0.3; cursor:default;}
.btn-primary{
  background:var(--olive); color:var(--ivory); border:1px solid var(--olive);
  font-family:var(--caps); font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  padding:14px 30px; cursor:pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
  display:inline-flex; align-items:center; gap:10px;
}
.btn-primary:hover{ background:var(--ink); transform:translateY(-2px); box-shadow: 0 12px 28px -16px rgba(47,63,36,0.5);}
.btn-primary svg{ width:14px; height:14px;}

/* success */
.success{ display:none; text-align:center; flex-direction:column; align-items:center; gap:18px; padding: 20px 0;}
.success.active{ display:flex; animation: stepIn .8s cubic-bezier(.16,1,.3,1) both;}
.success .heart-wrap{ width:120px; height:120px; position:relative;}
.success .heart-wrap svg{ width:100%; height:100%;}
.success .heart-wrap path{ stroke-dasharray:200; stroke-dashoffset:200; animation: drawSlow 2s ease forwards .2s;}
@keyframes drawSlow{ to{ stroke-dashoffset:0;} }
.success h3{ font-family:var(--script); font-size:48px; color:var(--olive); }
.success p{ max-width:480px; font-size:17px; color:var(--ink); }

/* ───────────────── reveal-on-scroll ───────────────── */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s;}
.reveal.d2{ transition-delay:.16s;}
.reveal.d3{ transition-delay:.24s;}
.reveal.d4{ transition-delay:.32s;}
.reveal.d5{ transition-delay:.40s;}
.reveal.d6{ transition-delay:.48s;}

/* ───────────────── footer ───────────────── */
.footer{
  background:var(--olive); color:var(--ivory);
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(40px, 5vw, 60px);
  text-align:center;
  position:relative; overflow:hidden;
}
.footer .script{ color:var(--ivory); font-size: clamp(48px, 9vw, 84px); margin-bottom:18px;}
.footer .footer-rule{ display:flex; align-items:center; gap:14px; max-width:280px; margin:18px auto 28px; color:var(--ivory);}
.footer .footer-rule .line{ flex:1; height:1px; background:var(--ivory); opacity:0.6;}
.footer .footer-rule svg{ width:14px; height:14px; color:var(--ivory);}
.footer .meta{ font-family:var(--caps); font-size:11px; letter-spacing:0.32em; text-transform:uppercase; opacity:0.85;}
.footer .credit{ margin-top: clamp(40px, 5vw, 70px); font-family:var(--caps); font-size:9.5px; letter-spacing:0.32em; opacity:0.45;}

/* utility */
.center{ text-align:center;}
.no-scroll{ overflow:hidden;}


/* ════════════════════════════════════════════════════════════════
   SPLASH SCREEN — arrival animation
   ════════════════════════════════════════════════════════════════ */
.splash{
  position:fixed; inset:0; z-index:1000;
  background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 0 24px;
  cursor:pointer;
  overflow:hidden;
  transition: opacity .9s ease, visibility .9s;
}
.splash.fade-out{ opacity:0; visibility:hidden; pointer-events:none; }

/* paper texture on splash */
.splash::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(47,63,36,0.03) 1px, transparent 1.4px),
    radial-gradient(rgba(154,138,74,0.025) 1px, transparent 1.4px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
}

.splash-leaf{ position:absolute; pointer-events:none; opacity:0.85; }
.splash-leaf path, .splash-leaf line{
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: splashDraw 2s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.splash-leaf ellipse, .splash-leaf circle{
  opacity:0;
  animation: splashFadeIn .9s ease forwards;
}
.splash-leaf.delay ellipse, .splash-leaf.delay circle{ animation-delay:.9s; }
.splash-leaf:not(.delay) ellipse, .splash-leaf:not(.delay) circle{ animation-delay:.7s; }

@keyframes splashDraw{ to{ stroke-dashoffset:0; } }
@keyframes splashFadeIn{ to{ opacity:1; } }

.splash-leaf.tl{ top:-20px; left:-30px; width:240px; }
.splash-leaf.br{ bottom:-20px; right:-30px; width:280px; transform: rotate(180deg);}
.splash-leaf.tr{ top:20px; right:-40px; width:160px; transform: rotate(70deg); opacity:0.5;}
.splash-leaf.bl{ bottom:30px; left:-30px; width:180px; transform: rotate(-110deg); opacity:0.5;}
@media (min-width:880px){
  .splash-leaf.tl{ width:360px;}
  .splash-leaf.br{ width:400px;}
  .splash-leaf.tr{ width:240px;}
  .splash-leaf.bl{ width:260px;}
}

.splash-eyebrow{
  font-family:var(--caps); font-size:11px; letter-spacing:0.38em; text-transform:uppercase; color:var(--olive);
  opacity:0; transform: translateY(8px);
  animation: splashUp .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}
html[lang="ar"] .splash-eyebrow{ font-family: var(--caps-ar); letter-spacing:0; text-transform:none; font-size:13px;}

.splash-monogram-wrap{
  position:relative;
  margin: 28px 0 14px;
  display:flex; align-items:center; justify-content:center;
}
.splash-monogram{
  width: clamp(140px, 26vw, 220px);
  height:auto;
  opacity:0; transform: scale(.85) translateY(12px);
  filter: blur(6px);
  animation: splashMono 1.4s cubic-bezier(.22,1,.36,1) .35s forwards;
}
@keyframes splashMono{ to{ opacity:1; transform:none; filter:none; } }

/* Ornamental circle that pulses around the monogram */
.splash-ring{
  position:absolute; inset:-30px;
  border:0.75px solid var(--olive);
  border-radius:50%;
  opacity:0;
  animation: splashRing 2.5s cubic-bezier(.22,1,.36,1) .9s forwards;
}
.splash-ring.r2{ inset:-58px; opacity:0; animation-delay: 1.1s; }
@keyframes splashRing{
  0%   { opacity:0; transform: scale(.7); }
  60%  { opacity:0.35; }
  100% { opacity:0.18; transform: scale(1); }
}

.splash-script{
  font-family:var(--script); color:var(--olive);
  font-size: clamp(56px, 11vw, 100px);
  line-height:0.95;
  margin: 18px 0 8px;
  opacity:0; transform: translateY(16px);
  animation: splashUp 1.2s cubic-bezier(.22,1,.36,1) 1.1s forwards;
}
html[lang="ar"] .splash-script{
  font-family: var(--script-ar);
  line-height: 1.3;
  font-size: clamp(48px, 10vw, 88px);
}

.splash-rule{
  display:flex; align-items:center; gap:14px;
  width:min(280px, 60vw); margin: 22px auto 18px;
  color:var(--olive);
  opacity:0;
  animation: splashUp .9s ease 1.5s forwards;
}
.splash-rule .line{ flex:1; height:1px; background:var(--olive); opacity:0.6;}
.splash-rule svg{ width:14px; height:14px; color:var(--olive);}

.splash-meta{
  font-family:var(--caps); font-size:11px; letter-spacing:0.34em; text-transform:uppercase; color:var(--olive);
  opacity:0; transform: translateY(8px);
  animation: splashUp .9s cubic-bezier(.22,1,.36,1) 1.7s forwards;
}
html[lang="ar"] .splash-meta{ font-family: var(--caps-ar); letter-spacing:0; text-transform:none; font-size:14px;}

.splash-hint{
  position:absolute; bottom: 36px; left:50%; transform: translateX(-50%);
  font-family:var(--caps); font-size:9.5px; letter-spacing:0.32em; text-transform:uppercase; color:var(--olive-mid);
  opacity:0;
  animation: splashUp .9s ease 2.4s forwards;
}
html[lang="ar"] .splash-hint{ font-family: var(--caps-ar); letter-spacing:0; text-transform:none; font-size:12px;}

@keyframes splashUp{ to{ opacity:1; transform:none; } }


/* ════════════════════════════════════════════════════════════════
   RSVP CELEBRATION — falling olive leaves & hearts on success
   ════════════════════════════════════════════════════════════════ */
.celebration{
  position:fixed; inset:0; pointer-events:none;
  z-index:50;
  overflow:hidden;
}
.confetti{
  position:absolute; top:-40px;
  width:24px; height:24px;
  animation-name: fallSpin;
  animation-timing-function: cubic-bezier(.45,0,.55,1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes fallSpin{
  0%   { transform: translateY(-40px) rotate(0deg);   opacity:0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity:0; }
}


/* ════════════════════════════════════════════════════════════════
   ARABIC / RTL — applied when html[dir="rtl"] / [lang="ar"]
   ════════════════════════════════════════════════════════════════ */
html[lang="ar"]{
  font-family: var(--serif-ar);
}
html[lang="ar"] body{ font-family: var(--serif-ar); font-size:18px; line-height:1.75;}
html[lang="ar"] .serif-italic,
html[lang="ar"] .vibe .lede,
html[lang="ar"] .step-lede,
html[lang="ar"] .lodging-info .meta,
html[lang="ar"] .moment-card .when{ font-style: normal; } /* Arabic doesn't italicise */

html[lang="ar"] .caps,
html[lang="ar"] .eyebrow,
html[lang="ar"] .section-num,
html[lang="ar"] .section-title,
html[lang="ar"] .nav .brand,
html[lang="ar"] .nav .links a,
html[lang="ar"] .nav-cta,
html[lang="ar"] .footer .meta,
html[lang="ar"] .footer .credit,
html[lang="ar"] .vibe-word,
html[lang="ar"] .moment-card .num,
html[lang="ar"] .moment-card h3,
html[lang="ar"] .space-card .roman,
html[lang="ar"] .space-card h4,
html[lang="ar"] .t-step .roman,
html[lang="ar"] .t-step h4,
html[lang="ar"] .timeline-wrap .section-num,
html[lang="ar"] .lodging-badge,
html[lang="ar"] .lodging-info .type,
html[lang="ar"] .lodging-info h3,
html[lang="ar"] .lodging-info .price .unit,
html[lang="ar"] .lodging-info .price a,
html[lang="ar"] .filter-pill,
html[lang="ar"] .step h3,
html[lang="ar"] .field label,
html[lang="ar"] .diet-pill,
html[lang="ar"] .btn-ghost,
html[lang="ar"] .btn-primary,
html[lang="ar"] .counter .val,
html[lang="ar"] .scroll-cue,
html[lang="ar"] .step-actions,
html[lang="ar"] .mobile-drawer a{
  font-family: var(--caps-ar);
  letter-spacing: 0;        /* Arabic should never use letter-spacing — kerning breaks ligatures */
  text-transform: none;
}

html[lang="ar"] .section-title{ font-size: clamp(22px, 4vw, 32px); }

html[lang="ar"] .script,
html[lang="ar"] .hero-script,
html[lang="ar"] .section-name,
html[lang="ar"] .footer .script,
html[lang="ar"] .success h3,
html[lang="ar"] .mobile-drawer .script{
  font-family: var(--script-ar);
  letter-spacing: 0;
  font-style: normal;
}
html[lang="ar"] .hero-script{ font-size: clamp(46px, 11vw, 110px); line-height:1.3;}
html[lang="ar"] .section-name{ font-size: clamp(40px, 7.5vw, 76px); line-height:1.3;}
html[lang="ar"] .footer .script{ font-size: clamp(40px, 7.5vw, 72px); line-height:1.3;}
html[lang="ar"] .success h3{ font-size: 42px; line-height:1.3;}
html[lang="ar"] .mobile-drawer .script{ font-size:46px; line-height:1.3;}

html[lang="ar"] .vibe .lede{
  font-family: var(--serif-ar);
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.7;
}

/* numbers / data — kept in serif Amiri */
html[lang="ar"] .lodging-info .price .amount{ font-family: var(--serif-ar); }

/* —— RTL flips —— */
html[dir="rtl"] body{ direction: rtl; }

html[dir="rtl"] .nav .brand{ flex-direction: row-reverse; }

html[dir="rtl"] .vibe-word{ flex-direction: row-reverse; }

/* mobile drawer items already centered, just keep direction natural */

/* timeline: line moves to the right, items pad-right */
html[dir="rtl"] .timeline::before{ left:auto; right:14px; }
html[dir="rtl"] .t-step{ padding-left:0; padding-right:46px; }
html[dir="rtl"] .t-step .roman{ left:auto; right:0; }

/* lodging badge / fav swap corners */
html[dir="rtl"] .lodging-badge{ left:auto; right:14px; }
html[dir="rtl"] .lodging-fav{ right:auto; left:14px; }

/* form arrows: flip continue/back arrow direction */
html[dir="rtl"] .btn-primary svg{ transform: scaleX(-1); }

/* burger stays the same — three-stripe is symmetric */

/* form corners */
html[dir="rtl"] .form-card::before{ left:auto; right:-1px; border-left:none; border-right:1px solid var(--olive);}
html[dir="rtl"] .form-card::after { right:auto; left:-1px;  border-right:none; border-left:1px solid var(--olive);}
html[dir="rtl"] .form-card-corners-b i:nth-child(1){ left:auto; right:-1px; border-left:none; border-right:1px solid var(--olive);}
html[dir="rtl"] .form-card-corners-b i:nth-child(2){ right:auto; left:-1px;  border-right:none; border-left:1px solid var(--olive);}

/* hero rule arrows / dots already symmetric. olive branch hero is symmetric too. */

/* ════════════════════════════════════════════════════════════════
   Language switch (FR ⇄ AR) in nav
   ════════════════════════════════════════════════════════════════ */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border:1px solid var(--olive); border-radius:999px;
  background:transparent; cursor:pointer;
  font-family:var(--caps); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--olive);
  transition: background .3s, color .3s, transform .3s;
}
.lang-toggle:hover{ background:var(--olive); color:var(--ivory); }
.lang-toggle .globe{ width:13px; height:13px; }
html[lang="ar"] .lang-toggle{ font-family: var(--caps-ar); letter-spacing:0; text-transform:none; font-size:14px;}

.nav-right{ display:flex; align-items:center; gap:14px; }
@media (max-width:879px){ .nav-cta{ display:none !important; } }

/* ════════════════════════════════════════════════════════════════
   Venue info + practical tips (Logement)
   ════════════════════════════════════════════════════════════════ */
.venue-card{
  position:relative; max-width:1040px; margin:0 auto 52px;
  display:flex; align-items:center;
  aspect-ratio: 2000 / 687;
  background-color:#F7F1E6;
  background-image:url('assets/venue-gate.png');
  background-size:cover; background-position:right center; background-repeat:no-repeat;
  border:0.75px solid rgba(47,63,36,0.16); box-shadow:var(--shadow-card);
}
.venue-copy{ text-align:left; max-width:50%; padding:0 clamp(24px,4vw,60px); }
@media (max-width:760px){
  .venue-card{ aspect-ratio:auto; min-height:0; flex-direction:column; align-items:stretch; background-position:center bottom; background-size:118% auto; padding-bottom:190px; }
  .venue-copy{ max-width:100%; text-align:center; padding:34px 24px 0; }
  .venue-line{ margin:0 auto; }
}
html[dir="rtl"] .venue-card{ background-position:left center; }
html[dir="rtl"] .venue-copy{ text-align:right; margin-inline-start:auto; }
.venue-eyebrow{ font-family:var(--caps); font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent); }
.venue-name{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,5vw,46px); color:var(--olive); margin:12px 0 14px; line-height:1.1; }
.venue-line{ color:var(--olive-mid); font-size:16px; max-width:420px; margin:0; line-height:1.6; }

.tips-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; max-width:1000px; margin:0 auto; }
.tip-card{ position:relative; padding:34px 28px; background:var(--ivory); border:0.75px solid rgba(47,63,36,0.16); }
.tip-num{ font-family:var(--caps); font-size:13px; letter-spacing:0.22em; color:var(--sage); }
.tip-card h4{ font-family:var(--serif); font-weight:500; font-size:23px; color:var(--olive); margin:12px 0 10px; }
.tip-card p{ color:var(--olive-mid); font-size:15px; line-height:1.65; }

/* simple practical-info card (airport, distance, hébergement) */
.info-simple{ max-width:680px; margin:26px auto 0; background:var(--paper); border:0.75px solid rgba(47,63,36,0.16); }
.info-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:18px 26px; }
.info-row + .info-row{ border-top:1px solid rgba(47,63,36,0.12); }
.info-icon{ display:inline-flex; color:var(--accent); }
.info-label{ font-family:var(--caps); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--olive); }
.info-value{ font-family:var(--serif); font-size:16px; color:var(--olive-mid); text-align:right; }
html[lang="ar"] .info-label{ font-family:var(--caps-ar); letter-spacing:0; }
html[lang="ar"] .info-value{ font-family:var(--serif-ar); text-align:left; }
@media (max-width:600px){
  .info-row{ grid-template-columns:auto 1fr; gap:10px 14px; }
  .info-value{ grid-column:2; text-align:left; }
}

/* ════════════════════════════════════════════════════════════════
   Single-page RSVP form
   ════════════════════════════════════════════════════════════════ */
.form-single{ display:flex; flex-direction:column; gap:34px; }
.form-block{ padding-bottom:32px; border-bottom:1px solid rgba(47,63,36,0.14); }
.form-block:last-of-type{ border-bottom:none; padding-bottom:0; }
.form-block h3{ font-family:var(--caps); font-size:clamp(19px, 3.2vw, 24px); letter-spacing:0.18em; text-transform:uppercase; color:var(--olive); text-align:center; margin-bottom:6px; }
.form-block .step-lede{ font-style:italic; color:var(--olive-mid); text-align:center; margin-bottom:20px; font-size:16px; }
.form-block .field + .field{ margin-top:16px; }
html[lang="ar"] .form-block h3{ font-family: var(--caps-ar); letter-spacing:0; }

/* ════════════════════════════════════════════════════════════════
   Small-screen (phone) safeguards
   ════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  .hero{ min-height:auto; background-image:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:104px 20px 40px; }
  .hero-copy{ align-items:center; }
  .hero-eyebrow{ max-width:100%; }
  .hero-invite{ max-width:100%; }
  .hero-mobile-img{ display:block; width:100%; max-width:420px; height:auto; margin:26px auto 0; }
  .scroll-cue{ position:static; transform:none; margin:30px auto 0; bottom:auto; left:auto; }
  .address-text{ font-size:14px; letter-spacing:0.1em; }
  .venue-name{ font-size:clamp(26px,9vw,38px); }
  .diet-grid{ grid-template-columns:1fr 1fr; }
  .guest-row{ grid-template-columns:1fr 1fr auto; gap:10px; }
  .row.two{ grid-template-columns:1fr; }
  .info-value{ font-size:15px; }
  .moment-card, .tip-card, .person-diet{ min-width:0; }
}
@media (max-width:400px){
  .hero-script{ white-space:normal; }
  .diet-grid{ grid-template-columns:1fr; }
  .guest-row{ grid-template-columns:1fr 1fr; }
  .guest-row .guest-remove{ grid-column:2; justify-self:end; }
}