.nearby-map-page {
    min-height: 100dvh;
    overflow: hidden;
    background: var(--hp-page-bg);
    /* LA HAUTEUR REELLE DE L'EN-TETE PUBLIC AU POUCE, ET RIEN D'AUTRE.
     *
     * Elle valait 54px. L'en-tete en mesure 118 a 375px — deux rangees :
     * respiration 10, marque et gestes 44, gouttiere 10, recherche 44,
     * respiration 10. Soixante-quatre pixels d'erreur, qui poussaient tout le
     * bas du volet SOUS le pli : la poignee et la premiere ligne de resultat
     * finissaient derriere la barre basse.
     *
     * Aucune formule CSS ne peut mesurer un frere. Cette valeur est donc
     * recopiee, et c'est un risque : apps/core/test_carte_lisible.py la
     * RECALCULE depuis site-header-public.css a chaque execution et rougit des
     * qu'elles divergent. Une constante sans contrat derive en silence. */
    /* LA HAUTEUR DE L'EN-TETE, RECOPIEE FAUTE DE POUVOIR MESURER UN FRERE.
       Elle valait 118 : deux respirations de 10, deux rangees de 44 et 46, une
       gouttiere de 10. Le lot du pouce (08/09) a resserre les respirations a 6,
       la gouttiere a 6 et la recherche a la cible tactile de 44 — l'en-tete
       dessine desormais 106. Sans cette mise a jour, la coque de carte serait
       douze points trop courte et c'est le bas du volet qui paierait.
       `apps/core/test_carte_lisible.test_la_hauteur_d_entete_recopiee_est_encore_la_bonne`
       refait l'addition a chaque execution : cette copie ne peut plus deriver
       en silence. */
    --nearby-header-height: 106px;
    --nearby-map-gap: 10px;
    --nearby-sheet-collapsed: calc(116px + env(safe-area-inset-bottom));
    /* LE VOLET REND DE LA CARTE.
     *
     * Il occupait 36dvh au repos — 240px des 667 — sur un ecran ou la carte
     * elle-meme n'en gardait que deux cents une fois l'en-tete et la barre
     * basse deduites. Une carte qu'on ne voit pas ne sert a rien, et c'est la
     * moitie de « confus et pas lisible ».
     *
     * 32dvh, soit 213px : la poignee, la ligne de compte et deux resultats
     * entiers. Le reste se tire du doigt. */
    --nearby-sheet-peek: min(32dvh, 268px);
    --nearby-sheet-expanded: calc(100% - 106px);
}

/* NI LA RECHERCHE NI LE PIED NE SONT MASQUES ICI.
 *
 * La recherche : la carte reemploie celle de l'en-tete, qui vise /carte/ sur
 * cette surface. Un module deja servi ne se redessine pas.
 *
 * Le pied : il est ABSENT, declare vide dans le gabarit — pas masque. Un pied
 * rendu puis cache coute son balisage a chaque visite et reste dans l'arbre du
 * document. Ce qui ne doit pas paraitre ne doit pas etre rendu.
 */

.nearby-map-page .page-shell {
    width: 100%;
    min-height: calc(100dvh - var(--nearby-header-height) - var(--hp-bottom-nav-height, 0px));
    margin: 0;
}

.nearby-map-shell {
    width: 100%;
    height: calc(100dvh - var(--nearby-header-height) - var(--hp-bottom-nav-height, 0px));
    min-height: 420px;
    overflow: hidden;
}

/* LA PATERNITÉ DES DONNÉES A SA PLACE RÉSERVÉE, ET LA CARTE LA LUI CÈDE.
 *
 * Sur cette page le corps ne défile pas (`overflow: hidden` sur `body` et sur
 * la coque) : un bloc ajouté après la carte est rogné sans un mot. La coque
 * rend donc à la mention exactement la hauteur qu'elle occupe. Cinquante
 * points de carte pour une obligation de licence : ce n'est pas négociable, et
 * c'est le prix de la seule page qui montre TOUS les repères. */
.nearby-map-page {
    --nearby-paternite-height: 50px;
}

.nearby-map-page .nearby-map-shell {
    height: calc(
        100dvh - var(--nearby-header-height)
        - var(--hp-bottom-nav-height, 0px)
        - var(--nearby-paternite-height)
    );
}

/* LES FILTRES QUITTENT LA CARTE.
 *
 * Le bloc de commandes etait pose EN SURIMPRESSION (`position: absolute`) sur
 * la carte, avec une roue crantee qui ouvrait un panneau flottant par-dessus.
 * Trois couches sur la meme surface : les tuiles, le mobilier, le volet. C'est
 * la moitie du « confus et pas lisible » de Julien.
 *
 * L'application devient une colonne : le mobilier occupe sa propre rangee, la
 * carte prend tout le reste. Ne flottent plus au-dessus des tuiles que le zoom
 * de Leaflet, « Me localiser » et le volet des resultats.
 *
 * ATTENTION EN TOUCHANT A CE BLOC : ni `transform`, ni `filter`, ni
 * `backdrop-filter`, ni `contain` ici. Chacun creerait un bloc conteneur pour
 * tout descendant en `position: fixed` — un pixel de `transform` suffit — et le
 * volet mobile atterrirait en haut de l'ecran. */
.nearby-map-app {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #DFE8DC;
    isolation: isolate;
}

.nearby-map-controls {
    z-index: 35;
    display: grid;
    gap: 6px;
    padding: 7px 8px;
    border: 0;
    border-bottom: 1px solid rgba(223, 212, 195, .8);
    background: var(--hp-surface-warm);
    box-shadow: none;
}

/* LE TITRE EST LU, PAS AFFICHE — ET IL EST TOUJOURS RENDU.
 *
 * Il etait en `display: none`. Or c'est le H1 de la page, et le nom accessible
 * de la section de carte (`aria-labelledby`). La recette « hors de l'ecran »
 * le garde dans l'arbre pour qui l'ecoute, sans lui donner une ligne que la
 * recherche de l'en-tete dit deja. */
