/* =================================================================
   MAISON HUBERT — Page « Nos Créations »
   Hero centré/animé (comme Cafés·Thés·Confiseries) + 8 blocs autour
   du chocolat : coffrets (grille feature), bouchées (vignettes rondes),
   sujets (panneaux éditoriaux), tablettes (grille), confiseries
   chocolatées (vignettes), le chocolat (origine & travail + étapes),
   rappel Collection Marseille, galerie (carrousel) + modale fiche (6 champs).
   S'appuie sur maison-hubert.css (tokens, header, footer, .ph, .reveal,
   .btn, .overline, .h-section, .h-feature, .split, .figure, .carr-btn…).
   ================================================================= */

/* ---------- État de nav actif ---------- */
.nav-link.active{ opacity:1; }
.nav-link.active::after{ transform:scaleX(1); }

/* ---------- Navigation latérale (scrollspy discret) ---------- */
html{ scroll-behavior:smooth; }
main section[id]{ scroll-margin-top:clamp(70px,10vh,100px); }
.dot-nav{
  position:fixed; top:50%; right:clamp(10px,1.6vw,26px); transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:clamp(10px,1.3vw,15px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.dot-nav.show{ opacity:1; pointer-events:auto; }
.dn-item{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:18px; text-decoration:none; }
.dn-dot{ width:8px; height:8px; border-radius:50%; background:var(--bronze); opacity:.5; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.dn-item:hover .dn-dot{ opacity:1; transform:scale(1.25); }
.dn-bean{ width:20px; height:20px; color:var(--bronze-deep); display:none; }
.dn-item.active .dn-dot{ display:none; }
.dn-item.active .dn-bean{ display:block; }
.dn-label{
  font-family:var(--body); font-weight:600; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line-dark);
  padding:.45em .8em; border-radius:30px; white-space:nowrap;
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dn-item:hover .dn-label{ opacity:1; transform:none; }
@media(max-width:860px){ .dot-nav{ display:none; } }

/* ---------- Collection Marseille (sur Nos Créations) : plus compact ---------- */
#marseille .coll-copy h3{ font-size:clamp(1.7rem,2.9vw,2.6rem); white-space:nowrap; }
#marseille .coll-slide .ph{ aspect-ratio:4/3; }
#marseille .coll-copy .sub{ margin:.9rem 0 1.4rem; }
/* Titre « Collection Marseille » : on garde les soleils mais on retire les 2
   filets latéraux (comme sur l'accueil) — sinon soleil + trait se cumulent de
   chaque côté et le titre paraît mal aligné, surtout sur mobile. */
#marseille .overline.ov-suns::before,
#marseille .overline.ov-suns::after{ display:none; }

/* ===============================================================
   PAGE HERO  (centré + titre animé lettre par lettre)
   =============================================================== */
.page-hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--espresso); color:var(--cream); overflow:clip;
  padding-block:clamp(120px,16vh,180px);
}
.page-hero .hero-ph{ position:absolute; inset:0; z-index:0; }
.page-hero .hero-ph .ph{ position:absolute; inset:0; border:0; }
.page-hero .wrap{ position:relative; z-index:2; width:100%; }
.page-hero-inner{ max-width:none; margin-inline:auto; text-align:center; }
.page-hero .display{ margin:.18em 0 0; line-height:.92; font-size:clamp(2.4rem, min(12vw,12vh), 8rem); white-space:nowrap; }
.page-hero .lead{ margin:clamp(1.2rem,3vh,2rem) auto 0; max-width:74ch; color:var(--cream-soft); }
.page-hero .hero-ph .ph::after{ display:none; }
.page-hero .display .ltr{ display:inline; }
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > .display{ animation:none; }
  .page-hero .display .ltr{
    opacity:0; will-change:opacity, filter;
    animation:ltrReveal .9s var(--ease) both;
    animation-delay:calc(var(--i) * 65ms + .14s);
  }
  @keyframes ltrReveal{
    0%   { opacity:0; filter:blur(12px); text-shadow:0 0 22px rgba(224,177,107,.9); }
    55%  { opacity:1; filter:blur(0);    text-shadow:0 0 10px rgba(224,177,107,.45); }
    100% { opacity:1; filter:blur(0);    text-shadow:none; }
  }
  .page-hero-inner > *{ animation:heroIn .85s var(--ease) both; }
  .page-hero-inner > *:nth-child(1){ animation-delay:.05s; }
  .page-hero-inner > *:nth-child(2){ animation-delay:.13s; }
  .page-hero-inner > *:nth-child(3){ animation-delay:.21s; }
}

/* Carrousel de mots dans le hero (comme Cafés · Contact) */
.page-hero .ph-meta.meta-rotator{
  display:block; position:relative; min-height:1.8em; margin-top:clamp(1.6rem,4vh,2.6rem);
  font-family:var(--body); font-weight:600; text-transform:uppercase; color:var(--bronze-lt);
  font-size:clamp(1rem,1.4vw,1.15rem); letter-spacing:.16em;
}
.page-hero .ph-meta.meta-rotator .meta-item{
  position:absolute; left:0; right:0; top:0; text-align:center;
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none;
}
.page-hero .ph-meta.meta-rotator .meta-item.active{ opacity:1; }

