/* Carte des escapades (extension mlebret-carte-escapades).
   Structure du composant (spec 2.2) et couleurs PAR DEFAUT, celles de la piste Carnet.

   Pour habiller la carte, un theme enfant redefinit les variables ci-dessous sur :root
   (et leurs valeurs de nuit sur body.wp-night-mode-on), sans toucher a cette feuille.
   Les valeurs par defaut sont posees avec :where() : specificite nulle, n'importe quelle regle du theme les remplace.
   Les variables --carte-* ne sont JAMAIS redefinies la nuit : la carte garde son style pastel.

   Mode nuit (extension wp-night-mode) : elle ecrit `body.wp-night-mode-on * { background: #1e1e1e; color: #ededed }`
   (0,1,1) et `body.wp-night-mode-on a { color: #ead8a1 }` (0,1,2) apres les feuilles. Chaque regle de ce fichier qui
   pose une couleur ou un fond est donc ecrite avec au moins deux classes, et passe par une variable qui change la nuit. */

/* ================= variables : jour ================= */
:where(:root) {
  --surface: #FFFFFF;
  --surface-teintee: #F8EBED;
  --texte: #2F2528;
  --texte-2: #6B6166;
  --decor: #C7788B;
  --focus: #2F2528;
  --bordure: #F3D9DE;
  --puce-fond: #F3D9DE;
  --puce-texte: #2F2528;
  --bulle-fond: #FFF8F0;
  --carte-cadre-fond: #FFFFFF;
  --lieu-fond: #E4EBE0;
  --lieu-bord: #B5C8AE;
  --lieu-texte: #2F2528;
  --ombre-bulle: 0 4px 12px rgba(47, 37, 40, 0.12);

  /* contrat de la carte, lu par carte.js (valeurs de rayon et de largeur sans unite) */
  --carte-point: #8F455C;
  --carte-point-bord: #FFF8F0;
  --carte-groupe-fond: #F3D9DE;
  --carte-groupe-bord: #C7788B;
  --carte-groupe-texte: #2F2528;
  --carte-ctrl-fond: #FFFFFF;
  --carte-ctrl-texte: #2F2528;
  --carte-point-rayon: 6;
  --carte-point-rayon-survol: 8;
  --carte-point-bord-largeur: 2;
  --carte-anneau-rayon: 11;
  --carte-anneau-couleur: #C7788B;
  --carte-anneau-largeur: 1.5;
}

/* ================= variables : nuit (hors --carte-*) ================= */
:where(body.wp-night-mode-on) {
  --surface: #2A2327;
  --surface-teintee: #332C2F;
  --texte: #F6F4F4;
  --texte-2: #B9B0B3;
  --decor: #DEA1AE;
  --focus: #EBC2CA;
  --bordure: #4D4448;
  --puce-fond: #6B3045;
  --puce-texte: #F8EBED;
  --bulle-fond: #2A2327;
  --carte-cadre-fond: #2A2327;
  --lieu-fond: #2E3D2C;
  --lieu-bord: #3F5B3C;
  --lieu-texte: #F6F4F4;
}

/* ================= section ================= */
.carte-escapades { clear: both; margin: 0 0 32px; text-align: left; }
/* Le cadre de la carte et sa phrase d'intro ne s'affichent que si le JavaScript tourne : l'extension pose la classe
   `mlce-js` sur <html> dès le head, et la retire si carte.js n'a pas démarré au chargement de la page. Sans JavaScript,
   ou script bloqué, il ne reste que le titre et la liste (jamais un cadre vide de 420 px qui dit « chargement »). */
.carte-escapades .carte-escapades__intro { display: none; }
html.mlce-js .carte-escapades .carte-escapades__intro { display: block; }
html.mlce-js .carte-escapades.carte-escapades--sans-carte .carte-escapades__intro { display: none; }
.carte-escapades [hidden] { display: none !important; }

.carte-escapades .carte-escapades__titre {
  margin: 0 0 4px; padding: 0; font-family: var(--police-titre, inherit); font-size: 22px; line-height: 28px; font-weight: 700;
  letter-spacing: 0; text-transform: none; text-align: left; color: var(--texte);
}
.carte-escapades .carte-escapades__intro { margin: 0 0 12px; font-size: 16px; line-height: 22px; font-weight: 400; color: var(--texte-2); }
@media (max-width: 600px) { .carte-escapades .carte-escapades__titre { font-size: 20px; line-height: 26px; } }

