/* Heop — l'en-tete public, ecrit sur la cible visuelle validee.
 *
 * Reference : ~/heop-prompts/cibles-visuelles/cible-header-footer.html
 * « mobile = 2 rangees franches · desktop = 1 ligne, rien ne se touche »
 *
 * CE QUI A CHANGE, ET POURQUOI CE N'EST PAS UN CORRECTIF DE PLUS.
 *
 * Les deux versions precedentes composaient l'en-tete en GRILLE, avec
 * `.site-header__bar-top` en `display: contents` pour remonter ses enfants d'un
 * cran. Ce mecanisme a produit trois defauts successifs : les declarations de
 * boite de __bar-top devenaient mortes, la composition dependait de
 * `grid-column` disperses entre deux feuilles, et l'ancienne feuille clampait
 * les tuiles sous la largeur de leur propre contenu — d'ou « Autour de
 * m|Inscription » sur la capture.
 *
 * Le gabarit est desormais PLAT : trois enfants directs de `.site-header__inner`.
 * Il n'y a plus rien a replacer, donc plus rien a disputer. Le passage mobile →
 * desktop change l'ORDRE et la BASE d'un seul objet, la recherche.
 *
 * Regles que cette feuille se donne, et qui se verifient :
 *   - mobile d'abord : le socle decrit le petit ecran, les requetes AJOUTENT ;
 *   - aucune couleur, aucun rayon, aucune ombre en dur : jetons uniquement ;
 *   - toutes les mesures sur l'echelle 4/8 ;
 *   - chaque element interactif a repos / survol / focus / actif ;
 *   - le mouvement passe par les registres communs, pas par des regles locales.
 */

/* =====================================================================
 * LA COQUE
 * ===================================================================== */

body.site-surface-public .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--ui-plan-card, #FFFDF7);
    border-bottom: 1px solid var(--ui-color-sable, #E7DCC6);
}

/* L'ombre NAIT au defilement plutot que d'etre posee d'emblee : un en-tete qui
   porte une ombre sur une page en haut de course parait decolle. Non supporte,
   il n'y a simplement pas d'ombre — ce qui reste correct. */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        body.site-surface-public .site-header {
            animation: hd-ombre linear both;
            animation-timeline: scroll();
            animation-range: 0 140px;
        }

        @keyframes hd-ombre {
            to { box-shadow: var(--ui-shadow-sm, 0 8px 20px rgba(27, 29, 24, .07)); }
        }
    }
}

/* La meme formule que .page-shell : l'en-tete tombe sur les memes verticales
   que le contenu de la page, a toutes les largeurs. */
body.site-surface-public .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
    padding-block: 10px;
}

/* =====================================================================
 * OBJET 1 — LA MARQUE
 * ===================================================================== */

body.site-surface-public .site-header__inner > .brand {
    display: flex;
    align-items: center;
    /* Elle pousse tout le reste a droite tant qu'on est sur deux rangees. */
    margin-right: auto;
    /* Compensation optique : le point du « ! » cree a droite un vide que la
       boite ne voit pas. */
    margin-left: -2px;
}

body.site-surface-public .site-header__inner > .brand .heop-logo {
    display: block;
    width: auto;
    height: 30px;
}

/* =====================================================================
 * OBJET 2 — LA RECHERCHE
 * Le seul objet dont la composition change entre les deux paliers.
 * ===================================================================== */

body.site-surface-public .site-header__bar-search {
    /* Mobile : sa propre rangee, pleine largeur. `order` la fait descendre sans
       la deplacer dans le DOM — un seul element, rendu une seule fois. */
    flex: 1 1 100%;
    order: 9;
    padding-block: 0;
}

