/* ==========================================================================
   NUANCES CANDY — feuille de style principale
   Salon de coiffure — Villefranche-de-Rouergue
   ========================================================================== */

/* --- 1. Variables ------------------------------------------------------- */
:root{
  /* Fonds — du plus clair au plus soutenu */
  --blanc:#FFFFFF;
  --creme:#FBF8F5;        /* sections claires */
  --sable:#F3EBE3;        /* pastel beige, section principale */
  --blush:#F2E5DF;        /* pastel rosé, sections d'accent */
  --creme-2:#EDE4DA;      /* filets et bordures */

  /* Accents */
  --or:#C9A45C;           /* or vif — sur fond sombre */
  --or-fonce:#8F6E2C;     /* or lisible — sur fond clair */
  --taupe:#AA9683;

  /* Textes */
  --noir:#2A2320;
  --noir-2:#382F2A;
  --noir-3:#4A3F38;
  --gris:#6E635B;
  --gris-clair:#B9AEA4;

  /* Typographie */
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --script:"Yellowtail", cursive;

  /* Gabarit */
  --max:1280px;
  --gutter:clamp(20px, 5vw, 64px);
  --transition:.45s cubic-bezier(.22,.61,.36,1);

  /* Angles — juste assez pour casser l'effet « carré » */
  --r:3px;
  --r-pill:999px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* Deux appuis rapprochés au même endroit agrandissaient la page — geste
   involontaire dès qu'on hésite sur un lien. « manipulation » supprime ce
   zoom-là seulement : le zoom à deux doigts reste entier, et personne n'est
   privé d'agrandir un texte trop petit pour lui. */
*{touch-action:manipulation}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  color:var(--noir);
  background:var(--blanc);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Un élément masqué doit le rester, même si sa classe impose un display. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;line-height:1.15}

/* --- 3. Utilitaires ----------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-lg{max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,130px)}
.section--profond{background:var(--noir);color:var(--creme)}
.section--sable{background:var(--sable)}
.section--blush{background:var(--blush)}
.section--creme{background:var(--creme)}
.center{text-align:center}
.mt-0{margin-top:0}

.surtitre{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--or-fonce);
  margin:0 0 18px;
}
.section--profond .surtitre{color:var(--or)}

.titre{
  font-size:clamp(30px,4.4vw,54px);
  letter-spacing:.02em;
}
.titre--filet{position:relative;padding-bottom:26px}
.titre--filet::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:1px;background:var(--or);
}
.center .titre--filet::after{left:50%;transform:translateX(-50%)}

.chapo{
  font-size:17px;
  color:var(--gris);
  max-width:62ch;
  margin:22px 0 0;
}
.section--profond .chapo{color:var(--gris-clair)}
.center .chapo{margin-inline:auto}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 36px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--noir);
  background:var(--noir);color:var(--creme);
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.btn:hover{background:var(--or);border-color:var(--or);color:var(--noir)}
.btn--or{background:var(--or);border-color:var(--or);color:var(--noir)}
.btn--or:hover{background:transparent;color:var(--or)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:var(--or);border-color:var(--or);color:var(--noir)}
.btn--sm{padding:11px 26px;font-size:10.5px}
/* Bouton secondaire sur fond clair : contour discret, or au survol. */
.btn--contour{background:transparent;border-color:var(--creme-2);color:var(--noir)}
.btn--contour:hover{background:var(--noir);border-color:var(--noir);color:var(--creme)}

.lien-or{
  display:inline-block;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or-fonce);
  border-bottom:1px solid currentColor;padding-bottom:5px;
  transition:color var(--transition),letter-spacing var(--transition);
}
.section--profond .lien-or{color:var(--or)}
.lien-or:hover{letter-spacing:.3em}

/* Lien d'évitement (accessibilité clavier) */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--noir);color:var(--or);
  padding:14px 24px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.evitement:focus{left:0}

/* Focus visible au clavier */
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.section--profond :focus-visible{outline-color:var(--or-clair)}

/* --- 4. Barre d'annonce ------------------------------------------------- */
.annonce{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0 18px;
  background:var(--sable);color:var(--noir);
  border-bottom:1px solid rgba(201,164,92,.35);
  padding:10px 20px;
}
.annonce__item{
  font-size:10.5px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;
}
.annonce__tel{
  color:var(--or-fonce);
  transition:color var(--transition);
}
.annonce__tel:hover{color:var(--noir)}
.annonce__sep{
  width:3px;height:3px;border-radius:50%;
  background:var(--taupe);opacity:.7;flex-shrink:0;
}
@media (max-width:760px){
  .annonce{gap:0 12px;padding:6px 16px}
  .annonce__item{font-size:9.5px;letter-spacing:.2em}
  .annonce__adresse,.annonce__sep:last-of-type{display:none}
}

/* --- 5. En-tête --------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--creme-2);
  transition:box-shadow var(--transition);
}
.entete.is-scrolled{box-shadow:0 10px 46px rgba(42,35,32,.06)}

/* Barre rétractable : elle glisse hors de l'écran quand on descend et revient
   dès qu'on remonte. La transition ne porte que sur « transform », la seule
   propriété que le navigateur peut animer sans recalculer la page. */
.entete{transition:box-shadow var(--transition),transform .32s cubic-bezier(.4,0,.2,1)}
.entete.est-retractee{transform:translateY(-100%)}

/* Les ancres (#equipe, #galerie…) doivent s'arrêter sous la barre. */
html{scroll-padding-top:110px}

@media (prefers-reduced-motion:reduce){
  .entete{transition:none}
}
.entete__inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:96px;
}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:52px;width:auto}
.logo__txt{display:none}

.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px)}
.nav a{
  position:relative;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding-block:8px;color:var(--noir);
  transition:color var(--transition);
}
.nav a:hover{color:var(--or-fonce)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--or);transition:width var(--transition);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--or-fonce)}

.entete__actions{display:flex;align-items:center;gap:16px}
.tel-entete{
  display:none;align-items:center;gap:8px;
  font-size:13.5px;letter-spacing:.06em;color:var(--noir);white-space:nowrap;
}
.tel-entete svg{width:15px;height:15px;color:var(--or-fonce)}
.tel-entete strong{font-weight:400}
.entete__rdv{display:none}
@media (min-width:1180px){ .entete__rdv{display:inline-flex} }
@media (max-width:1179px){ .tel-entete{display:none !important} }
@media (min-width:901px) and (max-width:1179px){ .tel-entete{display:flex !important} }

