/* ==========================================================================
   Carte des randonnées d'un pays, style « Carnet » (30/09/2026 ; maquette
   validée par François : _migration/maquette_carte_pays.html ; retouches de
   Claude Design : _migration/design_handoff_carte_randonnees/README.md).
   En-tête, pastilles, menus, bande et recherche : tableau-carnet.css,
   chargée avant. Ici : la barre de filtres collante, la carte (60 %) et la
   liste (40 %), les repères, l'aperçu, la légende, les commandes.
   ========================================================================== */

/* ── Disposition ─────────────────────────────────────────────────────── */

/* Ordinateur : la rangée de filtres colle en haut (64 px, fond papier) */
@media (min-width: 768px) {
    .hr-carte .hr-tableau__rangee {
        position: sticky;
        top: var(--hr-en-h, 0px);
        z-index: 30;
        height: 64px;
        margin-bottom: 12px;
        background: var(--hr-papier);
        border-bottom: 1px solid var(--hr-filet);
    }
    /* Petits écrans d'ordinateur : marges et gouttière réduites (François,
       01/10/2026) */
    @media (max-width: 1199px) {
        .hr-carte-page { --hr-gouttiere: 20px; }
        .hr-carte__grille { gap: 16px; }
        .hr-carte .hr-tableau__recherche input { width: 200px; }
        /* « Voir sur la carte » en rond, comme sur mobile : les chiffres
           tiennent sur une ligne */
        .hr-carte__voir { position: relative; justify-content: center; width: 32px; height: 32px; padding: 0; }
        .hr-carte__voir span { display: none; }
    }
    /* La liste défile dans sa colonne, à la hauteur de la carte : la molette
       y fait défiler les randonnées (puis la page, arrivée en bas), ailleurs
       la page (François, 01/10/2026) */
    .hr-carte__panneau {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 92px);
        min-height: 480px;
    }
    .hr-carte__panneau .hr-carte__liste {
        flex: 1;
        min-height: 0;
        margin: 0 -6px;
        padding: 12px 6px 16px;
        overflow-y: auto;
    }
}

.hr-carte__grille {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}

/* Carte collée sous la rangée de filtres, à hauteur d'écran */
.hr-carte__cadre {
    position: sticky;
    top: calc(var(--hr-en-h, 0px) + 76px);
    height: calc(100vh - 92px);
    min-height: 480px;
    overflow: hidden;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-lg);
    box-shadow: var(--hr-om-panneau);
}

.hr-carte__carte { width: 100%; height: 100%; background: #e9e5dd; font-family: var(--hr-font-texte); }
/* Au demi-cran de zoom, un fin joint clair apparaît entre les tuiles
   OpenStreetMap : chaque tuile déborde d'un pixel sur la suivante, en
   fusion normale (celle de Leaflet, « plus-lighter », éclaircirait le
   recouvrement) */
.hr-carte__carte img.leaflet-tile { width: 257px !important; height: 257px !important; mix-blend-mode: normal; }

/* ── En-tête de la liste (64 px) : « 12 randonnées sur 79 », la zone, le tri ── */

.hr-carte__bande.hr-tableau__bande {
    top: 64px;
    min-height: 64px;
    background: var(--hr-papier);
    border-bottom-color: var(--hr-bordure);
}
.hr-carte__bande .hr-tableau__bande-ligne { align-items: center; min-height: 64px; padding: 8px 0; }
.hr-carte__bande .hr-tableau__compteur { display: flex; flex-direction: column; gap: 2px; }
.hr-carte__compte { font-size: 15px; color: var(--hr-texte-2); }
.hr-carte__compte strong { font-weight: 700; color: var(--hr-encre); }
.hr-carte__zone { font-size: 13px; font-weight: 400; color: var(--hr-texte-2); }
.hr-carte__zone .hr-tableau__lien { font-size: 13px; font-weight: 500; }

.hr-carte__liste { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }

/* ── Carte de randonnée (liste) ──────────────────────────────────────── */

.hr-carte__fiche {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    gap: 16px;
    flex-shrink: 0;   /* la liste défile : une carte au nom sur deux lignes ne doit pas être écrasée */
    min-height: 112px;
    padding: 8px;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-md);
    background: var(--hr-surface);
    transition: box-shadow var(--hr-transition), border-color var(--hr-transition);
}
.hr-carte__fiche[hidden] { display: none; }
.hr-carte__fiche:hover, .hr-carte__fiche--survol { border-color: var(--hr-filet-froid); box-shadow: var(--hr-om-survol); }
.hr-carte__fiche--active, .hr-carte__fiche--active:hover { border-color: var(--hr-petrole); box-shadow: 0 0 0 1px var(--hr-petrole); }