/* ---------- révélation en escalier (commun) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in > *{ opacity:1; transform:none; }
  .reveal.in > *:nth-child(2){ transition-delay:.06s; }
  .reveal.in > *:nth-child(3){ transition-delay:.12s; }
  .reveal.in > *:nth-child(4){ transition-delay:.18s; }
  .reveal.in > *:nth-child(5){ transition-delay:.24s; }
}

/* ---------- Menu rapide en bas du hero ---------- */
.hero-jump{
  position:absolute; left:0; right:0; bottom:clamp(150px,21vh,225px); z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; padding-inline:16px;
}
.hero-jump .link-ar{ font-size:.66rem; padding-bottom:5px; }
@media (prefers-reduced-motion: no-preference){ .hero-jump{ animation:heroIn .85s var(--ease) both; animation-delay:.45s; } }
@media(max-width:560px){ .hero-jump{ gap:10px 18px; bottom:14px; } .hero-jump .link-ar{ font-size:.58rem; letter-spacing:.12em; } .page-hero .hero-scroll{ display:none; } }

/* ===============================================================
   EN-TÊTE DE SECTION RÉUTILISABLE  (.blk)
   =============================================================== */
.blk{ padding-block:clamp(40px,5vw,84px); }
.blk.dark{ background:var(--espresso); color:var(--cream); }
.blk-head{ margin:0 auto clamp(26px,3.4vw,46px); }
.blk-head .num{
  font-family:var(--serif); font-style:italic; font-size:1.3rem;
  color:var(--bronze-deep); display:block; margin-bottom:.4rem;
}
.dark .blk-head .num{ color:var(--bronze-lt); }
.blk-head h2{ margin:.4em 0 0; }
.blk-head .lead{ margin-top:1.1rem; }

/* ===============================================================
   BLOC 1 — BOÎTES & COFFRETS  ·  grille feature asymétrique
   =============================================================== */
.coffret-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr; gap:clamp(16px,1.8vw,26px);
}
.coffret-card{
  -webkit-appearance:none; appearance:none; background:none; padding:0;
  position:relative; display:block; overflow:hidden; border-radius:3px;
  cursor:pointer; color:var(--cream); font:inherit; text-align:left;
  border:1px solid var(--line-light); min-height:clamp(170px,25vh,280px);
}
.coffret-card.lead{ grid-column:span 2; grid-row:span 2; min-height:0; }
.coffret-card .ph{ position:absolute; inset:0; border:0; transition:transform 1.1s var(--ease); }
.coffret-card:hover .ph{ transform:scale(1.05); }
.coffret-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,12,8,.9) 0%, rgba(20,12,8,.18) 52%, rgba(20,12,8,.34) 100%);
}
.coffret-body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(20px,1.8vw,30px); }
.coffret-tag{
  font-family:var(--body); font-weight:600; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze-lt);
}
.coffret-card h3{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.35rem,1.8vw,1.75rem); line-height:1.04; color:var(--cream); margin:.45rem 0 0;
}
.coffret-card.lead h3{ font-size:clamp(2rem,3.4vw,3rem); }
.coffret-desc{
  font-family:var(--serif); font-style:italic; font-size:1.06rem; color:var(--cream-soft);
  margin:.55rem 0 0; max-width:42ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .5s, margin .6s;
}
.coffret-card.lead .coffret-desc, .coffret-card:hover .coffret-desc{ max-height:90px; opacity:1; }
.coffret-card .uc-ar{
  display:inline-flex; align-items:center; gap:.5em; margin-top:14px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-soft);
}
.coffret-card .uc-ar .ar{ transition:transform .4s var(--ease); }
.coffret-card:hover .uc-ar .ar{ transform:translateX(5px); }

/* ===============================================================
   VIGNETTES RONDES  (bouchées + confiseries chocolatées)
   =============================================================== */
.fam-circles{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(30px,3.2vw,52px) clamp(20px,2.4vw,40px);
}
.bean-card{
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; color:inherit; font:inherit;
}
.bean-photo{ position:relative; display:block; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; }
.bean-photo .ph{ position:absolute; inset:0; border-radius:50%; transition:transform 1s var(--ease); }
.bean-photo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  /* Léger contour olive autour des produits (rappel DA). */
  border:2px solid rgba(196,193,47,.6); box-shadow:0 0 0 0 rgba(196,193,47,0);
  pointer-events:none; transition:border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.bean-card:hover .bean-photo .ph{ transform:scale(1.07); }
.bean-card:hover .bean-photo::after{ border-color:var(--olive); box-shadow:0 0 0 7px rgba(196,193,47,.1); }
.bean-card:focus-visible{ outline:none; }
.bean-card:focus-visible .bean-photo::after{ border-color:var(--bronze-lt); box-shadow:0 0 0 4px rgba(224,177,107,.35); }
.bean-region{
  font-family:var(--body); font-weight:600; font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze-deep); margin-top:1.1rem;
}
.bean-name{
  font-family:var(--serif); font-weight:500; font-size:1.28rem; line-height:1.12;
  letter-spacing:.01em; margin-top:.28rem; text-wrap:balance;
}
.bean-note{
  font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--ink-soft);
  margin-top:.4rem; max-width:24ch;
}
/* overlay « Infos » au survol (comme Cafés · Thés) */
.bean-photo .bean-hover{
  position:absolute; inset:0; z-index:3; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55em;
  background:rgba(255,255,255,.55); color:var(--espresso);
  opacity:0; transform:scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
}
.bean-photo .bean-hover svg{ width:30px; height:30px; }
.bean-card:hover .bean-photo .bean-hover,
.bean-card:focus-visible .bean-photo .bean-hover{ opacity:1; transform:none; }