/* Burger */
.burger{display:none;width:44px;height:44px;position:relative;flex-shrink:0}
.burger span{
  position:absolute;left:11px;width:22px;height:1px;background:var(--noir);
  transition:transform var(--transition),opacity .2s;
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:27px}
body.menu-ouvert .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-ouvert .burger span:nth-child(2){opacity:0}
body.menu-ouvert .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* --- 6. Hero ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:clamp(520px,86vh,860px);
  display:grid;place-items:center;
  color:var(--creme);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,rgba(24,21,19,.66) 0%,rgba(24,21,19,.22) 100%),
    linear-gradient(180deg,rgba(24,21,19,.62) 0%,rgba(24,21,19,.42) 42%,rgba(24,21,19,.82) 100%);
}
.hero__inner{position:relative;z-index:2;text-align:center;padding:80px var(--gutter)}
.hero__logo{width:min(430px,74vw);margin:0 auto 30px;filter:drop-shadow(0 4px 26px rgba(0,0,0,.5))}
.hero__titre{
  font-size:clamp(28px,4vw,46px);
  letter-spacing:.04em;
}
.hero__sous{
  margin:20px auto 38px;max-width:52ch;
  font-size:16px;color:rgba(250,247,243,.86);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(250,247,243,.7);
}
.hero__scroll::after{
  content:"";display:block;width:1px;height:34px;margin:10px auto 0;
  background:linear-gradient(var(--or),transparent);
}

/* Bandeau titre (pages intérieures) */
.banniere{
  position:relative;min-height:clamp(280px,42vh,420px);
  display:grid;place-items:center;color:var(--creme);text-align:center;overflow:hidden;
}
.banniere__media{position:absolute;inset:0}
.banniere__media img{width:100%;height:100%;object-fit:cover}
.banniere__media::after{content:"";position:absolute;inset:0;background:rgba(35,31,29,.6)}
.banniere__inner{position:relative;z-index:2;padding:60px var(--gutter)}
.banniere h1{font-size:clamp(34px,5.5vw,62px);letter-spacing:.03em}
.banniere p{margin:14px auto 0;max-width:56ch;color:rgba(250,247,243,.82);font-size:16px}

/* Fil d'ariane */
.ariane{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);padding-block:22px}
.ariane a:hover{color:var(--or-fonce)}
.ariane span{color:var(--or-fonce)}

/* --- 7. Arguments (bandeau 3 colonnes) ---------------------------------- */
.atouts{border-bottom:1px solid var(--creme-2);background:var(--creme)}
.atouts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.atout{padding:38px 28px;text-align:center;border-right:1px solid var(--creme-2)}
.atout:last-child{border-right:0}
.atout__ico{color:var(--or-fonce);margin:0 auto 12px;width:26px;height:26px}
.atout h3{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px}
.atout p{margin:0;font-size:14px;color:var(--gris)}

/* --- 8. Blocs image + texte --------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,90px)}
.duo--inverse .duo__media{order:2}

/* Texte long (« Mon histoire ») : le portrait suit la lecture */
.duo--histoire{align-items:start;grid-template-columns:.85fr 1.15fr}
.duo--histoire .duo__media{position:sticky;top:132px}
.duo--histoire .duo__txt .chapo{max-width:none}
.duo__media{position:relative}
.duo__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__media--cadre::after{
  content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--or);z-index:-1;
}
.duo__txt p{color:var(--gris)}
.section--profond .duo__txt p{color:var(--gris-clair)}
.duo__txt .btn,.duo__txt .lien-or{margin-top:16px}

/* Signature manuscrite */
.signature{
  font-family:var(--script);font-size:34px;color:var(--or-fonce);
  line-height:1;margin-top:26px;
}
.section--profond .signature{color:var(--or)}

/* --- 9. Prestations ----------------------------------------------------- */
.filtres{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:48px;
}
.filtre{
  padding:10px 22px;border-radius:var(--r-pill);border:1px solid var(--creme-2);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  transition:all var(--transition);
}
.filtre:hover{border-color:var(--or);color:var(--noir)}
.filtre.is-actif{background:var(--noir);border-color:var(--noir);color:var(--creme)}

.cartes-presta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,3vw,42px)}
.carte-presta{
  border:1px solid var(--creme-2);padding:clamp(28px,3vw,40px);
  border-radius:var(--r);background:var(--blanc);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.carte-presta:hover{border-color:var(--or);transform:translateY(-4px);box-shadow:0 22px 60px rgba(35,31,29,.07)}
.carte-presta__num{
  font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--or);margin-bottom:14px;
}
.carte-presta h3{font-size:26px;margin-bottom:8px}
.carte-presta__note{font-size:13px;color:var(--gris);margin:0 0 22px;font-style:italic}

.tarifs{margin:0}
.tarif{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;border-bottom:1px dotted var(--creme-2);
}
.tarif:last-child{border-bottom:0}
.tarif__nom{flex:0 1 auto;max-width:74%;font-size:15px;color:var(--noir)}
.tarif__nom small{display:block;font-size:12.5px;color:var(--gris);font-style:italic}
.tarif__pointilles{flex:1 1 auto;border-bottom:1px dotted var(--gris-clair);transform:translateY(-4px);min-width:14px}
.tarif__prix{
  font-family:var(--serif);font-size:19px;color:var(--or-fonce);white-space:nowrap;letter-spacing:.02em;
}
.section--profond .tarif__prix{color:var(--or)}
.section--profond .tarif__nom{color:var(--creme)}
.section--profond .tarif{border-bottom-color:rgba(201,164,92,.18)}
.section--profond .carte-presta{background:var(--noir-2);border-color:rgba(201,164,92,.2)}

