/* Replis calés sur la largeur réelle des deux polices, mesurée dans le navigateur :
   Marcellus fait 100,55 % de Georgia, Figtree 98,86 % de Helvetica Neue. Sans cet ajustement,
   le passage de la police système à la police finale décale le texte sur une connexion lente. */
@font-face { font-family: "Marcellus repli"; src: local("Georgia"), local("Times New Roman"), local("Times"); size-adjust: 100.55%; font-display: swap; }
@font-face { font-family: "Figtree repli"; src: local("Helvetica Neue"), local("Helvetica"), local("Arial"); size-adjust: 98.86%; font-display: swap; }
@font-face {
  font-family: "Marcellus";
  src: url("assets/polices/marcellus.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/polices/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --violet: #5b4390;
  --violet-fonce: #372759;
  --lilas: #ece5f2;
  --lilas-fonce: #ddd3e8;
  --ivoire: #f8f3e9;
  --papier: #fffdf9;
  --or: #a9884b;
  --or-clair: #d8bf83;
  --or-texte: #725526;
  --encre: #29232f;
  --brume: #635c68;
  --trait: rgba(91, 67, 144, .16);
  --trait-or: rgba(169, 136, 75, .45);
  --largeur: 1180px;
  --espace-section: clamp(56px, 7vw, 104px);
  --espace-grille: clamp(16px, 2.2vw, 32px);
  --rayon: 2px;
  --t-petit: .8125rem;
  --t-base: 1rem;
  --t-moyen: 1.125rem;
  --t-h3: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --t-h2: clamp(2rem, 1.55rem + 1.7vw, 3.05rem);
  --t-h1: clamp(2.5rem, 1.9rem + 2.4vw, 3.8rem);
  --inter-surtitre: .22em;
  --inter-bouton: .12em;
  --inter-etiquette: .26em;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(96px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); background: var(--papier); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: var(--t-base); line-height: 1.6; font-feature-settings: "kern"; }
body::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background-image: var(--grain); opacity: .045; mix-blend-mode: multiply; }
[hidden] { display: none !important; }
main:focus { outline: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea, select { border-radius: 0; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
h1, h2, h3, .marque { margin-top: 0; font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-weight: 400; line-height: 1.1; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--t-h1); }
h2 { margin-bottom: 18px; font-size: var(--t-h2); }
h3 { margin-bottom: 6px; font-size: var(--t-h3); }
p { text-wrap: pretty; }
/* Les insets valent 0 en portrait ; en paysage ils écartent le texte de l'encoche (la page s'étend bord à bord, viewport-fit=cover). */
.conteneur { width: min(var(--largeur), calc(100% - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); margin-inline: auto; }
.surtitre { display: block; margin-bottom: 14px; color: var(--or-texte); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.evitement { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 100; padding: 12px 18px; color: var(--violet-fonce); background: var(--papier); transform: translateY(-180%); }
.evitement:focus { transform: none; }

/* ---------- Bandeau et en-tête ---------- */
.annonce { padding: 9px 20px; border-bottom: 1px solid var(--or-clair); color: var(--violet-fonce); background: var(--ivoire); text-align: center; font-size: var(--t-petit); letter-spacing: .04em; }
.annonce-court { display: none; }
.entete { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--trait); background: rgba(255, 253, 249, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marque { display: inline-flex; align-items: center; color: var(--violet-fonce); text-decoration: none; white-space: nowrap; }
.marque img { display: block; height: auto; }
.entete .marque { padding-block: 14px; }
.entete .marque img { width: 172px; }
.liens { display: flex; align-items: center; gap: 28px; }
.liens a { display: inline-flex; align-items: center; min-height: 44px; position: relative; color: var(--violet); text-decoration: none; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease; }
.liens a:hover, .liens a[aria-current="page"] { color: var(--violet-fonce); }
.liens a::after { content: ""; position: absolute; right: 0; bottom: 6px; left: 0; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.liens a:hover::after, .liens a[aria-current="page"]::after { transform: scaleX(1); }
.menu-bouton { display: none; }
.nav-outils { display: flex; align-items: center; gap: 6px; }
.panier-bouton { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 4px 6px 10px; border: 0; background: none; color: var(--violet); font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panier-bouton svg { width: 22px; height: 22px; }
.panier-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; color: var(--papier); background: var(--or-texte); font-size: .75rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.panier-compte[data-vide="true"] { background: var(--lilas-fonce); color: var(--violet-fonce); }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.bouton { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border: 1px solid var(--violet); color: var(--papier); background: var(--violet); box-shadow: inset 0 0 0 1px transparent; font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: var(--inter-bouton); line-height: 1.2; text-decoration: none; text-transform: uppercase; transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bouton { background-image: linear-gradient(160deg, rgba(255, 253, 249, .1), rgba(41, 35, 47, .06)); box-shadow: 0 1px 2px rgba(55, 39, 89, .18), 0 8px 20px -12px rgba(55, 39, 89, .5); transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .18s cubic-bezier(.2, .7, .2, 1); }
.bouton:hover { background-color: var(--violet-fonce); border-color: var(--violet-fonce); box-shadow: inset 0 0 0 1px var(--or-clair), 0 2px 4px rgba(55, 39, 89, .2), 0 14px 28px -14px rgba(55, 39, 89, .55); transform: translateY(-1px); }
.bouton:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.bouton:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(41, 35, 47, .28); }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton-clair { color: var(--violet-fonce); background: var(--papier); background-image: none; box-shadow: 0 1px 2px rgba(55, 39, 89, .1); }
.bouton-clair:hover { color: var(--papier); background-color: var(--violet); background-image: linear-gradient(160deg, rgba(255, 253, 249, .12), rgba(41, 35, 47, .06)); }
.bouton-or { border-color: var(--or-texte); color: var(--or-texte); background: var(--papier); background-image: none; box-shadow: 0 1px 2px rgba(114, 85, 38, .12); }
.bouton-or:hover { color: var(--papier); background-color: var(--or-texte); border-color: var(--or-texte); box-shadow: 0 2px 4px rgba(114, 85, 38, .22), 0 14px 26px -14px rgba(114, 85, 38, .5); }
.lien-texte { display: inline-flex; min-height: 44px; align-items: center; color: var(--violet); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--or-clair); text-decoration-thickness: 1px; text-underline-offset: 7px; font-variant-numeric: tabular-nums; transition: color .2s ease, text-decoration-color .2s ease; }
.lien-texte:hover { color: var(--violet-fonce); text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lien-texte:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.ajout { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--encre); color: var(--encre); background: transparent; font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: var(--inter-bouton); text-transform: uppercase; transition: background .22s ease, color .22s ease, border-color .22s ease; }
.ajout svg { width: 16px; height: 16px; flex: none; }
.ajout:hover { color: var(--papier); background: var(--encre); box-shadow: 0 2px 4px rgba(41, 35, 47, .18), 0 12px 22px -14px rgba(41, 35, 47, .5); transform: translateY(-1px); }
.ajout:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(41, 35, 47, .25); }
.ajout:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ajout[data-etat="ajoute"] { color: var(--papier); background: var(--violet); border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--or-clair); }

/* ---------- Héros ---------- */
.hero { position: relative; background: var(--ivoire); padding-top: 40px; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 59%; }
.hero-contenu { position: relative; width: min(44%, 540px); min-height: 380px; margin: 0 max(24px, calc((100% - var(--largeur)) / 2)) 40px auto; padding: 36px 40px; color: var(--encre); background: rgba(255, 253, 249, .96); outline: 1px solid var(--trait-or); outline-offset: -8px; box-shadow: 0 0 0 1px var(--trait-or); }
.hero h1 { margin-bottom: 18px; font-size: clamp(2.2rem, 1.55rem + 1.55vw, 3rem); }
.hero p { max-width: 42ch; margin: 0 0 18px; font-size: var(--t-moyen); }
.hero .prix-appel { margin: 0 0 22px; color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.prix-appel span { display: block; margin-top: 4px; color: var(--brume); font-weight: 400; font-size: .9375rem; }
.hero .actions { align-items: center; gap: 10px 26px; }
.reassurance { position: relative; padding: 18px 0; border-block: 1px solid var(--trait-or); background: var(--ivoire); }
.reassurance .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; color: var(--violet-fonce); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.reassurance span + span { border-left: 1px solid var(--or-clair); padding-left: 20px; }

/* ---------- Sections ---------- */
.section { padding: var(--espace-section) 0; }
.section-dense { padding-block: 44px 52px; }
.section-calme { padding-block: 56px; }
.section-lilas { background: var(--lilas); }
.section-ivoire { background: var(--ivoire); }
.section-tete { max-width: 760px; margin-bottom: 32px; }
.section-tete h2 { margin-bottom: 16px; }
.section-tete p { max-width: 62ch; margin: 0; color: var(--brume); font-size: var(--t-moyen); }
.section-tete-centre { margin-inline: auto; text-align: center; }
.collection-tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.collection-tete .section-tete { margin: 0; }
.collection-tete > .lien-texte { flex-shrink: 0; margin-bottom: 4px; }
.collection-tete h2 { max-width: 24ch; }
.navigation-univers { border-bottom: 1px solid var(--trait); background: var(--papier); }
.navigation-univers .conteneur { display: flex; justify-content: center; gap: 12px; padding: 16px 0; }
.navigation-univers a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 5px 20px 5px 6px; border: 1px solid var(--trait-or); background: var(--papier); color: var(--encre); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.navigation-univers a:hover { background: var(--lilas); border-color: var(--violet); color: var(--violet-fonce); }
.navigation-univers i { display: block; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; border: 1px solid var(--or-clair); background: var(--ivoire); }
.navigation-univers img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }

/* ---------- Grilles et cartes ---------- */
.grille { display: grid; gap: var(--espace-grille); }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.carte { display: flex; flex-direction: column; min-width: 0; position: relative; background: transparent; }
.carte-media { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ivoire); border-radius: var(--rayon); }
.carte-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* Survol « La matière » : le héros au repos, la texture au passage du pointeur. Desktop seulement —
   sur tactile la <source media> ne s'applique pas et l'img ne charge qu'un pixel transparent. */
.carte-matiere { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.carte-matiere img { object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .carte:hover .carte-matiere, .carte:focus-within .carte-matiere { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .carte-matiere { transition: none; } }
.carte-photo .carte-media img { object-fit: cover; }
.carte-portrait .carte-media { aspect-ratio: 3 / 4; }
.carte-corps { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 16px 0 0; }
.carte h3 { margin-bottom: 4px; line-height: 1.2; }
.carte h3 a { text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte p { margin: 0; color: var(--brume); font-size: .9375rem; }
.prix { display: block; margin-top: 10px; color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 1.0625rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.prix .format { display: block; margin-top: 2px; color: var(--brume); font-weight: 400; font-size: .875rem; white-space: nowrap; }
.prix-ref { display: block; margin-top: 4px; color: var(--brume); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: .8125rem; line-height: 1.5; }
.carte-action { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 12px; }
.carte-action .prix { margin-top: 0; }
.prix-lot { display: block; margin-top: 4px; padding: 6px 0; border: 0; background: none; color: var(--violet); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; font-weight: 600; line-height: 1.4; text-align: left; text-decoration: underline; text-decoration-color: var(--or-clair); text-underline-offset: 3px; cursor: pointer; font-variant-numeric: tabular-nums; }
.prix-lot:hover, .prix-lot:focus-visible { color: var(--violet-fonce); text-decoration-color: var(--violet-fonce); }
.prix-lot[data-etat="ajoute"] { text-decoration: none; }
.achat-lot { margin-top: 10px; }
.panier-remises { margin: 8px 0 0; }
.panier-remise { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--violet-fonce); font-size: .875rem; font-variant-numeric: tabular-nums; }
.panier-remise strong { font-weight: 600; }
.panier-lot .lien-texte { min-height: 40px; }
.carte-vedette { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px; border-top: 1px solid var(--or); background: var(--ivoire); }
.carte-vedette .carte-media { border-radius: 0; }
.carte-vedette .carte-corps { padding: 0; }
.carte-vedette .carte-surtitre { display: block; margin-bottom: 6px; color: var(--or-texte); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.carte-vedette h3 { font-size: 1.375rem; }
.carte-vedette .prix { font-size: 1.25rem; }
.carte-vedette .pastille { z-index: 3; }
@media (max-width: 620px) { .carte-vedette { grid-template-columns: 1fr; gap: 14px; padding: 16px; } .carte-vedette h3 { font-size: 1.25rem; } }
.reperes-offrir { margin: 18px 0 0; color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; }
.reperes-offrir span { display: block; margin-top: 4px; color: var(--brume); font-weight: 400; font-size: .9375rem; }
.carte-texte { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-top: 1px solid var(--or); background: var(--papier); }
.carte-texte h3 { font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-weight: 400; font-size: 1.1875rem; margin: 0; letter-spacing: .01em; }
.carte-texte p { margin: 0; color: var(--brume); font-size: .9375rem; line-height: 1.6; }
.carte-texte .lien-texte { margin-top: auto; align-self: flex-start; }
.achat-jauge { margin: 12px 0 0; color: var(--brume); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.achat-jauge-texte { display: block; }
.achat-jauge-rail { display: block; height: 4px; margin-bottom: 8px; background: var(--lilas-fonce); overflow: hidden; }
.achat-jauge-rail span { display: block; height: 100%; background: var(--violet); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .achat-jauge-rail span { transition: none; } }
.lettre { background: var(--lilas); }
.lettre-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.lettre h2 { margin: 6px 0 10px; font-size: 1.75rem; }
.lettre p { color: var(--brume); font-size: .9375rem; line-height: 1.6; max-width: 46ch; }
.lettre-forme label { display: block; margin-bottom: 8px; color: var(--or-texte); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lettre-champ { display: flex; flex-wrap: wrap; gap: 10px; }
.lettre-champ input { flex: 1 1 220px; min-height: 52px; padding: 12px 16px; border: 1px solid var(--violet); background: var(--papier); color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: 1rem; }
.lettre-champ input:focus-visible { outline: 2px solid var(--violet-fonce); outline-offset: 1px; }
.lettre-champ input[aria-invalid="true"] { border-color: var(--brique, #8c3b2e); }
.lettre-champ .bouton { flex: 0 0 auto; }
.lettre-mention { margin-top: 10px; font-size: .8125rem; }
.lettre-etat { margin-top: 10px; min-height: 1.4em; color: var(--violet-fonce); font-size: .875rem; font-weight: 600; }
@media (max-width: 820px) { .lettre-grille { grid-template-columns: 1fr; gap: 22px; } .lettre h2 { font-size: 1.5rem; } }
.consentement { position: fixed; inset: auto 16px calc(16px + env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; margin-inline: auto; padding: 18px 20px; border: 1px solid var(--violet); background: var(--papier); box-shadow: 0 18px 40px -24px rgba(41, 35, 47, .5); animation: consentement-monte .4s ease both; }
.consentement p { margin: 0 0 12px; color: var(--encre); font-size: .875rem; line-height: 1.5; }
.consentement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.consentement-actions .bouton { min-height: 44px; padding-inline: 20px; }
body:has(.achat-sticky[data-visible="true"]) .consentement { bottom: calc(84px + env(safe-area-inset-bottom)); }
@keyframes consentement-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .consentement { animation: none; } }
.palier-bouton { justify-self: start; min-height: 36px; margin-top: 5px; padding: 7px 11px; border: 1px solid var(--violet); background: transparent; color: var(--violet); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; cursor: pointer; text-align: left; }
.palier-bouton:hover, .palier-bouton:focus-visible { background: var(--violet); color: var(--papier); outline: none; }
.choix-second { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0 0 4px; color: var(--brume); font-size: .8125rem; }
.choix-second button { min-height: 44px; padding: 6px 14px; border: 1px solid var(--trait-or); background: var(--papier); color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.choix-second button[aria-pressed="true"] { border-color: var(--violet); background: var(--lilas); color: var(--violet-fonce); }
.offre-liee { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; margin: 18px 0 0; padding: 14px; border: 1px solid var(--trait-or); background: var(--ivoire); }
.offre-liee-medias { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.offre-liee-medias img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--papier); }
.offre-liee-corps strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.offre-liee-corps p { margin: 4px 0 0; color: var(--brume); font-size: .875rem; line-height: 1.5; }
.offre-liee-corps .bouton { margin-top: 10px; min-height: 44px; }
.pastille { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 10px; color: var(--violet-fonce); background: var(--papier); box-shadow: 0 0 0 1px var(--trait-or); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (hover: hover) {
  .carte:hover .carte-media img { transform: scale(1.035); }
  .carte:hover h3 { color: var(--violet); }
}
.carte:has(h3 a:focus-visible) { outline: 2px solid var(--violet); outline-offset: 4px; }
.carte h3 a:focus-visible { outline: none; }
.collection-grille { gap: var(--espace-grille); }
.selection-lavande { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-grille); }
.selection-lavande .carte:first-child .carte-media { aspect-ratio: 1; }
.muscs-calmes .grille { gap: var(--espace-grille); }
.rail-brumes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espace-grille); }

/* ---------- Coffret vedette, cadeaux, duo ---------- */
.coffret-vedette, .cadeaux, .duo { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
.coffret-vedette > img, .coffret-vedette > a > img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--papier); }
.coffret-vedette > a { display: block; width: min(100%, 460px); justify-self: center; outline: 1px solid var(--trait-or); outline-offset: 10px; }
.coffret-vedette p, .cadeaux p, .duo-texte p { max-width: 48ch; color: var(--brume); margin: 0 0 20px; font-size: var(--t-moyen); }
.coffret-vedette .prix { margin: 18px 0 6px; font-size: 1.5rem; }
.coffret-vedette .achat-note { font-size: .875rem; }
.coffret-vedette .actions { margin-top: 22px; }
.cadeaux { grid-template-columns: 1fr 1fr; align-items: center; }
.cadeau-photo { margin: 0; }
.cadeau-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.cadeau-photo figcaption { padding-top: 12px; font-size: .8125rem; color: var(--brume); }
.duo-texte { max-width: 560px; }
.duo-image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; }
.faq h2 { margin-bottom: 22px; }
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-of-type { border-bottom: 1px solid var(--trait); }
.faq summary { position: relative; min-height: 52px; padding: 16px 40px 16px 0; color: var(--violet-fonce); font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-size: 1.125rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: var(--or-texte); transition: transform .25s ease; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { margin: 0 0 18px; max-width: 65ch; color: var(--brume); }
.faq details p a { display: inline-block; padding-block: 4px; }
.faq-cta { margin-top: 26px; }
.accueil-faq { max-width: var(--largeur); display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.faq-intro .bouton { margin-top: 8px; }
.ancres { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 12px; }
.ancres a { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet); font-weight: 500; }

/* ---------- Bannières de page ---------- */
.banniere-page { padding: 40px 0 36px; border-bottom: 1px solid var(--trait); background: var(--lilas); }
.banniere-page h1 { max-width: 950px; margin-bottom: 14px; }
.banniere-page p { max-width: 64ch; margin: 0; color: var(--brume); font-size: var(--t-moyen); }
.banniere-page .bouton { margin-top: 18px; }

/* ---------- Boutique ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtre { min-height: 44px; padding: 9px 18px; border: 1px solid var(--trait-or); background: transparent; color: var(--violet-fonce); font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filtre.actif, .filtre:hover { color: var(--papier); background: var(--violet); border-color: var(--violet); }
.resultats { margin: 0 0 22px; color: var(--brume); font-size: .8125rem; }
.page-boutique main { background: var(--papier); }
.page-boutique .section { padding-top: 32px; }
.page-boutique .grille { gap: 36px var(--espace-grille); }

/* ---------- Fiche produit ---------- */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--brume); font-size: .8125rem; }
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; }
.fiche-principale { padding: 12px 0 40px; }
.produit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.produit-visuel { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--ivoire); }
.produit-visuel::after { content: ""; position: absolute; inset: 10px; z-index: 1; border: 1px solid var(--trait-or); pointer-events: none; }
.produit-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.produit-visuel-portrait { aspect-ratio: 3 / 4; }
.produit-photo { aspect-ratio: 4 / 3; }
.produit-photo img { object-fit: cover; }
.produit-info { padding-top: 8px; }
.produit-info h1 { margin-bottom: 12px; font-size: clamp(2rem, 1.5rem + 1.7vw, 3.05rem); }
.produit-info > .prix { margin: 0 0 4px; font-size: 1.5rem; }
.produit-info > .prix .prix-ref { font-size: .875rem; }
.produit-info > p { max-width: 49ch; margin: 18px 0 20px; color: var(--brume); font-size: var(--t-moyen); }
.produit-info .achat-cta { width: 100%; max-width: 420px; margin-top: 18px; }
.produit-info > .achat-note { margin: 10px 0 18px; color: var(--brume); font-size: .8125rem; }
.achat-reperes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--trait); }
.achat-reperes div { padding: 6px 0; }
.achat-reperes div:nth-child(even) { padding-left: 0; }
.achat-reperes dt { color: var(--or-texte); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.achat-reperes dd { margin: 4px 0 0; font-size: .875rem; }
.achat-reperes a { display: inline-block; padding-block: 4px; }
.details-produit { border-bottom: 1px solid var(--trait); }
.details-produit summary { position: relative; padding: 14px 36px 14px 0; min-height: 48px; cursor: pointer; color: var(--violet-fonce); font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-size: 1.0625rem; list-style: none; }
.details-produit summary::-webkit-details-marker { display: none; }
.details-produit summary::before, .details-produit summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 1px; background: var(--or-texte); transition: transform .25s ease; }
.details-produit summary::after { transform: rotate(90deg); }
.details-produit[open] summary::after { transform: rotate(0); }
.details-produit p, .details-produit ul { color: var(--brume); font-size: .9375rem; }
.details-produit ul { padding-left: 20px; }
.produit-specificites { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0; padding: 12px 0; border-block: 1px solid var(--trait); font-size: .875rem; }
.produit-specificites span { color: var(--violet-fonce); }
.produits-associes { padding-block: var(--espace-section); }
.complements { padding-block: 56px 64px; }
.complements-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.complements h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.galerie { min-width: 0; }
.galerie .produit-visuel { display: block; color: var(--violet-fonce); cursor: zoom-in; }
.galerie-legende { margin: 10px 0 0; color: var(--brume); font-size: .8125rem; }
.galerie-vues { display: flex; gap: 10px; margin-top: 14px; }
.galerie-vue { display: grid; gap: 6px; width: 92px; padding: 4px; border: 1px solid var(--trait); background: var(--papier); color: var(--brume); font: inherit; font-size: .75rem; }
.galerie-vue img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.galerie-vue[aria-pressed="true"] { border: 1px solid var(--or-texte); color: var(--violet-fonce); }
.choix-modele { margin: 18px 0 0; padding: 0; border: 0; }
.choix-modele legend { margin-bottom: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--or-texte); }
.choix-modele label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0 6px 6px 0; padding: 8px 14px; border: 1px solid var(--trait-or); cursor: pointer; font-size: .875rem; }
.choix-modele label:has(input:checked) { border-color: var(--violet); background: var(--lilas); color: var(--violet-fonce); }
.choix-modele input { width: 16px; height: 16px; accent-color: var(--violet); }
.zoom-produit { width: min(92vw, 860px); max-height: 92dvh; padding: 12px; border: 1px solid var(--trait-or); background: var(--papier); }
.zoom-produit::backdrop { background: rgba(41, 35, 47, .65); }
.zoom-produit img { width: 100%; height: auto; max-height: min(72dvh, 740px); object-fit: contain; }
.zoom-produit-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: 8px; }
.zoom-produit-entete p { margin: 0; color: var(--violet-fonce); }
.zoom-fermer { min-height: 44px; padding: 8px 14px; border: 1px solid var(--trait-or); background: var(--papier); color: var(--violet-fonce); font: inherit; }
.achat-sticky { display: none; }