/* vignettes rondes sur fond sombre */
.dark .bean-region{ color:var(--bronze-lt); }
.dark .bean-name{ color:var(--cream); }
.dark .bean-note{ color:var(--cream-soft); }
.dark .bean-photo::after{ border-color:rgba(196,193,47,.62); }

/* « Confiseries chocolatées » et « Bouchées » : vignettes sur une seule ligne (desktop ≥1025px).
   Cercles plus petits + textes réduits. En dessous, on garde la grille responsive.
   Nombre de vignettes variable dans les deux blocs → flex centré plutôt qu'une grille
   à nombre de colonnes figé, qui laissait un trou à droite dès qu'un produit était retiré. */
@media(min-width:1025px){
  #bouchees .fam-circles,
  #confiseries-choc .fam-circles{ display:flex; flex-wrap:wrap; justify-content:center; grid-template-columns:none; }
  #bouchees .fam-circles{ gap:clamp(24px,3vw,40px) clamp(14px,1.4vw,24px); }
  #confiseries-choc .fam-circles{ gap:clamp(24px,3vw,40px) clamp(30px,3.4vw,56px); }
  #bouchees .bean-card,
  #confiseries-choc .bean-card{ flex:0 0 clamp(140px,12vw,158px); }
  #confiseries-choc .bean-name, #bouchees .bean-name{ font-size:clamp(.95rem,1.05vw,1.1rem); margin-top:.9rem; }
  #confiseries-choc .bean-region, #bouchees .bean-region{ font-size:.56rem; letter-spacing:.14em; margin-top:.85rem; }
  #confiseries-choc .bean-note, #bouchees .bean-note{ font-size:.82rem; }
}

/* ===============================================================
   PANNEAUX ÉDITORIAUX ALTERNÉS  (sujets)
   =============================================================== */
.fam-split{ display:flex; flex-direction:column; gap:clamp(34px,4vw,60px); }
.show-card{
  -webkit-appearance:none; appearance:none; background:var(--paper); border:1px solid var(--line-dark);
  border-radius:3px; overflow:hidden; cursor:pointer; color:inherit; font:inherit;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch;
  box-shadow:0 30px 70px -52px rgba(32,20,13,.7);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.show-card:nth-child(even){ grid-template-columns:1fr 1.05fr; }
.show-card:nth-child(even) .sc-media{ order:2; }
.show-card:nth-child(even) .sc-body{ order:1; }
.show-card:hover{ transform:translateY(-4px); border-color:rgba(80,43,28,.3); box-shadow:0 44px 90px -50px rgba(32,20,13,.78); }
.show-card:focus-visible{ outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px rgba(224,177,107,.35); }
.sc-media{ position:relative; overflow:hidden; min-height:clamp(280px,32vw,420px); }
.sc-media .ph{ position:absolute; inset:0; border:0; border-radius:0; transition:transform 1.1s var(--ease); }
.show-card:hover .sc-media .ph{ transform:scale(1.06); }
.sc-body{ display:flex; flex-direction:column; text-align:left; padding:clamp(28px,3.2vw,52px); }
.sc-region{
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze-deep);
}
.sc-name{
  font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,3.3vw,2.8rem);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.02; margin:.55rem 0 0;
}
.sc-desc{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.08rem,1.4vw,1.28rem);
  line-height:1.5; color:var(--ink-soft); margin:1rem 0 0; max-width:46ch;
}
.sc-tags{ display:flex; flex-wrap:wrap; gap:.6em; margin:clamp(1.3rem,2.4vw,1.9rem) 0 0; }
.sc-tag{
  font-family:var(--body); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronze-deep);
  border:1px solid var(--line-dark); border-radius:40px; padding:.5em .95em;
}
.sc-cta{ display:inline-flex; margin-top:auto; padding-top:clamp(1.6rem,2.6vw,2.2rem); }

/* ===============================================================
   BLOC 3 — SUJETS · carrousel photo (gauche) + texte (droite)
   =============================================================== */
