/* =================================================================
   MAISON HUBERT — Page « Cafés »
   Café du moment · Incontournables (modale) · Carte des origines
   S'appuie sur maison-hubert.css (tokens, header, footer, .ph, .reveal,
   .btn, .page-hero…) et reprend les classes carousel (.coll-nav,
   .coll-dots, .carr-btn).
   ================================================================= */

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

/* ===============================================================
   PAGE HERO
   =============================================================== */
.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:820px; margin-inline:auto; text-align:center; }
.page-hero .display{ margin:.18em 0 0; line-height:.92; font-size:clamp(3rem, min(11vw,12vh), 8rem); }
.page-hero .lead{ margin:clamp(1.2rem,3vh,2rem) 0 0; max-width:74ch; color:var(--cream-soft); }
.page-hero .ph-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
  margin-top:clamp(1.6rem,4vh,2.6rem);
  font-family:var(--body); font-weight:600; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-lt);
}
.page-hero .ph-meta .sep{ width:5px; height:5px; border-radius:50%; background:var(--bronze); opacity:.6; }
.page-hero .hero-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 28px; margin-top:clamp(1.8rem,4vh,2.8rem); }
@media (prefers-reduced-motion: no-preference){
  .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; }
  .page-hero-inner > *:nth-child(4){ animation-delay:.29s; }
  .page-hero-inner > *:nth-child(5){ animation-delay:.37s; }
}

/* ===============================================================
   VIGNETTE GRAIN — composant commun (moment + incontournables)
   =============================================================== */
.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), transform .5s 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); }

/* overlay « + d'infos » au survol — indique que la photo est cliquable */
.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; }

.bean-region{
  font-family:var(--body); font-weight:600; font-size:.66rem; 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.32rem; 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:22ch;
}

/* drapeau « du moment / maison » sur la photo */
.bean-flag{
  position:absolute; z-index:2; left:50%; bottom:9%; transform:translateX(-50%);
  font-family:var(--body); font-weight:600; font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap;
  background:var(--olive); color:var(--espresso); padding:.42em .9em; border-radius:40px;
  box-shadow:0 8px 20px -10px rgba(20,12,8,.7);
}
.bean-flag.house{ background:var(--bronze-lt); }

/* dark context (incontournables) */
.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); }

/* ===============================================================
   TORRÉFACTION — photo (gauche) + texte (droite), sans titre
   =============================================================== */
.roast{ background:var(--ivory); padding-block:clamp(44px,6vw,80px); }
/* Photo du torréfacteur : format paysage (16/10), sans bordure de couleur --
   même ratio que les autres blocs photo + texte du site (Notre Histoire,
   Actualités). Remplace un format 2/3 portrait à bordure olive propre à ce
   bloc, changé à la demande du client. */
.roast-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(44px,6.5vw,88px); align-items:start; }
.roast-media .ph{ aspect-ratio:16/10; max-width:none; border-radius:2px; }
.roast-text > p{ font-family:var(--serif); font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.7; color:var(--ink-soft); margin:0; }
.roast-text > p + p{ margin-top:1em; }
@media(max-width:860px){
  .roast-grid{ grid-template-columns:1fr; gap:clamp(24px,5vw,36px); }
}

/* ===============================================================
   ILLUSTRATIONS D'AMBIANCE (grains / tasse) en filigrane dans les coins
   =============================================================== */
.roast{ overflow:hidden; }
.roast .wrap, .moment .wrap, .incontournables .wrap{ position:relative; z-index:1; }
.caf-accent{
  position:absolute; z-index:0; pointer-events:none; height:auto;
  width:clamp(150px,17vw,290px); color:var(--bronze); opacity:.09;
}
.dark .caf-accent{ color:var(--bronze-lt); opacity:.07; }
.acc-tr{ top:-26px; right:-22px; transform:rotate(8deg); }
.acc-bl{ left:-26px; bottom:-30px; transform:rotate(-8deg); }
.acc-tl{ left:-24px; top:34px; transform:rotate(-12deg); }