/* ---------- Page muscs ---------- */
.muscs { padding-block: 40px 56px; }
.muscs .carte { border-top: 1px solid var(--or); background: var(--ivoire); }
.muscs .carte h2 { font-size: 1.85rem; margin-bottom: 12px; }
.muscs .carte-corps { padding: 20px; }
.muscs .carte-corps .bouton { margin-top: 14px; align-self: flex-start; }
.muscs .carte p { margin-bottom: 12px; }
.muscs .carte .actions { margin-top: 16px; }
.page-muscs .galerie .produit-visuel { outline: 0; }
.lexique-parfum { background: var(--lilas); }
.lexique-parfum .grille { gap: var(--espace-grille); }
.lexique-parfum .grille > div { padding-top: 20px; border-top: 1px solid var(--trait-or); }
.lexique-parfum h3 { font-size: 1.5rem; }
.lexique-parfum .grille p { color: var(--brume); font-size: .9375rem; }
.lexique-parfum > .conteneur > .lien-texte { margin-top: 20px; }
.page-muscs .section-ivoire .conteneur { display: grid; grid-template-columns: 340px 1fr; align-items: center; gap: 0 64px; }
.page-muscs .section-ivoire .section-tete { grid-column: 2; margin: 0; }
.trio-coffret { grid-column: 1; grid-row: 1 / 3; outline: 1px solid var(--trait-or); outline-offset: 10px; }
.trio-coffret img { aspect-ratio: 1; object-fit: contain; background: var(--papier); }
.trio-pied { grid-column: 2; margin-top: 22px; }