.sujets-split{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(32px,4.5vw,72px);
}
/* Variante « Les gravures » : texte à gauche, carrousel (un peu plus large) à droite. */
.gravures-split{ grid-template-columns:.95fr 1.05fr; }
/* « Comment ça marche ? » : déroulant sous le texte, dans la colonne de gauche (aligné à gauche). */
.gravures-how{ margin-top:clamp(22px,3vw,38px); }
.how-toggle{
  display:inline-flex; flex-direction:row; align-items:center; gap:12px;
  margin:0; padding:6px 0; background:none; border:0; cursor:pointer; color:inherit;
}
.how-toggle .overline{
  font-size:clamp(1.05rem,1.7vw,1.3rem); letter-spacing:.14em; color:var(--espresso);
  transition:color .25s var(--ease);
}
.how-toggle .overline::before,
.how-toggle .overline::after{ display:none; }   /* pas de petites barres autour du titre */
.how-toggle:hover .overline{ color:var(--bronze-deep); }
.how-chev{ color:var(--bronze-deep); line-height:0; transition:transform .35s var(--ease); }
.how-chev svg{ width:24px; height:24px; display:block; }
.how-toggle:hover .how-chev{ transform:translateY(2px); }
.gravures-how.open .how-toggle:hover .how-chev{ transform:rotate(180deg); }
.gravures-how.open .how-chev{ transform:rotate(180deg); }
/* panneau qui se déroule en douceur (0fr → 1fr, aucune hauteur figée) */
.how-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.how-panel-inner{ overflow:hidden; min-height:0; }
.gravures-how.open .how-panel{ grid-template-rows:1fr; }
/* Étapes en petit carrousel : numéro à gauche, texte à droite, nav (points + flèches) dessous. */
.how-panel-inner{ --num-col:clamp(2rem,4vw,2.8rem); --num-gap:clamp(14px,1.6vw,22px); }
.how-steps{ position:relative; margin-top:clamp(14px,2vw,22px); }
.how-step{
  position:absolute; inset:0; display:grid; grid-template-columns:var(--num-col) 1fr; column-gap:var(--num-gap);
  align-items:start; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.how-step.active{ position:relative; opacity:1; visibility:visible; }
.how-step .st-num{ font-family:var(--serif); font-style:italic; font-size:clamp(1.9rem,2.8vw,2.6rem); line-height:1; color:var(--bronze-deep); }
.how-step-body h4{ font-size:1.15rem; text-transform:uppercase; letter-spacing:.08em; margin:.15rem 0 .5rem; }
.how-step-body p{ font-size:.98rem; color:var(--ink-soft); margin:0; max-width:44ch; }
.how-steps-nav{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,1.8vw,22px); margin-top:clamp(10px,1.4vw,16px); }
.how-steps-dots{ display:flex; gap:9px; }
.how-steps-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--bronze-deep); background:transparent; opacity:.55;
  transition:opacity .3s, background .3s;
}
.how-steps-dots button.active{ background:var(--olive-deep); border-color:var(--olive-deep); opacity:1; }
.how-arrow{
  width:32px; height:32px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--line-dark); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s, border-color .3s;
}
.how-arrow:hover{ background:var(--olive); color:var(--espresso); border-color:var(--olive); }
.how-arrow svg{ width:14px; height:14px; }

/* ===============================================================
   BLOC 5c — CHOCOLATS DES FÊTES  ·  onglets Pâques / Noël
   =============================================================== */
.fete-tabs{ display:flex; justify-content:center; gap:14px; margin:clamp(4px,1vw,12px) auto clamp(36px,4.5vw,60px); }
.fete-tab{
  font-family:var(--body); font-weight:600; font-size:clamp(.92rem,1.4vw,1.1rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent; cursor:pointer;
  border:1px solid var(--line-dark); border-radius:40px; padding:1em 2.8em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.fete-tab:hover{ color:var(--espresso); border-color:var(--olive-deep); }
.fete-tab.active{ background:var(--olive-deep); color:var(--espresso); border-color:var(--olive-deep); }
.fete-panel[hidden]{ display:none; }
.fete-lead{ max-width:112ch; margin:0 auto clamp(28px,3.2vw,46px); text-align:center; text-wrap:balance; font-size:clamp(1.05rem,1.4vw,1.26rem); }
/* pas de texte descriptif sur les cartes de fêtes */
.fete-products .coffret-desc{ display:none; }
/* Cartes produit en superposition (réutilise .coffret-card) : 3 pour Pâques, 2 pour Noël. */
.fete-products{ display:grid; gap:clamp(16px,1.8vw,26px); grid-auto-rows:1fr; }
.fete-products--3{ grid-template-columns:repeat(3,1fr); }
.fete-products--2{ grid-template-columns:repeat(2,1fr); }
.fete-products .coffret-card{ min-height:clamp(210px,27vh,300px); }
.fete-more{ text-align:center; margin:clamp(30px,3.6vw,50px) 0 clamp(30px,3.6vw,48px); }
/* Renvois vers les confiseries de Pâques / Noël : libellé un peu plus grand que
   les autres liens fléchés (demande client). */
.fete-more .link-ar{ font-size:.92rem; padding-bottom:7px; }
.fete-more .link-ar .ar{ width:17px; height:17px; }
/* Galerie façon bloc « Galerie », en PLEINE LARGEUR : déborde de .wrap jusqu'aux bords de l'écran. */
.fete-gal{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; }
/* Vignettes compactes (5 par vue) pour garder ~la même taille qu'avant malgré la pleine largeur. */
.fete-gal .galf-fig{ flex:0 0 calc((100% - 4*12px) / 5); }
@media(max-width:1024px){ .fete-gal .galf-fig{ flex-basis:calc((100% - 2*12px) / 3); } }
@media(max-width:560px){ .fete-gal .galf-fig{ flex-basis:calc((100% - 12px) / 1.15); } }
@media(max-width:860px){
  .fete-products--3, .fete-products--2{ grid-template-columns:1fr; }
}
/* min-width:0 : sans ça, une grille refuse par défaut de faire descendre une
   colonne sous la largeur de son contenu le plus large -- ici la rangée de
   navigation (pastilles + flèches), qui devient large dès qu'il y a beaucoup
   de photos (16 pour « Les sujets »). Elle poussait toute la colonne, et donc
   la photo, hors du cadre en mobile. */
.sujets-gal{ position:relative; min-width:0; }
.sg-track{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:3px; border:1px solid var(--line-dark);
}
/* Bloc « Les sujets » : cadre photo aligné sur le bloc « La Maison Hubert »
   de l'accueil (#histoire .figure .ph) — même format et même filet olive. */
#sujets .sg-track{
  aspect-ratio:16/15; max-width:none; margin-inline:auto;
  padding:0; background:none;
  border:3px solid rgba(196,193,47,.6); border-radius:2px;
  box-shadow:none;
}
#sujets .sg-fig{ inset:0; }
.sg-fig{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s var(--ease); }
.sg-fig.active{ opacity:1; }
.sg-fig .ph{ position:absolute; inset:0; border:0; }
.sg-cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:18px 22px;
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream);
  background:linear-gradient(0deg, rgba(20,12,8,.82), transparent);
}
.sg-nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:clamp(18px,2vw,26px); }
.sujets-text{ max-width:52ch; }
.sujets-text .lead{ margin:0; }
.sujets-text p + p{ margin-top:1rem; }
/* Bloc « Les sujets » : texte agrandi à droite. */
#sujets .sujets-text{ max-width:68ch; }
#sujets .sujets-text p + p{ margin-top:1.6rem; }
#sujets .sujets-text .lead{ font-size:clamp(1.26rem,1.75vw,1.52rem); line-height:1.65; }
#sujets .sujets-text p{ font-size:clamp(1.04rem,1.2vw,1.18rem); line-height:1.75; }

