/* =================================================================
   MAISON HUBERT — Accueil : bloc « Nos matières premières »
   Carte du monde en pointillés + menu rapide (matières / chocolats / café)
   + points filtrables et pop-in (réutilise la carte de la page Cafés).
   ================================================================= */
/* Titre « Collection Marseille » : on garde les soleils, on retire les 2 traits */
.overline.ov-suns::before,
.overline.ov-suns::after{ display:none; }

.raw{ background:var(--ivory); overflow:hidden; }

/* légende des catégories (une couleur par type) */
.raw-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; margin:clamp(22px,3.5vw,38px) auto 0; }
.raw-leg{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.raw-leg .dot{ width:12px; height:12px; border-radius:50%; border:1px solid var(--espresso); flex:none; }
.raw-leg[data-cat="matieres"] .dot{ background:#8DA033; }
.raw-leg[data-cat="chocolat"] .dot{ background:#5C3A21; }
.raw-leg[data-cat="cafe"]     .dot{ background:#C9892F; }
/* légende = boutons de filtre cliquables (puces) */
.raw-legend{ gap:10px 12px; }
.raw-legend-cap{ align-self:center; font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.raw-leg{
  cursor:pointer; user-select:none;
  padding:.58em 1.15em; border:1px solid var(--line-dark); border-radius:40px; background:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.raw-leg:hover{ color:var(--espresso); border-color:var(--bronze-deep); background:rgba(46,29,19,.05); }
.raw-legend.filtering .raw-leg{ opacity:.5; }
.raw-legend.filtering .raw-leg.active{ opacity:1; color:var(--cream); background:var(--espresso); border-color:var(--espresso); }
.raw-leg.active .dot{ border-color:var(--cream); }
.raw .map-pin{ transition:opacity .35s var(--ease); }
.raw .map-pin.pin-hidden{ opacity:0; pointer-events:none; }
/* « Le saviez-vous ? » : note affichée quand une catégorie est filtrée */
.raw-facts{ text-align:center; }
.raw-fact{ display:none; max-width:none; margin:clamp(14px,2vw,22px) auto 0; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink-soft); text-wrap:balance; }
.raw-fact.show{ display:block; animation:rawFactIn .45s var(--ease); }
@keyframes rawFactIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* carte (mêmes styles que la page Cafés, scopés .raw) */
.raw-stage{ margin-top:clamp(28px,4vw,52px); }
.raw .carte-map{
  position:relative; width:100%; max-width:1080px; margin-inline:auto;
  aspect-ratio:2/1; background:none; border:0; overflow:visible;
}
.raw .map-svg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.raw .map-pins{ position:absolute; inset:0; z-index:2; }
.raw .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;
  --pin:var(--bronze-lt);
}
/* data-cat peut porter deux catégories (« chocolat cafe ») : sélecteurs par mot. */
.raw .map-pin[data-cat~="matieres"]{ --pin:#8DA033; }
.raw .map-pin[data-cat~="chocolat"]{ --pin:#5C3A21; }
.raw .map-pin[data-cat~="cafe"]{ --pin:#C9892F; }
/* Un pays qui fournit à la fois le cacao et le café : une seule pastille,
   coupée en deux par un filet clair, sinon la moitié brune se confondrait avec
   la bordure espresso et le point paraîtrait uni. */
/* La position de la coupe est déclarée comme propriété typée : sans cela une
   variable CSS n'est pas interpolable et le changement serait sec. Navigateur
   sans @property : la coupe saute, le reste fonctionne. */
@property --split{ syntax:'<percentage>'; inherits:false; initial-value:50%; }
.raw .map-pin[data-cat~="chocolat"][data-cat~="cafe"]{ --pin:#5C3A21; }
.raw .map-pin[data-cat~="chocolat"][data-cat~="cafe"]::after{
  --split:50%;
  /* Filet ramené à un quasi-trait (±0.4px, contre ±1px) : garde tout juste de
     quoi distinguer les deux couleurs sans sauter aux yeux comme avant. */
  background:linear-gradient(90deg,
    #5C3A21 0 calc(var(--split) - .4px),
    var(--cream) calc(var(--split) - .4px) calc(var(--split) + .4px),
    #C9892F calc(var(--split) + .4px) 100%);
  transition:transform .3s var(--ease), --split .45s var(--ease);
}
/* Pendant un filtrage, le point mixte ne montre que la couleur du filtre actif. */
.raw[data-filter="chocolat"] .map-pin[data-cat~="chocolat"][data-cat~="cafe"]::after{ --split:100%; }
.raw[data-filter="cafe"] .map-pin[data-cat~="chocolat"][data-cat~="cafe"]::after{ --split:0%; }
.raw .map-pin::before{ content:""; position:absolute; width:17px; height:17px; border-radius:50%; background:var(--pin); opacity:.45; animation:pinpulse 2.8s var(--ease) infinite; }
.raw .map-pin::after{ content:""; position:relative; width:16px; height:16px; border-radius:50%; background:var(--pin); border:2px solid var(--espresso); box-shadow:0 2px 6px rgba(15,9,5,.6); transition:transform .3s var(--ease); }
@keyframes pinpulse{ 0%{ transform:scale(.6); opacity:.5; } 70%{ transform:scale(2.4); opacity:0; } 100%{ opacity:0; } }
.raw .map-pin:hover::after,
.raw .map-pin.active::after{ transform:scale(1.55); }
.raw .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);
}
.raw .map-pin:hover .pin-label,
.raw .map-pin.active .pin-label{ opacity:1; transform:translateX(-50%) translateY(0); }

/* pop-in à côté du point */
.raw .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);
}
.raw .map-popin.to-left{ transform:translate(calc(-100% - 16px),-50%); transform-origin:right center; }
.raw .map-popin.open{ opacity:1; visibility:visible; }
.raw .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; }
.raw .mp-close:hover{ color:var(--ink); transform:rotate(90deg); }
.raw .mp-close svg{ width:15px; height:15px; }
.raw .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; }
.raw .mp-region{ display:block; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink-soft); margin-top:4px; }
.raw .mp-refs-wrap{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line-dark); }
.raw .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; }
.raw .mp-refs{ display:flex; flex-wrap:wrap; gap:7px; }
.raw .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; }

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

