/* =========================================================
   Gâteaux Mélissa Julia — Design tokens
   Holst palette: #4B0F1E #6D1D32 #8E2B44 #B23C59 #CC5671 #E07A94 #F7D6DC
   ========================================================= */
:root {
  /* Holst palette */
  --wine-900: #4B0F1E;
  --wine-800: #6D1D32;
  --wine-700: #8E2B44;
  --wine-600: #B23C59;
  --wine-500: #CC5671;
  --wine-400: #E07A94;
  --wine-100: #F7D6DC;
  /* derived from the palette: one deeper shade (footer) and one lighter tint (page bg) */
  --wine-950: #330A15;
  --wine-50:  #FCEFF2;
  --white:    #FFFFFF;

  /* Semantic */
  --bg: var(--wine-50);
  --text: var(--wine-800);
  --text-muted: var(--wine-700);
  --heading: var(--wine-900);
  --text-on-dark: #FCEFF2;
  --muted-on-dark: rgba(247, 214, 220, .8);
  --line-on-dark: rgba(247, 214, 220, .16);
  --primary: var(--wine-600);
  --primary-hover: var(--wine-700);
  --focus: var(--wine-400);

  /* Type */
  /* Fonts — one set per language */
  --font-heading-fr: 'Playfair Display', serif;
  --font-script-fr: 'Great Vibes', cursive;
  --font-body-fr: 'Poppins', sans-serif;
  --font-heading-ar: 'El Messiri', serif;
  --font-script-ar: 'Aref Ruqaa', serif;
  --font-body-ar: 'Cairo', sans-serif;
  /* Active set used by components (Arabic by default; switched under html[lang="fr"]) */
  --font-display: var(--font-heading-ar);
  --font-body: var(--font-body-ar);
  --font-script: var(--font-script-ar);
  --font-latin: var(--font-heading-fr);

  /* Spacing / shape */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 128px);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --shadow-soft: 0 18px 40px -18px rgba(75, 15, 30, .28);
  --shadow-card: 0 2px 6px rgba(75, 15, 30, .05), 0 24px 48px -24px rgba(75, 15, 30, .30);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 240ms;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
html[lang="fr"] {
  --font-display: var(--font-heading-fr);
  --font-body: var(--font-body-fr);
  --font-script: var(--font-script-fr);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 20px; height: 20px; flex: none; }