.hr-carte__photo img {
    display: block;
    width: 144px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--hr-r-sm);
    background: var(--hr-filet);
}

/* Région, nom, difficulté, chiffres : 4 px entre région et nom et entre
   difficulté et chiffres, 6 px entre nom et difficulté ; le tout centré
   dans la hauteur de la photo (François, 01/10/2026) */
.hr-carte__corps { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hr-carte__niveau { margin-top: 6px; }
.hr-carte__haut { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hr-carte__haut .hr-tableau__etoiles { margin-left: auto; font-size: 14px; }
.hr-carte__proche { font-size: 11px; font-weight: 600; color: var(--hr-petrole); white-space: nowrap; }
/* Localisé : étoiles à gauche, distance à droite, plus de région */
.hr-carte__liste--localise .hr-carte__region { display: none; }
.hr-carte__liste--localise .hr-carte__haut .hr-tableau__etoiles { margin-left: 0; }
.hr-carte__liste--localise .hr-carte__proche { margin-left: auto; }

.hr-carte__region {
    min-width: 0;
    overflow: hidden;
    font: 600 11px var(--hr-font-texte);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hr-texte-3);
}

.hr-carte__nom {
    display: -webkit-box;
    overflow: hidden;
    margin: 4px 0 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font: 600 16px/1.3 var(--hr-font-texte);
}
.hr-carte__nom a { color: var(--hr-petrole); text-decoration: none; }
/* Titre de la liste, pour les lecteurs d'écran et les moteurs seulement */
.hr-carte__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hr-carte__nom a:hover { text-decoration: underline; }

/* Difficulté : le mot et la barre sur une ligne (carrés de 8 px) */
.hr-carte__niveau { font-size: 14px; color: var(--hr-texte); }
.hr-carte__niveau .hr-tableau__niveau { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.hr-carte__niveau .hr-tableau__niveau i { gap: 2px; }
.hr-carte__niveau .hr-tableau__niveau b { width: 8px; height: 8px; border-radius: 1px; }
.hr-carte__type { display: inline-flex; align-items: center; gap: 6px; }
.hr-carte__type svg { color: var(--hr-texte-2); }

.hr-carte__pied { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
/* Le bouton déborde de la ligne des chiffres au lieu de l'épaissir */
.hr-carte__pied .hr-carte__voir { margin: -8px 0 -8px auto; }
.hr-carte__stats { font-size: 13px; color: var(--hr-texte-2); font-variant-numeric: tabular-nums; }

.hr-carte__voir {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    height: 28px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid var(--hr-bordure);
    border-radius: 999px;
    background: #fff;
    font: 500 12px var(--hr-font-texte);
    color: var(--hr-petrole);
    cursor: pointer;
}
.hr-carte__voir:hover, .hr-carte__fiche--active .hr-carte__voir { border-color: var(--hr-petrole); background: var(--hr-petrole-pale); }

/* Zone vide, et aucun résultat */
.hr-carte__vide {
    padding: 24px;
    border: 1px dashed var(--hr-filet-froid);
    border-radius: var(--hr-r-md);
    background: #fff;
    font-size: 14px;
    color: var(--hr-texte-2);
}
.hr-carte__vide p { margin: 0 0 8px; }
.hr-carte__vide-titre { font: 600 17px var(--hr-font-texte); color: var(--hr-encre); }
.hr-carte__vide .hr-tableau__lien { font-size: 14px; }
.hr-carte__vide-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hr-carte__plein, .hr-carte__contour {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--hr-petrole);
    border-radius: var(--hr-r-sm);
    font: 600 14px var(--hr-font-texte);
    cursor: pointer;
}
.hr-carte__plein { background: var(--hr-petrole); color: #fff; }
.hr-carte__plein:hover { background: var(--hr-petrole-fonce); }
.hr-carte__contour { background: #fff; color: var(--hr-petrole); }

/* ── Repères : rond 26 px, anneau blanc ; survol 32 ; actif 36, anneau pétrole ── */

.hr-carte__repere { display: grid; place-items: center; background: none; border: 0; }
.hr-carte__pastille {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35);
}
.hr-carte__pastille--claire { box-shadow: inset 0 0 0 1.5px #5b6a72, 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35); }
.hr-carte__pastille svg { width: 14px; height: 14px; }
.hr-carte__repere--survol .hr-carte__pastille { width: 32px; height: 32px; }
.hr-carte__repere--survol .hr-carte__pastille svg { width: 16px; height: 16px; }
.hr-carte__repere--actif .hr-carte__pastille { width: 36px; height: 36px; box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--hr-petrole), 0 2px 8px rgba(0, 0, 0, .3); }
.hr-carte__repere--actif .hr-carte__pastille svg { width: 18px; height: 18px; }

/* Ordinateur : repères 8 % plus grands (+ 20 %, puis − 10 %), groupes 20 %
   (François, 01/10/2026) ;
   la taille des groupes est écrite par le JS */
@media (min-width: 768px) {
    .hr-carte__carte .hr-carte__pastille { width: 28px; height: 28px; }
    .hr-carte__carte .hr-carte__pastille svg { width: 15px; height: 15px; }
    .hr-carte__carte .hr-carte__repere--survol .hr-carte__pastille { width: 34px; height: 34px; }
    .hr-carte__carte .hr-carte__repere--survol .hr-carte__pastille svg { width: 17px; height: 17px; }
    .hr-carte__carte .hr-carte__repere--actif .hr-carte__pastille { width: 39px; height: 39px; }
    .hr-carte__carte .hr-carte__repere--actif .hr-carte__pastille svg { width: 20px; height: 20px; }
    .hr-carte__carte .hr-carte__groupe span { font-size: 15px; }
}

/* Groupes : pétrole plein, halo net */
.hr-carte__groupe { display: grid; place-items: center; background: none; border: 0; }
.hr-carte__groupe span {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hr-petrole);
    box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(5, 102, 141, .18), 0 1px 4px rgba(0, 0, 0, .25);
    color: #fff;
    font: 700 13px var(--hr-font-texte);
}
.hr-carte__groupe:hover span { background: var(--hr-petrole-fonce); }

/* Survol d'une carte de la liste : le reste s'efface, son repère (ou son
   groupe) et son tracé ressortent */
.hr-carte--focus .hr-carte__repere:not(.hr-carte__repere--survol):not(.hr-carte__repere--actif),
.hr-carte--focus .hr-carte__groupe:not(.hr-carte__groupe--survol),
.hr-carte--focus .hr-carte__trace:not(.hr-carte__trace--survol) { opacity: .5 !important; }   /* markercluster pose opacity: 1 en ligne */

.hr-carte__repere--survol .hr-carte__pastille { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--hr-petrole), 0 2px 8px rgba(0, 0, 0, .3); }
.hr-carte__groupe--survol span { background: var(--hr-petrole-fonce); box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--hr-petrole), 0 2px 8px rgba(0, 0, 0, .3); }