/* ---------- Histoire, contact, formulaire ---------- */
.page-histoire .section { padding-block: var(--espace-section); }
.page-histoire .section:nth-child(3) .duo { grid-template-columns: 1.1fr .9fr; }
.page-contact .duo { align-items: start; grid-template-columns: 1.15fr .85fr; }
.page-contact .duo-texte { padding: 28px; border-top: 1px solid var(--or); background: var(--ivoire); }
.page-contact .duo-texte h2 { font-size: 2rem; }
.formulaire { display: grid; gap: 18px; max-width: 700px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-fonce); }
.champ input, .champ textarea, .champ select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--brume); background: var(--papier); color: var(--encre); font: inherit; }
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--violet); outline-offset: 0; }
.formulaire-info { margin: 0; padding: 16px 18px; border-left: 2px solid var(--or-texte); background: var(--ivoire); }
.aide-champ { margin: 0; color: var(--brume); font-size: .875rem; }
.option-cadeau { display: flex; min-height: 44px; align-items: center; gap: 12px; }
.option-cadeau input { width: 22px; height: 22px; accent-color: var(--violet); }
.formulaire-statut { margin: 0; color: var(--violet-fonce); }
.formulaire-statut:not(:empty) { padding: 16px; border: 1px solid var(--violet); }
.formulaire button:disabled { opacity: .65; cursor: not-allowed; }
.recap-panier { margin: 0 0 6px; padding: 16px 18px; border-left: 2px solid var(--or-texte); background: var(--ivoire); font-size: .9375rem; }
.recap-panier ul { margin: 8px 0 0; padding-left: 18px; }
.recap-panier li { margin: 3px 0; }

/* ---------- Pages légales ---------- */
.legal { max-width: 800px; }
.page-cgv .banniere-page .conteneur, .page-legales .banniere-page .conteneur { max-width: 800px; }
.legal h2 { margin: 36px 0 12px; font-size: 1.5rem; letter-spacing: 0; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 14px; color: var(--brume); font-size: 1rem; }
.legal b { color: var(--encre); }
.legal a { color: var(--violet); padding-block: 4px; }
.legal ul { margin: 0 0 18px; padding: 0; list-style: none; }
.legal li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--trait); color: var(--brume); }
.legal-maj { padding-bottom: 20px; border-bottom: 1px solid var(--trait); }
.trou { display: inline-block; padding: 2px 8px; border: 1px dashed var(--or-texte); border-radius: 2px; color: var(--or-texte); background: var(--ivoire); font-size: .9375rem; font-weight: 700; }
.legal-formulaire { margin: 0; padding: 22px; border-left: 2px solid var(--or-texte); background: var(--ivoire); }
.legal-formulaire p:last-child { margin-bottom: 0; }
.legal ul.garanties li { display: list-item; margin-left: 20px; padding-left: 8px; list-style: disc; }