/* Enveloppe zoomable (img + points). Sur desktop : simple calque transparent,
   rendu strictement identique. Sur mobile : cible du zoom/pan (cf. accueil.js). */
.raw .map-zoom{ position:absolute; inset:0; }
.raw .map-zoom-ctrl{ display:none; }

/* =================================================================
   RESPONSIVE TÉLÉPHONE (≤768px) — page d'accueil uniquement.
   Aucun de ces correctifs ne s'applique sur laptop (≥769px).
   ================================================================= */
@media(max-width:768px){

  /* (1) HERO — les boutons « Nos créations / Notre histoire » ne chevauchent
     plus le texte « Maître chocolatier & torréfacteur ». On remonte le bloc
     texte, on descend les CTA et on masque l'indice « Explorer ». */
  body[data-hero="overlay"] .hero-inner{ transform:translateY(-6vh); }
  body[data-hero="overlay"] .hero-cta{ bottom:clamp(56px,9vh,90px); gap:12px 22px; }
  .hero .hero-cta .link-ar{ font-size:1rem; }
  .hero-scroll{ display:none; }

  /* (4) LA MAISON HUBERT — sur mobile la colonne photo restait étroite car
     « .split.narrow-left » (spécificité plus forte) l'emportait sur le passage
     en 1 colonne. On force donc 1 colonne ici : photo EN GRAND au-dessus,
     puis le texte en dessous. */
  #histoire .split.narrow-left{ grid-template-columns:1fr; gap:26px; }
  #histoire .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 pouvait déborder à droite). */
  #histoire .figure .ph{ aspect-ratio:4/3; width:100%; height:auto; }

  /* (5) NOTRE UNIVERS — cartes bien trop hautes sur mobile : 2 colonnes,
     format compact et titres réduits pour rester lisibles. */
  #univers .univers-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  #univers .univ-card{ aspect-ratio:5/6; }
  #univers .univ-card .uc-body{ padding:16px 14px; }
  #univers .univ-card .uc-ic{ margin-bottom:8px; }
  #univers .univ-card .uc-ic svg{ width:24px; height:24px; }
  #univers .univ-card h3{ font-size:1.15rem; }
  #univers .univ-card .uc-ar{ margin-top:9px; font-size:.66rem; }

  /* (6) NOS MATIÈRES PREMIÈRES — la fiche d'un point s'affiche au centre de
     l'écran (plus jamais coupée), sur fond assombri, avec une croix élargie.
     On neutralise le positionnement « au point » calculé en JS. */
  .raw .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;
    box-shadow:0 0 0 100vmax rgba(15,9,5,.55), 0 26px 64px -22px rgba(15,9,5,.45);
  }
  .raw .map-popin.to-left{ transform:translate(-50%,-50%) !important; }
  .raw .mp-close{ width:38px; height:38px; top:6px; right:6px; }
  .raw .mp-close svg{ width:18px; height:18px; }

  /* (7) ZOOM CARTE — boutons + / − en bas à droite pour agrandir la carte
     (points plus gros, plus faciles à toucher). Le pan se fait au doigt. */
  .raw .carte-map{ overflow:hidden; }
  .raw .map-zoom{ transform-origin:center center; transition:transform .18s var(--ease); }
  .raw .map-zoom.zoomed{ touch-action:none; }   /* on gère le pan en JS quand zoomé */

  /* Points plus gros et plus contrastés : cible tactile ~44px + halo clair. */
  .raw .map-pin{ width:44px; height:44px; transition:transform .18s var(--ease); }
  .raw .map-pin::before{ width:16px; height:16px; }
  .raw .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) : moins serrés, bien plus faciles à viser. On
     révèle aussi le nom du pays pour situer la zone géographique. */
  .raw .map-zoom.zoomed .map-pin{ transform:translate(-50%,-50%) scale(var(--inv,1)); }
  .raw .map-zoom.zoomed .map-pin .pin-label{ opacity:1; transform:translateX(-50%) translateY(0); }
  .raw .map-zoom-ctrl{
    display:flex; flex-direction:column; gap:9px;
    position:absolute; right:10px; bottom:10px; z-index:8;
  }
  .raw .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);
  }
  .raw .map-zoom-ctrl button:active{ transform:scale(.94); }
}

