/* Header et drawer globaux HEOP, mobile-first. */
:root {
    --hp-ink: var(--text);
    --hp-muted: var(--muted);
    --hp-soft: var(--bg);
    --hp-line: var(--line);
    --hp-orange: var(--accent);
    --hp-green: var(--brand);
    --hp-green-soft: var(--brand-soft);
    --hp-page-x: 14px;
    --hp-space-1: clamp(3px, .8vw, 5px);
    --hp-space-2: clamp(6px, 1.6vw, 9px);
    --hp-space-3: clamp(10px, 2.7vw, 14px);
    --hp-space-4: clamp(14px, 3.8vw, 18px);
    --hp-icon-xs: clamp(16px, 4.3vw, 19px);
}

body .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(223, 212, 195, .62);
    background: rgba(247, 244, 239, .86);
    box-shadow: 0 1px 0 rgba(255, 253, 247, .4);
    backdrop-filter: blur(12px) saturate(1.04);
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}

body.is-scrolled .site-header {
    border-bottom-color: rgba(223, 212, 195, .82);
    background: rgba(255, 253, 247, .95);
    box-shadow: 0 8px 24px rgba(27, 29, 24, .075);
    backdrop-filter: blur(16px) saturate(1.1);
}

body .site-header__inner {
    display: grid;
    gap: 0;
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    transition: transform 220ms ease;
}

body.home-page .site-header__inner {
    width: min(1640px, calc(100% - (var(--page-gutter) * 2)));
}

body.is-scrolled .site-header__inner {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   L'en-tete, refait : deux rangees au pouce, une seule en desktop.

   Rangee 1 — le wordmark et les gestes. Le burger a disparu : l'editorial vit
   au pied de page, et il ne merite pas de disputer sa place a la marque.
   Rangee 2 — la recherche, pleine largeur. C'est le geste central du site ; il
   ne partage sa ligne avec rien tant que l'ecran est etroit.
   --------------------------------------------------------------------------- */

body .site-header__bar-top {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: calc(8px + env(safe-area-inset-top)) 0 2px;
}

/* L'accueil avait sa propre grille a deux colonnes, pensee pour un header sans
   hamburger. Retablir le hamburger sans lui donner de piste le faisait chevaucher
   le wordmark. L'accueil suit desormais la grille standard : une seule grille
   pour toutes les pages, le hamburger a sa colonne. */

/* Le hamburger etait masque sur l'accueil A TOUTE LARGEUR : le tiroir y etait
   donc entierement inatteignable, avec ses 12 destinations. Il est retabli —
   c'est desormais la seule porte vers l'editorial, la nav desktop ayant quitte
   le header. */

body .site-hamburger-icon {
    width: 20px;
    height: 20px;
}

body .site-header__bar-top .brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    min-height: var(--tap-size);
    padding: 0;
}

body .site-header__bar-top .heop-logo {
    width: 82px;
    max-width: 100%;
    height: auto;
}

body .site-header__utils {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    gap: 9px;
}
body .site-util {
    display: grid;
    min-width: 44px;
    max-width: 58px;
    min-height: 44px;
    justify-items: center;
    gap: 1px;
    padding: 0;
    color: var(--hp-ink);
}

body .site-util-form {
    display: grid;
    margin: 0;
    padding: 0;
}

body .site-util-button {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

body .site-util:hover,
body .site-util-account.is-authenticated {
    color: var(--hp-orange);
    text-decoration: none;
}

body .site-util-icon {
    position: relative;
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

body .site-header-svg {
    width: 100%;
    height: 100%;
}

body .site-util-label {
    display: block;
    width: 100%;
    /* 58px tronquait « Inscription » en « Inscripti... ». Le retrait du lien de
       localisation a libere une tuile : la place existe. Un libelle tronque est
       un libelle rate — mieux vaut un mot plus court qu'une ellipse. */
    max-width: 76px;
    overflow: hidden;
    color: currentColor;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .site-util-cart {
    min-width: 25px;
}

body .site-util-cart .site-util-label {
    display: none;
}

@media (max-width: 359px) {
    /* Sous 360px la piste de marque est la seule elastique: chaque tuile en
       plus rogne le logo. L'inscription reste atteignable via la tuile Compte,
       qui pointe deja vers la connexion pour un visiteur anonyme. */
}

body.site-surface-intranet .site-header__utils {
    gap: 7px;
}

body.site-surface-intranet .site-util {
    min-width: 28px;
    max-width: 44px;
}

body.site-surface-intranet .site-util-label {
    max-width: 44px;
}

body.site-surface-intranet .site-util-auth {
    color: var(--hp-orange);
}

/* Le badge est TOUJOURS rendu — c'est une cible de swap hors-bande, elle doit
   exister meme a zero. C'est donc son vide qui le masque, pas son absence. */
body .site-util-badge:empty,
body .home-nav-badge:empty {
    display: none;
}

body .site-util-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    display: inline-flex;
    min-width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--hp-orange);
    color: #FFFDF7;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(200, 97, 56, .28);
}

body .site-header__bar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 5px 0 9px;
}

