/* ==========================================================================
 * LE SELECTEUR DE LIEU — un composant, deux surfaces (A-006)
 *
 * Popover ancre au desktop, volet bas au pouce. MEME BALISAGE : `<details>`
 * porte l'ouverture, le CSS decide de la forme. Pas de script pour ouvrir un
 * panneau — le navigateur sait le faire depuis toujours, au clavier comme au
 * doigt, et il le fait mieux que nous.
 * ========================================================================== */

.lieu {
    position: relative;
}

/* Le marqueur natif de `<details>` n'a rien a faire ici : la pastille est
   deja un objet compose, un triangle en plus la rendrait bavarde. */
.lieu > summary {
    cursor: pointer;
    list-style: none;
}

.lieu > summary::-webkit-details-marker {
    display: none;
}

/* Le chevron dit qu'il y a quelque chose derriere, et tourne quand c'est
   ouvert. Il n'est arrive qu'avec ce panneau : avant, il aurait promis une
   porte qui n'existait pas. */
.lieu__chevron {
    display: inline-flex;
    transition: rotate .18s var(--ui-motion-ease, ease);
}

.lieu[open] .lieu__chevron {
    rotate: 180deg;
}

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

.lieu__form {
    display: grid;
    gap: 10px;
}

/* Le bouton de position porte son propre habillage plutot que la recette de
   l'appel principal : `.ui-cta` designe LE geste que la page attend, et il n'y
   en a qu'un par ecran. Un bouton range dans un panneau replie n'est pas
   celui-la — un contrat de l'ecran d'inscription l'a rappele en rougissant. */
.lieu__geoloc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--tap-size, 44px);
    padding: 0 14px;
    border: 0;
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--ui-motion-ease, ease);
}