/* =================================================================
   LABEL « FABRIQUÉ À MARSEILLE » — bandeau compact (même bloc que la
   page Professionnels). Sur l'accueil les sections voisines sont claires :
   on délimite le bandeau par un filet haut/bas pour qu'il se détache.
   ================================================================= */
.label-band{ background:var(--ivory-2); padding-block:clamp(42px,5.5vw,74px); border-block:1px solid var(--line-dark); }
.label-inner{
  display:flex; align-items:center; gap:clamp(28px,5vw,60px);
  max-width:1200px; margin-inline:auto;
}
.label-text{ flex:1 1 auto; }
.label-logo{
  flex:none; width:clamp(124px,15vw,152px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; display:block;
  box-shadow:0 14px 34px -16px rgba(15,9,5,.45);
}
.label-logo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.22);   /* pousse la marge blanche du PNG hors du cercle */
}
.label-title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,2.5vw,2.05rem); text-transform:uppercase;
  letter-spacing:.03em; line-height:1.1; color:var(--cocoa); margin:0 0 .7rem;
}
.label-text p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.6; margin:0; max-width:none; }
.label-text p + p{ margin-top:.85em; }

@media(max-width:760px){
  .label-band{ padding-block:clamp(44px,10vw,60px); }
  .label-inner{ flex-direction:column; text-align:center; gap:24px; }
  .label-text p{ margin-inline:auto; }
}

/* Bloc Histoire : cadre photo plus large que haut (demande client). */
#histoire .figure .ph{ aspect-ratio:16/15; border:3px solid rgba(196,193,47,.6); }
/* Cormorant Garamond utilise des chiffres elzéviriens : le 4 et le 9 descendent
   sous la ligne de base. Chiffres alignés dans l'adresse pour un rendu régulier. */
#histoire .col-pad p{ font-variant-numeric:lining-nums; }