/* ============================================================
   A&H Fragrances — Essence of Elegance
   Direction : Luxe crème & terracotta, éditorial, atmosphérique
   ============================================================ */

:root {
  /* Palette — NOIR & OR : la signature du logo A&H (chic, sombre, doré).
     Thème unique du site. --noir = fond, --creme = texte clair, --or = accent,
     --sur-or = encre sombre posée sur un fond doré. */
  --noir:        #0c0a07;   /* fond — noir chaud (fond du logo) */
  --noir-2:      #15110b;   /* surfaces relevées */
  --noir-3:      #1f1810;   /* surfaces encastrées */
  --creme:       #f3e9d4;   /* texte — crème chaud sur noir */
  --creme-soft:  #b3a585;   /* texte atténué — taupe doré */
  --or:          #c9a24b;   /* accent — or du logo */
  --or-clair:    #e7cf8a;   /* accent lumineux — titres & prix qui ressortent sur noir */
  --or-fonce:    #8a6a2e;   /* accent profond — filets & dégradés */
  --sur-or:      #14100a;   /* encre sombre sur fond or (boutons, badges, puces…) */
  --ligne:       rgba(201,162,75,.22);

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --body:    "Archivo", system-ui, sans-serif;

  /* Rythme */
  --gut: clamp(1.4rem, 4vw, 4rem);
  --rad: 2px;
  --ease: cubic-bezier(.16,1,.3,1);   /* ease-out soyeux signature Luxe Essence */
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

/* Décalage d'ancrage sous la nav fixe + barre univers sticky */
section[id], nav[id] { scroll-margin-top: 88px; }
#collection { scroll-margin-top: 132px; }

body {
  font-family: var(--body);
  background: var(--noir);
  color: var(--creme);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--or); color: var(--sur-or); }

/* ---------- Signature métallique — or du logo (identité visuelle) ----------
   Dégradé calé sur l'or du lockup (bronze #6e4f15 → or → glint #f0d488).
   .foil = teinte de MARQUE, constante quel que soit l'univers (reste dorée partout).
   L'emphase des titres suit, elle, l'accent du thème actif. */
.foil {
  background: linear-gradient(115deg,
    #6e4f15 0%, #9c7526 24%, #c79f4a 44%, #f0d488 52%,
    #c79f4a 60%, #9c7526 78%, #6e4f15 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--or-clair); /* repli si background-clip:text non supporté */
}
.hero__title em, .section-head__title em, .page-hero__title em,
.craft__title em, .cta-band h2 em {
  background: linear-gradient(115deg,
    var(--or-clair) 0%, var(--or) 40%,
    color-mix(in srgb, var(--or) 58%, #fff) 52%,
    var(--or) 64%, var(--or-clair) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-style: italic; }

/* ---------- Grain / atmosphère ----------
   Pas de mix-blend-mode : il forcerait une recomposition de toute la page
   à chaque pixel scrollé (cause majeure de scroll saccadé). */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Préloader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--noir);
  display: grid; place-content: center; gap: 1.2rem; text-align: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader__logo { width: clamp(200px, 44vw, 320px); height: auto; margin: 0 auto .6rem; }
.loader__slogan { font-family: var(--display); font-style: italic; font-size: clamp(1rem, 3vw, 1.3rem); letter-spacing: .04em; margin: 0 auto .4rem; }
.loader__bar { width: 220px; height: 1px; background: var(--ligne); margin: 0 auto; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: var(--or); animation: load 1.8s var(--ease) forwards; }
@keyframes load { to { width: 100%; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--body); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 1.05rem 2.2rem; border-radius: var(--rad); cursor: pointer;
  border: 1px solid transparent; transition: all .45s var(--ease); position: relative; overflow: hidden;
}
.btn--gold { background: var(--or); color: var(--sur-or); font-weight: 600; }
.btn--gold:hover { background: var(--or-clair); transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(201,168,106,.6); }
.btn--ghost { border-color: var(--ligne); color: var(--creme); }
.btn--ghost:hover { border-color: var(--or); color: var(--or-clair); }
.btn--full { width: 100%; }
/* Bouton WhatsApp — commander sans formulaire */
.btn--wa { background: #25d366; color: #06130b; font-weight: 600; }
.btn--wa:hover { background: #2ee878; transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(37,211,102,.55); }
.btn--wa svg { width: 20px; height: 20px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--gut);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--noir) 92%, transparent); backdrop-filter: blur(8px);
  padding-top: 1rem; padding-bottom: 1rem; border-color: var(--ligne);
}
/* La barre fixe couvre toute la largeur : son centre VIDE ne doit jamais
   intercepter le survol / clic des cartes qui défilent derrière (sinon on ne
   peut pas survoler le haut d'une carte passée sous la barre). Seuls le logo,
   les liens, le sélecteur de langue et le panier restent cliquables. */
.nav { pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav__brand { display: inline-flex; align-items: center; }
.nav__logo-img { height: 56px; width: auto; flex-shrink: 0; transition: transform .5s var(--ease); }
.nav__brand:hover .nav__logo-img { transform: scale(1.04); }
/* liens centrés au milieu du header (hors flux pour ne pas coller au logo) */
.nav__links { display: flex; gap: 2.4rem; position: absolute; left: 50%; transform: translateX(-50%); }
.nav__links a { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; position: relative; color: var(--creme-soft); transition: color .3s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--or); transition: width .4s var(--ease); }
.nav__links a:hover { color: var(--creme); }
.nav__links a:hover::after { width: 100%; }
.nav__cart { position: relative; background: none; border: none; color: var(--creme); cursor: pointer; padding: .4rem; transition: color .3s; }
.nav__cart:hover { color: var(--or); }
.nav__cart-count {
  position: absolute; top: -4px; right: -6px; background: var(--or); color: var(--sur-or);
  font-size: .58rem; font-weight: 600; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-content: center; transform: scale(0); transition: transform .35s var(--ease);
}
.nav__cart-count.show { transform: scale(1); }

/* ---------- Bouton menu mobile (burger) ---------- */
.nav__burger {
  display: none; /* desktop : caché, les liens sont visibles */
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: .5rem; margin-inline-start: .2rem;
  background: none; border: none; cursor: pointer; color: var(--creme);
}
.nav__burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sélecteur de langue (FR · EN · عربي) ---------- */
.nav__lang {
  display: inline-flex; align-items: center; gap: .1rem;
  margin-inline-start: auto; margin-inline-end: 1rem;
  border: 1px solid var(--ligne); border-radius: 999px; padding: .18rem;
}
/* La nav répartit brand | links, puis pousse lang + panier à la fin. */
.nav__links { margin-inline-end: 0; }
.nav__lang-btn {
  min-width: 40px; min-height: 40px; padding: .3rem .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--creme-soft);
  background: transparent; border: none; border-radius: 999px; cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__lang-btn[lang="ar"] { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.nav__lang-btn:hover { color: var(--creme); }
.nav__lang-btn.active { background: var(--or); color: var(--sur-or); }
.nav__lang-btn:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }

/* ---------- Hero ---------- */
/* Hero plein écran : la vidéo de marque joue automatiquement en boucle, en fond. */
.hero-stage { position: relative; }
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 0 var(--gut); overflow: hidden; }
/* Flacon 3D : petit panneau dans le coin bas-droite du hero.
   La vidéo cinématique (avec son flacon) reste la pièce maîtresse du hero. */