.encart{
  border:1px solid var(--taupe);border-radius:var(--r);
  padding:clamp(26px,3vw,40px);margin-top:44px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.encart p{margin:0;max-width:56ch;color:var(--gris)}
.section--profond .encart p{color:var(--gris-clair)}
.encart strong{font-weight:400;color:var(--or-fonce)}

/* --- 10. Boutique ------------------------------------------------------- */
.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:clamp(20px,2.6vw,38px)}
.produit{position:relative;display:flex;flex-direction:column}
.produit__media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--creme);aspect-ratio:3/4}
.produit__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.produit:hover .produit__media img{transform:scale(1.06)}
.produit__badge{
  position:absolute;top:12px;left:12px;z-index:2;border-radius:var(--r-pill);
  background:var(--or);color:var(--noir);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:5px 11px;
}
.produit__lien{display:block;color:inherit}
.produit__lien .produit__media{display:block}
.produit__marque{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-fonce);margin:18px 0 6px}
.produit h3{font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.45;margin:0 0 4px;transition:color var(--transition)}
.produit__lien:hover h3{color:var(--or-fonce)}
.produit__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.produit__actions .btn{padding:11px 22px;font-size:10px;letter-spacing:.16em}
.produit__fiche{
  align-self:center;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or-fonce);
  border-bottom:1px solid var(--creme-2);padding-bottom:3px;transition:border-color var(--transition);
}
.produit__fiche:hover{border-color:var(--or)}
.produit__desc{font-size:13px;color:var(--gris);margin:0 0 10px;flex:1}
.produit__prix{font-family:var(--serif);font-size:21px;color:var(--noir);margin-bottom:12px}
.produit__prix small{font-size:12px;color:var(--gris);font-family:var(--sans)}

/* Carte « produit à venir » */
.produit--vide .produit__media{background:var(--creme-2)}
.produit--vide .produit__marque{color:var(--gris-clair)}
.produit--vide h3,.produit--vide .produit__prix{color:var(--gris-clair)}
.produit--vide .produit__desc{font-style:italic}
.btn[disabled]{
  background:transparent;border-color:var(--creme-2);color:var(--gris-clair);
  cursor:default;pointer-events:none;
}

/* --- Catalogue boutique ------------------------------------------------- */
.catalogue{
  display:grid;grid-template-columns:246px minmax(0,1fr);
  gap:clamp(26px,3vw,58px);align-items:start;
}
.catalogue.sans-filtres{grid-template-columns:minmax(0,1fr)}
.catalogue.sans-filtres .filtres-col{display:none}

/* Bouton d'ouverture/fermeture */
.filtres-bascule{
  grid-column:1 / -1;justify-self:start;
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 24px;border-radius:var(--r-pill);
  border:1px solid var(--creme-2);background:var(--blanc);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--noir);
  transition:border-color var(--transition),color var(--transition);
  margin-bottom:6px;
}
.filtres-bascule:hover{border-color:var(--or);color:var(--or-fonce)}
.filtres-bascule__ico{display:grid;gap:3px;width:14px}
.filtres-bascule__ico span{height:1px;background:currentColor;display:block}
.filtres-bascule__ico span:nth-child(1){width:14px}
.filtres-bascule__ico span:nth-child(2){width:10px}
.filtres-bascule__ico span:nth-child(3){width:6px}

/* Colonne de filtres */
.filtres-col{
  position:sticky;top:132px;
  background:var(--blanc);border:1px solid var(--creme-2);border-radius:var(--r);
  padding:26px 24px;
}
.filtres-groupe + .filtres-groupe{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--creme-2);
}
.filtres-groupe h3{
  font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or-fonce);margin:0 0 14px;
}
.filtres-groupe li + li{margin-top:2px}
.filtre-item{
  display:block;width:100%;text-align:left;
  padding:8px 12px;border-radius:var(--r);
  font-size:14px;color:var(--gris);background:none;border:0;
  transition:background var(--transition),color var(--transition);
}
.filtre-item:hover{background:var(--creme);color:var(--noir)}
.filtre-item.is-actif{background:var(--sable);color:var(--noir)}
.filtre-item.is-actif::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--or);margin-right:9px;vertical-align:middle;
}
.filtres-note{
  margin:26px 0 0;padding-top:22px;border-top:1px solid var(--creme-2);
  font-size:12.5px;line-height:1.65;color:var(--taupe);
}

/* Familles de produits */
.famille + .famille{margin-top:clamp(46px,5vw,80px)}
.famille[hidden]{display:none}
.famille__tete{margin-bottom:clamp(22px,2.4vw,34px)}
.famille__ligne{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--or-fonce);margin:0 0 8px;
}
.famille__tete h2{
  font-size:clamp(26px,3vw,38px);margin:0 0 10px;
  padding-bottom:16px;position:relative;
}
.famille__tete h2::after{
  content:"";position:absolute;left:0;bottom:0;width:48px;height:1px;background:var(--or);
}
.famille__accroche{margin:0;font-size:15px;color:var(--gris)}
.catalogue__vide{
  padding:60px 20px;text-align:center;color:var(--gris);font-size:15px;
}

.produit__ref{
  display:block;font-size:13px;color:var(--gris);margin:0 0 14px;
  font-style:italic;
}
.produit__vol{
  display:inline-block;margin-left:6px;font-style:normal;
  font-size:11px;letter-spacing:.12em;color:var(--taupe);
}
.produit[hidden]{display:none}

/* Photo officielle du produit : packshot carré sur fond blanc.
   On l'affiche entière, sans recadrage, avec un peu d'air autour. */
.catalogue .produit__media{aspect-ratio:1/1;background:var(--blanc)}
.produit__media img.photo-produit{
  object-fit:contain;padding:7%;background:var(--blanc);
}
.produit:hover .produit__media img.photo-produit{transform:scale(1.04)}

@media (max-width:900px){
  .catalogue{grid-template-columns:minmax(0,1fr)}
  .filtres-col{position:static;top:auto}
}

/* Panier */

