/* LE BOUTON DES FILTRES ET SA FEUILLE — UNE SEULE FOIS, POUR LES DEUX CARTES.
 *
 * POURQUOI CE FICHIER EXISTE (10/09/2026).
 *
 * Ce bloc vivait dans `home/scene.css`, servie par l'accueil seul. Julien, le
 * lendemain, sur /carte/ : « C'est trop tasse pas assez aere ». Le remede est
 * celui qu'il avait lui-meme demande pour l'accueil la veille — un petit
 * bouton sur la carte, une feuille qui monte du bas — et /carte/ en avait
 * besoin DEUX FOIS PLUS : elle portait DEUX rangees de pastilles au lieu
 * d'une, dont une pour une seule puce.
 *
 * LE RECOPIER DANS map.css AURAIT DONNE DEUX COMPOSANTS. Deux boutons de
 * filtres, deux feuilles, deux dessins du meme geste sur deux pages que le
 * visiteur enchaine — et le jour ou l'un des deux bouge, l'autre ne bouge pas.
 * Il est donc SORTI de scene.css sans qu'une declaration change, et les deux
 * pages le chargent : l'accueil dans home.html, /carte/ dans nearby_map.html.
 *
 * CE QUI RESTE PROPRE A CHAQUE PAGE EST LE CONTENU DE LA FEUILLE, ET LUI SEUL.
 * L'accueil y met ses trois criteres en boutons radio, qui filtrent en GET ;
 * /carte/ y met ses pastilles de famille, qui filtrent dans le navigateur.
 * Meme coque, meme geste, meme dessin ; deux charges utiles.
 *
 * LES NOMS DE CLASSE RESTENT `home-filtres-*`, ET C'EST DELIBERE. Les
 * renommer aurait touche l'accueil, ses contrats et son script le lendemain
 * d'un arbitrage au point pres, pour ne rien changer a l'ecran. Le prefixe
 * nomme desormais le COMPOSANT — les filtres de carte — et non la page ou il
 * est ne. C'est le seul endroit ou il se declare.
 */


/* ==========================================================================
 * 6. LE BOUTON DES FILTRES, ET LA FENÊTRE QU'IL OUVRE (09/09)
 *
 * Julien, iPhone en main : « Le système de filtre faut un petit bouton en haut
 * à droite de la carte qui ouvre une pop UP JS pour faire les sélections là
 * c'est nul ».
 *
 * PETIT À L'ŒIL, GRAND AU DOIGT. La cible fait `--tap-size` (44 points, le
 * plancher de WCAG 2.5.8) et elle est TRANSPARENTE ; ce qui se voit est une
 * pastille de 34 points centrée dedans. Les dix points de différence sont du
 * rembourrage invisible : le bouton se pose sur la carte sans la manger, et le
 * pouce le trouve quand même.
 *
 * IL EST EN HAUT À DROITE, ET CE COIN ÉTAIT LIBRE. Le zoom de Leaflet vit en
 * haut à gauche, « Me localiser » en bas à droite (map.css l'y a descendu le
 * 08/09, dans la zone du pouce), le volet monte du bas. Rien à déplacer.
 * ========================================================================== */
.home-filtres-bouton {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 34;
    display: inline-grid;
    place-items: center;
    min-width: var(--tap-size, 44px);
    min-height: var(--tap-size, 44px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hp-surface-warm, #FFFDF7);
    cursor: pointer;
}

.home-filtres-bouton__pastille {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 253, 247, .82);
    border-radius: 999px;
    background: rgba(36, 90, 59, .94);
    box-shadow: 0 10px 22px rgba(27, 29, 24, .22);
}

/* LE FOCUS SE DESSINE SUR CE QUI SE VOIT, PAS SUR LA CIBLE TRANSPARENTE : un
   anneau tracé autour des 44 points invisibles flotterait à dix points de la
   pastille et donnerait l'impression d'entourer du vide. */
.home-filtres-bouton:focus-visible { outline: none; }

