/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║ css/style.css — APPARENCE DU SITE                                            ║
   ║ COMMENT TROUVER LE CSS D'UN ÉLÉMENT :                                        ║
   ║  1. Clic droit sur l'élément > Inspecter : repère sa classe (ex. class="card")║
   ║  2. Dans ce fichier : Ctrl+F puis tape  .card  (le point + le nom de classe)  ║
   ║  3. Chaque classe n'existe maintenant qu'UNE fois, sauf dans la partie 15    ║
   ║     (@media) qui adapte le téléphone. Si rien ne change sur mobile : cherche ║
   ║     le même nom dans la partie 15.                                           ║
   ║ DICTIONNAIRE : .hd barre du haut · .logo logo · .ann bandeau du haut ·       ║
   ║  .hero2/.hc grand accueil · .sec section · .alt section sable · .wrap largeur ║
   ║  .head titre de section · .sub sous-titre · .orn petit emblème · .btn bouton ║
   ║  .grid grille · .card carte parfum · .im photo de la carte · .price prix ·   ║
   ║  .band bandeau foncé · .stats chiffres · .cols colonnes/étapes · .avis avis ║
   ║  .atouts icônes sous l'accueil · .split texte+image · .fr cadre doré · .uni ║
   ║  univers · .tools filtres · .pd fiche produit · .pyr pyramide ·              ║
   ║  .qty quantité · .li ligne panier · .box encadré total ·                     ║
   ║  .titre-et-lien titre + lien « Voir tout » · .champ-ville champ Ville ·      ║
   ║  footer pied de page · .soc icônes réseaux · .wafab bouton WhatsApp rond ·   ║
   ║  #toast message « ajouté » · #lb image agrandie                              ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════════════════════════════
   0. FEUILLE DE STYLE DU SITE (aspect visuel)
   Fichier modifiable pour changer couleurs, tailles, espaces. Les textes et produits se changent dans js/donnees.js, pas ici.
   ══════════════════════════════════════════════════════════════════════════ */
/* COULEURS : tirées du logo. Pour changer l'ambiance, modifier uniquement ces 6 lignes. */
/* ══════════════════════════════════════════════════════════════════════════
   1. COULEURS ET POLICES
   Pour changer l'ambiance du site, modifier uniquement les couleurs de la ligne :root ci-dessous.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── RÉGLAGES RAPIDES : les valeurs les plus souvent modifiées, au même endroit (dans :root ci-dessous). ──
   --hauteur-entete = hauteur de la barre du haut · --hauteur-logo = taille du logo · --espace-section = espace entre sections
   --largeur-max = largeur du site · --bouton-padding = taille des boutons · --taille-nom-produit · --taille-titre-accueil
   Les versions « -mobile » s'appliquent aux téléphones. */