/* ---------- Pied de page ---------- */
.pied { padding: 56px 0 calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trait-or); background: var(--ivoire); }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; }
.pied-grille p { max-width: 34ch; color: var(--brume); font-size: .875rem; }
.pied a { color: var(--brume); text-decoration: none; }
.pied .marque { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pied .marque img:not(.monogramme) { width: 176px; }
.monogramme { width: 58px; }
.pied a:hover { color: var(--violet); text-decoration: underline; }
.pied nav { display: grid; align-content: start; gap: 4px; font-size: .875rem; }
.pied nav strong { margin-bottom: 8px; color: var(--or-texte); font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pied nav a { display: flex; align-items: center; min-height: 32px; }
.copyright { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--trait); color: var(--brume); font-size: .8125rem; }

/* ---------- Panier (tiroir) ---------- */
.panier-fond { position: fixed; inset: 0; z-index: 70; background: rgba(41, 35, 47, .45); opacity: 0; transition: opacity .3s ease; }
.panier { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); width: min(460px, 100%); background: var(--papier); border-left: 1px solid var(--or-clair); transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.panier:focus { outline: none; }
.panier-ouvert .panier { transform: none; box-shadow: -24px 0 60px rgba(41, 35, 47, .18); }
.panier-ouvert .panier-fond { opacity: 1; }
body.panier-ouvert { overflow: hidden; }
.panier-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(22px + env(safe-area-inset-top, 0px)) 28px 18px; border-bottom: 1px solid var(--trait-or); }
.panier-tete h2 { margin: 0; font-size: 1.6rem; }
.panier-nombre { display: block; margin-top: 2px; color: var(--brume); font-size: .8125rem; letter-spacing: .04em; }
.panier-nombre:empty { display: none; }
.panier-fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--violet-fonce); transition: color .2s ease, transform .3s ease; }
.panier-fermer svg { width: 22px; height: 22px; }
.panier-fermer:hover { color: var(--violet); transform: rotate(90deg); }
.panier-corps { flex: 1; overflow-y: auto; padding: 4px 28px 24px; }
.panier-lignes { margin: 0; padding: 0; list-style: none; }
.panier-ligne { display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--trait); animation: panier-apparait .35s ease both; }
@keyframes panier-apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panier-ligne-media { display: block; position: relative; width: 80px; aspect-ratio: 1; background: var(--ivoire); }
.panier-ligne-media::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--trait-or); pointer-events: none; }
.panier-ligne-media img { width: 100%; height: 100%; object-fit: contain; }
.panier-ligne h3 { margin: 2px 0 2px; font-size: 1.0625rem; }
.panier-ligne h3 a { text-decoration: none; }
.panier-ligne h3 a:hover { color: var(--violet); }
.panier-ligne small { display: block; color: var(--brume); font-size: .8125rem; }
.panier-ligne > .prix { margin: 4px 0 0; font-size: 1rem; text-align: right; white-space: nowrap; }
.panier-ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; }
.panier-qte { display: inline-flex; align-items: center; border: 1px solid var(--trait-or); background: var(--papier); }
.panier-qte button { width: 44px; height: 44px; border: 0; background: none; color: var(--violet-fonce); font: inherit; font-size: 1.05rem; transition: background .2s ease; }
.panier-qte button:hover { background: var(--lilas); }
.panier-qte span { min-width: 28px; text-align: center; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.panier-retirer { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--brume); font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--or-clair); }
.panier-retirer:hover { color: var(--violet-fonce); }
.panier-vide { padding: 28px 0 8px; }
.panier-vide h3 { margin-bottom: 8px; font-size: 1.4rem; }
.panier-vide > p { margin: 0 0 22px; color: var(--brume); }
.panier-vide .lien-texte { margin-top: 18px; }
.panier-suggestions { margin: 0; padding: 0; list-style: none; }
.panier-suggestion { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); }
.panier-suggestion:last-child { border-bottom: 1px solid var(--trait); }
.panier-suggestion-media { display: block; width: 64px; aspect-ratio: 1; background: var(--ivoire); }
.panier-suggestion-media img { width: 100%; height: 100%; object-fit: contain; }
.panier-suggestion > div a { font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-size: 1rem; text-decoration: none; }
.panier-suggestion > div a:hover { color: var(--violet); }
.panier-suggestion small { display: block; color: var(--brume); font-size: .8125rem; }
.panier-plus { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--encre); background: transparent; color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.panier-plus:hover, .panier-plus[data-etat="ajoute"] { color: var(--papier); background: var(--encre); }
.panier-cadeau { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--or-clair); background: var(--ivoire); }
.panier-cadeau-choix { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.panier-cadeau-choix input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--violet); }
.panier-cadeau-choix strong { font-weight: 600; color: var(--encre); }
.panier-cadeau-choix em { margin-left: 6px; color: var(--or-texte); font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panier-cadeau-choix small { display: block; margin-top: 3px; color: var(--brume); font-size: .8125rem; line-height: 1.45; }
.panier-cadeau-mot { margin-top: 12px; }
.panier-cadeau-mot label { display: block; margin-bottom: 6px; color: var(--violet-fonce); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panier-cadeau-mot textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--trait-or); background: var(--papier); color: var(--encre); font: inherit; font-size: .9375rem; resize: vertical; }
.panier-cadeau-mot small { display: block; margin-top: 4px; color: var(--brume); font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.panier-complements { margin-top: 24px; }
.panier-complements h3 { margin-bottom: 8px; color: var(--or-texte); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.panier-pied { padding: 10px 24px 12px; border-top: 1px solid var(--trait-or); background: var(--ivoire); }
.paliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.palier { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border: 1px solid var(--trait-or); background: var(--papier); transition: background .3s ease, border-color .3s ease; }
.palier-icones { display: flex; }
.palier-icones i { display: block; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; border: 1px solid var(--or-clair); background: var(--ivoire); box-shadow: 0 0 0 2px var(--papier); transition: border-color .3s ease, box-shadow .3s ease; }
.palier-icones i + i { margin-left: -8px; }
.palier-icones img { width: 100%; height: 100%; object-fit: cover; }
.palier-texte { display: grid; gap: 1px; min-width: 0; }
.palier b { color: var(--or-texte); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.palier-texte > span { color: var(--encre); font-size: .6875rem; line-height: 1.25; }
.palier-texte > small { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; color: var(--violet); font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 1em; }
.palier-texte > small svg { width: 12px; height: 12px; }
.palier[data-atteint="true"] { border-color: var(--violet); background: var(--lilas); }
.palier[data-atteint="true"] .palier-icones i { border-color: var(--violet); box-shadow: 0 0 0 2px var(--lilas); }
.palier[data-atteint="true"] b { color: var(--violet); }
.palier[data-atteint="true"] .palier-texte > small { color: var(--violet-fonce); }
.panier-recap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 0 8px; }
.panier-recap span { font-size: .9375rem; }
.panier-recap strong { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.panier-pied .bouton { width: 100%; min-height: 48px; }
.panier-garanties { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 0; color: var(--brume); font-size: .6875rem; }
.panier-garanties a { color: var(--violet); font-weight: 600; text-decoration: underline; text-decoration-color: var(--or-clair); text-underline-offset: 3px; white-space: nowrap; }
.panier-garanties a:hover { color: var(--violet-fonce); }
.panier-note { margin: 18px 0 0; color: var(--brume); font-size: .8125rem; line-height: 1.5; text-align: center; }

/* ---------- Offre coffret, choix de format, rappel ---------- */
.panier-offre { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--violet); background: var(--lilas); }
.panier-offre p { margin: 0 0 4px; color: var(--violet-fonce); font-size: .9375rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.panier-offre small { display: block; margin-bottom: 12px; color: var(--brume); font-size: .8125rem; }
.panier-offre .bouton { width: 100%; min-height: 46px; }
.choix-offre { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
.choix-offre legend { margin-bottom: 8px; color: var(--or-texte); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.choix-offre label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--trait-or); background: var(--papier); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.choix-offre label:has(input:checked) { border-color: var(--violet); background: var(--lilas); }
.choix-offre input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }
.choix-offre strong { display: block; font-weight: 600; color: var(--encre); }
.choix-offre small { display: block; color: var(--brume); font-size: .8125rem; line-height: 1.4; }
.choix-offre b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.annonce-rappel { background: var(--lilas); border-bottom-color: var(--violet); }
.annonce-lien { margin-left: 8px; padding: 2px 0; border: 0; border-bottom: 1px solid var(--violet); background: none; color: var(--violet-fonce); font: inherit; font-weight: 700; letter-spacing: .04em; cursor: pointer; }

/* ---------- Page histoire ---------- */
.page-histoire .banniere-page { padding-block: 56px 52px; }
.page-histoire .banniere-page p { max-width: 68ch; }
.section-champ { position: relative; background: var(--ivoire); }
.section-champ > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; }
.section-champ-texte { padding: var(--espace-section) 0; }
.section-champ-texte h2 { max-width: 20ch; margin-bottom: 28px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.deux-colonnes p { margin: 0 0 16px; color: var(--encre); font-size: var(--t-moyen); line-height: 1.65; }
.deux-colonnes p:last-child { margin-bottom: 0; }
.gestes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-grille); margin: 0; padding: 0; list-style: none; counter-reset: geste; }
.gestes li { display: grid; gap: 6px; padding: 22px 20px 24px; border-top: 1px solid var(--or); background: var(--papier); }
.gestes b { color: var(--or-texte); font-size: 1.35rem; font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.gestes strong { font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-weight: 400; font-size: 1.125rem; color: var(--violet-fonce); }
.gestes span { color: var(--brume); font-size: .9375rem; line-height: 1.5; }
.gains .section-tete { margin-bottom: 8px; }
.gains-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; margin: 0 0 32px; padding: 0; list-style: none; }
.gains-liste li { padding: 18px 0; border-bottom: 1px solid var(--trait); color: var(--brume); font-size: 1rem; line-height: 1.55; }
.gains-liste strong { display: block; margin-bottom: 4px; color: var(--encre); font-weight: 600; }

/* ---------- Réductions de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1000px) {
  .liens { gap: 18px; }
  .hero-contenu { width: 50%; }
  .grille-4, .grille-5, .rail-brumes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-boutique .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .produit { gap: 28px; }
  .page-muscs .section-ivoire .conteneur { grid-template-columns: 260px 1fr; gap: 0 36px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --espace-section: 48px; --espace-grille: 14px; }
  .conteneur { width: calc(100% - 36px); }
  .annonce { padding: 8px 16px; letter-spacing: .02em; }
  .annonce-long { display: none; }
  .annonce-court { display: inline; }
  .nav { min-height: 64px; gap: 12px; }
  .entete .marque img { width: 128px; }
  .menu-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px 0 10px; border: 1px solid var(--trait-or); color: var(--violet); background: var(--papier); font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .menu-bouton svg { width: 20px; height: 20px; }
  .menu-bouton .icone-fermer, .menu-bouton[aria-expanded="true"] .icone-menu { display: none; }
  .menu-bouton[aria-expanded="true"] .icone-fermer { display: block; }
  .menu-bouton[aria-expanded="true"] { background: var(--lilas); border-color: var(--violet); }
  .nav-outils { gap: 8px; }
  .panier-bouton { min-height: 42px; padding: 0 10px 0 10px; border: 1px solid var(--trait-or); background: var(--papier); gap: 7px; }
  .panier-bouton span:not(.panier-compte) { display: none; }
  .panier-compte { min-width: 20px; height: 20px; font-size: .6875rem; }
  .liens { position: absolute; top: 64px; right: 0; left: 0; display: none; padding: 12px 22px 18px; border-bottom: 1px solid var(--trait-or); background: var(--papier); flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 64px); overflow-y: auto; }
  .liens.ouvert { display: flex; }
  .liens a { padding: 12px 0; font-size: .875rem; border-bottom: 1px solid var(--trait); }
  .liens a::after { display: none; }
  .hero { padding-top: 0; }
  .hero-image { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 30% 60%; }
  .hero-contenu { width: 100%; min-height: 0; margin: 0; padding: 26px 18px 28px; outline: 0; box-shadow: none; background: var(--ivoire); border-top: 1px solid var(--or-clair); }
  .hero h1 { font-size: 2.35rem; margin-bottom: 12px; }
  .hero p { font-size: 1rem; margin-bottom: 14px; }
  .hero .prix-appel { font-size: 1.0625rem; margin-bottom: 18px; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero .bouton { width: 100%; }
  .hero .lien-texte { justify-content: center; }
  .reassurance { padding-block: 12px; }
  .reassurance .conteneur { grid-template-columns: repeat(2, 1fr); gap: 8px 14px; font-size: .6875rem; letter-spacing: .06em; }
  .reassurance span + span { padding: 0; border: 0; }
  .section-tete { margin-bottom: 22px; }
  .section-tete p { font-size: 1rem; }
  .surtitre { margin-bottom: 10px; font-size: .6875rem; letter-spacing: .14em; }
  .grille-4, .grille-3, .grille-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille { gap: 24px 14px; }
  .carte-corps { padding-top: 12px; }
  .carte h3 { font-size: 1.0625rem; }
  .carte p { font-size: .8125rem; line-height: 1.45; }
  .prix { font-size: 1rem; }
  .prix-ref { font-size: .75rem; }
  .carte-action { gap: 10px; padding-top: 10px; }
  .ajout { min-height: 44px; font-size: .8125rem; letter-spacing: .05em; padding-inline: 8px; }
  .ajout svg { width: 14px; height: 14px; }
  .pastille { top: 8px; left: 8px; font-size: .6875rem; padding: 4px 8px; }
  .coffret-vedette, .cadeaux, .duo, .page-contact .duo, .page-histoire .section:nth-child(3) .duo { grid-template-columns: 1fr; gap: 24px; }
  .coffret-vedette > a { width: min(100%, 320px); outline-offset: 6px; }
  .coffret-vedette .prix { font-size: 1.3rem; }
  .coffret-vedette p, .cadeaux p, .duo-texte p { font-size: 1rem; }
  .cadeau-photo img { aspect-ratio: 4 / 5; }
  .cadeaux h2 br { display: none; }
  .rail-brumes { display: flex; gap: 12px; margin-inline: -18px; padding: 4px 18px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; }
  .rail-brumes::-webkit-scrollbar { display: none; }
  .rail-brumes .carte { flex: 0 0 58%; scroll-snap-align: start; }
  .selection-lavande { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .selection-lavande .carte:first-child { grid-column: 1 / -1; }
  .muscs-calmes .grille { grid-template-columns: 1fr; gap: 22px; }
  .muscs-calmes .carte { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: start; }
  .muscs-calmes .carte-corps { padding-top: 4px; }
  .muscs-calmes .carte h3 { font-size: 1.3rem; }
  .muscs-calmes .carte p { font-size: .875rem; }
  .accueil-faq { display: block; }
  .faq-intro { margin-bottom: 22px; }
  .faq h2 { margin-bottom: 16px; }
  .faq summary { font-size: 1.0625rem; padding-block: 14px; }
  .navigation-univers .conteneur { justify-content: flex-start; gap: 8px; padding: 12px 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .navigation-univers .conteneur::-webkit-scrollbar { display: none; }
  .navigation-univers a { flex: none; min-height: 44px; padding: 4px 14px 4px 5px; font-size: .6875rem; letter-spacing: .1em; scroll-snap-align: start; }
  .navigation-univers i { width: 32px; height: 32px; }
  .collection-tete { display: block; margin-bottom: 20px; }
  .collection-tete > .lien-texte { margin-top: 6px; }
  .banniere-page { padding-block: 24px 22px; }
  .banniere-page h1 { font-size: 2.1rem; margin-bottom: 10px; }
  .banniere-page p { font-size: 1rem; }
  .page-boutique .section { padding-top: 18px; }
  .page-boutique .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .filtres { gap: 6px; }
  .filtre { min-height: 44px; padding-inline: 12px; font-size: .8125rem; letter-spacing: .06em; }
  .fiche-principale { padding: 6px 0 36px; }
  .fil-ariane { margin-bottom: 6px; gap: 7px; font-size: .8125rem; }
  .produit { grid-template-columns: 1fr; gap: 16px; }
  .produit-visuel::after { inset: 8px; }
  .produit-info { padding-top: 0; }
  .produit-info .surtitre { margin-bottom: 6px; }
  .produit-info h1 { font-size: 1.9rem; margin-bottom: 8px; }
  .produit-info > .prix { font-size: 1.3rem; }
  .produit-info > p { margin: 12px 0 14px; font-size: 1rem; }
  .produit-info .achat-cta { max-width: none; margin-top: 12px; }
  .produit-info > .achat-note { margin: 8px 0 12px; }
  .achat-reperes { margin-top: 12px; }
  .achat-reperes div { padding: 10px 10px 10px 0; }
  .achat-reperes div:nth-child(even) { padding-left: 10px; }
  .achat-reperes dd { font-size: .8125rem; }
  .produits-associes .grille { grid-template-columns: 1fr 1fr; }
  .complements { padding-block: 40px 44px; }
  .complements-tete { display: block; margin-bottom: 14px; }
  .complements .grille { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .galerie-vue { width: 72px; }
  .galerie-vues { margin-top: 10px; }
  .choix-modele { margin-top: 14px; }
  .choix-modele label { padding-inline: 10px; font-size: .8125rem; }
  .achat-sticky { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--or-clair); background: rgba(255, 253, 249, .97); visibility: hidden; transform: translateY(110%); transition: transform .3s ease, visibility .3s; }
  .achat-sticky[data-visible="true"] { visibility: visible; transform: none; }
  body:has(.achat-sticky[data-visible="true"]) .pied { padding-bottom: calc(24px + 76px + env(safe-area-inset-bottom)); }
  .achat-sticky .prix { margin: 0; font-size: 1rem; }
  .achat-sticky .bouton { flex: 1; min-height: 46px; padding-inline: 14px; }
  .muscs .grille { grid-template-columns: 1fr; }
  .muscs .carte { display: grid; grid-template-columns: 36% 1fr; align-items: start; }
  .muscs .carte-corps { padding: 14px; }
  .muscs .carte h2 { font-size: 1.5rem; }
  .muscs .carte-corps .bouton { width: 100%; padding-inline: 10px; }
  .lexique-parfum .grille { grid-template-columns: 1fr; gap: 20px; }
  .lexique-parfum .grille > div { padding-top: 16px; }
  .page-muscs .section-ivoire .conteneur { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .page-muscs .section-ivoire .section-tete { grid-column: 1; }
  .trio-coffret { grid-column: 1; grid-row: auto; width: min(100%, 300px); margin-inline: auto; outline-offset: 6px; }
  .trio-pied { grid-column: 1; margin: 0; }
  .duo-image { aspect-ratio: 4 / 5; }
  .page-histoire .banniere-page { padding-block: 30px 28px; }
  .section-champ > img { aspect-ratio: 4 / 3; }
  .section-champ-texte h2 { margin-bottom: 18px; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 0; }
  .deux-colonnes p { font-size: 1rem; }
  .gestes { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gestes li { padding: 16px 14px 18px; }
  .gestes b { font-size: 1.35rem; }
  .gestes strong { font-size: 1.0625rem; }
  .gestes span { font-size: .875rem; }
  .gains-liste { grid-template-columns: 1fr; gap: 0; margin-bottom: 24px; }
  .gains-liste li { padding: 14px 0; font-size: .9375rem; }
  .page-histoire .section:nth-child(3) img { grid-row: 1; }
  .page-contact .duo-texte { padding: 20px; }
  .champ input, .champ textarea, .champ select { font-size: 1rem; }
  .legal li { grid-template-columns: 1fr; gap: 3px; }
  .legal h2 { margin-top: 28px; }
  .pied { padding: 36px 0 18px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 22px; }
  .pied-grille > div { grid-column: 1 / -1; }
  .pied-grille p { max-width: none; margin: 4px 0 0; }
  .pied nav a { min-height: 40px; }
  .copyright { margin-top: 22px; padding-top: 14px; }
  .panier { width: 100%; }
  .panier-tete { padding: 16px 18px 12px; }
  .panier-tete h2 { font-size: 1.4rem; }
  .panier-corps { padding: 0 18px 20px; }
  .panier-ligne { grid-template-columns: 68px 1fr auto; gap: 12px; padding: 14px 0; }
  .panier-ligne-media { width: 68px; }
  .panier-pied { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  .panier-offre { padding: 14px; }
  .panier-offre .bouton { font-size: .75rem; letter-spacing: .08em; padding-inline: 12px; white-space: nowrap; }
  .panier-recap { margin-top: 10px; }
  .panier-garanties { flex-wrap: wrap; gap: 4px 12px; }
  .panier-tete .panier-nombre { font-size: .75rem; }
}

/* ---------- Compléments page muscs ---------- */
.muscs .carte h2 a { text-decoration: none; }
.muscs .carte h2 a:hover { color: var(--violet); }
.muscs .carte .actions .bouton { margin-top: 0; }

/* Le produit, les gestes et les mots du comptoir. */
.accueil-hero { padding: 36px 0 32px; background: var(--ivoire); }
.accueil-hero-grille { display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: clamp(28px, 4vw, 64px); }
.accueil-hero h1 { margin: 0 0 22px; font-size: clamp(2.5rem, 3.5vw, 3.4rem); line-height: 1.13; }
.accueil-hero h1 em { color: var(--violet); font-style: normal; }
.accueil-hero-texte > p { max-width: 39ch; margin: 0 0 24px; color: var(--brume); font-size: 1.125rem; line-height: 1.65; }
.accueil-hero .actions { gap: 8px 22px; }
.accueil-hero .bouton { padding-inline: 20px; }
.hero-attention { display: block; max-width: 45ch; margin-top: 14px; color: var(--brume); font-size: .8125rem; }
.accueil-hero-photo, .photo-editoriale { min-width: 0; margin: 0; }
.accueil-hero-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.accueil-hero-photo figcaption, .photo-editoriale figcaption { margin-top: 9px; color: var(--brume); font-size: .8125rem; line-height: 1.45; }
.preuves-maison { padding: 22px 0; background: var(--papier); }
.preuves-maison .conteneur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; text-align: center; }
@media (max-width: 1000px) { .preuves-maison .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preuves-maison span { display: grid; gap: 3px; color: var(--brume); font-size: .8125rem; }
.preuves-maison strong { color: var(--violet-fonce); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.preuves-maison a { color: inherit; text-decoration: underline; text-decoration-color: var(--or-clair); text-underline-offset: 3px; }
.preuves-maison a:hover { color: var(--violet-fonce); }
.entrees-maison { padding-block: 26px 48px; }
.entrees-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.entrees-grille > a { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; color: var(--encre); text-decoration: none; }
.entrees-grille img { width: 96px; height: 104px; object-fit: cover; }
.entrees-grille > a > span { display: grid; gap: 4px; }
.entrees-grille small { color: var(--brume); font-size: .8125rem; }
.entrees-grille strong { color: var(--violet-fonce); font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-size: 1.375rem; font-weight: 400; line-height: 1.2; }
.entrees-grille > a > span > span { padding-top: 4px; color: var(--or-texte); font-size: .8125rem; }
.entrees-grille a:hover strong { color: var(--violet); }
.attention-section { background: var(--lilas); }
.attention-grille { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.photo-editoriale img { aspect-ratio: 4 / 3; object-fit: cover; }
.attention-texte > p { max-width: 40ch; color: var(--brume); font-size: 1.125rem; }
.gestes-cadeau { display: grid; gap: 18px; margin: 28px 0; padding: 0; list-style: none; }
.gestes-cadeau li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.gestes-cadeau li > span { padding-top: 2px; color: var(--or-texte); font-size: .875rem; font-variant-numeric: tabular-nums; }
.gestes-cadeau h3 { margin: 0 0 3px; font-size: 1.1875rem; }
.gestes-cadeau p { margin: 0; color: var(--brume); font-size: .9375rem; line-height: 1.5; }
.selection-muscs .carte-media { aspect-ratio: 5 / 4; }
.selection-muscs .carte-media img { height: 100%; object-fit: cover; }
.selection-muscs .carte-media::after, .selection-comptoir .carte-media::after { display: none; }
.selection-muscs .carte-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.selection-muscs .carte .prix { margin: 0; }
.selection-comptoir .grille { align-items: stretch; }
.selection-comptoir .carte-media { aspect-ratio: 1; }
.selection-comptoir .carte-media img { width: 100%; height: 100%; object-fit: cover; }
.maison-visage-grille { max-width: 950px; }
.maison-titre { margin-bottom: 34px; color: var(--violet); font-size: clamp(2.8rem, 7.2vw, 6rem); line-height: 1.04; letter-spacing: -.025em; }
.maison-titre span { display: block; }
.maison-visage p { max-width: 52ch; color: var(--brume); font-size: 1.125rem; }
.produit-entete > .prix { margin: 0; font-size: 1.5rem; }
.format-prix { color: var(--brume); font-size: .9375rem; font-weight: 400; }
.produit-editorial .produit-entete h1 { margin-bottom: 12px; font-size: clamp(2.1rem, 1.5rem + 1.5vw, 3rem); }
.produit-editorial .produit-intro { max-width: 48ch; margin: 16px 0; font-size: 1rem; line-height: 1.55; }
.produit-editorial .produit-info .achat-cta { max-width: none; }
.produit-editorial .choix-offre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.produit-editorial .choix-offre label { flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 12px; }
.produit-editorial .choix-offre label > span { flex: 1; }
.produit-editorial .choix-offre b { width: 100%; padding-left: 26px; }
.produit-editorial .choix-offre small { font-size: .8125rem; }
.galerie-editoriale .produit-visuel { aspect-ratio: 1; }
.galerie-editoriale .produit-visuel::after { display: none; }
.galerie-editoriale .galerie-vues { flex-wrap: wrap; gap: 8px; }
.galerie-editoriale .galerie-vue { width: 84px; min-height: 44px; padding: 4px; font-size: .8125rem; }
.galerie-editoriale .galerie-vue span { padding: 2px 0; }
.galerie-paysage .produit-visuel { aspect-ratio: 3 / 2; }
.choix-modele label img { width: 36px; height: 36px; object-fit: contain; }
.cadeau-details { padding-block: 40px; }
.cadeau-details h2 { margin-bottom: 24px; font-size: 2rem; }
.cadeau-details .gestes-cadeau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; }
.galerie-editoriale .galerie-legende { min-height: 2.9em; font-size: .8125rem; }
.portrait-parfum { margin: 30px 0 0; padding: 26px 24px; background: var(--lilas); }
.portrait-parfum h2 { margin: 0 0 16px; font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.2; }
.portrait-parfum > p { margin: 16px 0; color: var(--brume); font-size: 1rem; line-height: 1.65; }
.notes-senteur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--violet-fonce); font-size: .875rem; font-weight: 600; }
.notes-senteur:empty { display: none; }
.notes-senteur span + span::before { content: "·"; padding-right: 12px; color: var(--or-texte); }
.portrait-choix { display: grid; gap: 16px; margin: 22px 0 4px; }
.portrait-choix dt { color: var(--violet-fonce); font-weight: 600; font-size: .875rem; }
.portrait-choix dd { margin: 4px 0 0; color: var(--brume); font-size: .9375rem; line-height: 1.55; }
.source-senteur { margin-top: 16px; color: var(--brume); font-size: .8125rem; }
.source-senteur summary { display: list-item; min-height: 44px; padding-block: 12px; cursor: pointer; }
.source-senteur p { margin: 0 0 8px; line-height: 1.55; }
.source-senteur a { color: var(--violet-fonce); text-underline-offset: 3px; }
.geste-parfum { margin-top: 26px; }
.geste-parfum h3, .geste-parfum .geste-titre { margin-bottom: 8px; color: var(--violet-fonce); font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-weight: 400; line-height: 1.1; font-size: 1.25rem; }
.geste-parfum p { color: var(--brume); font-size: .9375rem; line-height: 1.65; }
.produit-colonne-visuelle { min-width: 0; }
.page-brume .produit-colonne-visuelle .geste-parfum { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--trait); }
.page-brume .produit-colonne-visuelle .geste-parfum p { margin-bottom: 0; }
.coffret-inclus { margin-top: 28px; }
.coffret-inclus ul { display: grid; gap: 18px; padding: 0; list-style: none; }
.coffret-inclus li { display: grid; gap: 3px; }
.coffret-inclus li strong { color: var(--violet-fonce); font-weight: 600; }
.coffret-inclus li span { color: var(--brume); font-size: .9375rem; }
.ancres-senteurs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; }
.ancres-senteurs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet-fonce); text-underline-offset: 6px; }
.portrait-collection { padding-block: 56px; scroll-margin-top: 110px; }
.portrait-collection:nth-of-type(odd) { background: var(--ivoire); }
.portrait-collection-grille { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(32px, 7vw, 112px); align-items: center; }
.portrait-collection:nth-of-type(odd) .portrait-collection-photo { order: 1; }
.portrait-collection-photo { display: block; }
.portrait-collection-photo img { aspect-ratio: 1; object-fit: contain; }
.portrait-collection h2 { max-width: 19ch; }
.portrait-collection p { max-width: 52ch; color: var(--brume); font-size: 1.0625rem; line-height: 1.65; }
.portrait-statut { display: block; margin: 0 0 14px; color: var(--brume); font-size: .8125rem; }
.portrait-gouts strong { color: var(--violet-fonce); font-size: .9375rem; font-weight: 600; }
.page-muscs .trio-editorial .attention-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.trio-editorial p { font-size: 1.125rem; color: var(--brume); }
.note-collection { max-width: 760px; }
.note-collection h2 { font-size: 1.75rem; }
.note-collection p { color: var(--brume); }
.histoire-entete { padding-block: 56px 36px; }
.histoire-entete p { max-width: 65ch; }
.histoire-engagements .grille { margin-top: 40px; gap: 48px; }
.histoire-engagements h3 { font-size: 1.5rem; margin-bottom: 12px; }
.histoire-engagements p { color: var(--brume); line-height: 1.7; }
.numero-geste { display: block; margin-bottom: 20px; color: var(--or-texte); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.histoire-contact { text-align: center; }
.histoire-contact p { max-width: 56ch; margin-inline: auto; color: var(--brume); }
.panier-corps > .paliers { margin-top: 20px; padding: 14px 0; }
.panier-qte button, .panier-plus { min-width: 44px; min-height: 44px; }
.panier-retirer { min-height: 44px; }
.panier-pied .panier-recap { margin-top: 0; }
.carte h2 a, .carte h3 a, .panier-suggestion > div > a, .source-senteur a { display: inline-flex; align-items: center; min-height: 24px; }
.galerie-vues:has(> .galerie-vue:only-child) { display: none; }

@media (max-width: 1000px) {
  .accueil-hero-grille { gap: 28px; }
  .accueil-hero h1 { font-size: 2.6rem; }
  .accueil-hero .actions { align-items: flex-start; flex-direction: column; }
  .entrees-grille { gap: 14px; }
  .entrees-grille > a { grid-template-columns: 68px 1fr; gap: 12px; }
  .entrees-grille img { width: 68px; height: 88px; }
  .entrees-grille strong { font-size: 1.1875rem; }
  .attention-grille { gap: 32px; }
  .produit-editorial .choix-offre label { padding: 9px; }
}

@media (max-width: 720px) {
  .accueil-hero { padding: 0 0 24px; }
  .accueil-hero-grille { width: 100%; grid-template-columns: 1fr; gap: 18px; }
  .accueil-hero-photo { order: -1; }
  .accueil-hero-photo img { height: auto; max-height: 300px; aspect-ratio: 3 / 2; object-position: center; }
  .accueil-hero-photo figcaption { margin: 6px 18px 0; font-size: .75rem; }
  .accueil-hero-texte { padding-inline: 18px; }
  .accueil-hero h1 { margin-bottom: 10px; font-size: 1.9rem; line-height: 1.1; }
  .accueil-hero h1 br:nth-of-type(2) { display: none; }
  .accueil-hero .surtitre { margin-bottom: 8px; }
  .accueil-hero-texte > p { margin: 0 0 14px; font-size: .9375rem; line-height: 1.5; }
  .accueil-hero .actions { gap: 3px; align-items: stretch; }
  .accueil-hero .bouton { min-height: 48px; padding: 12px 9px; font-size: .75rem; letter-spacing: .07em; }
  .accueil-hero .lien-texte { justify-content: center; min-height: 36px; }
  .hero-attention { margin-top: 5px; font-size: .8125rem; }
  .preuves-maison { padding-block: 18px; }
  .preuves-maison .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .preuves-maison span { font-size: .75rem; line-height: 1.4; }
  .preuves-maison strong { font-size: 1rem; }
  .entrees-maison { padding-block: 18px 30px; }
  .entrees-grille { grid-template-columns: 1fr; gap: 14px; }
  .entrees-grille > a { grid-template-columns: 74px 1fr; gap: 18px; min-height: 78px; }
  .entrees-grille img { width: 74px; height: 78px; }
  .entrees-grille strong { font-size: 1.375rem; }
  .entrees-grille > a > span { gap: 2px; }
  .entrees-grille > a > span > span { padding-top: 2px; }
  .attention-grille, .page-muscs .trio-editorial .attention-grille { grid-template-columns: 1fr; gap: 26px; }
  .attention-texte > p { font-size: 1rem; }
  .attention-texte h2 { font-size: 2rem; }
  .gestes-cadeau { gap: 16px; margin: 22px 0; }
  .gestes-cadeau h3 { font-size: 1.125rem; }
  .selection-muscs .grille { grid-template-columns: 1fr; gap: 26px; }
  .selection-muscs .carte { display: grid; grid-template-columns: 39% 1fr; gap: 16px; align-items: start; }
  .selection-muscs .carte-media { aspect-ratio: 4 / 5; }
  .selection-muscs .carte-media img { object-fit: cover; }
  .selection-muscs .carte-corps { padding-top: 0; }
  .selection-muscs .carte h3 { font-size: 1.3rem; }
  .selection-muscs .carte p { font-size: .875rem; }
  .selection-muscs .carte-action { display: grid; gap: 0; padding-top: 4px; }
  .selection-muscs .carte .lien-texte { justify-content: flex-start; }
  .maison-titre { margin-bottom: 24px; }
  .maison-date { font-size: 3.6rem; }
  .maison-date span { margin-top: 8px; }
  .maison-visage p { font-size: 1rem; }
  .produit-editorial { display: flex; flex-direction: column; gap: 0; }
  .produit-editorial > *, .produit-editorial .produit-info > * { width: 100%; }
  .produit-editorial .produit-info { display: contents; }
  .produit-colonne-visuelle { display: contents; }
  .produit-colonne-visuelle > .galerie { order: -2; width: 100%; }
  .page-brume .produit-colonne-visuelle .geste-parfum { order: 6; margin-top: 20px; }
  .page-brume .produit-info > .achat-reperes { order: 7; }
  .page-brume .produit-info > .details-produit { order: 8; }
  .produit-editorial .produit-info > * { order: 5; }
  .produit-editorial .produit-info > .produit-entete { order: -3; margin-bottom: 12px; }
  .produit-editorial .produit-entete h1 { margin-bottom: 6px; font-size: 1.75rem; }
  .produit-editorial .produit-entete h1 br { display: none; }
  .produit-editorial .produit-entete .surtitre { margin-bottom: 5px; font-size: .6875rem; }
  .produit-editorial .produit-entete > .prix { font-size: 1.25rem; }
  .produit-editorial > .galerie, .produit-editorial > .produit-visuel { order: -2; }
  .produit-editorial .produit-visuel { height: min(84vw, 330px); aspect-ratio: auto; }
  .galerie-editoriale .galerie-vues { gap: 6px; margin-top: 8px; padding: 3px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .galerie-editoriale .galerie-vue { flex: 0 0 auto; width: auto; min-height: 44px; padding: 7px 12px; }
  .cadeau-details .gestes-cadeau { grid-template-columns: 1fr; gap: 18px; }
  .choix-modele label img { width: 28px; height: 28px; }
  .galerie-editoriale .galerie-vue img { display: none; }
  .galerie-editoriale .galerie-legende { min-height: 0; margin: 6px 0 0; font-size: .75rem; line-height: 1.35; }
  .produit-editorial .produit-info > .produit-intro { order: 4; margin: 14px 0 4px; font-size: 1rem; }
  .produit-editorial .produit-info > .choix-offre, .produit-editorial .produit-info > .choix-modele { order: -1; margin-top: 12px; }
  .produit-editorial .produit-info > .choix-format, .produit-editorial .produit-info > .achat-quantite, .produit-editorial .produit-info > .selecteur-parfums { order: -1; margin-top: 12px; }
  .produit-editorial .choix-offre { gap: 8px; }
  .produit-editorial .choix-offre legend { margin-bottom: 6px; }
  .produit-editorial .choix-offre label { flex-wrap: nowrap; padding: 9px; gap: 6px; }
  .produit-editorial .choix-offre strong { font-size: .875rem; }
  .produit-editorial .choix-offre small { display: none; }
  .produit-editorial .choix-offre b { width: auto; padding: 0; font-size: .875rem; }
  .produit-editorial .produit-info > .achat-cta { order: 0; min-height: 48px; margin-top: 12px; }
  .produit-editorial .produit-info > .achat-note { order: 1; margin: 8px 0 0; font-size: .8125rem; }
  .portrait-parfum { margin-top: 24px; padding: 22px 18px; }
  .portrait-parfum h2 { font-size: 1.625rem; }
  .portrait-parfum .surtitre { font-size: .6875rem; letter-spacing: .08em; }
  .notes-senteur { gap: 5px 8px; font-size: .8125rem; }
  .notes-senteur span + span::before { padding-right: 8px; }
  .geste-parfum { margin-top: 22px; }
  .coffret-inclus { margin-top: 24px; }
  .portrait-collection { padding-block: 32px 40px; }
  .portrait-collection-grille { grid-template-columns: 1fr; gap: 22px; }
  .portrait-collection-photo { width: 100%; }
  .portrait-collection-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  .portrait-collection:nth-of-type(odd) .portrait-collection-photo { order: 0; }
  .portrait-collection h2 { max-width: none; font-size: 1.9rem; }
  .portrait-collection p { font-size: 1rem; }
  .portrait-collection .actions { gap: 4px; flex-direction: column; align-items: stretch; }
  .portrait-collection .actions .lien-texte { justify-content: center; }
  .ancres-senteurs { margin-top: 8px; gap: 24px; }
  .histoire-entete { padding-block: 28px 24px; }
  .histoire-entete h1 br { display: none; }
  .histoire-engagements .grille { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .histoire-engagements h3 { margin-bottom: 6px; }
  .histoire-engagements p { margin-top: 8px; }
  .numero-geste { margin-bottom: 8px; }
  .histoire-details .photo-editoriale { order: -1; }
  .panier-pied { padding-top: 14px; }
  .panier-garanties > span { display: none; }
  .panier-garanties { justify-content: center; margin-top: 3px; }
  .panier-garanties a { display: inline-flex; align-items: center; min-height: 30px; font-size: .8125rem; }
  .panier-cadeau { padding: 14px; }
  .panier-corps > .paliers { margin-top: 12px; }
  .surtitre, .lien-texte, .prix-ref, .achat-reperes dt,
  .accueil-hero .bouton, .accueil-hero-photo figcaption, .preuves-maison span,
  .produit-editorial .produit-entete .surtitre, .portrait-parfum .surtitre,
  .galerie-editoriale .galerie-legende, .palier-texte > span,
  .panier-cadeau-choix em, .panier-cadeau-mot label, .panier-cadeau-mot small { font-size: var(--t-petit); }
}

@media (max-width: 720px) and (max-height: 740px) {
  .accueil-hero-photo img { height: auto; max-height: 230px; object-fit: contain; }
  .accueil-hero-grille { gap: 14px; }
  .produit-editorial .produit-visuel { height: min(72vw, 260px); }
}

/* ---------- Fiches enrichies 15/09 : blocs de texte, composition, FAQ ---------- */
.conteneur-texte { max-width: 760px; }
.fiche-bloc { padding: 48px 0 0; }
.fiche-bloc + .fiche-bloc { padding-top: 36px; }
.fiche-bloc h2 { font-size: var(--t-h2); }
.fiche-bloc p { max-width: 65ch; color: var(--brume); }
.fiche-bloc ul { max-width: 65ch; margin: 0 0 12px; padding-left: 1.1em; color: var(--brume); }
.fiche-bloc li + li { margin-top: 6px; }
.fiche-bloc strong { color: var(--violet-fonce); font-weight: 500; }
.fiche-faq { padding: 48px 0 56px; }
.fiche-faq details p, .details-produit p, .details-produit ul { margin: 0 0 16px; max-width: 65ch; color: var(--brume); }
.details-produit .inci { font-size: .875rem; line-height: 1.6; }
@media (max-width: 720px) {
  .fiche-bloc { padding-top: 36px; }
  .fiche-faq { padding: 36px 0 44px; }
}

@media (max-width: 720px) {
  .fil-ariane > span:last-child, .fil-ariane > span:nth-last-child(2) { display: none; }
}

/* Retour Mazen 15/09 : pas de légende sous les photos */
.galerie-legende { display: none !important; }

/* ---------- Boutique : garantie des savons (15/09) ---------- */
.garantie-famille { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); align-items: center; gap: 22px 40px; margin: 10px 0 28px; padding: clamp(22px, 3vw, 34px) clamp(20px, 3.4vw, 44px); background: var(--ivoire); border: 1px solid var(--trait-or); }
.garantie-famille::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--trait-or); pointer-events: none; }
.garantie-famille:not([hidden]) { animation: garantie-entree .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes garantie-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.garantie-sceau { display: grid; place-items: center; width: 96px; aspect-ratio: 1; border-radius: 50%; background: var(--papier); border: 1px solid var(--or); box-shadow: inset 0 0 0 5px var(--papier), inset 0 0 0 6px var(--or-clair); }
.garantie-sceau img { width: 54px; height: auto; }
.garantie-texte .surtitre { color: var(--or-texte); }
.garantie-texte h2 { margin: 8px 0 10px; color: var(--violet-fonce); font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.3rem); }
.garantie-texte p { max-width: 58ch; margin: 0; color: var(--brume); font-size: .9375rem; line-height: 1.6; }
.garantie-texte .garantie-court { display: none; }
.garantie-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.garantie-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 11px; border: 1px solid var(--or-clair); border-radius: 999px; background: var(--papier); color: var(--violet-fonce); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.garantie-badge svg { width: 17px; height: 17px; flex: none; color: var(--or-texte); }
.garantie-texte .garantie-repere { margin-top: 10px; color: var(--encre); font-size: .8125rem; }
.garantie-preuves { display: grid; gap: 14px; margin: 0; padding: 0 0 0 28px; list-style: none; border-left: 1px solid var(--or-clair); }
.garantie-preuves li { display: grid; gap: 2px; }
.garantie-preuves strong { color: var(--violet-fonce); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.garantie-preuves span { color: var(--brume); font-size: .875rem; line-height: 1.4; }
.pastille-naturel { color: var(--or-texte); background: var(--ivoire); box-shadow: 0 0 0 1px var(--or-clair); }
.pastille-texte { display: inline-block; padding: 2px 8px; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; vertical-align: .1em; white-space: nowrap; }
@media (max-width: 900px) {
  .garantie-famille { grid-template-columns: auto minmax(0, 1fr); }
  .garantie-preuves { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--or-clair); }
}
@media (max-width: 600px) {
  .garantie-famille { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 12px 16px; margin: 4px 0 20px; padding: 20px 18px 18px; }
  .garantie-famille::before { inset: 4px; }
  .garantie-sceau { width: 56px; box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--or-clair); }
  .garantie-sceau img { width: 32px; }
  .garantie-texte .surtitre { font-size: .625rem; letter-spacing: .16em; }
  .garantie-texte h2 { margin: 4px 0 0; font-size: 1.45rem; }
  .garantie-texte p:not(.garantie-repere):not(.garantie-court) { display: none; }
  .garantie-texte .garantie-court { display: block; margin: 8px 0 0; font-size: .8125rem; }
  .garantie-texte .garantie-repere { margin-top: 8px; line-height: 1.7; }
  .garantie-preuves { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 12px; }
  .garantie-preuves li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .garantie-preuves span { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) { .garantie-famille:not([hidden]) { animation: none; } }
