/* ═══════════════════════════════════════════════════════════════
   JALBREEZE PARFUMS — FEUILLE DE STYLE
   Mobile-first · Or & Noir · Parfumerie marocaine
   ───────────────────────────────────────────────────────────────
   01. Jetons de design       09. Cartes produit
   02. Réinitialisation       10. Fiche flacon (parfum au choix)
   03. Utilitaires            11. Packs promotion
   04. Boutons                12. Panier (tiroir)
   05. En-tête & navigation   13. Commande & remerciement
   06. Pied de page           14. Galerie & visionneuse
   07. Hero                   15. Contact
   08. Titres de section      16. Apparitions & réglages finaux
   ═══════════════════════════════════════════════════════════════ */


/* ═══ 01. JETONS DE DESIGN ════════════════════════════════════ */
:root{
  /* Couleurs */
  --noir:        #08080A;
  --noir-2:      #0D0D10;
  --noir-3:      #131317;
  --noir-4:      #1A1A20;
  --ligne:       rgba(212,175,55,.18);
  --ligne-douce: rgba(246,241,230,.08);

  --or:          #D4AF37;
  --or-clair:    #F3E3AC;
  --or-fonce:    #8A6B1E;

  --bordeaux:    #8E1F3C;
  --bordeaux-clair:#C4506F;

  --texte:       #EAE5D9;
  --texte-doux:  rgba(234,229,217,.62);
  --texte-faible:rgba(234,229,217,.40);

  --vert-wa:     #25D366;   /* aplat du bouton, identique dans les deux thèmes */
  --vert-wa-ico: #25D366;   /* trait de l'icône — assombri en thème clair */
  --succes:      #4ADE80;
  --erreur:      #F87171;

  /* Dégradés */
  --grad-or:     linear-gradient(135deg,#8A6B1E 0%,#D4AF37 22%,#F7EBB5 48%,#D4AF37 74%,#8A6B1E 100%);
  --grad-or-txt: linear-gradient(120deg,#C69B2C 0%,#F3E3AC 42%,#EFD98A 62%,#B8892A 100%);

  /* Typographie */
  --f-titre: "Cormorant Garamond", "Times New Roman", serif;
  --f-corps: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-h1: clamp(2.6rem, 10vw, 5.5rem);
  --t-h2: clamp(2rem, 7vw, 3.5rem);
  --t-h3: clamp(1.3rem, 4vw, 1.6rem);

  /* Espacements */
  --pad-x: 1.15rem;
  --sect-y: clamp(3.5rem, 10vw, 7rem);

  /* Rayons */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;

  /* Ombres */
  --sh-md: 0 12px 40px rgba(0,0,0,.5);
  --sh-lg: 0 28px 80px rgba(0,0,0,.62);
  --sh-or: 0 18px 60px rgba(212,175,55,.20);

  /* Transitions */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Motif zellige marocain (khatam à 8 branches) */
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Crect x='22' y='22' width='46' height='46'/%3E%3Crect x='22' y='22' width='46' height='46' transform='rotate(45 45 45)'/%3E%3Ccircle cx='45' cy='45' r='5'/%3E%3C/g%3E%3C/svg%3E");

  --h-entete: 68px;

  /* ─── Jetons qui changent avec le thème ──────────────────────
     Tout ce qui suit est redéfini plus bas pour le thème clair.
     ⚠️ Ne réintroduisez pas de couleur en dur dans les règles :
        une valeur codée en dur ne sait pas changer de thème. */

  --sur-or:      #171204;   /* texte posé sur un aplat doré */
  --sur-wa:      #042A12;   /* texte posé sur le vert WhatsApp */

  --entete:      rgba(8,8,10,.94);
  --entete-fixe: rgba(8,8,10,.985);
  --flottant:    rgba(13,13,16,.93);   /* étiquette posée sur une photo */
  --flottant-2:  rgba(8,8,10,.86);
  --voile:       rgba(4,4,5,.82);      /* derrière les tiroirs */
  --voile-fort:  rgba(4,4,5,.97);      /* derrière la visionneuse */

  --hero-voile:
    radial-gradient(115% 80% at 50% 0%, rgba(8,8,10,.30) 0%, rgba(8,8,10,.82) 55%, var(--noir) 100%),
    linear-gradient(180deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.5) 42%, var(--noir) 96%);
  --hero-photo-opacite: .22;

  --erreur-fond:  rgba(248,113,113,.09);
  --erreur-bord:  rgba(248,113,113,.3);
  --erreur-texte: #FCA5A5;
  --succes-fond:  rgba(74,222,128,.1);
  --succes-bord:  rgba(74,222,128,.35);
}


/* ═══ 02. RÉINITIALISATION ════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-entete) + 16px);
}

body{
  font-family:var(--f-corps);
  font-size:var(--t-base);
  font-weight:300;
  line-height:1.62;
  color:var(--texte);
  background:var(--noir);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:var(--h-entete);
}
body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }

/* ⚠️ À GARDER — corrige un bug de clics
   Le navigateur masque [hidden] via « display:none », mais nos règles
   de classe (.visionneuse, .alerte, .commande…) ont la même priorité
   et l'emportaient. Résultat : la visionneuse restait invisible mais
   couvrait tout l'écran et absorbait tous les clics.
   Cette règle garantit qu'un élément masqué l'est vraiment. */
[hidden]{ display:none !important; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }

h1,h2,h3,h4{ font-family:var(--f-titre); font-weight:300; line-height:1.08; letter-spacing:-.015em; }

::selection{ background:var(--or); color:var(--noir); }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:3px; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--noir); }
::-webkit-scrollbar-thumb{ background:var(--or-fonce); border-radius:var(--r-full); }


/* ═══ 03. UTILITAIRES ═════════════════════════════════════════ */
.conteneur{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--pad-x); }
.conteneur--etroit{ max-width:760px; }

.section{ padding-block:var(--sect-y); position:relative; }
.section--alt{ background:var(--noir-2); }
.section--alt::before,.section--alt::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ligne),transparent);
}
.section--alt::before{ top:0; } .section--alt::after{ bottom:0; }