.panier-btn{position:relative;display:grid;place-items:center;width:42px;height:42px}
.panier-btn svg{width:21px;height:21px}
.panier-compte{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;
  background:var(--or);color:var(--noir);font-size:10px;display:grid;place-items:center;padding:0 4px;
}
.panier-compte[hidden]{display:none}
.tiroir{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:1200;
  background:var(--blanc);box-shadow:-20px 0 60px rgba(35,31,29,.16);
  transform:translateX(100%);transition:transform var(--transition);
  display:flex;flex-direction:column;
}
.tiroir.is-ouvert{transform:none}
.tiroir__tete{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--creme-2)}
.tiroir__tete h2{font-size:22px}
.tiroir__corps{flex:1;overflow-y:auto;padding:20px 26px}
.tiroir__pied{padding:22px 26px;border-top:1px solid var(--creme-2);background:var(--creme)}
.tiroir__vide{color:var(--gris);font-size:14px;text-align:center;padding:40px 0}
.ligne-panier{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--creme-2)}
.ligne-panier img{width:64px;height:74px;object-fit:contain;flex-shrink:0;background:var(--blanc);border:1px solid var(--creme-2);border-radius:2px;padding:5px}
.ligne-panier__nom{font-size:14px;margin:0 0 4px}
.ligne-panier__prix{font-family:var(--serif);font-size:16px;color:var(--or-fonce)}
.qte{display:inline-flex;align-items:center;border:1px solid var(--creme-2);margin-top:8px}
.qte button{width:26px;height:26px;line-height:1;color:var(--gris)}
.qte button:hover{color:var(--noir)}
.qte span{min-width:26px;text-align:center;font-size:13px}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.total[hidden]{display:none}
/* Le panier est rangé en deux catégories : réservations et commandes. */
.panier-groupe{margin-bottom:26px}
.panier-groupe:last-child{margin-bottom:0}
.panier-groupe h3{
  font-family:var(--sans);font-size:10.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--or-fonce);
  padding-bottom:10px;border-bottom:1px solid var(--or);margin-bottom:4px;
}
.panier-groupe h3 span{
  display:block;margin-top:5px;font-size:10px;letter-spacing:.12em;
  text-transform:none;color:var(--taupe);
}
.ligne-panier img{border-radius:2px;background:var(--creme)}

.total strong{font-family:var(--serif);font-size:26px;font-weight:400}
.voile{
  position:fixed;inset:0;z-index:1100;background:rgba(35,31,29,.42);
  opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition);
}
.voile.is-visible{opacity:1;visibility:visible}



/* --- 11. Équipe --------------------------------------------------------- */
.equipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:clamp(20px,3vw,40px)}
.equipe--3{max-width:960px;margin-inline:auto}
.equipe-bloc{max-width:960px;margin-inline:auto}

.membre{
  /* Colonne explicite, et non « display:block » : le navigateur centre
     verticalement le contenu d'un <button>. Comme les trois cases de la
     grille ont la même hauteur, celle dont le rôle tient sur deux lignes
     collait en haut pendant que les deux autres descendaient de quelques
     pixels — les photos n'étaient plus alignées sur téléphone. */
  display:flex;flex-direction:column;justify-content:flex-start;
  width:100%;text-align:center;padding:0;
  background:none;border:0;cursor:pointer;font:inherit;
}
.membre__media{
  display:block;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/4;background:var(--creme-2);
}
.membre__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter var(--transition);
}
.membre__media::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  border:1px solid transparent;
  box-shadow:inset 0 -60px 60px -40px rgba(42,35,32,.28);
  transition:border-color var(--transition),opacity var(--transition);
}
.membre:hover .membre__media img{transform:scale(1.05)}
.membre__nom{
  display:block;font-family:var(--serif);font-size:24px;line-height:1.2;
  margin:18px 0 3px;color:var(--noir);
  transition:color var(--transition);
}
.membre__role{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);transition:color var(--transition);
}

/* état sélectionné */
.membre.is-actif .membre__media::after{border-color:var(--or)}
.membre.is-actif .membre__nom{color:var(--or-fonce)}
.membre.is-actif .membre__role{color:var(--or-fonce)}
/* le grisé ne concerne que les onglets de la page « Le salon » */
[role="tablist"] .membre:not(.is-actif) .membre__media img{filter:saturate(.75) brightness(1.02)}
[role="tablist"] .membre:not(.is-actif):hover .membre__media img{filter:none}
a.membre:hover .membre__nom{color:var(--or-fonce)}

/* fiche affichée sous les portraits */
.fiches{position:relative;margin-top:clamp(28px,3.5vw,44px)}
.fiche{
  background:var(--blanc);border:1px solid var(--creme-2);border-radius:var(--r);
  padding:clamp(28px,3.4vw,46px);
  animation:fiche-apparait .5s cubic-bezier(.22,.61,.36,1);
}
.fiche[hidden]{display:none}
.fiche__nom{
  font-family:var(--serif);font-size:28px;line-height:1.2;
  margin:0 0 22px;padding-bottom:16px;
  border-bottom:1px solid var(--creme-2);
  color:var(--noir);
}
.fiche__nom span{
  display:inline-block;margin-left:12px;vertical-align:middle;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or-fonce);
}
.fiche p{margin:0 0 14px;font-size:15.5px;color:var(--gris);line-height:1.8}
.fiche p:last-child{margin-bottom:0}
.fiche__note{font-style:italic;color:var(--taupe) !important}
.fiche__signature{
  margin-top:22px !important;padding-top:20px;
  border-top:1px solid var(--creme-2);
  font-family:var(--serif) !important;font-size:20px !important;
  font-style:italic;color:var(--or-fonce) !important;line-height:1.5 !important;
}
@keyframes fiche-apparait{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (max-width:560px){
  .equipe--3{grid-template-columns:repeat(3,1fr);gap:10px}
  .membre__nom{font-size:17px;margin-top:12px}
  .membre__role{font-size:8.5px;letter-spacing:.12em}
}

/* --- 12. Galerie -------------------------------------------------------- */
.galerie{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:6px;
}
.galerie a{position:relative;overflow:hidden;aspect-ratio:1;display:block;background:var(--creme)}
.galerie a img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.galerie a:hover img{transform:scale(1.07)}
.galerie a.wide{grid-column:span 2;aspect-ratio:2/1}
.lightbox{
  position:fixed;inset:0;z-index:1500;background:rgba(20,17,16,.94);
  display:grid;place-items:center;padding:5vw;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.lightbox.is-ouvert{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain}
.lightbox__fermer{position:absolute;top:22px;right:26px;color:var(--creme);font-size:30px;line-height:1}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--creme);font-size:40px;padding:20px;opacity:.7}
.lightbox__nav:hover{opacity:1}
.lightbox__prev{left:8px}
.lightbox__next{right:8px}

