/* =========================================================================
   NJM & Betty Beauty Lounge — maquette de la page d'accueil
   Mécanique et mesures calquées sur era-residence.com (voir recherche/era/ERA_MESURES.md)
   Palette C. Unités fluides : html{font-size:1vw}, 1 px de maquette = 1rem / --r
   ========================================================================= */

/* ---------- Jetons ---------- */
:root {
  --color-ivory: #F8F4EC;
  --color-ink: #201B1B;
  --color-bordeaux: #7A1F35;
  --color-sand: #E6D8C3;
  --color-gold: #B8975A;              /* filets uniquement, jamais en texte */

  --color-ivory-80: rgb(248 244 236 / .8);
  --color-ivory-65: rgb(248 244 236 / .65);
  --color-ivory-20: rgb(248 244 236 / .2);
  --color-ink-65: rgb(32 27 27 / .65);
  --color-ink-12: rgb(32 27 27 / .12);
  --color-bordeaux-deep: #5E1628;

  --font-display: "ambroise-francois-std", "Noto Naskh Arabic", "Didot", "Bodoni 72", serif;
  --font-sub: "ambroise-std", "Noto Naskh Arabic", "Didot", serif;
  --font-accent: "sloop-script-three", "Noto Naskh Arabic", cursive;
  --font-body: "Alegreya Sans", "Noto Naskh Arabic", system-ui, sans-serif;  /* provisoire : Maison Neue Extended chez ERA */

  --dur-s: .4s;
  --dur-m: .8s;
  --dur-l: 1.2s;
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease: cubic-bezier(.25, .1, .25, 1);

  --r: 16;                            /* bureau : maquette 1600 px */
  --u: calc(1rem / var(--r));         /* 1 px de maquette */
  --offset: calc(48 * var(--u));
  --gap: calc(16 * var(--u));
  --section-pad: calc(160 * var(--u));
  --header-fg: var(--color-ivory);
}
@media (min-width: 600px) and (max-width: 991px) { :root { --r: 7; } }
@media (max-width: 991px) {
  :root { --offset: calc(24 * var(--u)); --section-pad: calc(96 * var(--u)); }
}
@media (max-width: 599px) { :root { --r: 4.16; } }  /* mobile : maquette 416 px, comme ERA */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 1vw; background: var(--color-bordeaux); -webkit-text-size-adjust: 100%; }
@media (min-width: 2200px) { html { font-size: 22px; } }   /* garde-fou très grands écrans */
body {
  margin: 0; font-family: var(--font-body); font-size: max(15px, calc(16 * var(--u)));
  line-height: 1.45; color: var(--color-ink); background: var(--color-ivory);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, blockquote, ul, figure { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { color: var(--color-ivory); background: var(--color-bordeaux); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.container { padding-inline: var(--offset); position: relative; }

/* ---------- Thèmes par section (ERA : theme_on-light / -brand / -color / -dark) ---------- */
[data-theme] { background: var(--bg); color: var(--fg); }
[data-theme="light"] { --bg: var(--color-ivory); --fg: var(--color-ink); --fg-soft: var(--color-ink-65); --line: var(--color-ink-12); --btn-bg: var(--color-bordeaux); --btn-fg: var(--color-ivory); }
[data-theme="sand"]  { --bg: var(--color-sand);  --fg: var(--color-ink); --fg-soft: var(--color-ink-65); --line: var(--color-ink-12); --btn-bg: var(--color-bordeaux); --btn-fg: var(--color-ivory); }
[data-theme="color"], [data-theme="dark"] { --bg: var(--color-bordeaux); --fg: var(--color-ivory); --fg-soft: var(--color-ivory-65); --line: var(--color-ivory-20); --btn-bg: var(--color-ivory); --btn-fg: var(--color-bordeaux); }

/* ---------- Typographie (échelle d'ERA, px de maquette) ---------- */
.h1, .h2, .h3, .h4, .h5, .h6, .c1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-feature-settings: "case", "lnum"; display: block;
}
.h1 { font-size: calc(192 * var(--u)); line-height: .875; letter-spacing: -.024em; }
.h2 { font-size: calc(136 * var(--u)); line-height: .882; letter-spacing: -.024em; }
.h3 { font-size: calc(96 * var(--u));  line-height: .917; letter-spacing: -.024em; }
.h4 { font-size: calc(63 * var(--u));  line-height: .889; letter-spacing: -.016em; }
.h5 { font-size: calc(40 * var(--u));  line-height: 1;    letter-spacing: -.008em; }
.h6 { font-size: calc(28 * var(--u));  line-height: 1.1;  letter-spacing: 0; }
.c1 { font-size: max(12px, calc(25 * var(--u))); line-height: 1.12; letter-spacing: .8em; margin-inline-end: -.8em; }
.a1, .a2 { font-family: var(--font-accent); font-weight: 400; text-transform: none; letter-spacing: 0; display: block; line-height: 1; }
.a1 { font-size: calc(192 * var(--u)); margin: .175em 0 -.175em; }
.a2 { font-size: calc(120 * var(--u)); }
.p1 { font-size: max(15px, calc(17 * var(--u))); line-height: 1.45; letter-spacing: .005em; }
.p2 { font-size: max(13px, calc(14 * var(--u))); line-height: 1.45; }
.l1 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: max(11px, calc(12 * var(--u))); line-height: 1.45; letter-spacing: .12em; }
.l2 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: max(10px, calc(10 * var(--u))); line-height: 1.33; letter-spacing: .32em; }

@media (max-width: 991px) {
  .h1 { font-size: calc(96 * var(--u)); line-height: .917; }
  .h2 { font-size: calc(73 * var(--u)); line-height: .877; }
  .h3 { font-size: calc(56 * var(--u)); line-height: .929; }
  .h4 { font-size: calc(40 * var(--u)); line-height: 1; }
  .h5 { font-size: calc(28 * var(--u)); }
  .h6 { font-size: calc(24 * var(--u)); }
  .c1 { font-size: calc(15 * var(--u)); line-height: 1.26; letter-spacing: .6em; margin-inline-end: -.6em; }
  .a1 { font-size: calc(96 * var(--u)); }
  .a2 { font-size: calc(72 * var(--u)); }
  .p1 { font-size: max(15px, calc(16 * var(--u))); }
}