/* ===============================================================
   BLOC 4 — TABLETTES  ·  carrousel par origine (dark)
   =============================================================== */
.tab-viewport{ overflow:hidden; }
.tab-track{ display:flex; gap:clamp(14px,1.6vw,22px); transition:transform .6s var(--ease); will-change:transform; }
.tab-card{
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0;
  flex:0 0 calc((100% - 3*clamp(14px,1.6vw,22px)) / 4);
  display:flex; flex-direction:column; text-align:left; cursor:pointer; color:inherit; font:inherit;
}
.tab-nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:clamp(26px,3vw,40px); }
.tab-dots{ display:flex; gap:9px; flex-wrap:wrap; }
.tab-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(244,237,224,.55); background:transparent; opacity:.6;
  transition:opacity .3s, background .3s;
}
.tab-dots button.active{ background:var(--olive); opacity:1; }
@media(max-width:1024px){ .tab-card{ flex-basis:calc((100% - clamp(14px,1.6vw,22px)) / 2); } }
@media(max-width:560px){ .tab-card{ flex-basis:calc((100% - 0.5*clamp(14px,1.6vw,22px)) / 1.2); } }
.tab-media{
  position:relative; overflow:hidden; border-radius:3px; aspect-ratio:3/4; max-height:44vh;
  border:1px solid var(--line-light);
}
.tab-media .ph{ position:absolute; inset:0; border:0; transition:transform 1.1s var(--ease); }
.tab-card:hover .tab-media .ph{ transform:scale(1.06); }
.tab-pct{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--serif); font-weight:500; font-size:1.05rem;
  background:rgba(20,12,8,.55); color:var(--cream); border:1px solid var(--line-light);
  padding:.3em .7em; border-radius:40px; backdrop-filter:blur(2px);
}
.tab-region{
  font-family:var(--body); font-weight:600; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze-lt); margin-top:1.1rem;
}
.tab-name{ font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.1; margin-top:1rem; color:var(--cream); }
.tab-note{ font-family:var(--serif); font-style:italic; font-size:.94rem; color:var(--cream-soft); margin-top:.35rem; max-width:26ch; }

/* ===============================================================
   BLOC 6 — LE CHOCOLAT · ÉTAPES NUMÉROTÉES
   =============================================================== */
.choco-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,46px);
  margin-top:clamp(40px,5vw,70px);
  border-top:1px solid var(--line-dark); padding-top:clamp(36px,4vw,56px);
}
.choco-step .st-num{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--bronze-deep); }
.choco-step h4{ font-size:1.2rem; text-transform:uppercase; letter-spacing:.08em; margin:.5rem 0 .5rem; }
.choco-step p{ font-size:.98rem; color:var(--ink-soft); margin:0; max-width:34ch; }

/* Bloc « Le chocolat » : photo paysage + spacing compact pour tenir dans un écran */
#chocolat{ padding-block:clamp(44px,5vw,72px); }
#chocolat .figure .ph{ aspect-ratio:auto; height:clamp(240px,38vh,400px); }
#chocolat .choco-steps{ margin-top:clamp(28px,3.5vw,46px); padding-top:clamp(26px,3vw,40px); }

/* ===============================================================
   BLOC 5 — RAPPEL COLLECTION MARSEILLE  ·  bandeau
   =============================================================== */
.ms-band{ background:var(--cocoa); color:var(--cream); overflow:hidden; position:relative; }
.ms-band .split{ align-items:stretch; gap:0; grid-template-columns:1fr 1fr; }
.ms-media{ position:relative; min-height:clamp(320px,40vw,520px); }
.ms-media .ph{ position:absolute; inset:0; border:0; }
.ms-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,7vw,104px) var(--gutter); }
.ms-text h2{ font-size:clamp(2.1rem,4vw,3.4rem); text-transform:uppercase; letter-spacing:.04em; line-height:1.02; margin:1rem 0 0; }
.ms-text .lead{ margin:1.2rem 0 0; }
.ms-mini{ display:flex; flex-wrap:wrap; gap:10px; margin:clamp(1.6rem,3vw,2.2rem) 0 clamp(1.8rem,3vw,2.4rem); }
.ms-mini span{
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bronze-lt);
  border:1px solid var(--line-light); border-radius:40px; padding:.55em 1.05em;
}