/* --- 13. Avis ----------------------------------------------------------- */
.note-google{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:20px 0 0;font-size:14px;letter-spacing:.06em;color:var(--gris);
}
.note-google .etoiles{color:var(--or-fonce);letter-spacing:.18em;font-size:15px}
.note-google strong{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--noir)}

.avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(24px,3vw,44px)}
.avis blockquote{
  margin:0;padding:34px 30px;border-radius:var(--r);
  border:1px solid var(--creme-2);background:var(--blanc);
}
.section--profond .avis blockquote{
  border-color:rgba(201,164,92,.28);background:var(--noir-2);
}
.avis .etoiles{color:var(--or-fonce);letter-spacing:.2em;font-size:13px;margin-bottom:14px}
.section--profond .avis .etoiles{color:var(--or)}
.avis p{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--noir);margin:0 0 18px;font-style:italic}
.section--profond .avis p{color:var(--creme)}
.avis cite{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}

/* --- 14. Carte cadeau --------------------------------------------------- */
.cadeau{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(32px,6vw,80px);
}
.cadeau__img{
  border:1px solid rgba(201,164,92,.35);padding:14px;background:var(--noir-2);
  border-radius:var(--r);max-width:520px;
}
.cadeau__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}

/* --- 15. Infos pratiques ------------------------------------------------ */
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:clamp(28px,4vw,56px)}
.info h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-fonce);margin:0 0 14px}
.section--profond .info h3{color:var(--or)}
.info p,.info li{margin:0 0 4px;font-size:15px;color:var(--gris)}
.section--profond .info p,.section--profond .info li{color:var(--gris-clair)}
.info a:hover{color:var(--or-fonce)}
.horaires li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dotted rgba(111,104,98,.25);max-width:300px}
.horaires li span:last-child{white-space:nowrap}
/* Plan d'accès — chargé seulement si le visiteur le demande, pour
   n'imposer aucun cookie Google. */
.carte-plan{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  background:var(--creme-2);
}
.carte-plan--large{aspect-ratio:21/9}
.carte-plan iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.carte-plan__voile{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  padding:28px;text-align:center;
  background:
    linear-gradient(rgba(241,235,227,.86),rgba(241,235,227,.86)),
    repeating-linear-gradient(45deg,#EDE6DC 0 12px,#F1EBE3 12px 24px);
}
.carte-plan__txt{margin:0;max-width:44ch;font-size:14px;color:var(--gris)}
.carte-plan.is-chargee .carte-plan__voile{display:none}

/* --- 16. Formulaire ----------------------------------------------------- */
.form{display:grid;gap:20px}
.form__ligne{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:grid;gap:8px}
.champ label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:15px;color:var(--noir);
  padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--creme-2);background:var(--blanc);
  transition:border-color var(--transition);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;border-color:var(--or)}
.champ textarea{min-height:150px;resize:vertical}
.form__note{font-size:12.5px;color:var(--gris);margin:0}

/* Boutons de contact rapides */
.contacts-rapides{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.contact-rapide{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:var(--r-pill);border:1px solid var(--creme-2);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--noir);
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.contact-rapide svg{width:16px;height:16px;color:var(--or-fonce);flex-shrink:0}
.contact-rapide:hover{border-color:var(--or);background:var(--or);color:var(--noir)}
.contact-rapide:hover svg{color:var(--noir)}

/* --- 17. Pied de page --------------------------------------------------- */
.pied{background:var(--noir);color:var(--gris-clair);padding-block:clamp(56px,7vw,90px) 0}
.pied__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
.pied h3{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--or);margin:0 0 18px}
.pied a:hover{color:var(--or)}
.pied li{margin-bottom:9px;font-size:14.5px}
.pied p{font-size:14.5px;margin:0 0 8px}
.pied__logo{width:210px;margin-bottom:20px}
.reseaux{display:flex;gap:14px;margin-top:18px}
.reseaux a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(201,164,92,.4);color:var(--or);
  transition:background var(--transition),color var(--transition);
}
.reseaux a:hover{background:var(--or);color:var(--noir)}
.reseaux svg{width:17px;height:17px}
.pied__bas{
  margin-top:clamp(40px,5vw,64px);padding-block:24px;
  border-top:1px solid rgba(201,164,92,.18);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:12px;color:var(--gris);
}
.pied__bas ul{display:flex;flex-wrap:wrap;gap:20px}

/* Barre mobile fixe */
.barre-mobile{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:var(--noir);border-top:1px solid rgba(201,164,92,.25);
}
.barre-mobile ul{display:grid;grid-template-columns:repeat(3,1fr)}
.barre-mobile a{border-radius:0}
.barre-mobile a{
  display:grid;place-items:center;gap:4px;padding:11px 4px;
  color:var(--creme);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
}
.barre-mobile svg{width:17px;height:17px;color:var(--or)}