/* Arabe : pas d'interlettrage (il casse la liaison), interlignes plus hauts, repli Noto Naskh */
html[lang="ar"] body { font-family: "Noto Naskh Arabic", var(--font-body); }
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3, html[lang="ar"] .h4,
html[lang="ar"] .h5, html[lang="ar"] .h6 { letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] .c1, html[lang="ar"] .l1, html[lang="ar"] .l2 { letter-spacing: 0; margin-inline-end: 0; }
html[lang="ar"] .c1 { font-size: max(14px, calc(22 * var(--u))); }
html[lang="ar"] .a1 { font-size: calc(120 * var(--u)); margin: 0; line-height: 1.3; }
html[lang="ar"] .a2 { font-size: calc(80 * var(--u)); line-height: 1.3; }
html[lang="ar"] .p1 { font-size: max(16px, calc(18 * var(--u))); line-height: 1.8; }
html[lang="ar"] .h1 { font-size: calc(150 * var(--u)); }
html[lang="ar"] .h2 { font-size: calc(110 * var(--u)); }
@media (max-width: 991px) {
  html[lang="ar"] .h1 { font-size: calc(76 * var(--u)); }
  html[lang="ar"] .h2 { font-size: calc(58 * var(--u)); }
  html[lang="ar"] .a1 { font-size: calc(64 * var(--u)); }
  html[lang="ar"] .a2 { font-size: calc(48 * var(--u)); }
}
/* les marques et numéros restent en latin, sens gauche-droite */
[dir="ltr"] { unicode-bidi: isolate; }

/* ---------- Découpes SplitText ---------- */
.split-line, .split-word, .split-char { display: inline-block; will-change: transform; }
.split-line-mask { display: block; }  /* une ligne découpée = une ligne : sinon deux lignes courtes se recollent (adresse en arabe) */
.split-char { backface-visibility: hidden; }

/* Anti-clignotement : les blocs animés restent cachés jusqu'à leur état initial posé par le JS */
.js:not(.is-reduced) [data-scroll-reveal]:not([data-scroll-reveal="w"]),
.js:not(.is-reduced) [data-hero-reveal],
.js:not(.is-reduced) [data-pre] { visibility: hidden; }

/* ---------- Filets or ---------- */
.gold-line { display: block; height: 1px; width: 100%; background: var(--color-gold); }
.gold-line--short { width: calc(64 * var(--u)); }

/* ---------- Monogramme en médaillon (couleurs d'origine sur ivoire) ---------- */
.mono-disc { display: grid; place-items: center; border-radius: 50%; background: var(--color-ivory); aspect-ratio: 1; overflow: hidden; }
.mono-disc img { width: 80%; height: auto; }

/* ---------- Boutons (ERA [hover-btn]) ---------- */
.btn {
  --btn-bg-t: 100%; --btn-bg-br: 100%; --btn-text-c: var(--fg);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: max(44px, calc(48 * var(--u))); padding: 0 max(20px, calc(28 * var(--u)));
  border: 1px solid currentColor; border-radius: 999px; overflow: hidden; isolation: isolate;
  color: var(--fg); white-space: nowrap;
  transition: color var(--dur-m) var(--ease-in-out), border-color var(--dur-m) var(--ease-in-out);
}
.btn_bg {
  position: absolute; left: -1px; right: -1px; top: var(--btn-bg-t); height: calc(100% + 2px);
  border-radius: var(--btn-bg-br); background: var(--btn-bg); z-index: -1;
  transition: top var(--dur-m) var(--ease-in-out), border-radius var(--dur-m) var(--ease-in-out);
}
.btn_t { color: var(--btn-text-c); transition: color var(--dur-m) var(--ease-in-out); }
.btn_t { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: max(11px, calc(12 * var(--u))); letter-spacing: .12em; }
html[lang="ar"] .btn_t { letter-spacing: 0; font-size: max(14px, calc(15 * var(--u))); }
@media (min-width: 992px) {
  .btn:hover { --btn-bg-t: 0%; --btn-bg-br: 0%; --btn-text-c: var(--btn-fg); border-color: var(--btn-bg); }
}

/* ---------- Liens soulignés (ERA [hover-link], version CSS) ---------- */
[hover-link] { position: relative; display: inline-block; }
[hover-link]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: 1px; background: currentColor;
  transform-origin: right center; transform: scaleX(1);
}
@media (min-width: 992px) { [hover-link]:hover::after { animation: link-sweep var(--dur-m) var(--ease-out); } }
@keyframes link-sweep {
  0% { transform: scaleX(1); transform-origin: right center; }
  50% { transform: scaleX(0); transform-origin: right center; }
  50.1% { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

/* ---------- Cartes image (ERA [hover-img-card] : zoom 1.15 en 1.2 s) ---------- */
[hover-img-card] { --img-sc: 1; }
[hover-img-card] [hover="img"] { transform: scale(var(--img-sc)); transition: transform var(--dur-l) var(--ease-out); }
@media (min-width: 992px) { [hover-img-card]:hover { --img-sc: 1.15; } }

/* =========================================================================
   PRÉCHARGEUR — aplat bordeaux percé d'une arche (masque CSS, comme ERA)
   ========================================================================= */
.preloader {
  --arch-w: 36vw;
  --arch-h: calc(var(--arch-w) / (560 / 2592));
  --arch-y: 104vh;
  position: fixed; inset: 0; z-index: 100; background: var(--color-bordeaux); color: var(--color-ivory);
  display: grid; place-items: center;
  -webkit-mask-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), url("../assets/logo/arche.svg");
          mask-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), url("../assets/logo/arche.svg");
  --side: max(0px, calc(50% - (var(--arch-w) / 2) + 2px));
  -webkit-mask-size: var(--side) 100%, calc(var(--arch-w) + 4px) max(0px, calc(var(--arch-y) + 2px)), var(--side) 100%, var(--arch-w) var(--arch-h);
          mask-size: var(--side) 100%, calc(var(--arch-w) + 4px) max(0px, calc(var(--arch-y) + 2px)), var(--side) 100%, var(--arch-w) var(--arch-h);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left top, center top, right top, center var(--arch-y);
          mask-position: left top, center top, right top, center var(--arch-y);
}
.preloader_inner { display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--u)); text-align: center; }
.preloader_mono { width: calc(120 * var(--u)); opacity: 0; }
.preloader_texts { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
.preloader_texts .a2 { margin: -.32em 0 .1em; }
.preloader_progress { width: calc(160 * var(--u)); height: 1px; background: var(--color-ivory-20); overflow: hidden; }
.preloader_progress_track { height: 100%; width: 100%; background: var(--color-gold); transform-origin: left center; transform: scaleX(0); }
html[dir="rtl"] .preloader_progress_track { transform-origin: right center; }
@media (max-width: 991px) { .preloader { --arch-w: 50vw; } .preloader_mono { width: calc(88 * var(--u)); } }
.is-reduced .preloader, .no-js .preloader { display: none; }

/* =========================================================================
   ÉLÉMENTS FIXES
   ========================================================================= */
html[data-header-theme="light"], html[data-header-theme="sand"] { --header-fg: var(--color-ink); }
html[data-header-theme="color"], html[data-header-theme="dark"] { --header-fg: var(--color-ivory); }

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: calc(24 * var(--u)); padding: calc(24 * var(--u)) var(--offset); color: var(--header-fg);
  transition: color var(--dur-s) var(--ease-out); pointer-events: none;
}
.header > * { pointer-events: auto; }
.header .btn { --fg: var(--header-fg); --btn-bg: var(--header-fg); --btn-fg: var(--color-bordeaux); }
html[data-header-theme="light"] .header .btn, html[data-header-theme="sand"] .header .btn { --btn-fg: var(--color-ivory); --btn-bg: var(--color-bordeaux); }