/* ===============================================================
   BLOC 8 — CARROUSEL PHOTOS PLEINE LARGEUR  (plusieurs vignettes)
   =============================================================== */
.gal-full{ position:relative; width:100%; overflow:hidden; padding-block:clamp(48px,6vw,96px); }
.galf-track{ display:flex; gap:12px; transition:transform .6s var(--ease); will-change:transform; }
.galf-fig{
  flex:0 0 calc((100% - 36px) / 4);
  position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--cream);
}
.galf-fig .ph{ position:absolute; inset:0; border:0; transition:transform 1.1s var(--ease); }
.galf-fig:hover .ph{ transform:scale(1.05); }
/* Flèches AU-DESSUS du carrousel (centrées) et plus petites. Avant elles
   étaient posées sur les bords gauche/droit ; celle de droite passait sous la
   nav latérale (#dotNav) et n'était plus cliquable. */
/* Barre de navigation centrée sous le carrousel : flèche · points · flèche.
   Centrée (pas sur les bords) pour ne jamais passer sous la nav latérale. */
.galf-nav{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,2vw,28px); margin-top:clamp(22px,2.6vw,34px); padding-inline:var(--gutter); }
.galf-arrow{
  width:40px; height:40px; border-radius:50%; padding:0; cursor:pointer; flex:none;
  border:1px solid var(--line-dark); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s, border-color .3s, opacity .3s;
}
.galf-arrow:hover{ background:var(--olive); color:var(--espresso); border-color:var(--olive); }
.galf-arrow:disabled{ opacity:.35; cursor:default; }
.galf-arrow:disabled:hover{ background:transparent; color:var(--ink); border-color:var(--line-dark); }
.galf-arrow svg{ width:15px; height:15px; }
/* min-width:0 + overflow-x:auto : au-delà d'une poignée de photos (23 pour
   « Galerie »), la rangée de pastilles centrée débordait des deux côtés --
   `justify-content:center` répartit le dépassement à gauche ET à droite,
   ce qui sortait la flèche « suivant » de l'écran sur mobile. Elle défile
   maintenant dans sa propre bande, sans jamais pousser les flèches dehors. */
.galf-dots{ display:flex; justify-content:center; gap:9px; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.galf-dots::-webkit-scrollbar{ display:none; }
.galf-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--bronze-deep); background:transparent; opacity:.6;
  transition:opacity .3s, background .3s;
}
.galf-dots button.active{ background:var(--olive-deep); opacity:1; }
@media(max-width:1024px){ .galf-fig{ flex-basis:calc((100% - 12px) / 2); } }
@media(max-width:560px){ .galf-fig{ flex-basis:calc((100% - 6px) / 1.2); } }

/* ===============================================================
   MODALE FICHE PRODUIT  (6 champs)
   =============================================================== */
.bean-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; }
.bean-modal[hidden]{ display:none; }
.bm-veil{
  position:absolute; inset:0; background:rgba(15,9,5,.74);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s var(--ease);
}
.bean-modal.open .bm-veil{ opacity:1; }
.bm-card{
  position:relative; z-index:2; width:min(1080px,100%); max-height:90svh; overflow:auto;
  display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(24px,3vw,48px);
  background:var(--ivory); color:var(--ink); border:1px solid rgba(80,43,28,.18);
  border-radius:3px; padding:clamp(28px,3vw,48px);
  box-shadow:0 50px 120px -40px rgba(15,9,5,.8);
  transform:translateY(18px) scale(.98); opacity:0;
  transition:transform .5s var(--ease), opacity .45s var(--ease);
}
.bean-modal.open .bm-card{ transform:none; opacity:1; }
.bm-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-dark);
  background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.bm-close:hover{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); transform:rotate(90deg); }