.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  background: var(--wine-600); color: #fff; padding: 10px 18px; border-radius: 999px;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 1rem; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-rose { background: var(--primary); color: #fff; box-shadow: 0 10px 24px -10px rgba(178, 60, 89, .7); }
.btn-rose:hover { background: var(--primary-hover); }
.btn-outline { border-color: var(--wine-400); color: var(--wine-700); background: transparent; }
.btn-outline:hover { background: var(--wine-600); color: #fff; border-color: var(--wine-600); }
.btn-block { width: 100%; }

/* Store-style buttons — echo of the reference's app badges */
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding-block: 8px; padding-inline: 20px 22px; border-radius: 12px;
  background: rgba(51, 10, 21, .55); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  backdrop-filter: blur(6px);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.store-btn:hover { border-color: var(--wine-400); background: rgba(178, 60, 89, .18); transform: translateY(-2px); }
.store-btn .icon { width: 26px; height: 26px; }
.store-btn .icon-wa { color: var(--wine-100); }
.store-btn .icon-ig { color: var(--wine-400); }
.store-btn span { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.store-btn small { font-size: .72rem; opacity: .8; }
.store-btn strong { font-size: 1.25rem; font-weight: 500; letter-spacing: .01em; }

/* ============ Header ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), padding 300ms var(--ease-out);
  padding-block: 18px;
  color: var(--text-on-dark);
}
.site-header.is-scrolled {
  background: rgba(51, 10, 21, .86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line-on-dark);
  padding-block: 10px;
}
/* backdrop-filter would trap the fixed mobile menu inside the header box */
.site-header.menu-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-badge {
  display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--wine-50);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 18px -6px rgba(178, 60, 89, .55);
}
.brand-badge img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.brand-badge-lg { width: 88px; height: 88px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-script { font-family: var(--font-script); font-size: 1.85rem; color: var(--wine-400); line-height: .9; }
.brand-name { font-family: var(--font-latin); font-size: 1.02rem; font-weight: 500; letter-spacing: .06em; color: inherit; }

.main-nav ul { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.main-nav a {
  position: relative; display: inline-block; padding: 10px 2px; font-size: .98rem;
  color: var(--muted-on-dark); transition: color var(--dur) var(--ease-out);
}
.main-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center; transition: transform 300ms var(--ease-out);
}
.main-nav a:hover, .main-nav a.is-active { color: #fff; }
.main-nav a.is-active::after, .main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { min-height: 44px; padding-inline: 22px; border-radius: 4px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(247, 214, 220, .4); background: rgba(247, 214, 220, .08); color: #fff;
  font-size: 1rem; font-weight: 600; letter-spacing: .06em;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.lang-toggle:hover { border-color: var(--wine-400); }
.lang-opt {
  display: grid; place-items: center; min-width: 38px; height: 34px; padding: 0 8px; border-radius: 999px;
  font-size: .85rem; color: var(--muted-on-dark); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
html[lang="fr"] .lang-opt[data-lang-opt="fr"], html[lang="ar"] .lang-opt[data-lang-opt="ar"] { background: var(--wine-600); color: #fff; }
/* FR stays on the left and AR on the right in both directions */
.lang-toggle { direction: ltr; }

.menu-toggle {
  display: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle .icon { width: 24px; height: 24px; }

.mobile-menu {
  position: fixed; inset: 0; top: 0; z-index: -1; padding: 110px var(--gutter) 40px;
  background: var(--wine-900);
  background-image: radial-gradient(60% 40% at 80% 0%, rgba(178, 60, 89, .25), transparent 70%);
}
.mobile-menu ul { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu a:not(.btn) {
  display: block; padding: 14px 0; font-family: var(--font-display); font-size: 1.75rem;
  border-bottom: 1px solid var(--line-on-dark);
}
.mobile-menu .btn { margin-top: 24px; width: 100%; }

/* ============ Hero ============ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; padding-top: 120px; padding-bottom: 72px;
  background: var(--wine-900);
  color: var(--text-on-dark);
  display: flex; align-items: center;
}
/* Full-bleed photo; anchored right so narrower screens crop the empty curtain, never the cake */
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* Darkens the text side (left, over the dark curtain), the header strip and the bottom edge */
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(75, 15, 30, .88) 0%, rgba(75, 15, 30, .62) 24%, rgba(75, 15, 30, 0) 44%),
    linear-gradient(to bottom, rgba(75, 15, 30, .55), transparent 18%),
    linear-gradient(to top, rgba(75, 15, 30, .6), transparent 24%);
}
/* Decorative lines (still used by the order-steps section) */
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-lines path { fill: none; stroke: var(--line-on-dark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-glow { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
/* The cake and hand fill the right of the photo, so the text always sits on the physical left,
   in Arabic (RTL) and French (LTR) alike, with the 01–04 index on its outer edge */
.hero-grid {
  position: relative; z-index: 2; max-width: none;
  display: flex; justify-content: flex-end; align-items: center;
}
.hero-content {
  display: flex; flex-direction: row-reverse; gap: clamp(20px, 3vw, 44px); align-items: flex-start;
  width: clamp(400px, 34vw, 600px);
}
[dir="ltr"] .hero-grid { justify-content: flex-start; }
[dir="ltr"] .hero-content { flex-direction: row; }

.hero-index {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 92px; font-family: var(--font-body-fr); font-size: .85rem; color: var(--muted-on-dark);
}
.hero-index-line { position: relative; width: 1px; height: 180px; background: var(--line-on-dark); overflow: hidden; }
.hero-index-fill { position: absolute; inset: 0; background: var(--wine-400); transform-origin: top; transform: scaleY(.12); }

.eyebrow {
  margin: 0 0 10px; font-family: var(--font-script-fr); font-size: 1.75rem; line-height: 1.2;
  color: var(--wine-600); letter-spacing: .02em;
}
.eyebrow-dark { color: var(--wine-400); }

.hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.8rem); line-height: 1.35; color: #fff;
  margin-bottom: 22px;
}
.hero-title .line { display: block; white-space: nowrap; }
html[lang="fr"] .hero-title { line-height: 1.15; font-size: clamp(2.3rem, 1.4rem + 2.7vw, 3.7rem); }
/* the decorative word grows a little: Great Vibes / Aref Ruqaa read smaller than the heading face */
.hero-title .ring-word { font-size: 1.12em; font-weight: 400; }
.ring-word { position: relative; display: inline-block; color: var(--wine-400); }
.ring {
  max-width: none; position: absolute; top: 2%; left: -60%; width: 220%; height: 108%;
  overflow: visible; pointer-events: none; transform: rotate(-5deg);
}
.ring path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sparkle { display: inline-block; width: .32em; height: .32em; color: #fff; vertical-align: middle; margin-inline-start: .18em; }

.hero-lead { max-width: 25rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted-on-dark); line-height: 1.9; margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Bottom-left corner, under the text column, in both languages */
.circle-badge {
  position: absolute; left: var(--gutter); bottom: 4%; width: 132px; height: 132px; z-index: 3;
  display: grid; place-items: center; color: #fff; border-radius: 50%;
  background: rgba(51, 10, 21, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.circle-badge > svg:first-child { direction: ltr; position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.circle-badge text { fill: currentColor; font-family: var(--font-latin); font-size: 15.5px; letter-spacing: 2.4px; }
.circle-badge-star { width: 22px; height: 22px; transition: transform 400ms var(--ease-out), color var(--dur); }
.circle-badge:hover .circle-badge-star { transform: rotate(90deg) scale(1.2); color: var(--wine-400); }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-cue {
  position: absolute; z-index: 3; bottom: 26px; left: 50%; translate: -50% 0;
  width: 28px; height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  display: flex; justify-content: center; padding-top: 8px;
}
.scroll-cue-dot { width: 4px; height: 8px; border-radius: 4px; background: #fff; animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ============ Sections ============ */
.section { position: relative; padding-block: var(--section-y); }
.section-cream { background: var(--wine-50); }
.section-blush { background: var(--wine-50); }
.section-dark { background: var(--wine-900); color: var(--text-on-dark); overflow: hidden; isolation: isolate; }
.section-dark .section-title { color: #fff; }
.section-dark .section-lead { color: var(--muted-on-dark); }

.section-head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px, 6vw, 64px); }
.section-head-start { text-align: start; margin: 0; }
.section-title {
  font-family: var(--font-display); font-weight: 700; color: var(--heading);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.35;
}
.section-title em { font-style: normal; color: var(--wine-400); }
.section-lead { color: var(--text-muted); font-size: 1.1rem; margin-top: 16px; }

.divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: var(--wine-600); }
.divider span { width: 64px; height: 1px; background: var(--wine-400); }
.divider svg { width: 18px; height: 18px; fill: currentColor; }
.divider-dark span { background: rgba(224, 122, 148, .45); }
.divider-dark { color: var(--wine-400); }

/* ============ About ============ */
.about-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-visual { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
/* light arch behind the avatar: the PNG has pale edges that would show as a halo on a dark backdrop */
.about-arch {
  position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 32px 32px; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 28%, #fff 0%, transparent 70%),
    linear-gradient(180deg, var(--wine-50) 0%, var(--wine-100) 55%, var(--wine-400) 140%);
  box-shadow: var(--shadow-soft), inset 0 0 0 10px rgba(255, 255, 255, .55);
}
.about-avatar { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 92%; height: auto; }
.about-logo-badge {
  position: absolute; width: 124px; height: 124px; top: 6%; inset-inline-end: -24px; border-radius: 50%; overflow: hidden;
  background: var(--wine-50); box-shadow: 0 16px 36px -14px rgba(75, 15, 30, .5), 0 0 0 6px #fff;
}
.about-logo-badge img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.about-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--text);
  font-weight: 500; font-size: .95rem; box-shadow: 0 14px 30px -14px rgba(75, 15, 30, .45);
}
.about-chip svg { width: 18px; height: 18px; color: var(--wine-600); flex: none; }
.about-chip-1 { bottom: 20%; inset-inline-start: -24px; }
.about-chip-2 { bottom: 5%; inset-inline-end: -16px; }

.about-copy > div > p { color: var(--text-muted); font-size: 1.1rem; }
.about-copy strong { color: var(--wine-700); font-weight: 700; }
.divider-start { justify-content: flex-start; }
.about-copy .signature { font-family: var(--font-script-fr); font-size: 3.2rem; color: var(--wine-600); line-height: 1.2; margin-top: 8px; }
.signature span { font-family: var(--font-latin); font-size: 1.1rem; color: var(--text); letter-spacing: .08em; margin-inline-start: 8px; }
/* the signature closes the text: left in Arabic, right in French */
[dir="rtl"] .signature { text-align: left; }
[dir="ltr"] .signature { text-align: right; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.features li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius);
  background: #fff; border: 1px solid rgba(224, 122, 148, .25);
}
.feature-icon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--wine-100); color: var(--wine-700); }
.feature-icon svg { width: 22px; height: 22px; }
.features h3 { font-size: 1.05rem; color: var(--heading); margin-bottom: 2px; }
.features p { margin: 0; font-size: .95rem; color: var(--text-muted); line-height: 1.6; }

/* ============ Steps ============ */
.steps-lines { opacity: .9; }
.steps { background: var(--wine-800); }
.steps .container { position: relative; z-index: 2; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); counter-reset: none; }
.step { position: relative; }
.step-media { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line-on-dark); }
.step-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform 700ms var(--ease-out), filter 400ms; }
.step:hover .step-media img { transform: scale(1.05); filter: saturate(1.05); }
.step-num { display: block; font-family: var(--font-heading-fr); font-size: 2.4rem; color: var(--wine-400); line-height: 1; margin-bottom: 10px; }
.step h3 { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: 6px; }
.step p { color: var(--muted-on-dark); font-size: 1rem; margin: 0; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 33%; inset-inline-end: calc(-1 * clamp(18px, 2.4vw, 32px) / 2 - 4px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--wine-400); opacity: .6;
}

/* ============ Gallery ============ */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.filter {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--wine-100); background: #fff; color: var(--text); font-weight: 500;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.filter:hover { border-color: var(--wine-500); color: var(--wine-700); }
.filter.is-active { background: var(--heading); border-color: var(--heading); color: #fff; }

/* Grid: square tiles fix the row height, tall tiles span two rows; "dense" fills holes after filtering */
/* Plain grid: the fallback when motion is reduced (gallery-helix.js turns it into a 3D spiral otherwise) */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.g-item { margin: 0; border-radius: var(--radius); overflow: hidden; }
.g-item[hidden] { display: none; }
.g-open { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; position: relative; background: var(--wine-100); }
.g-open img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 700ms var(--ease-out); }
.g-open::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(51, 10, 21, .45), transparent 55%);
  opacity: 0; transition: opacity 400ms var(--ease-out);
}
.g-open:hover img { transform: scale(1.05); }
.g-open:hover::after { opacity: 1; }
.gallery-more { display: flex; justify-content: center; margin-top: 28px; }

/* ---- 3D helix (inspired by the reference video) ---- */
/* the section is pinned for the length of the spin, so it fills exactly one screen */
.gallery-section.is-helix {
  min-height: 100svh; padding-block: 80px 14px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.gallery-section.is-helix > .container { display: flex; flex-direction: column; flex: 1; max-width: none; }
/* compact header so the photos get most of the screen */
.gallery-section.is-helix .eyebrow, .gallery-section.is-helix .divider { display: none; }
.gallery-section.is-helix .section-head { margin-bottom: 10px; }
.gallery-section.is-helix .section-title { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.3; }
.gallery-section.is-helix .filters { margin-bottom: 0; gap: 6px; }
.gallery-section.is-helix .filter { min-height: 40px; padding: 0 14px; font-size: .86rem; }
.gallery-section.is-helix .gallery-more { margin-top: 4px; position: relative; z-index: 2; }
.gallery-section.is-helix .gallery-more .btn { min-height: 42px; padding-inline: 20px; font-size: .9rem; }
.gallery--helix {
  display: block; position: relative; z-index: 1; flex: 1; min-height: 340px;
  perspective-origin: 50% 50%; /* perspective and card size are set from the stage height in gallery-helix.js */
  /* soft top and bottom edges so cards never run into the filters or the button */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.helix { position: absolute; inset: 0; transform-style: preserve-3d; }
.gallery--helix .g-item {
  position: absolute; left: 50%; top: 50%; width: var(--card-w, 200px);
  border-radius: 14px; backface-visibility: visible; will-change: transform, opacity;
  box-shadow: 0 22px 44px -20px rgba(75, 15, 30, .55);
}
.gallery--helix .g-open { height: 100%; }
.gallery--helix .g-open img { aspect-ratio: 3 / 4; display: block; }
/* hover zoom would fight the 3D transform of the card; keep only the soft shade */
.gallery--helix .g-open:hover img { transform: none; }

/* Lightbox */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(51, 10, 21, .95); color: #fff;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; max-width: min(92vw, 720px); text-align: center; }
.lightbox img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: var(--radius); }
.lightbox figcaption { margin-top: 14px; color: var(--muted-on-dark); font-size: .95rem; }
.lb-btn {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff;
  transition: background-color var(--dur) var(--ease-out);
}
.lb-btn:hover { background: var(--wine-600); border-color: var(--wine-600); }
.lb-btn svg { width: 24px; height: 24px; }
.lb-close { top: 20px; inset-inline-end: 20px; }
.lb-prev { inset-inline-start: 20px; top: 50%; translate: 0 -50%; }
.lb-next { inset-inline-end: 20px; top: 50%; translate: 0 -50%; }
[dir="ltr"] .lb-prev svg, [dir="ltr"] .lb-next svg { transform: scaleX(-1); }

/* ============ Contact ============ */
.contact-glow { background: radial-gradient(45% 50% at 85% 30%, rgba(178, 60, 89, .22), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(224, 122, 148, .18), transparent 70%); }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.contact-copy .section-lead { max-width: 30rem; }
.contact-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.contact-cards a {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark); background: rgba(255, 255, 255, .03);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.contact-cards a:hover { border-color: rgba(224, 122, 148, .5); background: rgba(178, 60, 89, .1); }
.contact-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(224, 122, 148, .14); color: var(--wine-400); flex: none; }
.contact-icon svg { width: 22px; height: 22px; }
.contact-cards span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.contact-cards small { color: var(--muted-on-dark); font-size: .88rem; }
.contact-cards strong { font-family: var(--font-body-fr); font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; text-align: start; overflow-wrap: anywhere; }
.contact-cards a > span:last-child { min-width: 0; }

.order-form {
  background: var(--wine-50); color: var(--text); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.order-form h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--heading); margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font-weight: 500; font-size: .95rem; color: var(--heading); }
