/* ============================================================
   BRODERIE ROYALE — "Le Fil Royal"
   Cinematic trilingual scroll experience
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; padding: 0; }

/* Lenis smooth-scroll base (required for clean pinning) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  overflow-x: hidden;
  background: var(--ink);
  color: var(--fg-on-dark);
  cursor: default;
}
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--ink); }

/* ---------- Arabic / RTL handling ---------- */
html[lang="ar"] { font-family: 'Amiri', var(--font-arabic); }
html[lang="ar"] .display,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .chap-title,
html[lang="ar"] .hero-title { font-family: var(--font-arabic); font-weight: 400; line-height: 1.3; }
html[lang="ar"] .eyebrow { letter-spacing: 0.04em; }
html[lang="ar"] [dir-flip] { direction: rtl; }
.ar-only { display: none; }
html[lang="ar"] .ar-only { display: block; }

/* ============================================================
   LOADER / OVERTURE
   ============================================================ */
#overture {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
#overture.done { opacity: 0; visibility: hidden; pointer-events: none; }
.overture-crest {
  width: 190px; opacity: 0;
  animation: overtureIn 0.9s var(--ease) forwards;
}
@keyframes overtureIn {
  0%   { opacity: 0; transform: scale(.82) translateY(6px); filter: blur(4px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.overture-line {
  position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
  font-size: var(--t-body); letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ivory); opacity: 0; animation: fadeUp 0.55s 0.3s var(--ease) forwards;
  text-align: center; max-width: min(90vw, 720px); line-height: 1.7;
}
html[lang="ar"] .overture-line { letter-spacing: 0.12em; }
@media (max-width: 560px){
  .overture-line { letter-spacing: 0.18em; font-size: 12px; bottom: 14%; }
  .overture-crest { width: 130px; }
}
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   FIXED CHROME — nav, progress, language
   ============================================================ */
.progress-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 60%, transparent);
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 56px);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
}
.nav-brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.nav-brand img { height: 38px; width: auto; transition: height .5s var(--ease); }
.nav.scrolled .nav-brand img { height: 30px; }
.nav-brand .nb-crest { height: 46px; }
.nav.scrolled .nav-brand .nb-crest { height: 38px; }
.nav-brand .nb-mark { height: 34px; }
.nav.scrolled .nav-brand .nb-mark { height: 27px; }
@media (max-width: 560px){ .nav-brand .nb-mark { display: none; } }
.nav-brand .nb-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand .nb-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; color: var(--ivory); text-transform: uppercase; }
.nav-brand .nb-sub { font-family: var(--font-display); font-style: italic; font-size: 11px; color: var(--gold); letter-spacing: 0.04em; }