.lieu__geoloc:hover,
.lieu__geoloc:focus-visible {
    background: var(--ui-color-brand-strong, #1C4830);
}

/* Le separateur « ou ». Les deux voies sont d'egale dignite : la position dit
   ou l'on EST, la ville dit ou l'on VA. Un visiteur qui prepare ses vacances a
   besoin de la seconde, et elle ne doit pas avoir l'air d'un repli. */
.lieu__ou {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: .74rem;
    font-weight: 600;
}

.lieu__ou::before,
.lieu__ou::after {
    height: 1px;
    background: var(--ui-color-sable, #E7DCC6);
    content: "";
}

.lieu__ville input {
    width: 100%;
    min-height: var(--tap-size, 44px);
    padding: 0 13px;
    border: 1.5px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: inherit;
    font: inherit;
    font-size: .88rem;
}

.lieu__ville input:focus-visible {
    border-color: var(--ui-color-brand, #245A3B);
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 90, 59, .12);
}

.lieu-suggestions__liste {
    display: grid;
    gap: 2px;
    max-height: 240px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.lieu-suggestion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: var(--tap-size, 44px);
    padding: 7px 11px;
    border: 0;
    border-radius: var(--ui-radius-sm, 8px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lieu-suggestion:hover,
.lieu-suggestion:focus-visible {
    background: var(--ui-plan-sunk, #F4EBD9);
}

.lieu-suggestion span {
    color: var(--ui-color-muted, #6E6252);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.lieu-suggestions__aide {
    margin: 0;
    padding: 4px 2px;
    color: var(--ui-color-muted, #6E6252);
    font-size: .78rem;
}

.lieu__oublier {
    padding: 6px;
    border: 0;
    background: none;
    color: var(--ui-color-muted, #6E6252);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}


/* --- AU POUCE : UN VOLET QUI MONTE DU BAS -------------------------------
 *
 * C'est l'imperatif de Julien — le cas vacances. Un popover de 280px ancre a
 * une pastille de coin d'ecran est injouable au pouce : le clavier virtuel le
 * recouvre des la premiere frappe. Le volet bas, lui, reste au-dessus du
 * clavier parce qu'il EST le bas. */

@media (max-width: 899px) {
    .lieu[open] .lieu__panneau {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        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);
    }

    /* Le voile derriere. Il est dessine par le panneau lui-meme plutot que par
       un element de plus : un `<details>` ouvert n'a qu'un enfant a habiller. */
    .lieu[open] .lieu__panneau::before {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(11, 24, 18, .42);
        content: "";
    }

    @media (prefers-reduced-motion: no-preference) {
        .lieu[open] .lieu__panneau {
            animation: lieu-monte 220ms var(--ui-motion-ease, ease) both;
        }
    }
}

@keyframes lieu-monte {
    from { transform: translateY(14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* --- AU DESKTOP : UN POPOVER ANCRE -------------------------------------- */

@media (min-width: 900px) {
    .lieu[open] .lieu__panneau {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        z-index: 60;
        width: 302px;
        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);
    }
}

/* --- LES MORCEAUX AJOUTES PAR LA CIBLE ---------------------------------
 * Reference : cible-selecteur-lieu.html, § 2 et § 3. */

/* L'anse du volet. Elle ne sert a rien fonctionnellement — le volet se ferme
   par la pastille ou par Echap — mais elle DIT « ceci monte du bas », et un
   objet qui annonce sa nature s'utilise sans mode d'emploi. Elle n'existe qu'au
   pouce, ou le volet existe. */
.lieu__anse {
    display: none;
}

.lieu__titre {
    margin: 0;
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.lieu-recentes {
    display: grid;
    gap: 6px;
}

.lieu-recentes__titre {
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lieu-recentes__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une ville recente est une PASTILLE, pas une ligne de liste : elle se
   reconnait d'un coup d'oeil et se vise du pouce. C'est le meme gabarit que
   les reperes du hero — un vocabulaire de plus serait un vocabulaire de trop. */
.lieu-recentes__ville {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-brand, #245A3B);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.lieu-recentes__ville:hover,
.lieu-recentes__ville:focus-visible {
    border-color: var(--ui-color-brand, #245A3B);
}

@media (any-pointer: coarse) and (prefers-reduced-motion: no-preference) {
    .lieu-recentes__ville:active,
    .lieu-suggestion:active {
        transform: scale(.97);
        transition: none;
    }
}

/* LA VIE, telle que la cible la decrit.
 *
 * Popover : fondu et six pixels de lever, sous 200ms. `@starting-style` fait ca
 * sans une ligne de script — c'est exactement ce pour quoi il a ete invente.
 * Volet : 240ms, deja pose plus haut.
 * Suggestions : cascade de 40ms, portee par le registre commun. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .lieu[open] .lieu__panneau {
        opacity: 1;
        translate: 0 0;
        transition: opacity 180ms var(--ui-motion-ease, ease),
                    translate 180ms var(--ui-motion-ease, ease);
    }

    @starting-style {
        .lieu[open] .lieu__panneau {
            opacity: 0;
            translate: 0 -6px;
        }
    }
}

@media (max-width: 899px) {
    .lieu__anse {
        display: block;
        justify-self: center;
        width: 42px;
        height: 4px;
        margin-bottom: 2px;
        border-radius: 999px;
        background: var(--ui-color-sable, #E7DCC6);
    }
}

/* =====================================================================
 * LE PIEGE DU BLOC CONTENEUR — pourquoi le volet montait EN HAUT
 *
 * `.home-page .site-header` porte `backdrop-filter: blur(18px)`. Or
 * `backdrop-filter`, comme `transform` et `filter`, cree un BLOC CONTENEUR
 * pour les descendants en `position: fixed`. Le volet ne se calait donc pas
 * sur la vue mais sur l'EN-TETE : il montait en haut de l'ecran, rogne, et le
 * champ de saisie se retrouvait hors d'atteinte.
 *
 * Julien : « en mode mobile il y a des soucis, je ne peux pas saisir de
 * localite ». C'etait exactement ca.
 *
 * LE REMEDE : on retire le flou PENDANT QUE LE VOLET EST OUVERT, et seulement
 * pendant ce temps-la. `:has()` permet a un parent de reagir a l'etat d'un
 * descendant — c'est precisement ce pour quoi il existe, et ca evite a la fois
 * de deplacer le balisage et d'ecrire une ligne de script.
 *
 * Le flou reste partout ailleurs : il coute zero quand rien n'est ouvert, et
 * c'est ce que la cible demande.
 * ===================================================================== */

@media (max-width: 899px) {
    /* QUATRE PIEGES, PAS UN. Le balayage des feuilles en a trouve quatre sur
       les ancetres du selecteur : deux flous d'arriere-plan, un troisieme a
       l'etat defile, et — le plus sournois — un `transform: translateY(-1px)`
       sur l'ossature interne. UN SEUL PIXEL suffit a creer un bloc conteneur :
       la propriete compte, pas son amplitude. */
    body .site-header:has(.lieu[open]),
    body.is-scrolled .site-header:has(.lieu[open]),
    .home-page .site-header:has(.lieu[open]) {
        backdrop-filter: none;
        /* Le fond translucide sans le flou laisserait voir le contenu defiler
           derriere l'en-tete pendant que le volet est ouvert. On l'opacifie
           le temps de l'ouverture. */
        background: var(--ui-plan-raised, #FFFDF8);
    }

    body.is-scrolled .site-header:has(.lieu[open]) .site-header__inner {
        transform: none;
    }
}