.header-logo { position: relative; width: calc(112 * var(--u)); aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.header-logo_ring { position: absolute; inset: 0; width: 100%; height: 100%; background-color: currentColor;
  -webkit-mask: url(../assets/logo/anneau-13.svg) center / 100% 100% no-repeat; mask: url(../assets/logo/anneau-13.svg) center / 100% 100% no-repeat; }
.header-logo_mono { width: 58%; }

.header-nav { display: flex; gap: calc(40 * var(--u)); margin-inline-end: auto; margin-inline-start: calc(48 * var(--u)); }
.nav-item { position: relative; display: inline-block; overflow: hidden; }
.nav-item_t { display: block; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: max(11px, calc(12 * var(--u))); letter-spacing: .12em; line-height: 1.5; }
.nav-item_t:nth-child(2) { position: absolute; inset: 0; transform: translateY(100%); }
html[lang="ar"] .nav-item_t { letter-spacing: 0; font-size: max(14px, calc(15 * var(--u))); }

.header-right { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.lang-switch { display: flex; gap: calc(4 * var(--u)); }
.lang-btn {
  font-family: var(--font-body); font-weight: 700; font-size: max(10px, calc(11 * var(--u))); letter-spacing: .16em;
  padding: 6px 8px; opacity: .55; transition: opacity var(--dur-m) var(--ease-out); position: relative;
}
.lang-btn[lang="ar"] { font-family: "Noto Naskh Arabic", serif; letter-spacing: 0; font-size: max(13px, calc(14 * var(--u))); }
.lang-btn.is-active { opacity: 1; }
.lang-btn.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 1px; background: var(--color-gold); }
.lang-btn:hover { opacity: 1; }

.burger { display: none; align-items: center; gap: 12px; min-height: 44px; }
.burger_t { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.burger_lines { display: grid; gap: 6px; width: 24px; }
.burger_lines span { display: block; height: 1px; background: currentColor; }

.s-bar {
  position: fixed; z-index: 40; inset-inline-start: calc(24 * var(--u)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--header-fg);
  transition: color var(--dur-s) var(--ease-out);
}
.s-bar_track { width: 1px; height: 22vh; background: currentColor; opacity: .25; position: relative; }
.s-bar_progress { position: absolute; inset: 0; background: currentColor; transform-origin: top; transform: scaleY(var(--progress, 0)); opacity: 4; }
.s-bar_label { writing-mode: vertical-rl; }
html[lang="ar"] .s-bar_label { writing-mode: horizontal-tb; }

@media (max-width: 991px) {
  .header { padding: 12px var(--offset); }
  .header-logo { width: max(64px, calc(80 * var(--u))); }
  .header-logo_ring { -webkit-mask-image: url(../assets/logo/anneau-15.svg); mask-image: url(../assets/logo/anneau-15.svg); }
  .header-nav, .header-right .lang-switch, .header-btn, .s-bar { display: none; }
  .burger { display: inline-flex; }
}

/* ---------- Menu plein écran ---------- */
.menu { position: fixed; inset: 0; z-index: 80; background: transparent; }
.menu[hidden] { display: none; }
.menu_veil { position: absolute; inset: 0; background: rgb(32 27 27 / .4); }
.menu_panel {
  position: absolute; inset: 0; background: var(--color-bordeaux); color: var(--color-ivory);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(24 * var(--u)) var(--offset) calc(32 * var(--u));
  padding-top: max(96px, calc(160 * var(--u)));
}
.menu_head { display: flex; justify-content: space-between; align-items: center; position: absolute; top: 20px; inset-inline: var(--offset); }
.menu_close { min-height: 44px; }
.menu_nav { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.menu_link { display: block; }
.menu_foot { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.lang-switch--menu .lang-btn, .lang-switch--footer .lang-btn { letter-spacing: .08em; font-size: 14px; padding: 6px 10px 6px 0; }
.lang-switch--menu, .lang-switch--footer { flex-wrap: wrap; gap: 8px 18px; }

/* =========================================================================
   FLEURS (bougainvilliers) — vidéos détourées en carré de 50 vw, comme ERA
   ========================================================================= */
.flower { position: absolute; top: 0; width: 50vw; aspect-ratio: 1; pointer-events: none; z-index: 3; }
.flower_v, .flower img { width: 100%; height: 100%; object-fit: contain; }
/* Toutes les fleurs d'ERA « pendent » : le bord haut du carré est coupé net.
   On les accroche donc au bord haut d'une section qui les rogne (overflow), comme ERA. */
.flower--hero-l { left: -9vw; top: -9vw; width: 30vw; }
.flower--hero-r { right: -7vw; top: -6vw; width: 40vw; }
.flower--services { right: -3vw; top: -5vw; width: 30vw; z-index: 2; }
.flower--bridal { left: -6vw; top: -13vw; width: 38vw; z-index: 1; }
.flower--place { right: -6vw; top: -6vw; width: 36vw; z-index: 0; }
.flower--cta { right: -8vw; top: -6vw; width: 44vw; }
.flower--cta2 { left: -10vw; top: -10vw; width: 34vw; }
.flower--footer { left: -6vw; top: -38vw; width: 112vw; z-index: 0; }  /* guirlande : le 05 touche les deux bords, il déborde des deux côtés */
html[dir="rtl"] .flower_v, html[dir="rtl"] .flower img { transform: scaleX(-1); }
html[dir="rtl"] .flower--hero-l { left: auto; right: -9vw; }
html[dir="rtl"] .flower--hero-r { right: auto; left: -7vw; }
html[dir="rtl"] .flower--bridal { left: auto; right: -6vw; }
html[dir="rtl"] .flower--place { right: auto; left: -6vw; }
html[dir="rtl"] .flower--cta { right: auto; left: -8vw; }
html[dir="rtl"] .flower--cta2 { left: auto; right: -10vw; }
html[dir="rtl"] .flower--footer { left: auto; right: -6vw; }
html[dir="rtl"] .flower--services { right: auto; left: -3vw; }
@media (max-width: 991px) {
  .flower--hero-l, .flower--services, .flower--place, .flower--cta2 { display: none; }
  .flower--hero-r { width: 78vw; right: -18vw; top: -10vw; }
  .flower--bridal { width: 80vw; left: -20vw; top: -12vw; }
  .flower--cta { width: 80vw; right: -20vw; top: -10vw; }
  .flower--footer { width: 130vw; left: -15vw; top: -46vw; }
  html[dir="rtl"] .flower--hero-r { left: -18vw; }
  html[dir="rtl"] .flower--bridal { right: -20vw; }
  html[dir="rtl"] .flower--cta { left: -20vw; }
  html[dir="rtl"] .flower--footer { right: -15vw; left: auto; }
}

/* =========================================================================
   1. HERO — zone collante, zoom dans l'image au défilement
   ========================================================================= */
.hero-area { position: relative; height: 250vh; z-index: 1; }
.hero-w { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--color-bordeaux); }
.hero_img_w { position: absolute; inset: 0; transform-origin: 50% 75%; will-change: transform; }
.hero_img { width: 100%; height: 100%; object-fit: cover; }
.hero_veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgb(94 22 40 / .55), rgb(94 22 40 / 0) 70%),
    linear-gradient(180deg, rgb(122 31 53 / .72) 0%, rgb(122 31 53 / .5) 45%, rgb(94 22 40 / .82) 100%);
}
.hero_content {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(140 * var(--u)) var(--offset) calc(64 * var(--u)); color: var(--color-ivory);
}
.hero_kicker { margin-bottom: calc(32 * var(--u)); }
.hero_title { display: flex; flex-direction: column; align-items: center; }
.hero_h1 { white-space: nowrap; }
.hero_script { margin-top: -.42em; padding-inline-start: 1.6em; }
.hero_lead { max-width: calc(440 * var(--u)); margin-top: calc(72 * var(--u)); color: var(--color-ivory-80); }
.hero_btn { margin-top: calc(40 * var(--u)); }
html[lang="ar"] .hero_script { margin-top: 0; padding-inline-start: 0; }
@media (max-width: 991px) {
  .hero-area { height: 200vh; }
  .hero_h1 { white-space: normal; }
  .hero_script { padding-inline-start: .6em; margin-top: -.3em; }
  .hero_lead { max-width: 30em; }
}

/* =========================================================================
   2. MANIFESTE — section en arche (border-radius 50vw), remonte sur le hero
   ========================================================================= */
.section { position: relative; padding-block: var(--section-pad); }
.arch { border-top-left-radius: 50vw; border-top-right-radius: 50vw; }
.quote-s { margin-top: -100vh; z-index: 2; padding-top: 24vw; overflow: clip; }
.quote_grid { display: grid; grid-template-columns: repeat(10, 1fr); column-gap: var(--gap); align-items: center; }
.quote_media { grid-column: 2 / span 3; position: relative; }
.quote_text { grid-column: 6 / span 4; display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
/* arc de texte : même centre que le demi-cercle de l'arche, rayon + écart constant (js/main.js, initArcText) */
.arc-text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.arc-text_t { font-family: var(--font-display); text-transform: uppercase; fill: var(--color-bordeaux); font-feature-settings: "case"; }
html[lang="ar"] .arc-text_t { font-family: "Noto Naskh Arabic", serif; text-transform: none; }
.arch-frame { position: relative; aspect-ratio: 3 / 4.4; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--color-bordeaux); z-index: 1; }
.arch-frame video, .arch-frame img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.quote_q .h4 { display: block; }
.quote_line { display: block; }
.quote_script { color: var(--color-bordeaux); margin: -.12em 0 -.05em; padding-inline-start: .8em; }
.quote_body { max-width: 32em; color: var(--fg-soft); }
.quote_sign { color: var(--fg-soft); }
.quote-s .gold-line { width: calc(96 * var(--u)); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 991px) {
  .quote-s { margin-top: -60vh; padding-top: 40vw; }
  .quote_grid { grid-template-columns: repeat(4, 1fr); row-gap: calc(64 * var(--u)); }
  .quote_media { grid-column: 1 / span 3; grid-row: 2; margin-inline-start: 12%; }
  .quote_text { grid-column: 1 / -1; }
}

/* =========================================================================
   3. PRESTATIONS — défilement horizontal piloté par le défilement vertical
   ========================================================================= */
.services-area { position: relative; z-index: 2; height: var(--hs-h, 400vh); }
.services-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.services-track { display: flex; align-items: center; height: 100%; gap: calc(96 * var(--u)); padding-inline: calc(120 * var(--u)) calc(48 * var(--u)); will-change: transform; }
.services-intro { flex: none; width: 36vw; display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.services-title .a1 { color: var(--color-bordeaux); margin-top: -.45em; padding-inline-start: 1.2em; }
.services-intro_p { max-width: 24em; color: var(--fg-soft); }
.services-intro_hint { display: inline-flex; gap: 12px; color: var(--fg-soft); }
html[dir="rtl"] .services-intro_hint .arrow { transform: scaleX(-1); display: inline-block; }
.service-card { flex: none; width: 24vw; }
.service-card--low { margin-top: 18vh; }
.service-card--wide { width: 36vw; }
.service-card_link { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.service-card_img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-sand); }
.service-card--wide .service-card_img { aspect-ratio: 3 / 2; }
.service-card_img img { width: 100%; height: 100%; object-fit: cover; }
.service-card_meta { display: flex; align-items: center; gap: 16px; margin-top: calc(8 * var(--u)); }
.service-card_n { color: var(--fg-soft); }
.service-card_p { color: var(--fg-soft); max-width: 26em; }
.services-end { flex: none; width: 1px; }
@media (max-width: 991px) {
  .services-area { height: auto; }
  .services-sticky { position: static; height: auto; overflow: visible; display: block; padding-block: var(--section-pad); }
  .services-track { flex-direction: column; align-items: stretch; gap: calc(64 * var(--u)); padding-inline: var(--offset); transform: none !important; }
  .services-intro, .service-card, .service-card--wide { width: 100%; }
  .service-card--low { margin-top: 0; }
  .service-card:nth-of-type(even) { padding-inline-start: 14%; }
  .services-intro_hint { display: none; }
}

/* =========================================================================
   4. ESPACE MARIÉE
   ========================================================================= */
.bridal-s { z-index: 3; overflow: clip; }
.bridal_grid { display: grid; grid-template-columns: repeat(10, 1fr); column-gap: var(--gap); align-items: start; }
.bridal_media { grid-column: 1 / span 5; }
.bridal_img { aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.bridal_img img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.bridal_text { grid-column: 7 / span 4; display: flex; flex-direction: column; gap: calc(32 * var(--u)); padding-top: calc(96 * var(--u)); }
.bridal_title .a1 { margin-top: -.4em; padding-inline-start: 1em; }
.bridal_p { color: var(--fg-soft); max-width: 28em; }
.bridal_list li { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; }
.bridal_list li:last-child { padding-bottom: 0; }
.bridal_img2 { width: 62%; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; margin-top: calc(32 * var(--u)); margin-inline-start: auto; }
.bridal_img2 img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
  .bridal_grid { grid-template-columns: repeat(4, 1fr); row-gap: calc(48 * var(--u)); }
  .bridal_media { grid-column: 1 / -1; }
  .bridal_text { grid-column: 1 / -1; padding-top: 0; }
}

/* =========================================================================
   4 bis. AVIS GOOGLE — cartes en défilement continu (pause au survol), étoiles or
   ========================================================================= */
.reviews-s { z-index: 3; overflow: clip; }
.reviews_head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(28 * var(--u)); margin-bottom: calc(88 * var(--u)); }
.reviews_sub { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; color: var(--fg-soft); }
.stars { display: inline-flex; gap: max(3px, calc(4 * var(--u))); color: var(--color-gold); }
.stars svg { width: max(13px, calc(16 * var(--u))); height: auto; fill: currentColor; }
.reviews_marquee { overflow: hidden; }
.reviews_track { display: flex; align-items: stretch; gap: calc(24 * var(--u)); width: max-content; padding-inline: var(--offset); will-change: transform; }
.review {
  flex: none; width: calc(440 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u)) calc(30 * var(--u)); background: var(--color-ivory); border-top: 1px solid var(--color-gold);
}
.review_q { flex: 1; font-family: var(--font-sub); font-style: italic; font-size: max(17px, calc(23 * var(--u))); line-height: 1.38; letter-spacing: 0; }
.review_meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-top: calc(18 * var(--u)); border-top: 1px solid var(--line); }
.review_name { color: var(--fg); }
.review_date, .review_src { color: var(--fg-soft); }
.review_src { margin-top: calc(-14 * var(--u)); }
.reviews_actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(24 * var(--u)) calc(48 * var(--u)); margin-top: calc(88 * var(--u)); }
html[lang="ar"] .review_q { font-family: "Noto Naskh Arabic", serif; font-style: normal; font-size: max(17px, calc(21 * var(--u))); line-height: 1.8; }
/* mobile et mouvement réduit : défilement tactile natif, cartes aimantées */
.reviews_marquee.is-native { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--offset); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reviews_marquee.is-native::-webkit-scrollbar { display: none; }
.reviews_marquee.is-native .review { scroll-snap-align: start; }
@media (max-width: 991px) {
  .reviews_head { margin-bottom: calc(48 * var(--u)); }
  .review { width: calc(330 * var(--u)); padding: 28px 22px 22px; gap: 18px; }
  .review_src { margin-top: -10px; }
  .reviews_actions { flex-direction: column; margin-top: calc(48 * var(--u)); }
}