.nearby-map-controls__headline {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nearby-map-controls__headline p,
.nearby-map-controls__headline h1 {
    margin: 0;
}

.nearby-map-controls__headline h1 {
    color: var(--hp-green);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: .98;
}

/* =====================================================================
 * LES PASTILLES DE TYPE
 *
 * Elles etaient quatre boutons dessines pour cette page seule, enfermes dans
 * un panneau que la roue crantee ouvrait. Ce sont maintenant des `.ui-chip` —
 * le gabarit de puce du site, defini une fois dans static/css/ui/fusion.css,
 * avec ses etats de survol, d'appui et de focus deja tenus. On n'ajoute ici que
 * ce que fusion.css ne peut pas savoir : la mise en rangee, et le compte.
 * ===================================================================== */

.nearby-map-families {
    display: flex;
    gap: 6px;
    /* Une rangee qui defile, comme les pastilles du hero de /explorer/ :
       quatre familles qui s'enroulent couteraient deux rangees a la carte. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    /* LE BORD QUI S'EFFACE MANQUAIT ICI (08/09), ET IL MANQUAIT DEPUIS LE
       DEBUT. L'accueil l'avait recu ; cette rangee-la, qui defile pour les
       memes raisons et porte une famille de plus, restait tranchee net au bord
       droit — quatre familles avec leurs comptes demandent 419 points pour 374
       de large. Une rangee coupee sans degrade ne dit pas qu'elle continue :
       elle dit qu'elle s'arrete.
       Le prefixe accompagne la propriete : les WKWebView anterieures a Safari
       15.4 ignorent `mask-image` EN SILENCE, et le correctif serait invisible
       sur le telephone qui a signale le defaut.
       Le glyphe des familles est resserre a 15 points comme dans le hero :
       meme rangee, meme dessin, meme taille d'une page a l'autre. */
    --ui-icon-xs: 15px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}

.nearby-map-families::-webkit-scrollbar {
    display: none;
}

.nearby-map-family {
    flex: 0 0 auto;
    /* La puce du site fait 44px de haut : c'est la cible tactile. Sur une
       rangee de filtres au-dessus d'une carte, on la resserre a 36 — elle reste
       au-dessus du minimum de 32px que le pouce distingue, et elle rend huit
       pixels a la carte. */
    min-height: 36px;
    padding: 5px 9px 5px 11px;
    font-size: .72rem;
}

/* LE COMPTE : CE QUE LE FILTRE DONNERA SI ON LE TOUCHE.
 *
 * Un filtre muet demande au visiteur de le tester pour savoir s'il vaut le
 * geste — et sur une carte, un filtre qui rend zero point ressemble a une
 * panne. Le chiffre supprime l'essai. */
.nearby-map-family__count {
    display: inline-grid;
    min-width: 19px;
    min-height: 19px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(223, 232, 220, .8);
    color: var(--hp-green);
    font-size: .66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nearby-map-family[aria-pressed="true"] .nearby-map-family__count {
    background: rgba(255, 253, 247, .82);
}

.nearby-map-load-more {
    width: 100%;
    min-height: var(--tap-size);
    border: 1px solid var(--hp-border-strong);
    border-radius: 8px;
    background: var(--hp-surface);
    color: var(--hp-green);
    font-size: 0.7rem;
    font-weight: 700;
}

.nearby-map-load-more:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -4px;
}

/* La vue de carte n'est plus une surimpression : elle occupe la seconde
   rangee de la colonne, et la toile Leaflet la remplit. */
.nearby-map-viewport {
    position: relative;
    min-height: 0;
}

.nearby-map-canvas {
    position: absolute;
    inset: 0;
}

.nearby-map-canvas {
    z-index: 1;
    overflow: hidden;
    background: #DFE8DC;
}

.nearby-map-canvas .leaflet-tile-pane {
    filter: saturate(.72) contrast(.86) brightness(1.08);
    opacity: .72;
}

.nearby-map-loading {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-muted);
    font-size: .85rem;
    font-weight: 700;
}

/* Il etait a 102px du haut pour passer sous la recherche et sous la roue
   crantee, toutes deux posees sur la carte. Elles n'y sont plus : il remonte
   dans le coin, la ou on cherche ce bouton sur toutes les cartes du monde. */