.or-txt{
  background:var(--grad-or-txt);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.lecteur-seul{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ═══ 04. BOUTONS ═════════════════════════════════════════════ */
.btn{
  --py:.9rem; --px:1.5rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:var(--py) var(--px);
  font-size:var(--t-sm); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--r-full);
  position:relative; overflow:hidden;
  text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease), opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
          stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.btn .ico-plein{ fill:currentColor; stroke:none; }

.btn--sm{ --py:.6rem; --px:1.1rem; font-size:var(--t-xs); }
.btn--lg{ --py:1.05rem; --px:1.9rem; }
.btn--bloc{ width:100%; }

.btn--or{
  background:var(--grad-or); background-size:200% 100%;
  color:var(--sur-or); font-weight:600;
  box-shadow:0 10px 30px rgba(212,175,55,.24);
  transition:background-position .6s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--or:hover{ background-position:100% 0; transform:translateY(-2px);
                box-shadow:0 16px 44px rgba(212,175,55,.38); }
.btn--or:active{ transform:translateY(0); }

/* Le remplissage au survol se fait par la couleur de fond, sans
   pseudo-élément superposé : rien à empiler, rien à composer. */
.btn--fantome{
  color:var(--texte);
  border:1px solid rgba(212,175,55,.34);
  background:rgba(212,175,55,.05);
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--fantome:hover{
  color:var(--sur-or);
  background-color:var(--or);
  border-color:var(--or);
  transform:translateY(-2px);
}

.btn--wa{ background:var(--vert-wa); color:var(--sur-wa); font-weight:600;
          box-shadow:0 10px 30px rgba(37,211,102,.26); }
.btn--wa:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(37,211,102,.4); }

.btn:disabled{ opacity:.45; pointer-events:none; }


/* ═══ 05. EN-TÊTE & NAVIGATION ════════════════════════════════ */
/* ⚠️ NE PAS remettre « backdrop-filter » sur cet en-tête.
   Il a été retiré volontairement, pour trois raisons :
   1. Il est recalculé à chaque défilement — première cause de
      lenteur au toucher sur téléphone.
   2. Sur de nombreux GPU mobiles, un en-tête fixe qui refloute le
      fond laisse une image rémanente : la page paraît dédoublée.
   3. Un élément qui possède « backdrop-filter » devient le bloc
      conteneur de ses descendants en position:fixed, ce qui
      rognait le tiroir de menu à la hauteur de l'en-tête.
   Un fond opaque donne le même résultat visuel, sans aucun coût. */
.entete{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--h-entete);
  display:flex; align-items:center;
  background:var(--entete);
  border-bottom:1px solid var(--ligne-douce);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.entete.est-fixe{ background:var(--entete-fixe); border-bottom-color:var(--ligne); }

.entete__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; }

/* Marque */
.marque{ display:flex; align-items:center; gap:.6rem; flex:none; }
.marque__logo{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--ligne); object-fit:cover;
  transition:transform .5s var(--ease);
}
.marque:hover .marque__logo{ transform:rotate(-8deg) scale(1.06); }
.marque__texte{ display:flex; flex-direction:column; line-height:1; }
.marque__texte strong{
  font-family:var(--f-titre); font-size:1.24rem; font-weight:500; letter-spacing:.02em;
  background:var(--grad-or-txt); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.marque__texte em{
  font-family:var(--f-corps); font-size:.55rem; font-style:normal; font-weight:400;
  letter-spacing:.4em; text-transform:uppercase; color:var(--texte-faible); margin-top:.16rem;
}

/* Actions à droite */
/* z-index au-dessus du tiroir (.nav, z-index 99) pour que le panier
   et le burger restent accessibles quand le menu est ouvert. */
.entete__actions{
  display:flex; align-items:center; gap:.25rem;
  position:relative; z-index:101;
}

.ico-btn{
  width:42px; height:42px; display:grid; place-content:center;
  border-radius:50%; position:relative;
  transition:background .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.ico-btn:hover{ background:rgba(212,175,55,.08); }
.ico-btn svg{ width:21px; height:21px; fill:none; stroke:var(--or);
              stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Bouton soleil / lune. Il reprend .ico-btn : même taille, même
   zone tactile, même survol que le panier et le menu. */
.theme-btn svg{ fill:none; stroke:var(--or); stroke-width:1.7;
                stroke-linecap:round; stroke-linejoin:round; }

.pastille{
  position:absolute; top:4px; right:3px;
  min-width:18px; height:18px; padding:0 4px;
  display:grid; place-content:center;
  background:var(--grad-or); color:var(--sur-or);
  font-size:.62rem; font-weight:600; line-height:1;
  border-radius:var(--r-full);
  transform:scale(0); transition:transform .4s var(--ease-out);
}
.pastille.est-visible{ transform:scale(1); }

/* Menu mobile */
.nav{
  position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
  background:var(--noir-2); border-left:1px solid var(--ligne);
  padding:calc(var(--h-entete) + 1.5rem) 1.75rem 2rem;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s var(--ease-out);
  z-index:99; overflow-y:auto;
}
.nav.est-ouvert{ transform:translateX(0); }

.nav__lien{
  font-family:var(--f-titre); font-size:1.5rem;
  padding-block:.7rem; border-bottom:1px solid var(--ligne-douce);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.nav__lien:hover,.nav__lien.est-actif{ color:var(--or); padding-left:.4rem; }

.nav__contact{ margin-top:auto; padding-top:2rem; display:grid; gap:.6rem; }

.voile{
  position:fixed; inset:0; background:var(--voile);
  z-index:98; opacity:0; transition:opacity .4s var(--ease);
}
.voile.est-visible{ opacity:1; }

.burger{ width:42px; height:42px; display:grid; place-content:center; gap:5px; z-index:101; }
.burger span{
  display:block; width:22px; height:1.5px; background:var(--or); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease), width .4s var(--ease);
}
.burger span:nth-child(2){ width:15px; margin-left:auto; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); width:22px; }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }


/* ═══ 06. PIED DE PAGE ════════════════════════════════════════ */
.pied{ background:var(--noir); border-top:1px solid var(--ligne); padding-top:clamp(2.5rem,7vw,4rem); }
.pied__grille{ display:grid; gap:2rem; padding-bottom:2.5rem; }
.pied__col h3{
  font-family:var(--f-corps); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--or); margin-bottom:1rem;
}
.pied__col a:not(.marque){
  display:block; color:var(--texte-doux); font-size:var(--t-sm);
  padding-block:.34rem; transition:color .3s var(--ease), transform .3s var(--ease);
}
.pied__col a:not(.marque):hover{ color:var(--or); transform:translateX(4px); }
.pied__col--marque p{ color:var(--texte-faible); font-size:var(--t-sm); margin-top:1rem; max-width:36ch; }

.pied__reseaux{ display:flex; gap:.55rem; margin-top:1.25rem; }
.pied__reseaux a{
  width:40px; height:40px; display:grid !important; place-content:center;
  border:1px solid var(--ligne); border-radius:50%;
  transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.pied__reseaux svg{ width:18px; height:18px; fill:none; stroke:var(--or); stroke-width:1.5;
                    transition:stroke .35s var(--ease); }
.pied__reseaux a:hover{ background:var(--grad-or); border-color:transparent; transform:translateY(-3px) !important; }
.pied__reseaux a:hover svg{ stroke:var(--noir); }

.pied__bas{
  display:flex; flex-direction:column; gap:.6rem; align-items:center; text-align:center;
  padding-block:1.35rem; border-top:1px solid var(--ligne-douce);
  font-size:var(--t-xs); color:var(--texte-faible);
}


/* ═══ 07. HERO ════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:calc(100svh - var(--h-entete));
  display:flex; align-items:center;
  padding-block:3rem 3.5rem; overflow:hidden; isolation:isolate;
}
.hero__fond{ position:absolute; inset:0; z-index:-1; }
/* ⚠️ Aucun « filter » ici. Le flou est DÉJÀ dans le fichier image
   (assets/hero-fond.webp, généré une fois pour toutes) : le rendu
   est identique, mais le téléphone n'a plus rien à recalculer.
   Pour changer cette photo, voir GUIDE-INSTALLATION.md. */
.hero__photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:var(--hero-photo-opacite);
  /* Pas de « transform » : cela créait une couche de composition
     permanente, source d'images rémanentes au redimensionnement. */
}
.hero__voile{
  position:absolute; inset:0;
  background:var(--hero-voile);
}
.hero__zellige{
  position:absolute; inset:0; background-image:var(--zellige); background-size:90px 90px;
  opacity:.05;
  mask-image:radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
}
/* ⚠️ Anciennement « filter:blur(88px) » + animation de mise à
   l'échelle, en boucle. Un rayon de flou de 88 px oblige le GPU à
   recalculer une immense zone à chaque image : c'était la cause
   principale des à-coups au toucher sur téléphone.
   Un dégradé radial est déjà doux — le flou n'apportait rien. */
.hero__halo{ position:absolute; border-radius:50%; pointer-events:none; }
.hero__halo--1{
  width:min(80vw,560px); aspect-ratio:1; top:-14%; left:50%; translate:-50% 0;
  background:radial-gradient(circle,
    rgba(212,175,55,.26) 0%, rgba(212,175,55,.13) 32%,
    rgba(212,175,55,.05) 55%, transparent 72%);
}
.hero__halo--2{
  width:min(66vw,440px); aspect-ratio:1; bottom:-16%; right:-16%;
  background:radial-gradient(circle,
    rgba(198,155,44,.18) 0%, rgba(198,155,44,.08) 38%, transparent 70%);
}
/* L'animation ne tourne que sur grand écran, et uniquement sur
   l'opacité : c'est la seule propriété que le GPU compose sans
   redessiner quoi que ce soit. */