.hero__canvas {
  position: absolute;
  right: .5rem; bottom: 5rem;
  width: min(300px, 42vw); height: min(440px, 58vh);
  z-index: 4;                 /* devant le voile ; le bouton de chat (z 2100) reste au-dessus */
  pointer-events: none;       /* ne bloque jamais les clics (chat, boutons, liens) */
}
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 40%, transparent 30%, color-mix(in srgb, var(--noir) 55%, transparent) 78%),
    linear-gradient(90deg, color-mix(in srgb, var(--noir) 92%, transparent) 0%, color-mix(in srgb, var(--noir) 50%, transparent) 38%, transparent 60%),
    linear-gradient(0deg, var(--noir) 2%, transparent 28%);
  transition: background .9s var(--ease);
}
.hero__content { position: relative; z-index: 3; max-width: 620px; min-width: 0; }
.hero__eyebrow { font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--or); margin-bottom: 1.6rem; }
.hero__title { font-family: var(--display); font-weight: 300; font-size: clamp(3.2rem, 9vw, 7rem); line-height: .98; letter-spacing: -.01em; }
.hero__title span { display: block; }
.hero__title em { color: var(--or-clair); }
.hero__lede { margin: 2rem 0 2.6rem; max-width: 460px; color: var(--creme-soft); font-size: 1.02rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 2.2rem; left: var(--gut); z-index: 3; display: flex; align-items: center; gap: .9rem; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--creme-soft); }
.hero__scroll i { width: 46px; height: 1px; background: var(--ligne); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 100%; background: var(--or); animation: scrollline 2.4s var(--ease) infinite; }
@keyframes scrollline { 0% { transform: translateX(-16px); } 100% { transform: translateX(46px); } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--ligne); padding: 1.4rem 0; overflow: hidden; white-space: nowrap; background: var(--noir-2); }
.marquee__track { display: inline-flex; align-items: center; gap: 2.5rem; animation: marquee 38s linear infinite; }
.marquee__track span { font-family: var(--display); font-size: 1.7rem; font-style: italic; color: var(--creme-soft); }
.marquee__track i { color: var(--or); font-style: normal; font-size: .8rem; }
/* Séparateur = sticker de marque (monogramme A&H), pas le logo complet */
.marquee__track i.marquee__sep { display: inline-flex; align-items: center; justify-content: center; font-size: 0; vertical-align: middle; }
.marquee__track i.marquee__sep img { height: 3.6rem; width: auto; display: block; opacity: 1; filter: brightness(1.18) drop-shadow(0 0 12px rgba(201,162,75,.5)) drop-shadow(0 1px 4px rgba(0,0,0,.55)); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(3rem,6vw,5rem); }
.section-head__eyebrow { font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; }
.section-head__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; }
.section-head__title em { color: var(--or-clair); }
.section-head__lede { margin-top: 1.4rem; color: var(--creme-soft); }

/* ---------- Collection grid ---------- */
.collection { padding: clamp(5rem,10vw,9rem) var(--gut); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1340px; margin: 0 auto; }

.card {
  position: relative; background: var(--noir-2); border: 1px solid var(--ligne);
  border-radius: var(--rad); overflow: hidden; transition: transform .6s var(--ease), border-color .6s, box-shadow .6s;
  /* Chaque carte = son propre contexte d'empilement. Sans ça, la photo (z-index:2)
     et les badges (z-index:4) « remontent » dans le contexte de la page et peuvent
     recouvrir la zone cliquable de la carte VOISINE (une colonne entière qui « ne
     s'active pas »). isolate confine ces couches à l'intérieur de chaque carte. */
  isolation: isolate;
}
.card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--c1, #caa86a) 42%, var(--or-fonce)); box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--c1, #caa86a) 55%, transparent); }
.card__visual {
  position: relative; aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 18%, var(--c2,#241a12) 0%, var(--noir-2) 62%);
}
.card__halo {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; top: 16%;
  background: radial-gradient(circle, var(--c1,#caa86a) 0%, transparent 68%);
  filter: blur(14px); opacity: .55; transition: opacity .6s, transform .8s var(--ease);
}
.card:hover .card__halo { opacity: .85; transform: scale(1.12); }

/* flacon CSS stylisé */
.bottle { position: relative; width: 92px; height: 200px; transition: transform .9s var(--ease); filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.card:hover .bottle { transform: translateY(-8px) rotate(-2deg); }
.bottle__cap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 30px; border-radius: 3px 3px 1px 1px; background: linear-gradient(160deg, var(--or-clair), var(--or-fonce)); box-shadow: inset 0 2px 3px rgba(255,255,255,.4); }
.bottle__neck { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: 22px; height: 16px; background: linear-gradient(var(--or-fonce), var(--or)); }
.bottle__body {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 158px; border-radius: 8px 8px 12px 12px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c1) 70%, #fff 12%) 0%, var(--c1,#caa86a) 45%, color-mix(in srgb, var(--c1) 60%, #000 30%) 100%);
  box-shadow: inset 6px 0 14px rgba(255,255,255,.28), inset -8px 0 18px rgba(0,0,0,.32), inset 0 -10px 18px rgba(0,0,0,.3);
  overflow: hidden;
}
.bottle__body::after { content: ""; position: absolute; top: 8%; left: 14%; width: 18%; height: 70%; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.55), transparent); filter: blur(2px); }
.bottle__label { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 60%; text-align: center; font-family: var(--display); font-size: .62rem; letter-spacing: .25em; color: rgba(10,8,7,.7); text-transform: uppercase; }