/* =========================================================================
   5. LE LIEU
   ========================================================================= */
.place-s { z-index: 4; overflow: clip; isolation: isolate; }
/* scène : photo du salon traitée, légèrement floutée, fondue dans l'ivoire */
.place_bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--color-ivory); }
.place_bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px) saturate(.9); transform: scale(1.05); opacity: .8; }
.place_bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-ivory) 0%, rgb(248 244 236 / .5) 26%, rgb(230 216 195 / .25) 62%, rgb(248 244 236 / .85) 100%); }
.place_head { margin-bottom: calc(72 * var(--u)); }
.place_title { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 .3em; margin-top: calc(24 * var(--u)); }
.place_title .a2 { color: var(--color-bordeaux); margin-bottom: -.2em; }

/* ---------- Le lieu : panneau « verre dépoli » ---------- */
.place_glass {
  --glass-blur: 18px; --fg-soft: rgb(32 27 27 / .74);  /* libellés : contraste ≥ 4,5:1 sur le verre */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(56 * var(--u)); align-items: stretch;
  padding: calc(48 * var(--u)); border-radius: 24px;
  background: rgb(248 244 236 / .55);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .5);
  box-shadow: 0 40px 100px rgb(32 27 27 / .14), 0 2px 6px rgb(32 27 27 / .04), inset 0 1px 0 rgb(255 255 255 / .55);
}
.place_info { display: flex; flex-direction: column; gap: calc(34 * var(--u)); }
.place_row { display: flex; flex-direction: column; gap: 14px; }
.place_label { color: var(--fg-soft); }
.place_value { text-transform: none; font-family: var(--font-sub); }
.place_value a { display: inline-block; }
.place_closed { color: var(--fg-soft); margin-top: -6px; }
.place_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: auto; padding-top: calc(8 * var(--u)); }
.btn--fill { --btn-bg-t: 0%; --btn-bg-br: 0%; --btn-text-c: var(--color-ivory); border-color: var(--color-bordeaux); }
@media (min-width: 992px) { .btn--fill:hover { --btn-bg-t: 100%; --btn-bg-br: 100%; --btn-text-c: var(--color-bordeaux); } }