@keyframes pulseHalo{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

.hero__inner{ display:flex; flex-direction:column; gap:2rem; position:relative; }
.hero__texte{ text-align:center; }

.hero__surtitre{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-xs); letter-spacing:.36em; text-transform:uppercase;
  color:var(--or); margin-bottom:1.1rem;
}
.hero__surtitre::before,.hero__surtitre::after{
  content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--or));
}
.hero__surtitre::after{ background:linear-gradient(90deg,var(--or),transparent); }

.hero__titre{ font-size:var(--t-h1); line-height:.96; margin-bottom:1rem; }
.hero__titre span{ display:block; }
.hero__titre em{
  background:var(--grad-or-txt); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:400;
}
.hero__soustitre{
  font-size:var(--t-lg); color:var(--texte-doux);
  max-width:46ch; margin-inline:auto; margin-bottom:1.5rem;
}
.hero__actions{ display:flex; flex-direction:column; gap:.7rem; }

.hero__confiance{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .95rem;
  margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--ligne-douce);
}
.hero__confiance li{
  display:flex; align-items:center; gap:.38rem;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texte-faible); white-space:nowrap;
}
.hero__confiance svg{ width:14px; height:14px; flex:none; fill:none; stroke:var(--or);
                      stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.hero__media{ position:relative; width:min(100%,320px); margin-inline:auto; }
.hero__cadre{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(212,175,55,.28);
  box-shadow:var(--sh-lg), var(--sh-or);
  aspect-ratio:3/4;
}
.hero__cadre img{ width:100%; height:100%; object-fit:cover; }

/* ─── Diaporama du hero ──────────────────────────────────────
   ⚠️ RÈGLE DE SÉCURITÉ — même principe que les photos produit.
   Sans JavaScript, une seule photo est affichée et les autres
   sont simplement absentes : jamais de cadre vide. Le fondu ne
   s'active que si site.js a posé la classe « js » sur <html>,
   et la première vue porte déjà « est-active » dans le HTML —
   donc même si le script s'arrête avant d'initialiser le
   diaporama, la photo principale reste visible. */
.hero__vue{ display:none; }
.hero__vue.est-active{ display:block; }

html.js .hero__vue{
  display:block; position:absolute; inset:0;
  opacity:0; transition:opacity .9s var(--ease);
}
html.js .hero__vue.est-active{ opacity:1; }

/* Pastilles de navigation */
.hero__points{
  display:flex; justify-content:center; gap:.45rem;
  margin-top:.85rem;
}
.hero__point{
  width:44px; height:44px; padding:0; display:grid; place-content:center;
  border-radius:50%; -webkit-tap-highlight-color:transparent;
}
/* La cible tactile fait 44 px — la taille recommandée pour le doigt —
   alors que le point visible n'en fait que 7. Le bouton reste discret
   sans être difficile à viser. */
.hero__point::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--texte-faible);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.hero__point:hover::before{ background:var(--or-fonce); }
.hero__point.est-actif::before{ background:var(--grad-or); transform:scale(1.5); }

/* Sans JavaScript, les pastilles ne servent à rien : on les cache. */
.hero__points{ display:none; }
html.js .hero__points{ display:flex; }
.hero__cadre::after{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(243,227,172,.20); border-radius:calc(var(--r-lg) - 7px); pointer-events:none;
}
.hero__reflet{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.15) 46%,transparent 60%);
  transform:translateX(-100%); animation:reflet 5.5s var(--ease) infinite;
}
@keyframes reflet{ 0%,72%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

.hero__etiquette{
  position:absolute; left:-.5rem; bottom:1.8rem; z-index:2;
  background:var(--flottant);
  border:1px solid var(--ligne); border-radius:var(--r-md);
  box-shadow:var(--sh-md); padding:.65rem .95rem;
  display:flex; flex-direction:column; gap:.1rem;
}
.hero__etiquette small{ font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--texte-faible); }
.hero__etiquette strong{ font-family:var(--f-titre); font-size:1.15rem; font-weight:500; color:var(--or-clair); }


/* ═══ 08. TITRES DE SECTION ═══════════════════════════════════ */
.tete{ text-align:center; max-width:640px; margin:0 auto clamp(2.25rem,6vw,3.5rem); }
.tete__surtitre{
  font-size:var(--t-xs); letter-spacing:.36em; text-transform:uppercase;
  color:var(--or); margin-bottom:.9rem;
}
.tete__surtitre::after{
  content:""; display:block; width:38px; height:1px;
  background:var(--grad-or); margin:.8rem auto 0;
}
.tete__titre{ font-size:var(--t-h2); margin-bottom:1rem; }
.tete__titre em{
  background:var(--grad-or-txt); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:400;
}
.tete__intro{ color:var(--texte-doux); max-width:52ch; margin-inline:auto; }
.tete--gauche{ text-align:left; margin-inline:0; }
.tete--gauche .tete__surtitre::after{ margin-inline:0; }
.tete--gauche .tete__intro{ margin-inline:0; }

.section__pied{ display:flex; justify-content:center; margin-top:clamp(2rem,5vw,3rem); }


/* ═══ 09. CARTES PRODUIT ══════════════════════════════════════ */
.grille-produits{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }

.carte{
  display:flex; flex-direction:column;
  background:linear-gradient(165deg,var(--noir-3),var(--noir-2));
  border:1px solid var(--ligne-douce); border-radius:var(--r-md);
  overflow:hidden; position:relative;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.carte:hover{ transform:translateY(-5px); border-color:var(--ligne); box-shadow:var(--sh-md); }

.carte__media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--noir-4); }
.carte__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.carte:hover .carte__media img{ transform:scale(1.06); }

.carte__format{
  position:absolute; right:.55rem; top:.55rem; z-index:1;
  font-size:.6rem; letter-spacing:.1em; color:var(--or-clair);
  background:var(--flottant-2);
  border:1px solid var(--ligne); border-radius:var(--r-full); padding:.24rem .6rem;
}

.carte__corps{ display:flex; flex-direction:column; flex:1; padding:.85rem .8rem .9rem; }
.carte__nom{ font-size:1.18rem; line-height:1.15; margin-bottom:.2rem; }
.carte__sign{ font-size:var(--t-xs); color:var(--texte-faible); line-height:1.45; margin-bottom:.8rem; }
.carte__notes{ font-size:var(--t-xs); color:var(--or); letter-spacing:.04em; margin-bottom:.8rem; }

.carte__pied{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-top:auto; padding-top:.7rem; border-top:1px solid var(--ligne-douce);
}
.carte__prix{ font-family:var(--f-titre); font-size:1.4rem; font-weight:500; color:var(--or-clair); white-space:nowrap; }
.carte__prix i{ font-style:normal; font-size:.62rem; letter-spacing:.1em; color:var(--texte-faible); margin-left:.32rem; }

.carte__ajout{
  width:38px; height:38px; flex:none; display:grid; place-content:center;
  border-radius:50%; background:var(--grad-or); color:var(--sur-or);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.carte__ajout svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.carte__ajout:hover{ transform:scale(1.1); box-shadow:0 8px 22px rgba(212,175,55,.4); }
.carte__ajout.est-ajoute{ background:var(--succes); }


/* Photo d'ambiance en tête de la page Sprays */
.spray-ambiance{
  margin:0 auto clamp(2rem,5vw,3rem);
  max-width:520px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--ligne);
  box-shadow:var(--sh-lg);
}
.spray-ambiance img{
  width:100%; height:auto; display:block;
  aspect-ratio:9/16; object-fit:cover;
}
@media (min-width:768px){
  .spray-ambiance{ max-width:400px; }
  .spray-ambiance img{ aspect-ratio:3/4; }
}


/* ═══ 10. FICHE FLACON (parfum au choix) ══════════════════════ */
.flacons{ display:grid; gap:1.5rem; }

.flacon{
  display:grid; gap:1rem;
  background:linear-gradient(165deg,var(--noir-3),var(--noir-2));
  border:1px solid var(--ligne-douce); border-radius:var(--r-lg);
  padding:.75rem; overflow:hidden;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.flacon:hover{ border-color:var(--ligne); box-shadow:var(--sh-md); }

.flacon__galerie{ position:relative; }
.flacon__principale{
  aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--noir-4);
  border:1px solid var(--ligne-douce);
}
.flacon__principale img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--ease); }