:root {
  color-scheme: light;
  --cream: #f5e6c9;
  --cream2: #ecd9b0;
  --paper: #fbf3de;
  --gold: #9a7230;
  --bronze: #6f4f1c;
  --ink: #3a2a16;
  --line: #d6bf8f;
  --err: #8a3b20;
  --nuit: #261c10;
  --or: #dcae5a;
  --serif: "Cormorant Garamond",Georgia,serif;
  --sans: Jost,system-ui,sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  --hauteur-entete: 70px;
  --hauteur-entete-mobile: 60px;
  --hauteur-logo: 54px;
  --hauteur-logo-mobile: 44px;
  --espace-section: 120px;
  --espace-section-mobile: 72px;
  --largeur-max: 1200px;
  --bouton-padding: 15px 30px;
  --taille-nom-produit: 1.5rem;
  --taille-titre-accueil: clamp(2.8rem,5.4vw,5.2rem);
}
/* ══════════════════════════════════════════════════════════════════════════
   2. BASE (page, titres, textes, liens)
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after {
  box-sizing: inherit;
}
html {
  scroll-padding-top: 70px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 300;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,h2,h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
h1 {
  font-size: clamp(2.6rem,6vw,4.9rem);
}
h2 {
  font-size: clamp(2.2rem,4.4vw,3.5rem);
}
h3 {
  font-size: 1.45rem;
}
.wrap {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}
.sec {
  padding: var(--espace-section) 0;
}
.alt {
  background: var(--cream2);
}
.mute {
  color: #6b5a40;
}
.small {
  font-size: .88rem;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* ══════════════════════════════════════════════════════════════════════════
   3. BOUTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  font: 500 .8rem var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--paper);
  padding: var(--bouton-padding);
  cursor: pointer;
  transition: .25s;
}
.btn:hover {
  background: var(--bronze);
  border-color: var(--bronze);
}
.btn.o {
  background: transparent;
  color: var(--bronze);
}
.btn.o:hover {
  background: var(--bronze);
  color: var(--paper);
}
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
/* ══════════════════════════════════════════════════════════════════════════
   4. EN-TÊTE : logo, menu, panier
   ══════════════════════════════════════════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top,0px);
}
.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hauteur-entete);
}
.logo img {
  height: var(--hauteur-logo);
  width: auto;
}
nav a {
  margin: 0 20px;
  text-decoration: none;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
nav a:hover {
  color: var(--gold);
}
.cartb,.burger {
  background: none;
  border: 0;
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.cartb b {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  line-height: 1;
  text-align: center;
  border-radius: 10px;
  background: var(--gold);
  color: var(--paper);
  font-size: .7rem;
  margin-left: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  letter-spacing: 0;
  vertical-align: 1px;
}
.burger {
  display: none;
  padding: 10px;
}
/* Motif signature du site : l'arche (architecture marocaine) */
.arch {
  border-radius: 999px 999px 0 0;
  overflow: hidden;
}
/* ══════════════════════════════════════════════════════════════════════════
   5. ANCIEN HERO (non utilisé, peut être supprimé) + MOTIF EN ARCHE
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 72px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 96px;
}
.hero .t {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero p {
  margin: 0;
  max-width: 30em;
  font-size: 1.08rem;
  color: #5d4c33;
}
.hero .f {
  position: relative;
  padding: 0 0 0 18px;
  margin: 0 auto;
  width: min(100%,420px);
}
.hero .f::before {
  content: "";
  position: absolute;
  inset: -16px 18px 16px -2px;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 0 0;
}
.hero .f img {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4.3;
  object-fit: cover;
  object-position: 50% 50%;
}
.row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════════════════
   6. GRILLE ET CARTES PRODUIT
   Chaque parfum = une carte (.card). L'arche vient de border-radius.
   ══════════════════════════════════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
  gap: 64px 32px;
}
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  text-align: center;
}
.card .im {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream2);
  border-radius: 999px 999px 0 0;
  outline: 1px solid transparent;
  outline-offset: 8px;
  transition: outline-color .5s;
}
.card img {
  transform: scale(var(--z, 1));
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}
.card:hover img {
  transform: scale(calc(var(--z, 1) * 1.04));
}
.card h3 {
  margin: 18px 0 2px;
  font-size: var(--taille-nom-produit);
  letter-spacing: .1em;
  margin-top: 26px;
}
.card .br {
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .06em;
}
.card p {
  margin: 8px auto;
  font-size: .92rem;
  color: #6b5a40;
  max-width: 22em;
}
.price {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--bronze);
}
.vol { 
  font-size: .85rem; 
  color: var(--bronze);
}
.badge {
  font-size: .78rem;
  color: var(--err);
}
/* ══════════════════════════════════════════════════════════════════════════
   7. SECTIONS : texte + image, univers
   ══════════════════════════════════════════════════════════════════════════ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.uni {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line);
}
.uni a {
  padding: 28px 20px 28px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.uni a:hover h3 {
  color: var(--gold);
}
.uni p {
  margin: 8px 0 0;
  font-size: .92rem;
  color: #6b5a40;
}
/* ══════════════════════════════════════════════════════════════════════════
   8. PAGE COLLECTION : barre de filtres
   ══════════════════════════════════════════════════════════════════════════ */
.tools {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 28px 0 44px;
  justify-content: center;
}
input,select,textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 14px;
  width: 100%;
  border-radius: 0;
}
.tools input {
  width: 220px;
}
.tools select {
  width: auto;
}
label {
  display: block;
  font-size: .88rem;
  margin: 0 0 18px;
}
label span {
  display: block;
  margin-bottom: 6px;
  color: #6b5a40;
}
.err {
  color: var(--err);
  font-size: .84rem;
  margin-top: 4px;
}
/* ══════════════════════════════════════════════════════════════════════════
   9. FICHE PRODUIT
   ══════════════════════════════════════════════════════════════════════════ */