/* ===============================================================
   CAFÉ DU MOMENT
   =============================================================== */
.moment{ background:var(--paper); overflow:hidden; }
.moment .center .overline{ color:var(--bronze-deep); }
.moment-stage{ position:relative; margin-top:clamp(40px,5vw,68px); }
.moment-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*var(--bean-gap, 40px)) / 4);
  gap:var(--bean-gap, 40px); align-items:start; will-change:transform;
  transition:transform .6s var(--ease);
}
.moment-track .bean-card{ scroll-snap-align:start; }
.moment .bean-name{ font-size:clamp(1.4rem,1.9vw,1.7rem); }
.moment-nav{ margin-top:clamp(30px,4vw,46px); }

/* ===============================================================
   LES INCONTOURNABLES — 2 lignes × 4, 2 pages
   =============================================================== */
.incontournables{ overflow:hidden; }
.ess-stage{ position:relative; margin-top:clamp(40px,5vw,68px); }
/* carrousel en fondu séquencé : sortie → pause → entrée (les 2 pages empilées) */
.ess-track{ display:grid; }
.ess-page{
  grid-area:1 / 1; min-width:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,2.8vw,44px) clamp(18px,2vw,34px);
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.ess-page.active{ opacity:1; pointer-events:auto; transition:opacity 1s var(--ease); }
.incontournables .bean-photo{ max-width:180px; margin-inline:auto; }
/* nav recentrée : flèche · points · flèche au milieu du bloc */
.incontournables .ess-nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:clamp(28px,3.4vw,46px); }

/* Grille complète : tous les cafés affichés d'un coup (remplace le carrousel) */
.bean-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(34px,3.6vw,56px) clamp(18px,2vw,34px);
  margin-top:clamp(40px,5vw,68px);
}
/* Dernière ligne à 2 fiches sur une grille à 4 colonnes : les centrer (colonnes
   2-3) plutôt que les laisser collées à gauche. :nth-child(4n+1) = début de
   ligne, :nth-last-child(2) = avant-dernière fiche -- combinés, ne matchent
   que si cette ligne-là ne compte justement que 2 fiches, quel que soit le
   nombre total de cafés (pas figé sur les 6 actuels).
   Calée à 4 colonnes uniquement (min-width:961px) : la même règle appliquée
   telle quelle à 2 ou 3 colonnes visait le mauvais rythme de ligne et isolait
   les 2 dernières fiches chacune sur sa propre ligne au lieu de les coller. */
@media(min-width:961px){
  .bean-grid > :nth-child(4n+1):nth-last-child(2){ grid-column-start:2; }
}
@media(max-width:960px){ .bean-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .bean-grid{ grid-template-columns:repeat(2,1fr); gap:34px 18px; } }

/* ===============================================================
   MODALE FICHE CAFÉ — voile sombre + carte centrée
   =============================================================== */
.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(880px,100%); max-height:90svh; overflow:auto;
  display:grid; grid-template-columns:.82fr 1.18fr; 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%; position:relative; overflow:hidden; }
#bmPhoto.has-img{ background:var(--cream); }
#bmPhoto.has-img::after{ display:none; }
#bmPhoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.bm-body{ display:flex; flex-direction:column; min-width:0; }
.bm-region{ color:var(--bronze-deep); }
.bm-body h3{ 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:1.16rem; line-height:1.5; color:var(--ink-soft); margin:1rem 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:.64rem; 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.16rem; line-height:1.25; }
.bm-meter{ display:flex; gap:6px; align-items:center; margin-top:3px; }
.bm-meter span{ width:26px; height:7px; border-radius:2px; background:rgba(80,43,28,.16); }
.bm-meter span.on{ background:var(--olive-deep); }
.bm-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:auto; padding-top:clamp(1.6rem,3vw,2.2rem); }
.bm-foot .btn{ --bg:var(--olive); --fg:var(--espresso); }

