/* =========================================================
   Caniguide – cg-nav-rail.css
   La coquille de navigation v1. Pendant visuel de inc/nav-rail.php.

   ══ UN SEUL NŒUD, DEUX POSTURES ═════════════════════════════════════════════
   Le rail desktop et le drawer mobile ne sont pas deux composants : c'est le
   MÊME <nav>, posé en colonne fixe au-dessus de 921px et glissé hors écran en
   dessous. Tout ce fichier découle de là — il n'y a rien à synchroniser entre
   deux rendus, parce qu'il n'y en a qu'un.

   ══ POURQUOI 921px ══════════════════════════════════════════════════════════
   C'est le point où Astra bascule de son en-tête desktop à son en-tête mobile
   (mesuré : 921 desktop / 920 mobile). Le bouton d'ouverture du drawer vit dans
   l'en-tête MOBILE ; si le rail se cachait avant ce point, il existerait une
   plage de largeurs sans rail ET sans bouton, donc sans navigation du tout.
   Les deux seuils sont donc le même, et ce n'est pas négociable.

   ══ CE QU'ON REPREND DU MOCKUP, ET CE QU'ON NE REPREND PAS ══════════════════
   Structure, proportions et hiérarchie viennent du mockup. Les couleurs, NON :
   il est bâti sur un vert pin, le site est sur l'orange --cg-accent et le brun
   --cg-primary. On branche sur les tokens du thème, pas sur ses variables.
   ========================================================= */

:root {
    --cg-rail: 272px;
    --cg-rail-replie: 64px;
    /* Largeur EFFECTIVE du rail. Une seule variable commande la colonne et le
       décalage du contenu : deux valeurs à tenir d'accord finiraient par diverger
       d'un pixel, puis d'une colonne. */
    --cg-rail-actuel: var(--cg-rail);
    --cg-nav-pouce-h: 62px;
    /* Publié par cg-nav-rail.js : hauteur d'en-tête encore visible. L'en-tête
       n'est pas collant, le rail doit donc remonter au fil du défilement. */
    --cg-nav-haut: 0px;
}

/* =========================================================
   1. CE QUE LA COQUILLE REMPLACE
   Le menu horizontal est retiré à la source (filtre PHP). Restent les
   conteneurs vides d'Astra et son propre bouton burger, qui feraient double
   emploi avec le nôtre.
   ========================================================= */

.main-header-bar-navigation,
.ast-builder-menu-1,
.ast-builder-menu-mobile,
.ast-mobile-menu-buttons,
.main-header-menu-toggle {
    display: none !important;
}

/* =========================================================
   2. LE RAIL
   ========================================================= */