body .site-search {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
}

body .site-search__input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    min-width: 0;
    padding: 0 46px 0 16px;
    border: 1px solid var(--hp-line);
    border-radius: 20px;
    background: rgba(255, 253, 247, .9);
    color: var(--hp-ink);
    font-size: .82rem;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .72), 0 8px 20px rgba(27, 29, 24, .04);
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.is-scrolled .site-search__input {
    border-color: rgba(223, 212, 195, .9);
    background: rgba(255, 253, 247, .96);
    box-shadow: 0 8px 22px rgba(27, 29, 24, .055), inset 0 0 0 1px rgba(255, 253, 247, .72);
}

body .site-search__input::placeholder {
    color: #5F665D;
}

/* ---------------------------------------------------------------------------
   La rangee 2 : la recherche, pleine largeur au pouce.
   --------------------------------------------------------------------------- */

body .site-header__bar-search {
    padding-bottom: 10px;
}

/* La marque reprend sa taille. Elle etait comprimee par la colonne du burger et
   par quatre tuiles ; il n'en reste que deux au pouce. */
body .site-header__bar-top .brand {
    display: flex;
    align-items: center;
}

body .site-header__bar-top .heop-logo {
    width: 104px;
    max-width: 100%;
    height: auto;
}

body .site-header__utils {
    justify-self: end;
}

/* Au pouce, l'en-tete ne porte que deux gestes : se situer, et son compte. Le
   panier et l'inscription vivent dans la barre basse — les redupliquer ici
   serait le doublon que la carte de navigation proscrit. */
/* En desktop tout revient sur une ligne : le wordmark, la recherche large, puis
   les gestes. La rangee 2 se resorbe. */
@media (min-width: 900px) {
    body .site-header__inner {
        display: grid;
        grid-template-columns: auto minmax(240px, 1fr) auto;
        align-items: center;
        column-gap: 18px;
    }

    body .site-header__bar-top {
        display: contents;
    }

    body .site-header__bar-search {
        padding-bottom: 0;
    }

    body .site-header__bar-top .heop-logo {
        width: 124px;
    }

    body .site-util-cart,
    body .site-util-signup {
        display: inline-flex;
    }
}

/* Chercher est LE geste du header : c'est le seul element qui merite un etat
   franc. Au focus, le champ s'ancre dans le vert de la charte et gagne en
   surface — on voit ou l'on ecrit, sans avoir a le deviner. Meme doctrine que
   le pied de page : un mouvement, en reponse a un geste, pas de decoration. */