.flacon__vignettes{ display:flex; gap:.4rem; margin-top:.4rem; }
.flacon__vignette{
  flex:1; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--ligne-douce); opacity:.5;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.flacon__vignette img{ width:100%; height:100%; object-fit:cover; }
.flacon__vignette.est-active{ opacity:1; border-color:var(--or); }
.flacon__vignette:hover{ opacity:.85; }

.flacon__corps{ display:flex; flex-direction:column; padding:.4rem .55rem .55rem; }
.flacon__entete{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.3rem; }
.flacon__nom{ font-size:var(--t-h3); }
.flacon__format{
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--or); white-space:nowrap;
}
.flacon__sign{ font-size:var(--t-sm); color:var(--texte-doux); margin-bottom:.4rem; }
.flacon__argument{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--t-xs); color:var(--texte-faible); margin-bottom:1rem;
}
.flacon__argument svg{ width:14px; height:14px; fill:none; stroke:var(--or); stroke-width:1.8; }

.champ{ display:block; margin-bottom:.9rem; }
.champ__label{
  display:block; font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--texte-doux); margin-bottom:.4rem;
}
.champ__label span{ color:var(--or); }

.select, .saisie{
  width:100%; padding:.8rem .9rem;
  background:var(--noir); color:var(--texte);
  border:1px solid var(--ligne); border-radius:var(--r-sm);
  font-size:var(--t-sm);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.select:focus,.saisie:focus{ outline:none; border-color:var(--or); background:var(--noir-3); }
.saisie::placeholder{ color:var(--texte-faible); }

.select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px;
  padding-right:2.4rem;
}
.select optgroup{ background:var(--noir-2); color:var(--or); font-style:normal; font-weight:500; }
.select option{ background:var(--noir-2); color:var(--texte); font-weight:300; }

/* ─── Choix du parfum en trois temps ────────────────────────
   Le catalogue dépasse 300 références : le client réduit le choix
   par étapes plutôt que de faire défiler une liste interminable. */
.choix{
  border:1px solid var(--ligne-douce); border-radius:var(--r-md);
  background:rgba(212,175,55,.035);
  padding:.85rem .8rem .9rem; margin-bottom:1rem;
}
.choix__t{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--texte-doux); margin-bottom:.6rem;
}
.choix__t span{ color:var(--or); }

.choix__genres{
  display:flex; gap:.4rem; margin-bottom:.75rem;
}
.genre{
  flex:1; min-height:44px; padding:0 .8rem;
  border:1px solid var(--ligne); border-radius:var(--r-full);
  background:var(--noir); color:var(--texte-doux);
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.genre:hover{ color:var(--or); border-color:var(--or-fonce); }
.genre.est-actif{
  background:var(--grad-or); border-color:transparent;
  color:var(--sur-or); font-weight:600;
}

.choix__listes{ display:grid; gap:.6rem; }
.choix__listes .champ{ margin-bottom:0; }

/* La flèche du menu doit rester lisible quand le menu est désactivé */
.env-select{ position:relative; }
.select:disabled{ opacity:.5; cursor:not-allowed; }

.choix__notes{
  margin-top:.7rem; padding-top:.6rem;
  border-top:1px dashed var(--ligne-douce);
  font-size:var(--t-xs); color:var(--or); letter-spacing:.04em;
}

@media (min-width:560px){
  .choix__listes{ grid-template-columns:1fr 1fr; gap:.7rem; }
}

.flacon__pied{
  display:flex; align-items:center; justify-content:space-between; gap:.9rem;
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--ligne-douce);
}
.flacon__prix{ font-family:var(--f-titre); font-size:1.7rem; font-weight:500; color:var(--or-clair); }
.flacon__prix i{ font-style:normal; font-size:.68rem; letter-spacing:.1em; color:var(--texte-faible); margin-left:.34rem; }


/* ═══ 11. PACKS PROMOTION ═════════════════════════════════════ */
.packs{ display:grid; gap:1.5rem; }

.pack{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(212,175,55,.3);
  background:linear-gradient(165deg,var(--noir-3),var(--noir-2));
  box-shadow:var(--sh-md);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pack:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg), var(--sh-or); }

.pack--femme{ border-color:rgba(196,80,111,.34); }

.pack__ruban{
  position:absolute; top:0; right:0; z-index:2;
  background:var(--grad-or); color:var(--sur-or);
  font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.4rem 1rem; border-bottom-left-radius:var(--r-md);
}
.pack--femme .pack__ruban{ background:linear-gradient(135deg,var(--bordeaux),var(--bordeaux-clair)); color:#fff; }

.pack__media{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--noir-4); }
.pack__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

.pack__corps{ padding:1.25rem 1.1rem 1.2rem; }
.pack__nom{ font-size:var(--t-h3); margin-bottom:.15rem; }
.pack__sous{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--or); margin-bottom:.7rem;
}
.pack--femme .pack__sous{ color:var(--bordeaux-clair); }
.pack__sign{ font-size:var(--t-sm); color:var(--texte-doux); margin-bottom:1rem; }

.pack__atouts{ display:grid; gap:.5rem; padding-block:1rem; border-top:1px solid var(--ligne-douce); }
.pack__atouts li{ display:flex; align-items:flex-start; gap:.55rem; font-size:var(--t-sm); color:var(--texte-doux); }
.pack__atouts svg{ width:15px; height:15px; flex:none; margin-top:.26rem;
                   fill:none; stroke:var(--or); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pack--femme .pack__atouts svg{ stroke:var(--bordeaux-clair); }

.pack__pied{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid var(--ligne-douce);
}
.pack__prix{ display:flex; flex-direction:column; line-height:1.1; }
.pack__prix strong{ font-family:var(--f-titre); font-size:2rem; font-weight:500; color:var(--or-clair); }
.pack__prix strong i{ font-style:normal; font-size:.7rem; letter-spacing:.1em; color:var(--texte-faible); margin-left:.34rem; }
.pack__prix s{ font-size:var(--t-xs); color:var(--texte-faible); text-decoration-color:rgba(212,175,55,.6); }


/* ═══ 12. PANIER (TIROIR) ═════════════════════════════════════ */
.panier{
  position:fixed; inset:0 0 0 auto; width:min(92vw,400px);
  background:var(--noir-2); border-left:1px solid var(--ligne);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .5s var(--ease-out);
  z-index:120;
}
.panier.est-ouvert{ transform:translateX(0); }

.panier__tete{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.1rem 1rem; border-bottom:1px solid var(--ligne-douce); flex:none;
}
.panier__tete h2{ font-size:1.45rem; }
.panier__fermer{ width:38px; height:38px; display:grid; place-content:center; border-radius:50%;
                 font-size:1.5rem; line-height:1; color:var(--or); transition:background .3s; }
.panier__fermer:hover{ background:rgba(212,175,55,.1); }

/* Barre de progression livraison offerte */
.progression{ padding:.9rem 1.1rem; border-bottom:1px solid var(--ligne-douce); flex:none; }
.progression__txt{ font-size:var(--t-xs); color:var(--texte-doux); margin-bottom:.5rem; }
.progression__txt strong{ color:var(--or); font-weight:500; }
.progression__barre{ height:4px; background:var(--noir-4); border-radius:var(--r-full); overflow:hidden; }
.progression__barre i{
  display:block; height:100%; width:0%;
  background:var(--grad-or); border-radius:var(--r-full);
  transition:width .6s var(--ease-out);
}
.progression.est-atteint .progression__txt strong{ color:var(--succes); }
.progression.est-atteint .progression__barre i{ background:var(--succes); }

.panier__corps{ flex:1; overflow-y:auto; padding:.9rem 1.1rem; }

.panier__vide{ text-align:center; padding-block:3.5rem 2rem; color:var(--texte-faible); }
.panier__vide svg{ width:46px; height:46px; margin:0 auto 1rem; fill:none; stroke:var(--or-fonce); stroke-width:1.2; }
.panier__vide p{ margin-bottom:1.5rem; font-size:var(--t-sm); }

.ligne{
  display:flex; gap:.8rem; padding-block:.85rem;
  border-bottom:1px solid var(--ligne-douce);
}
.ligne:last-child{ border-bottom:0; }
.ligne__img{
  width:64px; height:80px; flex:none; border-radius:var(--r-sm);
  object-fit:cover; border:1px solid var(--ligne-douce); background:var(--noir-4);
}
.ligne__info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ligne__nom{ font-family:var(--f-titre); font-size:1.05rem; line-height:1.2; }
.ligne__detail{ font-size:.68rem; letter-spacing:.06em; color:var(--texte-faible); margin-top:.1rem; }
.ligne__parfum{ font-size:.68rem; color:var(--or); margin-top:.1rem; }
.ligne__bas{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.5rem; }
.ligne__prix{ font-family:var(--f-titre); font-size:1.05rem; color:var(--or-clair); white-space:nowrap; }

.qte{ display:flex; align-items:center; gap:.15rem; border:1px solid var(--ligne-douce); border-radius:var(--r-full); }
.qte button{
  width:26px; height:26px; display:grid; place-content:center;
  color:var(--or); font-size:.95rem; line-height:1; border-radius:50%;
  transition:background .25s;
}
.qte button:hover{ background:rgba(212,175,55,.12); }
.qte span{ min-width:20px; text-align:center; font-size:var(--t-xs); }

.ligne__suppr{
  align-self:flex-start; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texte-faible); transition:color .3s;
}
.ligne__suppr:hover{ color:var(--erreur); }