.bm-close svg{ width:18px; height:18px; }
.bm-photo{ align-self:center; }
.bm-photo .ph{ display:block; width:100%; aspect-ratio:1; border-radius:50%; }
.bm-body{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.bm-region{ color:var(--bronze-deep); }
.bm-region.overline::before{ display:none; }   /* pas de petit trait avant le sur-titre de la fiche */
.bm-body h3{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,3.4vw,2.8rem); text-transform:uppercase; letter-spacing:.03em; line-height:1.02; margin:.5rem 0 0; }
.bm-desc{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1.75vw,1.62rem); line-height:1.5; color:var(--ink-soft); margin:1.4rem 0 0; }
.bm-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 30px;
  margin:clamp(1.4rem,3vw,2rem) 0 0; border-top:1px solid var(--line-dark); padding-top:clamp(1.2rem,2vw,1.8rem);
}
.bm-spec span{ display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-deep); margin-bottom:6px; }
.bm-spec strong{ font-family:var(--serif); font-weight:500; font-size:1.1rem; line-height:1.28; }
.bm-spec[hidden]{ display:none; }
.bm-spec.full{ grid-column:1 / -1; }   /* Allergènes sur toute la largeur (texte long) */

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:1024px){
  .coffret-grid{ grid-template-columns:repeat(2,1fr); }
  .coffret-card.lead{ grid-column:span 2; grid-row:span 1; }
  .tab-grid{ grid-template-columns:repeat(2,1fr); }
  .choco-steps{ grid-template-columns:1fr; gap:30px; }
  .gal-fig{ flex-basis:calc((100% - clamp(14px,1.6vw,22px)) / 2); }
  .fam-circles{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:860px){
  .show-card,
  .show-card:nth-child(even){ grid-template-columns:1fr; }
  .show-card:nth-child(even) .sc-media{ order:0; }
  .show-card:nth-child(even) .sc-body{ order:0; }
  .sc-media{ min-height:clamp(220px,52vw,320px); }
  .sujets-split{ grid-template-columns:1fr; gap:clamp(24px,5vw,40px); }
  .ms-band .split{ grid-template-columns:1fr; }
  .ms-media{ min-height:clamp(240px,52vw,340px); }
  .bm-card{ grid-template-columns:1fr; max-width:480px; }
  .bm-photo{ width:min(220px,60%); margin-inline:auto; }
}
@media(max-width:560px){
  .coffret-grid{ grid-template-columns:1fr; }
  .coffret-card.lead{ grid-column:span 1; }
  .coffret-desc{ max-height:90px; opacity:1; }
  .tab-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .gal-fig{ flex-basis:100%; }
  .fam-circles{ grid-template-columns:repeat(2,1fr); gap:30px 18px; }
  .bm-specs{ grid-template-columns:1fr; gap:14px; }
}

/* ===============================================================
   RESPONSIVE MOBILE — ajustements téléphone/tablette
   (aucun effet sur laptop ≥1025px)
   =============================================================== */

/* (A) Menu rapide du hero : réservé au desktop. En dessous, le menu burger
   contient déjà tous les liens de la page → on masque ce menu rapide.
   On autorise aussi le titre du hero à revenir à la ligne : en « nowrap » il
   débordait à droite sur téléphone (titre coupé + défilement horizontal de
   toute la page). « normal » ne renvoie à la ligne que si nécessaire ; sur
   desktop (≥1025px) le titre reste sur une seule ligne. */
@media(max-width:1024px){
  .hero-jump{ display:none; }
  .page-hero .display{ white-space:normal; }
}

/* (B) « Les bouchées » & « Confiseries chocolatées » : sur téléphone, les
   vignettes rondes deviennent un carrousel à défilement — 1 produit bien
   lisible à la fois, avec un aperçu du suivant. Desktop inchangé (grille). */
@media(max-width:560px){
  .fam-circles{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:16px; scrollbar-width:none;
    /* Carrousel pleine largeur (bord à bord) : on annule le gutter du .wrap puis
       on le réintègre en padding, pour que la 1re carte reste alignée au contenu
       tout en laissant la carte suivante déborder joliment jusqu'au bord droit. */
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-block:4px 14px;
    scroll-padding-inline:var(--gutter);
  }
  .fam-circles::-webkit-scrollbar{ display:none; }
  .fam-circles .bean-card{ flex:0 0 78%; scroll-snap-align:center; }
}

/* (C) « L'art du chocolat » : même correctif que « La maison Hubert » sur
   l'accueil — la colonne photo restait étroite (.split.narrow-left, plus
   prioritaire, empêchait le passage en 1 colonne). On force donc 1 colonne :
   grande photo AU-DESSUS, puis le texte. (Téléphone uniquement.) */
@media(max-width:768px){
  #chocolat .split.narrow-left{ grid-template-columns:1fr; gap:26px; }
  #chocolat .split .figure{ order:-1; margin:0; }
  /* width:100% + height:auto : la photo se dimensionne par la LARGEUR (sinon
     l'aspect-ratio partait de la hauteur et débordait l'écran à droite). */
  #chocolat .figure .ph{ aspect-ratio:4/3; width:100%; height:auto; }
}

/* =================================================================
   ORIGINES DU CACAO — carte interactive (même module que Accueil/Cafés)
   Planisphère offline + points cliquables + zoom/déplacement mobile.
   ================================================================= */
.carte{ background:var(--ivory); overflow:hidden; }
.carte-stage{ margin-top:clamp(20px,3vw,40px); }
.carte-map{
  position:relative; width:100%; max-width:1080px; margin-inline:auto;
  aspect-ratio:2/1; background:none; border:0; overflow:visible;
}
.carte-map .map-svg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.map-pins{ position:absolute; inset:0; z-index:2; }
.map-pin{
  position:absolute; transform:translate(-50%,-50%);
  width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.map-pin::before{ /* halo */
  content:""; position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--olive); opacity:.5; animation:pinpulse 2.8s var(--ease) infinite;
}
.map-pin::after{ /* dot */
  content:""; position:relative; width:11px; height:11px; border-radius:50%;
  background:var(--bronze-lt); border:2px solid var(--espresso);
  box-shadow:0 2px 6px rgba(15,9,5,.6); transition:transform .3s var(--ease), background .3s;
}
@keyframes pinpulse{ 0%{ transform:scale(.6); opacity:.55; } 70%{ transform:scale(2.4); opacity:0; } 100%{ opacity:0; } }
.map-pin:hover::after,
.map-pin.active::after{ background:var(--olive); transform:scale(1.5); }
.map-pin.active::before{ background:var(--olive-soft); }
.map-pin .pin-label{
  position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--espresso); color:var(--cream); font-family:var(--body); font-weight:600;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  padding:.4em .7em; border-radius:3px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; box-shadow:0 8px 20px -10px rgba(15,9,5,.7);
}
.map-pin:hover .pin-label,
.map-pin.active .pin-label{ opacity:1; transform:translateX(-50%) translateY(0); }