.cg-nav__rail {
    position: fixed;
    top: var(--cg-nav-haut);
    left: 0;
    z-index: 90;
    width: var(--cg-rail);
    height: calc(100vh - var(--cg-nav-haut));
    padding: 14px var(--cg-space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 🎨 DÉCISION DE JORDAN (2026-08-26) : le rail prend le fond du SITE, pas
       une teinte à lui. Le crème sur toute la hauteur faisait du rail une bande
       étrangère au reste de la page — c'est la « tache » que le design avait
       lui-même nommée. Il ne disparaît pas pour autant : il migre du MUR vers
       le MARQUEUR (l'item courant, plus bas), ce qui est exactement l'emploi
       « avec parcimonie » arbitré pour cette teinte.
       Seule la bordure droite sépare désormais le rail du contenu. */
    background: var(--cg-bg);
    border-right: 1px solid var(--cg-border);
}

/* L'en-tête garde la main sur le rail : au repos, il le couvre au lieu de se
   faire chevaucher. */
.site-header {
    position: relative;
    z-index: var(--cg-z-collant);
}

/* ══════════════════════════════════════════════════════════════════════════════
   L'EN-TÊTE RESTE EN DESKTOP — logo, recherche, accès au compte

   Décision de Jordan : « on a mis le menu vertical justement pour dégager cette
   barre et y mettre des choses importantes, donc faut pas qu'elle disparaisse
   en desktop ». Le retour à l'accueil, la recherche globale et l'accès au
   compte doivent rester atteignables sans remonter toute la page.

   🔒 DESKTOP SEULEMENT. En tablette et en mobile, le pouce a déjà tout à portée
   — barre du bas et bouton des univers — et 99 px de bandeau collant y
   mangeraient un dixième de l'écran pour rien. Le seuil est celui du rail,
   signé : 1025.

   ══ TOUT L'AVAL RÉSERVAIT DÉJÀ CETTE HAUTEUR ════════════════════════════════
   Mesuré avant de poser quoi que ce soit : la colonne de sommaire colle à
   `calc(--cg-nav-haut + 40px)`, le rail commence à `--cg-nav-haut` et se
   dimensionne sur `calc(100vh - --cg-nav-haut)`. La mise en page était donc
   déjà écrite pour un en-tête qui occupe le haut ; seul l'en-tête ne le faisait
   pas.

   🔒 Le script qui publie `--cg-nav-haut` n'est PAS touché. Il publie la hauteur
   d'en-tête ENCORE VISIBLE : collé, l'en-tête garde la sienne, donc il publie
   une constante. Il continue de faire son travail en tablette et en mobile, où
   l'en-tête défile toujours. Retirer un mécanisme qui redevient inutile d'un
   côté et reste nécessaire de l'autre, c'est casser le second pour ranger le
   premier.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
    .site-header {
        position: sticky;
        top: 0;
    }
}

/* Le contenu se décale de la largeur du rail. On vise les frères de l'en-tête
   plutôt qu'un conteneur nommé : les gabarits d'archive sortent des sections à
   ce niveau (`.races-wrapper`), une liste fermée en oublierait. */
@media (min-width: 921px) {
    .site > *:not(.site-header) {
        padding-left: var(--cg-rail-actuel);
    }
}

/* =========================================================
   2 bis. LE RAIL SE REPLIE

   Le rail prend 272 px et faisait tomber la grille des archives de 3 à 2 colonnes
   sous 1550. Sur un écran de 1280 — la largeur la plus courante — on payait donc
   une colonne entière pour une navigation permanente.

   ══ QUI COMMANDE L'ÉTAT ═════════════════════════════════════════════════════
   🔒 DEUX MÉCANISMES, UNE PRÉCÉDENCE, sinon ils se battent. La largeur pose le
   DÉFAUT ; un choix explicite de l'utilisateur le REMPLACE et se mémorise. Sans
   cette hiérarchie, quelqu'un qui déplie à 1280 verrait son rail se replier à la
   page suivante, et il ne saurait pas pourquoi.
   Le franchissement du seuil ne réapplique donc le défaut que si l'utilisateur
   n'a jamais choisi — c'est-à-dire tant qu'aucune classe de choix n'est posée.

   ══ REPLIÉ NE VEUT PAS DIRE ABSENT ══════════════════════════════════════════
   🔒 On a passé deux jours à garantir qu'aucune largeur, de 320 à 2560, ne se
   retrouve sans navigation. Un rail replié qui disparaîtrait rouvrirait ce trou
   sur la largeur la plus fréquentée. Replié, il garde sa bande d'icônes : tous
   les univers restent atteignables, en un geste au plus.

   🔴 CETTE PHRASE N'A LONGTEMPS ÉTÉ QU'UNE INTENTION. Mesuré : entre 921 et
   1549 px, 0 des 21 liens étaient atteignables — le repli masquait
   .cg-nav__items sans rien mettre à la place. Elle est désormais tenue par
   cg-nav-rail.js (un clic sur un titre déplie le rail) et ASSERTÉE par
   tools/audit/garde-rail-atteignable.mjs. Une règle ajoutée ici qui
   masquerait les enfants fera rougir cette garde.
   ========================================================= */

/* Le défaut vient de la largeur — et de rien d'autre. */
@media (min-width: 921px) and (max-width: 1549px) {
    :root {
        --cg-rail-actuel: var(--cg-rail-replie);
    }
}

/* 🔒 Le choix explicite gagne, aux deux seuils. Sélecteur plus spécifique que
   `:root` : la précédence est portée par la cascade, pas par un !important. */
html.cg-rail-choix-ouvert {
    --cg-rail-actuel: var(--cg-rail);
}

html.cg-rail-choix-replie {
    --cg-rail-actuel: var(--cg-rail-replie);
}

@media (min-width: 921px) {
    .cg-nav__rail {
        width: var(--cg-rail-actuel);
    }

}

/* Ce que le repli masque — mesuré sur la largeur effective, donc valable quelle
   que soit la raison du repli (défaut de largeur ou choix). */
@media (min-width: 921px) {
    .cg-rail-est-replie .cg-nav__grp-titre {
        justify-content: center;
        padding-inline: 0;
        gap: 0;
    }

    .cg-rail-est-replie .cg-nav__grp-titre .cg-nav__ic {
        font-size: 1.15rem;
    }

    /* Le texte du titre est le nœud de texte nu du <summary> : on le masque en
       réduisant la police à zéro plutôt qu'en enveloppant chaque libellé dans un
       <span>, ce qui aurait changé le balisage du composant partagé. */
    .cg-rail-est-replie .cg-nav__grp-titre {
        font-size: 0;
    }

    .cg-rail-est-replie .cg-nav__chev,
    .cg-rail-est-replie .cg-nav__items,
    .cg-rail-est-replie .cg-nav__phare-texte,
    .cg-rail-est-replie .cg-nav__tag,
    .cg-rail-est-replie .cg-nav__bascule-libelle {
        display: none;
    }

    .cg-rail-est-replie .cg-nav__phare {
        justify-content: center;
        padding: var(--cg-space-2) 0;
    }

    .cg-rail-est-replie .cg-nav__rail {
        padding-inline: 6px;
    }
}

/* La bascule — visible en permanence, dans les deux états. */
.cg-nav__bascule {
    display: none;
}

@media (min-width: 921px) {
    .cg-nav__bascule {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--cg-space-2);
        width: 100%;
        min-height: var(--cg-cible-tactile);
        margin-bottom: var(--cg-space-2);
        padding: var(--cg-space-2);
        border: 1px solid var(--cg-border);
        border-radius: var(--cg-radius-xs);
        background: var(--cg-bg);
        color: var(--cg-text-soft);
        font-size: var(--cg-text-xs);
        font-weight: 600;
        cursor: pointer;
    }

    .cg-nav__bascule:hover,
    .cg-nav__bascule:focus-visible {
        color: var(--cg-primary);
        border-color: var(--cg-border-strong);
    }
}

/* =========================================================
   3. LES GROUPES
   ========================================================= */

.cg-nav__grp {
    border: 0;
    margin: 0;
}

.cg-nav__grp + .cg-nav__grp,
.cg-nav__grp-titre--direct + .cg-nav__grp,
.cg-nav__grp + .cg-nav__grp-titre--direct,
.cg-nav__grp-titre--direct + .cg-nav__grp-titre--direct {
    margin-top: 2px;
}

.cg-nav__grp-titre {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: var(--cg-radius-xs);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--cg-text-soft);
    cursor: pointer;
    /* Le marqueur natif de <summary> est masqué : le chevron dit la même chose,
       et l'état reste annoncé par le <details> lui-même. */
    list-style: none;
}