.nearby-map-locate {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 32;
    display: inline-flex;
    min-height: var(--tap-size);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(255, 253, 247, .78);
    border-radius: 999px;
    background: rgba(36, 90, 59, .94);
    color: var(--hp-surface-warm);
    box-shadow: 0 16px 34px rgba(27, 29, 24, .22);
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.nearby-map-results {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: var(--nearby-sheet-peek);
    min-height: var(--nearby-sheet-collapsed);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    border: 1px solid var(--hp-border-strong);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: rgba(255, 253, 247, .985);
    box-shadow: 0 -18px 48px rgba(27, 29, 24, .18);
    backdrop-filter: blur(18px) saturate(1.08);
    transition: height 220ms ease;
}

.nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-results {
    height: var(--nearby-sheet-collapsed);
}

.nearby-map-shell[data-sheet-state="expanded"] .nearby-map-results {
    height: var(--nearby-sheet-expanded);
}

.nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-status {
    display: none;
}

.nearby-map-results__handle {
    display: grid;
    grid-row: 1;
    justify-self: center;
    width: 74px;
    min-height: var(--tap-size);
    place-items: center;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

.nearby-map-results__handle:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -4px;
}

.nearby-map-results__handle::before {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(95, 102, 93, .32);
    content: "";
}

/* L'EN-TETE TIENT SUR UNE LIGNE, ET LE COMPTE Y TIENT AVEC LE TITRE.
 *
 * Il en prenait DEUX : « Points proches », puis dessous « 151 lieux · les 12
 * plus proches en liste ». Mesure au navigateur du 09/09 sur heop.fr, iPhone
 * 390x844, tiroir entrouvert et visiteur localise : 38 points d'en-tete pour
 * 91 points de liste — UN resultat entier et un morceau du second. Le compte
 * est un fait utile ; il ne vaut pas une ligne entiere quand cette ligne coute
 * un resultat.
 *
 * La grille a DEUX colonnes existait deja. Ce qui faisait la seconde ligne,
 * c'etait le <div> du gabarit qui enfermait le titre ET le compte dans la
 * premiere. Il a disparu : le titre occupe la colonne elastique, le compte la
 * colonne libre, et les deux sont poses sur la MEME LIGNE DE BASE — deux corps
 * differents alignes sur un meme trait se lisent comme une phrase, pas comme
 * deux blocs empiles.
 *
 * LES DEUX PEUVENT SE COUPER, ET C'EST VOULU. Le titre d'un onglet peut faire
 * une phrase (« Ca commence dans moins de 1 h 30 ») et le compte peut porter
 * un lieu (« 132 lieux autour de Lorient »). Chacun a donc `minmax(0, …)` et
 * l'ellipse : ce qui se perd est la FIN de chacun, c'est-a-dire sa partie la
 * moins portante — jamais le nombre, jamais le premier mot du titre. */
.nearby-map-results__header {
    position: relative;
    z-index: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 5px;
    background: rgba(255, 253, 247, .985);
}

.nearby-map-results__header h2,
.nearby-map-status {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nearby-map-results__header h2 {
    color: var(--hp-ink);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.15;
}

.nearby-map-status {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.nearby-map-list {
    display: grid;
    grid-row: 3;
    min-height: 0;
    overflow: auto;
    /* CENT QUATRE PIXELS DE VIDE EN BAS DE LISTE, QUI NE SERVAIENT PLUS.
     *
     * Ils compensaient la barre basse, qui recouvrait le bas du volet quand la
     * coque debordait sous le pli — consequence de la hauteur d'en-tete fausse
     * corrigee plus haut. La coque s'arrete maintenant AU-DESSUS de la barre
     * basse : ce vide ne compense plus rien, il volait un resultat et demi. */
    /* LA GOUTTIERE N'EST PLUS ICI, ELLE EST DANS LA PEINTURE DE LA LIGNE.
     * Six points de `gap` entre deux lignes, c'etaient six points de rien du
     * tout multiplies par le nombre de lignes. La ligne mesure maintenant 44
     * points — sa CIBLE — et ne s'en peint que 38 : les trois points laisses
     * en haut et en bas font la meme respiration, sans rien couter en plus. */
    gap: 0;
    /* LES LIGNES NE S'ETIRENT PAS POUR REMPLIR LE VIDE.
     * Une grille repartit son espace libre entre ses rangees automatiques :
     * trois resultats dans un tiroir deploye devenaient trois paves de cent
     * quarante points, contenu centre au milieu du vide. Sur un marche
     * fourni, personne ne le voyait — la liste debordait toujours. Sur une
     * base de recette a trois points, c'etait tout l'ecran. Une ligne fait sa
     * hauteur, et le vide reste en bas. */
    align-content: start;
    padding: 0 0 2px;
    overscroll-behavior: contain;
    transition: opacity 180ms ease;
}

/* =====================================================================
 * LA LIGNE DE RESULTAT
 *
 * Elle portait une pastille de couleur avec une lettre dedans, un titre, et un
 * « Voir » — c'est-a-dire trois fois rien pour choisir entre vingt-quatre
 * points. Elle porte maintenant ce qui fait choisir : la photo reelle, le NOM
 * sur une ligne, la COMMUNE dessous, et la DISTANCE en gros a droite.
 *
 * DEUX LIGNES, ET DEUX SEULEMENT. La ligne avait grossi a trois — nom sur
 * deux lignes, pastille de type, raison sociale · commune · distance — et sur
 * la capture de Julien (05/09, 148 lieux) la troisieme mordait sur le bord bas
 * de chaque element. C'est le contenu qui a ete ramene a deux lignes.
 *
 * LE COMBIEN, LUI, EST DIT JUSTE DESSOUS et il a change le 09/09 : la ligne
 * mesure 44 points — sa cible — et n'en peint que 38.
 * ===================================================================== */

/* LA CIBLE FAIT 44, LA PEINTURE EN FAIT 38 — ET LA VIGNETTE TIENT DEDANS.
 *
 * DEUX DEFAUTS MESURES LE 09/09 SUR heop.fr, ET LE SECOND EST UN VRAI BOGUE.
 *
 *   1. Julien, telephone en main : « ya moyen de faire plus compact ». Une
 *      ligne coutait 50 points au tiroir — 44 de ligne et 6 de gouttiere — et
 *      le tiroir entrouvert n'en montrait qu'une et demie.
 *
 *   2. LA VIGNETTE DEBORDAIT DE SA LIGNE, sans que rien ne le dise. La ligne
 *      est un `<button>` : Chrome tire sa hauteur intrinseque du contenu en
 *      FLUX de son bloc anonyme, et un enfant de grille a hauteur fixe n'y
 *      entre pas. Mesure au navigateur : `clientHeight` 42 pour un
 *      `scrollHeight` de 53 — la vignette de 46 points debordait de onze
 *      points une boite qui n'en faisait que 42, et sa photo mordait sur les
 *      lignes voisines. Une hauteur d'element qui suit le TEXTE seul, avec une
 *      image plus grande que lui, ne peut que deborder : c'est ce que la
 *      capture montrait sans qu'on sache le nommer.
 *
 * LA REPONSE EST CELLE DU BOUTON DE ZOOM (09/09) : on separe la CIBLE de la
 * PEINTURE. Le bouton garde ses 44 points — le plancher du depot, et celui de
 * WCAG 2.5.5 — et c'est un pseudo-element pose a trois points du haut et du
 * bas qui porte le cadre, le fond et l'ombre. Trente-huit points peints,
 * quarante-quatre points sous le doigt, zero gouttiere a payer : les lignes se
 * suivent sans se toucher et se touchent sans se rater.
 *
 * LA VIGNETTE TOMBE A 34 POINTS, ce qui la fait TENIR dans les 44 de la cible
 * quoi que fasse le texte. `test_points_proches_compacts` verrouille cette
 * inegalite — vignette + respiration <= cible — plutot qu'un nombre : le jour
 * ou l'un des deux bouge, c'est le RAPPORT qui doit rester vrai.
 *
 * C'est un `<button>` et non un lien : sur une carte, le geste qu'on cherche
 * est « ou est-ce ? », pas « emmene-moi ailleurs ». Il surligne son marqueur,
 * l'amene sous les yeux, et ouvre sa bulle — c'est la bulle qui mene a la
 * fiche. */
.nearby-map-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 0 8px;
    align-items: center;
    width: 100%;
    min-height: var(--tap-size);
    padding: 0 9px 0 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--hp-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* LA PEINTURE DE LA LIGNE. Elle est en `::before` et non sur le bouton pour
   que la cible garde ses 44 points pendant que le cadre n'en montre que 38. */
.nearby-map-item::before {
    position: absolute;
    z-index: 0;
    inset: 3px 0;
    border: 1px solid rgba(223, 212, 195, .76);
    border-radius: 12px;
    background: rgba(255, 253, 247, .96);
    content: "";
}

/* Le contenu passe DEVANT la peinture : sans cela, un pseudo-element pose
   apres le contenu dans l'ordre de peinture recouvrirait le nom. */
.nearby-map-item > * {
    position: relative;
    z-index: 1;
}

.nearby-map-item:hover,
.nearby-map-item.is-active {
    text-decoration: none;
}

.nearby-map-item:hover::before,
.nearby-map-item.is-active::before {
    border-color: rgba(200, 97, 56, .26);
    background: var(--hp-surface);
    box-shadow: 0 10px 20px rgba(27, 29, 24, .08);
}

.nearby-map-item:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -4px;
}

/* LA PHOTO REELLE, ET DES INITIALES QUAND IL N'Y EN A PAS.
 *
 * Une `<img>` sans source dessine l'icone d'image cassee du navigateur : le
 * visiteur lit « c'est en panne » la ou il n'y a rien a montrer. Le script ne
 * sert donc l'image que si le serveur en donne une, et ce carre porte les
 * initiales sinon. */
.nearby-map-item__media {
    position: relative;
    display: block;
    overflow: hidden;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--item-color, var(--hp-green));
}

.nearby-map-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L'AVATAR A INITIALES — LA COULEUR DU TERROIR, PAS UN « ? ».
 *
 * IL ETAIT ECRIT DEUX FOIS DANS CETTE FEUILLE, et c'est ce qui a efface les
 * photos. La premiere ecriture le posait `absolute; inset: 0` par-dessus la
 * vignette ; la seconde, six cents lignes plus bas, lui donnait un DEGRADE
 * OPAQUE. Domaine Pithon servait sa photo d'equipe, le script posait bien son
 * <img> — et l'ecran montrait un aplat orange, sur toutes les lignes.
 *
 * `hidden` ne pouvait pas le sauver : `[hidden] { display: none }` vit dans la
 * feuille du NAVIGATEUR, et n'importe quel `display` d'auteur la bat. Le piege
 * est deja raconte dans account-profile.css. La regle vit donc a UN seul
 * endroit desormais, et elle porte sa propre garde juste dessous. */
.nearby-map-item__initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--hp-orange, #C86138), var(--hp-vert, #245A3B));
    color: #FFFDF7;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.nearby-map-item__initials[hidden] {
    display: none;
}

