/* LA SCENE DE L'ACCUEIL — « Les producteurs près de vous » (13/09/2026).
 *
 * La carte de /carte/ sur l'accueil, sans la redessiner : toile, commandes,
 * cadrage et marqueurs vivent dans css/public/map.css ; le bouton et la
 * fenetre des filtres dans css/public/filtres-modale.css. Ce fichier ne
 * decide que de ce qui est PROPRE a l'accueil : la ligne de titre, la hauteur
 * du cadre, la colonne des pros, et le repli sans script de la barre.
 *
 * MOBILE D'ABORD. Le socle decrit le telephone (<= 639 points) ; chaque palier
 * `min-width` AJOUTE ce que la place permet. Aucune regle `max-width` : un
 * palier de bureau surcharge par un correctif de telephone est une regle qu'on
 * lit a l'envers.
 *
 * PLUS DE TIROIR SUR L'ACCUEIL (Julien, 13/09, iPhone 393x852) : « l'onglet
 * "Tout ce qui se vend près de vous" c'est nul, ça prend de la place, […]
 * plutôt des infos bulles sur la carte ». Au pouce, le volet de resultats
 * n'est pas dessine : l'information passe dans la bulle du marqueur, et la
 * liste qu'on atteint en descendant est celle des produits. A partir de 768
 * points, le volet devient la colonne des pros, a gauche de la carte. Le tiroir
 * de /carte/ n'est pas touche : c'est la page plein ecran, et il y sert.
 *
 * `--nearby-controles-bas` est la hauteur a laquelle map.css pose « Me
 * localiser » et « À visiter ». Sans tiroir, ils se calent juste au-dessus de
 * la mention du fond de carte — a toutes les largeurs.
 *
 * EN PIXELS ET EN dvh, JAMAIS EN %. La lecture de feuille des contrats sait
 * convertir rem, vw, vh et dvh ; elle ne sait pas resoudre un % sans bloc
 * conteneur, et une hauteur en % sortirait la scene de toute mesure.
 */

/* --------------------------------------------------------------------------
 * LA HAUTEUR DU CADRE
 *
 * Au pouce, `clamp(330px, 62dvh, 520px)` : 520 points sur l'iPhone de Julien
 * (390x844), soit 69 % des 748 utiles — la carte reste la plus grande chose de
 * l'ecran (plancher contracte : 60 %). Elle en prenait 555, dont 88 caches sous
 * le tiroir replie : la carte VISIBLE passe de 467 a 520 points, et les 35
 * points rendus au cadre vont a la ligne de titre et au premier produit, que le
 * budget du premier ecran exige (test_premier_ecran_pouce).
 * -------------------------------------------------------------------------- */
.home-page {
    --home-scene-h: clamp(330px, 62dvh, 520px);
}

.home-scene.nearby-map-shell {
    display: grid;
    gap: 6px;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 4px;
    overflow: visible;
}

.home-scene {
    --nearby-controles-bas: 28px;
}

/* --------------------------------------------------------------------------
 * LA LIGNE DE TITRE : LE SLOGAN, PUIS LA SECTION
 *
 * Le hero a disparu (Julien, 13/09) : « Ici, on cultive le lien » reste, petit
 * et discret, en tete de la ligne qui nomme la carte. L'ordre du document est
 * l'ordre de l'ecran. Au pouce, les deux tiennent sur une ligne a 390 points
 * (127 + 10 + 218 estimes pour 374) ; « Ouvrir la carte » attend 640 points :
 * la pastille centrale de la barre basse y mene deja.
 * -------------------------------------------------------------------------- */
.home-scene__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding-inline: 2px;
}