.card__body { padding: 1.6rem 1.6rem 1.8rem; }
.card__marque { display: block; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or); }
.card__name { font-family: var(--display); font-size: 1.7rem; margin: .3rem 0 .35rem; line-height: 1.05; }
.card__cat { display: block; font-size: .74rem; letter-spacing: .02em; color: var(--creme-soft); }
.card__notes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 1.1rem; max-height: 0; opacity: 0; overflow: hidden; transition: all .55s var(--ease); }
.card:hover .card__notes { max-height: 60px; opacity: 1; }
.card__notes span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-soft); border: 1px solid var(--ligne); padding: .3rem .7rem; border-radius: var(--rad); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__price { font-family: var(--display); font-size: 1.5rem; color: var(--or-clair); }
.card__price small { font-size: .7rem; color: var(--creme-soft); }
.card__add {
  background: transparent; border: 1px solid var(--or-fonce); color: var(--or-clair);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; padding: .7rem 1.1rem;
  border-radius: var(--rad); cursor: pointer; transition: all .4s var(--ease); white-space: nowrap;
}
.card__add:hover { background: var(--or); color: var(--sur-or); border-color: var(--or); }

/* ---------- Savoir-faire ---------- */
.craft { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: center; padding: clamp(4rem,9vw,8rem) var(--gut); background: var(--noir-2); border-block: 1px solid var(--ligne); }
.craft__frame { position: relative; aspect-ratio: 4/5; border: 1px solid var(--ligne); border-radius: var(--rad); overflow: hidden; background: radial-gradient(110% 90% at 50% 30%, var(--noir-3), var(--noir)); display: grid; place-items: center; }
.craft__orb { width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--or-clair), var(--or) 38%, var(--or-fonce) 70%, #2a1d10 100%); box-shadow: 0 30px 80px -20px rgba(201,168,106,.5); animation: float 7s ease-in-out infinite; }
.craft__lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(transparent, transparent 38px, var(--ligne) 39px); opacity: .5; mix-blend-mode: overlay; }
@keyframes float { 50% { transform: translateY(-22px); } }
.craft__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem,5vw,3.8rem); line-height: 1.04; margin: 1rem 0 2.4rem; }
.craft__title em { color: var(--or-clair); }
.craft__steps { display: grid; gap: 1.8rem; }
.craft__steps article { padding-left: 4rem; position: relative; }
.craft__num { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 2rem; color: var(--or-fonce); }
.craft__steps h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 500; margin-bottom: .2rem; }
.craft__steps p { color: var(--creme-soft); font-size: .92rem; }

/* ---------- Commande ---------- */
.order { padding: clamp(5rem,10vw,9rem) var(--gut); }
.order-form { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; background: var(--noir-2); border: 1px solid var(--ligne); border-radius: var(--rad); padding: clamp(1.8rem,4vw,3rem); }
/* Garantit que chaque champ reste cliquable (au-dessus de tout décor) */
.order-form label { position: relative; z-index: 2; }
.order-form input, .order-form select, .order-form textarea, .order-form button { position: relative; z-index: 2; pointer-events: auto; }
.order-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.order-form label { display: flex; flex-direction: column; gap: .5rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--creme-soft); }
.order-form label.full { grid-column: 1 / -1; }
/* Le champ « Autre ville » est masqué par défaut : l'attribut [hidden] doit
   l'emporter sur le display:flex des labels (sinon la ville est demandée 2 fois). */
.order-form label[hidden] { display: none !important; }
.order-form input, .order-form textarea, .order-form select {
  font-family: var(--body); background: var(--noir); border: 1px solid var(--ligne); color: var(--creme);
  padding: .9rem 1rem; border-radius: var(--rad); font-size: .95rem; transition: border-color .3s; resize: vertical;
}
.order-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; resize: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a24b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.order-form select option, .order-form select optgroup { background: var(--noir-2); color: var(--creme); }
.order-form input:focus, .order-form textarea:focus, .order-form select:focus { outline: none; border-color: var(--or); }
.order-summary { margin: 1.8rem 0; border-top: 1px solid var(--ligne); padding-top: 1.4rem; display: grid; gap: .7rem; }
.order-summary__row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--creme-soft); }
.order-summary__row strong { color: var(--creme); }
.order-summary__empty { text-align: center; color: var(--creme-soft); font-style: italic; font-family: var(--display); font-size: 1.1rem; }
.order-summary__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ligne); margin-top: .4rem; padding-top: 1rem; }
.order-summary__total span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--creme-soft); }
.order-summary__total strong { font-family: var(--display); font-size: 1.8rem; color: var(--or-clair); }
.order-form__note { margin-top: 1rem; text-align: center; font-size: .76rem; color: var(--creme-soft); }

/* Alternative : commander par WhatsApp (sans formulaire) */
.order-alt { margin-top: 1.4rem; }
.order-alt__sep {
  display: block; text-align: center; margin-bottom: 1rem; position: relative;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--creme-soft);
}
.order-alt__sep::before, .order-alt__sep::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 2.2rem); height: 1px; background: var(--ligne);
}
.order-alt__sep::before { left: 0; }
.order-alt__sep::after { right: 0; }
.order-alt .order-form__note { margin-top: .7rem; }

/* Résumé commande — livraison */
.order-summary__row--sub { padding-top: .8rem; border-top: 1px dashed var(--ligne); }
.order-summary__free { color: var(--or-clair); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.order-summary__hint { color: var(--creme-soft); font-style: italic; }
.order-summary__progress {
  margin: .2rem 0 .1rem; padding: .55rem .8rem; border-radius: var(--rad);
  background: rgba(201,162,75,.08); border: 1px solid var(--ligne);
  color: var(--or-clair); font-size: .78rem; text-align: center; letter-spacing: .04em;
}
/* Offre cadeau (décant offert) */
.order-summary__row--gift strong { text-transform: none; letter-spacing: .02em; }
.order-summary__progress--gift { background: rgba(201,162,75,.16); font-weight: 600; }
/* Sélecteur du parfum offert (au choix) */
.order-summary__gift-pick { margin: .35rem 0 .2rem; display: grid; gap: .35rem; }
.order-summary__gift-pick label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--or-clair);
}
.order-summary__gift-pick select {
  width: 100%; padding: .6rem .7rem; border-radius: var(--rad);
  border: 1px solid var(--or-clair); background: rgba(201,162,75,.06);
  color: var(--creme); font-size: .9rem; font-family: inherit;
}
.order-summary__gift-pick select:focus { outline: none; border-color: var(--or); }
[dir="rtl"] .order-summary__gift-pick { text-align: right; }