.produit-entete .pastille-fiche { display: table; margin-top: 14px; padding: 5px 10px; font-size: .6875rem; white-space: normal; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.visuellement-cache + .section, .visuellement-cache + section { padding-top: clamp(28px, 3.5vw, 48px); }

/* ---------- Retours Mazen 15/09 soir : photos pleines, panier compact, paliers, retour ---------- */
.carte-media img { object-fit: cover; }
.carte-portrait .carte-media { aspect-ratio: 1; }
.produit-visuel img, .galerie-vue img { object-fit: cover; }
.produit-editorial .produit-visuel { height: auto; aspect-ratio: 1; }
.accueil-hero-photo img { display: block; width: 100%; }
@media (max-width: 720px) {
  .accueil-hero-photo img { height: min(66vw, 340px); max-height: none; aspect-ratio: auto; object-fit: cover; }
}
@media (max-width: 720px) and (max-height: 740px) {
  .accueil-hero-photo img { height: min(58vw, 250px); object-fit: cover; }
}
.panier-offre { margin-top: 12px; padding: 12px 14px; }
.panier-offre p { margin: 0 0 2px; font-size: .8125rem; line-height: 1.35; }
.panier-offre small { margin-bottom: 10px; font-size: .75rem; line-height: 1.4; }
.panier-offre .bouton { width: auto; min-height: 38px; padding: 8px 14px; font-size: .6875rem; letter-spacing: .08em; }
.panier-offre { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.panier-offre p, .panier-offre small { flex: 1 0 100%; }
.panier-offre .lien-texte { display: inline-flex; align-items: center; min-height: 38px; font-size: .6875rem; }
.paliers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.paliers-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-right: 6px; }
.paliers-segment { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--lilas-fonce); }
.paliers-segment > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--violet); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.paliers-segment::after { content: ""; position: absolute; top: 50%; right: -6px; width: 12px; height: 12px; border: 2px solid var(--lilas-fonce); border-radius: 50%; background: var(--papier); transform: translateY(-50%); }
.paliers-segment[data-atteint="true"]::after { border-color: var(--violet); background: var(--violet); }
.palier, .palier[data-atteint="true"] { align-items: start; gap: 8px; padding: 0; border: 0; background: transparent; }
.palier-icones i { width: 30px; height: 30px; }
.palier-texte > span { font-size: .75rem; line-height: 1.3; }
.palier-texte > small { font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .paliers-segment > span { transition: none; } }
.retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: 6px; padding: 0 14px 0 10px; border: 1px solid var(--trait-or); background: var(--papier); color: var(--violet-fonce); font: inherit; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.retour svg { width: 16px; height: 16px; }
.retour:hover, .retour:focus-visible { border-color: var(--violet); color: var(--violet); }
.grille { align-items: stretch; }