.home-filtres-bouton:focus-visible .home-filtres-bouton__pastille {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* LE COMPTE DES FILTRES POSÉS, EN PASTILLE. Il ne paraît que s'il y a quelque
   chose à compter — un « 0 » sur un bouton est un bruit — et il reprend
   l'orange de « Tout effacer », qui est déjà la couleur de ce qui est posé. */
.home-filtres-bouton__compte {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    min-height: 18px;
    padding-inline: 4px;
    border: 1px solid var(--hp-surface-warm, #FFFDF7);
    border-radius: 999px;
    background: var(--hp-orange, #C86138);
    color: #FFFFFF;
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- LA FENÊTRE ---------------------------------------------------------
 *
 * `hidden` FAIT TOUT LE TRAVAIL D'ÉTAT, ET AUCUNE RÈGLE NE LE CONTREDIT ICI.
 * map.css a déjà payé cette leçon en toutes lettres : `[hidden] { display:
 * none }` vit dans la feuille de l'AGENT, et la moindre déclaration d'auteur
 * de `display` la bat. Aucune règle de ce fichier ne déclare donc `display`
 * sur `.home-filtres-modale` : elle est `position: fixed`, ses deux enfants
 * sont placés absolument, et son `display: block` par défaut suffit. Le
 * module se contente de poser et de retirer l'attribut.
 * ------------------------------------------------------------------------ */
.home-filtres-modale {
    position: fixed;
    inset: 0;
    z-index: 210;
}

.home-filtres-modale__voile {
    position: absolute;
    inset: 0;
    background: rgba(11, 24, 18, .46);
}

/* AU POUCE, LA FENÊTRE EST UNE FEUILLE QUI MONTE DU BAS. C'est le motif de
   toute la maison — sélecteur de lieu, feuilles de la barre de filtres — et
   c'est le seul qui mette le contenu sous la main plutôt qu'au milieu de
   l'écran. Elle plafonne à 88 % de la vue : la bande de carte qui reste
   visible au-dessus dit qu'on n'a pas changé de page. */
.home-filtres-modale__boite {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    background: var(--ui-plan-raised, #FFFDF8);
    color: var(--ui-color-ink, #241D16);
    box-shadow: 0 -18px 44px rgba(22, 41, 28, .28);
}

.home-filtres-modale__form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: 88dvh;
}

.home-filtres-modale__entete {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 6px;
}

/* L'ANSE DIT « ÇA SE TIRE ET ÇA SE POUSSE ». Elle est décorative : la fenêtre
   ne se glisse pas au doigt, mais le trait est le signe que tout le monde
   associe à une feuille qui monte du bas. */
.home-filtres-modale__anse {
    grid-column: 1 / -1;
    justify-self: center;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--ui-color-sable, #E7DCC6);
}

.home-filtres-modale__titre {
    margin: 0;
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: 1.12rem;
    font-weight: 600;
}

.home-filtres-modale__croix {
    display: inline-grid;
    place-items: center;
    min-width: var(--tap-size, 44px);
    min-height: var(--tap-size, 44px);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hp-muted, #6E6252);
    cursor: pointer;
}

.home-filtres-modale__croix:focus-visible,
.home-filtres-modale__voir:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* C'EST LE CORPS QUI DÉFILE, ET LUI SEUL. Chaque liste de choix porte de
   la barre repliée un `max-height: 46dvh` et son propre défilement — utile dans un
   volet de critère unique, absurde ici : trois zones de défilement empilées
   dans une feuille qui défile déjà. On les rend au fil du corps. */
.home-filtres-modale__corps {
    display: grid;
    gap: 14px;
    padding: 4px 14px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.home-filtres-modale__choix {
    max-height: none;
    overflow: visible;
}

.home-filtres-modale__critere {
    margin: 0;
    padding: 0;
    border: 0;
}

.home-filtres-modale__question {
    margin: 0 0 4px;
    padding: 0;
    color: var(--hp-green, #245A3B);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

/* LE PIED EST COLLÉ AU BAS DE LA FEUILLE, ET C'EST LE PIÈGE DU POUCE.
 * Sur un 390x844 tenu à une main, le haut d'une feuille de 88 % de la vue est
 * hors d'atteinte. Le geste de validation se pose donc là où le pouce retombe,
 * et il ne défile pas avec les choix : on doit pouvoir valider sans remonter.
 * La zone sûre du bas est rendue à l'écran, sinon le bouton passe sous la
 * barre d'accueil de l'iPhone. */
.home-filtres-modale__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
    background: var(--ui-plan-raised, #FFFDF8);
}

.home-filtres-modale__voir { flex: 1 1 auto; }

/* LE FOND NE DÉFILE PAS PENDANT QU'ON CHOISIT. Sans ce verrou, un glissement
   qui dépasse la feuille emporte la page derrière elle, et on rouvre les yeux
   ailleurs. `overscroll-behavior: contain` sur le corps arrête la chaîne au
   bord de la liste ; cette règle-ci arrête le document lui-même. */
.home-filtres-verrou {
    overflow: hidden;
}

/* AU-DELÀ DU TÉLÉPHONE, C'EST UNE BOÎTE CENTRÉE. Une feuille pleine largeur
   sur un écran de 1200 points serait un bandeau de trois mètres. */
@media (min-width: 640px) {
    .home-filtres-modale__boite {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(420px, calc(100vw - 48px));
        max-height: 80dvh;
        translate: -50% -50%;
        border-radius: var(--ui-radius-card, 14px);
        box-shadow: 0 24px 60px rgba(22, 41, 28, .30);
    }

    .home-filtres-modale__form { max-height: 80dvh; }

    .home-filtres-modale__anse { display: none; }
}


/* LE BOUTON DE VALIDATION SUIT LA FEUILLE, PARCE QU'IL EN FAIT PARTIE.
 *
 * Il etait reste seul dans scene.css apres le partage, et la feuille de
 * /carte/ aurait rendu un bouton nu : le pied de la fenetre ne declare qu'un
 * `flex` (`.home-filtres-modale__voir`), son habillage vivait ailleurs. Un
 * composant partage qui laisse une de ses pieces derriere lui n'est pas
 * partage : il est casse a moitie sur la page qui l'emprunte.
 */
/* CE BOUTON N'EST PAS `.ui-cta`, ET C'EST UNE RÈGLE DE LA MAISON : `.ui-cta`
   désigne LE geste que la page attend, et il n'y en a qu'un par écran. Un
   bouton rangé dans un panneau replié n'est pas celui-là — un contrat de
   l'écran d'inscription l'a déjà rappelé en rougissant. Même habillage que
   `.lieu__geoloc`, qui a tranché la même question. */
.home-filtres__voir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-size);
    padding-inline: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--hp-green, #245A3B);
    color: var(--hp-surface-warm, #FFF8EC);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}