/* ─ Titre ───────────────────────────────────────────────────────────────── */
#heb-titre {
    max-width: 1040px;
    margin: 0 auto;
    /* Resserré : 26 px au-dessus et 16 en dessous repoussaient d'autant les
       résultats, que le visiteur est venu voir. */
    padding: 16px 20px 8px;
    text-align: center;
}
#heb-titre h1 {
    margin: 0 0 6px;
    font-family: var(--dh-titre, inherit);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    color: var(--dh-texte, #0F172A);
    text-wrap: balance;
}
#heb-titre p { margin: 0; font-family: var(--dh-texte-font, inherit); color: var(--dh-texte-3, #64748B); font-size: .92rem; }

/* ─ Barre de recherche ──────────────────────────────────────────── */
/* Onze contrôles alignés, onze étiquettes en capitales grises : la barre criait
   plus fort que les résultats. Ce qui reste à l'écran est un seul bloc arrondi,
   OÙ / QUAND / COMBIEN, la grammaire que le voyageur connaît. Le reste est dans
   un tiroir qui dit combien de critères y sont actifs. */
#heb-bar {
    position: sticky;
    top: 66px;                    /* hauteur du header */
    z-index: 900;
    background: var(--dh-papier, #fff);
    border-bottom: 1px solid var(--dh-lin, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;   /* le bloc au centre, comme sur les sites de voyage */
    gap: 10px;
    padding: 9px 20px;
    flex-wrap: wrap;

    /* La hauteur du bloc tenait à trois réglages qui s'additionnaient : le
       remplissage des champs, la taille de l'étiquette et celle de la valeur.
       Elle se pose ici une fois, et le bouton « Filtres » s'y aligne.

       46 px ne suffisaient pas : un `input[type=date]` porte sa propre hauteur,
       calendrier compris, et le dépassement était rogné par le `overflow:
       hidden` du bloc. Les étiquettes OÙ et ARRIVÉE se retrouvaient coupées par
       le haut. Les champs ont maintenant une hauteur explicite, et le total est
       calculé plutôt que deviné : 8 + 14 (étiquette) + 22 (champ) + 8 + 2. */
    --hb-hauteur: 54px;
}

/*
 * ⚠️ CARTOUCHE MARINE EN GRILLE (18/10/2026), conforme à la maquette
 * `DirectHote Hebergements.dc.html` : plus une pilule blanche aux champs
 * séparés par des filets verticaux, mais le même objet qu'`home.php`
 * (`.tv-search`) et la page d'accueil de la maquette : un cadre marine, un
 * filet papier à l'intérieur, et CHAQUE champ posé comme sa propre plaque
 * claire. Mêmes `name`/`id`/valeurs, rien d'autre ne change.
 */
.hb-groupe {
    background: var(--dh-marine, #1E2A38);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 8px 20px rgba(30,42,56,.2);
    /* Large : sur un écran d'ordinateur, un bloc de 660 px au milieu de 1900
       laissait deux déserts de chaque côté, et tronquait « Une ville, un
       département… » dès le premier champ. */
    flex: 0 1 1040px;
}
.hb-groupe:focus-within { box-shadow: 0 0 0 3px rgba(46,107,94,.3), 0 8px 20px rgba(30,42,56,.2); }

.hb-groupe__filet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    border: 2px solid var(--dh-papier, #F4F1EA);
    border-radius: 8px;
    padding: 6px;
}

.hb-champ {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    min-width: 0;
    background: var(--dh-papier, #F4F1EA);
    border-radius: 5px;
    transition: background .12s;
}
.hb-champ--ou { grid-column: span 2; position: relative; }

/* Aide à la saisie du champ « Où » : même liste que celle de l'accueil. */
#heb-suggest {
    position: absolute; top: calc(100% + 12px); left: 0; min-width: 100%; width: max-content; max-width: 90vw;
    background: var(--dh-papier, #fff); border: 1px solid var(--dh-lin, #E2E8F0); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(30,42,56,.18); max-height: 340px; overflow-y: auto;
    display: none; z-index: 950; text-align: left;
}
#heb-suggest.open { display: block; }
#heb-suggest button {
    display: block; width: 100%; text-align: left; padding: 12px 18px; margin: 0;
    background: none; border: none; border-bottom: 1px solid var(--dh-lin, #F1F5F9); border-radius: 0;
    color: var(--dh-texte, #1E2A38); font-family: var(--dh-texte-font, inherit); font-size: .95rem; cursor: pointer;
}
#heb-suggest button:last-child { border-bottom: none; }
#heb-suggest button:hover, #heb-suggest button.actif { background: var(--dh-vert-teinte, #F8FAFC); color: var(--dh-vert-fonce, #1F4A41); }
#heb-suggest small { color: var(--dh-texte-3, #6f6a60); font-size: .8rem; margin-left: 6px; }

/* Les étiquettes redeviennent des mots, pas des capitales espacées. */
#heb-bar .hb-champ label {
    font-family: var(--dh-mono, inherit); font-size: .64rem; font-weight: 500; color: var(--dh-texte-3, #5b5f62);
    letter-spacing: .05em; text-transform: uppercase;
    line-height: 1.4; margin: 0; cursor: default;
}
.hb-champ input, .hb-champ select {
    /* Pas de hauteur figée : la cartouche n'en a plus (elle grandit avec son
       contenu), donc plus de risque qu'un `input[type=date]` plus haut que
       prévu se fasse rogner. Les deux réglages allaient ensemble. */
    border: none; background: none; outline: none; padding: 0;
    font-family: var(--dh-texte-font, inherit); font-size: .9rem; line-height: 1.4;
    color: var(--dh-texte, #1E2A38); width: 100%; min-width: 0; cursor: pointer;
}
.hb-champ input[type=search] { cursor: text; }
.hb-champ input::placeholder { color: var(--dh-texte-3, #6f6a60); }

#heb-go {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--v-accent); color: #fff; border: none;
    border-radius: 5px;
    font-family: var(--dh-titre, inherit); font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
    white-space: nowrap;
}
#heb-go:hover { background: var(--v-accent-fonce); }
#heb-go:focus-visible { outline: 2px solid var(--dh-papier, #0F172A); outline-offset: 2px; }

.hb-compteur {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--v-accent); color: #fff; border-radius: 999px;
    font-size: .7rem; font-weight: 700;
}

/* ─ Le panneau de filtres, à facettes (02/11/2026) ─────────────────────────────
   Un panneau à gauche de la liste sur un grand écran (comme Booking et Gîtes de
   France), une feuille qui monte du bas en dessous de 1280 px. C'est LE MÊME
   élément : un seul jeu de champs, rattachés au formulaire de recherche par
   `form="heb-bar"` (ils sont hors de sa balise, pas hors de sa recherche).

   La case reste dans le document et porte la valeur ; elle est seulement
   retirée du flux visuel, et c'est le `<i>` qui se dessine. `input:checked + i`
   plutôt que `label:has(...)` : le sélecteur adjacent est compris partout. */
#heb-facettes {
    flex: 0 0 270px; width: 270px; position: sticky; top: 138px; z-index: 1;
    align-self: flex-start; height: calc(100vh - 138px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 18px 28px 20px; box-sizing: border-box;
    background: var(--dh-papier, #F4F1EA); border-right: 1px solid var(--dh-lin, #D3CCBD);
    font-family: var(--dh-texte-font, inherit); color: var(--dh-texte, #1E2A38);
}
/* Propres à la feuille : sur un grand écran la recherche s'envoie d'elle-même. */
.hf-tete, .hf-pied, #heb-filtres-ouvrir, #heb-facettes-fond { display: none; }

.hf-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0 10px; }
.hf-active {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 11px;
    background: var(--v-accent-pale, #E4EEEA); color: var(--v-accent-fonce, #1F4A41);
    border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none;
}
.hf-active:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--v-accent); }
.hf-active span { font-size: .72rem; opacity: .7; }
.hf-effacer { padding: 6px 4px; font-size: .8rem; font-weight: 600; color: var(--v-accent); text-decoration: underline; }

.hf-bloc { border-top: 1px solid var(--dh-lin, #D3CCBD); padding: 12px 0; }
.hf-bloc[hidden] { display: none; }
.hf-bloc > summary {
    list-style: none; cursor: pointer; min-height: 32px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--dh-titre, inherit); font-size: 1.05rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
}
.hf-bloc > summary::-webkit-details-marker { display: none; }
.hf-bloc > summary::after { content: '−'; font-size: 1.15rem; color: var(--dh-texte-3, #5B5F62); }
.hf-bloc:not([open]) > summary::after { content: '+'; }
.hf-bloc > summary:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.hf-bloc > :not(summary) { margin-top: 10px; }

.hf-bloc select, .hf-prix input {
    width: 100%; min-height: 40px; padding: 8px 11px; box-sizing: border-box;
    border: 1px solid var(--dh-lin, #CBD5E1); border-radius: 7px; background: #fff; color: inherit;
    font-family: inherit; font-size: .9rem;
}
.hf-bloc select:focus, .hf-prix input:focus { border-color: var(--v-accent); outline: none; }
.hf-etiquette {
    display: block; margin: 12px 0 4px;
    font-family: var(--dh-mono, inherit); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--dh-texte-3, #5B5F62);
}
.hf-etiquette:first-child { margin-top: 0; }

.hf-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 0; font-size: .92rem; cursor: pointer; }
.hf-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.hf-opt i {
    flex: 0 0 18px; width: 18px; height: 18px; position: relative; box-sizing: border-box;
    border: 1.5px solid var(--dh-marine, #1E2A38); border-radius: 3px; background: #fff;
}
.hf-opt input[type=radio] + i { border-radius: 50%; }
.hf-opt input:checked + i { background: var(--v-accent); border-color: var(--v-accent); }
.hf-opt input[type=checkbox]:checked + i::after {
    content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hf-opt input[type=radio]:checked + i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.hf-opt input:focus-visible + i { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.hf-opt em { margin-left: auto; font-style: normal; font-family: var(--dh-mono, inherit); font-size: .72rem; color: var(--dh-texte-3, #5B5F62); }
/* Une option qui ne donnerait aucun résultat : grisée, et fermée (voir la vue). */
.hf-opt.est-vide { opacity: .4; cursor: not-allowed; }

.hf-plus > summary { list-style: none; cursor: pointer; padding: 6px 0; font-size: .82rem; font-weight: 600; color: var(--v-accent); text-decoration: underline; }
.hf-plus > summary::-webkit-details-marker { display: none; }
.hf-plus[open] > summary { display: none; }

.hf-histo { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.hf-histo i { flex: 1; min-height: 3px; background: var(--dh-lin, #D3CCBD); border-radius: 2px 2px 0 0; }
.hf-histo i.in { background: var(--v-accent); }
/* `appearance`, `border`, `background` et `padding` remis à zéro : la feuille de
   style globale habille tout `<input>` en champ de texte, et le curseur se
   rendait en pilule blanche autour de sa poignée. */
.hf-range { width: 100%; height: 28px; margin: 2px 0 0; padding: 0; border: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; --hf-pct: 100%; }
/* La piste est verte jusqu'à la poignée, grise ensuite : `--hf-pct` est posée par
   la vue, puis tenue à jour par le script à chaque déplacement. */
.hf-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--v-accent) var(--hf-pct), var(--dh-lin, #D3CCBD) var(--hf-pct)); }
.hf-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--v-accent) var(--hf-pct), var(--dh-lin, #D3CCBD) var(--hf-pct)); }
.hf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--v-accent); box-shadow: 0 1px 4px rgba(30,42,56,.25); }
.hf-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--v-accent); box-shadow: 0 1px 4px rgba(30,42,56,.25); }
.hf-range:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 4px; border-radius: 4px; }
.hf-prix { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.hf-prix input { width: 110px; }

.hf-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hf-note { position: relative; cursor: pointer; }
.hf-note input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.hf-note span {
    display: block; padding: 9px 0; text-align: center; font-size: .82rem; font-weight: 600;
    border: 1.5px solid var(--dh-marine, #1E2A38); border-radius: 6px; background: #fff;
}
.hf-note input:checked + span { background: var(--dh-marine, #1E2A38); color: #fff; }
.hf-note input:focus-visible + span { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.hf-aide { margin: 8px 0 0; font-size: .78rem; line-height: 1.4; color: var(--dh-texte-3, #5B5F62); }

/* ─ En dessous de 1280 px : la feuille qui monte du bas ───────────────────────
   Elle ne s'ouvre qu'au toucher de « Filtres », et ne renvoie la recherche qu'au
   toucher du bouton du bas : la fermer sous le doigt au premier réglage serait
   le défaut déjà évité pour le panneau de recherche. */
@media (max-width: 1279px) {
    #heb-facettes {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 100001;
        width: auto; max-width: 640px; margin: 0 auto; flex: none; padding: 0;
        height: 92vh; height: min(92vh, calc(100dvh - 24px));
        display: flex; flex-direction: column; overflow: hidden;
        border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(30,42,56,.3);
        transform: translateY(105%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    body.heb-facettes-on #heb-facettes { transform: none; visibility: visible; transition: transform .25s ease; }
    @media (prefers-reduced-motion: reduce) { #heb-facettes, body.heb-facettes-on #heb-facettes { transition: none; } }
    body.heb-facettes-on { overflow: hidden; }
    body.heb-facettes-on #heb-facettes-fond { display: block; position: fixed; inset: 0; z-index: 100000; background: rgba(30,42,56,.5); }

    .hf-tete {
        display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
        padding: 4px 6px 4px 18px; border-bottom: 1px solid var(--dh-lin, #D3CCBD);
        font-family: var(--dh-titre, inherit); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase;
    }
    #heb-facettes-fermer { width: 48px; height: 48px; border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: inherit; }
    .hf-corps { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px; }
    .hf-pied {
        display: flex; align-items: center; gap: 14px; flex: 0 0 auto; background: #fff;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dh-lin, #D3CCBD);
    }
    .hf-pied a { font-size: .9rem; color: inherit; text-decoration: underline; white-space: nowrap; }
    #heb-appliquer {
        flex: 1; min-height: 50px; border: 0; border-radius: 8px; cursor: pointer;
        background: var(--v-accent); color: #fff;
        font-family: var(--dh-titre, inherit); font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    }
    #heb-appliquer.est-en-cours { opacity: .65; }

    /* Au doigt : des cibles de 44 px, et une case plus grande. */
    .hf-opt { min-height: 44px; font-size: 1rem; }
    .hf-opt i { flex-basis: 22px; width: 22px; height: 22px; }
    .hf-opt input[type=checkbox]:checked + i::after { left: 7px; top: 2px; width: 6px; height: 11px; }
    .hf-note span { padding: 12px 0; }

    #heb-filtres-ouvrir {
        display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
        position: fixed; left: 50%; transform: translateX(-50%); z-index: 1100;
        bottom: calc(env(safe-area-inset-bottom, 0px) + max(24px, calc(var(--dh-cookies-h, 0px) + 18px)));
        padding: 12px 22px; border: 0; border-radius: 999px;
        background: var(--dh-marine, #0F172A); color: var(--dh-papier, #fff);
        font-family: var(--dh-titre, inherit); font-size: .9rem; font-weight: 700; letter-spacing: .02em;
        box-shadow: 0 6px 20px rgba(30,42,56,.35);
    }
    body.heb-footer-visible #heb-filtres-ouvrir { display: none; }
}

#heb-reset { font-family: var(--dh-texte-font, inherit); font-size: .82rem; color: var(--v-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
#heb-reset:hover { text-decoration: underline; }

/* ─ Pastilles d'ambiance, plaques de rue (signature) ───────────────────────
   Le même filtre `?cat=` que le `<select>` du tiroir, juste visible en
   rangée au-dessus de la liste, comme la maquette. */
/* UNE SEULE LIGNE QUI DÉFILE, à toutes les largeurs (02/11/2026). Dix-sept
   plaques à la ligne occupaient trois rangées, soit près de 150 px entre la
   barre de recherche et la première fiche, sur la page où le visiteur est venu
   voir des hébergements. Les bords s'effacent en fondu : c'est ce qui dit qu'il y
   a une suite, sans barre de défilement. La molette fait défiler la rangée (voir
   le script), et l'ambiance retenue est ramenée à l'écran au chargement. */
#heb-ambiances-zone { position: relative; max-width: 1180px; margin: 0 auto; }
#heb-ambiances {
    display: flex; flex-wrap: nowrap; gap: 8px;
    padding: 12px 20px 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
#heb-ambiances::-webkit-scrollbar { display: none; }

/* Les flèches de la rangée : rondes, posées sur le fondu, à hauteur des plaques. */
.hb-fleche {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0 0 3px; cursor: pointer;
    border: 1.5px solid var(--dh-marine, #1E2A38); border-radius: 50%;
    background: var(--dh-papier, #F4F1EA); color: var(--dh-marine, #1E2A38);
    font-family: var(--dh-titre, inherit); font-size: 1.7rem; line-height: 1;
    box-shadow: 0 2px 8px rgba(30,42,56,.22);
    transition: background .15s, color .15s;
}
.hb-fleche[hidden] { display: none; }
.hb-fleche:hover { background: var(--dh-marine, #1E2A38); color: var(--dh-papier, #F4F1EA); }
.hb-fleche:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.hb-fleche--g { left: 4px; }
.hb-fleche--d { right: 4px; }
/* Sur écran tactile on fait glisser du doigt : deux flèches de plus ne serviraient qu'à masquer des plaques. */
@media (pointer: coarse) { .hb-fleche { display: none !important; } }
.hb-rue {
    flex: 0 0 auto; border: 0; background: var(--dh-marine, #1E2A38); border-radius: 9px;
    padding: 3px; cursor: pointer; text-decoration: none; display: inline-flex;
    transition: transform .2s, background .2s, box-shadow .2s;
}
.hb-rue:hover { transform: translateY(-2px); }
.hb-rue > span {
    display: flex; gap: 8px; align-items: center;
    border: 2px solid var(--dh-papier, #F4F1EA); border-radius: 6px; padding: 6px 12px;
    font-family: var(--dh-titre, inherit); font-size: 15px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--dh-papier, #F4F1EA);
}
.hb-rue small { font-family: var(--dh-mono, inherit); font-size: 11px; font-weight: 500; opacity: .8; }
/* Ombre courte : la rangée défile, donc elle rogne ce qui dépasse en bas. */
.hb-rue.is-active { background: var(--v-accent, #2E6B5E); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(46,107,94,.4); }

/* Posée SUR la carte, en bas à gauche : elle parle d'un geste qui se fait là,
   et non à l'autre bout de la barre de filtres. `pointer-events: none` pour
   qu'elle n'attrape jamais un glissement destiné à la carte. */
#heb-map-astuce {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    background: rgba(244,241,234,.94); color: var(--dh-texte-2, #475569);
    border: 1px solid var(--dh-lin, #E2E8F0); border-radius: 999px;
    padding: 6px 14px; font-family: var(--dh-texte-font, inherit); font-size: .75rem; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(30,42,56,.10);
    pointer-events: none;
}

@media (max-width: 900px) {
    /* La cartouche en grille s'empile naturellement (auto-fit) dès que la
       place manque, mais sur téléphone on force UNE colonne : deux champs de
       150px côte à côte restent lisibles, mais trop serrés au doigt. */
    .hb-groupe { flex: 1 1 100%; max-width: none; }
    .hb-groupe__filet { grid-template-columns: 1fr; }
    .hb-champ--ou { grid-column: span 1; }
    #heb-go { height: 48px; }
    #heb-map-astuce { display: none; }
}


/* ─ Corps ────────────────────────────────────────────────────────────────────── */
/*
 * ⚠️ PAGE QUI DÉFILE, PAS COLONNE QUI DÉFILE À PART (18/10/2026, conforme à
 * la maquette `DirectHote Hebergements.dc.html` : la liste est un simple
 * `<aside style="position:sticky">`, pas un panneau à hauteur fixe). La
 * barre de défilement indépendante entre la liste et la carte n'existe pas
 * dans la maquette : c'est la PAGE qui défile, et c'est la carte qui reste
 * collée à l'écran tant que la liste, à sa droite, continue.
 */
#heb-body {
    display: flex;
    align-items: flex-start;
}

/* ─ Liste ────────────────────────────────────────────────────────────────────── */
#heb-list-col {
    /* 62 % et non 52 : la liste est ce que le voyageur est venu voir, la carte
       l'accompagne. À 52 %, deux fiches seulement tenaient au premier écran ;
       à 62 % et trois colonnes, il y en a six. Mesuré sur maquette, le 21/09.

       En PROPORTION (62 pour 38) et non en pourcentage de la largeur : sur un
       grand écran le panneau de filtres prend ses 270 px à gauche, et la liste
       et la carte se partagent ce qui reste. Un `width: 62%` laissait la carte
       avec 277 px à 1440. */
    flex: 62 1 0;
    min-width: 0;
    padding: 16px 18px;
    background: var(--dh-mur, #F8FAFC);
    border-right: 1px solid var(--dh-lin, #E2E8F0);
}
#heb-tete-liste { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; min-height: 34px; }
/* La liste reste à l'écran, atténuée, pendant que la nouvelle arrive : une liste qui disparaît
   puis réapparaît fait croire à un rechargement, et la perdre d'un coup fait lâcher prise. */
#heb-list-col.est-en-cours #heb-cards { opacity: .45; transition: opacity .15s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #heb-list-col.est-en-cours #heb-cards { transition: none; } }
#heb-count { font-family: var(--dh-titre, inherit); font-size: 1rem; font-weight: 600; color: var(--dh-texte, #0F172A); }
#heb-tout {
    min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--v-accent); background: var(--v-accent-pale); color: var(--v-accent-fonce);
    font-family: var(--dh-texte-font, inherit); font-size: .8rem; font-weight: 600;
}
#heb-tout:hover { background: #fff; }

/* ─ Masquer / afficher la carte (étape 3, 02/11/2026) ───────────────────────────
   Ordinateur (≥ 1280 px) : visible, masquée à la demande (`heb-carte-reduite`).
   Tablette (769 à 1279 px) : MASQUÉE, montrée à la demande (`heb-carte-ouverte`).
   Téléphone : rien ici, le bouton flottant « Carte » fait déjà ce travail.
   Quand la carte est masquée, la liste prend toute la largeur : trois colonnes de
   fiches (quatre au-delà de 1760 px) au lieu de deux. */
#heb-carte-bascule { display: none; }
@media (min-width: 769px) {
    #heb-carte-bascule {
        display: inline-flex; align-items: center; gap: 7px; margin-left: auto; min-height: 34px; padding: 0 14px;
        border: 1.5px solid var(--dh-marine, #1E2A38); border-radius: 999px; background: #fff; color: var(--dh-marine, #1E2A38);
        font-family: var(--dh-texte-font, inherit); font-size: .82rem; font-weight: 600; cursor: pointer;
    }
    #heb-carte-bascule:hover { background: var(--dh-marine, #1E2A38); color: var(--dh-papier, #F4F1EA); }
    #heb-carte-bascule:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }
    #heb-carte-bascule .hb-bascule--afficher { display: none; }
}
@media (min-width: 1280px) {
    body.heb-carte-reduite #heb-map-col { display: none; }
    body.heb-carte-reduite #heb-carte-bascule .hb-bascule--masquer { display: none; }
    body.heb-carte-reduite #heb-carte-bascule .hb-bascule--afficher { display: inline; }
    body.heb-carte-reduite #heb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1760px) {
    body.heb-carte-reduite #heb-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1279px) {
    body:not(.heb-carte-ouverte) #heb-map-col { display: none; }
    body:not(.heb-carte-ouverte) #heb-carte-bascule .hb-bascule--masquer { display: none; }
    body:not(.heb-carte-ouverte) #heb-carte-bascule .hb-bascule--afficher { display: inline; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
    body:not(.heb-carte-ouverte) #heb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─ Cartes d'hébergement ────────────────────────────────────────── */
/* Les cartes viennent de partials/carte-hebergement-styles.php, comme sur
   l'accueil, les catégories et les pages géo. Il ne reste ici que la colonne
   qui les empile, et la mise en avant de celle qu'on survole sur la carte. */
/* En GRILLE, et non empilées : la colonne de liste fait 52 % de l'écran, soit
   près de 950 px sur un ordinateur. Une carte pleine largeur y affichait une
   photo 4:3 de 700 px de haut, une seule tenait à l'écran. La grille retombe
   d'elle-même sur une colonne dès que la place manque, donc sur téléphone. */
/* DEUX colonnes, TROIS seulement sur un très grand écran, une sur téléphone.
   Le panneau de filtres prend 270 px : à 1440, la liste n'en a plus que 725, et
   trois fiches de 215 px ne se lisent pas. `auto-fill` laissait le navigateur
   choisir : à 1440 px il en posait deux, très grandes, et deux hébergements
   seulement étaient visibles sans défiler. `minmax(0, 1fr)` : sans le zéro, un
   nom long élargit sa colonne et déforme toute la grille. */
#heb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1760px) { #heb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { #heb-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
#heb-cards .dhc.dhc--actif { border-color: var(--v-accent); box-shadow: 0 3px 14px rgba(var(--v-accent-rgb), .18); }

#heb-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; font-family: var(--dh-texte-font, inherit); font-size: .85rem; color: var(--dh-texte-3, #64748B); }
#heb-pages a { color: var(--v-accent); font-weight: 700; text-decoration: none; padding: 8px 14px; border: 1.5px solid var(--dh-lin, #CBD5E1); border-radius: 8px; }
#heb-pages a:hover { background: var(--dh-papier, #F1F5F9); border-color: var(--dh-texte-3, #94A3B8); }

#heb-empty { font-family: var(--dh-texte-font, inherit); text-align: center; padding: 40px 20px; color: var(--dh-texte-3, #94A3B8); font-size: .88rem; line-height: 1.7; }
#heb-zone-info, .heb-notice { background: var(--v-accent-voile); border: 1px solid var(--v-filet-fort);
                 border-radius: 10px; padding: 11px 14px; margin-bottom: 14px;
                 font-size: .82rem; line-height: 1.55; color: var(--v-texte); }
#heb-zone-info b, .heb-notice b { color: var(--v-encre); }

/* ─ Carte ────────────────────────────────────────────────────────────────────── */
/* `z-index: 1` cantonne TOUTE la carte, contrôles de zoom compris, sous la
   barre de recherche. Leaflet pose ses commandes à z-index 1000 : sans ce
   contexte d'empilement, le + et le - de la carte traversaient le tiroir
   de filtres ouvert par-dessus. Surenchérir sur le tiroir n'aurait rien
   réglé, il vit dans le contexte de la barre. */
/* `position: sticky`, pas `relative` dans un parent à hauteur fixe : la carte
   reste à l'écran tant que la liste défile à côté, et se libère une fois la
   liste épuisée, exactement le comportement de la maquette. `top` reprend la
   hauteur empilée du header (66px) et de la barre de recherche sticky (72px). */
#heb-map-col { flex: 38 1 0; min-width: 0; position: sticky; top: 138px; height: calc(100vh - 138px); z-index: 1; }
/* `z-index: 0` : la carte forme son PROPRE contexte d'empilement. Les calques de
   Leaflet montent à 400 et plus ; sans ce contexte ils passaient au-dessus de
   tout ce qu'on pose sur la carte, raccourcis compris, et l'astuce « déplacez la
   carte » était dessous depuis toujours. */
#heb-map { position: absolute; inset: 0; z-index: 0; }

/* ─ Price pill (marker Leaflet) ─────────────────────────────────────────────── */
/* ⚠️ CENTRÉE SUR SON POINT. La pastille était ancrée par son coin haut gauche :
   elle s'affichait à droite et en dessous de l'hébergement qu'elle désigne, et
   deux voisines se recouvraient davantage qu'elles n'auraient dû. */
.pp {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    background: var(--dh-papier, #fff); border: 2px solid var(--dh-marine, #1E293B); border-radius: 18px;
    padding: 4px 9px; font-family: var(--dh-mono, inherit); font-size: .72rem; font-weight: 500; color: var(--dh-texte, #0F172A);
    white-space: nowrap; cursor: pointer; user-select: none;
    box-shadow: 0 2px 6px rgba(30,42,56,.18);
    transition: background .1s, color .1s, transform .1s;
    display: inline-block;
}
.pp:hover, .pp.active { background: var(--dh-marine, #1E293B); color: var(--dh-papier, #fff); transform: translate(-50%, -50%) scale(1.1); z-index: 999 !important; }

/* De loin, un point et pas un prix : à l'échelle de la France, vingt pastilles
   « à partir de 80 € » se recouvrent et plus aucune ne se lit. Le prix apparaît
   quand on s'est assez rapproché pour qu'il tienne. */
.pp-point {
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    background: var(--v-accent, #2E6B5E); border: 3px solid var(--dh-papier, #fff);
    box-shadow: 0 2px 6px rgba(30,42,56,.4);
}
.pp-point:hover, .pp-point.active { background: var(--dh-marine, #1E293B); }

/* ─ Raccourcis de territoire, posés sur la carte ────────────────────────────── */
#heb-raccourcis {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
    pointer-events: none;            /* la carte reste saisissable entre les boutons */
}
#heb-raccourcis::-webkit-scrollbar { display: none; }
.hb-raccourci {
    pointer-events: auto; flex: 0 0 auto; min-height: 38px; padding: 0 14px; cursor: pointer;
    border: 1px solid rgba(30,42,56,.14); border-radius: 999px; background: var(--dh-papier, #fff); color: var(--dh-texte, #0F172A);
    box-shadow: 0 2px 8px rgba(30,42,56,.16);
    font-family: var(--dh-texte-font, inherit); font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.hb-raccourci b { margin-left: 5px; color: var(--v-accent, #2E6B5E); }
.hb-raccourci:hover { border-color: var(--dh-marine, #0F172A); }
.hb-raccourci:focus-visible { outline: 2px solid var(--dh-marine, #0F172A); outline-offset: 2px; }

/* ─ Bulle « plusieurs hébergements à la même adresse » ───────────────────────
   C'est le SEUL moyen d'atteindre ces hébergements, puisqu'aucun zoom ne les
   sépare : elle mérite le même soin qu'une carte de la liste. */
.pg-head { font-family: var(--dh-titre, inherit); font-weight: 600; font-size: 17px; color: var(--dh-texte, #0F172A); line-height: 1.1; }
.pg-city { font-family: var(--dh-texte-font, inherit); font-size: .72rem; color: var(--dh-texte-3, #64748B); margin: 2px 0 8px; }
.pg-list { max-height: 268px; overflow-y: auto; margin: 0 -4px; }
.pg-item {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 4px; border-top: 1px solid var(--dh-lin, #E2E8F0);
    text-decoration: none; color: inherit;
}
.pg-item:hover { background: var(--dh-mur, #F1F5F9); }
.pg-thumb {
    width: 58px; height: 46px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden; background: var(--dh-lin, #E2E8F0);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-body { flex: 1; min-width: 0; }
.pg-name {
    font-family: var(--dh-titre, inherit); font-weight: 600; font-size: .9rem; color: var(--dh-texte, #0F172A); line-height: 1.2;
    /* Un nom à rallonge ne doit pas déformer la bulle. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-meta { font-family: var(--dh-texte-font, inherit); font-size: .7rem; color: var(--dh-texte-3, #64748B); margin-top: 2px; }
.pg-price { flex-shrink: 0; text-align: right; font-family: var(--dh-titre, inherit); font-weight: 600; font-size: .9rem; color: var(--dh-vert-fonce, #235349); }
.pg-price small { display: block; font-family: var(--dh-texte-font, inherit); font-weight: 500; font-size: .62rem; color: var(--dh-texte-3, #94A3B8); }

/* Regroupement : au-delà de quelques dizaines de marqueurs, les pastilles de
   prix se superposent. On affiche alors un compte, qu'un clic fait éclater. */
.pp-cluster {
    background: var(--dh-vert-fonce, #235349); color: #fff; border-color: var(--dh-vert-fonce, #235349);
    min-width: 34px; text-align: center; font-weight: 700;
}
.pp-cluster:hover { background: var(--dh-marine, #1B4038); border-color: var(--dh-marine, #1B4038); }

/* ─ Bascule liste / carte (mobile) ──────────────────────────────────────────
   Sur un téléphone, afficher la liste et la carte en même temps ne laisse
   assez de place ni à l'une ni à l'autre. On reprend donc le principe des
   grandes plateformes : la liste par défaut, et un bouton flottant qui passe
   la carte en plein écran. */
#heb-view-toggle { display: none; }

/* ─ Téléphone : la recherche dans une pastille, la fiche touchée en bas ─────────
   Invisibles sur ordinateur : la barre à quatre champs y fait déjà le travail. */
#heb-pastille-zone, #heb-panneau-tete, #heb-mini { display: none; }

@media (max-width: 768px) {
    /*
     * ⚠️ LE PREMIER ÉCRAN ÉTAIT UN FORMULAIRE (relevé sur capture, 21/09/2026).
     *
     * Titre, quatre champs empilés, bouton et « Filtres » : 450 px avant la
     * première photo, sur la page où arrivent les publicités, donc des
     * téléphones. Et la barre étant `sticky`, ces 330 px suivaient le visiteur
     * pendant tout le défilement. La recherche tient maintenant dans une
     * pastille de 52 px ; elle ouvre LE MÊME formulaire, en plein écran.
     */
    #heb-titre { text-align: left; padding: 12px 16px 4px; }
    #heb-titre p { font-size: .82rem; }

    /* La rangée d'ambiances défile sur une ligne à toutes les largeurs (voir sa
       règle de base) ; ici seulement des marges plus étroites. Elle occupait 230 px,
       soit le tiers du premier écran, avant la première photo. */
    #heb-ambiances { padding: 10px 14px 12px; }

    #heb-pastille-zone {
        display: block; position: sticky; top: 66px; z-index: 900;
        background: var(--dh-papier, #fff); border-bottom: 1px solid var(--dh-lin, #E2E8F0); padding: 8px 14px;
    }
    #heb-pastille {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
        padding: 6px 8px 6px 16px; border-radius: 999px; border: 1px solid var(--dh-lin, #CBD5E1);
        background: var(--dh-papier, #fff); box-shadow: 0 2px 10px rgba(30,42,56,.08);
        font-family: var(--dh-texte-font, inherit); text-align: left; cursor: pointer; color: var(--dh-texte, #0F172A);
    }
    #heb-pastille svg { flex: 0 0 auto; color: var(--v-accent); }
    .hb-pastille__textes { flex: 1; min-width: 0; }
    .hb-pastille__ou { display: block; font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hb-pastille__reste { display: block; font-size: .74rem; color: var(--dh-texte-3, #64748B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Le formulaire : absent de la page, puis en plein écran quand on le demande.
       Au-dessus du bandeau cookies (99999), qui recouvrirait son bouton. */
    #heb-bar { display: none; }
    body.heb-recherche-on { overflow: hidden; }
    body.heb-recherche-on #heb-bar {
        display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
        position: fixed; inset: 0; top: 0; z-index: 100000; overflow-y: auto;
        padding: 0 16px 104px; gap: 12px; border-bottom: none;
    }
    #heb-panneau-tete {
        display: flex; align-items: center; position: sticky; top: 0; z-index: 2;
        margin: 0 -16px; padding: 6px 8px; background: var(--dh-papier, #fff); border-bottom: 1px solid var(--dh-lin, #E2E8F0);
    }
    #heb-panneau-tete strong { flex: 1; text-align: center; padding-right: 44px; font-family: var(--dh-titre, inherit); font-weight: 600; font-size: 1.1rem; color: var(--dh-texte, #0F172A); }
    #heb-panneau-fermer { width: 44px; height: 44px; border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--dh-texte, #0F172A); }

    body.heb-recherche-on .hb-groupe { flex: 0 0 auto; border-radius: 16px; overflow: visible; }
    body.heb-recherche-on .hb-champ { padding: 10px 16px; }
    body.heb-recherche-on .hb-champ input, body.heb-recherche-on .hb-champ select { font-size: 1rem; height: 28px; line-height: 28px; }
    body.heb-recherche-on #heb-go {
        position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        margin: 0; height: 50px; font-size: 1rem; z-index: 3; box-shadow: 0 6px 18px rgba(15,23,42,.25);
    }
    body.heb-recherche-on #heb-reset { align-self: center; padding: 10px; }

    #heb-body { flex-direction: column; height: auto; }
    /* `flex: none` : la liste prend ici sa hauteur du contenu. Avec la base
       proportionnelle (62 1 0), une colonne sans hauteur imposée l'écraserait. */
    #heb-list-col { flex: none; width: 100%; max-height: none; padding: 12px 14px 96px; }

    /* La fiche de l'hébergement touché sur la carte. Une bulle Leaflet, sur un
       téléphone, s'ouvre sous le doigt, se ferme au moindre glissement et son
       lien fait 20 px de haut. */
    #heb-mini {
        position: fixed; left: 12px; right: 12px; z-index: 1150;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + var(--dh-cookies-h, 0px));
        background: var(--dh-papier, #fff); border-radius: 14px; overflow: hidden;
        box-shadow: 0 10px 30px rgba(30,42,56,.35);
    }
    #heb-mini.est-ouverte { display: block; }
    .hb-mini__lien { display: grid; grid-template-columns: 112px minmax(0, 1fr); text-decoration: none; color: inherit; font-family: var(--dh-texte-font, inherit); }
    .hb-mini__photo { width: 112px; height: 112px; object-fit: cover; display: block; background: var(--dh-lin, #E2E8F0); }
    .hb-mini__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 44px 10px 12px; }
    .hb-mini__nom { font-family: var(--dh-titre, inherit); font-size: 1.05rem; font-weight: 600; color: var(--dh-texte, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hb-mini__ligne { font-size: .78rem; color: var(--dh-texte-2, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hb-mini__prix { margin-top: auto; font-size: .82rem; color: var(--dh-texte-2, #475569); }
    .hb-mini__prix b { font-size: 1rem; color: var(--dh-texte, #0F172A); }
    .hb-mini__fermer { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: none; background: none; font-size: 1.15rem; cursor: pointer; color: var(--dh-texte, #0F172A); }
    .hb-mini__pages { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--dh-lin, #E2E8F0); font-size: .82rem; font-weight: 600; color: var(--dh-texte-2, #475569); }
    .hb-mini__pages button { width: 48px; height: 44px; border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--dh-texte, #0F172A); }

    /* La carte n'existe que quand on la demande. Masquée, elle n'a aucune
       dimension : le filtrage géographique se désactive de lui-même et la
       liste montre tout ce qui passe les autres filtres. */
    #heb-map-col { display: none; }

    body.heb-map-on { overflow: hidden; }
    body.heb-map-on #heb-list-col { display: none; }
    /* ⚠️ SOUS L'EN-TÊTE ET LA PASTILLE, pas par-dessus : 66 px d'en-tête du site,
       69 px de pastille (8 + 52 + 8 + 1 de filet). La carte recouvrait tout
       l'écran, recherche comprise : pour chercher ailleurs il fallait revenir à
       la liste. Le titre est retiré dans cette vue, sinon la pastille ne serait
       pas à sa place collée tant que la page n'a pas défilé. */
    body.heb-map-on #heb-titre,
    body.heb-map-on .cat-hero,
    body.heb-map-on .cat-breadcrumb { display: none; }   /* sur une page de catégorie, le bandeau tient la place du titre */
    body.heb-map-on #heb-map-col { display: block; position: fixed; inset: 0; top: 135px; height: auto; z-index: 890; }
    body.heb-map-on #heb-map { position: absolute; inset: 0; }

    #heb-view-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        /* À DROITE, et « Filtres » à gauche : les deux boutons du pouce se
           partagent le bas de l'écran au lieu de se disputer le centre. */
        position: fixed; right: 14px;
        /* Le bas de la fenêtre de mise en page passe SOUS la barre d'outils du
           navigateur mobile, qui ne se replie qu'au défilement : un bouton collé
           à 22px du bas y restait caché tant qu'on ne faisait pas défiler la
           page. On le remonte, et on tient compte de la zone sûre des appareils
           à encoche. */
        /* ⚠️ ET AU-DESSUS DU BANDEAU COOKIES (21/09/2026). Il était DESSOUS : le
           visiteur qui n'avait pas encore répondu au bandeau ne pouvait pas
           ouvrir la carte. `--dh-cookies-h` est publiée par le bandeau lui-même
           et vaut zéro quand il n'est pas affiché. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + max(76px, calc(var(--dh-cookies-h, 0px) + 18px)));
        /* Au-dessus des contrôles Leaflet, qui montent à 1000. */
        z-index: 1100;
        background: var(--dh-marine, #0F172A); color: var(--dh-papier, #fff); border: none; cursor: pointer;
        padding: 12px 22px; border-radius: 999px;
        font-size: .9rem; font-weight: 700; font-family: var(--dh-titre, inherit); letter-spacing: .02em;
        box-shadow: 0 6px 20px rgba(30, 42, 56, .35);
    }
    /* Une mini-fiche est ouverte : le bouton monte au-dessus d'elle, il ne la recouvre pas. */
    body.heb-mini-on #heb-view-toggle,
    body.heb-mini-on #heb-filtres-ouvrir {
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dh-cookies-h, 0px) + var(--heb-mini-h, 112px) + 24px);
    }
    /* « Filtres » : le même bas d'écran que « Carte », côté gauche. */
    #heb-filtres-ouvrir {
        left: 14px; transform: none;
        bottom: calc(env(safe-area-inset-bottom, 0px) + max(76px, calc(var(--dh-cookies-h, 0px) + 18px)));
    }
    /*
     * ⚠️ LE BOUTON RECOUVRAIT LE PIED DE PAGE (trouvé par un audit visuel
     * externe le 28/09/2026). `position: fixed` le tient collé à l'écran
     * même quand la liste a défilé jusqu'au bout, par-dessus le formulaire
     * de newsletter du pied de page. En mode carte, le pied de page n'est de
     * toute façon jamais visible (la carte couvre tout l'écran) : cette règle
     * ne change donc rien à ce mode.
     */
    body.heb-footer-visible #heb-view-toggle { display: none; }
}