.optional { font-weight: 400; color: var(--text-muted); font-size: .88rem; }
.field input, .field select, .field textarea {
  min-width: 0; max-width: 100%;
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--wine-400); background: #fff; font-size: 1rem;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 110px; }
/* iOS draws date fields as small centred pills: give them the same box as the other fields */
.field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: start; line-height: 24px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--wine-500); box-shadow: 0 0 0 4px rgba(204, 86, 113, .18); }
.field [aria-invalid="true"] { border-color: #C2253B; }
.field-error { margin: 0; font-size: .88rem; color: #B3122E; }
.form-note { margin: 12px 0 0; font-size: .85rem; color: var(--text-muted); text-align: center; }

/* ============ Footer ============ */
.site-footer { background: var(--wine-950); color: var(--muted-on-dark); padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-on-dark); }
.footer-brand .brand-text { width: fit-content; color: #fff; margin: 14px 0 10px; }
.footer-brand p:last-child { max-width: 22rem; }
.site-footer h3 { color: #fff; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 14px; }
.site-footer ul { display: flex; flex-direction: column; gap: 4px; }
.site-footer ul a { display: inline-block; padding: 6px 0; transition: color var(--dur); }
.site-footer ul a:hover { color: var(--wine-400); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; font-size: .9rem; }
.footer-bottom p { margin: 0; }
.to-top { padding: 10px 0; }
.to-top:hover { color: var(--wine-400); }

/* WhatsApp FAB */
.wa-fab {
  position: fixed; z-index: 40; bottom: 22px; inset-inline-end: 22px; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wine-600); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(178, 60, 89, .6);
  opacity: 0; pointer-events: none; transform: translateY(16px);
  transition: transform var(--dur) var(--ease-out), opacity 300ms var(--ease-out);
}
/* Hidden over the hero (which already has WhatsApp CTAs) so it never covers the headline */
.wa-fab.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.wa-fab.is-visible:hover { transform: scale(1.08); }
.wa-fab svg { width: 30px; height: 30px; }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  /* below 1080px the wide photo cannot sit beside the text: stack it above */
  .hero { min-height: auto; padding-top: 0; flex-direction: column; align-items: stretch; }
  .hero-bg { position: relative; inset: auto; z-index: 0; display: block; aspect-ratio: 16 / 10; }
  .hero-bg img {
    width: 100%; margin-inline-start: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
            mask-image: linear-gradient(to bottom, #000 68%, transparent);
  }
  .hero-shade { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .circle-badge { display: none; }
  .hero-index { display: none; }
  .hero-content { margin-top: -28px; width: auto; flex-direction: row; }
  .hero-grid { display: block; }
  .hero-bg img { object-position: 88% center; }
  .scroll-cue { display: none; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step::after { display: none; }
}

@media (max-width: 900px) {
  .contact-grid, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-visual { max-width: 380px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 16px; row-gap: 36px; }
  .step h3 { font-size: 1.25rem; }
  .step p { font-size: .92rem; }
  .step-num { font-size: 2rem; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .order-form { padding: 22px 18px; border-radius: var(--radius); }
  .contact-cards a { padding: 12px 14px; gap: 12px; }
  .contact-cards strong { font-size: 1.02rem; }
  .contact .section-title { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.4rem); }
  .features { grid-template-columns: 1fr; }
  .about-logo-badge { width: 92px; height: 92px; inset-inline-end: -6px; }
  .about-chip-1 { inset-inline-start: -4px; }
  .about-chip-2 { inset-inline-end: -4px; }
  .hero-bg { aspect-ratio: 4 / 3; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .g-item { border-radius: var(--radius-sm); }
  .gallery-section.is-helix { padding-top: 84px; padding-bottom: 96px; } /* keeps the Instagram link clear of the floating WhatsApp button */
  .gallery-section.is-helix .filter { padding: 0 12px; font-size: .82rem; }
  .store-btn { flex: 1 1 0; min-width: 150px; padding-inline: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; translate: none; }
}

/* very small phones (320–380px): tighter header so logo, FR/AR and menu fit on one line */
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 6px; }
  .brand { gap: 8px; }
  .brand-badge { width: 42px; height: 42px; }
  .brand-script { font-size: 1.5rem; }
  .brand-name { font-size: .88rem; }
  .lang-opt { min-width: 32px; padding: 0 6px; }
  .menu-toggle { width: 44px; height: 44px; }
  /* headings and buttons may wrap instead of pushing past the screen edge */
  .hero-title .line { white-space: normal; }
  html[lang="fr"] .hero-title { font-size: 2.15rem; }
  .hero-title { font-size: 2.35rem; }
  .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 8px; }
  .store-btn { min-width: 0; flex: 1 1 100%; } /* stacked, full width */
}

@media (max-height: 760px) and (min-width: 1081px) { .circle-badge { display: none; } }

/* ============ Typography per language ============ */
html[lang="fr"] { direction: ltr; }
html[lang="fr"] h1, html[lang="fr"] h2, html[lang="fr"] h3 { font-family: var(--font-heading-fr); }
html[lang="fr"] .logo, html[lang="fr"] .script-text { font-family: var(--font-script-fr); }
html[lang="fr"] body, html[lang="fr"] p, html[lang="fr"] button { font-family: var(--font-body-fr); }

html[lang="ar"] { direction: rtl; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--font-heading-ar); }
html[lang="ar"] .logo, html[lang="ar"] .script-text { font-family: var(--font-script-ar); }
html[lang="ar"] body, html[lang="ar"] p, html[lang="ar"] button { font-family: var(--font-body-ar); }

/* Latin text inside the Arabic page (phone numbers, "WhatsApp", French words) keeps Latin fonts */
html[lang="ar"] [lang="fr"], html[lang="ar"] [lang="en"] { font-family: var(--font-body-fr); }

/* The brand name "Gâteaux Mélissa Julia" is never translated and keeps the logo's look in both
   languages: Great Vibes for "Gâteaux", Playfair for "Mélissa Julia" (overrides the .logo rule above) */
html[lang] .logo .brand-script, html[lang] .signature,
html[lang] .eyebrow, html[lang] .eyebrow [lang] { font-family: var(--font-script-fr); }
html[lang] .logo .brand-name, html[lang] .signature span, html[lang] .step-num { font-family: var(--font-heading-fr); }
html[lang] .hero-index, html[lang] .contact-cards strong, html[lang] .lang-toggle { font-family: var(--font-body-fr); }

/* smooth language switch: fade out, re-flow RTL/LTR, fade in (see main.js) */
body { transition: opacity 220ms var(--ease-out); }
body.lang-switching { opacity: 0; }

/* ============ Mouse effects (real mouse only — see cursor-fx.js) ============ */
/* One particle canvas per section, between the section background and its content */
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fx-section { position: relative; }
.fx-section > .container { position: relative; z-index: 2; }

/* Glow that follows the cursor inside buttons; --mx/--my are set on pointermove */
.fx-magnet { isolation: isolate; overflow: hidden; }
.fx-magnet:not(.wa-fab) { position: relative; }
.fx-magnet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .38), transparent 70%);
  opacity: 0; transition: opacity 300ms var(--ease-out);
}
.fx-magnet:hover::before { opacity: 1; }
/* light buttons get a pink glow instead of white */
.filter.fx-magnet::before, .btn-outline.fx-magnet::before {
  background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 122, 148, .28), transparent 70%);
}
.filter.is-active.fx-magnet::before { background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .3), transparent 70%); }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============ Backend helpers ============ */
/* honeypot field: off-screen for people, still in the form for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* category buttons without photos are hidden by main.js */
.filter[hidden] { display: none; }