/* =================================================================
   CARTE INTERACTIVE « ORIGINES » — composant partagé
   (accueil, Cafés, Nos Chocolats). Copie des styles .raw de l'accueil.
   ================================================================= */
.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.
   Bloc à garder synchronisé avec accueil.css, qui sert la même carte sur l'accueil. */
.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; }

@media(max-width:768px){
  .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); }
}