/* --- 18. Animations ----------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* --- 19. Responsive ----------------------------------------------------- */
@media (max-width:1080px){
  .pied__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .entete{backdrop-filter:none;background:var(--blanc)}

  /* Sur téléphone, les cinq liens s'affichent directement dans la barre,
     sur une deuxième ligne sous le logo : plus de bouton à trois traits, plus
     de menu plein écran. On voit où l'on peut aller sans avoir à le demander,
     et la barre reste plus basse qu'avant (96 px au lieu de 133). */
  .entete__inner{
    height:auto;flex-wrap:wrap;gap:0;
    padding-block:8px 6px;
  }
  .logo{order:1}
  .entete__actions{order:2;margin-left:auto;gap:8px}
  /* C'est le bouton panier, et non le logo, qui fixait la hauteur de la
     première ligne : 42 px pour une icône de 21. On resserre sans descendre
     sous la taille confortable au doigt. */
  .panier-btn{width:36px;height:36px}
  .panier-btn svg{width:20px;height:20px}
  .logo img{height:30px}

  .nav{
    order:3;flex-basis:100%;
    justify-content:center;flex-wrap:wrap;
    gap:2px 12px;margin-top:3px;
  }
  .nav a{font-size:8.5px;letter-spacing:.1em;padding-block:6px;white-space:nowrap}
  .nav::after{content:none}

  .burger{display:none !important}
  body.menu-ouvert{overflow:auto}
  .tel-entete{display:none}
  .duo,.duo--histoire{grid-template-columns:1fr}
  .duo--histoire .duo__media{position:static;top:auto}
  .duo--inverse .duo__media{order:0}
  .duo__media img{aspect-ratio:4/3}
  .cadeau{grid-template-columns:1fr}
  .atouts__grid{grid-template-columns:1fr}
  .atout{border-right:0;border-bottom:1px solid var(--creme-2);padding:26px}
  .atout:last-child{border-bottom:0}
  .barre-mobile{display:block}
  body{padding-bottom:60px}
  .pied{padding-bottom:60px}
  .form__ligne{grid-template-columns:1fr}
  .galerie a.wide{grid-column:span 1;aspect-ratio:1}
}

@media (max-width:640px){
  .pied__grid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .encart{flex-direction:column;align-items:flex-start}
  .galerie{grid-template-columns:repeat(2,1fr)}
}

/* --- 20. Impression ----------------------------------------------------- */
@media print{
  .entete,.pied,.barre-mobile,.annonce,.hero__cta,.btn{display:none !important}
  body{color:#000;background:#fff}
}

/* --- 15. La fiche produit ---------------------------------------------- */

/* Fil d'Ariane */
.fil{padding:22px 0 0;font-size:11.5px;letter-spacing:.1em;color:var(--taupe)}
.fil a{color:var(--taupe);transition:color var(--transition)}
.fil a:hover{color:var(--or-fonce)}
.fil span{margin:0 9px;color:var(--creme-2)}
.fil em{font-style:normal;color:var(--noir)}
.section--haut{padding-block:clamp(30px,4vw,58px) clamp(56px,7vw,96px)}

/* En-tête : la photo à gauche, tout le reste à droite */
.produit-hero{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,84px);align-items:start;
}
.produit-hero__media{
  background:var(--blanc);border:1px solid var(--creme-2);border-radius:var(--r);
  aspect-ratio:1/1;display:grid;place-items:center;padding:8%;position:sticky;top:132px;
}
.produit-hero__media img{width:100%;height:100%;object-fit:contain}
.produit-hero h1{
  font-family:var(--serif);font-weight:300;line-height:1.08;
  font-size:clamp(34px,4.6vw,54px);margin:6px 0 6px;
}
.produit-hero__ref{font-style:italic;color:var(--gris);font-size:15px;margin-bottom:16px}
.produit-hero__meta{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 24px;
}
.produit-hero__meta li{
  border:1px solid var(--creme-2);border-radius:var(--r-pill);
  padding:6px 15px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.produit-hero .chapo{margin-bottom:26px}
.produit-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.produit-hero__note{font-size:12.5px;line-height:1.7;color:var(--taupe);max-width:52ch}

/* Les pastilles (végan, sans sulfates, protection 230 °C…) */
.pastilles{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.pastille{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--creme);border:1px solid var(--creme-2);border-radius:var(--r-pill);
  padding:8px 15px 8px 12px;font-size:11px;letter-spacing:.06em;color:var(--noir);
  transition:border-color var(--transition),background var(--transition);cursor:help;
}
.pastille:hover{border-color:var(--or);background:var(--blanc)}
.pastille svg{width:17px;height:17px;flex-shrink:0;color:var(--or-fonce)}

/* Deux colonnes de détail */
.produit-detail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(34px,5vw,80px);align-items:start;
}
.produit-detail .titre{font-size:clamp(24px,2.6vw,32px);margin-bottom:22px}

.benefices{list-style:none;padding:0;margin:0}
.benefices li{
  position:relative;padding-left:28px;margin-bottom:13px;
  font-size:14.5px;line-height:1.65;color:var(--gris);
}
.benefices li::before{
  content:"";position:absolute;left:2px;top:9px;width:11px;height:6px;
  border-left:1px solid var(--or);border-bottom:1px solid var(--or);
  transform:rotate(-45deg);
}

.ingredients{list-style:none;padding:0;margin:0}
.ingredients li{
  padding:14px 0;border-bottom:1px solid var(--creme-2);
  display:grid;gap:3px;
}
.ingredients li:last-child{border-bottom:0}
.ingredients strong{font-weight:400;font-size:14.5px;color:var(--noir)}
.ingredients span{font-size:13.5px;line-height:1.6;color:var(--gris)}

.etapes-produit{counter-reset:et;list-style:none;padding:0;margin:0}
.etapes-produit li{
  counter-increment:et;position:relative;padding-left:52px;margin-bottom:18px;
  font-size:14.5px;line-height:1.7;color:var(--gris);
}
.etapes-produit li::before{
  content:counter(et,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--serif);font-size:17px;color:var(--or-fonce);
}
.etapes-produit li::after{
  content:"";position:absolute;left:34px;top:12px;width:9px;height:1px;background:var(--or);
}

.tech{margin:0}
.tech div{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;
  padding:12px 0;border-bottom:1px solid var(--creme-2);
}
.tech div:last-child{border-bottom:0}
.tech dt{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);
  padding-top:3px;
}
.tech dd{margin:0;font-size:14px;line-height:1.6;color:var(--noir)}

/* À associer avec */
.assocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:clamp(18px,2.4vw,32px)}
.assoc{
  display:block;text-align:center;padding:22px 18px 26px;
  border:1px solid var(--creme-2);border-radius:var(--r);background:var(--blanc);
  transition:border-color var(--transition),transform var(--transition);
}
.assoc:hover{border-color:var(--or);transform:translateY(-3px)}
.assoc__media{display:block;aspect-ratio:1/1;padding:6%;margin-bottom:14px}
.assoc__media img{width:100%;height:100%;object-fit:contain}
.assoc__nom{display:block;font-size:14.5px;color:var(--noir);margin-bottom:4px}
.assoc__ref{display:block;font-size:12px;font-style:italic;color:var(--taupe)}