/* ---------- Modale « merci » après commande ---------- */
.order-done {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 1.4rem;
  background: rgba(5,4,3,.72); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .42s var(--ease), visibility .42s var(--ease);
}
.order-done.show { opacity: 1; visibility: visible; }
.order-done__card {
  width: min(440px, 100%); background: var(--noir-2); border: 1px solid var(--ligne);
  border-radius: calc(var(--rad) * 3); padding: clamp(1.8rem, 5vw, 2.8rem); text-align: center;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  transform: translateY(18px) scale(.97); transition: transform .5s var(--ease);
}
.order-done.show .order-done__card { transform: none; }
.order-done__check { display: grid; place-items: center; margin-bottom: 1rem; }
.order-done__check-circle { stroke: var(--or); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; }
.order-done__check-mark { stroke: var(--or-clair); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.order-done.show .order-done__check-circle { animation: doneCircle .6s var(--ease) forwards; }
.order-done.show .order-done__check-mark { animation: doneMark .4s var(--ease) .45s forwards; }
@keyframes doneCircle { to { stroke-dashoffset: 0; } }
@keyframes doneMark { to { stroke-dashoffset: 0; } }
.order-done__eyebrow { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--creme-soft); }
.order-done__title { font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2rem); color: var(--creme); margin: .35rem 0 .6rem; }
.order-done__msg { font-size: .9rem; color: var(--creme-soft); line-height: 1.6; }
.order-done__recap { margin: 1.4rem 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 1rem 0; display: grid; gap: .55rem; }
.order-done__row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--creme-soft); }
.order-done__row strong { color: var(--creme); font-weight: 500; }
.order-done__free { color: var(--or-clair) !important; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.order-done__row--total { border-top: 1px dashed var(--ligne); padding-top: .7rem; margin-top: .2rem; }
.order-done__row--total span { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.order-done__row--total strong { font-family: var(--display); font-size: 1.5rem; color: var(--or-clair); }
.order-done__close { margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .order-done__check-circle, .order-done__check-mark { animation: none !important; stroke-dashoffset: 0 !important; }
  .order-done, .order-done__card { transition: none; }
}

/* ---------- Footer ---------- */
.footer { background: var(--noir-2); border-top: 1px solid var(--ligne); padding: clamp(3rem,6vw,5rem) var(--gut) 2rem; }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto 3rem; }
.footer__lockup { display: inline-flex; }
.footer__logo { width: clamp(180px, 24vw, 240px); height: auto; }
.footer__slogan { font-family: var(--display); font-style: italic; font-size: 1.2rem; letter-spacing: .01em; margin-top: 1rem; }
.footer__brand p { color: var(--creme-soft); margin-top: .6rem; font-size: .9rem; }
.footer__col h4 { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; }
.footer__col a, .footer__col span { display: block; color: var(--creme-soft); font-size: .9rem; margin-bottom: .7rem; transition: color .3s; }
.footer__col a:hover { color: var(--or-clair); }
/* Réseaux sociaux — pastilles rondes sous le logo */
.footer__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; margin: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--ligne); color: var(--creme-soft);
  transition: color .3s, border-color .3s, transform .3s, background .3s;
}
.footer__social a:hover { color: var(--sur-or); background: var(--or); border-color: var(--or); transform: translateY(-3px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__base { display: flex; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding-top: 1.6rem; border-top: 1px solid var(--ligne); font-size: .74rem; color: var(--creme-soft); }

/* ---------- Panier drawer ---------- */
.cart { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 90vw); background: var(--noir-2); border-left: 1px solid var(--ligne); z-index: 2000; transform: translateX(100%); transition: transform .6s var(--ease); display: flex; flex-direction: column; }
.cart.open { transform: translateX(0); }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem; border-bottom: 1px solid var(--ligne); }
.cart__head h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; }
.cart__head button { background: none; border: none; color: var(--creme-soft); font-size: 1.1rem; cursor: pointer; transition: color .3s; }
.cart__head button:hover { color: var(--or); }
.cart__items { flex: 1; overflow-y: auto; padding: 1rem 1.6rem; display: grid; gap: 1rem; align-content: start; }
.cart-line { display: grid; grid-template-columns: 48px 1fr auto; gap: .9rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--ligne); }
.cart-line__thumb { width: 48px; height: 60px; border-radius: 2px; background: linear-gradient(160deg, var(--c1,#caa86a), color-mix(in srgb, var(--c1) 50%, #000 40%)); }
.cart-line__name { font-family: var(--display); font-size: 1.15rem; }
.cart-line__meta { font-size: .72rem; color: var(--creme-soft); letter-spacing: .1em; }
.cart-line__qty { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.cart-line__qty button { width: 22px; height: 22px; border: 1px solid var(--ligne); background: none; color: var(--creme); border-radius: 2px; cursor: pointer; transition: all .3s; }
.cart-line__qty button:hover { border-color: var(--or); color: var(--or); }
.cart-line__price { font-family: var(--display); color: var(--or-clair); font-size: 1.1rem; }
.cart-line__remove { background: none; border: none; color: var(--creme-soft); font-size: .7rem; cursor: pointer; margin-top: .3rem; letter-spacing: .1em; }
.cart-line__remove:hover { color: var(--or); }
.cart__empty { text-align: center; color: var(--creme-soft); font-family: var(--display); font-style: italic; font-size: 1.2rem; margin-top: 3rem; }
.cart__foot { padding: 1.6rem; border-top: 1px solid var(--ligne); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
.cart__total span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--creme-soft); }
.cart__total strong { font-family: var(--display); font-size: 1.9rem; color: var(--or-clair); }

.overlay { position: fixed; inset: 0; background: rgba(5,4,3,.6); backdrop-filter: blur(3px); z-index: 1500; opacity: 0; visibility: hidden; transition: all .5s var(--ease); }
.overlay.show { opacity: 1; visibility: visible; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 2rem; left: 50%; z-index: 3000; background: var(--or); color: var(--sur-or); padding: .9rem 1.6rem; border-radius: var(--rad); font-size: .82rem; letter-spacing: .08em; font-weight: 500; transform: translate(-50%, 140%); transition: transform .5s var(--ease); box-shadow: 0 20px 50px -15px rgba(0,0,0,.6); max-width: 90vw; text-align: center; }
.toast.show { transform: translate(-50%, 0); }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }   /* écran large étroit : 3 par ligne */
}
@media (max-width: 880px) {
  /* Le burger remplace les liens en ligne ; les liens deviennent un menu déroulant. */
  .nav__burger { display: inline-flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; transform: none;
    flex-direction: column; gap: 0; align-items: stretch;
    padding: 0 var(--gut); margin: 0;
    background: color-mix(in srgb, var(--noir) 97%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .4s var(--ease), opacity .3s var(--ease), visibility .3s, padding .3s var(--ease);
  }
  .nav--open .nav__links {
    max-height: 80vh; opacity: 1; visibility: visible;
    padding-top: .4rem; padding-bottom: 1rem; border-bottom-color: var(--ligne);
  }
  .nav__links a {
    font-size: .92rem; letter-spacing: .12em; padding: 1.05rem .2rem; width: 100%;
    border-bottom: 1px solid var(--ligne); color: var(--creme);
  }
  .nav__links a:last-child { border-bottom: none; }
  .nav__links a::after { display: none; }   /* pas de soulignement animé en menu mobile */

  .hero__canvas { display: none; }   /* flacon 3D : desktop uniquement (évite le chevauchement du contenu mobile) */
  .grid { grid-template-columns: repeat(2, 1fr); }   /* tablette : 2 par ligne */
  .craft { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 2.4rem; }
  .footer__base { flex-direction: column; gap: .6rem; text-align: center; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 620px) {
  /* catalogue : 2 produits par ligne sur téléphone */
  .grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .order-form__grid { grid-template-columns: 1fr; }

  /* hero : voile depuis le bas, contenu pleine largeur */
  .hero__veil { background: linear-gradient(0deg, var(--noir) 8%, color-mix(in srgb, var(--noir) 60%, transparent) 44%, transparent 78%); }
  .hero { padding-top: 5rem; align-items: flex-end; padding-bottom: 5rem; }
  .hero__content { max-width: 100%; }
  .hero__lede { font-size: .96rem; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 40%; padding: 1rem 1.2rem; }
  .hero__scroll { display: none; }

  /* nav compacte */
  .nav { padding: 1rem var(--gut); }
  .nav__logo-img { height: 44px; }
  /* sélecteur de langue compact (garde une zone tactile ≥ 36px) */
  .nav__lang { margin-inline-end: .6rem; }
  .nav__lang-btn { min-width: 36px; min-height: 36px; padding: .28rem .5rem; font-size: .64rem; }
  .nav__lang-btn[lang="ar"] { font-size: .76rem; }

  /* barre d'univers : on masque l'intitulé, les pastilles défilent */
  .univers { top: 56px; gap: 0; padding: .7rem var(--gut); scroll-margin-top: 56px; }
  .univers__hint { display: none; }
  #collection { scroll-margin-top: 116px; }

  /* cartes compactes pour l'affichage 2 par ligne */
  .card__visual { aspect-ratio: 1 / 1; }
  .card__body { padding: .9rem .9rem 1.1rem; }
  .card__marque { font-size: .55rem; letter-spacing: .22em; }
  .card__name { font-size: 1.18rem; margin: .22rem 0 .28rem; }
  .card__cat { font-size: .66rem; }
  .card__notes { display: none; } /* masquées en 2 colonnes pour garder des cartes nettes */
  .card__foot { flex-direction: column; align-items: stretch; gap: .55rem; }
  .card__price { font-size: 1.2rem; }
  .card__add { width: 100%; padding: .72rem .6rem; font-size: .6rem; letter-spacing: .14em; }

  /* panier pleine largeur */
  .cart { width: 100%; }
}

@media (max-width: 380px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .section-head__title { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .2s !important; }
}

/* ============================================================
   THEMING — univers, voyage, badges
   ============================================================ */

/* Transition douce du recolorage global (le voyage entre univers).
   Uniquement sur des surfaces non interactives : on évite de ralentir
   les survols de boutons/nav qui ont leurs propres transitions rapides. */
body, .marquee, .craft, .footer, .order-form, .cart, .card__visual {
  transition: background-color .9s var(--ease), color .9s var(--ease), border-color .9s var(--ease);
}

/* ---------- Badges produit ---------- */
.card { /* contexte positionnel pour le badge */ }
.card__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 4;
  background: var(--or); color: var(--sur-or); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--rad);
}
.card__badge--gift { background: transparent; border: 1px solid var(--or); color: var(--or-clair); }
.card__price s { color: var(--creme-soft); font-size: .9rem; opacity: .6; margin-left: .35rem; }
.grid__empty { grid-column: 1/-1; text-align: center; color: var(--creme-soft); font-family: var(--display); font-style: italic; font-size: 1.3rem; padding: 3rem 0; }

/* ---------- Barre des univers ---------- */
.univers {
  position: sticky; top: 60px; z-index: 900; scroll-margin-top: 60px;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1rem var(--gut);
  /* fond quasi-opaque, sans backdrop-filter : un blur sur élément sticky se
     recalcule à chaque frame de scroll (très coûteux). */
  background: color-mix(in srgb, var(--noir) 97%, transparent);
  border-block: 1px solid var(--ligne);
  overflow: hidden;
}
.univers__hint {
  flex-shrink: 0; font-size: .6rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--or); padding-right: 1.2rem; border-right: 1px solid var(--ligne);
}
.univers__track {
  display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; padding: .2rem 0;
  -webkit-overflow-scrolling: touch;
}
.univers__track::-webkit-scrollbar { display: none; }
.univers__pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .76rem; letter-spacing: .1em;
  color: var(--creme-soft); background: transparent;
  border: 1px solid var(--ligne); border-radius: var(--rad);
  padding: .62rem 1.15rem; cursor: pointer; white-space: nowrap;
  transition: all .4s var(--ease);
}
.univers__pill i { font-style: normal; color: var(--or); transition: color .4s; }
.univers__pill:hover { border-color: var(--or-fonce); color: var(--creme); transform: translateY(-2px); }
.univers__pill.active { background: var(--or); border-color: var(--or); color: var(--sur-or); font-weight: 500; }
.univers__pill.active i { color: var(--sur-or); }
/* Compteur de produits par onglet — discret, chiffres alignés. */
.univers__count {
  font-weight: 400; font-size: .66rem; opacity: .5;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  margin-inline-start: -.2rem;
}
.univers__pill:hover .univers__count { opacity: .7; }
.univers__pill.active .univers__count { opacity: .85; color: var(--sur-or); }

