/* ─────────────────────────────────────────────────────────────────
   pf-umap – intégration de cartes uMap (OpenStreetMap France)
   ─────────────────────────────────────────────────────────────────
   Reprend la grammaire de .pf-map-facade : rien n'est demandé au
   serveur tiers avant le clic (RGPD). La différence est ailleurs :
   une carte uMap porte des ZONES et une légende. Elle ne se lit pas
   sans son mode d'emploi, donc la légende est un élément du
   composant, pas un calque à l'intérieur de l'iframe – elle reste
   lisible façade fermée, et sert de filtre une fois ouverte.

   Trois variantes :
     .pf-umap--panel   carte + légende côte à côte, pleine section
     .pf-umap--inline  carte seule 16/9 au fil du texte
     .pf-umap--aside   colonne étroite : vignette + « ouvrir en grand »

   Dépend de : charte-v2.css (tokens), pf-umap.js
   À charger après components.css, avant warmth-v3.css
   ───────────────────────────────────────────────────────────────── */

.pf-umap {
   margin: 0;
   border: 1px solid var(--rule, rgba(15, 45, 133, .14));
   border-radius: 16px;
   background: var(--paper, #fff);
   overflow: hidden
}

.pf-umap__head {
   padding: 26px 28px 20px;
   border-bottom: 1px solid var(--rule, rgba(15, 45, 133, .14))
}

.pf-umap__head .pf-eyebrow {
   margin-bottom: 12px
}

.pf-umap__title {
   font-family: 'LeonXIV', 'Jost', sans-serif;
   font-weight: 800;
   text-transform: uppercase;
   font-size: clamp(20px, 2.4vw, 27px);
   line-height: 1.02;
   margin: 0;
   color: var(--navy, #0F2D85)
}

.pf-umap__intro {
   margin: 12px 0 0;
   max-width: 62ch;
   font-size: 15.5px;
   line-height: 1.65;
   color: var(--ink-soft, #47506f)
}

/* ── Scène : façade puis iframe, jamais les deux ── */
.pf-umap__stage {
   position: relative;
   min-height: 340px;
   background: var(--navy-050, #eef1fb)
}

.pf-umap__stage iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   position: absolute;
   inset: 0
}

.pf-umap__facade {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   justify-items: center;
   gap: 14px;
   padding: 28px;
   text-align: center
}

/* pf-umap.js masque la façade par l'attribut hidden. Or hidden ne vaut
   display:none que dans la feuille du NAVIGATEUR, la moins prioritaire
   de toutes : le display:grid ci-dessus, écrit en feuille auteur, le
   battait. La façade restait donc posée en inset:0 par-dessus l'iframe,
   bouton et mention RGPD compris, et captait tous les clics – carte
   visible mais inerte. Constaté en production le 18 septembre 2026.
   Ne pas retirer cette ligne en croyant hidden suffisant : la règle de
   la ligne précédente le neutralise à nouveau. */
.pf-umap__facade[hidden] {
   display: none
}

.pf-umap__facade-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .5;
   filter: grayscale(.5) sepia(.12) hue-rotate(175deg) saturate(1.3)
}

.pf-umap__facade>* {
   position: relative;
   z-index: 1
}

.pf-umap__open {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: inherit;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
   font-size: 13px;
   padding: 14px 24px;
   border: 0;
   border-radius: 999px;
   background: var(--navy, #0F2D85);
   color: #fff;
   cursor: pointer;
   box-shadow: 0 18px 40px -18px rgba(9, 29, 90, .55);
   transition: background .2s, transform .2s
}

.pf-umap__open:hover {
   background: var(--navy-900, #091d5a);
   transform: translateY(-1px)
}

.pf-umap__open:focus-visible {
   outline: 2px solid var(--navy-900, #091d5a);
   outline-offset: 3px
}

.pf-umap__open svg {
   width: 17px;
   height: 17px
}

.pf-umap__rgpd {
   margin: 0;
   max-width: 44ch;
   font-size: 12.5px;
   line-height: 1.55;
   color: var(--ink-soft, #47506f)
}

.pf-umap__rgpd a {
   color: var(--navy-900, #091d5a)
}

/* ── Barre d'outils, une fois la carte ouverte ── */
.pf-umap__tools {
   position: absolute;
   right: 10px;
   bottom: 25px;
   z-index: 2;
   display: none;
   gap: 8px
}

.pf-umap.is-open .pf-umap__tools {
   display: flex
}

.pf-umap__tool {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-family: inherit;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .03em;
   padding: 9px 14px;
   border: 1px solid var(--rule, rgba(15, 45, 133, .14));
   border-radius: 999px;
   background: #fff;
   color: var(--navy-900, #091d5a);
   text-decoration: none;
   cursor: pointer
}

.pf-umap__tool:hover {
   background: var(--navy-050, #eef1fb)
}

.pf-umap__tool svg {
   width: 14px;
   height: 14px
}

/* ── Légende / filtres de calques ── */
.pf-umap__legend {
   padding: 24px 28px
}

.pf-umap__legend-title {
   margin: 0 0 14px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--ink-mute, #7b83a0)
}

.pf-umap__zones {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 2px
}

.pf-umap__zone {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: start;
   gap: 12px;
   width: 100%;
   text-align: left;
   font-family: inherit;
   padding: 10px 12px;
   border: 0;
   border-radius: 10px;
   background: none;
   color: inherit;
   cursor: default
}

.pf-umap__zone[data-layer] {
   cursor: pointer
}

.pf-umap__zone[data-layer]:hover {
   background: var(--navy-050, #eef1fb)
}

.pf-umap__zone[aria-pressed="false"] {
   opacity: .42
}

.pf-umap__swatch {
   width: 15px;
   height: 15px;
   margin-top: 3px;
   border-radius: 4px;
   background: var(--sw, var(--navy, #0F2D85));
   box-shadow: inset 0 0 0 1px rgba(9, 29, 90, .25)
}

.pf-umap__zone-name {
   display: block;
   font-weight: 600;
   font-size: 14.5px;
   line-height: 1.3;
   color: var(--ink, #14224e)
}

.pf-umap__zone-desc {
   display: block;
   margin-top: 3px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--ink-soft, #47506f)
}

.pf-umap__foot {
   margin-top: 18px;
   padding-top: 16px;
   border-top: 1px solid var(--rule, rgba(15, 45, 133, .14));
   display: grid;
   gap: 10px
}

.pf-umap__foot a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--navy-900, #091d5a);
   text-decoration: none
}

.pf-umap__foot a:hover {
   text-decoration: underline
}

.pf-umap__foot svg {
   width: 15px;
   height: 15px;
   flex: none
}

.pf-umap__credit {
   margin: 14px 0 0;
   font-size: 11.5px;
   line-height: 1.5;
   color: var(--ink-mute, #7b83a0)
}

.pf-umap__credit a {
   color: var(--ink-mute, #7b83a0)
}

/* ── Variante panel : légende à droite ── */
.pf-umap--panel .pf-umap__body {
   display: grid;
   grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr)
}

.pf-umap--panel .pf-umap__stage {
   min-height: 480px
}

.pf-umap--panel .pf-umap__legend {
   border-left: 1px solid var(--rule, rgba(15, 45, 133, .14))
}

/* ── Variante inline : carte seule, légende en bandeau ── */
.pf-umap--inline .pf-umap__stage {
   min-height: 0;
   aspect-ratio: 16/9
}

.pf-umap--inline .pf-umap__legend {
   border-top: 1px solid var(--rule, rgba(15, 45, 133, .14))
}

.pf-umap--inline .pf-umap__zones {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.pf-umap--inline .pf-umap__foot {
   display: flex;
   flex-wrap: wrap;
   gap: 22px
}

/* ── Variante france : carte nationale, la carte EST la page ──
   La France entière tient mal dans un 16/9 : on lui donne un cadre
   haut et la légende passe à gauche, parce qu'ici elle se lit avant
   la carte (« quel type de lieu je cherche »). Le décompte en tête
   de légende remplace un titre de section : il dit tout de suite
   que la couverture est nationale. */
.pf-umap--france .pf-umap__body {
   display: grid;
   grid-template-columns: minmax(260px, .85fr) minmax(0, 2fr)
}

.pf-umap--france .pf-umap__legend {
   border-right: 1px solid var(--rule, rgba(15, 45, 133, .14));
   order: -1
}

.pf-umap--france .pf-umap__stage {
   min-height: 620px
}

.pf-umap__count {
   display: block;
   font-family: 'LeonXIV', 'Jost', sans-serif;
   font-weight: 800;
   font-size: 40px;
   line-height: 1;
   color: var(--navy, #0F2D85);
   margin: 0 0 4px
}

.pf-umap__count-label {
   display: block;
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--ink-soft, #47506f);
   margin: 0 0 22px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--rule, rgba(15, 45, 133, .14))
}

.pf-umap__hint {
   margin: 16px 0 0;
   padding: 12px 14px;
   background: var(--navy-050, #eef1fb);
   border-radius: 10px;
   font-size: 13px;
   line-height: 1.55;
   color: var(--ink-soft, #47506f)
}

.pf-umap__hint b {
   color: var(--ink, #14224e)
}

/* ── Variante aside : la carte ne s'ouvre qu'en plein écran ── */
.pf-umap--aside {
   border-radius: 14px
}

.pf-umap--aside .pf-umap__stage {
   min-height: 0;
   aspect-ratio: 4/3
}

.pf-umap--aside .pf-umap__head {
   padding: 20px 20px 16px
}

.pf-umap--aside .pf-umap__title {
   font-size: 18px
}

.pf-umap--aside .pf-umap__legend {
   padding: 16px 20px 20px
}

.pf-umap--aside .pf-umap__zone {
   padding: 7px 8px;
   gap: 10px
}

.pf-umap--aside .pf-umap__zone-name {
   font-size: 13.5px
}

.pf-umap--aside .pf-umap__zone-desc {
   display: none
}

.pf-umap--aside .pf-umap__rgpd {
   display: none
}

/* ── Plein écran : <dialog>, pas un faux calque en position fixed ── */
/* dvh et non vh : sur mobile, 100vh est la hauteur barre d'URL RÉTRACTÉE,
   toujours plus grande que le viewport réellement visible. La fenêtre
   débordait donc par le bas, et ce débordement se parcourait au doigt –
   le geste destiné à déplacer la carte faisait glisser la page. dvh suit
   le viewport courant, barre d'URL comprise. */
.pf-umap-modal {
   width: min(1280px, 96vw);
   height: min(860px, 92dvh);
   padding: 0;
   border: 0;
   border-radius: 16px;
   overflow: hidden;
   background: var(--paper, #fff)
}

/* Colonne barre + corps, et le corps prend ce qui reste. Le display va
   sur [open] et JAMAIS sur .pf-umap-modal nu : un <dialog> fermé est
   masqué par le display:none de la feuille du navigateur, qu'un display
   auteur écraserait – la fenêtre serait ouverte en permanence, même
   piège que le hidden de la façade plus haut.
   min-height:0 sur le corps : sans lui, un élément flex refuse de
   descendre sous la hauteur de son contenu et l'iframe déborderait. */
.pf-umap-modal[open] {
   display: flex;
   flex-direction: column
}

.pf-umap-modal__body {
   flex: 1;
   min-height: 0
}

/* showModal() empêche de CLIQUER hors de la fenêtre, mais ne bloque pas
   le DÉFILEMENT du document : rien dans la spec ne le prévoit. En tactile,
   le geste de déplacer la carte n'atteignait donc pas l'iframe, il faisait
   défiler la page dessous – carte en grand mais impossible à bouger.
   Mesuré le 18 septembre 2026 : fenêtre ouverte, un scrollTo(0,600)
   déplaçait bien la page. pf-umap.js pose pf-umap-fige sur <html> le temps
   de la fenêtre, et overscroll-behavior coupe le chaînage du défilement.
   ponytail: overflow:hidden suffit à partir d'iOS 16 ; si un iPhone plus
   ancien défile encore, passer à position:fixed + restauration du
   scrollTop, nettement plus lourd. */
html.pf-umap-fige {
   overflow: hidden;
   overscroll-behavior: none
}

.pf-umap-modal::backdrop {
   background: rgba(9, 29, 90, .72)
}

.pf-umap-modal__bar {
   flex: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 14px 18px;
   border-bottom: 1px solid var(--rule, rgba(15, 45, 133, .14))
}

.pf-umap-modal__title {
   margin: 0;
   font-family: 'LeonXIV', 'Jost', sans-serif;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 16px;
   letter-spacing: .02em;
   color: var(--navy, #0F2D85)
}

.pf-umap-modal__close {
   font-family: inherit;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
   padding: 9px 16px;
   border: 1px solid var(--rule, rgba(15, 45, 133, .14));
   border-radius: 999px;
   background: #fff;
   color: var(--navy-900, #091d5a);
   cursor: pointer
}

.pf-umap-modal__close:hover {
   background: var(--navy-050, #eef1fb)
}

/* 100% du corps, qui est désormais un vrai conteneur de hauteur connue.
   Ce fut calc(100% - 53px) : 53px était la hauteur SUPPOSÉE de la barre,
   et surtout le pourcentage se résolvait contre un parent sans hauteur,
   donc il était ignoré et l'iframe retombait sur les 150px par défaut du
   navigateur. C'est ce qui donnait une carte en bandeau collée en haut,
   au plein écran mobile comme au bouton « Plein écran » du desktop. */
.pf-umap-modal iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0
}

/* ── Index des cartes : réutilise .pf-grid + .pf-card--tile de cards.css.
      Seule addition : l'étiquette d'échelle en haut de vignette. ── */
.pf-umap-scale {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--navy, #0F2D85);
   background: var(--navy-050, #eef1fb);
   padding: 5px 11px;
   border-radius: 999px
}

@media (max-width:1024px) {

   .pf-umap--panel .pf-umap__body,
   .pf-umap--france .pf-umap__body {
      grid-template-columns: 1fr
   }

   .pf-umap--panel .pf-umap__stage {
      min-height: 0;
      aspect-ratio: 4/3
   }

   .pf-umap--france .pf-umap__stage {
      min-height: 0;
      aspect-ratio: 3/4
   }

   .pf-umap--panel .pf-umap__legend {
      border-left: 0;
      border-top: 1px solid var(--rule, rgba(15, 45, 133, .14))
   }

   .pf-umap--france .pf-umap__legend {
      border-right: 0;
      border-bottom: 1px solid var(--rule, rgba(15, 45, 133, .14))
   }

   .pf-umap--panel .pf-umap__zones {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr))
   }
}

@media (max-width:768px) {
   .pf-umap__head {
      padding: 22px 20px 18px
   }

   .pf-umap__legend {
      padding: 20px
   }

   /* Une carte à zones dans un cadre de 340 px ne se lit pas : sur
     mobile la façade envoie directement au plein écran. */
   .pf-umap--panel .pf-umap__stage,
   .pf-umap--inline .pf-umap__stage {
      aspect-ratio: 1/1
   }

   .pf-umap--france .pf-umap__stage {
      aspect-ratio: 1/1
   }

   .pf-umap__count {
      font-size: 34px
   }

   .pf-umap-modal {
      width: 100vw;
      height: 100dvh;
      max-width: none;
      max-height: none;
      border-radius: 0
   }
}

@media (max-width:480px) {
   .pf-umap__stage {
      min-height: 260px
   }

   .pf-umap__open {
      font-size: 12px;
      padding: 12px 18px
   }

   .pf-umap--inline .pf-umap__foot {
      gap: 12px
   }
}