/* « Vous êtes ici » : point pétrole, anneau blanc (le cercle de précision est tracé par Leaflet) */
.hr-carte__ici span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hr-petrole);
    box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 0, 0, .35);
}

/* ── Légende : pastille blanche en haut à gauche ─────────────────────── */

.hr-carte__legende {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 500;
    max-width: calc(100% - 180px);
}
.hr-carte__legende-bouton { display: none; }
.hr-carte__legende-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--hr-om-controle);
    font: 500 12px var(--hr-font-texte);
    color: var(--hr-texte);
}
.hr-carte__legende-items > span { display: inline-flex; align-items: center; gap: 6px; }
/* Les pastilles mêmes des repères, en petit (demande de François) */
.hr-carte__legende .hr-carte__pastille { width: 16px; height: 16px; box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .3); }
.hr-carte__legende .hr-carte__pastille--claire { box-shadow: inset 0 0 0 1px #5b6a72, 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .3); }
.hr-carte__legende .hr-carte__pastille svg { width: 10px; height: 10px; }

/* Aucune animation dans la carte (repères, groupes, tracés, bulle) :
   Safari faisait clignoter commandes et légende à chaque fondu ou
   changement de taille animé (survol de la liste, bulle qui s'ouvre ;
   François, 01/10/2026). Mettre commandes, légende ou cadre sur leur propre
   calque (translateZ) n'y changeait rien */
.hr-carte__carte.leaflet-fade-anim .leaflet-popup { transition: none; }

/* Échelle, en bas à gauche */
.hr-carte__carte .leaflet-control-scale { margin: 0 0 8px 12px; }
.hr-carte__carte .leaflet-control-scale-line {
    border: 1.5px solid var(--hr-texte);
    border-top: 0;
    background: rgba(255, 255, 255, .8);
    font: 500 11px/1.4 var(--hr-font-texte);
    color: var(--hr-texte);
}

/* ── Commandes : à gauche sous la légende, 36 × 36, blanches, rayon 8 ── */

.hr-carte__carte .leaflet-top.leaflet-left { top: var(--hr-legende-h, 56px); }
.hr-carte__carte .leaflet-top .leaflet-control { margin-top: 0; margin-bottom: 8px; }
.hr-carte__carte .leaflet-left .leaflet-control { margin-left: 12px; }
.hr-carte__carte .leaflet-right .leaflet-control { margin-right: 12px; }
.hr-carte__carte .leaflet-top.leaflet-right { top: 12px; }

.hr-carte__carte .leaflet-bar {
    overflow: hidden;
    border: 0;
    border-radius: var(--hr-r-md);
    background: #fff;
    box-shadow: var(--hr-om-controle);
}
.hr-carte__carte .leaflet-bar a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--hr-texte);
    font: 500 20px/1 var(--hr-font-texte);
    text-indent: 0;
}
.hr-carte__carte .leaflet-bar a:hover { background: var(--hr-papier); color: var(--hr-encre); }
.hr-carte__carte .leaflet-control-zoom a + a { border-top: 1px solid var(--hr-filet); }
.hr-carte__carte .leaflet-control-zoom-fullscreen { background-image: none !important; }
.hr-carte__quitter[hidden] { display: none; }
.hr-carte__carte .hr-carte__quitter { width: 36px; height: 36px; }
.hr-carte__quitter a { font-size: 18px; }
.hr-carte__bouton--actif a { background: var(--hr-petrole-pale) !important; box-shadow: inset 0 0 0 1px var(--hr-petrole); color: var(--hr-petrole) !important; }