.cg-nav__grp-titre::-webkit-details-marker {
    display: none;
}

.cg-nav__grp-titre--direct {
    text-decoration: none;
}

/* 🔴 LE SURVOL ÉTAIT INVISIBLE, ET C'EST MOI QUI L'AI RENDU TEL.
   Il posait --cg-bg — du blanc — parce que le rail était crème : une pastille
   blanche s'y détachait. Le rail ayant pris le fond du site, ce blanc est
   devenu blanc sur blanc. Le survol changeait bien quelque chose, et ce
   quelque chose ne se voyait plus.
   Même famille que le marqueur d'état, qui avait la même dépendance et que
   j'avais, lui, traité : le crème ne portait pas qu'une couleur, il portait un
   CONTRASTE dont plusieurs états vivaient.

   Une teinte d'accent très légère, celle que la table des matières emploie déjà
   pour son propre survol — pas une nuance inventée pour le rail seul. Elle est
   distincte du crème de l'item courant, donc « survolé » et « courant » ne se
   confondent pas.
   🔒 Le focus clavier rend EXACTEMENT le même retour visuel : c'est la demande,
   et c'est aussi la règle — un état qui ne se voit qu'à la souris n'existe pas
   pour qui navigue au clavier. */
.cg-nav__grp-titre:hover,
.cg-nav__grp-titre:focus-visible {
    background: #fff7ef;
    color: var(--cg-accent-ink);
}

/* L'univers courant et la page courante partagent le même signal visuel : le
   lecteur cherche « où suis-je », pas « suis-je exactement ici ». La distinction
   se joue dans l'attribut aria-current, pas dans la couleur. */
/* 🔴 L'ÉTAT COURANT NE PEUT PLUS ÊTRE « BLANC SUR CRÈME ».
   Il l'était : une pastille --cg-bg qui se détachait du mur crème. Le rail
   devenant blanc, cette pastille serait devenue blanc sur blanc — l'état actif
   aurait disparu sans que rien ne le signale.
   Il prend donc le crème comme surface et l'encre d'accent du socle :
   « actifs à l'accent selon l'identité ». §22 tenu par construction — le
   marqueur non coloré est déjà là, c'est aria-current. */
.cg-nav__grp-titre--direct.est-univers,
.cg-nav__grp-titre--direct[aria-current="page"] {
    background: var(--cg-bg-soft);
    color: var(--cg-accent-ink);
    box-shadow: var(--cg-marqueur-courant);
}

.cg-nav__ic {
    width: 18px;
    flex: none;
    font-size: 0.9rem;
    text-align: center;
}

.cg-nav__chev {
    margin-left: auto;
    color: var(--cg-text-muted);
    transition: transform 0.18s ease;
}

.cg-nav__grp[open] > .cg-nav__grp-titre .cg-nav__chev {
    transform: rotate(90deg);
}

.cg-nav__items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 var(--cg-space-2) 37px;
}