.pd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.pd img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
}
/* ══════════════════════════════════════════════════════════════════════════
   10. PANIER ET COMMANDE (quantités, lignes, totaux, formulaire)
   ══════════════════════════════════════════════════════════════════════════ */
.qty {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--paper);
}
.qty button {
  width: 42px;
  height: 42px;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.qty span {
  width: 40px;
  text-align: center;
  line-height: 42px;
}
.li {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.li img {
  width: 84px;
  height: 104px;
  object-fit: cover;
}
.lnk {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .85rem;
  color: #6b5a40;
  text-decoration: underline;
  cursor: pointer;
}
.tot {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.tot.b {
  font-family: var(--serif);
  font-size: 1.5rem;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 14px;
}
.box {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 26px;
}
.two {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
}
.note {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 16px;
  color: #6b5a40;
  font-size: .92rem;
}
/* ══════════════════════════════════════════════════════════════════════════
   11. PIED DE PAGE
   ══════════════════════════════════════════════════════════════════════════ */
footer {
  background: var(--nuit);
  color: #cdbb95;
  padding: 64px 0 32px;
  position: relative;
  overflow: hidden;
}
.ft {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
footer a {
  display: block;
  text-decoration: none;
  padding: 4px 0;
  font-size: .92rem;
  color: #cdbb95;
}
footer a:hover {
  color: var(--or);
}
footer .mute {
  color: #a8976f;
}
footer strong {
  color: #f3e7c9;
}
footer h4 {
  font: 500 .86rem var(--sans);
  margin: 0 0 10px;
  color: var(--or);
}
footer h4 button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  pointer-events: none;
}
/* Dernière ligne du pied de page : © à gauche, signature de l'agence à droite */
.bas-pied {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 36px;
}
.bas-pied p,
.bas-pied a {
  margin: 0;
  padding: 0;
}

/* Pages légales : intertitres et paragraphes */
.page-legale h2 {
  font-size: 1.5rem;
  margin: 34px 0 10px;
}
.page-legale p {
  margin: 0 0 12px;
}
.page-legale .ligne {
  margin: -6px 0 6px;
}
/* ══════════════════════════════════════════════════════════════════════════
   12. NOTIFICATION (« ajouté au panier ») ET ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%,30px);
  background: var(--bronze);
  color: var(--paper);
  padding: 12px 22px;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  z-index: 40;
}
#toast.on {
  opacity: 1;
  transform: translate(-50%,0);
}
.pop {
  animation: pop .4s;
}
@keyframes pop {
  50% {
    transform: scale(1.25);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   13. BLOCS DE L'ACCUEIL (bandeau foncé, colonnes, avis, galerie, icônes, bouton WhatsApp)
   ══════════════════════════════════════════════════════════════════════════ */
/* Blocs de l'accueil */
h1 em,h2 em {
  font-style: italic;
  color: var(--gold);
}
.head {
  text-align: center;
  margin-bottom: 64px;
}
.sub {
  color: var(--gold);
  font-style: italic;
  margin: 12px 0 0;
}
.band {
  background: var(--nuit);
  color: #e9dcc0;
  text-align: center;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.band h2 {
  color: #f3e7c9;
}
.band h2 em {
  color: var(--or);
}
.band p {
  max-width: 34em;
  margin: 20px auto 0;
  color: #bfae8a;
}
.stats {
  display: flex;
  justify-content: center;
  gap: clamp(28px,7vw,88px);
  margin: 40px 0;
  flex-wrap: wrap;
}
.stats b {
  display: block;
  font: 500 2.5rem/1.2 var(--serif);
  color: var(--or);
  font-size: 3.1rem;
}
.stats span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #bfae8a;
}
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 44px;
  text-align: center;
}
.cols .n {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: 1.15rem var(--serif);
  margin-bottom: 16px;
}
.cols h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.cols p {
  max-width: 22em;
  margin: 0 auto;
}
/* Questions fréquentes : une question par ligne, la réponse s'ouvre au clic */
.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font: 500 1.3rem var(--serif);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font: 300 1.6rem var(--sans);
  color: var(--gold);
  transition: transform .3s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq p {
  max-width: 40em;
  margin: 0 0 22px;
}
/* Avis : cartes en arche (motif signature du site), en carrousel sur une ligne */
.avis {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.avis::-webkit-scrollbar {
  display: none;
}
/* Sur ordinateur, les cartes coupées au bord s'effacent en fondu */
.avis-zone.defile .avis {
  padding: 0 48px;
  scroll-padding-inline: 48px;
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.avis figure {
  flex: 0 0 300px;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px 999px 0 0;
  padding: 64px 26px 26px;
}
/* Peu d'avis : ils restent centrés */
.avis figure:first-child {
  margin-left: auto;
}
.avis figure:last-child {
  margin-right: auto;
}
.avis-fleches {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.avis-zone.defile .avis-fleches {
  display: flex;
}
.avis-fleches button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--bronze);
  font-size: 1.1rem;
  cursor: pointer;
}
.avis-fleches button:hover {
  border-color: var(--gold);
}
#avis,
#faq { scroll-margin-top: 90px; }
.stars {
  color: var(--gold);
  letter-spacing: .15em;
}
/* Le texte de l'avis est centré entre les étoiles et le nom, pour des cartes homogènes */
.avis blockquote {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 10px 0 14px;
  font: italic 1.2rem/1.45 var(--serif);
}
.avis figcaption {
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: .88rem;
  color: #6b5a40;
}
.avis figcaption strong {
  font: 600 1.05rem var(--serif);
  color: var(--ink);
  letter-spacing: .02em;
}
.avis .via {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a744f;
}
.avis .via svg {
  width: 13px;
  height: 13px;
}
.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 16px;
}
.gal img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.th {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.th button {
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  width: 68px;
  height: 84px;
  cursor: pointer;
}
.pd .th img {
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
}
.ic {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -5px;
}
.btn .ic {
  margin-right: 6px;
  vertical-align: -6px;
}
.ann {
  background: var(--nuit);
  color: var(--or);
  text-align: center;
  font-size: .84rem;
  padding: 8px 16px;
}
footer .soc {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
footer .soc a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--gold);
  color: var(--paper);
}
footer .soc a:hover {
  border-color: var(--or);
  background: var(--or);
}
.wafab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom,0px));
  z-index: 30;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 12px rgba(38,28,16,.35);
  transition: .25s;
}
.wafab:hover {
  background: var(--bronze);
}
.wafab .ic {
  width: 30px;
  height: 30px;
}
/* ══════════════════════════════════════════════════════════════════════════
   14. HABILLAGE LUXE (surcharges : ces règles passent en dernier et l'emportent)
   ══════════════════════════════════════════════════════════════════════════ */