.panier__pied{ flex:none; padding:1rem 1.1rem 1.2rem; border-top:1px solid var(--ligne); background:var(--noir-3); }
.total{ display:flex; justify-content:space-between; font-size:var(--t-sm); color:var(--texte-doux); margin-bottom:.45rem; }
.total--final{
  font-family:var(--f-titre); font-size:1.35rem; color:var(--texte);
  padding-top:.6rem; border-top:1px solid var(--ligne-douce); margin-top:.6rem; margin-bottom:.9rem;
}
.total--final strong{ color:var(--or-clair); font-weight:500; }
.total .offerte{ color:var(--succes); }
.panier__note{ font-size:.66rem; color:var(--texte-faible); text-align:center; margin-top:.7rem; line-height:1.5; }


/* ═══ 13. COMMANDE & REMERCIEMENT ═════════════════════════════ */
.commande{ display:grid; gap:2rem; }

.recap{
  background:var(--noir-3); border:1px solid var(--ligne-douce);
  border-radius:var(--r-md); padding:1.1rem;
}
.recap h3{ font-size:1.25rem; margin-bottom:.9rem; }
.recap__ligne{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:var(--t-sm); padding-block:.55rem; border-bottom:1px solid var(--ligne-douce);
}
.recap__ligne:last-of-type{ border-bottom:0; }
.recap__ligne span:first-child{ color:var(--texte-doux); }
.recap__ligne em{ font-style:normal; color:var(--or); font-size:.72rem; display:block; }

.formulaire{
  background:linear-gradient(165deg,var(--noir-3),var(--noir-2));
  border:1px solid var(--ligne); border-radius:var(--r-lg); padding:1.4rem 1.15rem;
}
.formulaire h3{ font-size:1.35rem; margin-bottom:.35rem; }
.formulaire > p{ font-size:var(--t-sm); color:var(--texte-doux); margin-bottom:1.3rem; }

.champ__erreur{ display:block; font-size:var(--t-xs); color:var(--erreur); margin-top:.35rem; min-height:1em; }
.saisie.est-invalide{ border-color:var(--erreur); }

.alerte{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.9rem 1rem; border-radius:var(--r-sm);
  font-size:var(--t-sm); margin-bottom:1rem;
}
.alerte svg{ width:18px; height:18px; flex:none; margin-top:.15rem; fill:none; stroke-width:1.8; }
.alerte--erreur{ background:var(--erreur-fond); border:1px solid var(--erreur-bord); color:var(--erreur-texte); }
.alerte--erreur svg{ stroke:var(--erreur); }
.alerte--info{ background:rgba(212,175,55,.07); border:1px solid var(--ligne); color:var(--texte-doux); }
.alerte--info svg{ stroke:var(--or); }

/* Page de remerciement */
.merci{ text-align:center; padding-block:clamp(3rem,10vw,6rem); }
.merci__icone{
  width:80px; height:80px; margin:0 auto 1.75rem;
  display:grid; place-content:center; border-radius:50%;
  background:var(--succes-fond); border:1px solid var(--succes-bord);
}
.merci__icone svg{ width:38px; height:38px; fill:none; stroke:var(--succes); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.etapes{ display:grid; gap:1rem; margin-block:2.5rem; text-align:left; }
.etape{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--noir-3); border:1px solid var(--ligne-douce);
  border-radius:var(--r-md); padding:1.1rem;
}
.etape__num{
  width:40px; height:40px; flex:none; display:grid; place-content:center;
  border-radius:50%; border:1px solid var(--ligne); background:rgba(212,175,55,.05);
  font-family:var(--f-titre); font-size:1.15rem; color:var(--or);
}
.etape strong{ display:block; font-weight:500; margin-bottom:.15rem; }
.etape p{ font-size:var(--t-sm); color:var(--texte-doux); }


/* ═══ 14. GALERIE & VISIONNEUSE ═══════════════════════════════ */
.galerie{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.galerie__item{
  position:relative; overflow:hidden; border-radius:var(--r-sm);
  border:1px solid var(--ligne-douce); cursor:zoom-in;
  aspect-ratio:3/4; background:var(--noir-3);
}
.galerie__item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.galerie__item:hover img{ transform:scale(1.07); }
.galerie__item:hover{ border-color:var(--ligne); }

.visionneuse{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  /* Fond déjà opaque à 97 % : un flou par-dessus serait invisible
     tout en coûtant un recalcul plein écran à l'ouverture. */
  background:var(--voile-fort);
  opacity:0; transition:opacity .35s var(--ease);
}
.visionneuse.est-visible{ opacity:1; }
.visionneuse__img{
  max-width:100%; max-height:86vh; border-radius:var(--r-md);
  border:1px solid var(--ligne); box-shadow:var(--sh-lg);
  transform:scale(.94); transition:transform .45s var(--ease-out);
}
.visionneuse.est-visible .visionneuse__img{ transform:scale(1); }
.visionneuse__fermer,.visionneuse__nav{
  position:absolute; width:44px; height:44px; display:grid; place-content:center;
  border:1px solid var(--ligne); border-radius:50%;
  background:var(--flottant); color:var(--or); font-size:1.5rem; line-height:1;
  transition:background .3s, color .3s, transform .3s;
}
.visionneuse__fermer:hover,.visionneuse__nav:hover{ background:var(--or); color:var(--noir); transform:scale(1.08); }
.visionneuse__fermer{ top:1rem; right:1rem; }
.visionneuse__nav--prec{ left:.6rem; } .visionneuse__nav--suiv{ right:.6rem; }


/* ═══ 15. CONTACT ═════════════════════════════════════════════ */
.contacts{ display:grid; gap:.9rem; }
.contact-carte{
  display:flex; gap:1rem; align-items:center;
  background:linear-gradient(160deg,var(--noir-3),var(--noir-2));
  border:1px solid var(--ligne-douce); border-radius:var(--r-md);
  padding:1.1rem;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.contact-carte:hover{ border-color:var(--ligne); transform:translateY(-3px); }
.contact-carte__ico{
  width:48px; height:48px; flex:none; display:grid; place-content:center;
  border-radius:50%; border:1px solid var(--ligne); background:rgba(212,175,55,.05);
}
.contact-carte__ico svg{ width:22px; height:22px; fill:none; stroke:var(--or); stroke-width:1.5; }
.contact-carte--wa .contact-carte__ico{ background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.3); }
.contact-carte--wa .contact-carte__ico svg{ fill:var(--vert-wa-ico); stroke:none; }
.contact-carte strong{ display:block; font-weight:500; }
.contact-carte span{ font-size:var(--t-sm); color:var(--texte-doux); }

.bandeau-info{
  display:grid; gap:.8rem; grid-template-columns:repeat(2,1fr);
  padding:1.1rem; border-radius:var(--r-md);
  background:var(--noir-3); border:1px solid var(--ligne-douce);
}
.bandeau-info div{ text-align:center; }
.bandeau-info strong{ display:block; font-family:var(--f-titre); font-size:1.35rem; color:var(--or-clair); }
.bandeau-info span{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-faible); }