/* ---------- Overlay VOYAGE — franchir le seuil d'un monde ----------
   Couleurs injectées par theming.js : --v-bg (fond destination),
   --v-accent, --v-glow (lueur), --v-ink (texte contrasté). */
.voyage {
  --v-bg:#0a0807; --v-accent:#c9a86a; --v-glow:#e7cf9f; --v-ink:#f4efe6;
  position: fixed; inset: 0; z-index: 5000; pointer-events: none;
  display: grid; place-content: center; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 42%,
      color-mix(in srgb, var(--v-accent) 26%, var(--v-bg)) 0%,
      var(--v-bg) 58%);
  opacity: 0; visibility: hidden;
  transform: scale(1.03);
  transition: opacity .4s var(--ease), visibility .4s, transform .6s var(--ease);
  will-change: opacity, transform;
}
.voyage.show { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }

/* Floraison de lumière depuis le centre */
.voyage__field {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--v-glow) 60%, transparent) 0%, transparent 42%);
  opacity: 0; transform: scale(.2);
}
.voyage.show .voyage__field { animation: bloom 1.2s var(--ease) forwards; }
@keyframes bloom { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: .9; } 100% { opacity: .3; transform: scale(1.2); } }

/* Halos concentriques qui s'éloignent */
.voyage__rings { position: absolute; inset: 0; }
.voyage__rings::before, .voyage__rings::after {
  content: ""; position: absolute; top: 46%; left: 50%; width: 42vmax; aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--v-accent) 50%, transparent); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.voyage.show .voyage__rings::before { animation: ring 1.1s var(--ease) forwards; }