.nav-links { display: flex; gap: clamp(14px, 2vw, 30px); align-items: center; }
.nav-link {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-on-dark-2); cursor: pointer; position: relative; padding: 4px 0;
  transition: color .3s var(--ease);
}
html[lang="ar"] .nav-link { letter-spacing: 0.04em; font-size: 15px; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav-link:hover { color: var(--ivory); }
.nav-link:hover::after { width: 100%; }
@media (max-width: 900px){ .nav-links { display: none; } }

/* ---- Mobile nav: hamburger + fullscreen drawer ---- */
.nav-toggle {
  display: none; background: transparent;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--ivory); cursor: pointer;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav-toggle:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 900px){
  .nav-toggle { display: inline-flex; }
  .nav { padding: 14px clamp(16px, 4vw, 28px); }
  .lang-switch { display: none; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 109;
  background: color-mix(in srgb, var(--ink) 97%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 36px; padding: 80px 24px 60px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu .mm-links {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.mobile-menu .mm-link {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: 0.04em;
  color: var(--ivory); text-transform: uppercase; text-decoration: none;
  transition: color .3s var(--ease);
}
.mobile-menu .mm-link:hover { color: var(--gold); }
html[lang="ar"] .mobile-menu .mm-link { font-family: var(--font-arabic); letter-spacing: 0; }
.mobile-menu .mm-lang {
  display: flex; gap: 4px; margin-top: 18px;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: var(--r-pill); padding: 4px;
}
body.mobile-menu-open { overflow: hidden; }

.lang-switch { display: flex; gap: 2px; align-items: center; background: color-mix(in srgb, var(--ink) 50%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: var(--r-pill); padding: 4px; }
.lang-btn {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--fg-on-dark-2); background: none; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-pill); transition: all .3s var(--ease);
}
.lang-btn.active { background: var(--gold); color: var(--ink); }
.lang-btn:not(.active):hover { color: var(--ivory); }

/* ============================================================
   THREAD — the gold line that draws down the journey
   ============================================================ */
.thread-track {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  /* Idle-invisible by default. effects.js toggles .thread-active during
     scroll and drops it ~400ms after scroll stops — a subtle decorative
     motion that never sits over the text at rest. */
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.thread-track.thread-active { opacity: 1; }
.thread-track svg { width: 100%; height: 100%; display: block; }
.thread-base { fill: none; stroke: color-mix(in srgb, var(--gold) 14%, transparent); stroke-width: 1.4; }
.thread-draw { fill: none; stroke: url(#threadGrad); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 55%, transparent)); }
.thread-needle { fill: var(--gold-bright); filter: drop-shadow(0 0 8px var(--gold)); }
@media (max-width: 900px) {
  /* Tablet: reduce presence — cap peak opacity even when active. */
  .thread-track.thread-active { opacity: 0.55; }
}
@media (max-width: 560px) {
  /* Phones: hide entirely — the thread would inevitably overlap tight
     content columns, and the readability cost outweighs the decor. */
  .thread-track { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .thread-track { display: none !important; }
}

/* ============================================================
   SECTIONS / CHAPTERS
   ============================================================ */
main { position: relative; z-index: 2; }
.chapter { position: relative; padding: clamp(80px, 12vh, 160px) clamp(20px, 6vw, 120px); overflow: hidden; }
.chapter--ink { background: var(--ink); color: var(--fg-on-dark); }
.chapter--ivory { background: var(--ivory); color: var(--fg1); }
.chapter--ink .eyebrow { color: var(--gold); }
/* Skip layout/paint for chapters offscreen. Excludes #metiers-pin, whose
   GSAP ScrollTrigger needs real measurements while the user scrolls into
   it (content-visibility:auto returns approximate sizes that break the
   pinned horizontal scroll).
   The `auto` keyword in contain-intrinsic-size makes the browser cache
   each chapter's real rendered height after first visit, so subsequent
   skip/unskip cycles incur zero CLS. The fallback values below are the
   first-paint estimates per chapter — picked from the actual content
   density so the very first scroll-through stays close to truth.
   Re-measure (DevTools > Insights > Layout shift culprits) and tune if
   any chapter still flags. */
.chapter:not(#metiers-pin):not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
#atelier  { contain-intrinsic-size: auto 1100px; }
#prestige { contain-intrinsic-size: auto 900px;  }
#serve    { contain-intrinsic-size: auto 850px;  }
#partners { contain-intrinsic-size: auto 700px;  }
#testimonials { contain-intrinsic-size: auto 900px; }
#faq      { contain-intrinsic-size: auto 800px;  }
#catalogue { contain-intrinsic-size: auto 320px; }
/* Section VII is now a compact transition — title, one-liner and CTA only.
   Cards moved out (duplicated Section III) and showroom addresses moved to
   the /contact page. Halve the top/bottom padding so it doesn't read as an
   empty stretch of ink. */
#catalogue.chapter { padding-block: clamp(56px, 8vh, 96px); }
#catalogue .btn-royal { margin-top: 28px; }

.wrap { max-width: 1240px; margin: 0 auto; position: relative; }
.measure { max-width: 60ch; }

.chap-num {
  font-family: var(--font-display); font-style: italic; font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.1em; color: var(--gold); margin-bottom: 10px; display: block;
}
.chap-title {
  font-family: var(--font-display); font-weight: 700; line-height: 1.04;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem); letter-spacing: -0.015em;
  margin: 0 0 28px;
}
.chapter--ink .chap-title { color: var(--ivory); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.7; color: inherit; opacity: .88; font-weight: 400; }
.chapter--ink .lead { color: var(--fg-on-dark-2); }

.gold-rule { height: 1px; width: 80px; background: linear-gradient(90deg, var(--gold), transparent); border: 0; margin: 0 0 22px; }
html[lang="ar"] .gold-rule { background: linear-gradient(270deg, var(--gold), transparent); }

/* ============================================================
   HERO / OPENING
   ============================================================ */
/* Top + bottom padding reserve clearance for two fixed-ish elements:
   - the nav (≈86 px tall initially, 58 px when .scrolled) — without
     the top padding, zooming in or shrinking the viewport made the
     crest disappear behind the nav.
   - the .scroll-hint (.dot + label, ≈70 px) — without the bottom
     padding, the centered subtitle was sliding into the scroll-hint
     zone on short viewports.
   Content stays centered within the remaining space. */
#hero { height: 100vh; min-height: 680px; display: grid; place-items: center; position: relative; background: var(--ink); padding: clamp(96px, 13vh, 130px) 0 clamp(80px, 10vh, 110px); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg .slot, .hero-bg img, .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 50% 30%, transparent 0%, rgba(16,16,16,.55) 60%, var(--ink) 100%),
  linear-gradient(180deg, rgba(16,16,16,.55) 0%, transparent 30%, var(--ink) 100%); }
.hero-inner { position: relative; z-index: 3; text-align: center; padding: 0 24px; }
/* aspect-ratio reserves the square box before either crest PNG loads.
   The two natural PNGs are 1250x1250 so 1:1 is exact — fixes the CLS
   shift that explicit width/height attrs on the <img> were causing
   visually (browser overrode CSS sizing in some cases). */
.hero-crest-wrap { position: relative; width: clamp(120px, 16vw, 190px); aspect-ratio: 1; margin: 26px auto 4px; }
.hero-crest { width: 100%; filter: drop-shadow(0 8px 30px rgba(0,0,0,.6)); }
.hero-crown { position: absolute; top: 0; left: 0; width: 100%; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.hero-wordmark {
  display: block;
  width: clamp(220px, 30vw, 380px);
  height: auto;
  margin: 14px auto 18px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}
@media (max-width: 560px) {
  .hero-wordmark { width: clamp(200px, 70vw, 300px); margin: 10px auto 14px; }
}
.hero-title {
  font-family: var(--font-display); font-weight: 700; color: var(--ivory);
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 26px;
}
.hero-title em { font-style: italic; color: var(--gold-bright); }
.hero-sub { max-width: 56ch; margin: 0 auto 40px; color: var(--fg-on-dark-2); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.65; }
.scroll-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gold); }
.scroll-hint span { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; opacity: .8; }
html[lang="ar"] .scroll-hint span { letter-spacing: 0.08em; font-size: 14px; }
.scroll-hint .dot { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
/* threadDrop animates the pseudo-element fully through the .dot. Originally
   animated `top`, which is paint/layout-bound and flagged by Lighthouse as a
   non-composited animation. Anchor the pseudo at top:0 and animate
   `transform: translateY()` instead — same visual, GPU-composited. */
.scroll-hint .dot::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: var(--gold-bright); animation: threadDrop 1.8s var(--ease) infinite; will-change: transform; }
@keyframes threadDrop { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

/* particles canvas */
#particles { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

/* ============================================================
   HERITAGE (La Maison)
   ============================================================ */
.heritage-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 860px){ .heritage-grid { grid-template-columns: 1fr; } }
.values-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.value-chip {
  position: relative;
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid var(--ivory-line); padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--bg-elevated);
  cursor: help;
  transition: color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease);
}
.value-chip:hover,
.value-chip:focus-visible {
  color: var(--royal-red);
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent);
  transform: translateY(-1px);
  outline: none;
}
.vc-name { display: inline-block; }
/* Tooltip: absolutely-positioned card above the chip. Gold hairline top
   border and a small notch beneath so it feels attached. Uses opacity +
   translateY + visibility (with a slight delay on the way out so a fast
   mouse-out still lets you glance at the copy). */
.vc-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 6px);
  min-width: 240px; max-width: 320px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0.01em; text-transform: none; line-height: 1.55;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--gold) 8%, transparent);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  z-index: 5;
}
.vc-tip::before {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.vc-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, -1px);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.value-chip:hover .vc-tip,
.value-chip:focus-visible .vc-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
html[lang="ar"] .value-chip { letter-spacing: 0.03em; font-size: 15px; }
html[lang="ar"] .vc-tip { font-family: var(--font-arabic); font-size: 15px; letter-spacing: 0; line-height: 1.7; }
@media (max-width: 720px) {
  /* Touch widths: promote the tooltip from an absolute-positioned hover
     card to an always-visible inline description under the chip.
     - Overrides the base pill radius: a full pill on a tall stacked card
       reads as an oversized lozenge; a small card radius reads cleaner.
     - Adds a subtle gold leading rule (mirrors the .stat-stack rhythm
       right below) so the four value cards feel like part of the same
       editorial column instead of floating pills. */
  .values-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .value-chip {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 14px 18px 16px;
    gap: 6px;
    border-radius: var(--r-md);
    border-inline-start: 2px solid var(--gold);
    cursor: default;
  }
  .vc-name {
    font-weight: 600;
    letter-spacing: 0.14em;
    font-size: 12px;
  }
  html[lang="ar"] .vc-name { letter-spacing: 0.02em; font-size: 14px; }
  .vc-tip {
    position: static;
    left: auto; bottom: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    min-width: 0; max-width: 100%;
    background: transparent; color: var(--fg2);
    padding: 0; border: none; box-shadow: none;
    font-size: 13.5px; line-height: 1.55;
    text-align: start;
    z-index: auto;
  }
  html[lang="ar"] .vc-tip { font-size: 14.5px; }
  .vc-tip::before, .vc-tip::after { display: none; }
  /* The static description must NOT inherit the desktop hover/focus tooltip
     transform — otherwise a sticky-hover tap slides it off-screen left.
     Pin it in place; only the box itself reacts to interaction below. */
  .value-chip:hover .vc-tip,
  .value-chip:focus-visible .vc-tip,
  .value-chip:active .vc-tip { transform: none; }

  /* Touch feedback: on tap the card lights up in place — thicker gold
     leading rule, gold ring glow, faint gold-tinted background. Killing
     the desktop translateY + color-change on the hover/focus/active
     states so the text does NOT shift position under the finger. The
     -webkit-tap-highlight silences the native blue flash on iOS/Android
     so our glow reads as the single feedback signal. */
  .value-chip { -webkit-tap-highlight-color: transparent; }
  .value-chip:hover,
  .value-chip:focus-visible,
  .value-chip:active {
    transform: none;
    color: var(--gold-deep);
    border-color: color-mix(in srgb, var(--gold) 55%, transparent);
    border-inline-start-width: 3px;
    background: color-mix(in srgb, var(--ivory-warm) 82%, var(--gold) 18%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
  }
}
.stat-stack { display: grid; gap: 26px; }
.stat { border-inline-start: 2px solid var(--gold); padding-inline-start: 22px; }
/* Stat headline now carries a full phrase like "Plus de 40 ans" — so we
   trim the display size and let it wrap on its own gold bar. text-wrap:
   balance keeps the two-line breaks visually even. */
.stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--royal-red); line-height: 1.1;
  text-wrap: balance;
}
.stat-lab { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg2); margin-top: 8px; }
html[lang="ar"] .stat-lab { letter-spacing: 0.02em; font-size: 15px; }