/* hauteur reservee des le premier rendu : decalage de mise en page nul */
.carte-escapades .carte-escapades__carte {
  display: none; position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; max-height: 420px; overflow: hidden;
  padding: 4px; border: 2px dotted var(--decor); border-radius: 12px;
  background-color: var(--carte-cadre-fond); color: var(--texte); font: inherit;
}
html.mlce-js .carte-escapades .carte-escapades__carte { display: block; }
.carte-escapades .carte-escapades__carte .maplibregl-canvas-container,
.carte-escapades .carte-escapades__carte .maplibregl-canvas { border-radius: 8px; }
.carte-escapades .carte-escapades__attente {
  position: absolute; inset: 4px; z-index: 2; box-sizing: border-box; margin: 0; padding: 16px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 8px; background-color: var(--surface-teintee); color: var(--texte-2); font-size: 14px; line-height: 20px;
}

/* controles et credits de MapLibre : sa typographie d'origine (le cadre herite sinon des 16 px du blog) */
.carte-escapades .carte-escapades__carte .maplibregl-ctrl { font: 12px/20px var(--police, sans-serif); }

/* focus visible */
.carte-escapades :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.carte-escapades :focus:not(:focus-visible) { outline: none; }

/* mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  .carte-escapades, .carte-escapades * { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ================= liste de repli : de vrais liens, 36 px de haut, 8 px entre eux ================= */
.carte-escapades .carte-escapades__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.carte-escapades .carte-escapades__liste li { margin: 0; padding: 0; list-style: none; }
.carte-escapades .carte-escapades__liste li a {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--bordure); background-color: var(--surface); color: var(--texte);
  font-size: 15px; line-height: 20px; font-weight: 700; text-decoration: none;
}
.carte-escapades .carte-escapades__liste li a:hover,
.carte-escapades .carte-escapades__liste li a:focus { background-color: var(--puce-fond); color: var(--puce-texte); }
.carte-escapades .carte-escapades__liste li a:not([data-slug]) { color: var(--texte-2); }
.carte-escapades .carte-escapades__liste li a:not([data-slug]):hover,
.carte-escapades .carte-escapades__liste li a:not([data-slug]):focus { color: var(--puce-texte); }

/* ================= bulles MapLibre ================= */
.carte-escapades__bulle.maplibregl-popup { max-width: 280px; }
.carte-escapades__bulle .maplibregl-popup-content {
  width: 232px; padding: 0 0 12px; overflow: hidden; border: 1px solid var(--bordure); border-radius: 12px;
  background-color: var(--bulle-fond); color: var(--texte); box-shadow: var(--ombre-bulle);
  font-family: var(--police, inherit); font-size: 14px; line-height: 20px;
}
/* la nuit, l'extension peint chaque element : tout ce qui est dans la bulle reprend la couleur de la bulle */
.carte-escapades__bulle .maplibregl-popup-content * { color: inherit; background-color: transparent; }
.carte-escapades__bulle .maplibregl-popup-close-button {
  top: 0; right: 0; width: 44px; height: 44px; padding: 6px; background-clip: content-box; border-radius: 999px;
  background-color: var(--bulle-fond); color: var(--texte); font-size: 22px; line-height: 32px; text-align: center;
}
.carte-escapades__bulle .maplibregl-popup-content .maplibregl-popup-close-button { background-color: var(--bulle-fond); color: var(--texte); }
.carte-escapades__bulle .maplibregl-popup-content .maplibregl-popup-close-button:hover { background-color: var(--surface-teintee); }
.carte-escapades__bulle.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.carte-escapades__bulle.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.carte-escapades__bulle.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--bulle-fond); }
.carte-escapades__bulle.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.carte-escapades__bulle.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.carte-escapades__bulle.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--bulle-fond); }
.carte-escapades__bulle.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bulle-fond); }
.carte-escapades__bulle.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bulle-fond); }

.carte-escapades__bulle .carte-bulle { width: 232px; }
.carte-escapades__bulle .carte-bulle .carte-bulle__img { display: block; width: 232px; height: 131px; border-radius: 0; object-fit: cover; background-color: var(--surface-teintee); }
.carte-escapades__bulle .carte-bulle .carte-bulle__titre { margin: 12px 12px 4px; font-size: 16px; line-height: 21px; font-weight: 700; }
.carte-escapades__bulle .carte-bulle .carte-bulle__titre a { color: var(--texte); text-decoration: none; }
.carte-escapades__bulle .carte-bulle .carte-bulle__titre a:hover { text-decoration: underline; text-decoration-color: var(--decor); text-underline-offset: 3px; }
.carte-escapades__bulle .carte-bulle .carte-bulle__titre::after { content: ""; display: block; width: 32px; margin-top: 8px; border-top: 2px dotted var(--decor); }
.carte-escapades__bulle .carte-bulle .carte-bulle__lieu { margin: 8px 12px 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--texte-2); }
.carte-escapades__bulle .carte-bulle .carte-bulle__lieu * { color: var(--texte-2); }