.cg-nav__items a {
    padding: 6px 10px;
    border-radius: 7px;
    font-size: var(--cg-text-sm);
    line-height: 1.35;
    /* Texte brun, selon la même décision : le rail parle la typo du site. */
    color: var(--cg-primary);
    text-decoration: none;
}

/* Même correction pour les enfants d'un groupe déplié : même teinte, même
   encre, même retour au clavier qu'à la souris. */
.cg-nav__items a:hover,
.cg-nav__items a:focus-visible {
    background: #fff7ef;
    color: var(--cg-accent-ink);
}

.cg-nav__items a.est-courant {
    background: var(--cg-bg-soft);
    color: var(--cg-accent-ink);
    font-weight: 600;
    box-shadow: var(--cg-marqueur-courant);
}

/* Le marqueur « vous êtes ici », déclaré UNE fois : deux règles le peignaient à
   l'identique, et la composition avec l'anneau ci-dessous en aurait fait une
   troisième copie de la même décision. Trois copies divergent, c'est la seule
   chose dont on soit sûr. */
:root {
    --cg-marqueur-courant: inset 2px 0 0 var(--cg-accent);
}

/* 🔴 LE LISERÉ DE PAGE COURANTE EFFAÇAIT L'ANNEAU DE FOCUS. Deux significations
   sans rapport logeaient dans la même propriété : « vous êtes ici » et « le
   clavier est ici ». Comme `.cg-nav__items a.est-courant` pèse (0,2,1) contre
   (0,1,1) pour `a:focus-visible`, le marqueur gagnait — et sur la page où l'on
   se trouve, c'est-à-dire toujours quelque part, un lien de menu ne signalait
   plus son focus. Mesuré, pas déduit : ombre identique au repos et au focus.

   Le défaut ne s'était pas vu tant que l'instrument définissait l'anneau comme
   « la box-shadow d'un élément focalisé » : il LISAIT ce liseré et le notait
   comme un anneau à 2.82:1, donc comme un contraste à améliorer. La présence du
   marqueur masquait l'absence de l'anneau dessous. Redéfini par l'effet — ce que
   le focus AJOUTE — le trou s'est déclaré tout seul.

   On compose au lieu de choisir : le marqueur reste, l'anneau s'ajoute. */
.cg-nav__items a.est-courant:focus-visible,
.cg-nav__grp-titre--direct.est-univers:focus-visible,
.cg-nav__grp-titre--direct[aria-current="page"]:focus-visible {
    box-shadow: var(--cg-marqueur-courant), var(--cg-focus-ring);
}

/* =========================================================
   4. L'ENCART PHARE
   Accentué parce que c'est le produit phare, et SANS lien tant que sa page
   n'existe pas : le tag « bientôt » est la seule promesse qu'on s'autorise.
   ========================================================= */

.cg-nav__phare {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 2px 0 var(--cg-space-3);
    padding: var(--cg-space-3);
    border: 1px solid var(--cg-accent);
    border-radius: var(--cg-radius-sm);
    background: linear-gradient(180deg, #fdf1e4, transparent);
    color: var(--cg-primary);
    text-decoration: none;
}

.cg-nav__phare--bientot {
    cursor: default;
}

.cg-nav__phare-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    background: var(--cg-accent);
    color: var(--cg-on-accent);
    font-size: 1.05rem;
}

.cg-nav__phare-titre {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
}

.cg-nav__phare-sous {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--cg-text-soft);
}

.cg-nav__tag {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--cg-warning-bg);
    color: var(--cg-warning);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* =========================================================
   5. EN-TÊTE DU RAIL — visible en drawer seulement
   ========================================================= */

.cg-nav__entete {
    display: none;
    align-items: center;
    margin: -14px -12px 10px;
    padding: 10px var(--cg-space-3);
    border-bottom: 1px solid var(--cg-border);
}

.cg-nav__entete-logo {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    /* La LARGEUR est la seule dimension bornée de tout le bloc logo — cf. la
       règle sur l'image juste en dessous. 96px : l'en-tête du tiroir reste à
       une hauteur de barre, sans jamais toucher à la hauteur de l'image. */
    max-width: 96px;
    text-decoration: none;
    color: var(--cg-primary);
    font-weight: 700;
}

/* 🔒 UNE SEULE DIMENSION CONTRAINTE, JAMAIS LES DEUX.
   Mesuré à 375 et 390 px : le logo sortait en 76x34, soit un rapport de 2,235
   contre 1,477 au naturel. Astra borne déjà la LARGEUR de `.custom-logo` à 76 px
   en mobile ; ma `max-height: 34px` ajoutait une seconde borne, et deux bornes qui
   mordent en même temps écrasent l'image. La hauteur redevient libre : c'est la
   largeur d'Astra qui commande, et le rapport se conserve tout seul.
   La hauteur de l'en-tête du tiroir s'adapte, elle n'a pas besoin d'être fixe. */