/* pop-in qui s'ouvre à côté du point cliqué */
.map-popin{
  position:absolute; z-index:6; width:min(250px,74vw);
  background:var(--paper); color:var(--ink); border:1px solid var(--line-dark); border-radius:4px;
  padding:16px 18px; text-align:left;
  box-shadow:0 26px 64px -22px rgba(15,9,5,.45);
  transform:translate(16px,-50%); transform-origin:left center;
  opacity:0; visibility:hidden; transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.map-popin.to-left{ transform:translate(calc(-100% - 16px),-50%); transform-origin:right center; }
.map-popin.open{ opacity:1; visibility:visible; }
.mp-close{
  position:absolute; top:9px; right:10px; width:26px; height:26px; padding:0; cursor:pointer;
  background:none; border:0; color:var(--ink-faint); display:flex; align-items:center; justify-content:center;
  transition:color .25s, transform .25s;
}
.mp-close:hover{ color:var(--ink); transform:rotate(90deg); }
.mp-close svg{ width:15px; height:15px; }
.mp-country{ display:block; font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:1.22rem; line-height:1.08; color:var(--bronze-deep); padding-right:20px; }
.mp-region{ display:block; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink-soft); margin-top:4px; }
.mp-refs-wrap{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line-dark); }
.mp-refs-lbl{ display:block; font-family:var(--body); font-weight:600; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-deep); margin-bottom:9px; }
.mp-refs{ display:flex; flex-wrap:wrap; gap:7px; }
.mp-refs .chip{
  font-family:var(--serif); font-size:.94rem; color:var(--ink);
  background:var(--ivory); border:1px solid var(--line-dark); border-radius:30px; padding:.28em .9em;
}

/* Enveloppe zoomable (img + points) — calque transparent sur laptop (rendu
   identique), cible du zoom/déplacement sur mobile (cf. creations.js). */
.carte .map-zoom{ position:absolute; inset:0; }
.carte .map-zoom-ctrl{ display:none; }

@media(max-width:560px){
  .map-pin{ width:30px; height:30px; }
}

/* =================================================================
   CARTE INTERACTIVE — RESPONSIVE TÉLÉPHONE (≤768px)
   Même comportement que l'accueil et les cafés : fiche centrée à
   l'écran + zoom/déplacement. Aucun effet sur laptop (≥769px).
   ================================================================= */
@media(max-width:768px){
  /* Fiche d'un point centrée à l'écran (plus jamais coupée), fond assombri. */
  .carte .map-popin{
    position:fixed !important; left:50% !important; top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(340px,86vw); max-height:78vh; overflow:auto; z-index:120;
    transition:opacity .22s var(--ease);
    box-shadow:0 0 0 100vmax rgba(15,9,5,.55), 0 26px 64px -22px rgba(15,9,5,.45);
  }
  .carte .map-popin.to-left{ transform:translate(-50%,-50%) !important; }
  .carte .mp-close{ width:38px; height:38px; top:6px; right:6px; }
  .carte .mp-close svg{ width:18px; height:18px; }

  /* Zoom : boutons + / − en bas à droite, déplacement au doigt. */
  .carte .carte-map{ overflow:hidden; }
  .carte .map-zoom{ transform-origin:center center; transition:transform .18s var(--ease); }
  .carte .map-zoom.zoomed{ touch-action:none; }   /* on gère le pan en JS quand zoomé */

  /* Points plus gros et contrastés (cible tactile ~44px + halo clair). */
  .carte .map-pin{ width:44px; height:44px; transition:transform .18s var(--ease); }
  .carte .map-pin::before{ width:16px; height:16px; }
  .carte .map-pin::after{ width:15px; height:15px;
    box-shadow:0 0 0 3px rgba(244,237,224,.9), 0 2px 7px rgba(15,9,5,.6); }
  /* En zoomant, les points gardent une taille constante mais s'écartent et le
     nom du pays s'affiche pour situer la zone. */
  .carte .map-zoom.zoomed .map-pin{ transform:translate(-50%,-50%) scale(var(--inv,1)); }
  .carte .map-zoom.zoomed .map-pin .pin-label{ opacity:1; transform:translateX(-50%) translateY(0); }
  .carte .map-zoom-ctrl{
    display:flex; flex-direction:column; gap:9px;
    position:absolute; right:10px; bottom:10px; z-index:8;
  }
  .carte .map-zoom-ctrl button{
    width:42px; height:42px; border-radius:50%; padding:0; cursor:pointer;
    border:1px solid var(--line-dark); background:var(--paper); color:var(--ink);
    font-family:var(--body); font-size:1.5rem; font-weight:400; line-height:1;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px -10px rgba(15,9,5,.5);
  }
  .carte .map-zoom-ctrl button:active{ transform:scale(.94); }
}

/* Mention de disponibilité sous le nom, dans la fiche produit. */
/* Mention sous le nom : agrandie pour la lisibilité, mais gardée sous la
   taille de la description pour préserver la hiérarchie de la fiche. */
.bm-dispo{ font-family:var(--serif); font-style:italic; font-size:1.14rem; color:var(--bronze-deep); margin:.55rem 0 0; }
/* Le bloc de caractéristiques disparaît entièrement quand aucune ligne n'est renseignée. */
.bm-specs[hidden]{ display:none; }