/* ===== LUXE ===== */
.hd>div:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
h1,h2 {
  font-weight: 400;
}
.orn {
  width: 30px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}
.hero2 {
  position: relative;
  min-height: min(88svh,820px);
  display: flex;
  align-items: center;
  color: #f6ead0;
  background: var(--nuit);
  overflow: hidden;
}
.hero2>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 108%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}
.hero2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(38,28,16,.88),rgba(38,28,16,.5) 42%,rgba(38,28,16,0) 70%);
}
.hero2 .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hc {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 90px 0;
}
.hc .orn {
  margin: 0;
  filter: brightness(1.4);
  display: none;
}
.hero2 h1 {
  color: #f8edd2;
  font-size: var(--taille-titre-accueil);
  line-height: 1.04;
}
.hero2 h1 em {
  color: var(--or);
}
.hero2 p {
  margin: 0;
  color: #e3d3b0;
  font-size: 1.08rem;
  max-width: 30em;
}
.hero2 .btn.o {
  color: #f6ead0;
  border-color: #f6ead0;
}
.hero2 .btn.o:hover {
  background: #f6ead0;
  color: var(--nuit);
}
.sec.thin {
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 40px;
  text-align: center;
}
.atouts .ic {
  width: 36px;
  height: 36px;
  color: var(--gold);
  stroke-width: 1.2;
  margin-bottom: 14px;
}
.atouts h3 {
  font-size: 1.25rem;
  letter-spacing: .06em;
}
.atouts p {
  margin: 6px auto 0;
  max-width: 20em;
  font-size: .92rem;
  color: #6b5a40;
}
.fr {
  position: relative;
  padding-left: 18px;
  width: min(100%,440px);
  margin: 0 auto;
}
.fr::before {
  content: "";
  position: absolute;
  inset: -16px 18px 16px -2px;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 0 0;
}
.split .fr img {
  position: relative;
  aspect-ratio: 3/4.1;
  object-fit: cover;
}
.card:hover .im {
  outline-color: var(--gold);
}
.card .more {
  align-self: center;
  margin-top: 12px;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: .3s;
}
.card:hover .more {
  border-color: var(--gold);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/emblem.png) center/380px no-repeat;
  opacity: .07;
  filter: brightness(2.2);
}
.band .wrap {
  position: relative;
}
.band .orn {
  filter: brightness(1.4);
}
footer::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 440px;
  height: 440px;
  background: url(../images/emblem.png) center/contain no-repeat;
  opacity: .06;
  filter: brightness(2);
}
footer .wrap {
  position: relative;
}
.js .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease,transform .9s ease;
}
.js .rv.in {
  opacity: 1;
  transform: none;
}
.card.plat .im {
  border-radius: 0;
  aspect-ratio: 6/7;
}
.pd.plat img {
  border-radius: 0;
  aspect-ratio: 6/7;
}
.gal2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 28px;
}
.gal2 img {
  width: 100%;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.pyr {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.pyr h3 {
  margin-bottom: 10px;
}
.pyr div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.pyr .k {
  color: var(--gold);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: 3px;
}
#lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(38,28,16,.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
#lb[hidden] {
  display: none;
}
#lb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* ═══════════════════════════════════════════════════════════════════════════
   14b. CAS PARTICULIERS : modifier UNE SEULE photo / UN SEUL parfum / UN SEUL bloc
   Chaque carte et chaque fiche reçoit une classe unique  .p-<id du parfum>  (ex. .p-santal-33, .p-ombre-nomade).
   Chaque bloc de l'accueil peut recevoir sa propre classe avec  classe:"mon-bloc"  dans donnees.js, puis  .mon-bloc  ici.
   Exemples (retire les /* */ pour activer) :
     .p-santal-33 .im img { object-position: 50% 30%; }    photo de SANTAL 33 uniquement, dans la collection
     .p-santal-33 .pimg img { filter: brightness(1.08); }  photo de SANTAL 33 uniquement, sur sa fiche
   Pour un simple recadrage ou agrandissement, plus simple : position:"50% 30%" ou zoom:1.15 dans donnees.js.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Cadre de la photo sur la fiche produit (nécessaire au zoom par produit) */
.pimg {
  overflow: hidden;
  border-radius: 999px 999px 0 0;
}

.pd.plat .pimg {
  border-radius: 0;
}

.pimg img {
  transform: scale(var(--z, 1));
}

/* Carte produit : bouton « Ajouter au panier » posé en bas de la photo.
   Sur ordinateur il apparaît au survol de la carte ; sur téléphone il est toujours visible. */
.imwrap {
  position: relative;
}
.card .im {
  display: block;
}
.card > .cl {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card .add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px 10px;
  border: 0;
  background: rgba(38, 28, 16, .9);
  color: #f6ead0;
  font: 500 .74rem var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s, background .3s;
}
.card:hover .add,
.card .add:focus-visible {
  opacity: 1;
}
.card .add:hover {
  background: var(--gold);
}
/* Affichage garanti sur TOUS les téléphones (Samsung Internet, Safari, Chrome, Firefox) */
@media (hover: none), (max-width: 768px) {
  .card .add {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
  }
}

/* Livraison du récapitulatif : prix barré quand elle est offerte */
.tot s {
  color: #8a7a60;
}

/* Titre à gauche + petit lien « Voir tout » à droite, au-dessus d'une grille de parfums */
.titre-et-lien {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* Formulaire de commande : liste des villes qui s'ouvre sous le champ « Ville » */
.champ-ville {
  position: relative;
}
#ville-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  background: #fff;
  border: 1px solid #d8c39a;
  max-height: 220px;
  overflow-y: auto;
}
/* Liste vide = liste fermée (sinon on verrait un petit trait vide) */
#ville-suggestions:empty {
  display: none;
}
#ville-suggestions button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. ÉCRANS SPÉCIAUX (@media) : règles qui ne s'appliquent que dans certains cas
   • max-width:780px = téléphones   • max-width:860px = tablettes   • prefers-reduced-motion = animations coupées
   Une règle ici REMPLACE la règle de même nom plus haut, uniquement sur ces écrans.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:780px) {
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px;
  }
  nav.open {
    display: block;
  }
  nav a {
    display: block;
    margin: 0;
    padding: 14px 0;
    font-size: .9rem;
  }
  .burger {
    display: block;
  }
  
  .hd > div:last-child {
    display: contents;
  }
  .burger {
    order: -1;
  }

  .sec {
    padding: var(--espace-section-mobile) 0;
  }
  .logo img {
    height: var(--hauteur-logo-mobile);
  }
  /* En bas, de la place pour le bouton WhatsApp flottant, qui ne cache plus la signature */
  footer {
    padding: 44px 0 96px;
  }
  .ft {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ft > div:first-child {
    margin-bottom: 22px;
  }
  .col-pied {
    border-top: 1px solid rgba(220,174,90,.25);
  }
  .col-pied:last-child {
    border-bottom: 1px solid rgba(220,174,90,.25);
  }
  footer h4 {
    margin: 0;
  }
  footer h4 button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    font-size: .95rem;
    cursor: pointer;
    pointer-events: auto;
  }
  footer h4 button::after {
    content: "+";
    font-size: 1.2rem;
    line-height: 1;
  }
  .col-pied.open h4 button::after {
    content: "−";
  }
  .liens-pied {
    display: none;
    padding: 0 0 12px;
  }
  .col-pied.open .liens-pied {
    display: block;
  }
  .avis {
    gap: 16px;
    margin: 0 -24px;
    padding: 0 24px;
    scroll-padding-inline: 24px;
  }
  .avis figure {
    flex-basis: 82%;
  }
  .avis-zone.defile .avis-fleches {
    display: none;
  }
  .avis-zone.defile .avis {
    padding: 0 24px;
    scroll-padding-inline: 24px;
    mask-image: none;
  }
  .bas-pied {
    flex-direction: column;
  }
  .hd {
    height: var(--hauteur-entete-mobile);
  }
}

