/* Fond de carte lu par le script : les tuiles ne couvrent que la France */
:root { --map-bg: #f2efe9; }
/* Contour des départements SUR LE FOND DE CARTE — distinct de --choro-stroke,
 * qui est calibré sur le fond blanc de la carte SVG. Ici le trait est posé sur
 * des tuiles OSM, que le thème sombre assombrit (raster-brightness-max .6) :
 * mesuré, un vert-gris moyen y tombe à 1,65:1 et la France se lit comme un
 * terrain sans aucune limite départementale. En sombre, le trait passe donc
 * en clair (mesuré 3,6:1 sur le terrain assombri). */
:root { --map-dep-line: #74846f; }
@media (prefers-color-scheme:dark){:root{--map-bg:#1a211c;--map-dep-line:#d7dfd3;}}

/* Layout mobile‑first : colonne unique */
.carte{display:flex;flex-direction:column;gap:var(--sp-4);}

/* Contrôles du formulaire */
.carte-controls{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;}
.carte-controls .field{flex:1 1 12rem;min-width:0;}
.carte-controls select{max-width:100%;}

/* Boîte des calques (dépliable) */
.carte-layers-box{border:1px solid var(--c-border);border-radius:var(--r-1);background:var(--c-surface);}
.carte-layers-box[hidden]{display:none;}
@media (scripting:enabled){.carte-layers-box[hidden]{display:block;visibility:hidden;}}
.carte-layers-box>summary{
  min-height:var(--touch);
  display:flex;
  align-items:center;
  padding:0 var(--sp-3);
  cursor:pointer;
  font-weight:600;
}
.carte-layers{
  /* fieldset : pas de bordure, padding conforme au design */
  border:0;
  background:none;
  box-shadow:none;
  margin:0;
  padding:0 var(--sp-3) var(--sp-3);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.carte-layers label{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:var(--touch);
}
.carte-mode{margin:0;display:flex;flex-direction:column;}

/* Statistiques en ligne dans le panneau */
.carte-panel .carte-stats{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-1) var(--sp-3);
  align-items:baseline;
  margin:0 0 var(--sp-3);
}
.carte-panel .carte-stats>div{display:contents;}
.carte-panel .carte-stats dt{margin:0;}
.carte-panel .carte-stats dd{
  margin:0;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
/* Précision sur un total : elle ne doit pas se lire comme un second chiffre. */
.carte-stats__note{
  font-weight:400;
  font-size:var(--fs-0);
  color:var(--c-muted);
  white-space:nowrap;
}

/* Carte */
.carte-map{
  position:relative;
  height:min(70vh,32rem);
  border:1px solid var(--c-border);
  border-radius:var(--r-1);
  overflow:hidden;
  background:var(--map-bg);
}
@media (max-width:639px){.carte-map{height:22rem;}}
.carte-map .carte-svg{margin:0;height:100%;}
.carte-map .carte-svg svg{width:100%;height:100%;display:block;}
.carte-map.is-gl .carte-svg{display:none;}
.carte-gl{position:absolute;inset:0;}

/* Panneau */
.carte-panel{min-width:0;}
.carte-panel .card-list{grid-template-columns:1fr;}
.carte-panel .skeleton{height:6rem;border-radius:var(--r-1);}

/* Attribution */
.carte-attrib{font-size:var(--fs-0);color:var(--c-muted);margin:0;}

/* Fullscreen (override) */
.is-fullscreen{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;z-index:10000!important;border-radius:0!important;margin:0!important;}

/* Badge compteur */
.mk-count{
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  font:700 11px var(--font);
  color:var(--mk-stroke);
  text-shadow:0 0 2px var(--mk-annonce);
}
.maplibregl-marker.mk-count{pointer-events:none;line-height:1;}

/* Overrides MapLibre */
.carte-map .maplibregl-map{font:inherit;}
.carte-map .maplibregl-popup{z-index:2;}
.carte-map .maplibregl-popup-content{
  background:var(--c-surface);
  color:var(--c-text);
  font-size:var(--fs-0);
  line-height:1.35;
  padding:var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border-radius:var(--r-1);
  box-shadow:var(--sh-2);
}
.carte-map .maplibregl-popup-content a{color:var(--c-accent);}
.carte-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--c-surface);}
.carte-map .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--c-surface);}
.carte-map .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--c-surface);}
.carte-map .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--c-surface);}
.carte-map .maplibregl-popup-close-button{
  width:var(--touch);
  height:var(--touch);
  font-size:1.25rem;
  line-height:1;
  color:var(--c-muted);
}
.map-popup{font:inherit;margin:0;}
.carte-map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{
  background:color-mix(in srgb,var(--c-surface) 75%, transparent);
  margin:0;
  padding:0 var(--sp-1);
  font-size:0.6875rem;
  line-height:1.3;
}
.carte-map .maplibregl-ctrl-attrib a{color:var(--c-muted);text-decoration:none;}
.carte-map .maplibregl-ctrl-attrib a:hover,
.carte-map .maplibregl-ctrl-attrib a:focus-visible{color:var(--c-text);text-decoration:underline;}
.maplibregl-ctrl-attrib-button{display:none;}
.carte-map .maplibregl-ctrl-group{background:var(--c-surface);}
.carte-map .maplibregl-ctrl-group button{min-width:var(--touch);min-height:var(--touch);}
@media (prefers-color-scheme:dark){
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1);}
  .carte-map .maplibregl-cooperative-gesture-screen{background:rgba(0,0,0,.55);}
}
.carte-map .maplibregl-cooperative-gesture-screen{
  font:600 var(--fs-0) var(--font);
  padding:var(--sp-4);
}
.carte-map .map-fullscreen{
  width:var(--touch);
  height:var(--touch);
  padding:0;
  border:0;
  border-radius:var(--r-1);
  background:var(--c-surface);
  color:var(--c-text);
  font-size:1.125rem;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--sh-1);
}
.carte-map .map-fullscreen:hover{background:var(--c-surface-2);}
.carte-map .maplibregl-canvas:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px;}
.carte-map .maplibregl-ctrl-group button:focus-visible,
.carte-map .map-fullscreen:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:1px;
  box-shadow:none;
}