.cg-nav__rail .cg-nav__entete-logo img {
    max-width: 100%;
    height: auto;
}

.cg-nav__entete-nom {
    font-family: inherit;
    font-size: var(--cg-text-base);
    white-space: nowrap;
}

.cg-nav__entete-compte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--cg-space-3);
    min-height: var(--cg-cible-tactile);
    font-size: var(--cg-text-xs);
    font-weight: 600;
    color: var(--cg-text-soft);
    text-decoration: none;
}

.cg-nav__fermer {
    display: grid;
    place-items: center;
    width: var(--cg-cible-tactile);
    height: var(--cg-cible-tactile);
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cg-text-soft);
    font-size: 1.1rem;
    cursor: pointer;
}

/* =========================================================
   6. LE DRAWER — sous 921px
   ========================================================= */

@media (max-width: 920px) {
    .cg-nav__entete {
        display: flex;
    }

    /* ══════════════════════════════════════════════════════════════════════════
       🔄 H-3 — LE MENU MOBILE N'EST PLUS UN TIROIR LATÉRAL, C'EST L'ÉCRAN.
       ══════════════════════════════════════════════════════════════════════════
       Un panneau de 340 px glissant sur la gauche laissait 55 px de page à droite,
       coupait la barre du bas, exigeait un voile, et dupliquait le logo pour
       restituer un haut de page qu'il masquait. Quatre corrections successives
       (A22, B55, B56, B57) tournaient autour du même choix de départ.

       🔒 IL PREND TOUT L'ÉCRAN SOUS L'EN-TÊTE, QUI RESTE VISIBLE. L'en-tête de page
       garde son logo et porte le ✕ : on voit d'où l'on vient, il n'y a plus deux
       logos, plus de voile à percer, plus de barre coupée — il n'y a plus de page
       derrière. Décision de Jordan (08/09). */
    .cg-nav__rail {
        /* 🔒 IL RECOUVRE TOUT L'ÉCRAN SAUF LA BARRE DU BAS. Spécification de Jordan
           (08/09 22 h 40) : un bloc, du haut de la fenêtre jusqu'au-dessus de la barre
           du bas — qui reste, et qui est la sortie. La barre d'admin, quand elle
           existe, garde sa place ; elle vaut 0 pour un visiteur. */
        top: var(--wp-admin--admin-bar--height, 0px);
        bottom: calc(var(--cg-nav-pouce-h) + env(safe-area-inset-bottom, 0px));
        /* ══ 🔴 A22 — 126 PX DE BLANC SOUS LA DERNIÈRE ENTRÉE ════════════════════
           Mesuré à 390 : le tiroir occupait 763 px de haut, sa dernière entrée
           s'arrêtait à 718. La hauteur était celle de l'ÉCRAN, pas celle du menu :
           un panneau qui se dimensionne sur le vide qu'il recouvre plutôt que sur
           ce qu'il porte. Le blanc n'était pas une respiration, c'était le reste
           d'un calcul.
           🔒 LA HAUTEUR SUIT LE CONTENU, PLAFONNÉE PAR L'ÉCRAN. `max-height` garde
           le défilement interne quand le menu est plus long que la fenêtre — le cas
           d'un sous-menu déplié — et `height: auto` le fait s'arrêter sous sa
           dernière entrée le reste du temps. */
        /* La hauteur est portée par `top`/`bottom` : le bloc EST la fenêtre, moins la
           barre du bas. Le contenu défile dedans. */
        height: auto;
        max-height: none;
        width: 100vw;
        left: 0;
        right: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* 🔒 AU-DESSUS DU MOBILIER DE PAGE. Mesuré sur /races/ : le bouton
           « Filtres » est à 9999, le tiroir de facettes à 10000, l'en-tête mobile
           d'Astra à 90001. À 1000, le menu ouvert se faisait recouvrir par la
           barre Filtres — visible seulement à la capture, aucun contrôle
           fonctionnel ne l'attrapait. On se place au-dessus de la pile connue. */
        z-index: var(--cg-z-rail);
        /* Il monte, il ne glisse plus de côté : le geste dit « une couche par-dessus »
           et non « un tiroir à côté ». `visibility` accompagne l'opacité pour qu'un
           panneau fermé ne reçoive aucun clic. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
        box-shadow: none;
        border-right: 0;
    }

    .cg-nav.est-ouvert .cg-nav__rail {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    /* 🔄 PLUS DE VOILE : il n'y a plus rien à voiler. Un fond sombre derrière un
       panneau opaque plein écran ne se voit pas, et il continuait d'intercepter les
       clics sur la moitié droite de l'écran. */
    .cg-nav__voile {
        display: none;
    }

    /* ── Les entrées, à la taille d'un menu plein écran ────────────────────── */
    .cg-nav__rail .cg-nav__grp-titre {
        font-size: 1.125rem;
        font-weight: 700;
        min-height: var(--cg-cible-tactile, 44px);
        padding-block: var(--cg-space-3);
    }
    .cg-nav__rail .cg-nav__items a {
        font-size: 1rem;
        min-height: var(--cg-cible-tactile, 44px);
        display: flex;
        align-items: center;
    }
    /* 🔒 RIEN D'AUTRE DANS LE BLOC. Pas de fil, pas de second ✕, pas de bloc compte
       en bas de liste, pas de teaser : un bloc, un en-tête répliqué, une liste. Ce
       qui traînait du rail de bureau se tait ici. */
    .cg-nav__rail .cg-nav__bascule,
    .cg-nav__rail .cg-nav__phare,
    .cg-nav__rail .cg-fil,
    .cg-nav__rail .cg-nav__fermer {
        display: none;
    }

    /* 🔒 Le blocage du défilement ne vit QUE le temps de l'ouverture. Une classe
       posée au chargement et jamais retirée fige la page entière — le drawer
       fermé ne doit rien empêcher. */
    body.cg-nav-ouvert {
        overflow: hidden;
    }

    /* ══ 🔴 B55 — DEUX LOGOS CANIGUIDE À L'ÉCRAN EN MÊME TEMPS ═══════════════════
       Mesuré à 390, tiroir ouvert : celui de l'en-tête de page à y=14 (sous le
       voile, donc grisé mais lisible) et celui du tiroir à y=91. Le tiroir REND le
       haut de page pour qu'on n'ait pas à remonter — mais il le rend en double,
       et les deux se lisent comme deux marques empilées.
       🔒 C'est celui du TIROIR qui reste : il est au-dessus du voile, il est
       cliquable, il est celui que la personne vient d'ouvrir. Celui de la page est
       masqué le temps de l'ouverture — `visibility`, pas `display`, pour que rien
       ne se réagence derrière le voile. */
    /* 🔒 UN SEUL LOGO À L'ÉCRAN, ET C'EST CELUI DU BLOC. Le bloc recouvre l'en-tête
       de page : il n'y a plus de second logo à masquer, et le sien est la RÉPLIQUE
       du header — c'est ce que la spécification demande. */
    body.cg-nav-ouvert .site-branding .custom-logo-link {
        visibility: visible;
    }

    /* ══ 🔴 B56 — LA BARRE DU BAS COUPÉE EN DEUX PAR LE TIROIR ══════════════════
       Mesuré à 390 : le tiroir fait 335 px de large et se pose à z-index 90021 ;
       la barre du bas fait 390 et vit à z-index 200. Les 55 px qui dépassent à
       droite restaient donc seuls à l'écran — un bloc brun isolé, l'onglet « Menu »
       actif, sans le reste de sa barre. Une barre coupée ne se lit pas comme une
       barre : elle se lit comme un défaut d'affichage.
       🔒 ELLE SE MASQUE ENTIÈREMENT PENDANT L'OUVERTURE. La sortie du tiroir est
       son propre ✕ et le voile — deux chemins visibles, au-dessus de lui. */
    /* 🔄 H-3 — LA BARRE DU BAS RESTE VISIBLE, ET C'EST ELLE QUI REFERME. B56 la
       masquait parce que le tiroir de 340 px la coupait en deux ; le bloc s'arrête
       maintenant au-dessus d'elle, il n'y a plus rien à couper. Spécification de
       Jordan : on referme en retapant « Menu ». Son onglet reste donc actif et
       atteignable pendant toute l'ouverture. */
    body.cg-nav-ouvert .cg-nav-pouce {
        visibility: visible;
        z-index: calc(var(--cg-z-rail) + 1);
    }

    /* ══ 🔴 B57 — « MON COMPTE » HORS DE L'AXE DES ENTRÉES ══════════════════════
       Mesuré à 390 : les entrées du menu commencent à x=49, « Mon compte » à
       x=100 — posé à la suite du logo, sur la ligne d'en-tête. Deux axes dans un
       panneau qui n'en a qu'un : l'œil qui descend la colonne bute dessus.
       🔒 IL PREND SA PROPRE LIGNE, SUR L'AXE DES ENTRÉES. Le rembourrage vaut
       49 px moins les 12 px que l'en-tête porte déjà. */
    /* 🔄 H-3 — L'EN-TÊTE DU BLOC RÉPLIQUE LE HEADER : logo à gauche, compte à droite,
       sur une seule ligne, séparé de la liste par un filet. B57 n'a plus de sujet —
       « Mon compte » n'est plus une entrée de liste, c'est la moitié droite de cette
       réplique, avec son dessin et son libellé. */
    .cg-nav__entete {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--cg-space-3);
        padding-block: var(--cg-space-3);
        border-bottom: 1px solid var(--cg-border);
    }
    .cg-nav__entete-logo { order: 0; margin: 0; }
    .cg-nav__entete-compte {
        order: 1;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: var(--cg-space-2);
        min-height: var(--cg-cible-tactile, 44px);
        padding-inline: var(--cg-space-2);
        color: var(--cg-primary);
        font-weight: 700;
        text-decoration: none;
        flex: 0 0 auto;
    }
    .cg-nav__entete-compte svg { width: 22px; height: 22px; }
    /* 🔒 LE LIBELLÉ EST VISIBLE ICI, ET C'EST VOULU. La feuille du compte le masque
       sous 921 px — dans le header mobile la place manque et l'icône reste seule.
       Dans le bloc, la place existe, et la spécification demande le composant du
       header AVEC son libellé : « icône + libellé, pas une entrée brute ». */
    .cg-nav__entete-compte .cg-account__libelle {
        /* La règle de masquage sous 921 px ne se défait pas en redéclarant `display` :
           elle sort le libellé du flux (`position: absolute`), le réduit à 1 px et le
           découpe (`clip-path`). On rend les cinq propriétés, sinon le mot reste là,
           invisible et large de un pixel — ce que la mesure a montré. */
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        margin-left: 0;
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-nav__rail {
        transition: none;
    }
}

/* =========================================================
   7. BARRE HORIZONTALE
   ========================================================= */

/* Réceptacle info-clé — ZÉRO PIXEL TANT QU'IL EST VIDE.
   🔒 UN EMPLACEMENT RÉSERVÉ QUI SE VOIT EST UN DÉFAUT. Il avait d'abord été rendu
   « vide et visiblement marqué », en pointillés hachurés : à l'écran, à côté du
   bouton compte, ça se lit comme un bug d'affichage — celui qui le regarde ne sait
   pas qu'il est réservé, et personne ne lui dira.
   Le marquage reste, mais là où il s'adresse à un développeur : dans le HTML
   (`data-cg-slot="info-cle"`) et dans ce commentaire. Pas de boîte, pas de bordure,
   pas de largeur retenue. Le jour où l'emplacement porte quelque chose, il occupe
   la place de ce qu'il porte, ni avant ni plus. */
.cg-nav-infocle:empty {
    display: none;
}

/* =========================================================
   7 bis. LA BARRE DU HAUT EN DESKTOP

   [ logo ]        [        recherche, centrée et large        ]   [ Adopter ] [ 👤 Mon compte ]
    colonne du rail                                                    coin droit

   Le logo quitte le conteneur centré d'Astra et se cale sur la LARGEUR DE LA
   COLONNE DU RAIL : marque et navigation forment ainsi une seule colonne, au lieu
   de deux alignements qui se ratent de quelques pixels. Les deux actions vont au
   coin droit, et tout le milieu revient à la recherche.

   🔒 EN FLUX, PAS COLLANTE. Décision prise : le rail persiste au défilement, les
   archives ont déjà leur propre champ de recherche, et une barre collante
   rouvrirait les conflits de superposition qui nous ont mordus avec le tiroir de
   facettes (9999) et celui des refuges (10000). Aucun `position: fixed`, aucun
   écouteur de défilement.
   ========================================================= */

@media (min-width: 921px) {
    /* On sort du conteneur centré : la barre prend toute la largeur. */
    .ast-primary-header-bar .site-primary-header-wrap,
    .ast-primary-header-bar .ast-builder-grid-row {
        max-width: none;
        padding-inline: 0;
    }

    .ast-primary-header-bar .ast-builder-grid-row {
        grid-template-columns: var(--cg-rail) 1fr;
        gap: 0;
    }

    .site-header-primary-section-left {
        justify-content: flex-start;
        padding-left: var(--cg-space-5);
    }

    /* La section de droite porte la recherche ET les actions : la recherche
       s'étire, les actions restent collées au bord. */
    .site-header-primary-section-right {
        gap: 14px;
        padding-right: var(--cg-space-5);
    }

    /* 🔒 PORTÉE ALIGNÉE SUR CELLE QU'ON REMPLACE. nav.css porte un
       `#ast-desktop-header .cg-search-toggle--desktop` qui fixe le carré de 40 px.
       Un sélecteur de classe seul ne le bat pas, quel que soit l'ordre des
       feuilles : mesuré, le champ restait à 40 px alors que ma règle était bien
       servie au navigateur. On reprend le même préfixe d'ID — pas un !important.
       Et l'enveloppe prend TOUTE la place libre, le champ se centre dedans :
       avec un max-width sur l'enveloppe, la section en flex-end la collait à
       gauche (centre mesuré à 310 px pour un espace libre centré à 941 à 1920). */
    #ast-desktop-header .cg-search-toggle-wrap--desktop {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        display: flex;
        justify-content: center;
    }

    /* 🔒 LA LARGEUR LIBÉRÉE PAR LE CTA REVIENT ICI, et pas ailleurs. Le bouton
       occupait 118 px plus 14 px d'écart, soit 132 px : sans relever ce plafond,
       le retrait aurait creusé un vide au lieu d'élargir la recherche. 560 + 132. */
    #ast-desktop-header .cg-search-toggle--desktop {
        width: 100%;
        max-width: 692px;
        height: 42px;
        padding: 0 var(--cg-space-4);
        justify-content: flex-start;
        gap: 10px;
        border: 1px solid var(--cg-border);
        border-radius: var(--cg-radius-pill);
        background: var(--cg-bg-alt);
        color: var(--cg-text-muted);
        font-size: var(--cg-text-sm);
    }

    /* La loupe devient un vrai champ de recherche à l'œil — même mécanisme,
       même overlay, mais une cible à la mesure de ce qu'elle ouvre. */
    .cg-search-toggle--desktop {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 42px;
        padding: 0 var(--cg-space-4);
        border: 1px solid var(--cg-border);
        border-radius: var(--cg-radius-pill);
        background: var(--cg-bg-alt);
        color: var(--cg-text-muted);
        font-size: var(--cg-text-sm);
        text-align: left;
        cursor: pointer;
    }

    .cg-search-toggle--desktop::after {
        content: "Rechercher une race, un lieu, un pro…";
    }

    .cg-search-toggle--desktop:hover,
    .cg-search-toggle--desktop:focus-visible {
        border-color: var(--cg-border-strong);
        background: var(--cg-bg);
    }

    .cg-account__libelle {
        margin-left: 7px;
        font-size: var(--cg-text-xs);
        font-weight: 600;
        white-space: nowrap;
    }

    .cg-account-toggle {
        display: inline-flex;
        align-items: center;
        width: auto;
        padding-inline: 10px;
    }
}