/* Fonds de carte : « Fond : Plan » et son menu */
.hr-carte__carte .hr-carte__fonds { overflow: visible; }
.hr-carte__carte .hr-carte__fonds > a {
    display: inline-flex;
    gap: 8px;
    width: auto;
    padding: 0 12px;
    border-radius: var(--hr-r-md);
    font: 500 13px var(--hr-font-texte);
    white-space: nowrap;
}
.hr-carte__fonds b { font-weight: 600; }
.hr-carte__fonds-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 176px;
    padding: 6px;
    border-radius: var(--hr-r-md);
    background: #fff;
    box-shadow: var(--hr-om-tooltip);
}
.hr-carte__fonds-menu[hidden] { display: none; }
.hr-carte__fonds-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: 400 13px var(--hr-font-texte);
    color: var(--hr-texte);
    cursor: pointer;
}
.hr-carte__fonds-menu button span { visibility: hidden; }
.hr-carte__fonds-menu button[aria-pressed="true"] { background: var(--hr-petrole-pale); color: var(--hr-petrole); font-weight: 600; }
.hr-carte__fonds-menu button[aria-pressed="true"] span { visibility: visible; }

/* ── Aperçu (ordinateur) : bulle de 245 px au-dessus du repère (272 de
   Claude Design, moins 10 % : François, 01/10/2026) ─────────────────── */