/* bulle de liste (points confondus) : jusqu'a quatre entrees sans defilement, au-dela elle defile */
.carte-escapades__bulle .carte-bulle .carte-bulle__entete { margin: 12px 12px 4px; padding-right: 36px; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--texte-2); }
.carte-escapades__bulle .carte-bulle .carte-bulle__liste { margin: 0; padding: 0 4px; list-style: none; max-height: 224px; overflow-y: auto; }
.carte-escapades__bulle .carte-bulle .carte-bulle__liste li { margin: 0; padding: 0; list-style: none; }
.carte-escapades__bulle .carte-bulle .carte-bulle__ligne {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px; border-radius: 8px;
  color: var(--texte); text-decoration: none;
}
.carte-escapades__bulle .carte-bulle .carte-bulle__ligne:hover { background-color: var(--surface-teintee); }
.carte-escapades__bulle .carte-bulle .carte-bulle__vignette { flex: none; width: 64px; height: 36px; border-radius: 4px; object-fit: cover; background-color: var(--surface-teintee); }
.carte-escapades__bulle .carte-bulle .carte-bulle__ligne-texte {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14px; line-height: 18px; font-weight: 700; color: var(--texte);
}

/* bulle compacte sous 600 px : elle doit tenir au-dessus du point dans le cadre de 300 px */
@media (max-width: 600px) {
  .carte-escapades__bulle .carte-bulle .carte-bulle__titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .carte-escapades__bulle .carte-bulle .carte-bulle__img { height: 110px; }
}

/* ================= la carte garde son habillage pastel la nuit : controles et credits restent clairs ================= */
/* l'extension de nuit peint chaque element de MapLibre en #1e1e1e : conteneurs, icones, credits et bulle repassent en transparent,
   puis les groupes de controles et les credits retrouvent leur fond clair (regles ecrites apres, donc gagnantes a specificite egale) */
body.wp-night-mode-on .carte-escapades__carte .maplibregl-canvas-container,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-top-left,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-top-right,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-bottom-left,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-bottom-right,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl button,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-icon,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib-button,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib-inner,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib-inner a,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-popup,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-popup-tip { background-color: transparent; }
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-group { background-color: var(--carte-ctrl-fond); }
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib,
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib.maplibregl-compact { background-color: var(--carte-ctrl-fond); }
/* :is(body, body#blog) donne a ces liens la force d'un identifiant, plus que `body#blog a` d'un theme habille */
:is(body, body#blog).wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib,
:is(body, body#blog).wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib *,
:is(body, body#blog).wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib a,
:is(body, body#blog).wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib a:hover,
:is(body, body#blog).wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib a:visited { color: var(--carte-ctrl-texte); }
/* message « deux doigts » ou « Ctrl + molette » : l'habillage d'origine de MapLibre */
body.wp-night-mode-on .carte-escapades__carte .maplibregl-cooperative-gesture-screen { background-color: rgba(0, 0, 0, 0.4); color: #ffffff; }
body.wp-night-mode-on .carte-escapades__carte .maplibregl-cooperative-gesture-screen * { background-color: transparent; color: #ffffff; }
/* Icones de MapLibre 5.24.0 (leurs propres SVG), restaurees la nuit : la regle de l'extension `background: #1e1e1e` les efface. */
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50%; }
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50%; }
body.wp-night-mode-on .carte-escapades__carte .maplibregl-ctrl-attrib-button { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50%; }

/* ================= puce de lieu dans l'extrait (allumee par le theme : add_filter( 'mlce_lieu_dans_extrait', '__return_true' )) ================= */
.post-excerpt .escapade-lieu {
  display: inline-block; margin: 0 0 8px; padding: 3px 12px; border: 1px solid var(--lieu-bord); border-radius: 999px;
  background-color: var(--lieu-fond); color: var(--lieu-texte); font-size: 13px; line-height: 20px; font-weight: 700; font-style: normal;
}

/* passage utilisateur reel du 08/10 : cibles de 44 px au doigt (pastilles et boutons de zoom) */
@media (pointer: coarse) {
  .carte-escapades .carte-escapades__liste li a { min-height: 44px; }
  .carte-escapades .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}