/* ═══ 15 bis. CONFORT VISUEL & TACTILE ════════════════════════
   Deux détails qui changent la perception de qualité :
   - les photos apparaissent en fondu au lieu de surgir d'un coup ;
   - chaque élément tactile réagit au doigt, sans délai.
   ═══════════════════════════════════════════════════════════════ */

/* Fondu à l'arrivée des photos -------------------------------
   ⚠️ RÈGLE DE SÉCURITÉ — NE PAS INVERSER.
   Les photos sont VISIBLES par défaut (opacity:1). Le fondu est
   une animation jouée à l'arrivée de l'image, pas un passage de
   0 à 1 piloté par une classe.
   Pourquoi : si le JavaScript ne s'exécutait pas, ou si une
   transition n'aboutissait pas, une valeur de départ à 0 rendrait
   TOUTES les photos de la boutique invisibles. Ici, le pire cas
   est une image qui apparaît sans fondu — jamais une page vide. */
@keyframes apparitionPhoto{ from{ transform:scale(1.05); } to{ transform:scale(1); } }

/* ⚠️ Ni « opacity » dans l'animation, ni « animation-fill-mode ».
   L'animation ne touche que l'échelle : même si elle ne démarrait
   jamais, la photo resterait parfaitement visible. Et sans
   fill-mode, l'élément retrouve ensuite le transform de la feuille
   de style — le zoom au survol continue donc de fonctionner. */
.carte__media img.est-chargee,
.galerie__item img.est-chargee,
.pack__media img.est-chargee,
.spray-ambiance img.est-chargee,
.flacon__principale img.est-chargee{
  animation:apparitionPhoto .5s var(--ease);
}

/* Le cadre reste visible pendant le chargement, jamais de trou blanc */
.carte__media, .galerie__item, .pack__media, .flacon__principale{
  background:linear-gradient(135deg, var(--noir-4), var(--noir-3));
}

/* Réponse au toucher ---------------------------------------- */
.btn:active{ transform:scale(.975); }
.carte__ajout:active{ transform:scale(.9); }
.carte:active{ transform:translateY(-2px) scale(.995); }
.nav__lien:active, .filtre:active{ opacity:.7; }

/* Sur écran tactile, « :hover » reste collé après le tap :
   on réserve les effets de survol aux vrais pointeurs. */
@media (hover:none){
  .carte:hover{ transform:none; box-shadow:none; }
  .carte:hover .carte__media img{ transform:none; }
  .galerie__item:hover img{ transform:none; }
  .btn--or:hover, .btn--fantome:hover, .btn--wa:hover{ transform:none; }
  .pack:hover{ transform:none; }
  .contact-carte:hover{ transform:none; }
}

/* Le défilement suit le doigt sans à-coups dans les zones scrollables */
.panier__corps, .nav, .filters{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }


/* ═══ 16. DIVERS ══════════════════════════════════════════════ */

/* Bouton WhatsApp flottant */
.wa-flottant{
  position:fixed; right:1rem; bottom:1rem; z-index:90;
  width:52px; height:52px; display:grid; place-content:center;
  border-radius:50%; background:var(--vert-wa);
  box-shadow:0 10px 30px rgba(37,211,102,.34);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-flottant:hover{ transform:scale(1.07); box-shadow:0 14px 40px rgba(37,211,102,.5); }
.wa-flottant svg{ width:27px; height:27px; fill:#fff; }
/* ⚠️ Trois pulsations, puis plus rien — et surtout pas « infinite ».
   Le bouton est en position:fixed : il est donc toujours à l'écran,
   et l'observateur qui met les autres animations en pause (voir
   initPauseAnimations dans site.js) ne peut rien pour lui. En boucle,
   il empêchait le téléphone de mettre son compositeur au repos, sur
   toutes les pages, en permanence.
   « forwards » est indispensable : sans lui, l'anneau reviendrait à
   son état initial — un cercle vert opaque figé autour du bouton. */
.wa-flottant::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--vert-wa); animation:waPing 2.6s var(--ease) 3 forwards;
}
@keyframes waPing{ 0%{transform:scale(1);opacity:.7;} 70%,100%{transform:scale(1.55);opacity:0;} }