/* carte : cadre arrondi 20 px, filet or ; voile seulement sur l'image maison (le cadre Google n'est jamais recouvert) */
.place_carte { display: flex; flex-direction: column; min-width: 0; }
.place_carte_frame {
  position: relative; flex: 1; min-height: max(480px, calc(520 * var(--u))); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--color-gold); background: var(--color-sand); isolation: isolate; transform: translateZ(0);
}
.place_carte_frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.place_carte_static { position: absolute; inset: 0; }
.place_carte_static[hidden] { display: none; }
.place_carte_static picture, .place_carte_static img { width: 100%; height: 100%; object-fit: cover; }
.place_carte_static::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgb(248 244 236 / .2), rgb(230 216 195 / .3)); box-shadow: inset 0 0 60px rgb(230 216 195 / .55); }
.place_carte_overlay {
  position: absolute; z-index: 1; left: 50%; bottom: calc(28 * var(--u)); transform: translateX(-50%); width: max-content; max-width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.glass-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: rgb(248 244 236 / .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .8); box-shadow: 0 10px 28px rgb(32 27 27 / .14);
  color: var(--color-ink); font-family: var(--font-body); font-weight: 700; font-size: max(11px, calc(12 * var(--u))); letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.glass-btn:hover, .glass-btn:focus-visible { background: rgb(248 244 236 / .78); box-shadow: 0 12px 32px rgb(32 27 27 / .18); }
html[lang="ar"] .glass-btn { letter-spacing: 0; font-size: 15px; }
.place_carte_note {
  padding: 5px 12px; border-radius: 12px; color: var(--color-ink);
  background: rgb(248 244 236 / .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.place_carte_attr { margin-top: 10px; font-size: 12px; color: var(--fg-soft); }
.place_carte_attr[hidden] { display: none; }

@media (max-width: 991px) {
  .place_head { margin-bottom: calc(40 * var(--u)); }
  .place_glass {
    --glass-blur: 12px; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 24px 18px;
    margin-inline: calc(var(--offset) * -1 + 8px); border-radius: 20px;
  }
  .place_info { gap: 24px; }
  .place_carte_frame { min-height: 320px; height: max(320px, calc(380 * var(--u))); flex: none; border-radius: 16px; }
  .place_carte_overlay { bottom: 14px; }
}

/* ---------- Bannière de consentement : discrète, en bas, ne bloque rien ---------- */
.consent {
  position: fixed; z-index: 90; left: var(--offset); bottom: calc(24 * var(--u)); width: min(560px, calc(100vw - 2 * var(--offset)));
  padding: 22px 24px 20px; color: var(--color-ink); border-radius: 24px;
  background: rgb(248 244 236 / .78); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .5); box-shadow: 0 30px 80px rgb(32 27 27 / .2), inset 0 1px 0 rgb(255 255 255 / .55);
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(12px); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-in { opacity: 1; transform: none; }
.consent_title { font-family: var(--font-display); text-transform: uppercase; font-size: max(20px, calc(26 * var(--u))); line-height: 1; letter-spacing: .01em; }
.consent_text { color: rgb(32 27 27 / .86); }
.consent_prefs { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; border-top: 1px solid var(--color-ink-12); }
.consent_prefs[hidden] { display: none; }
.consent_opt { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.consent_opt input { width: 18px; height: 18px; accent-color: var(--color-bordeaux); flex: none; margin: 0; }
.consent_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 4px; }
.consent_btn {
  flex: 1 1 0; min-width: 120px; min-height: 44px; padding: 0 18px; border: 1px solid var(--color-ink); border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; color: var(--color-ink); background: transparent;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.consent_btn:hover, .consent_btn:focus-visible { background: var(--color-ink); color: var(--color-ivory); }
.consent_btn--save { flex-basis: 100%; background: var(--color-bordeaux); border-color: var(--color-bordeaux); color: var(--color-ivory); }
.consent_btn[hidden] { display: none; }
.consent_link { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
html[lang="ar"] .consent_title { font-family: "Noto Naskh Arabic", serif; text-transform: none; font-size: max(20px, calc(24 * var(--u))); line-height: 1.3; }
html[lang="ar"] .consent_btn, html[lang="ar"] .consent_link { letter-spacing: 0; font-size: 14px; }
.footer_cookies { font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 16px 16px; border-radius: 20px; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
}

/* =========================================================================
   PARCOURS « PRENDRE RENDEZ-VOUS » — panneau plein écran en verre dépoli (js/rendezvous.js)
   ========================================================================= */
html.rdv-open { overflow: hidden; }
.rdv { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 32px; opacity: 0; transition: opacity var(--dur-m) var(--ease-out); background: transparent; color: var(--color-ink); }
.rdv[hidden] { display: none; }
.rdv.is-open { opacity: 1; }
.rdv_veil { position: absolute; inset: 0; background: rgb(230 216 195 / .62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.rdv_flower { position: absolute; top: -3vw; right: -3vw; width: min(30vw, 420px); height: auto; opacity: .9; pointer-events: none; }
html[dir="rtl"] .rdv_flower { right: auto; left: -3vw; transform: scaleX(-1); }
.rdv_panel {
  position: relative; width: min(920px, 100%); max-height: calc(100dvh - 64px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; background: rgb(248 244 236 / .82); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .55); box-shadow: 0 40px 120px rgb(32 27 27 / .22), inset 0 1px 0 rgb(255 255 255 / .6);
  transform: translateY(18px); transition: transform var(--dur-l) var(--ease-out);
}
.rdv.is-open .rdv_panel { transform: none; }
.rdv_head { position: relative; padding: 28px 36px 18px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--color-ink-12); }
.rdv_head_t { display: flex; flex-direction: column; gap: 10px; padding-inline-end: 56px; }
.rdv_title { font-family: var(--font-display); text-transform: uppercase; font-size: max(30px, calc(44 * var(--u))); line-height: .95; letter-spacing: -.01em; }
html[lang="ar"] .rdv_title { font-family: "Noto Naskh Arabic", serif; text-transform: none; line-height: 1.3; }
.rdv_close { position: absolute; top: 22px; inset-inline-end: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-ink-12); background: rgb(255 255 255 / .5); display: grid; place-items: center; }
.rdv_close span, .rdv_close span::after { display: block; width: 16px; height: 1.5px; background: var(--color-ink); transform: rotate(45deg); }
.rdv_close span::after { content: ""; transform: rotate(90deg); }
.rdv_close:hover { background: rgb(255 255 255 / .85); }
.rdv_progress { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rdv_acompte_note { padding: 14px 16px; border-radius: 14px; background: rgb(184 151 90 / .12); border: 1px solid rgb(184 151 90 / .45); }
.rdv_choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rdv_choix_b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 16px; text-align: center;
  border-radius: 16px; border: 1px solid var(--color-bordeaux); background: rgb(255 255 255 / .55); color: var(--color-ink);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease); }
.rdv_choix_b:not(:disabled):hover, .rdv_choix_b:not(:disabled):focus-visible { background: var(--color-bordeaux); color: var(--color-ivory); }
.rdv_choix_b:not(:disabled):hover .rdv_choix_n, .rdv_choix_b:not(:disabled):focus-visible .rdv_choix_n { color: var(--color-ivory); }
.rdv_choix_t { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
html[lang="ar"] .rdv_choix_t { letter-spacing: 0; font-size: 16px; }
.rdv_choix_n { color: var(--color-ink-65); }
.rdv_choix_b:disabled { border-color: var(--color-ink-12); background: transparent; cursor: not-allowed; }
.rdv_choix_b:disabled .rdv_choix_t { color: var(--color-ink-65); }
.rdv_progress li { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rdv_bar { height: 3px; border-radius: 3px; background: var(--color-ink-12); transition: background var(--dur-m) var(--ease); }
.rdv_step_t { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang="ar"] .rdv_step_t { letter-spacing: 0; font-size: 13px; }
.rdv_progress .is-done .rdv_bar { background: var(--color-gold); }
.rdv_progress .is-current .rdv_bar { background: var(--color-bordeaux); }
.rdv_progress .is-current .rdv_step_t { color: var(--color-bordeaux); }
.rdv_progress .is-skip { opacity: .35; }
.rdv_body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 36px 32px; display: flex; flex-direction: column; gap: 22px; }
.rdv_h { font-family: var(--font-sub); font-size: max(22px, calc(28 * var(--u))); line-height: 1.15; outline: none; }
.rdv_h2 { margin-top: 6px; color: var(--color-ink-65); }
.rdv_sub, .rdv_note { color: var(--color-ink-65); }
.rdv_rub { display: flex; flex-direction: column; gap: 12px; }
.rdv_rub_t { display: flex; align-items: center; gap: 12px; color: var(--color-ink-65); }
.rdv_cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.rdv_card, .rdv_day, .rdv_hour, .rdv_chip span {
  border: 1px solid var(--color-ink-12); background: rgb(255 255 255 / .5); border-radius: 14px; color: var(--color-ink);
  transition: border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.rdv_card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; text-align: start; min-height: 84px; }
.rdv_card_n { font-family: var(--font-sub); font-size: 19px; line-height: 1.2; }
.rdv_card_d { color: var(--color-ink-65); }
.rdv_card:hover, .rdv_day:not(:disabled):hover, .rdv_hour:hover, .rdv_chip:hover span { border-color: rgb(32 27 27 / .35); background: rgb(255 255 255 / .75); }
.rdv_card.is-sel, .rdv_day.is-sel, .rdv_hour.is-sel, .rdv_chip input:checked + span { border-color: var(--color-bordeaux); background: var(--color-ivory); box-shadow: 0 0 0 1px var(--color-bordeaux) inset; }
.rdv_chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv_chip { position: relative; cursor: pointer; }
.rdv_chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rdv_chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 16px; }
.rdv_chip input:focus-visible + span { outline: 1px solid var(--color-ink); outline-offset: 3px; }
.rdv_days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rdv_day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; min-height: 84px; }
.rdv_day_w { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink-65); }
.rdv_day_n { font-family: var(--font-sub); font-size: 24px; line-height: 1.1; }
.rdv_day_m { font-size: 12px; color: var(--color-ink-65); }
.rdv_day.is-off { opacity: .42; cursor: not-allowed; background: transparent; }
.rdv_day.is-off .rdv_day_m { color: var(--color-bordeaux); }
.rdv_hours { gap: 8px; }
.rdv_hour { min-height: 44px; min-width: 76px; padding: 0 14px; font-size: 16px; font-variant-numeric: tabular-nums; }
.rdv_field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.rdv_field legend { padding: 0; margin-bottom: 8px; }
.rdv_field .l2, .rdv_field legend { color: var(--color-ink-65); }
.rdv_field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .rdv_field select {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid rgb(32 27 27 / .2); background: rgb(255 255 255 / .7);
  font: 17px/1.2 var(--font-body); color: var(--color-ink);
}
.rdv_field input:focus, .rdv_field select:focus { outline: none; border-color: var(--color-bordeaux); box-shadow: 0 0 0 3px rgb(122 31 53 / .15); }
.rdv_field input[aria-invalid="true"] { border-color: var(--color-bordeaux); }
.rdv_field input[type="file"] { font: 15px var(--font-body); }
.rdv_err { color: var(--color-bordeaux); font-size: 15px; font-weight: 700; }
.rdv_grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rdv_tel { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.rdv_check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.rdv_check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--color-bordeaux); flex: none; }
.rdv_check > span { display: flex; flex-direction: column; gap: 2px; }
.rdv_hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rdv_recap { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--color-ink-12); }
.rdv_recap div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-ink-12); }
.rdv_recap dt { color: var(--color-ink-65); padding-top: 3px; }
.rdv_recap dd { margin: 0; }
.rdv_state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; min-height: 280px; max-width: 34em; margin: 0 auto; }
.rdv_state_actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 8px; }
.rdv_spin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-ink-12); border-top-color: var(--color-bordeaux); animation: rdv-spin 1s linear infinite; }
@keyframes rdv-spin { to { transform: rotate(360deg); } }
.rdv_ok_mark { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--color-gold); position: relative; }
.rdv_ok_mark::after { content: ""; position: absolute; left: 22px; top: 17px; width: 14px; height: 24px; border: solid var(--color-bordeaux); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rdv_ref { color: var(--color-bordeaux); }
.rdv_live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rdv_foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 36px 22px; border-top: 1px solid var(--color-ink-12); }
.rdv_foot .rdv_next { margin-inline-start: auto; }
.rdv_next[disabled] { opacity: .45; cursor: not-allowed; }
.rdv_back { padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; }
.rdv_back[hidden], .rdv_next[hidden] { display: none; }
@media (max-width: 767px) {
  .rdv { padding: 0; place-items: stretch; }
  .rdv_panel { width: 100%; max-height: none; height: 100dvh; border-radius: 0; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
  .rdv_flower { width: 46vw; top: -8vw; right: -10vw; opacity: .6; }
  html[dir="rtl"] .rdv_flower { left: -10vw; }
  .rdv_head { padding: 18px 18px 14px; gap: 14px; }
  .rdv_close { top: 14px; inset-inline-end: 14px; }
  .rdv_body { padding: 20px 18px 24px; }
  .rdv_foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
  .rdv_step_t { font-size: 9px; letter-spacing: .04em; }
  .rdv_cards { grid-template-columns: 1fr; }
  .rdv_days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rdv_grid2 { grid-template-columns: 1fr; }
  .rdv_recap div { grid-template-columns: 1fr; gap: 4px; }
  .rdv_choix { grid-template-columns: 1fr; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rdv_veil { background: rgb(230 216 195 / .94); } .rdv_panel { background: rgb(248 244 236 / .97); }
}
@media (prefers-reduced-transparency: reduce) {
  .rdv_veil { background: var(--color-sand); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rdv_panel { background: var(--color-ivory); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .rdv, .rdv_panel { transition: none; } .rdv_spin { animation-duration: 3s; } }

/* ---------- Verre : replis ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .place_glass, .consent { background: rgb(248 244 236 / .92); }
  .glass-btn, .place_carte_note { background: rgb(248 244 236 / .92); }
}
@media (prefers-reduced-transparency: reduce) {
  .place_glass, .consent, .glass-btn, .place_carte_note { background: var(--color-ivory); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================================
   6-7. APPEL FINAL puis PIED DE PAGE — l'appel se referme en fenêtre (ERA)
   ========================================================================= */
.closing-area { position: relative; height: 260vh; z-index: 1; background: var(--color-bordeaux); }
.closing-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cta-s, .footer { position: absolute; inset: 0; }
.cta-s { z-index: 2; overflow: hidden; display: grid; place-items: center; will-change: clip-path; }
.cta_img_w { position: absolute; inset: 0; overflow: hidden; }
.cta_img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.cta_veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(122 31 53 / .78), rgb(122 31 53 / .62) 50%, rgb(94 22 40 / .85)); }
.cta_content { position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(28 * var(--u)); padding: var(--offset); color: var(--color-ivory); }
.cta_lead { max-width: 26em; color: var(--color-ivory-80); }
.cta_title { display: flex; flex-direction: column; align-items: center; }
.cta_title .a1 { margin-top: -.45em; padding-inline-start: 1.4em; }
html[lang="ar"] .cta_title .a1 { margin-top: 0; padding-inline-start: 0; }
.cta_actions { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: calc(16 * var(--u)); }
.cta_insta { color: var(--color-ivory-80); }

.footer { z-index: 1; overflow: hidden; }
.footer_inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(160 * var(--u)); padding-bottom: calc(32 * var(--u)); padding-inline-start: calc(120 * var(--u)); }
.footer_top { display: flex; flex-direction: column; gap: 12px; }
.footer_totop { align-self: flex-start; margin-bottom: calc(32 * var(--u)); color: var(--fg-soft); }
.footer_label { color: var(--fg-soft); }
.footer_phone { letter-spacing: -.02em; }
.footer_phone2 { color: var(--fg-soft); }
.footer_cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.footer_col { display: flex; flex-direction: column; gap: 12px; }
.footer_nav { gap: 6px; align-items: flex-start; }
.footer_bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: calc(24 * var(--u)); }
.footer_rights { color: var(--fg-soft); }