body.site-surface-public .site-search {
    display: flex;
    align-items: center;
    height: 46px;
    padding-inline: 18px 6px;
    border: 1.5px solid var(--ui-color-sable-fort, #9B8B6E);
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-plan-page, #FFF8EC);
    transition: border-color 200ms var(--ui-motion-ease, ease),
                box-shadow 200ms var(--ui-motion-ease, ease);
}

body.site-surface-public .site-search:focus-within {
    border-color: var(--ui-color-brand, #245A3B);
    box-shadow: 0 0 0 3px var(--ui-color-brand-soft, #DFE8DC);
}

body.site-surface-public .site-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ui-color-ink, #241D16);
    font: inherit;
    outline: none;
}

body.site-surface-public .site-search__input::placeholder {
    color: var(--ui-color-muted, #6E6252);
}

body.site-surface-public .site-search__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    /* 3,15:1 sur le fond de champ — au-dessus du seuil des composants
       d'interface. La cible proposait #A89778, soit 2,70:1. */
    color: var(--ui-color-sable-fort, #9B8B6E);
    cursor: pointer;
    transition: color 160ms var(--ui-motion-ease, ease),
                background-color 160ms var(--ui-motion-ease, ease);
}

body.site-surface-public .site-search:focus-within .site-search__btn,
body.site-surface-public .site-search__btn:hover {
    color: var(--ui-color-brand, #245A3B);
}

body.site-surface-public .site-search__btn:focus-visible {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
}

body.site-surface-public .site-search__btn .ui-icon,
body.site-surface-public .site-search__btn svg {
    width: 20px;
    height: 20px;
}

/* =====================================================================
 * OBJET 3 — LES GESTES
 * ===================================================================== */

body.site-surface-public .site-header__utils {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.site-surface-public .site-util {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Aucune largeur maximale. C'est cette declaration manquante qui laissait
       l'ancienne feuille clamper la tuile a 78px quand son contenu en demande
       142 : les tuiles se chevauchaient, en transparent, glyphe sur glyphe. */
    max-width: none;
    min-width: var(--tap-size, 44px);
    min-height: var(--tap-size, 44px);
    padding: 2px 4px;
    color: var(--ui-color-ink, #241D16);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* --ui-sweep-* : le filet terracotta du registre commun, resserre sur la
       tuile. On ne redessine pas un survol qui existe deja. */
    --ui-sweep-inset: 4px;
    --ui-sweep-bottom: -3px;
}

body.site-surface-public .site-util:focus-visible {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
    border-radius: var(--ui-radius-sm, 8px);
}

body.site-surface-public .site-util[aria-current="page"] {
    color: var(--ui-color-brand, #245A3B);
}

body.site-surface-public .site-util-icon {
    display: grid;
    place-items: center;
    /* La pastille du compteur s'ancre ici, et nulle part ailleurs : sans cette
       ligne elle allait se poser au coin de la barre entiere. */
    position: relative;
    width: 21px;
    height: 21px;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--ui-color-brand, #245A3B);
    transition: translate 180ms var(--ui-motion-ease, ease);
}

body.site-surface-public .site-util:hover .site-util-icon {
    translate: 0 -1px;
}

body.site-surface-public .site-util-icon .ui-icon,
body.site-surface-public .site-util-icon svg {
    width: 21px;
    height: 21px;
}

body.site-surface-public .site-util-label {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

/* La pastille du panier : le seul accent de l'en-tete. */
body.site-surface-public .site-util-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-color-accent, #C86138);
    color: #FFFFFF;
    font-size: .625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.site-surface-public .site-util-badge:empty {
    display: none;
}

/* =====================================================================
 * LA BASCULE D'ESPACE
 * Absente au pouce : elle coute 194px et la barre basse porte deja le compte.
 * ===================================================================== */
/* =====================================================================
 * LE PALIER — une seule ligne
 * ===================================================================== */

@media (min-width: 900px) {
    body.site-surface-public .site-header__inner {
        flex-wrap: nowrap;
        gap: 22px;
        padding-block: 12px;
    }

    body.site-surface-public .site-header__inner > .brand {
        margin-right: 0;
    }

    /* La recherche remonte a sa place et cesse d'occuper toute la largeur.
       `margin-right: auto` pousse alors la bascule et les gestes a droite. */
    body.site-surface-public .site-header__bar-search {
        flex: 1 1 auto;
        order: 0;
        max-width: 520px;
        margin-right: auto;
    }}

/* Entre 900 et 1160px, les libelles se retirent. La cible le demande, et le
   budget le confirme : au-dessous de 1160px il ne reste pas de quoi loger les
   trois libelles sans reduire la recherche sous une mesure utilisable. */
@media (min-width: 900px) and (max-width: 1160px) {
    /* Retire a l'oeil, conserve pour le lecteur d'ecran. La maquette employait
       `display: none` ; c'est le seul point ou cette feuille s'en ecarte, et
       volontairement. Les tuiles portent bien un aria-label, mais faire
       dependre un nom accessible d'un seul attribut qu'un remaniement du
       gabarit pourrait laisser tomber est une fragilite gratuite : le rendu est
       identique, la garantie ne l'est pas. */
    body.site-surface-public .site-util-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.site-surface-public .site-util {
        gap: 0;
    }
}

/* =====================================================================
 * LE PARTAGE AVEC LA BARRE BASSE
 *
 * Inscription et Favoris vivent a UN endroit a la fois : la barre basse les
 * porte au pouce, l'en-tete les reprend quand elle se retire. Ces conditions
 * sont l'exacte reciproque du repli de home/bottom-nav.css, et
 * apps/core/test_barre_basse.py verifie qu'elles restent d'accord.
 *
 * ATTENTION — CE MOTIF A DEJA MENTI UNE FOIS, ET IL FAUT LE SAVOIR.
 * « la barre basse les porte au pouce » etait FAUX pour l'inscription :
 * /users/inscription/ n'a jamais ete dans les cinq pastilles, et la phrase
 * ecrite ici a suffi a masquer la tuile le 26/08 sans que personne verifie.
 * Resultat, du 26/08 au 08/09 : un visiteur qui decouvrait HEOP sur son
 * telephone ne pouvait pas creer de compte. La barre la porte VRAIMENT depuis
 * le 08/09 (voir la route `signup` dans apps/users/urls_public.py), et
 * apps/public_site/test_premier_ecran_pouce.py le verifie desormais sur la
 * page servie plutot que sur la foi de ce commentaire.
 * ===================================================================== */

body.site-surface-public .site-util-signup,
body.site-surface-public .site-util-favorites {
    display: none;
}

@media (min-width: 900px) and (any-pointer: fine) {
    body.site-surface-public .site-util-signup,
    body.site-surface-public .site-util-favorites {
        display: flex;
    }
}

@media (min-width: 900px) and (orientation: landscape) and (min-height: 600px) {
    body.site-surface-public .site-util-signup,
    body.site-surface-public .site-util-favorites {
        display: flex;
    }
}


/* =====================================================================
 * LE POUCE — L'EN-TETE SE RESSERRE, ET LE COMPTE SORT DU DOUBLON
 *
 * LE DEFAUT, MESURE. Julien, iPhone en main le 08/09 : « pas lisible, pas
 * intuitif, pas prevu pour la navigation avec le pouce ». A 390x844, l'en-tete
 * coutait 121 points sur les 844 de l'ecran — 44 pour une rangee de quatre
 * tuiles, 46 pour la recherche sur sa propre rangee, 20 de respirations, 1 de
 * filet — et le visiteur atteignait le bas de l'ecran sans avoir vu un seul
 * produit.
 *
 * CE QUI SORT : LE MENU DE COMPTE, ET LUI SEUL.
 * « Compte » (ou « Se connecter » pour un visiteur anonyme) est, adresse pour
 * adresse, la cinquieme pastille de la barre basse. Une DESTINATION ne gagne
 * rien a exister deux fois : c'est deux endroits a tenir a jour et un visiteur
 * qui se demande si ce sont bien les memes. C'est le motif ecrit dans
 * apps/core/test_entete_public.py, applique a la tuile qui lui manquait.
 *
 * CE QUI RESTE, ET POURQUOI CHACUN RESTE.
 *
 *   LA MARQUE       on doit savoir ou l'on est.
 *   LA RECHERCHE    elle n'existe nulle part ailleurs sur un telephone.
 *   LE LIEU         il portait le meme libelle que la pastille « Autour » de
 *                   la barre basse sans faire la meme chose : la pastille MENE
 *                   a la carte, le selecteur POSE une position — y compris une
 *                   ville ou l'on n'est pas encore. C'etait le doublon de MOT
 *                   signale par Julien le 08/09 ; il est reparé aux deux bouts
 *                   (la carte s'appelle « Carte », le selecteur « Ou
 *                   chercher »), et le selecteur reste, parce que le retirer
 *                   couterait son cas d'usage nomme : « decider de ma position
 *                   en prevision de mes vacances ».
 * CE QUI SORT AUSSI, DEPUIS LE 08/09 : LE PANIER.
 *
 * C'est le renversement d'un arbitrage ECRIT, et il faut donc son histoire
 * complete. Le panier avait ete masque au pouce le 26/08 avec l'inscription et
 * les favoris ; Julien l'a refuse en direct a 375px — « il MANQUE le geste
 * Panier badge » — et `test_le_panier_ne_se_cache_jamais_dans_l_entete` a tenu
 * ce verdict pendant deux semaines. Le motif restait bon : un panier n'est pas
 * une destination, c'est un ETAT, et un etat doit se voir sans avoir a
 * chercher ou on l'a range.
 *
 * CE QUI A CHANGE, MESURE. L'etat se voit — dans la barre basse, a l'identique.
 * `cart-badge-bottom` porte le meme `cart_count`, se rafraichit du meme swap
 * hors-bande que `cart-badge-header`, et il est POSE PLUS PRES DU POUCE que
 * celui de l'en-tete. Le badge n'a jamais ete supprime : il a ete deplace la ou
 * la main est. Et le doublon coutait 42 points sur les 844 de l'ecran — la
 * rangee de tuiles entiere, gouttiere comprise — pris tout en haut, la ou le
 * pouce n'atteint pas, et rendus en bas, ou vit le catalogue.
 *
 * Julien, le 08/09, mesure a l'appui : « Go pour toutes tes remarques ».
 * Le contrat n'a pas ete supprime : il a ete REECRIT (meme classe,
 * `test_le_panier_ne_sort_de_l_entete_que_la_ou_la_barre_basse_le_porte`) pour
 * porter la nouvelle regle ET son histoire. Un contrat qui disparait sans
 * laisser de trace est une decision perdue.
 *
 * CE QUI EST GAGNE : LA RANGEE DE TUILES ENTIERE.
 * Il ne reste qu'une tuile — le lieu — et marque + lieu + recherche tiennent
 * desormais sur une seule rangee. La crainte de 2026-08 (« la rangee unique
 * laisserait 146 points a la recherche, ou l'on ne lit plus sa propre
 * saisie ») ne vaut plus : c'est le PANIER qui la creait, pas le lieu.
 *
 * LE RETRAIT EST CONDITIONNE A LA PRESENCE REELLE DE LA BARRE.
 * `body:has(.home-bottom-nav)` : une surface publique qui ne rend pas la barre
 * — un gabarit qui herite de base.html sans remplir `bottom_navigation` —
 * garde sa tuile de compte. On ne rend jamais une commande inatteignable pour
 * gagner des points. Meme selecteur que la reserve de hauteur de
 * home/bottom-nav.css : une seule facon de dire « la barre est la ».
 * ===================================================================== */

@media (max-width: 899px) {
    /* LES DEUX RETRAITS — LE COMPTE ET LE PANIER — SONT CONDITIONNES A
       `:has(.home-bottom-nav)`. Le compte compte pour deux selecteurs : il est
       un `<details class="compte-menu">` quand on est identifie et un
       `<a class="site-util-account">` sinon.

       C'est cette condition qui separe ce lot de l'erreur du 26/08 : on ne
       retire une commande de l'en-tete que la ou une barre basse est REELLEMENT
       rendue pour la reprendre. Une surface publique qui herite de base.html
       sans remplir `bottom_navigation` garde toutes ses tuiles. Meme selecteur
       que la reserve de hauteur de home/bottom-nav.css : une seule facon de
       dire « la barre est la ». */
    body.site-surface-public:has(.home-bottom-nav) .compte-menu,
    body.site-surface-public:has(.home-bottom-nav) .site-util-account,
    body.site-surface-public:has(.home-bottom-nav) .site-util-cart,
    body.site-surface-public:has(.home-bottom-nav) .site-util-location {
        display: none;
    }

    /* LE SELECTEUR DE LIEU S'EN VA AUSSI, ET C'EST UNE DECISION DE JULIEN
       (08/09) : « au-dela de ca il faut simplifier, c'est presque du doublon,
       on ne garde que celui du bas ».

       Ce n'est pourtant PAS un doublon au sens strict — la pastille « Carte »
       OUVRE la carte, ce champ POSE une position — et le lot precedent l'avait
       donc renomme plutot que retire. Julien a tranche la simplicite.

       CE QUI REND LE RETRAIT ACCEPTABLE, ET SANS QUOI IL NE LE SERAIT PAS : le
       geste ne disparait pas du telephone. La page `/carte/`, atteinte en UN
       toucher par la pastille surelevee, porte deja son propre champ
       « Choisir une ville — Nimes, Annecy, Vannes... ». Poser une ville ou
       l'on n'habite pas — le cas d'usage que Julien avait lui-meme nomme,
       preparer des vacances — reste donc possible, une etape plus loin.

       C'est exactement le controle qui a manque le 26/08, quand la tuile
       d'inscription a ete masquee en supposant que la barre basse la reprenait :
       elle ne la reprenait pas. Ici on a verifie que le relais existe, et un
       contrat le tient. */

    body.site-surface-public .site-header__inner {
        gap: 6px 18px;
        padding-block: 6px;
    }

    /* Quatre points de marque rendus : c'est la hauteur d'un signe de barre
       d'onglets, pas d'une vignette — et la rangee des tuiles fait de toute
       facon 44 points, que le signe en fasse 26 ou 30. */
    body.site-surface-public .site-header__inner > .brand .heop-logo {
        height: 26px;
    }

    /* 44 : la cible tactile de la maison, pas un point de plus. Les deux
       points rendus ne se voient pas ; c'est l'addition qui se voit. */
    body.site-surface-public .site-search {
        height: 44px;
    }

    /* LA RANGEE UNIQUE, ENFIN — ET C'EST ELLE QUI REND LES CINQUANTE POINTS.
     *
     * 107 -> 57, mesure par apps/public_site/test_premier_ecran_pouce.py sur
     * la feuille servie a 390x844. Le lot en promettait 42 ; la rangee entiere
     * en rend 50, gouttiere comprise.
     *
     * La recherche reclamait `flex: 1 1 100%` : une base de 100% force le
     * retour a la ligne quoi qu'il arrive, donc l'en-tete restait a DEUX
     * rangees meme une fois le panier et le menu de compte partis. Retirer
     * une tuile sans lever cette base ne gagnait pas un seul point — le lot
     * du 08/09 aurait coute le badge du panier dans l'en-tete pour rien.
     *
     * POURQUOI C'EST POSSIBLE AUJOURD'HUI ET PAS LE 26/08. La rangee unique
     * avait ete etudiee et ECARTEE, avec son chiffre : « marque + recherche +
     * lieu + panier ne laissent que 146 points a la recherche a 390 de large,
     * on n'y lit plus sa propre saisie ». C'etait le PANIER qui creait cette
     * etroitesse. Sans lui, la meme mesure a 390 donne :
     *
     *     utile 362 - marque 70,7 - lieu 63,1 - deux gouttieres de 10 = 208,2
     *
     * Deux cent huit points, soit une vingtaine de caracteres a l'ecran : on
     * lit sa saisie. Le motif du refus est tombe avec le panier.
     *
     * LA BASE EST PETITE ET LA CROISSANCE FAIT LE RESTE. `130px` n'est pas la
     * largeur rendue — c'est le plancher a partir duquel `flex-grow: 1`
     * reprend toute la place libre. Une base large aurait rebascule sur deux
     * rangees des le premier telephone etroit ; une base basse laisse la
     * rangee tenir de 320 a 899px et la recherche grandir avec l'ecran.
     *
     * CONDITIONNE A LA BARRE, comme les retraits ci-dessus : sans elle
     * l'en-tete garde ses trois tuiles, et trois tuiles plus la recherche ne
     * tiennent pas sur une rangee. */
    body.site-surface-public:has(.home-bottom-nav) .site-header__bar-search {
        flex: 1 1 130px;
        order: 0;
    }

    /* LE NOM DE VILLE EST BORNE, COMME L'EST DEJA LE PRENOM.
       La pastille de lieu porte « Ou chercher » tant que rien n'est choisi,
       puis le NOM DE LA VILLE. « Nimes » tient ; « Saint-Etienne-de-Saint-
       Geoirs » pousserait la recherche hors de la rangee. Treize caracteres :
       la borne est inchangee, et le libelle par defaut n'en fait plus que onze
       — il reste entier avec deux caracteres de marge. Le nom complet demeure
       dans le document, la ou il s'entend ; on ne tronque que ce qui se voit. */
    body.site-surface-public .site-util-location .site-util-label {
        max-width: 13ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* =====================================================================
 * LE TRES PETIT ECRAN — 320px
 *
 * Le troisieme geste change le budget de la premiere rangee. Mesure a 320px,
 * avec les valeurs de la cible (marque 81,6px, gouttiere 18px, tuiles 81,5 /
 * 44 / 44) : 305,1px demandes pour 292px disponibles. Treize pixels de trop,
 * et la tuile Compte serait retombee seule sur une deuxieme rangee.
 *
 * Deux remedes possibles : retirer les libelles, ou resserrer les gouttieres.
 * Le second coute moins cher — un libelle qui disparait est une information
 * perdue, huit pixels de gouttiere ne sont qu'une respiration. Resserre :
 * 277,1px demandes pour 292 disponibles.
 * ===================================================================== */

@media (max-width: 479px) {
    /* `gap` porte DEUX valeurs : rangee puis colonne. Ce palier n'ecrivait
       qu'un nombre, donc il reimposait dix points entre les rangees — et il
       est LU APRES le palier du pouce, qui venait de les resserrer a six.
       Deux regles d'egale specificite se departagent a l'ordre du fichier, et
       l'ordre du fichier disait le contraire de l'intention. */
    body.site-surface-public .site-header__inner {
        gap: 6px 10px;
    }

    body.site-surface-public .site-header__utils {
        gap: 8px;
    }
}


/* =====================================================================
 * LE PRENOM DE L'IDENTIFIE
 *
 * Une fois connecte, le geste Compte porte le prenom. C'est la demande de
 * Julien, et c'est juste : « Compte » nomme un endroit, un prenom nomme
 * QUELQU'UN — c'est la seule ligne de l'en-tete qui dise que le site sait qui
 * vous etes.
 *
 * Un prenom n'a pas de longueur garantie. « Julien » tient dans la meme tuile
 * que « Compte » ; « Marie-Charlotte » en demanderait le double et ferait
 * deborder la rangee a 320px. Le libelle est donc borne et coupe proprement.
 * Le nom complet reste dans l'attribut aria-label du lien, ou il est annonce
 * en entier : on tronque ce qui se voit, jamais ce qui s'entend.
 * ===================================================================== */

body.site-surface-public .site-util-account.is-authenticated .site-util-label {
    max-width: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
 * LE PAYSAGE TELEPHONE
 * Une vue de 390px de haut ne peut pas donner 66px a une coque collee.
 * ===================================================================== */

@media (orientation: landscape) and (max-height: 520px) {
    body.site-surface-public .site-header__inner {
        gap: 6px 12px;
        padding-block: 4px;
    }

    body.site-surface-public .site-header__inner > .brand .heop-logo {
        height: 24px;
    }

    body.site-surface-public .site-search {
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.site-surface-public .site-search,
    body.site-surface-public .site-search__btn,
    body.site-surface-public .site-util-icon {
        transition: none;
    }

    body.site-surface-public .site-util:hover .site-util-icon {
        translate: none;
    }
}


/* =====================================================================
 * LE SELECTEUR DE LIEU — presentation en pastille au desktop (A-006)
 *
 * Il occupe la place laissee par la bascule, et la cible lui donne une forme
 * differente des autres gestes : une pastille posee, pas une tuile. La raison
 * tient en un mot — les autres gestes MENENT quelque part, celui-ci DIT
 * quelque chose. Un etat se pose a plat, une destination s'empile.
 *
 * Au pouce il reste une tuile parmi les autres : la place y est comptee, et
 * l'epingle « Autour » de la barre basse fait deja le meme travail.
 *
 * ECART DECLARE CONTRE LA CIBLE : pas de chevron.
 * La maquette en pose un, parce que sa pastille OUVRE un selecteur. Le
 * selecteur — geolocalisation, ville en autocompletion BAN, volet mobile —
 * n'est pas encore construit. Un chevron qui n'ouvre rien est une promesse
 * fausse, et le §  interdit les promesses fausses au meme titre que les
 * chiffres inventes. Il arrivera avec ce qu'il annonce.
 * ===================================================================== */

@media (min-width: 900px) {
    body.site-surface-public .site-util-location {
        flex-direction: row;
        gap: 8px;
        min-width: 0;
        padding: 7px 14px;
        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-size: .82rem;
        transition: border-color .18s var(--ui-motion-ease, ease),
                    translate .18s var(--ui-motion-ease, ease);
        /* La pastille porte deja sa bordure : le filet du registre commun s'y
           poserait par-dessus, en double. */
        --ui-sweep-inset: 100%;
    }

    body.site-surface-public .site-util-location:hover {
        border-color: var(--ui-color-brand, #245A3B);
        translate: 0 -1px;
    }

    body.site-surface-public .site-util-location .site-util-icon {
        width: 15px;
        height: 15px;
    }

    body.site-surface-public .site-util-location .site-util-icon .ui-icon,
    body.site-surface-public .site-util-location .site-util-icon svg {
        width: 15px;
        height: 15px;
    }

    /* Le libelle de la pastille ne se retire PAS entre 900 et 1160px, la ou
       ceux des tuiles disparaissent : une pastille sans texte n'est plus une
       pastille, c'est un bouton rond qu'on ne sait pas lire. Et c'est le seul
       geste dont le libelle porte une information — la ville choisie. */
    body.site-surface-public .site-util-location .site-util-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}