@media (max-width:820px){
  .produit-hero{grid-template-columns:minmax(0,1fr)}
  .produit-hero__media{position:static;max-width:420px;margin-inline:auto}
  .tech div{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* Les mots « Réserver » et « Commander » ressortent dans les explications. */
.produit-hero__note strong,.filtres-note strong{font-weight:400;color:var(--noir)}
/* L'argument qui fait ajouter un deuxième produit au panier : il mérite
   de ressortir du reste de la note. */
.produit-hero__franco{display:inline-block;margin-top:5px;color:var(--or-fonce)}

/* --- 16. Tunnel de commande -------------------------------------------- */
.produit__prix--attente{color:var(--taupe);font-family:var(--sans);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase}
.produit-hero__prix{
  font-family:var(--serif);font-size:34px;line-height:1;color:var(--noir);
  margin:28px 0 0;
}
.produit-hero__prix span{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--taupe);
  margin-left:8px;vertical-align:middle;
}

.tunnel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(min(300px,100%),.8fr);
  gap:clamp(26px,3.5vw,60px);align-items:start}
.carte-tunnel{
  background:var(--blanc);border:1px solid var(--creme-2);border-radius:var(--r);
  padding:clamp(22px,3vw,38px);margin-bottom:22px;
}
.carte-tunnel h2{
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or-fonce);
  padding-bottom:14px;border-bottom:1px solid var(--creme-2);margin-bottom:8px;
}
.tunnel__vide{padding:18px 0;color:var(--gris);font-size:14.5px}
.tunnel__retour{margin-top:6px}

.modes{display:grid;gap:10px;margin-top:18px}
.mode{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:1px solid var(--creme-2);border-radius:var(--r);padding:16px 18px;
  transition:border-color var(--transition),background var(--transition);
}
.mode:hover{border-color:var(--or)}
.mode:has(input:checked){border-color:var(--or);background:var(--creme)}
.mode input{accent-color:var(--or-fonce);width:16px;height:16px;flex-shrink:0}
.mode__corps{flex:1;display:block}
.mode__titre{display:block;font-size:15px;color:var(--noir)}
.mode__detail{display:block;font-size:12.5px;line-height:1.6;color:var(--gris);margin-top:3px}
.mode__prix{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-fonce);white-space:nowrap;
}

/* Le panneau qui se déplie sous l'option cochée : même fond, même bordure
   dorée, collé au cadre du dessus dont il prolonge le contour. */
.mode-detail{
  margin-top:-10px;                 /* annule l'écart de la grille .modes */
  border:1px solid var(--or);border-top:0;
  border-radius:0 0 var(--r) var(--r);
  background:var(--creme);
  padding:4px 18px 18px;
}
/* L'option qui porte un panneau ouvert perd ses coins du bas. */
.mode:has(input:checked):has(+ .mode-detail:not([hidden])){
  border-radius:var(--r) var(--r) 0 0;border-bottom-color:transparent;
}

.relais{margin-top:22px;padding-top:20px;border-top:1px solid var(--creme-2)}
.relais__intro{font-size:13.5px;line-height:1.7;color:var(--gris);margin:0 0 14px}
.relais__carte{margin-top:14px}
.relais__carte #zone-widget{min-height:420px}
.relais__choisi{
  margin-top:16px;background:var(--creme);border-left:2px solid var(--or);
  padding:14px 18px;font-size:13.5px;line-height:1.7;color:var(--noir-3);
}
.relais__choisi strong{font-weight:400;color:var(--noir)}

/* Sans cela, la colonne de droite fait exactement la hauteur de son contenu :
   le récapitulatif n'a alors aucune marge pour glisser, et « position:sticky »
   ne produit rien du tout. On lui rend la hauteur de la rangée. */
.tunnel__droite{align-self:stretch}

/* La barre du total n'existe que sur petit écran : sur ordinateur, c'est le
   récapitulatif de droite qui joue ce rôle. */
.barre-total{display:none}

.recap{
  position:sticky;top:112px;
  background:var(--creme);border:1px solid var(--creme-2);border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px);
}
.recap h2{
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or-fonce);margin-bottom:18px;
}
.recap__ligne{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--creme-2);font-size:14px;color:var(--gris);
}
.recap__ligne strong{font-weight:400;color:var(--noir)}
.recap__ligne--grand{border-bottom:0;padding-top:16px;margin-bottom:8px}
.recap__ligne--grand span{font-size:15px;color:var(--noir)}
.recap__ligne--grand strong{font-family:var(--serif);font-size:26px}
.recap__franco{
  font-size:12.5px;color:var(--or-fonce);margin:0 0 16px;line-height:1.6;
}
.recap__erreur{
  margin-top:14px;font-size:13px;line-height:1.7;color:var(--noir-3);
  background:var(--blush);border-radius:var(--r);padding:12px 16px;
}
.recap .btn[disabled]{background:transparent;border-color:var(--creme-2);color:var(--gris-clair)}

@media (max-width:900px){
  .tunnel{grid-template-columns:minmax(0,1fr)}
  .recap{position:static}
  /* Le récapitulatif passe sous la carte des relais : c'est la barre du bas
     qui prend le relais pour le total et le paiement. */
  .recap .btn[data-payer]{display:none}
  .barre-total[hidden]{display:none}
  .barre-total{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:880;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--creme-2);
    box-shadow:0 -12px 40px rgba(42,35,32,.09);
    padding:10px clamp(14px,4vw,22px) calc(10px + env(safe-area-inset-bottom));
  }
  .barre-total__note{
    margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--or-fonce);
  }
  .barre-total__ligne{display:flex;align-items:center;gap:12px}
  .barre-total__libelle{
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  }
  .barre-total__prix{
    font-family:var(--serif);font-size:23px;font-weight:400;color:var(--noir);
    margin-right:auto;
  }
  .barre-total__btn{flex-shrink:0;padding-inline:26px}
  /* Une seule barre à la fois : sur la page commande, celle du total remplace
     les raccourcis Appeler / Itinéraire / Instagram. */
  body:has(.barre-total:not([hidden])) .barre-mobile{display:none}
  /* Assez de marge pour que le bas de page ne reste pas sous la barre,
     y compris quand elle porte une ligne d'explication. */
  body:has(.barre-total:not([hidden])){padding-bottom:106px}
}