.voyage.show .voyage__rings::after  { animation: ring 1.1s var(--ease) .14s forwards; }
@keyframes ring { 0% { transform: translate(-50%,-50%) scale(0); opacity: .8; } 100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }

/* Balayage lumineux diagonal (sensation de mouvement) */
.voyage::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--v-glow) 22%, transparent), transparent);
  filter: blur(8px); transform: translateX(-160%) skewX(-12deg);
}
.voyage.show::after { animation: sweep .85s var(--ease) .12s forwards; }
@keyframes sweep { to { transform: translateX(330%) skewX(-12deg); } }

.voyage__inner { position: relative; z-index: 2; }
.voyage__icon   { display: block; font-size: 2.6rem; color: var(--v-accent); opacity: 0; transform: translateY(16px) scale(.9); }
.voyage__kicker { display: block; font-size: .66rem; letter-spacing: .5em; text-transform: uppercase; color: var(--v-accent); margin: 1.3rem 0 .7rem; opacity: 0; transform: translateY(14px); }
.voyage__title  { font-family: var(--display); font-weight: 300; font-size: clamp(2.8rem, 8.5vw, 6rem); line-height: 1; color: var(--v-ink); opacity: 0; transform: translateY(22px); letter-spacing: .01em; }
.voyage.show .voyage__icon   { animation: voyin .5s var(--ease) .08s forwards; }
.voyage.show .voyage__kicker { animation: voyin .5s var(--ease) .16s forwards; }
.voyage.show .voyage__title  { animation: voyrise .6s var(--ease) .24s forwards; }
@keyframes voyin   { to { opacity: 1; transform: none; } }
@keyframes voyrise { 0% { opacity: 0; transform: translateY(22px); letter-spacing: .18em; } 100% { opacity: 1; transform: none; letter-spacing: .01em; } }

/* ============================================================
   THÈME UNIQUE — Noir & Or (défini dans :root).
   Les anciennes palettes par univers ont été retirées : le site garde
   une seule identité (celle du logo). Le switch Femme/Homme ne change
   plus les couleurs, seulement le contenu, le flacon 3D et la sélection.
   ============================================================ */
.grain { opacity: .035; }

/* Variantes d'accent par switch — fond noir conservé, seul le « métal » change.
   Maison = or (défaut :root) · Femme = or rosé · Homme = or cognac. */
html[data-theme="femme"] {
  --or:#e2a6b0; --or-clair:#f7d4da; --or-fonce:#9c5a66;
  --ligne:rgba(226,166,176,.26);
}
html[data-theme="homme"] {
  --or:#bf8038; --or-clair:#e6b86a; --or-fonce:#6f4a22;
  --ligne:rgba(191,128,56,.26);
}

/* ---------- Étiquette de genre (carte) ---------- */
.card__genre {
  position: absolute; top: 1rem; right: 1rem; z-index: 4;
  font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--creme-soft); border: 1px solid var(--ligne);
  padding: .3rem .6rem; border-radius: var(--rad); background: color-mix(in srgb, var(--noir) 55%, transparent);
}

/* ============================================================
   MULTI-PAGES — nav active, en-têtes de page, La Maison, Contact
   ============================================================ */

/* Lien de navigation de la page courante */
.nav__links a.active { color: var(--creme); }
.nav__links a.active::after { width: 100%; }

/* En-tête éditorial des pages internes (sans hero 3D) */
.page-hero {
  padding: clamp(8.5rem, 15vw, 12rem) var(--gut) clamp(2.5rem, 6vw, 4.5rem);
  text-align: center; border-bottom: 1px solid var(--ligne);
  background: var(--noir-2);
}
.page-hero__eyebrow { font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; }
.page-hero__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1; letter-spacing: -.02em; }
.page-hero__title em { color: var(--or-clair); font-style: italic; }
.page-hero__lede { max-width: 560px; margin: 1.5rem auto 0; color: var(--creme-soft); font-size: 1.02rem; }

/* Bande d'appel à l'action (accueil, à propos) */
.cta-band { text-align: center; padding: clamp(4rem,9vw,7rem) var(--gut); border-block: 1px solid var(--ligne); background: var(--noir-2); }
.cta-band h2 { font-family: var(--display); font-weight: 300; font-size: clamp(2rem,5vw,3.4rem); line-height: 1.05; margin-bottom: 1.8rem; }
.cta-band h2 em { color: var(--or-clair); }

/* Bande video : brume en slow-motion en fond, habillage sombre noir & or */
.cta-band--video { position: relative; overflow: hidden; background: #0c0a07; border-block-color: rgba(201,162,75,.20); }
.cta-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-band__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(12,10,7,.28), rgba(12,10,7,.74) 82%),
    linear-gradient(rgba(12,10,7,.5), rgba(12,10,7,.58)); }
