/* =====================================================================
 * /carte/ EST UNE COLONNE QUE LE NAVIGATEUR MESURE — PLUS AUCUNE COPIE.
 *
 * Julien, 10/09/2026, capture a 390x844 : « C'est trop tasse pas assez aere ».
 *
 * CE QUI ETAIT ECRIT ICI, ET POURQUOI CA NE POUVAIT PAS TENIR.
 *
 * La page RECOPIAIT la hauteur de l'en-tete public dans
 * `--nearby-header-height`, faute de pouvoir mesurer un frere en CSS, puis
 * taillait la coque dans `calc(100dvh - cette copie - la barre basse - une
 * hauteur reservee a la mention de paternite)`. Trois valeurs a tenir a jour a
 * la main pour une seule question : combien reste-t-il ?
 *
 * UNE COPIE DERIVE. Celle-la a derive DEUX FOIS :
 *
 *   54 pour un en-tete qui en mesurait 118 — corrige le 05/09, le bas du volet
 *   passait sous la barre basse ;
 *
 *   106 pour un en-tete qui en mesure 57 — l'en-tete public est passe a UNE
 *   rangee le 08/09 (site-header-public.css, « 107 -> 57 ») et personne n'est
 *   revenu ici. Quarante-neuf points que la coque rendait a personne, et un
 *   document de 902 points dans une vue de 844 : la mention de vente d'alcool
 *   aux mineurs commencait a 733 et finissait cinquante-huit points sous un
 *   `overflow: hidden`. Une obligation legale, servie, coupee, en silence.
 *
 * ON NE CORRIGE DONC PAS LA COPIE : ON LA SUPPRIME. Le corps de cette page est
 * une COLONNE FLEXIBLE. L'en-tete prend ce qu'il prend, les mentions legales
 * prennent ce qu'il leur faut, ET LA CARTE PREND TOUT LE RESTE. Aucune valeur
 * a tenir a jour, donc aucune valeur qui puisse deriver — et le jour ou
 * l'en-tete change encore, cette page suit sans qu'on y touche.
 *
 * LES SEULS JETONS QUI RESTENT SONT CEUX DE LA BARRE BASSE, ET CE NE SONT PAS
 * DES COPIES : ce sont les valeurs que la barre s'applique a elle-meme
 * (home/bottom-nav.css). Elle est en `position: fixed`, donc hors du fil ; on
 * lui rend sa place en marge interieure basse, avec SES chiffres.
 *
 * IL Y EN A DEUX, ET LE SECOND A ETE TROUVE AU NAVIGATEUR. La barre mesure 62
 * points, mais sa pastille centrale REMONTE au-dessus de son filet : douze
 * points de rond vert posés sur ce qui la precede. Sur toutes les autres pages
 * le fil defile et personne ne le voit ; ici, ce qui la precede est
 * l'avertissement sur la vente d'alcool aux mineurs. Le contrat au navigateur
 * l'a nomme en clair : « SPAN.home-nav-icon-location » au-dessus des douze
 * derniers points de la mention.
 * ===================================================================== */

.nearby-map-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding-bottom: calc(
        var(--hp-bottom-nav-height, 0px) + var(--hp-bottom-nav-debord, 0px));
    overflow: hidden;
    background: var(--hp-page-bg);
}

/* 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.
 */

/* LE <main> PORTE LA CARTE ET LA MENTION DE PATERNITE, DANS CET ORDRE.
 *
 * `min-height: 0` N'EST PAS UNE PRECAUTION, C'EST CE QUI FAIT MARCHER LA
 * COLONNE. Un element flexible ne descend jamais sous la taille de son contenu
 * tant qu'on ne le lui permet pas : sans ce zero, la carte pousserait les
 * mentions legales hors de l'ecran — c'est-a-dire exactement le defaut qu'on
 * solde ici. */
.nearby-map-page .page-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.nearby-map-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* LES MENTIONS LEGALES PASSENT AVANT LA CARTE, ET C'EST L'ORDRE QU'IL FAUT.
 *
 * `flex-shrink: 0` sur les deux blocs du bas : quoi qu'il arrive a la hauteur
 * de la vue, c'est la CARTE qui cede des points, jamais la paternite des
 * donnees ni l'avertissement sur la vente d'alcool aux mineurs. L'inverse est
 * ce qui vient de se produire pendant deux jours.
 *
 * La mention alcool est un frere du <main>, pose par base.html apres le pied :
 * elle est donc dans cette colonne-ci, et non dans le <main>. */
.nearby-map-page .carte-paternite,
.nearby-map-page .legal-alcohol-banner {
    flex: 0 0 auto;
}