/* Logotype (première ébauche) : médaillon + NJM & BETTY + filet or + BEAUTY LOUNGE, tout en Ambroise François */
.logotype { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.logotype_img { display: block; width: max(186px, calc(278 * var(--u))); max-width: none; height: auto; }   /* même taille que l'ancien logotype en CSS (278 px de maquette) */
.logotype_mono { width: max(56px, calc(88 * var(--u))); flex: none; }
.logotype_words { display: flex; flex-direction: column; align-items: stretch; gap: calc(8 * var(--u)); }
.logotype_name { font-family: var(--font-display); text-transform: uppercase; font-size: max(22px, calc(40 * var(--u))); line-height: 1; letter-spacing: .02em; font-feature-settings: "case"; white-space: nowrap; }
.logotype_rule { height: 1px; background: var(--color-gold); }
.logotype_lounge { font-family: var(--font-display); text-transform: uppercase; font-size: max(9px, calc(13 * var(--u))); letter-spacing: .72em; margin-inline-end: -.72em; line-height: 1; white-space: nowrap; }

@media (max-width: 991px) {
  .closing-area { height: auto; }
  .closing-sticky { position: static; height: auto; overflow: visible; display: flex; flex-direction: column-reverse; }
  .cta-s, .footer { position: relative; inset: auto; }
  .cta-s { min-height: 100svh; }
  .footer_inner { padding-inline-start: var(--offset); padding-top: var(--section-pad); gap: 56px; }
  .footer_cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .footer_bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .hero-area { height: 100vh; }
  .quote-s { margin-top: 0; }
}
.is-reduced .hero-area { height: 100vh; }
.is-reduced .quote-s { margin-top: 0; }
.is-reduced .services-area { height: auto; }
.is-reduced .services-sticky { position: static; height: auto; overflow: visible; display: block; padding-block: var(--section-pad); }
.is-reduced .services-track { flex-wrap: wrap; }
.is-reduced .closing-area { height: auto; }
.is-reduced .closing-sticky { position: static; height: auto; overflow: visible; display: flex; flex-direction: column-reverse; }
.is-reduced .cta-s, .is-reduced .footer { position: relative; inset: auto; }
.is-reduced .cta-s { min-height: 100vh; }
.is-reduced .footer_inner { min-height: 100vh; }

/* Survol nav sans découpe (arabe) : doublage en CSS, comme [hover-nav-item-l2] d'ERA */
.nav-item:not(.is-split) .nav-item_t { transition: transform var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out); }
@media (min-width: 992px) {
  .nav-item:not(.is-split):hover .nav-item_t:nth-child(1) { transform: translateY(-100%); opacity: 0; }
  .nav-item:not(.is-split):hover .nav-item_t:nth-child(2) { transform: translateY(0); }
}
.nav-item.is-split .nav-item_t:nth-child(2) { transform: none; }

.quote_grid { z-index: 1; }
.place-s .container { z-index: 1; }