.home-slogan {
    margin: 0;
    color: var(--hp-orange, #C86138);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: .74rem;
    font-style: italic;
    line-height: 1.2;
}

.home-scene__titre {
    margin: 0;
    color: var(--hp-green, #245A3B);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
}

.home-scene__grand {
    display: none;
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--hp-green, #245A3B);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

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

/* --------------------------------------------------------------------------
 * LE CADRE
 *
 * ATTENTION : ni `transform`, ni `filter`, ni `backdrop-filter`, ni `contain`,
 * ni `mask` ici. Chacun ferait du cadre le bloc conteneur de tout descendant en
 * `position: fixed` — et la fenetre des filtres atterrirait dans la carte.
 * -------------------------------------------------------------------------- */
.home-scene__cadre {
    position: relative;
    height: var(--home-scene-h);
    overflow: hidden;
    border: 1px solid var(--hp-border-strong, #DFD4C3);
    border-radius: 18px;
    background: #DFE8DC;
    box-shadow: 0 10px 26px rgba(27, 29, 24, .10);
    isolation: isolate;
}

.home-scene .nearby-map-app {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    border-radius: inherit;
}

.home-scene .nearby-map-canvas {
    min-height: 0;
    border: 0;
    border-radius: 0;
}

.home-scene .nearby-map-locate {
    padding: 0 10px;
}

/* AU POUCE, PAS DE VOLET NI DE POIGNEE : ni tiroir replie, ni entrouvert. La
   liste des pros est rendue pour la colonne des grands ecrans ; au telephone,
   la bulle du marqueur porte ce qu'elle disait. */
.home-scene .nearby-map-results,
.home-scene .nearby-map-results__handle {
    display: none;
}

.home-scene .nearby-map-status {
    font-size: .78rem;
}

.home-scene .nearby-map-results__header h2 {
    font-size: 1.02rem;
}

/* La ligne active de la liste — le trait terracotta sur la PEINTURE, pas sur
   la cible de 44 points, qui deborderait du cadre qu'il borde. */
.home-scene .nearby-map-item.is-active::before {
    border-color: var(--hp-orange, #C86138);
    border-inline-start: 4px solid var(--hp-orange, #C86138);
    background: rgba(200, 97, 56, .07);
    box-shadow: 0 8px 18px rgba(200, 97, 56, .14);
}

.home-scene .nearby-leaflet-marker.is-active {
    transform: translate(-50%, -100%) scale(1.22);
    filter: drop-shadow(0 6px 12px rgba(27, 29, 24, .3));
}

/* Le nom et la commune remontent d'un cran dans la colonne : ce sont les deux
   choses qu'on y lit. */
.home-scene .nearby-map-item strong {
    font-size: .88rem;
}

.home-scene .nearby-map-item small {
    font-size: .74rem;
}

/* --------------------------------------------------------------------------
 * LE REPLI SANS SCRIPT DE LA BARRE DE FILTRES (home_filtres.html)
 *
 * Servi `hidden`, rendu par un `<noscript>`. Aucune regle ne declare `display`
 * sur son conteneur : elle battrait `[hidden]` et le montrerait a tous.
 * Au pouce, la feuille d'un critere monte du bas, avec son voile ; a partir de
 * 900 points elle devient un menu ancre sous sa pastille.
 * -------------------------------------------------------------------------- */
.home-filtres {
    position: relative;
    min-width: 0;
}

.home-filtres__rangee {
    /* Deux glyphes par pastille : le critere et le chevron. A `--ui-icon-xs`
       par defaut (5vw), la rangee debordait au pouce ; 15 points suffisent. */
    --ui-icon-xs: 15px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-block: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.home-filtres__rangee::-webkit-scrollbar { display: none; }

/* LE FONDU DU BORD DROIT dit qu'on peut pousser. Peint par un `::after` et non
   par `mask-image` : un masque ferait de la rangee le bloc conteneur des
   feuilles, qui sont en `position: fixed`. */
.home-filtres::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26px;
    background: linear-gradient(to right, rgba(248, 245, 239, 0), var(--home-cream, #f8f5ef));
    pointer-events: none;
    content: "";
}

.home-filtres__critere {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.home-filtres__pastille {
    min-height: var(--tap-size);
    padding-inline: 10px;
    gap: 4px;
    font-size: .85rem;
    cursor: pointer;
    list-style: none;
}

.home-filtres__pastille::-webkit-details-marker { display: none; }

.home-filtres__critere.is-active .home-filtres__pastille {
    border-color: var(--hp-green, #245A3B);
    background: var(--hp-green, #245A3B);
    color: var(--hp-surface-warm, #FFFDF7);
    border-end-end-radius: 0;
    border-start-end-radius: 0;
    padding-inline-end: 8px;
}

.home-filtres__croix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: var(--tap-size);
    padding-inline-end: 6px;
    border: 1px solid var(--hp-green, #245A3B);
    border-inline-start: 0;
    border-radius: 0 999px 999px 0;
    background: var(--hp-green, #245A3B);
    color: var(--hp-surface-warm, #FFFDF7);
}

.home-filtres__croix:focus-visible,
.home-filtres__pastille:focus-visible,
.home-filtres__tout-effacer:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.home-filtres__chevron {
    display: inline-flex;
    rotate: 90deg;
    transition: rotate .18s var(--ui-motion-ease, ease);
}

.home-filtres__boite[open] .home-filtres__chevron { rotate: -90deg; }

.home-filtres__choix-compte {
    margin-inline-start: 4px;
    opacity: .72;
    font-variant-numeric: tabular-nums;
}

.home-filtres__tout-effacer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: var(--tap-size);
    padding-inline: 10px;
    border-radius: 999px;
    color: var(--hp-orange, #C86138);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.home-filtres__compte {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    min-height: 20px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--hp-orange, #C86138);
    color: #FFFFFF;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.home-filtres__feuille {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: var(--ui-plan-raised, #FFFDF8);
    color: var(--ui-color-ink, #241D16);
}

.home-filtres__anse { display: none; }

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

.home-filtres__choix {
    display: grid;
    gap: 2px;
    max-height: 46dvh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.home-filtres__choix-ligne {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--tap-size);
    padding: 6px 10px;
    border-radius: var(--ui-radius-sm, 8px);
    cursor: pointer;
}

.home-filtres__choix-ligne:hover,
.home-filtres__choix-ligne:focus-within {
    background: var(--ui-plan-sunk, #F4EBD9);
}

.home-filtres__choix-mot { flex: 1 1 auto; }

.home-filtres__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
}

.home-filtres__effacer {
    min-height: var(--tap-size);
    display: inline-flex;
    align-items: center;
    padding-inline: 6px;
    color: var(--hp-muted, #6E6252);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* AU POUCE, LA FEUILLE OUVERTE MONTE DU BAS — le geste du selecteur de lieu. */
.home-filtres__boite[open] .home-filtres__feuille {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    max-height: 82dvh;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    box-shadow: 0 -18px 44px rgba(22, 41, 28, .26);
}

.home-filtres__boite[open] .home-filtres__feuille::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(11, 24, 18, .42);
    content: "";
}

@media (prefers-reduced-motion: reduce) {
    .home-scene .nearby-map-item.is-active,
    .home-scene .nearby-leaflet-marker.is-active { transition: none; }
}

/* ==========================================================================
 * LES PALIERS — chacun AJOUTE ce que la place permet
 * ========================================================================== */

@media (min-width: 640px) {
    .home-page {
        --home-scene-h: clamp(420px, 58dvh, 620px);
    }

    .home-slogan {
        font-size: .82rem;
    }

    .home-scene__titre {
        font-size: 1.2rem;
    }

    .home-scene__grand {
        display: inline;
    }
}

/* LA COLONNE DES PROS, A PARTIR DE LA TABLETTE (13/09). Le volet redevient une
   liste posee a gauche de la carte ; sa hauteur est celle du cadre. */
@media (min-width: 768px) {
    .home-scene .nearby-map-app {
        grid-template-columns: clamp(260px, 34vw, 320px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "results map";
        gap: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .home-scene .nearby-map-viewport {
        grid-area: map;
        min-height: 0;
        margin: 0;
        border-radius: 0;
    }

    .home-scene .nearby-map-canvas {
        box-shadow: none;
    }

    .home-scene .nearby-map-results {
        display: grid;
        grid-area: results;
        position: relative;
        inset: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        border: 0;
        border-inline-end: 1px solid var(--hp-border-strong, #DFD4C3);
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        transition: none;
        overflow-y: auto;
    }

    .home-scene .nearby-map-list {
        grid-template-columns: minmax(0, 1fr);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .home-scene .nearby-map-status {
        display: block;
    }
}

@media (min-width: 860px) {
    .home-page {
        --home-scene-h: clamp(520px, 62dvh, 760px);
    }
}

/* LA FEUILLE D'UN CRITERE DU REPLI DEVIENT UN MENU ANCRE, PLUS UN VOLET. */
@media (min-width: 900px) {
    .home-filtres__boite[open] .home-filtres__feuille {
        position: absolute;
        top: calc(100% + 9px);
        right: auto;
        bottom: auto;
        left: 0;
        z-index: 60;
        width: 302px;
        max-height: none;
        padding: 14px;
        overflow-y: visible;
        border: 1px solid var(--ui-color-sable, #E7DCC6);
        border-radius: var(--ui-radius-card, 14px);
        box-shadow: 0 18px 38px rgba(22, 41, 28, .18);
    }

    .home-filtres__boite[open] .home-filtres__feuille::before {
        content: none;
    }
}

/* L'ECRAN DE BUREAU DONNE SA PLACE A LA CARTE (13/09) : la liste s'elargit a
   `clamp(340px, 24vw, 420px)` — les noms ne se tronquent plus — et le cadre
   prend la hauteur de la vue moins l'en-tete, la ligne de titre et le haut de
   « Les produits du moment », qui doit rester LISIBLE sans defiler a 1280x800
   (apps/core/test_accueil_sur_ecran_large.py) : 800 - 240 = 560 points. */
@media (min-width: 1180px) {
    .home-page {
        --home-scene-h: clamp(560px, calc(100dvh - 240px), 820px);
    }

    .home-scene .nearby-map-app {
        grid-template-columns: clamp(340px, 24vw, 420px) minmax(0, 1fr);
    }
}