@media (max-width:860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 40px;
    padding-bottom: 64px;
  }
  .hero .f {
    order: -1;
    width: min(86%,360px);
  }
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .uni {
    grid-template-columns: 1fr 1fr;
  }
  .pd {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .two {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero2 {
    display: block;
  }
  .hero2>img {
    position: static;
    width: 100%;
    height: 58svh;
  }
  .hero2::after {
    display: none;
  }
  .hc {
    padding: 40px 0 64px;
  }
}

@media (max-width:520px) {
  .uni {
    grid-template-columns: 1fr;
  }
  .pyr div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition: none!important;
    animation: none!important;
  }
  .js .rv {
    opacity: 1;
    transform: none;
  }
}

@media (min-width:861px) {
  .split.rev>div {
    order: 2;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   OFFRE « 2 parfums de niche achetés, le 3e à -50 % » (réglages : OFFRE dans donnees.js)
   ══════════════════════════════════════════════════════════════════════════ */
.imwrap { position: relative; }
.ruban {
  position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none;
  background: var(--gold); color: #fff; font-size: .72rem; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px;
}
.tot.offre { color: var(--gold); font-weight: 600; }
.gain {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; text-align: center;
  background: rgba(154, 114, 48, .1); color: var(--gold); font-size: .9rem; font-weight: 600;
}
.offre-fiche {
  margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--gold); border-radius: 12px;
  font-size: .92rem;
}
.offre-fiche b { color: var(--gold); margin-right: 6px; }
.rappel-offre a { color: var(--gold); }

/* Bloc « offre » de l'accueil */
.offre-hero{background:radial-gradient(60% 80% at 75% 50%,#3a2a16,var(--nuit) 70%);color:#e9dcc0;padding:110px 0;overflow:hidden}
.offre-in{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.offre-sur{color:var(--or);letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;margin:0 0 16px}
/* Titre de l'offre : toujours sur une seule ligne, sa taille s'adapte à la largeur de l'écran */
.offre-hero h2{color:#f3e7c9;font-size:clamp(1.9rem,3.3vw,3.4rem);line-height:1;white-space:nowrap}
.offre-hero h2 em{color:var(--or)}
.offre-p{max-width:30em;margin:22px 0;opacity:.85}
.offre-calc{font-family:var(--serif);font-size:1.6rem;margin:0 0 30px;color:#f3e7c9}
.offre-calc span{color:var(--or)}.offre-calc .d{color:#fff;background:var(--gold);padding:0 8px;border-radius:6px}
.offre-calc s{opacity:.5;font-size:1.1rem;margin-left:6px}
.offre-im{position:relative;height:460px}
.offre-im figure{position:absolute;bottom:0;width:42%;margin:0;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.offre-im img{width:100%;aspect-ratio:3/4.4;object-fit:cover;border-radius:999px 999px 0 0;border:1px solid rgba(220,174,90,.4);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.offre-im figcaption{text-align:center;margin-top:10px;font-family:var(--serif);font-size:1.2rem;color:#f3e7c9}
.offre-im figcaption s{opacity:.5;margin-right:6px}
.offre-im .f1{left:0;transform:translateY(-30px) rotate(-5deg)}
.offre-im .f2{left:29%;z-index:2;transform:translateY(-60px)}
.offre-im .f3{right:0;z-index:3;transform:translateY(-10px) rotate(5deg)}
.offre-hero:hover .f1{transform:translateY(-40px) rotate(-8deg)}.offre-hero:hover .f3{transform:translateY(-20px) rotate(8deg)}
.sceau{position:absolute;top:-18px;right:-14px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4d48c,var(--or) 55%,#a5762c);color:var(--nuit);display:flex;align-items:center;justify-content:center;gap:1px;font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1;box-shadow:0 10px 30px rgba(0,0,0,.45);transform:rotate(12deg);animation:sceau 2.6s ease-in-out infinite}
.sceau small{font-size:.9rem}
@keyframes sceau{50%{transform:rotate(12deg) scale(1.07)}}
@media(max-width:900px){.offre-hero h2{font-size:min(7.6vw,3.2rem)}.offre-in{grid-template-columns:1fr;gap:30px}.offre-hero{padding:70px 0}.offre-im{height:330px}.sceau{width:70px;height:70px;font-size:1.5rem}.offre-calc{font-size:1.3rem}}

/* Bandeau à messages qui se relaient */
.ann-multi{position:relative;height:40px;padding:0;overflow:hidden}
.ann-m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;color:var(--or);text-decoration:none;opacity:0;transform:translateY(100%);transition:opacity .6s,transform .6s}
.ann-m.on{opacity:1;transform:none}
.ann-m u{color:#f3e7c9;text-underline-offset:3px}
.ann-pill{background:var(--or);color:var(--nuit);border-radius:999px;padding:2px 9px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:600px){.ann-m{font-size:.76rem;gap:6px}.ann-m u{display:none}}

/* Le bandeau reste visible en haut, avec l'en-tête, pendant le défilement */
#annonce{position:sticky;top:0;z-index:21}
header{top:40px}
@media(max-width:600px){.ann-multi{height:34px}header{top:34px}}

/* Menu « Nos parfums » : liste déroulante */
.sm{position:relative;display:inline-block}
.sm-t{background:none;border:0;cursor:pointer;color:inherit;font:inherit;margin:0 20px;padding:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;display:inline-flex;align-items:center;gap:6px}
.sm-t span{display:inline-block;width:6px;height:6px;font-size:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.sm-l{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,6px);min-width:220px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(38,28,16,.35);padding:8px 0;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:30}
.sm-l::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.sm-l a{display:block;margin:0;padding:11px 20px;white-space:nowrap}
.sm-l a:hover{background:var(--cream)}
.sm:hover .sm-l,.sm:focus-within .sm-l,.sm.open .sm-l{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sm:hover .sm-t span,.sm.open .sm-t span{transform:translateY(1px) rotate(-135deg)}
@media (max-width:780px){
  .sm{display:block}
  .sm-t{display:flex;width:100%;justify-content:space-between;margin:0;padding:14px 0;font-size:.9rem}
  .sm-l{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:0 0 6px 14px;min-width:0;display:none}
  .sm.open .sm-l{display:block;transform:none}
  .sm-l a{padding:11px 0;font-size:.86rem}
}