/* ---------- Contact (15/09) ---------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-intro h2 { margin: 8px 0 14px; font-size: clamp(2rem, 1.45rem + 1.7vw, 3.1rem); }
.contact-intro > p { max-width: 46ch; margin: 0; color: var(--brume); font-size: 1.0625rem; line-height: 1.65; }
.contact-cartes { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.contact-cartes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--trait-or); background: var(--ivoire); }
.contact-icone { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--or-clair); border-radius: 50%; background: var(--papier); color: var(--violet); }
.contact-icone svg { width: 20px; height: 20px; }
.contact-cartes b { display: block; margin-bottom: 3px; color: var(--violet-fonce); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-cartes li > div > span { display: block; color: var(--brume); font-size: .9375rem; line-height: 1.5; }
.contact-cartes small { display: block; margin-top: 2px; color: var(--brume); font-size: .8125rem; }
.contact-courriel { color: var(--violet); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
.contact-reperes div { padding-top: 10px; border-top: 1px solid var(--or); }
.contact-reperes dt { color: var(--violet-fonce); font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-size: 1.5rem; line-height: 1.1; }
.contact-reperes dd { margin: 4px 0 0; color: var(--brume); font-size: .8125rem; line-height: 1.4; }
.contact-adresse { margin: 22px 0 0; color: var(--brume); font-size: .8125rem; }
.contact-formulaire { max-width: none; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--trait-or); background: var(--papier); box-shadow: 0 22px 44px -32px rgba(55, 39, 89, .45); }
.contact-formulaire h3 { margin: 0; font-size: 1.6rem; }
.contact-formulaire .bouton { width: 100%; }
.contact-note { margin: -8px 0 0; color: var(--brume); font-size: .8125rem; line-height: 1.5; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .contact-reperes { gap: 10px; } .contact-reperes dt { font-size: 1.2rem; } .contact-cartes li { padding: 12px; gap: 12px; } }

/* ---------- Fiche à parfums : sélecteur et offres (15/09) ---------- */
.selecteur-parfums { display: grid; gap: 18px; max-width: 520px; margin-top: 20px; }
.selecteur-parfums fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.selecteur-parfums legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; padding: 0; color: var(--violet-fonce); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.selecteur-parfums legend b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: var(--papier); font-size: .6875rem; letter-spacing: 0; }
.selecteur-parfums legend small { color: var(--brume); font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.puces-parfums { display: flex; flex-wrap: wrap; gap: 8px; }
.puce-parfum { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border: 1px solid var(--trait-or); border-radius: 999px; background: var(--papier); color: var(--encre); font-size: .875rem; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.puce-parfum input { position: absolute; opacity: 0; pointer-events: none; }
.puce-teinte { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(41, 35, 47, .15); }
.puce-teinte[data-teinte="olive"] { background: #5d5a36; }
.puce-teinte[data-teinte="lotus"] { background: #a9c7d6; }
.puce-teinte[data-teinte="monoi"] { background: #93654a; }
.puce-teinte[data-teinte="citron"] { background: #efcf55; }
.puce-teinte[data-teinte="passion"] { background: #c34a55; }
.puce-teinte[data-teinte="nigelle"] { background: #2f2c2a; }
[data-teinte="lavande"] { background: #9d8ccc; }
.puce-parfum:has(input:checked) { border-color: var(--violet); background: var(--lilas); color: var(--violet-fonce); font-weight: 600; }
.puce-parfum:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.offres-quantite { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.offre-quantite { position: relative; display: grid; grid-template-rows: 44px auto 1fr; align-items: start; gap: 4px; min-height: 132px; padding: 12px 9px; border: 1px solid var(--trait-or); background: var(--papier); text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.offre-quantite input { position: absolute; opacity: 0; pointer-events: none; }
.offre-titre { display: grid; align-content: end; justify-items: center; gap: 2px; color: var(--violet-fonce); font-size: .8125rem; font-weight: 700; }
.offre-titre em { order: -1; color: var(--or-texte); font-size: .5625rem; font-style: normal; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.offre-prix { color: var(--encre); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.offre-detail { color: var(--brume); font-size: .75rem; line-height: 1.35; }
.offre-quantite:has(input:checked) { border-color: var(--violet); background: var(--ivoire); box-shadow: inset 0 0 0 1px var(--violet); }
.offre-quantite:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.selecteur-parfums .achat-cta { width: 100%; max-width: none; margin-top: 0; }
.repartition { margin: -8px 0 0; color: var(--brume); font-size: .8125rem; }
@media (max-width: 480px) { .offres-quantite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Fiche produit : modèle et quantité (15/09) ---------- */
.choix-format { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.choix-format legend, .achat-quantite-label { margin-bottom: 8px; padding: 0; color: var(--violet-fonce); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.formats-achat { display: flex; flex-wrap: wrap; gap: 8px; }
.format-achat { position: relative; display: grid; gap: 2px; min-width: 104px; padding: 10px 14px; border: 1px solid var(--trait-or); background: var(--papier); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.format-achat input { position: absolute; opacity: 0; pointer-events: none; }
.format-achat span { color: var(--violet-fonce); font-size: .875rem; font-weight: 600; }
.format-achat small { color: var(--brume); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.format-achat:has(input:checked) { border: 2px solid var(--violet); padding: 9px 13px; background: var(--lilas); }
.format-achat:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.achat-quantite { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.achat-quantite-label { margin: 0; }
.stepper { display: inline-grid; grid-template-columns: 46px 52px 46px; align-items: center; border: 1px solid var(--trait-or); background: var(--papier); }
.stepper button { height: 46px; border: 0; background: transparent; color: var(--violet); font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background .2s ease; }
.stepper button:hover:not(:disabled), .stepper button:focus-visible { background: var(--lilas); outline: none; }
.stepper button:disabled { color: var(--lilas-fonce); cursor: not-allowed; }
.stepper output { color: var(--encre); font-size: 1.0625rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.produit-info .achat-quantite + .achat-cta { margin-top: 12px; }

/* ---------- Quantité par parfum et panier compact (15/09) ---------- */
.lignes-parfums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ligne-parfum { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 5px 5px 10px; border: 1px solid var(--trait); background: var(--papier); transition: border-color .2s ease, background .2s ease; }
.ligne-parfum .puce-teinte { flex: none; width: 20px; height: 20px; }
.ligne-parfum.est-choisi { border-color: var(--trait-or); background: var(--ivoire); box-shadow: inset 2px 0 0 var(--violet); }
.ligne-parfum-nom { flex: 1; min-width: 0; color: var(--encre); font-size: .875rem; line-height: 1.2; }
.stepper-petit { flex: none; grid-template-columns: 34px 28px 34px; }
.stepper-petit button { height: 34px; font-size: 1.125rem; }
.stepper-petit output { font-size: .9375rem; }
.bilan-selection { margin: 0; color: var(--violet-fonce); font-size: .875rem; line-height: 1.5; }
.selecteur-parfums .achat-cta:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 400px) { .lignes-parfums { grid-template-columns: minmax(0, 1fr); } }
.panier-ligne h3 { margin: 2px 0 2px; font-size: 1rem; line-height: 1.25; }
/* Compteurs − / + : pilule fine, survol rond, zone tactile élargie sans grossir le dessin */
.panier .panier-qte, .stepper { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px; border: 1px solid var(--trait-or); border-radius: 999px; background: var(--papier); }
.panier .panier-qte button, .stepper button { position: relative; display: grid; place-items: center; width: 26px; height: 26px; min-width: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--violet); font: inherit; font-size: .9375rem; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.panier .panier-qte button::after, .stepper button::after { content: ""; position: absolute; inset: -9px; }
.panier .panier-qte button:hover, .panier .panier-qte button:focus-visible, .stepper button:hover:not(:disabled), .stepper button:focus-visible { background: var(--lilas); color: var(--violet-fonce); outline: none; }
.stepper button:disabled { background: transparent; color: var(--lilas-fonce); cursor: not-allowed; }
.panier .panier-qte span, .stepper output { min-width: 26px; color: var(--encre); font-size: .875rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.achat-quantite .stepper { height: 40px; padding: 0 5px; }
.achat-quantite .stepper button { width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 1.0625rem; }
.achat-quantite .stepper output { min-width: 34px; font-size: 1rem; }
.stepper-petit { height: 32px; }

/* ---------- Confirmation par le comptoir (18/09 : remplace les logos de paiement, aucun paiement en ligne) ---------- */
.confirmation { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--brume); font-size: .8125rem; line-height: 1.45; }
.confirmation svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--violet); }
.confirmation-pied, .confirmation-panier { display: block; text-align: center; }
.confirmation-pied svg, .confirmation-panier svg { display: inline-block; margin: 0 6px 0 0; vertical-align: -3px; }
.confirmation-pied { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--trait-or); }
.confirmation-panier { margin: 10px 0 2px; font-size: .75rem; }
.produit-info > .confirmation-fiche { max-width: none; margin: 12px 0 0; font-size: .8125rem; }
.produit-editorial .produit-info > .confirmation-fiche { order: 1; }

/* ---------- Code de réduction dans le tiroir (18/09) ---------- */
.panier-code { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 4px; }
.panier-code label { color: var(--violet-fonce); font-size: var(--t-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.panier-code input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--brume); border-radius: 0; background: var(--papier); color: var(--encre); font: inherit; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.panier-code input:focus { border-color: var(--violet); outline-offset: 0; }
.panier-code input[aria-invalid="true"] { border-color: var(--brique, #8c3b2e); }
.panier-code button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--encre); background: transparent; color: var(--encre); font-family: "Figtree", "Figtree repli", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.panier-code button:hover { color: var(--papier); background: var(--encre); }
.panier-code-message { margin: 0; color: var(--violet-fonce); font-size: var(--t-petit); }
.panier-code-message:not(:empty) { margin: 0 0 6px; }
.panier-pied .panier-recap.est-secondaire { margin: 6px 0 0; }
.panier-recap.est-secondaire span, .panier-recap.est-secondaire strong { font-size: .875rem; font-weight: 500; }
.panier-code-recap { margin: 2px 0 0; }
.panier-code-recap .panier-recap { margin: 4px 0 8px; }
.panier-code-retirer { position: relative; margin-left: 6px; padding: 0; border: 0; background: none; color: var(--brume); font: inherit; font-size: .8125rem; text-decoration: underline; text-decoration-color: var(--or-clair); text-underline-offset: 3px; cursor: pointer; }
.panier-code-retirer::after { content: ""; position: absolute; inset: -13px -8px; }
.panier-code-retirer:hover { color: var(--violet-fonce); }
.recap-panier p { margin: 6px 0 0; }
.conseil-palier { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--or); background: var(--ivoire); color: var(--violet-fonce); font-size: .8125rem; line-height: 1.45; }
.produit-editorial .produit-info > .conseil-palier { order: -1; }

/* ---------- Retours 15/09 16 h : menu, sections de fiche, panier, galerie ---------- */
.liens { gap: 22px; }
.liens a { font-size: .6875rem; letter-spacing: .1em; }
.fiche-bloc { padding: 28px 0 0; }
.fiche-bloc + .fiche-bloc { padding-top: 28px; }
.fiche-bloc .conteneur-texte { max-width: 1020px; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 0 32px; align-items: start; padding-top: 0; border-top: 0; }
.fiche-bloc .conteneur-texte > :not(h2) + :not(h2) { margin-top: 10px; }
.fiche-bloc .conteneur-texte > h2 { grid-row: 1 / span 20; margin: 0; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem); line-height: 1.2; }
.fiche-bloc .conteneur-texte > :not(h2) { grid-column: 2; }
.fiche-bloc p, .fiche-bloc ul { max-width: 70ch; margin-top: 0; }
@media (max-width: 800px) { .fiche-bloc .conteneur-texte { grid-template-columns: minmax(0, 1fr); gap: 10px; } .fiche-bloc .conteneur-texte > h2, .fiche-bloc .conteneur-texte > :not(h2) { grid-column: 1; grid-row: auto; } }
.panier-cadeau { margin-top: 12px; padding: 10px 12px; }
.panier-cadeau-choix { gap: 10px; }
.panier-cadeau-choix input { width: 16px; height: 16px; margin-top: 3px; }
.panier-cadeau-choix strong { font-size: .875rem; }
.panier-cadeau-choix em { font-size: .625rem; }
.panier-cadeau-choix small { margin-top: 1px; font-size: .75rem; line-height: 1.35; }
.panier-corps > .paliers { margin-top: 12px; padding: 8px 0; }
.paliers { gap: 8px 12px; }
.paliers-segment { height: 4px; }
.paliers-segment::after { width: 9px; height: 9px; right: -4px; }
.palier-icones i { width: 24px; height: 24px; }
.palier-icones i + i { margin-left: -6px; }
.palier b { font-size: .625rem; }
.palier-texte > span, .palier-texte > small { font-size: .6875rem; line-height: 1.3; }
.galerie-cadre { position: relative; }
.galerie-fleche { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid var(--trait-or); border-radius: 50%; background: rgba(255, 253, 249, .92); color: var(--violet-fonce); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.galerie-fleche svg { width: 18px; height: 18px; }
.galerie-fleche:hover, .galerie-fleche:focus-visible { background: var(--papier); transform: scale(1.06); outline: none; box-shadow: 0 0 0 2px var(--violet); }
.galerie-fleche[data-sens="-1"] { left: 12px; }
.galerie-fleche[data-sens="1"] { right: 12px; }
.galerie-compteur { position: absolute; bottom: 12px; left: 50%; z-index: 3; padding: 3px 10px; border-radius: 999px; background: rgba(41, 35, 47, .55); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; transform: translateX(-50%); pointer-events: none; }
/* La boîte modale garde le position: fixed du navigateur : en relative, elle se cale en haut du document et le focus sur « Fermer » fait remonter la page (mesuré 20/09). Les flèches absolues s'y positionnent aussi bien. */
.zoom-produit .galerie-fleche { top: calc(50% + 24px); }
.produit-visuel, .zoom-produit img { touch-action: pan-y; }
.panier .palier-bouton { min-height: 30px; margin-top: 4px; padding: 4px 9px; font-size: .6875rem; line-height: 1.3; letter-spacing: .02em; }


/* ---------- 19/09 : panier plus compact (place aux articles), galerie sans saut ---------- */
.panier-cadeau { margin-top: 10px; padding: 8px 10px; }
.panier-cadeau-choix { gap: 8px; align-items: center; }
.panier-cadeau-choix input { margin-top: 0; }
.panier-cadeau-choix strong { font-size: .8125rem; }
.panier-cadeau-choix small { margin-top: 1px; font-size: .6875rem; line-height: 1.3; }
.panier-cadeau-mot { margin-top: 8px; }
.panier-corps > .paliers { margin-top: 10px; padding: 6px 0 0; }
.paliers { gap: 6px 10px; }
.palier { gap: 8px; padding: 4px 8px; }
.palier-icones i { width: 20px; height: 20px; }
.palier-icones i + i { margin-left: -6px; }
.palier-texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 6px; }
.palier-texte > span { font-size: .625rem; line-height: 1.3; }
.palier-texte > small { margin-top: 0; margin-left: auto; font-size: .625rem; }
.palier-bouton { flex: 1 0 100%; }
.panier-note { margin-top: 12px; font-size: .75rem; line-height: 1.45; }

/* changement de photo : un fondu court remplace le saut sec d'une image à l'autre */
@keyframes vue-apparait { from { opacity: .35; } to { opacity: 1; } }
.produit-visuel img.vue-change, .zoom-produit img.vue-change { animation: vue-apparait .22s ease both; }
@media (prefers-reduced-motion: reduce) { .produit-visuel img.vue-change, .zoom-produit img.vue-change { animation: none; } }

/* 20/09 : bloc d'offre du panier au même régime compact que le bloc cadeau et les paliers (retour Mazen sur capture) */
.panier-offre { margin-top: 10px; padding: 8px 10px 9px; gap: 4px 12px; }
.panier-offre p { margin: 0; font-size: .75rem; line-height: 1.3; }
.panier-offre small { margin: 0 0 2px; font-size: .6875rem; line-height: 1.3; }
.panier-offre .bouton { min-height: 32px; padding: 6px 12px; font-size: .625rem; letter-spacing: .06em; }
.panier-offre .lien-texte, .panier-lot .lien-texte { min-height: 32px; font-size: .625rem; }

.panier-livraison { margin: .5rem 0 .8rem; color: var(--brume); font-size: .8rem; line-height: 1.5; }

.livraison-en-ligne { margin: 0; padding: 0; border: 0; }
.livraison-en-ligne legend { margin-bottom: 1rem; font-family: Marcellus, serif; }

.panier-code-details summary { cursor: pointer; color: var(--brume); font-size: .8rem; padding: .55rem 0; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: .2em; }
.panier-code-details[open] summary { margin-bottom: .3rem; }

.boutique-titre { font-family: "Marcellus", "Marcellus repli", Georgia, serif; font-weight: 400; font-size: clamp(1.55rem, 2.3vw, 2.2rem); line-height: 1.2; margin: 0 0 .35rem; padding-top: clamp(18px, 2vw, 28px); color: var(--encre); }
@media (max-width: 620px) { .boutique-titre { font-size: 1.5rem; margin-bottom: .35rem; } }

@media (prefers-reduced-motion: reduce) {
  .bouton, .bouton:hover, .ajout, .ajout:hover { transform: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
}