/* =====================================================================
 * LE VOLET DE RESULTATS — CE QU'IL PREND A LA CARTE AU REPOS.
 *
 * Julien, 10/09, en tete de sa liste de griefs : « la feuille Points proches
 * prend plus de la moitie de l'ecran ». Mesure a 390x844 : 268 points de volet
 * pour 307 points de carte decouverte. Sur la page dont la carte est tout
 * l'objet, le volet gagnait presque.
 *
 * D'OU VENAIENT CES 268. Le repos valait `min(32dvh, 268px)`, et le
 * commentaire d'alors disait « 32dvh, soit 213px » — c'etait vrai sur les 667
 * points de l'iPhone SE ou la valeur a ete choisie. Sur les 844 d'un iPhone
 * 14, la meme fraction en donne 270, et le plafond de 268 mordait a peine :
 * une valeur reglee sur un ecran, appliquee a un ecran plus grand, y prend
 * cinquante-cinq points de plus.
 *
 * CE QU'ON GARDE AU REPOS, ET C'EST LA MESURE QUI LE DIT : la poignee (44),
 * la ligne de titre et de compte (24), les respirations (14) et DEUX
 * resultats de 44, dont le second annonce la suite en depassant du bord.
 * Cent-soixante points, plafond compris. En
 * dessous de 782 points de vue, la fraction reprend la main et le volet
 * retrecit avec l'ecran plutot que de garder une taille d'iPhone 14 sur un
 * iPhone SE.
 *
 * CE PLAFOND EST CE QUI FAIT PASSER LA CARTE AU-DESSUS DE LA MOITIE : mesuree
 * au navigateur a 390x844, la carte decouverte passe de 307 points a 419, soit
 * de 41 % a 56 % de la hauteur utile.
 *
 * LE RESTE SE TIRE DU DOIGT — la poignee est une cible de 44 points, et
 * `expanded` donne au volet toute la coque moins une bande de carte.
 * ===================================================================== */

.nearby-map-page {
    --nearby-map-gap: 10px;
    --nearby-sheet-collapsed: calc(116px + env(safe-area-inset-bottom));
    --nearby-sheet-peek: min(19dvh, 160px);
    /* Ce qui reste de carte quand le volet est deploye. La valeur disait 106
       parce qu'elle recopiait la hauteur de l'en-tete ; elle ne decrit rien de
       tel — c'est une bande de tuiles, et elle vaut ce qu'on veut y voir. */
    --nearby-sheet-expanded: calc(100% - 96px);
}

/* 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;
}

/* LA RANGEE DE COMMANDES NE MESURE PLUS RIEN, ET C'EST LE COEUR DU LOT.
 *
 * Elle portait 51 points a 390x844 — respirations, filet, et une rangee de
 * pastilles tranchee net au bord droit — et 93 des que la couche « A visiter »
 * s'ajoutait sur SA ligne, pour une seule puce. Les pastilles sont dans la
 * feuille qu'ouvre le bouton pose sur la carte ; ce formulaire ne garde que
 * l'ETAT de la page, deux `input[type="hidden"]` que `nearby-map.js` relit
 * pour construire ses requetes, et le H1 sorti du cadre juste dessous.
 *
 * Un `input[type="hidden"]` n'a pas de boite et le titre est hors du flux :
 * sans fond, sans filet et sans respiration, la rangee mesure zero. Elle reste
 * la premiere piste de la grille de `.nearby-map-app` — une piste `auto` vide
 * ne coute rien, et la carte occupe la seconde en entier. */