/* ============================================================
   ATELIER (Le Geste)
   ============================================================ */
.atelier { position: relative; }
.atelier-media { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.atelier-media .slot, .atelier-media img, .atelier-media video { width: 100%; height: clamp(360px, 60vh, 640px); object-fit: cover; }
.atelier-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 860px){ .atelier-grid { grid-template-columns: 1fr; } }
.media-caption { position: absolute; left: 22px; bottom: 18px; z-index: 3; color: var(--ivory); font-style: italic; font-family: var(--font-display); font-size: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.atelier-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5)); pointer-events:none; }

/* ============================================================
   METIERS — vertical card stack (CSS sticky, GSAP enhancement)
   Each card is position:sticky/top:0/height:100vh. Cards share the
   same parent .metiers-stack — when a later card's natural position
   reaches the viewport top, both it AND the previous cards are stuck
   at top:0. Higher data-card z-index puts the newer card visually on
   top of the previous, giving the stacking effect.
   GSAP layers a per-card scale-down + dim on the OUTGOING card so the
   newer one feels like it's covering it (depth cue). If GSAP fails to
   run for any reason, the CSS stack still works on its own — only the
   polish is lost.
   ============================================================ */
#metiers { background: var(--ink); color: var(--fg-on-dark); position: relative; }
#metiers-pin { background: var(--ink); position: relative; }
/* Section III header: centered block. The eyebrow, rule, title and
   supporting line all read as one stack, centered horizontally in the
   ink chapter so the title sits directly under the eyebrow instead of
   drifting to a corner (was left-aligned in LTR, right-aligned in RTL —
   both looked visually broken because the eyebrow was already centered). */
.metiers-stack-head {
  position: relative; z-index: 10;
  padding: clamp(70px, 10vh, 120px) clamp(20px, 6vw, 120px) clamp(20px, 3vh, 40px);
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.metiers-stack-head .gold-rule { margin-inline: auto; }
.metiers-stack-head .chap-title { color: var(--ivory); font-size: clamp(2rem, 4.6vw, 3.8rem); }
.metiers-stack-head .lead { color: var(--fg-on-dark-2); margin-top: 14px; margin-inline: auto; max-width: 62ch; }

.metiers-stack {
  position: relative;
  /* Children give this its height: 5 cards × 100vh = 500vh total. The
     sticky math depends on this parent being TALLER than each child so
     each sticky child has scroll room. */
}
.metier-stack-card {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vh, 90px) clamp(20px, 6vw, 120px);
  background: var(--ink);
  /* z-index per data-card so the next-up card lands ON TOP of the
     previous when both are stuck at top:0. */
}
.metier-stack-card[data-card="1"] { z-index: 1; }
.metier-stack-card[data-card="2"] { z-index: 2; }
.metier-stack-card[data-card="3"] { z-index: 3; }
.metier-stack-card[data-card="4"] { z-index: 4; }
.metier-stack-card[data-card="5"] { z-index: 5; }
.metier-stack-inner {
  position: relative;
  width: min(96vw, 1100px);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  background: var(--ink-80);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
  cursor: pointer;
  transform-origin: center center;
  /* will-change kept off so we don't promote layers we don't need; JS
     sets it explicitly only on the cards currently being scaled. */
}
.metier-stack-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.metier-stack-inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,16,.0) 35%, rgba(16,16,16,.85) 78%, rgba(16,16,16,.95) 100%);
  pointer-events: none;
}
.metier-stack-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(22px, 3vw, 38px) clamp(26px, 4vw, 48px);
}
.metier-stack-idx {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold);
  font-size: clamp(13px, 1.4vw, 16px); letter-spacing: 0.18em;
}
.metier-stack-name {
  font-family: var(--font-display); font-weight: 700; color: var(--ivory);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin: 8px 0 12px;
  line-height: 1.05;
}
.metier-stack-desc {
  color: var(--fg-on-dark-2);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  max-width: 56ch;
}
html[lang="ar"] .metier-stack-name { font-family: var(--font-arabic); }
@media (prefers-reduced-motion: reduce) {
  .metier-stack-card { position: relative; height: auto; padding: 40px clamp(16px, 4vw, 60px); }
}

/* ============================================================
   Section III — METIERS (category-swap showcase)
   Replaces the older sticky-stack pattern. One category at a time,
   two-panel layout (image | text+CTA), 01/N progress, dot + arrow nav.
   Mobile collapses to a vertical stack so every card is visible at
   once without a swipe gesture.
   ============================================================ */
.metiers-header {
  /* The parent #metiers.chapter already supplies vertical padding, so
     the header only needs to constrain width + center itself. */
  padding-bottom: clamp(20px, 3vh, 40px);
  max-width: 820px; margin-inline: auto; text-align: center;
}
.metiers-header .gold-rule { margin-inline: auto; }
.metiers-header .chap-title { color: var(--ivory); font-size: clamp(2rem, 4.6vw, 3.8rem); }
.metiers-header .lead { color: var(--fg-on-dark-2); margin-top: 14px; margin-inline: auto; max-width: 62ch; }

.metiers-showcase {
  position: relative;
  max-width: 1200px;
  margin: clamp(28px, 5vh, 64px) auto 0;
}
.ms-viewport {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 90%, var(--gold) 10%);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  box-shadow: var(--shadow-lg);
}
.ms-track {
  position: relative;
  display: grid;
  /* All slides overlay in the same grid cell; only .is-active is
     visible. Aspect keeps the pane a stable height between slides. */
  grid-template-columns: 1fr;
  grid-template-rows: minmax(360px, 62vh);
}
.ms-slide {
  grid-column: 1; grid-row: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transform: scale(.985);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
  pointer-events: none;
}
.ms-slide.is-active {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s;
}
html[dir="rtl"] .ms-slide { grid-template-columns: 1fr 1.05fr; }
.ms-image {
  position: relative;
  overflow: hidden;
  background: var(--ink-80);
}
.ms-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ms-slide.is-active .ms-image img {
  animation: msImgIn .9s var(--ease);
}
@keyframes msImgIn { from { transform: scale(1.04); } to { transform: none; } }
.ms-body {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  color: var(--fg-on-dark);
}
.ms-idx {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold);
  font-size: clamp(13px, 1.3vw, 16px); letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.ms-name {
  font-family: var(--font-display); font-weight: 700; color: var(--ivory);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 4px 0 14px;
  line-height: 1.1;
}
html[lang="ar"] .ms-name { font-family: var(--font-arabic); line-height: 1.35; }
.ms-desc {
  color: var(--fg-on-dark-2);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 22px;
}
.ms-cta { align-self: flex-start; }
html[dir="rtl"] .ms-cta { align-self: flex-end; }
/* Arrow nav — subtle, sit on the viewport edges, larger touch target */
.ms-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--ivory);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ms-nav:hover, .ms-nav:focus-visible {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  border-color: var(--gold);
  outline: none;
  transform: translateY(-50%) scale(1.06);
}
.ms-prev { inset-inline-start: 14px; }
.ms-next { inset-inline-end: 14px; }
html[dir="rtl"] .ms-prev svg,
html[dir="rtl"] .ms-next svg { transform: scaleX(-1); }
/* Controls row: 01/05 progress + dots */
.ms-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-top: clamp(20px, 3vh, 32px);
  padding: 0 8px;
}
.ms-progress {
  font-family: var(--font-display); color: var(--gold);
  font-size: clamp(15px, 1.2vw, 18px); letter-spacing: 0.14em;
  display: flex; align-items: center; gap: 8px;
}
.ms-progress .ms-sep { color: color-mix(in srgb, var(--gold) 50%, transparent); }
.ms-dots { display: flex; gap: 10px; }
.md {
  width: 10px; height: 10px; padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.md:hover, .md:focus-visible { border-color: var(--gold); outline: none; }
.md.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.15); }