/* Layout desktop (≥1024 px) */
@media (min-width:1024px){
  .carte{
    display:grid;
    grid-template-columns:minmax(0,1fr) 22rem;
    /* 5e ligne : la légende des points de suivi, sous celle du dégradé. */
    grid-template-rows:auto auto 1fr auto auto;
    column-gap:var(--sp-4);
    row-gap:var(--sp-3);
    align-items:start;
  }
  .carte-map{
    grid-column:1;
    grid-row:1 / span 3;
    height:min(calc(100vh - 2rem), 44rem);
    min-height:32rem;
    align-self:start;
    position:sticky;
    top:var(--sp-4);
  }
  .carte-controls{grid-column:2;grid-row:1;}
  .carte-panel{grid-column:2;grid-row:2;margin:0;}
  .carte-layers-box{grid-column:2;grid-row:3;}
  /* Deux légendes empilées sous la carte : celle du dégradé, puis celle des
     points de suivi. Sans ligne distincte, la seconde se posait par-dessus la
     première — les deux textes se chevauchaient à l'écran. */
  .carte #carte-legend{grid-column:1;grid-row:4;}
  .carte #carte-legend-suivi{grid-column:1;grid-row:5;}
  .carte .carte-attrib{grid-column:1 / -1;}
  .carte-layers label{min-height:2rem;}
}

/* Réduction des animations si l’utilisateur le demande */
@media (prefers-reduced-motion:reduce){
  .carte-map *{animation:none!important;transition:none!important;}
}

/* Table « Annonces par département » repliée tant qu'il n'y a aucune annonce :
 * 101 lignes de zéros ne doivent pas faire les trois quarts de la page. */
.carte-table-box{border:1px solid var(--c-border);border-radius:var(--r-1);background:var(--c-surface);}
.carte-table-box>summary{
  min-height:var(--touch);
  display:flex;
  align-items:center;
  padding:0 var(--sp-3);
  cursor:pointer;
  font-weight:600;
}
.carte-table-box[open]>summary{border-bottom:1px solid var(--c-border);}
.carte-table-box>.table-wrap{padding:var(--sp-3);}

/* Chevron des sections repliables : summary est en flex, ce qui supprime le
 * triangle natif de Chrome et, avec lui, l'indice qu'on peut déplier. */
.carte-layers-box>summary::after,
.carte-table-box>summary::after{
  content:"";
  margin-inline-start:auto;
  width:.45rem;
  height:.45rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.carte-layers-box[open]>summary::after,
.carte-table-box[open]>summary::after{transform:rotate(-135deg);}

/* Bulle d'un point de suivi RingFollow. Elle ne porte que trois lignes : la
 * nature du point, sa classe d'effectif ou son nombre, et la note de position
 * approchée — mise en retrait pour se lire comme une réserve, pas comme une
 * donnée. La mise en forme vit ici et non dans une option className : la bulle
 * partagée de la carte n'est créée qu'une fois, par la première couche qui la
 * demande. */
.bulle-suivi strong{display:block;}
.bulle-suivi__note{
  display:block;
  margin-top:var(--sp-1,.25rem);
  /* Pas de font-size réduite : le contenu de la bulle est déjà à --fs-0
   * (14 px), et le .85em du plan y aurait posé la réserve de position à 12 px.
   * C'est la phrase qui dit au lecteur que le point n'est pas un lieu : elle se
   * distingue par la couleur, jamais en devenant illisible au doigt. */
  color:var(--c-muted, inherit);
}