.hr-carte__popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: var(--hr-r-lg); box-shadow: var(--hr-om-tooltip); }
.hr-carte__popup .leaflet-popup-content { position: relative; width: 245px !important; margin: 0; font: 400 13px/1.45 var(--hr-font-texte); }
.hr-carte__popup .leaflet-popup-tip { width: 14px; height: 14px; margin-top: -8px; box-shadow: var(--hr-om-controle); }
.hr-carte__apercu { display: block; color: inherit; text-decoration: none; }
.hr-carte__apercu-photo img { display: block; width: 245px; height: 163px; object-fit: cover; }
.hr-carte__apercu-corps { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 0; }
.hr-carte__apercu-nom { font: 600 16px/1.3 var(--hr-font-texte); color: var(--hr-petrole); }
.hr-carte__apercu .hr-carte__stats { font-size: 14px; }
.hr-carte__popup .hr-carte__apercu .hr-carte__stats { font-size: 13px; }
.hr-carte__apercu-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin-top: 11px;
    padding: 0 14px;
    border-top: 1px solid var(--hr-filet);
    font: 600 13px var(--hr-font-texte);
    color: var(--hr-petrole);
}
.hr-carte__apercu:hover .hr-carte__apercu-pied { background: var(--hr-papier); }
.hr-carte__fermer {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--hr-om-controle);
    font: 400 18px/1 var(--hr-font-texte);
    color: var(--hr-texte);
    cursor: pointer;
}

/* ── Aperçu (mobile) : bande en bas de la carte ──────────────────────── */