.cta-band--video .cta-band__inner { position: relative; z-index: 2; }
.cta-band--video h2 { color: var(--creme, #f5f0e8); text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.cta-band--video .btn--ghost { color: var(--creme, #f5f0e8); border-color: rgba(245,240,232,.5); }
.cta-band--video .btn--ghost:hover { color: #fff; border-color: var(--or, #c9a24b); background: rgba(245,240,232,.1); }
@media (prefers-reduced-motion: reduce) {
  .cta-band__video { display: none; }
  .cta-band--video { background: #0c0a07 url('/assets/video/spray-band-poster.jpg') center/cover; }
}

/* Bouton "Voir toute la boutique" sous la grille d'accueil */
.shop-cta { text-align: center; margin-top: clamp(2.5rem,5vw,3.5rem); }

/* La Maison — récit */
.maison { max-width: 760px; margin: 0 auto; padding: clamp(4rem,8vw,6rem) var(--gut); }
.maison p { color: var(--creme-soft); font-size: 1.05rem; margin-bottom: 1.5rem; }
.maison p:first-of-type {
  font-family: var(--display); font-size: clamp(1.4rem,3.4vw,2rem); font-style: italic;
  color: var(--creme); line-height: 1.45; margin-bottom: 2.2rem;
}

/* Contact — formulaire + coordonnées */
.contact-wrap {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,5vw,4rem);
  max-width: 1080px; margin: 0 auto; padding: clamp(4rem,8vw,6rem) var(--gut); align-items: start;
}
.contact-wrap .order-form { margin: 0; }
.contact-info { display: grid; gap: 1.8rem; align-content: start; }
.contact-info__block h4 { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--or); margin-bottom: .7rem; }
.contact-info__block a, .contact-info__block p { display: block; color: var(--creme-soft); font-size: .98rem; line-height: 1.75; transition: color .3s; }
.contact-info__block a:hover { color: var(--or-clair); }
/* Bloc réseaux (icône + handle) sur la page contact */
.contact-info__socials { display: flex; flex-direction: column; gap: .8rem; margin-top: .2rem; }
.contact-info__socials a { display: inline-flex; align-items: center; gap: .65rem; }
.contact-info__socials svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--or); }
.contact-info__socials b { font-weight: 400; color: var(--creme-soft); letter-spacing: .03em; }
.contact-info__socials a:hover b { color: var(--or-clair); }

@media (max-width: 760px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   PHOTOS PRODUITS — cartes, vignettes panier, bande campagne
   ============================================================ */

/* Photo qui remplit le visuel de la carte (4/5) */
.card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  object-fit: cover; object-position: center 45%; padding: 0; z-index: 2;
  transform: scale(1.12); transition: transform .8s var(--ease);
  /* Cliquer/survoler DIRECTEMENT une <img> déclenche le glisser-déposer natif
     du navigateur (desktop) ou le geste image (tactile), qui « avale » le clic
     dès qu'il y a le moindre mouvement → la carte ne s'ouvrait qu'en visant le
     texte (pas une image). On rend la photo transparente au pointeur : le
     survol/clic tombe alors sur la carte elle-même (la vraie cible). */
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.card:hover .card__photo { transform: scale(1.2); }

/* Léger dégradé bas pour asseoir le texte sous la photo */
.card__visual::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 3;
  background: linear-gradient(to top, color-mix(in srgb, var(--noir-2) 65%, transparent), transparent);
  pointer-events: none;
}

/* Vignette panier en photo (sinon dégradé --c1 de secours) */
.cart-line__thumb { background-size: cover; background-position: center; }

/* Bande d'appel à l'action avec visuel campagne en fond */
.cta-band--photo { background-size: cover; background-position: center; }

/* ============================================================
   HERO — sélecteur d'ambiance (change le thème + le flacon 3D)
   ============================================================ */
.hero__moods { margin-top: 2.4rem; max-width: 100%; }
.hero__moods-label {
  display: block; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--creme-soft); margin-bottom: .9rem;
}
.hero__moods .univers__track {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  padding: .15rem .15rem .4rem; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}
.hero__moods .univers__track::-webkit-scrollbar { display: none; }

/* ============================================================
   HERO — vidéo plein écran en fond d'accueil (accroche visiteurs)
   ============================================================ */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}

/* ============================================================
   REEL — film vitrine vertical (présente toute la collection)
   ============================================================ */
.reel {
  position: relative; overflow: hidden;
  padding: clamp(4.5rem,9vw,8rem) var(--gut);
  background:
    radial-gradient(90% 120% at 18% 12%, color-mix(in srgb, var(--or) 12%, transparent), transparent 60%),
    var(--noir-2);
  border-block: 1px solid var(--ligne);
}
.reel__inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem); max-width: 1180px; margin: 0 auto;
}
.reel__copy { max-width: 480px; }
.reel__eyebrow { font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; }
.reel__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; }
.reel__title em { color: var(--or-clair); font-style: italic; }
.reel__lede { margin: 1.4rem 0 2rem; color: var(--creme-soft); font-size: 1.02rem; }

/* Cadre vertical 9:16 façon "reel", liseré doré et halo */
.reel__frame {
  position: relative; flex: 0 0 auto;
  width: clamp(248px, 78vw, 330px); aspect-ratio: 9/16;
  border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--or) 38%, transparent);
  background: var(--noir);
  box-shadow: 0 40px 110px -30px rgba(0,0,0,.85), 0 0 0 6px rgba(201,162,75,.05);
}
.reel__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  /* Calage chromatique : adoucit le studio clair et le réchauffe vers l'or du thème */
  filter: saturate(.85) contrast(1.05) brightness(.9) sepia(.12);
}
/* Étalonnage permanent : voile doré en haut + vignette qui fond dans le fond du site */
.reel__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--or) 18%, transparent) 0%, transparent 26%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, color-mix(in srgb, var(--noir) 68%, transparent) 100%);
}
/* Bandeau bas en dégradé + logo de marque incrusté */
.reel__brand {
  position: absolute; inset: auto 0 0 0; z-index: 2; height: 46%; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px;
  background: linear-gradient(to top, rgba(8,6,4,.95) 0%, rgba(8,6,4,.6) 38%, transparent 100%);
}
.reel__logo {
  width: 60%; max-width: 200px; height: auto; opacity: .95;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
}
/* Logo répété en haut, dégradé descendant (légèrement plus discret) */
.reel__brand--top {
  inset: 0 0 auto 0; height: 34%;
  align-items: flex-start; padding: 16px 0 0;
  background: linear-gradient(to bottom, rgba(8,6,4,.9) 0%, rgba(8,6,4,.5) 40%, transparent 100%);
}
.reel__brand--top .reel__logo { width: 46%; max-width: 152px; opacity: .9; }

@media (max-width: 820px) {
  .reel__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2.6rem; }
  .reel__copy { max-width: 540px; }
  .reel__lede { margin-inline: auto; }
}

/* ============================================================
   BOUTIQUE — navigation par catégories À CÔTÉ des produits
   La barre d'univers passe en colonne verticale à gauche ;
   la grille affiche 3 produits par ligne. Sur mobile, la barre
   repasse en pastilles horizontales au-dessus de la grille.
   (Grille RTL : CSS Grid suit la direction → sidebar à droite.)
   ============================================================ */