/* Mobile: vertical stack of every category — the client's brief was
   explicit about NOT forcing the desktop swipe/animation onto phones. */
@media (max-width: 820px) {
  .ms-viewport {
    border: 0; background: transparent; box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .ms-nav { display: none; }
  .ms-track {
    grid-template-rows: none;
    gap: clamp(24px, 4vw, 36px);
  }
  .ms-slide {
    grid-column: auto; grid-row: auto;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    display: block;
    border-radius: var(--r-md);
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 92%, var(--gold) 8%);
    border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
    animation: none;
  }
  .ms-slide.is-active .ms-image img { animation: none; }
  .ms-image { aspect-ratio: 4 / 3; }
  .ms-body { padding: clamp(20px, 5vw, 32px); }
  .ms-name { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .ms-desc { font-size: clamp(0.95rem, 3.6vw, 1.05rem); }
  .ms-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-slide { transition: none; }
  .ms-slide .ms-image img { animation: none !important; }
}

/* ----- Mobile (≤720px) ----- Fullscreen card. The PC version surrounds
   the inner card with dark padding + a gold-edge border, but on phones
   that "black container" wastes the whole viewport. Drop padding,
   border, border-radius, and box-shadow so each card fills the screen
   edge-to-edge like an app card. Body text overlays at the bottom. */
@media (max-width: 720px) {
  .metiers-stack-head {
    padding: clamp(50px, 7vh, 80px) clamp(16px, 5vw, 30px) clamp(14px, 2vh, 20px);
  }
  .metiers-stack-head .chap-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .metier-stack-card { padding: 0; }
  .metier-stack-inner {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .metier-stack-body {
    padding: clamp(24px, 5vw, 36px);
    padding-bottom: clamp(32px, 8vw, 56px);
  }
  .metier-stack-name { font-size: clamp(1.55rem, 6.5vw, 2.1rem); margin: 6px 0 10px; }
  .metier-stack-desc { font-size: clamp(0.95rem, 3.6vw, 1.05rem); line-height: 1.5; }
  .metier-stack-idx { font-size: clamp(12px, 3vw, 14px); }
}

/* ===== Arabic typography normalization — only Mashq (display) + Amiri (text) ===== */
html[lang="ar"] .flag-quote { font-family: var(--font-arabic); }
html[lang="ar"] .serve-cell .st,
html[lang="ar"] .prestige-name,
html[lang="ar"] .maison .mt,
html[lang="ar"] .cat-card .cc-name,
html[lang="ar"] .chap-num,
html[lang="ar"] .media-caption,
html[lang="ar"] .btn-royal { font-family: 'Amiri', serif; }

/* ============================================================
   FLAG (Le Drapeau) — full bleed parallax
   ============================================================ */
#flag { position: relative; height: 130vh; background: var(--ink); padding: 0; overflow: clip; }
.flag-media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.flag-media .slot, .flag-media img, .flag-media video { width: 100%; height: 100%; object-fit: cover; }
.flag-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(16,16,16,.86) 0%, rgba(16,16,16,.5) 42%, transparent 75%),
  linear-gradient(180deg, rgba(16,16,16,.6), transparent 30%, rgba(16,16,16,.7)); }
html[lang="ar"] .flag-scrim { background:
  linear-gradient(270deg, rgba(16,16,16,.86) 0%, rgba(16,16,16,.5) 42%, transparent 75%),
  linear-gradient(180deg, rgba(16,16,16,.6), transparent 30%, rgba(16,16,16,.7)); }
.flag-content { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; z-index: 2; padding: 0 clamp(20px, 6vw, 120px); }
.flag-inner { max-width: 620px; }
.flag-quote { font-family: var(--font-display); font-weight: 700; color: var(--ivory); font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.08; letter-spacing: -0.015em; }
.flag-quote em { font-style: italic; color: var(--gold-bright); }
@media (max-width: 720px) {
  /* Mobile: portrait crop of the lobby photo puts the flag dead-center
     horizontally. The desktop side-gradient scrim would darken half the
     flag, so swap in a top-bottom scrim (dark at top for the title, clear
     through the flag, subtle dark at bottom for the body copy) and lift
     the title to the top so it sits over the dark portion. */
  .flag-scrim,
  html[lang="ar"] .flag-scrim {
    background:
      linear-gradient(180deg,
        rgba(16,16,16,.82) 0%,
        rgba(16,16,16,.42) 22%,
        transparent 48%,
        rgba(16,16,16,.28) 80%,
        rgba(16,16,16,.62) 100%);
  }
  .flag-content { align-items: flex-start; padding-top: clamp(48px, 8vh, 96px); }
  .flag-quote { font-size: clamp(1.5rem, 5.4vw, 2rem); }
  .flag-inner { max-width: 100%; }
}

/* ============================================================
   PRESTIGE (La Confiance)
   ============================================================ */
.prestige-list { margin-top: 50px; border-top: 1px solid var(--ivory-line); }
.chapter--ink .prestige-list { border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.prestige-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: baseline;
  padding: 28px 6px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  transition: background .4s var(--ease), padding-inline .4s var(--ease);
}
.prestige-row:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); padding-inline: 18px; }
.prestige-yr { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 18px; }
.prestige-name { font-family: var(--font-display); font-weight: 700; color: var(--ivory); font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.2; }
.prestige-place { color: var(--fg-on-dark-2); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-align: end; }
html[lang="ar"] .prestige-place { letter-spacing: 0.02em; font-size: 15px; }
@media (max-width: 720px){ .prestige-row { grid-template-columns: 50px 1fr; } .prestige-place { display:none; } }
/* Skeleton placeholders shown briefly before /references resolves */
.prestige-skel { min-height: 56px; position: relative; overflow: hidden; }
.prestige-skel::after {
  content: ""; position: absolute; inset: 18px 8px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 6%, transparent) 0%,
    color-mix(in srgb, var(--gold) 15%, transparent) 50%,
    color-mix(in srgb, var(--gold) 6%, transparent) 100%);
  background-size: 200% 100%;
  animation: brPrestigeSkel 1.6s ease-in-out infinite;
  border-radius: 3px;
}
@keyframes brPrestigeSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .prestige-skel::after { animation: none; } }

/* ============================================================
   SERVE (Au Service de)
   ============================================================ */
.serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ivory-line); border: 1px solid var(--ivory-line); border-radius: var(--r-md); overflow: hidden; margin-top: 50px; }
@media (max-width: 820px){ .serve-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .serve-grid { grid-template-columns: 1fr; } }
.serve-cell { background: var(--bg-elevated); padding: 38px 34px; min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; transition: background .55s var(--ease); }
.serve-cell .sn { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 15px; margin-bottom: 18px; position: relative; z-index: 2; transition: color .55s var(--ease), transform .55s var(--ease); }
.serve-cell .serve-rule { width: 30px; height: 1px; background: color-mix(in srgb, var(--gold) 60%, transparent); margin-bottom: 22px; position: relative; z-index: 2; transition: width .55s var(--ease); }
.serve-cell .st { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--ink); line-height: 1.3; text-wrap: balance; position: relative; z-index: 2; transition: color .55s var(--ease), transform .55s var(--ease); }
html[lang="ar"] .serve-cell .st { line-height: 1.55; }
/* Filet d'or hover */
/* Base "in-view" state: card is revealed automatically by the reveal IO
   (adds .in on scroll enter). Icon + widened rule become the visible
   resting state so nothing depends on hover. Desktop hover then layers a
   subtle emphasis on top (guarded by (hover: hover) below). */
.serve-cell.in .serve-rule { width: 46px; }
.serve-cell.in .serve-motif { opacity: .18; transform: none; }
.serve-cell.in .serve-motif path,
.serve-cell.in .serve-motif line,
.serve-cell.in .serve-motif polyline,
.serve-cell.in .serve-motif circle { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) {
  .serve-cell:hover { background: var(--ivory-warm); }
  .serve-cell:hover .serve-rule { width: 72px; }
  .serve-cell:hover .sn { color: var(--gold-deep); transform: translateX(7px); }
  .serve-cell:hover .st { color: var(--royal-red); transform: translateX(7px); }
  html[lang="ar"] .serve-cell:hover .sn,
  html[lang="ar"] .serve-cell:hover .st { transform: translateX(-7px); }
  .serve-cell:hover .serve-motif { opacity: .28; }
}
/* gold emblem that stitches itself in on hover */
.serve-motif { position: absolute; z-index: 1; bottom: 16px; inset-inline-end: 16px; width: clamp(94px, 9vw, 128px); height: auto; color: var(--gold); opacity: 0; transform: translateX(12px) scale(.94); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; }
html[lang="ar"] .serve-motif { transform: translateX(-12px) scale(.94); }
.serve-motif path, .serve-motif line, .serve-motif polyline, .serve-motif circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .95s var(--ease); }
@media (prefers-reduced-motion: reduce){ .serve-motif path, .serve-motif line, .serve-motif polyline, .serve-motif circle { stroke-dashoffset: 0; } .serve-cell .serve-motif { transform: none; opacity: .18; } }

/* ============================================================
   CATALOGUE / CONTACT / FOOTER
   ============================================================ */
#catalogue { text-align: center; }
.cat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 56px 0; text-align: start; }
@media (max-width: 820px){ .cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cat-cards { grid-template-columns: 1fr; } }
.cat-card { border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: var(--r-md); padding: 26px; background: color-mix(in srgb, var(--gold) 4%, transparent); transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); text-decoration: none; display: block; }
.cat-card:hover { transform: translateY(-4px); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.cat-card .cc-idx { color: var(--gold); font-family: var(--font-display); font-style: italic; }
.cat-card .cc-name { font-family: var(--font-display); font-weight: 700; color: var(--ivory); font-size: 1.3rem; margin: 8px 0; }
.cat-card .cc-desc { color: var(--fg-on-dark-2); font-size: 14px; line-height: 1.5; }

.btn-royal {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--royal-red); color: var(--ivory); border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
  padding: 18px 38px; border-radius: var(--r-sm); transition: all .3s var(--ease);
  box-shadow: var(--shadow-md);
}
.btn-royal:hover { background: var(--royal-red-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-royal .ar { width: 8px; height: 8px; border-top: 2px solid var(--gold-bright); border-right: 2px solid var(--gold-bright); transform: rotate(45deg); }
html[lang="ar"] .btn-royal .ar { transform: rotate(225deg); }

.maisons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: color-mix(in srgb, var(--gold) 20%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); border-radius: var(--r-md); overflow: hidden; margin-top: 70px; text-align: start; }
@media (max-width: 1024px){ .maisons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){ .maisons { grid-template-columns: 1fr; } }
.maison { background: var(--ink-80); padding: 40px; }
.maison .ml { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
html[lang="ar"] .maison .ml { letter-spacing: 0.04em; font-size: 14px; }
.maison .mt { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ivory); margin-bottom: 14px; }
.maison .md { color: var(--fg-on-dark-2); font-size: 14.5px; line-height: 1.7; }
.maison a { color: var(--gold-bright); }
/* keep phone/email numerals in logical LTR order under RTL */
html[lang="ar"] .maison .md a,
html[lang="ar"] .fb-contact a { direction: ltr; unicode-bidi: isolate; }
/* Footer contact icons (client asked to replace plain-text links with
   clickable icons that match the brand's ivory/gold identity).
   - White stroke by default, gold on hover with subtle lift
   - Native tooltip pill built from data-tooltip so screen readers still
     get aria-label and sighted users get the friendly label
   - Separator (.fb-sep) marks the divide between direct-contact icons
     and social platforms — same visual weight as the hairline dividers
     used elsewhere. */
.fb-contact svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
}
.fb-contact a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--ivory);
  border: 1px solid color-mix(in srgb, var(--ivory) 26%, transparent);
  background: transparent;
  text-decoration: none;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              background .35s var(--ease), transform .35s var(--ease);
}
.fb-contact a:hover,
.fb-contact a:focus-visible {
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  transform: translateY(-2px);
  outline: none;
}
.fb-contact a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--ivory);
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  border-radius: var(--r-sm, 4px);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fb-contact a:hover::after,
.fb-contact a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.fb-sep {
  display: inline-block;
  width: 1px; height: 22px;
  background: color-mix(in srgb, var(--ivory) 22%, transparent);
  margin: 0 6px;
}

/* Footer banner — the brand's signature red strip */
.footer-banner { background: var(--royal-red); color: var(--ivory); padding: clamp(48px, 7vw, 90px) clamp(20px, 6vw, 120px); text-align: center; position: relative; }
.footer-banner::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
/* Full brand lockup — crest+wordmark+AR+tagline in one file, so the
   proportions match the identity as designed (used to be two separate
   images at hand-picked sizes, which made the crest read too small
   relative to the wordmark). */
.fb-logo { display: block; width: clamp(220px, 26vw, 320px); height: auto; margin: 0 auto 8px; }
.fb-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.16em; font-size: clamp(1.1rem, 2vw, 1.5rem); text-transform: uppercase; }
.fb-ar { font-family: var(--font-arabic); font-size: 1.6rem; margin: 6px 0; color: var(--ivory); }
.fb-tag { font-family: var(--font-display); font-style: italic; color: var(--gold-bright); margin-top: 6px; }
.fb-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; font-size: 14px; color: color-mix(in srgb, var(--ivory) 88%, transparent); }
.fb-legal { margin-top: 30px; font-size: 12px; letter-spacing: 0.1em; color: color-mix(in srgb, var(--ivory) 60%, transparent); }
/* ============================================================
   MÉTIER VIDEO LIGHTBOX
   Click on a métier card opens this modal with a YouTube iframe.
   .open is added/removed via inline script in index.astro.
   Belt-and-braces hide: display:none + visibility:hidden so even if
   one rule is overridden by another stylesheet the modal still stays
   invisible until .open is set (an earlier opacity-only hide left
   the iframe rendered in the layout when something stripped the
   position:fixed during the CSS-defer swap).
   ============================================================ */