/* Message éphémère « ajouté au panier » */
.toast{
  position:fixed; left:50%; bottom:5rem; translate:-50% 0; z-index:150;
  display:flex; align-items:center; gap:.6rem;
  background:var(--noir-4); border:1px solid var(--ligne);
  border-radius:var(--r-full); padding:.7rem 1.15rem;
  font-size:var(--t-sm); box-shadow:var(--sh-md);
  opacity:0; transform:translateY(14px) translateX(-50%);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease-out);
}
.toast.est-visible{ opacity:1; transform:translateY(0) translateX(-50%); }
.toast svg{ width:17px; height:17px; fill:none; stroke:var(--succes); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* Bandeau défilant */
.bandeau{
  overflow:hidden; padding-block:.9rem;
  border-block:1px solid var(--ligne);
  background:linear-gradient(90deg,var(--noir-3),var(--noir-2),var(--noir-3));
}
.bandeau__piste{ display:flex; width:max-content; animation:defile 32s linear infinite; }
.bandeau__groupe{ display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem; flex:none; }
.bandeau span{ font-size:var(--t-xs); letter-spacing:.24em; text-transform:uppercase;
               color:var(--texte-doux); white-space:nowrap; }
.bandeau i{ color:var(--or); font-style:normal; font-size:.65rem; }
@keyframes defile{ to{ transform:translateX(-50%); } }

/* Fil d'Ariane */
.fil{ padding-block:1.2rem .5rem; font-size:var(--t-xs); color:var(--texte-faible); }
.fil a{ transition:color .3s; }
.fil a:hover{ color:var(--or); }
.fil span{ color:var(--or); }

/* Apparitions au défilement --------------------------------
   ⚠️ RÈGLE DE SÉCURITÉ — même principe que pour les photos.
   L'état de repos est VISIBLE. Le masquage n'est appliqué que si
   site.js a bien démarré : il pose la classe « js » sur <html> dès
   sa toute première instruction. Si le script ne se charge pas, ou
   lève une erreur avant initApparitions() — qui s'exécute en
   dernier — la page reste entièrement lisible au lieu de paraître
   vide. Sans ce garde-fou, une seule erreur rendait 25 éléments
   invisibles sur l'accueil et 31 sur la page Contact.
   Ne remettez pas « opacity:0 » sur « .reveal » tout court. */
.reveal{
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:calc(var(--d,0) * 80ms);
}
html.js .reveal{ opacity:0; }
html.js [data-reveal="up"]{ transform:translateY(28px); }
html.js [data-reveal="scale"]{ transform:scale(.95); }
html.js [data-reveal="left"]{ transform:translateX(-28px); }
/* Spécificité plus forte que les quatre règles ci-dessus : c'est ce
   qui fait gagner l'état visible une fois la classe posée. */
html.js .reveal.est-visible{ opacity:1; transform:none; }


/* ═══════════════════════════════════════════════════════════════
   POINTS DE RUPTURE
   ═══════════════════════════════════════════════════════════════ */

@media (min-width:560px){
  .hero__actions{ flex-direction:row; justify-content:center; }
  .galerie{ grid-template-columns:repeat(3,1fr); gap:.7rem; }
  .grille-produits{ grid-template-columns:repeat(3,1fr); gap:1rem; }
  .pied__bas{ flex-direction:row; justify-content:space-between; text-align:left; }
  .bandeau-info{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:768px){
  :root{ --pad-x:1.75rem; --h-entete:74px; }
  .hero__media{ width:min(100%,380px); }
  .flacon{ grid-template-columns:1fr 1fr; gap:1.25rem; align-items:center; }
  .packs{ grid-template-columns:repeat(2,1fr); }
  .pied__grille{ grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:1.75rem; }
  .commande{ grid-template-columns:1fr 1fr; gap:1.75rem; align-items:start; }
  .etapes{ grid-template-columns:repeat(3,1fr); }
  .contacts{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:1024px){
  .burger{ display:none; }
  .voile{ display:none; }

  .hero__halo--1{ animation:pulseHalo 11s var(--ease) infinite; }
  .hero__halo--2{ animation:pulseHalo 13s var(--ease) infinite reverse; }

  .nav{
    position:static; width:auto; transform:none; background:none; border:0;
    padding:0; flex-direction:row; align-items:center; gap:1.9rem; overflow:visible;
  }
  .nav__lien{
    font-family:var(--f-corps); font-size:var(--t-xs);
    letter-spacing:.15em; text-transform:uppercase; color:var(--texte-doux);
    border:0; padding-block:.3rem; position:relative;
  }
  .nav__lien::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:var(--grad-or); transform:scaleX(0); transform-origin:right;
    transition:transform .45s var(--ease-out);
  }
  .nav__lien:hover,.nav__lien.est-actif{ color:var(--or); padding-left:0; }
  .nav__lien:hover::after,.nav__lien.est-actif::after{ transform:scaleX(1); transform-origin:left; }
  .nav__contact{ display:none; }

  .hero{ padding-block:4rem; }
  .hero__inner{ flex-direction:row; align-items:center; gap:clamp(2.5rem,5vw,5rem); }
  .hero__texte{ flex:1 1 55%; text-align:left; }
  .hero__soustitre{ margin-inline:0; }
  .hero__actions{ justify-content:flex-start; }
  .hero__confiance{ justify-content:flex-start; gap:.6rem 1.7rem; margin-top:2rem; padding-top:1.8rem; }
  .hero__confiance li{ font-size:var(--t-xs); letter-spacing:.08em; gap:.5rem; }
  .hero__confiance svg{ width:16px; height:16px; }
  .hero__media{ flex:1 1 45%; width:auto; max-width:420px; margin-inline:0; }
  .hero__etiquette{ left:-2rem; }

  .grille-produits{ grid-template-columns:repeat(3,1fr); gap:1.25rem; }
  .galerie{ grid-template-columns:repeat(4,1fr); gap:.85rem; }
  .flacon{ grid-template-columns:.85fr 1fr; padding:1rem; }
  .wa-flottant{ right:1.6rem; bottom:1.6rem; width:58px; height:58px; }
  .wa-flottant svg{ width:30px; height:30px; }
}

@media (min-width:1200px){
  .grille-produits--originaux{ grid-template-columns:repeat(3,1fr); }
}


/* ═══ ACCESSIBILITÉ : mouvement réduit ════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   19. THÈME CLAIR
   ───────────────────────────────────────────────────────────────
   Le sombre reste l'identité de la marque : c'est lui qui est
   défini dans « :root » plus haut. Le clair ne s'applique que si

     • le visiteur a réglé son appareil en mode clair, et n'a pas
       choisi « sombre » explicitement sur le site ; ou
     • il a cliqué sur le bouton soleil / lune.

   ⚠️  L'OR EST COUPÉ EN DEUX, ET C'EST VOULU.
       #D4AF37 sur ivoire ne donne que 2,10:1 — illisible. L'aplat
       doré (boutons, pastilles, ruban) ne bouge pas : le texte
       posé dessus est sombre, le contraste tient (8,88:1). Mais
       l'or employé COMME TEXTE descend au bronze #7A5C12 (5,88:1).
       Ne le réclaircissez pas sans remesurer : c'est la lisibilité
       de tout le site qui s'en va.

   ⚠️  Les deux blocs ci-dessous sont IDENTIQUES et doivent le
       rester. Changez une couleur dans l'un, changez-la dans
       l'autre — sinon le réglage automatique et le bouton
       donneront deux rendus différents.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Réglage automatique de l'appareil — sauf si « sombre » est choisi */
@media (prefers-color-scheme: light){
  :root:not([data-theme="sombre"]){
    /* Surfaces */
    --noir: #FBF8F2;
    --noir-2: #F4EFE4;
    --noir-3: #FFFFFF;
    --noir-4: #EFE8DA;
    --ligne: rgba(122,92,18,.26);
    --ligne-douce: rgba(31,26,18,.10);

    /* Texte */
    --texte: #1F1A12;
    --texte-doux: #57503F;
    --texte-faible: #6B6353;

    /* L'or : l'aplat reste doré, le lettrage devient bronze */
    --or: #7A5C12;
    --or-clair: #6B4F0F;
    --or-fonce: #5C440C;
    --grad-or-txt: linear-gradient(120deg,#6B4F0F 0%,#8A6B1E 45%,#7A5C12 100%);

    /* États */
    --succes: #146B32;
    --erreur: #B3261E;
    --vert-wa-ico: #0B6B33;
    --bordeaux: #7C1231;
    --bordeaux-clair: #9B2247;
    --erreur-fond: rgba(179,38,30,.07);
    --erreur-bord: rgba(179,38,30,.28);
    --erreur-texte: #8E1E17;
    --succes-fond: rgba(20,107,50,.08);
    --succes-bord: rgba(20,107,50,.30);

    /* Habillages */
    --entete: rgba(251,248,242,.94);
    --entete-fixe: rgba(251,248,242,.985);
    --flottant: rgba(255,255,255,.94);
    --flottant-2: rgba(255,255,255,.88);
    --voile: rgba(38,32,20,.46);
    --voile-fort: rgba(38,32,20,.90);

    /* Ombres : sur fond clair, une ombre noire salit — on allège */
    --sh-md: 0 10px 30px rgba(60,48,24,.10);
    --sh-lg: 0 24px 60px rgba(60,48,24,.14);
    --sh-or: 0 16px 44px rgba(122,92,18,.14);

    /* Hero : voile clair, photo de fond plus discrète */
    --hero-voile: 
    radial-gradient(115% 80% at 50% 0%, rgba(251,248,242,.35) 0%, rgba(251,248,242,.88) 55%, var(--noir) 100%),
    linear-gradient(180deg, rgba(251,248,242,.90) 0%, rgba(251,248,242,.62) 42%, var(--noir) 96%);
    --hero-photo-opacite: .16;
  }
}

/* 2. Choix explicite du visiteur, qui l'emporte dans les deux sens */
:root[data-theme="clair"]{
  /* Surfaces */
  --noir: #FBF8F2;
  --noir-2: #F4EFE4;
  --noir-3: #FFFFFF;
  --noir-4: #EFE8DA;
  --ligne: rgba(122,92,18,.26);
  --ligne-douce: rgba(31,26,18,.10);

  /* Texte */
  --texte: #1F1A12;
  --texte-doux: #57503F;
  --texte-faible: #6B6353;

  /* L'or : l'aplat reste doré, le lettrage devient bronze */
  --or: #7A5C12;
  --or-clair: #6B4F0F;
  --or-fonce: #5C440C;
  --grad-or-txt: linear-gradient(120deg,#6B4F0F 0%,#8A6B1E 45%,#7A5C12 100%);

  /* États */
  --succes: #146B32;
  --erreur: #B3261E;
  --vert-wa-ico: #0B6B33;
  --bordeaux: #7C1231;
  --bordeaux-clair: #9B2247;
  --erreur-fond: rgba(179,38,30,.07);
  --erreur-bord: rgba(179,38,30,.28);
  --erreur-texte: #8E1E17;
  --succes-fond: rgba(20,107,50,.08);
  --succes-bord: rgba(20,107,50,.30);

  /* Habillages */
  --entete: rgba(251,248,242,.94);
  --entete-fixe: rgba(251,248,242,.985);
  --flottant: rgba(255,255,255,.94);
  --flottant-2: rgba(255,255,255,.88);
  --voile: rgba(38,32,20,.46);
  --voile-fort: rgba(38,32,20,.90);

  /* Ombres : sur fond clair, une ombre noire salit — on allège */
  --sh-md: 0 10px 30px rgba(60,48,24,.10);
  --sh-lg: 0 24px 60px rgba(60,48,24,.14);
  --sh-or: 0 16px 44px rgba(122,92,18,.14);

  /* Hero : voile clair, photo de fond plus discrète */
  --hero-voile: 
    radial-gradient(115% 80% at 50% 0%, rgba(251,248,242,.35) 0%, rgba(251,248,242,.88) 55%, var(--noir) 100%),
    linear-gradient(180deg, rgba(251,248,242,.90) 0%, rgba(251,248,242,.62) 42%, var(--noir) 96%);
  --hero-photo-opacite: .16;
}


@media print{
  .entete,.wa-flottant,.panier,.voile,.visionneuse,.bandeau{ display:none !important; }
  body{ background:#fff; color:#000; padding-top:0; }
}


/* ═══════════════════════════════════════════════════════════════
   17. SÉLECTEUR DE LANGUE  (FR | ع)
   ═══════════════════════════════════════════════════════════════ */

.langues{
  display:flex; align-items:center; gap:.15rem;
  border:1px solid var(--ligne);
  border-radius:var(--r-full);
  padding:.15rem;
  background:rgba(212,175,55,.05);
}
.langues__btn{
  min-width:30px; height:26px;
  display:grid; place-content:center;
  padding:0 .4rem;
  font-size:.66rem; font-weight:500; letter-spacing:.06em;
  color:var(--texte-faible);
  border-radius:var(--r-full);
  line-height:1;
  transition:color .3s var(--ease), background .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.langues__btn[lang="ar"]{ font-size:.9rem; letter-spacing:0; }
.langues__btn:hover{ color:var(--or); }
.langues__btn.est-actif{
  background:var(--grad-or);
  color:var(--sur-or);
  font-weight:600;
}
.langues__sep{ width:1px; height:13px; background:var(--ligne); }

@media (min-width:1024px){
  .langues{ margin-right:.4rem; }
}


/* ═══════════════════════════════════════════════════════════════
   18. MISE EN PAGE DE DROITE À GAUCHE  (arabe)
   ───────────────────────────────────────────────────────────────
   Flexbox et grid s'inversent tout seuls grâce à dir="rtl".
   Ne sont repris ici que les endroits où une position, une marge
   ou un alignement est écrit explicitement en gauche/droite.
   ═══════════════════════════════════════════════════════════════ */

/* — Typographie arabe : un peu plus d'air entre les lignes — */
[dir="rtl"] body{
  font-family:"Jost", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height:1.85;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:"Cormorant Garamond", "Noto Naskh Arabic", "Times New Roman", serif;
  line-height:1.35;
  letter-spacing:0;
}
/* L'arabe n'a ni majuscules ni petites capitales : on neutralise
   les espacements de lettres, illisibles dans cette écriture. */
[dir="rtl"] .tete__surtitre,
[dir="rtl"] .hero__surtitre,
[dir="rtl"] .nav__lien,
[dir="rtl"] .btn,
[dir="rtl"] .bandeau span,
[dir="rtl"] .hero__confiance li,
[dir="rtl"] .carte__format,
[dir="rtl"] .pack__ruban,
[dir="rtl"] .pack__sous,
[dir="rtl"] .flacon__format,
[dir="rtl"] .champ__label,
[dir="rtl"] .choix__t,
[dir="rtl"] .genre,
[dir="rtl"] .choix__notes,
[dir="rtl"] .pied__col h3,
[dir="rtl"] .bandeau-info span,
[dir="rtl"] .ligne__suppr,
[dir="rtl"] .etape span,
[dir="rtl"] .carte__sign{
  letter-spacing:0;
  text-transform:none;
}
[dir="rtl"] .marque__texte em{ letter-spacing:.2em; }

/* — Tiroirs : ils arrivent maintenant par la gauche — */
[dir="rtl"] .nav{
  inset:0 auto 0 0;
  border-left:0;
  border-right:1px solid var(--ligne);
  transform:translateX(-100%);
}
[dir="rtl"] .nav.est-ouvert{ transform:translateX(0); }
[dir="rtl"] .nav__lien:hover,
[dir="rtl"] .nav__lien.est-actif{ padding-left:0; padding-right:.4rem; }

[dir="rtl"] .panier{
  inset:0 auto 0 0;
  border-left:0;
  border-right:1px solid var(--ligne);
  transform:translateX(-100%);
}
[dir="rtl"] .panier.est-ouvert{ transform:translateX(0); }

/* — Le burger : les barres décalées changent de côté — */
[dir="rtl"] .burger span:nth-child(2){ margin-left:0; margin-right:auto; }

/* — Étiquettes posées sur les images — */
[dir="rtl"] .carte__format{ right:auto; left:.55rem; }
[dir="rtl"] .hero__etiquette{ left:auto; right:-.5rem; }

[dir="rtl"] .pack__ruban{
  right:auto; left:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:var(--r-md);
}

/* — Boutons flottants et visionneuse — */
[dir="rtl"] .wa-flottant{ right:auto; left:1rem; }
[dir="rtl"] .visionneuse__fermer{ right:auto; left:1rem; }
[dir="rtl"] .visionneuse__nav--prec{ left:auto; right:.6rem; }
[dir="rtl"] .visionneuse__nav--suiv{ right:auto; left:.6rem; }
[dir="rtl"] .toast{ transform:translateY(14px) translateX(50%); }
[dir="rtl"] .toast.est-visible{ transform:translateY(0) translateX(50%); }

/* — Alignements de texte — */
[dir="rtl"] .tete--gauche{ text-align:right; }
[dir="rtl"] .pied__bas{ text-align:right; }
[dir="rtl"] .hero__texte{ text-align:center; }

/* — Décalages au survol, inversés — */
[dir="rtl"] .pied__col a:not(.marque):hover{ transform:translateX(-4px); }
[dir="rtl"] .btn svg:not(.ico-plein):not(.ico-wa){ transform:scaleX(-1); }

/* — Marges directionnelles des prix — */
[dir="rtl"] .carte__prix i,
[dir="rtl"] .flacon__prix i,
[dir="rtl"] .pack__prix strong i{ margin-left:0; margin-right:.32rem; }

/* — Le bandeau défile dans l'autre sens — */
[dir="rtl"] .bandeau__groupe{ padding-right:0; padding-left:2.2rem; }
[dir="rtl"] .bandeau__piste{ animation-name:defileRtl; }
@keyframes defileRtl{ to{ transform:translateX(50%); } }

/* — Fil d'Ariane : le chevron pointe dans l'autre sens — */
[dir="rtl"] .fil{ direction:rtl; }

/* — Listes à puces et numéros d'étape — */
[dir="rtl"] .pack__atouts li,
[dir="rtl"] .etape{ text-align:right; }

/* — Menu déroulant des parfums — */
[dir="rtl"] .select{
  background-position:left .8rem center;
  padding-right:.9rem;
  padding-left:2.4rem;
  text-align:right;
}

/* — Le champ téléphone reste en lecture gauche-droite — */
[dir="rtl"] input[type="tel"]{ direction:ltr; text-align:right; }

/* — Sur grand écran, l'en-tête s'inverse aussi — */
@media (min-width:1024px){
  [dir="rtl"] .nav{
    inset:auto; transform:none; border:0;
  }
  [dir="rtl"] .langues{ margin-right:0; margin-left:.4rem; }
  [dir="rtl"] .hero__texte{ text-align:right; }
  [dir="rtl"] .hero__etiquette{ left:auto; right:-2rem; }
}