.nearby-map-item__copy {
    display: grid;
    min-width: 0;
    gap: 0;
    justify-items: start;
}

/* LE TYPE EST UN POINT, PAS UNE PASTILLE. La famille est deja dite par
   l'onglet presse et par la forme du marqueur ; dans la liste, un point de la
   couleur du marqueur devant le nom fait le pont, sans prendre une ligne. Le
   mot reste dans le noeud (lecteur d'ecran via l'aria-label du bouton,
   infobulle, contrats) : `font-size: 0` le retire de l'oeil, pas du document. */
.nearby-map-item__type {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: var(--item-color, var(--hp-green));
    vertical-align: 1px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

/* LA DISTANCE, EN GROS, A DROITE.
 *
 * C'est le critere de choix sur une carte : on ne compare pas vingt-quatre
 * titres, on compare vingt-quatre distances. Elle etait rendue au milieu d'une
 * ligne de sous-titre, en 0.7rem gris, apres le nom du vendeur et la ville. */
.nearby-map-item__distance {
    display: grid;
    justify-items: end;
    gap: 1px;
    text-align: right;
}

/* DEUX REGLES SE DISPUTAIENT LA DISTANCE, ET LA MAUVAISE GAGNAIT.
 * `.nearby-map-item__distance em` (0,1,1) et `.nearby-map-item em` (0,1,1)
 * font la MEME specificite : c'est la derniere ecrite qui l'emportait, et elle
 * disait 0,7rem en orange la ou celle-ci — commentee « la distance, EN GROS,
 * a droite » — annoncait 0,96rem en vert. Le commentaire decrivait une regle
 * que le navigateur n'appliquait pas. Il n'en reste qu'une. */
.nearby-map-item__distance em {
    white-space: nowrap;
    color: var(--hp-green);
    font-size: .9rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.nearby-map-item--orange { --item-color: var(--hp-orange); }
.nearby-map-item--green { --item-color: var(--hp-green); }
.nearby-map-item--blue { --item-color: #27627A; }
.nearby-map-item--amber { --item-color: #BA7A12; }
.nearby-map-item--terracotta { --item-color: #A64F31; }
.nearby-map-item--muted { --item-color: #6B7568; }

.nearby-map-item strong,
.nearby-map-item small,
.nearby-map-item em {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

/* LE NOM : gras, UNE ligne, ellipse. Il en prenait deux ; c'est l'infobulle
   native (nearby-map.js pose `title`) et l'aria-label qui rendent le nom
   entier — pas une seconde ligne qui pousse la commune hors du cadre. */
/* LE NOM DOMINE : il gagne deux dixiemes de rem pendant que la commune en
   perd quatre centiemes. La hierarchie ne se dit pas par la couleur seule —
   un gras encre au-dessus d'un maigre attenue se lit d'un coup d'oeil. */
.nearby-map-item strong {
    display: block;
    white-space: nowrap;
    color: var(--hp-ink);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.22;
}

/* LA COMMUNE : petite, attenuee, une ligne. Elle dit OU, et c'est tout ce
   qu'elle a a dire — la raison sociale a quitte cette ligne le 05/09. */
.nearby-map-item small {
    display: block;
    white-space: nowrap;
    color: var(--hp-muted);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
}

.nearby-map-empty {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px dashed rgba(223, 212, 195, .88);
    border-radius: 14px;
    background: rgba(255, 248, 236, .62);
}

.nearby-map-empty strong,
.nearby-map-empty p {
    margin: 0;
}

.nearby-map-empty strong {
    color: var(--hp-ink);
    font-size: .86rem;
    font-weight: 700;
}

.nearby-map-empty p {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

/* L'ETAT DU PANNEAU — la reponse de l'onglet quand il n'a rien a lister, ou
   quand il annonce ce qui suit. Il porte la meme boite que « Aucun point » :
   c'est la meme place dans la liste, et le visiteur n'a pas a apprendre une
   seconde forme. Ce qu'il ajoute : un geste (« Autour de moi ») et, pour
   « Dormir », l'appel aux pros — donc une respiration entre les lignes. */
.nearby-map-etat {
    gap: 7px;
}

.nearby-map-etat__appel {
    margin: 0;
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.nearby-map-etat__appel a {
    color: var(--hp-green);
    font-weight: 700;
}

.nearby-map-empty--compact {
    gap: 2px;
    padding: 9px 10px;
    border-style: solid;
    background: rgba(223, 232, 220, .42);
}

.nearby-map-empty--compact strong {
    color: var(--hp-green);
    font-size: 0.7rem;
}

.nearby-map-empty--compact p {
    font-size: 0.7rem;
    line-height: 1.2;
}

.nearby-map-canvas .leaflet-control-attribution,
.nearby-map-canvas .leaflet-control-zoom a {
    border-color: var(--hp-border-strong);
    background: rgba(255, 253, 247, .94);
    color: var(--hp-ink);
}

.nearby-map-canvas .leaflet-top.leaflet-left {
    top: 92px;
    left: 8px;
}

/* LE ZOOM REMONTE DANS LE COIN, ET LES 92 POINTS ETAIENT UN VESTIGE.
 *
 * Ce decalage existait pour laisser passer le bandeau des sources, qui etait
 * pose en surimpression en haut du cadre. Le 09/09 ce bandeau est descendu en
 * pied de page — et personne n'a pense a rendre les 92 points. Resultat : deux
 * boutons qui flottaient au milieu du bord gauche, sans rien au-dessus d'eux.
 * Julien, telephone en main : « les bouton zoom encore plus en haut a gauche
 * de la carte ». Ils y sont. */
.home-page .nearby-map-canvas .leaflet-top.leaflet-left {
    top: 8px;
    left: 8px;
}

.nearby-map-canvas .leaflet-control-zoom {
    border: 1px solid var(--hp-border-strong);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(27, 29, 24, .12);
}

.nearby-map-canvas .leaflet-control-zoom a {
    width: var(--tap-size);
    height: var(--tap-size);
    line-height: var(--tap-size);
    font-weight: 700;
}

/* PLUS PETITS A L'OEIL, PAS SOUS LE DOIGT.
 *
 * « et plus petit », Julien, 09/09. Reduire simplement la largeur aurait
 * reduit AUSSI la cible tactile, et 44 points est le minimum en dessous
 * duquel on rate le bouton une fois sur cinq — la carte est le premier outil
 * de la page, ce n'est pas la qu'il faut economiser.
 *
 * On separe donc les deux : le lien garde ses 44 points invisibles, et c'est
 * un pseudo-element de 32 points, centre, qui porte la peinture. Le cadre
 * commun disparait pour que les deux boutons respirent au lieu de former un
 * bloc. Le glyphe se replace au-dessus de la peinture. */
.home-page .nearby-map-canvas .leaflet-control-zoom {
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}

.home-page .nearby-map-canvas .leaflet-control-zoom a {
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    place-items: center;
    line-height: 1;
}

.home-page .nearby-map-canvas .leaflet-control-zoom a::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 10px;
    border: 1px solid var(--hp-border-strong);
    background: rgba(255, 253, 247, .94);
    box-shadow: 0 6px 14px rgba(27, 29, 24, .14);
    z-index: 0;
}

.home-page .nearby-map-canvas .leaflet-control-zoom a > * ,
.home-page .nearby-map-canvas .leaflet-control-zoom a {
    z-index: 1;
}

.home-page .nearby-map-canvas .leaflet-control-zoom a:focus-visible::before {
    outline: 3px solid var(--focus);
    outline-offset: 0;
}

.nearby-map-canvas .leaflet-control-zoom a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -4px;
}

.nearby-map-canvas .leaflet-control-attribution {
    border-top-left-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.nearby-map-canvas .leaflet-tooltip {
    border: 1px solid rgba(223, 212, 195, .9);
    border-radius: 999px;
    background: rgba(255, 253, 247, .96);
    color: var(--hp-green);
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(27, 29, 24, .12);
}

.nearby-map-canvas .leaflet-tooltip-top::before {
    border-top-color: rgba(255, 253, 247, .96);
}

/* =====================================================================
 * LE MARQUEUR PARLE
 *
 * Il portait une LETTRE dans une goutte de couleur — P, V, A, S, E — et une
 * legende en bas d'ecran apprenait a la traduire. Pour savoir ce qu'on
 * regardait, il fallait cliquer, ou apprendre un alphabet.
 *
 * Il porte maintenant deux choses cote a cote : une FORME, qui dit la famille,
 * et un LIBELLE en clair — le prix quand il y en a un, le type sinon.
 *
 * La largeur n'est pas ecrite : elle depend du libelle. Leaflet pose donc le
 * coin superieur gauche du marqueur sur le point (`iconSize: null` cote
 * script), et c'est cette translation qui l'ancre par le bas, au milieu.
 * ===================================================================== */

.nearby-leaflet-marker {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 4px;
    border: 1.5px solid var(--hp-surface);
    border-radius: 999px;
    background: var(--poi-color, var(--hp-green));
    color: var(--hp-surface-warm);
    box-shadow: 0 8px 18px rgba(27, 29, 24, .26);
    white-space: nowrap;
    transform: translate(-50%, -100%);
    transform-origin: 50% 100%;
    transition: box-shadow .18s ease, transform .18s ease;
}

.nearby-leaflet-marker b {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* LA FORME AVANT LA COULEUR.
 *
 * Un daltonien deutan ne separe pas le vert du terracotta, et personne ne
 * separe quoi que ce soit sur un ecran au soleil. La forme, elle, se lit dans
 * les deux cas — c'est donc elle qui porte la famille, la couleur ne fait que
 * la confirmer. */
.nearby-leaflet-marker i {
    display: block;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background: var(--hp-surface-warm);
}

/* Le produit : une pastille pleine. Ce qui s'achete, sans detour. */
.nearby-leaflet-marker--dot i {
    border-radius: 999px;
}

/* Le vendeur : une goutte. Un lieu ou l'on va, pose sur le sol. */
.nearby-leaflet-marker--drop i {
    border-radius: 999px 999px 999px 3px;
    transform: rotate(-45deg);
}

/* L'atelier, la sortie : un badge calendrier — deux anneaux et un feuillet.
   Dessine en degrades plutot qu'en pseudo-elements : le marqueur est injecte
   par Leaflet sous forme de chaine, chaque noeud en moins est une occasion de
   moins de se tromper d'echappement. */
.nearby-leaflet-marker--calendar i {
    border-radius: 3px;
    background:
        linear-gradient(var(--poi-color, var(--hp-green)) 0 0) 3px 0 / 2px 4px no-repeat,
        linear-gradient(var(--poi-color, var(--hp-green)) 0 0) 10px 0 / 2px 4px no-repeat,
        linear-gradient(var(--poi-color, var(--hp-green)) 0 0) 0 6px / 100% 1.5px no-repeat,
        var(--hp-surface-warm);
}

.nearby-leaflet-marker.is-active,
.nearby-leaflet-marker:hover {
    z-index: 900;
    box-shadow: 0 16px 30px rgba(27, 29, 24, .32);
    transform: translate(-50%, -100%) scale(1.1);
}

.nearby-leaflet-marker--orange { --poi-color: var(--hp-orange); }
.nearby-leaflet-marker--green { --poi-color: var(--hp-green); }
.nearby-leaflet-marker--blue { --poi-color: #27627A; }
.nearby-leaflet-marker--amber { --poi-color: #BA7A12; }
.nearby-leaflet-marker--terracotta { --poi-color: #A64F31; }
.nearby-leaflet-marker--muted { --poi-color: #6B7568; }

.nearby-leaflet-marker--visitor {
    padding: 4px 10px;
    background: #1B1D18;
    /* Lui est centre SUR le point : il ne designe pas un lieu a cote, il dit
       « vous etes ici ». */
    transform: translate(-50%, -50%);
}

.nearby-leaflet-marker--visitor span {
    font-size: 0.7rem;
    font-weight: 700;
}

.nearby-leaflet-popup-shell .leaflet-popup-content-wrapper {
    border: 1px solid rgba(223, 212, 195, .88);
    border-radius: 14px;
    background: rgba(255, 253, 247, .97);
    box-shadow: 0 18px 40px rgba(27, 29, 24, .18);
}

.nearby-leaflet-popup-shell .leaflet-popup-content {
    width: min(230px, 72vw) !important;
    margin: 11px 12px;
}

/* LA BULLE REND DE LA CARTE (09/09).
 *
 * « On perd de l'espace d'affichage », Julien, capture a l'appui : sur un
 * telephone la bulle couvrait un tiers de la carte. On serre la boite —
 * 200 points au lieu de 230, et 8/10 de marge au lieu de 11/12 — et le nom
 * s'autorise DEUX lignes plutot que d'etre coupe par des points de
 * suspension : « Eglise Saint Jean l'Evangeliste » tronque ne dit plus quelle
 * eglise. Deux lignes de nom coutent moins que trois lignes de bulle. */
@media (max-width: 639px) {
    .nearby-leaflet-popup-shell .leaflet-popup-content {
        width: min(200px, 62vw) !important;
        margin: 8px 10px;
    }

    .nearby-decor-popup strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.2;
    }
}

.nearby-leaflet-popup {
    display: grid;
    gap: 4px;
}

.nearby-leaflet-popup strong,
.nearby-leaflet-popup small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nearby-leaflet-popup strong {
    color: var(--hp-ink);
    font-size: .84rem;
    font-weight: 700;
}

.nearby-leaflet-popup small {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.nearby-leaflet-popup a {
    color: var(--hp-orange);
    font-size: 0.7rem;
    font-weight: 700;
}

/* =====================================================================
 * « ME LOCALISER » AU POUCE — EN BAS, PAS EN HAUT
 *
 * C'est le geste qui rend la carte utile : sans lui, la carte montre un pays.
 * Il etait pose au coin SUPERIEUR droit, c'est-a-dire au point le plus eloigne
 * de la main qui tient le telephone — sur un ecran de 844px de haut, il faut
 * changer de prise pour l'atteindre.
 *
 * Il se cale au-dessus du tiroir replie, du cote ou le pouce tombe. Quand le
 * tiroir s'ouvre, il passe dessous : c'est alors la liste qu'on lit, pas la
 * carte. Le coin haut reste libre pour les commandes de zoom de Leaflet, qui
 * n'ont pas a etre atteintes d'une main.
 *
 * A partir de 700px la regle d'origine reprend : au-dela, la carte n'est plus
 * tenue a une main.
 * ===================================================================== */

@media (max-width: 699px) {
    .nearby-map-locate {
        top: auto;
        right: 12px;
        bottom: calc(var(--nearby-sheet-collapsed, 88px) + 12px);
    }
}

@media (min-width: 700px) {
    .nearby-map-page {
        --nearby-sheet-peek: min(34dvh, 330px);
        --nearby-sheet-expanded: calc(100% - 118px);
    }

    .nearby-map-controls {
        padding-inline: 16px;
    }

    .nearby-map-locate {
        right: 20px;
    }

    .nearby-map-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px), (orientation: landscape) and (min-width: 780px) and (min-height: 560px) {
    .nearby-map-page {
        overflow: hidden;
        /* Une seule rangee a partir de 900px : la recherche remonte a cote de
           la marque. La valeur du pouce ne vaut plus ici. */
        --nearby-header-height: 64px;
    }

    .nearby-map-shell {
        padding: 10px;
        background: var(--hp-page-bg);
    }

    .nearby-map-app {
        display: grid;
        grid-template-columns: clamp(360px, 34vw, 430px) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "controls map"
            "results map";
        gap: var(--nearby-map-gap);
        border: 1px solid var(--hp-border-strong);
        border-radius: 20px;
        background: rgba(255, 253, 247, .72);
        box-shadow: var(--hp-soft-shadow);
    }

    .nearby-map-results,
    .nearby-map-viewport {
        position: relative;
        inset: auto;
    }

    .nearby-map-controls {
        grid-area: controls;
        grid-template-columns: 1fr;
        margin: 10px 0 0 10px;
        padding: 0;
        border-bottom: 0;
        background: transparent;
        box-shadow: none;
    }

    .nearby-map-families {
        flex-wrap: wrap;
    }

    .nearby-map-viewport {
        grid-area: map;
        min-height: 0;
        margin: 10px 10px 10px 0;
        overflow: hidden;
        border-radius: 18px;
    }

    .nearby-map-canvas {
        border: 1px solid rgba(36, 90, 59, .1);
        border-radius: 18px;
        box-shadow: inset 0 1px 0 rgba(255, 253, 247, .6);
    }

    .nearby-map-canvas .leaflet-top.leaflet-left {
        top: 12px;
        left: 12px;
    }

    .nearby-map-locate {
        top: 14px;
        right: 14px;
    }

    .nearby-map-results,
    .nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-results,
    .nearby-map-shell[data-sheet-state="expanded"] .nearby-map-results {
        grid-area: results;
        height: auto;
        min-height: 0;
        margin: 0 0 10px 10px;
        padding: 8px 10px 10px;
        border: 1px solid var(--hp-border-strong);
        border-radius: 18px;
        box-shadow: none;
    }

    .nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-list,
    .nearby-map-shell[data-sheet-state="expanded"] .nearby-map-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-status {
        display: block;
    }

    .nearby-map-results__handle {
        display: none;
    }

    .nearby-map-list {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }
}

@media (min-width: 1280px) {
    .nearby-map-app {
        grid-template-columns: clamp(400px, 31vw, 460px) minmax(0, 1fr);
    }

    .nearby-map-shell {
        padding: 12px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .nearby-map-page {
        --hp-bottom-nav-height: 0px;
        --nearby-header-height: 0px;
    }

    .nearby-map-page .site-header,
    .nearby-map-page .home-bottom-nav {
        display: none;
    }

    .nearby-map-shell {
        height: 100dvh;
        min-height: 100dvh;
        padding: 6px;
    }

    .nearby-map-app {
        display: grid;
        grid-template-columns: minmax(280px, 34vw) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "controls map"
            "results map";
        gap: 6px;
        border-radius: 16px;
    }

    .nearby-map-results,
    .nearby-map-viewport {
        position: relative;
        inset: auto;
    }

    .nearby-map-controls {
        grid-area: controls;
        grid-template-columns: 1fr;
        gap: 6px;
        margin: 6px 0 0 6px;
        padding: 0;
        border-bottom: 0;
        border-radius: 14px;
        background: transparent;
    }

    .nearby-map-families {
        flex-wrap: wrap;
    }

    .nearby-map-viewport {
        grid-area: map;
        margin: 6px 6px 6px 0;
        overflow: hidden;
    }

    .nearby-map-results {
        grid-area: results;
        height: auto;
        min-height: 0;
        margin: 0 0 6px 6px;
        padding: 8px;
        border: 1px solid var(--hp-border-strong);
        border-radius: 14px;
    }

    .nearby-map-results__handle {
        display: none;
    }

    .nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nearby-map-shell[data-sheet-state="collapsed"] .nearby-map-status {
        display: block;
    }
}


/* =====================================================================
 * LA COUCHE « A VISITER » — le décor open data sous les épingles Heop.
 *
 * Un point de 10px, opacité contenue, JAMAIS de label posé sur la carte :
 * le nom vit dans l'infobulle au survol et dans la bulle au clic. La
 * hiérarchie visuelle est la doctrine : goutte terracotta pleine = Heop,
 * point discret = décor. Qui vend se voit d'abord.
 * ===================================================================== */
.nearby-decor-dot i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hp-vert, #245A3B);
    opacity: .55;
    border: 2px solid rgba(255, 253, 247, .9);
    box-shadow: 0 1px 3px rgba(27, 29, 24, .25);
}

.nearby-decor-dot:hover i,
.nearby-decor-dot:focus i {
    opacity: .95;
}

.nearby-decor-tip {
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}

.nearby-decor-popup {
    display: grid;
    gap: 2px;
    min-width: 140px;
}

.nearby-decor-popup small {
    color: var(--ui-color-muted, #6B6B60);
}

.nearby-decor-popup a {
    font-size: .72rem;
    margin-top: 4px;
}

/* La rangée de couche se glisse sous les familles, même grammaire de puce. */
.nearby-map-layers {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.nearby-map-layer[aria-pressed="false"] {
    opacity: .5;
}


/* =====================================================================
 * DES PICTOGRAMMES, PAS DU TEXTE (2026-08-25).
 *
 * L'epingle Heop devient une pastille compacte : pictogramme BLANC sur
 * fond plein colore. Le decor est son inverse exact : medaillon CLAIR
 * cercle de vert, pictogramme VERT. Deux mondes, deux silhouettes — et
 * le nom vit en infobulle (option native title) et dans la bulle.
 * ===================================================================== */
.nearby-leaflet-marker--picto {
    width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    justify-content: center;
}

.nearby-leaflet-marker--picto svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* La goutte garde sa pointe : c'est elle qui dit « un lieu ou l'on va ». */
.nearby-leaflet-marker--picto.nearby-leaflet-marker--drop {
    border-radius: 999px 999px 6px 999px;
}

.nearby-leaflet-marker--picto.nearby-leaflet-marker--calendar {
    border-radius: 9px;
}

/* Le medaillon du decor : fond creme, trait vert, leger — il attire sans
 * jamais crier plus fort qu'une epingle Heop. */
.nearby-decor-badge {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--hp-surface-warm, #FFFDF7);
    border: 2px solid var(--hp-vert, #245A3B);
    color: var(--hp-vert, #245A3B);
    opacity: .82;
    box-shadow: 0 1px 4px rgba(27, 29, 24, .22);
    transition: opacity .15s ease, transform .15s ease;
}

.nearby-decor-badge svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* La famille donne le trait : vert (a voir, le defaut ci-dessus), bleu (a
 * faire — le bleu des services Heop), orange (bientot — la couleur des
 * evenements Heop). La forme reste la meme : un medaillon, jamais une
 * pastille pleine. */
.nearby-decor-badge--faire,
.nearby-map-legende__puce--decor-faire {
    border-color: #27627A;
    color: #27627A;
}

.nearby-decor-badge--bientot,
.nearby-map-legende__puce--decor-bientot {
    border-color: var(--hp-orange, #C86138);
    color: var(--hp-orange, #C86138);
}

.nearby-decor-badge:hover,
.nearby-decor-badge:focus {
    opacity: 1;
    transform: scale(1.12);
}


/* LA LÉGENDE — une rangée discrète, quatre puces, quatre mots. */
.nearby-map-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin-top: 8px;
    font-size: .78rem;
    color: var(--ui-color-muted, #6B6B60);
}

.nearby-map-legende__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nearby-map-legende__puce {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
}

.nearby-map-legende__puce svg {
    width: 12px;
    height: 12px;
    display: block;
}

.nearby-map-legende__puce--heop {
    background: var(--poi-color, var(--hp-green));
    color: var(--hp-surface-warm, #FFFDF7);
    border: 1.5px solid var(--hp-surface, #fff);
}

.nearby-map-legende__puce--decor {
    background: var(--hp-surface-warm, #FFFDF7);
    border: 2px solid var(--hp-vert, #245A3B);
    color: var(--hp-vert, #245A3B);
}

/* ==========================================================================
 * LA PATERNITÉ DES DONNÉES — EN PIED DE PAGE, ET LISIBLE (09/09)
 *
 * Julien : « le bandeau des provenances des datas on le mets tout en bas de la
 * pages pour gagner en lisibilité ».
 *
 * ELLE VIVAIT SUR LA CARTE, ET ELLE Y ÉTAIT DEUX FOIS PERDANTE. Mesurée au
 * navigateur sur l'accueil à 390x844 : trois lignes, 28,6 points de haut,
 * posées à six points du bord haut du cadre — donc sur la partie de la carte
 * qu'on regarde en premier — et écrites en 8,68 px à 80 % d'opacité, en gris
 * sur crème. Elle coûtait de la carte SANS se lire.
 *
 * ELLE NE PEUT PAS DISPARAÎTRE POUR AUTANT. OpenStreetMap (ODbL),
 * DATAtourisme — ADN Tourisme et le Ministère de la Culture (Licence Ouverte
 * 2.0) exigent la paternité de la donnée servie, VISIBLE. Le texte est donc le
 * même, mot pour mot ; c'est sa place et son corps qui changent.
 *
 * UNE SEULE RÈGLE POUR LES DEUX PAGES. map.css est servie par l'accueil
 * (`map=True`) comme par /carte/ : la mention se dessine ici plutôt que deux
 * fois, une par feuille de page.
 * ========================================================================== */
.carte-paternite {
    /* 0.8rem sur la racine de 14 du téléphone : 11,2 px, contre 8,68 avant.
       Une mention légale se lit aussi dans un train — et personne n'a jamais
       lu 8 points de gris sur beige. */
    margin: 0;
    padding: 10px var(--page-gutter, 14px) calc(10px + env(safe-area-inset-bottom));
    color: var(--hp-muted, #6E6252);
    font-size: .8rem;
    line-height: 1.45;
    text-wrap: pretty;
}

/* SUR L'ACCUEIL ELLE EST LE DERNIER BLOC DU FIL, JUSTE AU-DESSUS DU PIED DE
   SITE : un filet la sépare du catalogue, et elle prend le fond du pied plutôt
   que celui du contenu. */
.home-page .carte-paternite {
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
    margin-top: 18px;
}

/* SUR /carte/ IL N'Y A PAS DE PIED DE SITE — nearby_map.html vide le bloc, et
   il écrit pourquoi : « sur une carte qui remplit la vue, il n'y a aucun moyen
   de l'atteindre ». La mention est donc le pied de la page elle-même : elle
   ferme la colonne, sous le volet de résultats, et ne flotte plus sur la toile.

   SA HAUTEUR EST CELLE QUE LA COQUE LUI A CÉDÉE, ET ELLE DÉFILE PLUTÔT QUE DE
   DÉBORDER. Deux lignes suffisent aux deux sources d'aujourd'hui ; le jour où
   une troisième arrive — le Ministère de la Culture n'apparaît que là où il y
   a des monuments —, le texte reste ATTEIGNABLE au lieu d'être rogné par la
   barre basse. Une mention légale coupée en silence est le défaut qu'on vient
   de corriger ; on ne le réintroduit pas par le bas. */
.nearby-map-page .carte-paternite {
    height: var(--nearby-paternite-height);
    padding-block: 6px;
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
    background: var(--hp-surface-warm, #FFF8EC);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* AU-DELÀ DU TÉLÉPHONE LA PHRASE TIENT SUR UNE LIGNE : on ne réserve plus
   deux. */
@media (min-width: 700px) {
    .nearby-map-page { --nearby-paternite-height: 34px; }
}