.metier-video { display: none; visibility: hidden; position: fixed; inset: 0; z-index: 2000; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(6px); place-items: center; padding: 6vh 4vw; }
.metier-video.open { display: grid; visibility: visible; }
.metier-video-frame { width: min(96vw, 1200px); aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); background: #000; }
.metier-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.metier-video-close { position: fixed; top: 22px; right: 22px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ivory); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); }
.metier-video-close:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }
html[lang="ar"] .metier-video-close { right: auto; left: 22px; }

.fb-credit { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.fb-credit::before { content: ""; width: 42px; height: 1px; background: color-mix(in srgb, var(--gold-bright) 55%, transparent); }
.fc-row { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.fc-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 58%, transparent); }
html[lang="ar"] .fc-label { letter-spacing: 0.05em; font-size: 13px; }
.fc-logo { height: 16px; width: auto; opacity: 0.9; transition: opacity 0.3s var(--ease); }
.fc-row:hover .fc-logo { opacity: 1; }

/* ============================================================
   REVEAL ANIMATION (base state; JS adds .in)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* ============================================================
   CLS guards — reserve space for dynamic content so the page doesn't
   reflow as the API resolves. Lighthouse measured CLS at 1.99 before
   these rules; static images are already in positioned containers with
   explicit dimensions so the only remaining shift sources are the
   skeleton-to-real swaps below and the hero crest height (handled via
   width/height attrs on <img>).
   ============================================================ */
.hero-crest, .hero-crown { height: auto; }
.partner-grid { min-height: 200px; }
.partner-marquee { min-height: 170px; }
/* Compact the Partners chapter so the marquee doesn't sit inside a huge
   near-empty band — matches the client's request to keep this section
   balanced and visually tight. */
#partners.chapter { padding-block: clamp(56px, 8vh, 96px); }
.testimonial-grid { min-height: 280px; }
.prestige-list { min-height: 220px; }
.faq-list, #faqList { min-height: 280px; }

/* slot placeholder styling (drop-zones for generated assets) */
.slot { display: grid; place-items: center; background:
  repeating-linear-gradient(45deg, color-mix(in srgb, var(--gold) 8%, var(--ink)) 0 12px, color-mix(in srgb, var(--gold) 4%, var(--ink)) 12px 24px);
  color: var(--gold); text-align: center; }
.slot .slot-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 16px; border: 1px solid color-mix(in srgb,var(--gold) 40%, transparent); border-radius: var(--r-pill); max-width: 80%; }

/* utility */
.center { text-align: center; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }

/* ===== TONAL PATTERNS (Fil royal) — damask broderie ===========
   Each brand surface tiles its tonal damask variant under a near-
   opaque colour veil so the pattern reads as a faint texture rather
   than wallpaper. Veil alpha controls visibility:
     0.78 = clearly visible damask
     0.85 = subtle texture (current default)
     0.92 = barely-there, almost imperceptible
   Drop the alpha to push the pattern forward, raise it to fade it
   further into the brand colour.
   --------------------------------------------------------------- */
.footer-banner {
  background-image:
    linear-gradient(rgba(131, 27, 26, 0.85), rgba(131, 27, 26, 0.85)),
    url("/assets/pattern-damask-red.webp");
  background-repeat: no-repeat, repeat;
  background-size: auto, 540px auto;
}
.chapter--ivory,
body.shop {
  background-image:
    linear-gradient(rgba(245, 242, 235, 0.88), rgba(245, 242, 235, 0.88)),
    url("/assets/pattern-damask-ivory.webp");
  background-repeat: no-repeat, repeat;
  background-size: auto, 540px auto;
}
#prestige, #catalogue {
  background-image:
    linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.85)),
    url("/assets/pattern-damask-ink.webp");
  background-repeat: no-repeat, repeat;
  background-size: auto, 540px auto;
}

/* ===== PARTNERS BAND (homepage) ===== */
.partners { background: var(--ivory); position: relative; }
.partners .wrap { text-align: center; }
.partners .lead { margin: 0 auto; max-width: 60ch; }
/* Section VI (Nos clients) now renders as a seamless infinite marquee
   instead of a static grid — one continuous ribbon of logos scrolls
   horizontally, matching the mobile-friendly pattern the client showed
   in their reference video. The .partner-marquee is the viewport; the
   .partner-track (built by the inline script) is doubled-up so the
   -50% translate loops back to a visually-identical frame. */
.partner-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 42px;
  /* Fade both edges so logos dissolve in/out rather than pop. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.partner-track {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  width: max-content;
  animation: partnerMarquee var(--marquee-duration, 32s) linear infinite;
  will-change: transform;
  /* Force the track's own writing direction to LTR regardless of the
     page's dir. Reason: under dir="rtl" the track's inline-start is the
     RIGHT edge of the parent, so a width:max-content track overflows to
     the LEFT — then translateX(-50%) shifts it FURTHER left, and for
     half the animation cycle the visible window sits past the end of
     the doubled content, showing no logos at all. Pinning direction: ltr
     anchors the track to the parent's left edge in every mode, so the
     -50% translate always lands on a visually-identical seam. */
  direction: ltr;
}
@keyframes partnerMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Arabic reads right-to-left, so reverse the scroll so logos enter from
   the reader's leading (right) edge. Only the animation direction flips
   — the track itself stays LTR-anchored (see the direction:ltr above). */