/* 🔒 SOUS 921px, l'icône reste seule : c'est le MÊME seuil que le rail et que la
   barre au pouce. Trois seuils différents, c'est trois occasions de diverger. */
@media (max-width: 920px) {
    .cg-account__libelle {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* =========================================================
   8. BARRE BASSE AU POUCE
   ========================================================= */

.cg-nav-pouce {
    display: none;
}

@media (max-width: 920px) {
    .cg-nav-pouce {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--cg-z-flottant);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: calc(var(--cg-nav-pouce-h) + env(safe-area-inset-bottom, var(--cg-nav-haut)));
        /* 🔒 ZONE SÛRE iOS. Sans ce padding, la barre passe SOUS l'indicateur
           système des iPhone récents : le dernier rang de cibles devient à
           moitié intouchable. Invisible en émulation et sur Android — c'est
           précisément pour ça qu'il faut l'écrire sans attendre de le voir. */
        padding-bottom: env(safe-area-inset-bottom, var(--cg-nav-haut));
        background: var(--cg-bg);
        border-top: 1px solid var(--cg-border);
        box-shadow: 0 -10px 24px -20px rgba(0, 0, 0, 0.4);
    }

    .cg-nav-pouce__lien {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* 🔒 44px de cible tactile au minimum. La cellule fait 62px de haut et
           1/5 de la largeur d'écran, soit 78px à 390 : la contrainte est tenue
           par la grille, la règle ci-dessous la rend explicite. */
        min-width: var(--cg-cible-tactile);
        min-height: var(--cg-cible-tactile);
        padding: 0;
        border: 0;
        background: none;
        color: var(--cg-text-soft);
        font-size: 0.66rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .cg-nav-pouce__titre {
        line-height: 1.1;
    }

    .cg-nav-pouce__lien.est-courant {
        color: var(--cg-primary);
    }

    .cg-nav-pouce__ic {
        font-size: 1.15rem;
        line-height: 1;
    }

    .cg-nav-pouce__lien--centre {
        transform: translateY(-14px);
    }

    .cg-nav-pouce__lien--centre .cg-nav-pouce__ic {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 3px solid var(--cg-bg);
        background: var(--cg-accent);
        color: var(--cg-on-accent);
        box-shadow: 0 8px 18px -8px var(--cg-accent);
    }

    /* La barre flotte au-dessus du contenu : le pied de page doit pouvoir se
       lire en entier malgré elle. */
    .site {
        padding-bottom: calc(var(--cg-nav-pouce-h) + env(safe-area-inset-bottom, var(--cg-nav-haut)));
    }
}