/* ===============================================================
   CARTE DES ORIGINES — planisphère offline + pins
   =============================================================== */
.carte{ background:var(--ivory); overflow:hidden; }
/* la carte se fond dans le bloc : pas de cadre, fond crème */
.carte-stage{ margin-top:clamp(36px,5vw,60px); }
.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); }
/* étiquette de survol */
.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 desktop (rendu
   identique), cible du zoom/déplacement sur mobile (cf. cafe.js). */
.carte .map-zoom{ position:absolute; inset:0; }
.carte .map-zoom-ctrl{ display:none; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:860px){
  .moment-track{ grid-auto-columns:calc((100% - var(--bean-gap, 40px)) / 2); }
  .ess-page{ grid-template-columns:repeat(2,1fr); }
  .bm-card{ grid-template-columns:1fr; max-width:480px; }
  .bm-photo{ width:min(220px,60%); margin-inline:auto; }
  .bm-specs{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  :root{ --bean-gap:26px; }
  .moment-track{ grid-auto-columns:78%; }
  .ess-page{ grid-template-columns:repeat(2,1fr); gap:28px 18px; }
  .bm-specs{ grid-template-columns:1fr; gap:14px; }
  .map-pin{ width:30px; height:30px; }
}

/* =================================================================
   CARTE INTERACTIVE — RESPONSIVE TÉLÉPHONE (≤768px)
   Même comportement que l'accueil : fiche centrée à l'écran + zoom.
   Aucun effet sur laptop (≥769px).
   ================================================================= */
@media(max-width:768px){
  /* Fiche d'un point centrée à l'écran (plus jamais coupée), fond assombri,
     croix élargie. On neutralise le positionnement « au point » du JS. */
  .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 (la
     carte grossit dessous) 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); }
}

/* ===== Hero Cafés : titre centré animé lettre par lettre + méta en rotation
   (même traitement que les autres pages — cf. contact.css) ===== */
.page-hero-inner .lead{ margin-inline:auto; }
.page-hero .hero-ph .ph::after{ display:none; } /* pas de label placeholder derrière le contenu centré */

.page-hero .display .ltr{ display:inline; }
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > .display{ animation:none; } /* ce sont les lettres qui s'animent */
  .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; }
  }
}

/* méta : une info à la fois, centrée, en fondu (rotation gérée en JS) */
.page-hero .ph-meta.meta-rotator{
  display:block; position:relative; min-height:1.8em; margin-top:clamp(1.6rem,4vh,2.6rem);
  font-size:clamp(1rem,1.4vw,1.15rem); letter-spacing:.16em;
}
.page-hero .ph-meta.meta-rotator .sep{ display:none; }
.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; }

/* Bloc torréfaction : seconde ligne du titre en retrait de taille. */
#torrefaction .overline .ov-ln-2{ font-size:.7em; letter-spacing:.26em; }

/* ===============================================================
   BANDEAU CITATION — « Notre savoir-faire »
   =============================================================== */
/* La citation de l'accueil tient en 97 signes ; celle-ci en fait 364.
   À la taille d'origine (43 px) elle occupait 12 lignes et le bandeau
   montait à 915 px. Taille réduite pour retrouver l'échelle de l'accueil. */
#signature-cafe .bigquote{ font-size:clamp(1.18rem,1.7vw,1.5rem); line-height:1.45; }
#signature-cafe .qb-media{ min-height:0; }
/* Le bandeau suit « Nos cafés en grain et moulus », qui est déjà en espresso :
   même couleur, les deux blocs se confondaient. Teinte cacao, plus chaude et
   plus claire, + filet pour marquer la coupure. */
#signature-cafe{ background:var(--cocoa-2); border-top:1px solid var(--line-light); }

/* Jauge d'intensité : demi-barre pour les valeurs en ,5 (ex. 4,5). */
.bm-meter span.half{ background:linear-gradient(90deg, var(--olive-deep) 0 50%, rgba(80,43,28,.16) 50% 100%); }