.shop-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.8rem);
  max-width: 1340px; margin: 0 auto; align-items: start;
}
.grid--shop { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }

.shop-aside { position: sticky; top: 92px; }
.univers--side {
  position: static; z-index: auto; display: block;
  gap: 0; padding: 0; background: none; border: none;
}
.univers--side .univers__hint {
  display: block; margin-bottom: 1.1rem;
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--or);
}
.univers--side .univers__track {
  flex-direction: column; gap: .55rem; overflow: visible; padding: 0;
  -webkit-mask-image: none; mask-image: none;
}
.univers--side .univers__pill { width: 100%; justify-content: flex-start; }
.univers--side .univers__count { margin-inline-start: auto; }

/* Tablette : la barre repasse au-dessus, pastilles horizontales, grille 2 col. */
@media (max-width: 880px) {
  .shop-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .grid--shop { grid-template-columns: repeat(2, 1fr); }
  .shop-aside { position: static; top: auto; min-width: 0; }
  .univers--side .univers__track {
    flex-direction: row; overflow-x: auto; gap: .5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .univers--side .univers__track::-webkit-scrollbar { display: none; }
  .univers--side .univers__pill { width: auto; justify-content: center; }
  .univers--side .univers__count { margin-inline-start: -.2rem; }
}
/* Téléphone : grille 2 colonnes, on masque l'intitulé de la barre. */
@media (max-width: 620px) {
  .grid--shop { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .univers--side .univers__hint { display: none; }
}

/* ============================================================
   RTL — Arabe (dir="rtl", lang="ar")
   Police arabe élégante (Cairo) + retournements directionnels.
   Ne touche PAS le layout LTR (fr/en) : tout est sous [dir="rtl"].
   ============================================================ */

/* Police : Cairo pour le corps ET les titres (Fraunces ne rend pas
   correctement l'arabe). Le chiffre/latin restent lisibles via le fallback. */
[lang="ar"] body,
[lang="ar"] {
  font-family: "Cairo", var(--body);
}
[lang="ar"] .hero__title,
[lang="ar"] .section-head__title,
[lang="ar"] .page-hero__title,
[lang="ar"] .craft__title,
[lang="ar"] .cta-band h2,
[lang="ar"] .reel__title,
[lang="ar"] .card__name,
[lang="ar"] .cart__head h3,
[lang="ar"] .footer__slogan,
[lang="ar"] .voyage__title,
[lang="ar"] .maison p:first-of-type {
  font-family: "Cairo", var(--display);
  font-weight: 500;
  letter-spacing: 0;   /* l'arabe ne se prête pas à l'interlettrage */
}

/* Alignement général : le texte suit la direction. */
[dir="rtl"] body { text-align: right; }

/* Interlettrage : les majuscules espacées latines n'ont pas de sens en arabe. */
[dir="rtl"] .hero__eyebrow,
[dir="rtl"] .section-head__eyebrow,
[dir="rtl"] .page-hero__eyebrow,
[dir="rtl"] .reel__eyebrow,
[dir="rtl"] .hero__moods-label,
[dir="rtl"] .footer__col h4,
[dir="rtl"] .contact-info__block h4,
[dir="rtl"] .order-form label,
[dir="rtl"] .cart__total span,
[dir="rtl"] .order-summary__total span,
[dir="rtl"] .card__marque,
[dir="rtl"] .card__genre,
[dir="rtl"] .card__badge {
  letter-spacing: 0;
}

/* Nav : l'ordre visuel s'inverse naturellement (flex + dir). Le soulignement
   des liens et l'ancrage du compteur panier passent de l'autre côté. */
[dir="rtl"] .nav__links a::after { left: auto; right: 0; }
[dir="rtl"] .nav__cart-count { right: auto; left: -6px; }

/* Hero : contenu ancré à droite, indicateur de défilement à droite. */
[dir="rtl"] .hero__scroll { left: auto; right: var(--gut); }
/* Le voile hero est un dégradé orienté : on le retourne pour rester cohérent. */
[dir="rtl"] .hero__veil {
  background:
    radial-gradient(120% 90% at 22% 40%, transparent 30%, color-mix(in srgb, var(--noir) 55%, transparent) 78%),
    linear-gradient(270deg, color-mix(in srgb, var(--noir) 92%, transparent) 0%, color-mix(in srgb, var(--noir) 50%, transparent) 38%, transparent 60%),
    linear-gradient(0deg, var(--noir) 2%, transparent 28%);
}

/* Marquee : noms de marques LATINS → on force le sens LTR pour éviter
   l'inversion (les ✦ et l'ordre des maisons restent naturels). */
[dir="rtl"] .marquee { direction: ltr; }

/* Savoir-faire : les étapes numérotées ont un padding gauche → on le passe
   à droite pour que le numéro reste du côté du texte. */
[dir="rtl"] .craft__steps article { padding-left: 0; padding-right: 4rem; }
[dir="rtl"] .craft__num { left: auto; right: 0; }

/* Formulaires : champs et notes alignés à droite. */
[dir="rtl"] .order-form input,
[dir="rtl"] .order-form textarea { text-align: right; }
[dir="rtl"] .order-form__note { text-align: center; }

/* Badges & étiquettes de carte : coins inversés. */
[dir="rtl"] .card__badge { left: auto; right: 1rem; }
[dir="rtl"] .card__genre { right: auto; left: 1rem; }

/* Barre d'univers : la bordure de séparation du hint passe à gauche. */
[dir="rtl"] .univers__hint { border-right: none; border-left: 1px solid var(--ligne); padding-right: 0; padding-left: 1.2rem; }

/* Panier (drawer) : glisse depuis la GAUCHE en RTL. */
[dir="rtl"] .cart { right: auto; left: 0; border-left: none; border-right: 1px solid var(--ligne); transform: translateX(-100%); }
[dir="rtl"] .cart.open { transform: translateX(0); }

/* Footer : bloc de base réparti dans l'ordre inverse (flex + dir gère). */

/* Fiche produit (product-detail) : le panneau garde sa grille ; l'info
   s'aligne à droite. La scène média reste inchangée. */
[dir="rtl"] .pd__info { text-align: right; }
[dir="rtl"] .pd__close { right: auto; left: 16px; }
[dir="rtl"] .pd__nav--prev { left: auto; right: 12px; }
[dir="rtl"] .pd__nav--next { right: auto; left: 12px; }
[dir="rtl"] .pd__counter { left: auto; right: 12px; }

/* Toast : centré (inchangé). Reel mobile : marge auto (inchangée). */