body .site-search__input:focus,
body .site-search__input:focus-visible {
    outline: none;
    border-color: var(--ui-color-brand, #245A3B);
    background: var(--ui-color-surface, #FFFDF7);
    box-shadow: 0 0 0 3px rgba(36, 90, 59, .16), 0 10px 26px rgba(27, 29, 24, .08);
}

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

/* Les tuiles utilitaires : la couleur de marque au survol, rien de plus. Une
   seule propriete animee pour que le header reste calme. */
body .site-util {
    transition: color 160ms ease;
}

body .site-util:hover,
body .site-util:focus-visible {
    color: var(--ui-color-brand, #245A3B);
}

/* Le panier est le seul appel a l'action du header : il reagit plus franchement
   que les autres, parce qu'il porte davantage. */
body .site-util-cart {
    transition: color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body .site-util-cart:hover,
body .site-util-cart:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(200, 97, 56, .28);
}

@media (prefers-reduced-motion: reduce) {
    body .site-util,
    body .site-util-cart,
    body .site-search__input {
        transition: none;
    }

    body .site-util-cart:hover,
    body .site-util-cart:focus-visible {
        transform: none;
    }
}

body .site-search__indicator {
    position: absolute;
    right: 42px;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(200, 97, 56, .2);
    border-top-color: var(--hp-orange);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

body .site-search__indicator.htmx-request,
body .site-search.htmx-request .site-search__indicator,
body .site-search.is-autocomplete-loading .site-search__indicator {
    opacity: 1;
    animation: heop-spin 700ms linear infinite;
}

@keyframes heop-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

body .site-search__btn {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hp-orange);
    transform: translateY(-50%);
}

body .site-search__btn .site-search-icon {
    width: 17px;
    height: 17px;
}

body .site-search-suggestions[hidden] {
    display: none;
}

body .site-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 18;
    overflow: hidden;
    border: 1px solid rgba(223, 212, 195, .9);
    border-radius: 14px;
    background:
        radial-gradient(circle at 8% 0, rgba(200, 97, 56, .08), transparent 34%),
        rgba(255, 253, 247, .98);
    box-shadow: 0 18px 42px rgba(27, 29, 24, .14);
    backdrop-filter: blur(14px);
}

body .site-search-suggestions__inner {
    display: grid;
    gap: 1px;
    max-height: min(286px, 48svh);
    overflow: auto;
    padding: 6px;
}

body .site-search-suggestion {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding: 8px 9px;
    border-radius: 10px;
    color: var(--hp-ink);
    text-decoration: none;
}

body .site-search-suggestion:hover,
body .site-search-suggestion.is-active {
    background: rgba(223, 232, 220, .58);
    text-decoration: none;
}

body .site-search-suggestion__kind {
    grid-column: 1 / -1;
    color: var(--hp-orange);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

body .site-search-suggestion strong {
    overflow: hidden;
    color: var(--hp-ink);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .site-search-suggestion small {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .site-search-suggestion__price {
    align-self: center;
    color: var(--hp-orange);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

body .site-search-suggestions__empty {
    margin: 0;
    padding: 10px;
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.site-desktop-nav {
    display: none;
}

body.has-open-nav {
    overflow: hidden;
}

@media (min-width: 421px) {
    :root {
        --hp-space-1: clamp(4px, 1.1vw, 8px);
        --hp-space-2: clamp(8px, 2vw, 14px);
        --hp-space-3: clamp(14px, 3.2vw, 24px);
        --hp-space-4: clamp(16px, 3.8vw, 28px);
        --hp-icon-xs: clamp(19px, 5vw, 25px);
    }

    body .site-header__bar-top {
        grid-template-columns: clamp(var(--tap-size), 8vw, 46px) minmax(0, 1fr) auto;
        gap: var(--hp-space-2);
        min-height: clamp(54px, 12vw, 68px);
        padding: calc(6px + env(safe-area-inset-top)) 0 5px;
    }

    body .site-hamburger-icon {
        width: clamp(20px, 4.8vw, 26px);
        height: clamp(20px, 4.8vw, 26px);
    }

    body .site-header__bar-top .brand {
        min-height: clamp(var(--tap-size), 8vw, 46px);
    }

    body .site-header__bar-top .heop-logo {
        width: clamp(96px, 23vw, 142px);
    }

    body .site-header__utils {
        align-items: flex-start;
        gap: var(--hp-space-2);
    }

    body.site-surface-intranet .site-header__utils {
        gap: 9px;
    }

    body .site-util {
        min-width: clamp(42px, 10vw, 62px);
        max-width: clamp(54px, 14vw, 108px);
        min-height: clamp(34px, 8vw, 46px);
        gap: var(--hp-space-1);
    }

    body .site-util-icon {
        width: var(--hp-icon-xs);
        height: var(--hp-icon-xs);
    }

    body .site-util-label {
        max-width: clamp(54px, 14vw, 108px);
        font-size: 0.7rem;
    }

    body.site-surface-intranet .site-util {
        min-width: clamp(38px, 8vw, 50px);
        max-width: clamp(48px, 11vw, 76px);
    }

    body.site-surface-intranet .site-util-label {
        max-width: clamp(48px, 11vw, 76px);
    }

    body .site-util-cart {
        min-width: clamp(34px, 8vw, 46px);
    }

    body .site-header__bar-search {
        padding: 6px 0 10px;
    }

    body .site-search__input {
        min-height: clamp(42px, 9vw, 52px);
        padding: 0 54px 0 18px;
        border-radius: clamp(18px, 4vw, 24px);
        font-size: .88rem;
        font-weight: 500;
    }

    body .site-search__indicator {
        right: 48px;
    }

    body .site-search__btn {
        right: 7px;
        width: 34px;
        height: 34px;
    }

    body .site-search__btn .site-search-icon {
        width: 18px;
        height: 18px;
    }

}

@media (min-width: 900px) {
    body .site-header__inner {
        width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
        margin-inline: auto;
    }

    body .site-header__bar-top {
        grid-template-columns: var(--tap-size) minmax(0, 1fr) auto;
        min-height: 58px;
        gap: 18px;
        padding: 9px 0 5px;
    }

    body .site-hamburger-icon {
        width: 24px;
        height: 24px;
    }

    body .site-header__bar-top .brand {
        min-height: var(--tap-size);
    }

    body .site-header__bar-top .heop-logo {
        width: 128px;
    }

    body .site-header__utils {
        align-items: center;
        gap: 22px;
    }

    body .site-util {
        min-width: 48px;
        max-width: 82px;
        min-height: 40px;
        gap: 3px;
    }

    body .site-util-icon {
        width: 22px;
        height: 22px;
    }

    body .site-util-label {
        max-width: 82px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    body .site-util-cart {
        min-width: 36px;
    }

    body .site-header__bar-search {
        padding: 8px 0 14px;
    }

    body .site-search__input {
        min-height: 46px;
        padding: 0 56px 0 18px;
        border-radius: 23px;
        font-size: .92rem;
        font-weight: 500;
    }

    body .site-search__indicator {
        right: 54px;
    }

    body .site-search__btn {
        right: 7px;
        width: 34px;
        height: 34px;
    }

    body .site-search__btn .site-search-icon {
        width: 18px;
        height: 18px;
    }
}

@media (min-width: 740px) and (max-width: 1160px) {
    body.home-page .site-header__bar-top {
        gap: 15px;
        min-height: 64px;
        padding: 8px 0;
    }

    body.home-page .site-header__bar-top .brand {
        grid-column: 1;
        grid-row: 1;
        min-height: 44px;
    }

    body.home-page .site-header__bar-top .heop-logo {
        width: 108px;
    }

    body.home-page .site-header__bar-search {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }

    body.home-page .site-header__utils {
        grid-column: 3;
        grid-row: 1;
        gap: 12px;
    }

    body.home-page .site-util {
        min-width: 42px;
        max-width: 46px;
    }

    body.home-page .site-util-label {
        display: none;
    }

    body.home-page .site-search__input {
        min-height: 46px;
    }
}

@media (min-width: 1161px) {
    /* La pastille panier se dimensionne sur son contenu: sans cela le libelle
       est rogne en "Pani..." des que la barre d'utilitaires se resserre. */
}



/* ==========================================================================
 * LE MENU DE COMPTE DE L'EN-TETE — un balisage, deux formes (H-22)
 *
 * Popover ancre au desktop, feuille qui monte du bas au pouce. C'est la recette
 * du selecteur de lieu, et c'est delibere : deux panneaux voisins dans la meme
 * barre d'utilitaires doivent s'ouvrir de la meme maniere, sinon le second
 * apprend au visiteur que le premier lui a menti.
 *
 * `<details>` porte l'ouverture. Aucun script.
 * ========================================================================== */

.compte-menu {
    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. */
.compte-menu > summary {
    cursor: pointer;
    list-style: none;
}

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

/* LE CHEVRON EST UN « chevron-right » COUCHE, ET C'EST VOULU.
   `chevron-down` n'existe pas dans components/ui/icon.html : le demander rend
   une boite vide — c'est ce qui arrive aujourd'hui a la pastille du selecteur
   de lieu, qui le demande. On tourne donc celui qui existe. */
.compte-menu__chevron {
    display: inline-flex;
    rotate: 90deg;
    transition: rotate .18s var(--ui-motion-ease, ease);
}

.compte-menu[open] .compte-menu__chevron {
    rotate: 270deg;
}

.compte-menu__panneau {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--ui-plan-card, #FFFDF7);
    color: var(--ui-color-ink, #241D16);
}

.compte-menu__entete {
    display: grid;
    gap: 5px;
    justify-items: start;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-color-sable, #E7DCC6);
}

.compte-menu__nom {
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.15;
    /* Un nom long passe a la ligne plutot que d'etre coupe : c'est le titre du
       panneau, pas une tuile de barre d'outils. */
    overflow-wrap: anywhere;
}

.compte-menu__groupe {
    display: grid;
    gap: 4px;
}

.compte-menu__titre {
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.compte-menu__liens {
    display: grid;
    gap: 1px;
}

.compte-menu__lien {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: var(--tap-size, 44px);
    padding: 0 8px;
    border-radius: var(--ui-radius-cta, 12px);
    color: var(--ui-color-ink, #241D16);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

/* `base.css` souligne tout lien au survol. Sur une rangee entiere de menu, le
   soulignement courrait sous l'icone et le libelle et se lirait comme un lien
   casse. Le fond dit le survol, comme partout ailleurs dans le compte. */
.compte-menu__lien:hover,
.compte-menu__lien:focus-visible {
    background: var(--ui-plan-sunk, #F4EBD9);
    text-decoration: none;
}

.compte-menu__lien.is-active {
    background: var(--ui-color-brand-soft, #DFE8DC);
    color: var(--ui-color-brand, #245A3B);
}

.compte-menu__sortie {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
}

.compte-menu__sortie-bouton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: var(--tap-size, 44px);
    padding: 0 8px;
    border: 0;
    border-radius: var(--ui-radius-cta, 12px);
    background: none;
    color: var(--ui-color-muted, #6E6252);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.compte-menu__sortie-bouton:hover,
.compte-menu__sortie-bouton:focus-visible {
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-ink, #241D16);
}

/* L'anse n'existe qu'au pouce, ou la feuille existe. */
.compte-menu__anse {
    display: none;
}


/* --- AU POUCE : UNE FEUILLE QUI MONTE DU BAS ----------------------------
 *
 * Un popover de 290px ancre a une pastille de coin d'ecran est injouable au
 * pouce : il tombe hors de portee du doigt et se fait recouvrir par la barre
 * basse. La feuille, elle, EST le bas. */

@media (max-width: 899px) {
    .compte-menu[open] .compte-menu__panneau {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        /* AU-DESSUS DE LA BARRE BASSE (z-index 90, home/bottom-nav.css) :
           en dessous, elle recouvrait « Se deconnecter ». */
        z-index: 100;
        max-height: 78dvh;
        /* Le rembourrage bas reserve la hauteur de la barre : le dernier
           element reste atteignable meme quand elle demeure visible. */
        padding: 14px 16px calc(18px + var(--hp-bottom-nav-height, 0px) + env(safe-area-inset-bottom));
        border-radius: var(--ui-radius-sheet, 22px) var(--ui-radius-sheet, 22px) 0 0;
        overflow-y: auto;
        box-shadow: 0 -18px 44px rgba(22, 41, 28, .26);
    }

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

    .compte-menu[open] .compte-menu__anse {
        display: block;
        justify-self: center;
        width: 38px;
        height: 4px;
        border-radius: var(--ui-radius-pill, 999px);
        background: var(--ui-color-sable, #E7DCC6);
    }

    @media (prefers-reduced-motion: no-preference) {
        .compte-menu[open] .compte-menu__panneau {
            animation: compte-menu-monte 200ms var(--ui-motion-ease, ease) both;
        }
    }
}

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


/* --- LE PIEGE DU BLOC CONTENEUR, NEUTRALISE LE TEMPS DE L'OUVERTURE -----
 *
 * `backdrop-filter`, `transform`, `filter`, `perspective` et `contain` creent un
 * BLOC CONTENEUR pour tout descendant en `position: fixed`. Un panneau ainsi
 * positionne se cale alors sur l'en-tete et non sur la fenetre : la « feuille du
 * bas » atterrit en HAUT DE L'ECRAN. UN SEUL PIXEL suffit — la propriete
 * compte, pas son amplitude.
 *
 * Les ancetres fautifs de ce menu sont les memes que ceux du selecteur de lieu,
 * qui a paye ce defaut avant nous : deux flous d'arriere-plan sur l'en-tete, un
 * troisieme a l'etat defile, et un `transform: translateY(-1px)` sur l'ossature
 * interne. On les neutralise PENDANT l'ouverture seulement — le flou ne coute
 * rien quand rien n'est ouvert, et c'est ce que la cible demande.
 *
 * A REMONTER, hors de mon perimetre : location-selector.css porte la MEME regle
 * pour `.lieu[open]`. Les deux devraient n'en faire qu'une,
 * `:has(.lieu[open], .compte-menu[open])`, posee ici — mais cette feuille-la
 * appartient a une autre voie et je ne la touche pas. Le troisieme panneau qui
 * arrivera dans cette barre devra ecrire la sienne, et c'est le moment de
 * fondre les trois. */

@media (max-width: 899px) {
    body .site-header:has(.compte-menu[open]),
    body.is-scrolled .site-header:has(.compte-menu[open]),
    .home-page .site-header:has(.compte-menu[open]) {
        backdrop-filter: none;
        /* Le fond translucide sans le flou laisserait voir le contenu defiler
           derriere l'en-tete pendant que la feuille est ouverte. On l'opacifie
           le temps de l'ouverture. */
        background: var(--ui-plan-card, #FFFDF7);
    }

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


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

@media (min-width: 900px) {
    .compte-menu[open] .compte-menu__panneau {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        z-index: 60;
        width: 292px;
        max-height: 78vh;
        overflow-y: auto;
        border: 1px solid var(--ui-color-sable, #E7DCC6);
        border-radius: var(--ui-radius-card, 14px);
        box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11));
    }
}