/* Bannière compacte : utilisée sur la boutique, pour que la grille de
   produits apparaisse dès l'arrivée sur la page. */
.banniere--compacte{min-height:clamp(190px,26vh,260px)}
.banniere--compacte .banniere__inner{padding-block:38px}
.banniere--compacte h1{font-size:clamp(30px,4.2vw,46px)}
.banniere--compacte p{font-size:15px;max-width:52ch}

/* En-tête du catalogue : compact, pour que les produits soient visibles
   dès l'arrivée sur la boutique. */
.section--catalogue{padding-block:clamp(30px,3.4vw,50px) clamp(64px,9vw,130px)}
.catalogue-tete{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:16px 40px;padding-bottom:20px;margin-bottom:26px;
  border-bottom:1px solid var(--creme-2);
}
.catalogue-tete .surtitre{margin-bottom:8px}
.catalogue-tete h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,38px)}
.catalogue-tete__note{max-width:46ch;font-size:13.5px;line-height:1.7;color:var(--gris);margin:0}
.section--catalogue .filtres-col{top:120px}

/* Sélecteur de quantité de la fiche produit */
.qte-choix{
  display:inline-flex;align-items:center;
  border:1px solid var(--creme-2);border-radius:var(--r-pill);
  background:var(--blanc);overflow:hidden;height:48px;
}
.qte-choix button{
  width:46px;height:100%;font-size:19px;line-height:1;color:var(--noir);
  transition:color var(--transition),background var(--transition);
}
.qte-choix button:first-child{border-right:1px solid var(--creme-2)}
.qte-choix button:last-child{border-left:1px solid var(--creme-2)}
.qte-choix button:hover{background:var(--creme);color:var(--or-fonce)}
.qte-choix button:active{background:var(--sable)}
.qte-choix input{
  width:46px;height:100%;border:0;text-align:center;
  font-family:var(--sans);font-size:15px;color:var(--noir);background:transparent;
  /* On masque les flèches natives du navigateur : elles feraient doublon
     avec les boutons − et +, et on ne saurait plus où cliquer. */
  -webkit-appearance:none;-moz-appearance:textfield;appearance:none;margin:0;
}
.qte-choix input::-webkit-outer-spin-button,
.qte-choix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qte-choix input:focus{outline:none}
.qte-choix:focus-within{border-color:var(--or)}

/* --- 17. État du stock --------------------------------------------------- */
.stock-etat{
  display:inline-flex;align-items:center;gap:9px;
  margin:16px 0 0;padding:8px 16px;border-radius:var(--r-pill);
  font-size:12.5px;letter-spacing:.06em;
}
.stock-etat::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;
}
.stock-etat--bas{background:var(--sable);color:var(--or-fonce)}
.stock-etat--rupture{background:var(--blush);color:#8F4A2C}

/* Le formulaire « prévenez-moi » n'apparaît que sur un produit épuisé. */
.rappel{
  margin-top:26px;padding:22px 24px;
  background:var(--creme);border:1px solid var(--creme-2);border-radius:var(--r);
}
.rappel__intro{font-size:13.5px;line-height:1.7;color:var(--gris);margin:0 0 14px}
.rappel__ligne{display:flex;flex-wrap:wrap;gap:10px}
.rappel__ligne input{
  flex:1;min-width:200px;
  border:1px solid var(--creme-2);border-radius:var(--r-pill);
  padding:12px 20px;font-family:var(--sans);font-size:14px;color:var(--noir);
  background:var(--blanc);
}
.rappel__ligne input:focus{outline:none;border-color:var(--or)}

/* Vignette d'un produit épuisé */
.produit--epuise .produit__media img{opacity:.45}
.produit--epuise h3,.produit--epuise .produit__prix{color:var(--gris-clair)}
.produit__badge--rupture{background:var(--noir);color:var(--creme)}

/* Ligne « code promo » du récapitulatif */
.recap__promo{color:var(--gris)}
.recap__lien{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-fonce);
  border-bottom:1px solid var(--creme-2);padding-bottom:2px;
  transition:border-color var(--transition);
}
.recap__lien:hover{border-color:var(--or)}
.recap__note{
  font-size:12.5px;line-height:1.65;color:var(--gris);
  background:var(--blanc);border-radius:var(--r);padding:12px 15px;margin:10px 0 0;
}

/* --- 18. Le monogramme -------------------------------------------------- */
/* Le médaillon Instagram de Candy, entièrement détouré : le disque noir et le
   contour sombre des lettres ont été retirés, il ne reste que l'or du logo.
   Un seul fichier, qui fonctionne aussi bien sur les fonds clairs que sur les
   bandes sombres. */

/* Séparateur entre deux grandes sections : un filet, le monogramme, un filet. */
.separateur{
  display:flex;align-items:center;gap:clamp(18px,3vw,32px);
  max-width:440px;margin-inline:auto;padding-inline:20px;
}
.separateur::before,.separateur::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,92,.5));
}
.separateur::after{background:linear-gradient(270deg,transparent,rgba(201,164,92,.5))}
.separateur img{width:clamp(58px,7vw,74px);height:auto;flex-shrink:0}

/* Ornement posé au-dessus d'un titre, sur les pages courtes. */
.ornement{display:block;width:clamp(66px,9vw,90px);height:auto;margin:0 auto 24px}

/* Filigrane des bandes sombres : présent sans se faire remarquer. */
.section--profond{position:relative;overflow:hidden}
.section--profond > .wrap{position:relative;z-index:1}
.filigrane{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,130%);height:auto;opacity:.09;
  pointer-events:none;user-select:none;
}

/* Pied de page : le monogramme ferme la page, juste avant les mentions. */
.pied__mono{display:block;width:66px;height:auto;margin:6px auto 28px;opacity:.9}

/* Sur téléphone, le filigrane passe derrière un texte bien plus large :
   on l'efface presque, sinon il gêne la lecture. */
@media (max-width:700px){
  .filigrane{width:min(360px,95%);opacity:.045}
  .separateur{max-width:280px;gap:16px}
}