html[dir="rtl"] .partner-track { animation-direction: reverse; }
.partner-marquee:hover .partner-track,
.partner-marquee:focus-within .partner-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; transform: translateX(0); }
  .partner-marquee { overflow-x: auto; }
}
.partner-tile {
  flex: 0 0 auto; width: 200px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
@media (max-width: 900px){
  .partner-tile { width: 160px; padding: 14px; }
}
@media (max-width: 560px){
  /* Client spec: ~2–3 logos visible at a time on mobile. At 375px viewport
     with 12px gap, 130px tiles = 2 whole + edge fade. */
  .partner-tile { width: 130px; padding: 10px; }
  .partner-track { gap: 12px; }
}
/* Logos render in their original colors permanently — no hover or tap
   required to reveal them. Desktop hover only adds a subtle scale +
   brightness lift; touch devices see the same colored logo always. */
.partner-tile image-slot,
.partner-tile img {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  display: block; object-fit: contain;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .partner-tile:hover image-slot,
  .partner-tile:hover img { transform: scale(1.04); filter: brightness(1.06); }
}
a.partner-tile { text-decoration: none; color: inherit; }
/* Brief skeleton before /api/v1/website/partners resolves */
.partner-skel {
  background: linear-gradient(90deg,
    var(--bg-elevated) 0%,
    var(--ivory-warm) 50%,
    var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: brPartnerSkel 1.4s ease-in-out infinite;
}
@keyframes brPartnerSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .partner-skel { animation: none; } }
.partners-note { margin-top: 22px; font-size: 13px; letter-spacing: .04em; color: var(--fg2); font-style: italic; }
html[lang="ar"] .partners-note { font-size: 15px; }

/* ===== GALERIE ===== */
.gal-body { max-width: 1280px; margin: 0 auto; padding: clamp(36px,4vw,56px) clamp(20px,6vw,120px) 90px; }
.gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
/* Gallery grid: 3-image row pattern
     [portrait 2:3] [landscape 4:3, double-width] [portrait 2:3]

   Three explicit columns sized 1fr 2fr 1fr. The middle column is
   exactly twice the width of each side column (no gap eaten as
   part of the "double-width"). With portrait width = 1 unit and
   landscape width = 2 units, aspect-ratios 2:3 and 4:3 both
   resolve to height = 1.5 units — so all three tiles are the
   exact same height, top and bottom edges aligned across the row.

   The earlier repeat(4, 1fr) + landscape span 2 approach had the
   landscape swallowing the internal gap (2*col_w + 14), which
   made it slightly wider than 2×col_w and therefore slightly
   taller than the portraits at 4:3 — visible mismatch. */
.gal-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 14px;
}
.gal-item {
  position: relative; overflow: hidden; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--ivory-line); background: var(--ivory-warm);
  /* Base pre-reveal state — the gallery IO in effects.js adds .gal-in
     with a per-index transition-delay for staggered arrival. */
  opacity: 0;
  transform: translateY(22px) scale(.985);
  box-shadow: 0 0 0 0 transparent;
  transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .5s var(--ease);
}
.gal-item.gal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .gal-item { opacity: 1; transform: none; transition: box-shadow .3s var(--ease); }
}
.gal-item.gal-portrait  { aspect-ratio: 2 / 3; }
.gal-item.gal-landscape { aspect-ratio: 4 / 3; }
.gal-item img, .gal-item image-slot { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
/* Slot placeholder inside a gal-item — used when we don't yet have a
   correctly-oriented source photo for that slot. Fills the tile with
   the standard gold-striped placeholder + a pill labeling the target
   aspect ratio, so the client knows exactly which shape to upload. */
.gal-item .slot { width: 100%; height: 100%; position: absolute; inset: 0; }
.gal-item .slot .slot-label { font-family: var(--font-display); }
@media (max-width: 900px){
  /* Below 900px the double-width landscape is too wide to sit
     comfortably next to a single-column portrait — collapse to a
     single natural-flow column so each tile takes the full width
     while keeping its own aspect ratio. */
  .gal-grid { grid-template-columns: 1fr; }
}
@media (hover: hover) and (pointer: fine) {
  .gal-item:hover img,
  .gal-item:hover image-slot { transform: scale(1.06); }
  .gal-item:hover {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent),
      0 14px 32px -18px rgba(0,0,0,.32);
  }
}
.gal-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(16,16,16,.82)); opacity: 0; transition: opacity .5s var(--ease); }
.gal-item:hover::after { opacity: 1; }
.gal-cap { position: absolute; inset-inline: 20px; bottom: 18px; z-index: 2; color: var(--ivory); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.gal-item:hover .gal-cap { opacity: 1; transform: none; }
.gal-cap .gc-k { font-family: var(--font-display); font-style: italic; color: var(--gold-bright); font-size: 13px; }
.gal-cap .gc-t { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
html[lang="ar"] .gal-cap .gc-t { font-family: var(--font-arabic); }
@media (max-width: 720px) {
  /* Touch: no hover — so the caption + gold kicker + bottom scrim
     become the permanent resting state instead of a hover reveal.
     Otherwise every image on mobile renders as a flat rectangle with
     no context, and the caption is invisible until the user taps into
     the lightbox. */
  .gal-item::after { opacity: 1; }
  .gal-cap { opacity: 1; transform: none; }
}
/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1500; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(6px); display: none; place-items: center; padding: 5vh 4vw; }
.lightbox.open { display: grid; animation: lbIn .4s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbImgIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lightbox figure { margin: 0; max-width: 1000px; text-align: center; }
.lightbox img { max-width: 100%; max-height: 78vh; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.lightbox.open img { animation: lbImgIn .5s var(--ease); }
@media (prefers-reduced-motion: reduce){ .lightbox.open img { animation: none; } }
.lightbox figcaption { color: var(--ivory); margin-top: 16px; font-family: var(--font-display); }
.lightbox figcaption b { color: var(--gold-bright); font-style: italic; font-weight: 400; }
.lb-close { position: absolute; top: 24px; inset-inline-end: 30px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--gold) 40%, transparent); background: none; color: var(--ivory); font-size: 22px; cursor: pointer; transition: all .3s var(--ease); }
.lb-close:hover { background: color-mix(in srgb,var(--gold) 16%, transparent); border-color: var(--gold); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--gold) 40%, transparent); background: color-mix(in srgb,var(--ink) 40%, transparent); color: var(--ivory); font-size: 22px; cursor: pointer; transition: all .3s var(--ease); }
.lb-nav:hover { background: color-mix(in srgb,var(--gold) 18%, transparent); border-color: var(--gold); }
.lb-prev { inset-inline-start: 3vw; } .lb-next { inset-inline-end: 3vw; }
html[dir="rtl"] .lb-prev { transform: translateY(-50%) scaleX(-1); } html[dir="rtl"] .lb-next { transform: translateY(-50%) scaleX(-1); }

/* gallery CTA strip */
.gal-cta { margin-top: 64px; background: var(--ink); border-radius: var(--r-md); padding: clamp(36px,5vw,60px); text-align: center; position: relative; overflow: hidden; }
.gal-cta h2 { font-family: var(--font-display); color: var(--ivory); font-size: clamp(1.5rem,3vw,2.3rem); margin: 0 0 12px; }
html[lang="ar"] .gal-cta h2 { font-family: var(--font-arabic); }
.gal-cta p { color: var(--fg-on-dark-2); max-width: 50ch; margin: 0 auto 26px; line-height: 1.6; }

