/* ==================================================================
   La carte du pays bedjond
   Une geometrie unique, projetee depuis les frontieres GADM, reutilisee
   sur trois pages. Tout est dans la page : elle fonctionne hors ligne.
   --geo-k porte le grossissement courant : les etiquettes, les reperes
   et les traits gardent ainsi leur taille a l'ecran quel que soit le zoom.
   ================================================================== */
.geo{ margin:0; }
.geo-cadre{
  position:relative;
  max-width:min(100%, 560px); margin-inline:auto;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:var(--glass-shadow);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.geo-svg{
  display:block; width:100%; height:auto;
  aspect-ratio:760 / 1153;     /* pas de bandes vides autour de la carte */
  touch-action:pan-y;          /* un doigt fait defiler la page */
  cursor:default;
}
.geo[data-geo-pret] .geo-svg{ cursor:grab; }
.geo.is-glisse .geo-svg{ cursor:grabbing; }

/* --- fond : departements voisins */
.geo-voisin{
  fill:color-mix(in srgb, var(--sable) 62%, transparent);
  stroke:var(--sable-line); stroke-width:1; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke;
}

/* --- unites */
.geo-u{
  stroke-width:1.3; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:fill .18s ease;
}
.geo[data-geo-pret] .geo-u{ cursor:pointer; }
.geo-u--coeur{ fill:color-mix(in srgb, var(--terre) 20%, var(--ground)); stroke:var(--terre); }
.geo-u--sud{ fill:color-mix(in srgb, var(--savane) 17%, var(--ground)); stroke:var(--savane); }
.geo-u--signale{ fill:var(--geo-hach); stroke:var(--savane); stroke-dasharray:6 4; }
.geo-u--diaspora{ fill:color-mix(in srgb, var(--feuille) 17%, var(--ground)); stroke:var(--feuille); }
.geo-u--coeur:hover{ fill:color-mix(in srgb, var(--terre) 34%, var(--ground)); }
.geo-u--sud:hover, .geo-u--signale:hover{ fill:color-mix(in srgb, var(--savane) 30%, var(--ground)); }
.geo-u--diaspora:hover{ fill:color-mix(in srgb, var(--feuille) 30%, var(--ground)); }
.geo-u.is-choisi{ stroke-width:2.6; }
.geo-u--coeur.is-choisi{ fill:color-mix(in srgb, var(--terre) 42%, var(--ground)); }
.geo-u--sud.is-choisi, .geo-u--signale.is-choisi{ fill:color-mix(in srgb, var(--savane) 38%, var(--ground)); }
.geo-u--diaspora.is-choisi{ fill:color-mix(in srgb, var(--feuille) 38%, var(--ground)); }
.geo-hach-fond{ fill:color-mix(in srgb, var(--savane) 7%, var(--ground)); }
.geo-hach-trait{ stroke:color-mix(in srgb, var(--savane) 45%, transparent); stroke-width:1.6; }

/* --- reperes : taille d'ecran constante grace a --geo-k */
.geo-pt{ pointer-events:none; }
.geo-pt-halo{ fill:var(--ground); r:calc(6px / var(--geo-k, 1)); }
.geo-pt-coeur{ fill:var(--terre); r:calc(2.8px / var(--geo-k, 1)); }
.geo-pt--chef .geo-pt-halo{ r:calc(8.5px / var(--geo-k, 1)); }
.geo-pt--chef .geo-pt-coeur{ fill:var(--terre-dim); r:calc(4.2px / var(--geo-k, 1)); }
.geo-pt--sud .geo-pt-coeur, .geo-pt--signale .geo-pt-coeur{ fill:var(--savane); }
.geo-pt--approx .geo-pt-coeur, .geo-pt--signale .geo-pt-coeur{
  fill:none; stroke:var(--savane); stroke-width:2; vector-effect:non-scaling-stroke;
}
.geo-pt--diaspora .geo-pt-coeur{
  fill:none; stroke:var(--feuille); stroke-width:2; vector-effect:non-scaling-stroke;
}
.geo-pt--approx.geo-pt--coeur .geo-pt-coeur{ stroke:var(--terre); }
.geo-pt.is-choisi .geo-pt-halo{ r:calc(10px / var(--geo-k, 1)); }

/* --- etiquettes */
.geo-nom{
  font-family:"Work Sans", sans-serif; font-weight:600;
  font-size:calc(7px / var(--geo-k, 1));
  fill:var(--ink); paint-order:stroke; stroke:var(--ground);
  stroke-width:calc(1.6px / var(--geo-k, 1)); stroke-linejoin:round;
  pointer-events:none;
}
.geo-nom--chef{ font-family:"Fraunces", Georgia, serif; font-weight:700; font-size:calc(8.5px / var(--geo-k, 1)); }
.geo-nom--sud, .geo-nom--signale{ fill:color-mix(in srgb, var(--savane) 78%, var(--ink)); }
.geo-nom--diaspora{ fill:color-mix(in srgb, var(--feuille) 78%, var(--ink)); }
.geo-nom.is-choisi{ fill:var(--terre-dim); }

/* --- echelle et rose des vents */
.geo-ech-fond{ fill:var(--ground); opacity:.82; }
.geo-ech-trait{ stroke:var(--ink); stroke-width:1.6; fill:none; vector-effect:non-scaling-stroke; }
.geo-ech-txt{ font-family:"Space Mono", monospace; font-size:calc(11px / var(--geo-k, 1)); fill:var(--ink); dominant-baseline:middle; }
.geo-nord-fond{ fill:var(--ground); opacity:.82; }
.geo-nord-aig{ fill:var(--terre); }
.geo-nord-txt{ font-family:"Work Sans", sans-serif; font-weight:700; font-size:11px; fill:var(--ink); }

/* --- commandes */
.geo-outils{ position:absolute; top:.7rem; left:.7rem; display:flex; flex-direction:column; gap:.35rem; }
.geo-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--glass-border); border-radius:var(--r-sm);
  background:var(--glass-bg-solid); color:var(--ink); cursor:pointer;
  box-shadow:var(--glass-shadow); padding:0;
}
.geo-btn svg{ width:19px; height:19px; }
.geo-btn:hover{ background:color-mix(in srgb, var(--terre) 12%, var(--glass-bg-solid)); }
.geo-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.geo-souffle{
  position:absolute; inset:auto 0 0 0; margin:0; padding:.7rem;
  text-align:center; font-size:var(--fs-sm);
  background:color-mix(in srgb, var(--ink) 78%, transparent); color:#fff;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.geo-souffle.is-vu{ opacity:1; }

/* --- legende */
.geo-legende{
  list-style:none; margin:.9rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem;
  font-size:var(--fs-xs); color:var(--ink-soft);
}
.geo-legende li{ display:flex; align-items:center; gap:.4rem; }
.geo-puce{ width:13px; height:13px; border-radius:3px; flex:none; border:1.5px solid var(--terre); background:color-mix(in srgb, var(--terre) 22%, var(--ground)); }
.geo-puce--sud{ border-color:var(--savane); background:color-mix(in srgb, var(--savane) 18%, var(--ground)); }
.geo-puce--signale{ border-color:var(--savane); border-style:dashed; background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--savane) 38%, transparent) 0 2px, transparent 2px 5px); }
.geo-puce--diaspora{ border-color:var(--feuille); background:color-mix(in srgb, var(--feuille) 18%, var(--ground)); }
.geo-puce--approx{ border-radius:50%; background:none; border-color:var(--terre); }