.hr-carte__bande-apercu {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 900;
    padding: 8px;
    border-radius: var(--hr-r-lg);
    background: #fff;
    box-shadow: var(--hr-om-tooltip);
}
.hr-carte__bande-apercu[hidden] { display: none; }
.hr-carte__apercu--compact { display: flex; gap: 12px; }
.hr-carte__apercu--compact .hr-carte__apercu-photo img { width: 120px; height: 80px; border-radius: var(--hr-r-sm); }
.hr-carte__apercu--compact .hr-carte__apercu-corps { flex: 1; min-width: 0; gap: 2px; padding: 0 28px 0 0; }
.hr-carte__apercu--compact .hr-carte__region { font-size: 11px; }
.hr-carte__apercu--compact .hr-tableau__etoiles { font-size: 12px; }
.hr-carte__apercu--compact .hr-carte__apercu-nom { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.hr-carte__apercu--compact .hr-carte__stats { font-size: 13px; }
.hr-carte__apercu-lien { margin-top: auto; font: 600 14px var(--hr-font-texte); color: var(--hr-petrole); }
.hr-carte__bande-apercu .hr-carte__fermer { top: 0; right: 0; width: 36px; height: 36px; background: none; box-shadow: none; font-size: 22px; color: var(--hr-texte-2); }
.hr-carte__cadre--apercu .leaflet-control-attribution, .hr-carte__cadre--apercu .leaflet-control-scale { display: none; }

/* Mobile : « deux doigts pour déplacer la carte » */
.hr-carte__deux-doigts {
    position: absolute;
    inset: 0;
    z-index: 800;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(28, 42, 49, .55);
    color: #fff;
    font: 600 16px var(--hr-font-texte);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.hr-carte__deux-doigts--vu { opacity: 1; }

.hr-carte__message {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 900;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: var(--hr-r-md);
    background: var(--hr-encre);
    color: #fff;
    font-size: 13px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.hr-carte__message--vu { opacity: 1; }

/* Plein écran : le cadre (carte, légende, aperçu) occupe tout l'écran */
.hr-carte__cadre:fullscreen, .hr-carte__cadre.leaflet-pseudo-fullscreen { height: 100%; border-radius: 0; }
.hr-carte__cadre:-webkit-full-screen { width: 100%; height: 100%; }
.hr-carte__cadre.leaflet-pseudo-fullscreen { position: fixed !important; inset: 0; z-index: 99999; }

/* Bouton « Carte » (mobile), quand la carte est sortie de l'écran */
.hr-carte__retour {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--hr-petrole);
    box-shadow: var(--hr-om-tooltip);
    font: 600 15px var(--hr-font-texte);
    color: #fff;
    transform: translateX(-50%);
    cursor: pointer;
}
.hr-carte__retour[hidden] { display: none; }

/* ── Mobile : la carte, puis la liste ────────────────────────────────── */

@media (max-width: 767px) {
    .hr-carte__grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hr-carte__cadre { position: relative; top: 0; height: 75vh; min-height: 450px; border-radius: var(--hr-r-md); }

    /* Légende repliée : « Légende ▾ » précédée des points de couleur */
    .hr-carte__legende { top: 8px; left: 8px; max-width: calc(100% - 72px); }
    .hr-carte__legende-bouton {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: var(--hr-om-controle);
        font: 500 13px var(--hr-font-texte);
        color: var(--hr-encre);
        cursor: pointer;
    }
    .hr-carte__points { display: inline-flex; }
    .hr-carte__points i { width: 10px; height: 10px; margin-left: -3px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
    .hr-carte__points i:first-child { margin-left: 0; }
    .hr-carte__legende-items {
        display: none;
        width: max-content;
        margin-top: 6px;
        padding: 12px;
        border-radius: var(--hr-r-md);
        font-size: 13px;
    }
    .hr-carte__legende--ouverte .hr-carte__legende-items { display: grid; grid-template-columns: 1fr; gap: 8px; }

    .hr-carte__carte .leaflet-left .leaflet-control { margin-left: 8px; }
    .hr-carte__carte .leaflet-right .leaflet-control { margin-right: 8px; }
    .hr-carte__carte .leaflet-top.leaflet-right { top: 8px; }
    .hr-carte__carte .hr-carte__fonds > a { width: 36px; padding: 0; justify-content: center; }
    .hr-carte__fonds > a span { display: none; }

    /* Filtres actifs entre les filtres et la carte */
    .hr-carte .hr-tableau__rangee + .hr-tableau__etiquettes { margin-top: 4px; margin-bottom: 12px; }

    /* En-tête de liste collant une fois la carte dépassée */
    .hr-carte__bande.hr-tableau__bande { position: sticky; top: var(--hr-en-h, 0px); min-height: 72px; }

    .hr-carte__fiche { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; min-height: 104px; }
    .hr-carte__photo img { width: 120px; height: 80px; }
    .hr-carte__nom { -webkit-line-clamp: 1; }
    /* « Voir sur la carte » : un rond de 32 px (zone de toucher de 44 px) */
    .hr-carte__voir { position: relative; justify-content: center; width: 32px; height: 32px; padding: 0; }
    .hr-carte__voir span { display: none; }
    .hr-carte__voir::after { content: ""; position: absolute; inset: -6px; }
}