/* ===== DEVIS (multi-step quote) ===== */
.devis-body { max-width: 1180px; margin: 0 auto; padding: clamp(36px,4vw,56px) clamp(20px,6vw,120px) 90px; }
.devis-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px,4vw,60px); align-items: start; }
@media (max-width: 940px){ .devis-grid { grid-template-columns: 1fr; } }
.devis-card { background: var(--bg-elevated); border: 1px solid var(--ivory-line); border-radius: var(--r-md); padding: clamp(26px,3vw,42px); box-shadow: var(--shadow-md); }
.steps-rail { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.step-pip { display: flex; align-items: center; gap: 10px; }
.step-pip .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ivory-line); color: var(--fg2); font-family: var(--font-display); font-size: 14px; transition: all .4s var(--ease); }
.step-pip .lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); transition: color .4s var(--ease); }
html[lang="ar"] .step-pip .lab { letter-spacing: .02em; font-size: 14px; }
.step-pip.active .num { background: var(--royal-red); border-color: var(--royal-red); color: var(--ivory); }
.step-pip.active .lab { color: var(--ink); }
.step-pip.done .num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.steps-rail .rail-line { flex: 1; height: 1px; background: var(--ivory-line); }
@media (max-width: 560px){ .step-pip .lab { display: none; } }
.devis-step { display: none; }
.devis-step.on { display: block; }
.devis-step.anim { animation: riseIn .45s var(--ease); }
.devis-step h2 { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: clamp(1.3rem,2.2vw,1.8rem); margin: 0 0 6px; }
html[lang="ar"] .devis-step h2 { font-family: var(--font-arabic); }
.devis-step .step-hint { color: var(--fg2); margin-bottom: 22px; font-size: 14.5px; }
.prod-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px){ .prod-options { grid-template-columns: repeat(2, 1fr); } }
.prod-opt { border: 1px solid var(--ivory-line); border-radius: var(--r-sm); padding: 20px 16px; text-align: center; cursor: pointer; background: var(--ivory); transition: all .3s var(--ease); font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.prod-opt:hover { border-color: var(--gold); }
.prod-opt.sel { border-color: var(--royal-red); background: color-mix(in srgb, var(--royal-red) 6%, transparent); color: var(--royal-red); box-shadow: var(--shadow-sm); }
.devis-form-grid { display: grid; gap: 16px; }
.devis-actions { display: flex; gap: 12px; margin-top: 26px; }
.devis-aside { background: var(--ink); color: var(--ivory); border-radius: var(--r-md); padding: clamp(26px,3vw,38px); position: sticky; top: 96px; }
.devis-aside h3 { font-family: var(--font-display); color: var(--ivory); font-size: 1.3rem; margin: 0 0 18px; }
html[lang="ar"] .devis-aside h3 { font-family: var(--font-arabic); }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.why-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--fg-on-dark-2); font-size: 14.5px; line-height: 1.5; }
.why-list li .wi { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb,var(--gold) 16%, transparent); color: var(--gold-bright); font-family: var(--font-display); font-size: 13px; }
.devis-sent { text-align: center; padding: 40px 10px; display: none; }
.devis-sent.show { display: block; animation: riseIn .6s var(--ease); }
.devis-sent .seal { width: 72px; margin: 0 auto 18px; }
.devis-sent h2 { font-family: var(--font-display); color: var(--ink); font-size: 1.7rem; margin: 0 0 10px; }
html[lang="ar"] .devis-sent h2 { font-family: var(--font-arabic); }
.devis-sent p { color: var(--fg2); line-height: 1.6; max-width: 42ch; margin: 0 auto; }

/* ===== 404 ===== */
body.nf { background: var(--ink); }
.nf-wrap { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 60px 24px; position: relative; }
.nf-crest { width: 110px; margin: 0 auto 30px; opacity: 0; animation: overtureIn 1.6s var(--ease) forwards; }
.nf-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem,14vw,9rem); color: var(--gold); line-height: 1; letter-spacing: .04em; }
.nf-title { font-family: var(--font-display); font-weight: 700; color: var(--ivory); font-size: clamp(1.5rem,3.2vw,2.4rem); margin: 14px 0 12px; }
html[lang="ar"] .nf-title { font-family: var(--font-arabic); }
.nf-sub { color: var(--fg-on-dark-2); max-width: 44ch; margin: 0 auto 34px; line-height: 1.6; }
.nf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nf-ghost { display: inline-flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb,var(--gold) 45%, transparent); color: var(--ink); padding: 16px 30px; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 700; cursor: pointer; transition: all .3s var(--ease); }
.nf-ghost:hover { background: color-mix(in srgb,var(--gold) 14%, transparent); border-color: var(--gold); color: var(--gold-deep); }

/* ============================================================
   TESTIMONIALS — VI·c (ink chapter, gold ornament)
   ============================================================ */
.testimonials .wrap { text-align: center; }
.testimonials .lead { margin: 0 auto; max-width: 60ch; }

.testimonial-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 2.2vw, 30px); margin-top: 54px;
}
.testimonial-card {
  flex: 0 0 auto; width: 320px;
  background: color-mix(in srgb, var(--ink-80) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: var(--r-md); padding: 30px 26px 26px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  text-align: start; position: relative;
  box-shadow: var(--shadow-md);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testimonial-card:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
}
.tst-mark {
  font-family: var(--font-display); font-style: italic;
  font-size: 64px; line-height: 0.5; color: var(--gold);
  margin-top: 6px; opacity: .9;
}
.tst-quote {
  margin: 0; padding: 0; border: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; line-height: 1.55;
  color: var(--ivory);
}
.tst-stars { display: flex; gap: 2px; }
.tst-star { color: color-mix(in srgb, var(--gold) 25%, transparent); font-size: 13px; letter-spacing: 1px; }
.tst-star.on { color: var(--gold); }
.tst-author {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  width: 100%;
}
.tst-photo {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.tst-photo-blank {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold-bright); font-family: var(--font-display); font-weight: 700;
}
.tst-name {
  font-family: var(--font-display); font-weight: 700; color: var(--ivory);
  font-size: 14px; letter-spacing: 0.02em;
}
.tst-role {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-deep); margin-top: 2px;
}
html[lang="ar"] .tst-quote,
html[lang="ar"] .tst-name { font-family: var(--font-arabic); font-style: normal; }

/* Loading skeleton */
.testimonial-skel {
  border-color: color-mix(in srgb, var(--gold) 10%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink-80) 60%, transparent) 0%,
    color-mix(in srgb, var(--ink-80) 80%, transparent) 50%,
    color-mix(in srgb, var(--ink-80) 60%, transparent) 100%);
  background-size: 200% 100%;
  animation: brTstSkel 1.6s ease-in-out infinite;
  min-height: 260px;
}
@keyframes brTstSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .testimonial-skel { animation: none; } }

@media (max-width: 900px) {
  .testimonial-card { width: 280px; padding: 26px 22px 22px; }
}
@media (max-width: 560px) {
  .testimonial-grid { gap: 16px; }
  .testimonial-card { width: 100%; max-width: 420px; padding: 24px 20px 20px; }
}

/* ============================================================
   FAQ — VI·d (ivory chapter, accordion)
   ============================================================ */
.faq .wrap { text-align: center; }
.faq .lead { margin: 0 auto; max-width: 60ch; }

.faq-list {
  max-width: 760px; margin: 54px auto 0;
  text-align: start;
  border-top: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  background: transparent;
}
.faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink);
  transition: color .3s var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--royal-red); }
html[lang="ar"] .faq-q,
html[lang="ar"] .faq-q-text { font-family: var(--font-arabic); font-weight: 400; }
html[lang="ar"] .faq-a { font-family: var(--font-arabic); font-size: 1.05rem; line-height: 1.85; }

.faq-toggle {
  position: relative; flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 50%;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--ease);
}
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; background: var(--gold-deep);
  left: 50%; top: 50%;
}
.faq-toggle::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-toggle::after  { width: 1.5px; height: 10px; transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.faq-item[open] .faq-toggle {
  background: var(--gold); border-color: var(--gold);
  transform: rotate(45deg);
}
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after { background: var(--ink); }

.faq-a {
  padding: 0 8px 22px 8px;
  color: var(--fg2); line-height: 1.7;
  font-size: 1rem;
  max-width: 70ch;
}
html[dir="rtl"] .faq-a { padding-inline: 8px; }

/* Subtle entrance for opening answers */
.faq-item[open] .faq-a { animation: brFaqOpen .35s var(--ease); }
@keyframes brFaqOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Loading skeleton */
.faq-skel {
  min-height: 64px;
  background: linear-gradient(90deg,
    var(--bg-elevated) 0%,
    var(--ivory-warm) 50%,
    var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: brFaqSkel 1.6s ease-in-out infinite;
}
@keyframes brFaqSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .faq-skel { animation: none; } }

@media (max-width: 560px) {
  .faq-q { padding: 18px 4px; font-size: 0.98rem; gap: 14px; }
  .faq-a { padding: 0 4px 18px 4px; font-size: 0.95rem; }
}