/* --- fiche */
.geo-panneau{ margin-top:1rem; min-height:4.2rem; }
.geo-panneau-vide{ margin:0; font-size:var(--fs-sm); color:var(--ink-soft); }
.geo-fiche{
  border-left:3px solid var(--terre); padding:.15rem 0 .15rem 1rem;
}
.geo-fiche-titre{ margin:0 0 .15rem; font-size:var(--fs-lg); }
.geo-fiche-lieu{ margin:0 0 .5rem; font-family:"Space Mono", monospace; font-size:var(--fs-2xs); letter-spacing:.07em; text-transform:uppercase; color:var(--or-dim); }
.geo-fiche-txt{ margin:0 0 .5rem; font-size:var(--fs-sm); line-height:1.55; max-width:62ch; }
.geo-fiche-src{ margin:0; font-size:var(--fs-2xs); color:var(--ink-soft); }

/* --- liste : le chemin accessible, et le meme pouvoir que la carte */
.geo-liste{
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; gap:.4rem; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.geo-choix{
  width:100%; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr; gap:.1rem .55rem; align-items:center;
  padding:.5rem .7rem; border:1px solid var(--rule); border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--sable) 35%, transparent); color:inherit;
  font-family:inherit; font-size:var(--fs-sm);
}
.geo-choix:hover{ border-color:var(--terre); background:color-mix(in srgb, var(--terre) 8%, transparent); }
.geo-choix:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.geo-choix.is-choisi{ border-color:var(--terre); border-width:2px; padding:calc(.5rem - 1px) calc(.7rem - 1px); background:color-mix(in srgb, var(--terre) 13%, transparent); }
.geo-choix-nom{ font-weight:600; }
.geo-choix-sous{ grid-column:2; font-size:var(--fs-2xs); color:var(--ink-soft); }
.geo-choix .geo-puce{ grid-row:span 2; }

.geo figcaption{ margin-top:.9rem; font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.55; }

@media (max-width:760px){
  /* liste des localités : un bandeau à faire défiler (une ligne au lieu de sept) — même pouvoir que la carte, moins de hauteur */
  .geo-liste{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none;
    gap:.45rem; padding-block:.25rem .55rem;
    margin-inline:calc(-1 * clamp(18px, 5vw, 48px)); padding-inline:clamp(18px, 5vw, 48px); scroll-padding-inline:clamp(18px, 5vw, 48px);
  }
  .geo-liste::-webkit-scrollbar{ display:none; }
  .geo-choix{ flex:0 0 auto; width:auto; min-width:150px; scroll-snap-align:start; }
}
@media (max-width:560px){
  .geo-liste{ grid-template-columns:1fr 1fr; }
  .geo-outils{ top:.5rem; left:.5rem; }
  .geo-btn{ width:34px; height:34px; }
}
@media (prefers-reduced-motion:reduce){
  .geo-u{ transition:none; }
  .geo-souffle{ transition:none; }
}