.nearby-map-controls {
    display: grid;
    padding: 0;
    border: 0;
    background: none;
    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.
 * ===================================================================== */

/* ELLES S'ENROULENT, ELLES NE DEFILENT PLUS.
 *
 * Sous la carte, la rangee ne pouvait pas s'enrouler : quatre familles avec
 * leurs comptes demandent 419 points pour 374 de large, et deux rangees
 * auraient coute a la carte le double de ce qu'elle donnait deja. Elle
 * defilait donc, avec un bord qui s'efface pour dire qu'elle continue — un
 * pansement honnete sur une place trop petite.
 *
 * Dans la feuille, la place ne manque plus : les pastilles s'enroulent, se
 * lisent toutes d'un regard, et il n'y a plus de bord a expliquer. Le masque
 * de degrade, le defilement et la barre masquee partent avec le probleme
 * qu'ils traitaient.
 *
 * LA CIBLE REVIENT A 44 POINTS. Elle avait ete resserree a 36 pour « rendre
 * huit pixels a la carte » : dans une feuille, ces huit pixels ne sont plus
 * pris a la carte, et 44 est la cible tactile de la maison comme le plancher
 * de WCAG 2.5.8. */
.nearby-map-families {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    --ui-icon-xs: 15px;
}

.nearby-map-family {
    flex: 0 0 auto;
    min-height: var(--tap-size, 44px);
    padding: 5px 11px;
    font-size: .78rem;
}

.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) {
    /* CE PALIER DECLARAIT ICI UN EN-TETE DE 64 POINTS POUR UN EN-TETE QUI EN
       DESSINE 71 : sept points de trop, pris a la coque, donc rognes en bas
       sans un mot. C'etait la SECONDE copie de cette page, et elle avait la
       meme maladie que la premiere. La colonne flexible ne demande plus rien a
       personne : ce bloc n'a plus de hauteur a annoncer. */

    .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;
    }

    /* La rangee de commandes ne peint plus rien a aucune largeur : elle garde
       sa piste dans la grille, vide, et le volet occupe la colonne. */
    .nearby-map-controls {
        grid-area: controls;
    }

    .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) {
    /* LE JETON DE LA BARRE BASSE RESTE, PARCE QU'IL DECRIT UN FAIT : la barre
       n'est pas rendue ici, elle ne reclame donc aucune marge au bas de la
       colonne. Celui de l'en-tete est parti avec les autres — la colonne
       mesure ce qui est la, et ce qui n'est pas rendu ne mesure rien. */
    .nearby-map-page {
        --hp-bottom-nav-height: 0px;
    }

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

    .nearby-map-shell {
        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;
    }

    .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 a son propre intitulé dans la feuille (« Le décor
   touristique ») : elle ne se glisse plus sous les familles, et n'a donc plus
   de marge de rattrapage à poser. */
.nearby-map-layers {
    display: flex;
    gap: 8px;
}

.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 — quatre puces, quatre mots, ET UN ENDROIT OÙ SE LIRE.
 *
 * Sur /carte/ elle était le dernier enfant de `.nearby-map-shell`, une coque
 * en `overflow: hidden` que la carte remplissait au point près. Mesuré au
 * navigateur le 10/09 à 390x844 : cinquante points de boîte, ZÉRO point peint.
 * Le script la construisait à chaque visite pour un rendu que personne n'a
 * jamais vu — et aucune lecture du document ne pouvait le dire, puisqu'elle
 * était bel et bien dans le HTML.
 *
 * Elle est maintenant dans la feuille des filtres, sous les commandes qui
 * allument ce qu'elle explique. La marge de rattrapage part avec la rangée :
 * le corps de la feuille pose déjà ses gouttières. */
.nearby-map-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    font-size: .78rem;
    color: var(--ui-color-muted, #6B6B60);
}

/* SON INTITULÉ DISPARAÎT AVEC ELLE. `nearby-map.js` ne retire l'attribut
   `hidden` que s'il a construit au moins une entrée — il n'en construit
   aucune quand la page n'affiche nulle part le mot d'une famille. Sans cette
   règle, « Ce que disent les repères » resterait à flotter au-dessus de rien :
   un titre sans contenu est pire qu'un contenu sans titre. */
.carte-filtres-legende:has([data-poi-legend][hidden]) {
    display: none;
}

.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 ÉTAIT RÉSERVÉE ; ELLE EST MAINTENANT MESURÉE, ET C'EST LA
   CORRECTION (10/09).

   La règle posait `height: var(--nearby-paternite-height)` — cinquante points,
   pris à la coque — plus un défilement interne « pour que le texte reste
   ATTEIGNABLE au lieu d'être rogné ». C'était se payer de mots : dès que le
   décor cite deux sources la phrase prend trois lignes, soit soixante et un
   points, et la troisième disparaissait dans un `overflow-y: auto` que
   personne ne va chercher au doigt sur trois lignes de gris. Julien l'a
   rapporté tel quel : « le bandeau de provenance, sur trois lignes », coupé.

   Une mention légale ne se range pas dans une boîte à sa taille : c'est la
   boîte qui prend la taille de la mention. La colonne flexible le permet, et
   `flex-shrink: 0` plus haut garantit que c'est la carte qui cède, pas elle.

   ELLE RESTE COMPACTE, PARCE QU'ELLE PREND SA PLACE À LA CARTE. Le corps ne
   bouge pas — 0,8rem, soit 11,2 px sur la racine de 14 du téléphone, la taille
   arbitrée le 09/09 pour qu'elle se lise vraiment ; ce sont les respirations
   qui se resserrent, et l'interligne descend de 1,45 à 1,3. Deux points par
   ligne rendus à la carte sans qu'une lettre rétrécisse. */
.nearby-map-page .carte-paternite {
    padding-block: 4px;
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
    background: var(--hp-surface-warm, #FFF8EC);
    line-height: 1.25;
}

/* =====================================================================
 * L'AVERTISSEMENT SUR LA VENTE D'ALCOOL AUX MINEURS, SUR CETTE PAGE.
 *
 * IL Y ÉTAIT DÉJÀ, ET PERSONNE NE L'AVAIT JAMAIS VU EN ENTIER. base.html le
 * rend sur toute page publique, après le pied ; sur /carte/ il tombait à 733
 * points, en mesurait 169, et le document s'arrêtait à 844 sous un `overflow:
 * hidden`. Quarante-neuf points visibles sur cent-soixante-neuf : le titre
 * commencé, la phrase coupée, l'article du code jamais atteint. C'est une
 * obligation de l'article L. 3342-1 du code de la santé publique, et elle
 * était affichée à moitié.
 *
 * LA COLONNE LE REND VISIBLE ; CE BLOC LE REND SUPPORTABLE. Cent-soixante-neuf
 * points sur les 844 d'un téléphone, c'est un cinquième de l'écran pris à la
 * carte sur la page dont la carte est tout l'objet. On les ramène à une
 * centaine SANS TOUCHER NI AU TEXTE NI À SA TAILLE — le gabarit commun n'est
 * pas modifié d'un mot, et `apps/orders/test_alcohol_sales.py` continue de le
 * vérifier.
 *
 * CE QUI CHANGE EST LA MISE EN PAGE, ET ELLE SEULE :
 *
 *   la piste « République Française » se règle sur son contenu (`auto`) au
 *   lieu d'être fixée à 92 points ;
 *   son bloc décoratif — drapeau, devise, nom de l'État — se resserre ;
 *   l'interligne du message descend de 1,5 à 1,2 ;
 *   les respirations et le filet se resserrent.
 *
 * LA PISTE `auto` CORRIGE UN DÉBORDEMENT, ELLE NE FAIT PAS QUE GAGNER DE LA
 * PLACE. « Liberté · Égalité · Fraternité » est en `white-space: nowrap` et
 * mesure 97 points ; la piste en faisait 92, et les points de trop passaient
 * PAR-DESSUS la phrase légale d'à côté — vu à l'écran, la devise et
 * « RÉPUBLIQUE FRANÇAISE » écrites sur « La preuve de majorité de l'acheteur ».
 * Une piste réglée sur son contenu ne peut plus déborder, à aucune largeur.
 *
 * LE BLOC DÉCORATIF PEUT SE RESSERRER, PAS LA PHRASE. Le drapeau et la devise
 * sont `aria-hidden` : ils encadrent la mention, ils ne SONT pas la mention.
 * Les trois lignes qui portent l'obligation — le titre, la preuve de majorité,
 * la référence au code — gardent leur corps au point près.
 *
 * La plus petite ligne — la référence au code — garde ses 0,62rem : c'est déjà
 * le plancher, et on ne rogne pas ce qui est déjà au plancher.
 * ===================================================================== */
.nearby-map-page .legal-alcohol-banner {
    gap: 6px;
    padding: 4px 6px;
    border-width: 2px;
    grid-template-columns: auto 1fr;
}

.nearby-map-page .legal-alcohol-banner__message {
    gap: 1px;
    line-height: 1.2;
}

.nearby-map-page .legal-alcohol-banner__flag {
    width: 54px;
    height: 20px;
}

.nearby-map-page .legal-alcohol-banner__republic {
    gap: 1px;
    line-height: 1.1;
}

.nearby-map-page .legal-alcohol-banner__republic small {
    font-size: .58rem;
}

.nearby-map-page .legal-alcohol-banner__republic strong {
    font-size: .62rem;
}

/* AU-DELÀ DU TÉLÉPHONE, LA COLONNE RESPIRE D'ELLE-MÊME : la phrase de
   paternité tient sur une ligne et l'avertissement sur deux, sans qu'on ait
   rien à leur reprendre. */
@media (min-width: 700px) {
    .nearby-map-page .carte-paternite {
        padding-block: 8px;
    }

    .nearby-map-page .legal-alcohol-banner {
        padding: 8px 12px;
        grid-template-columns: minmax(150px, 18%) 1fr;
    }

    .nearby-map-page .legal-alcohol-banner__flag {
        width: 84px;
        height: 32px;
    }

    .nearby-map-page .legal-alcohol-banner__republic small {
        font-size: .7rem;
    }

    .nearby-map-page .legal-alcohol-banner__republic strong {
        font-size: .82rem;
    }
}