/**
 * Bloc Menu — socle.
 *
 * ── L'API de personnalisation ──────────────────────────────────────────────
 *
 * Tout ce qui se règle se règle par une variable `--atb-menu-*`, redéfinissable
 * depuis le CSS personnalisé du bloc, une classe utilitaire ou une feuille de
 * site. Le but est qu'on puisse reskinner un menu sans toucher aux templates ni
 * réécrire de sélecteurs.
 *
 * Écrit à plat, sans imbrication `& {}` : cette feuille part sur le front, où
 * d'anciens Safari ont déjà coûté une barre de header à ce projet.
 */

.atb-menu {
    --atb-menu-gap: .25rem;
    --atb-menu-padding: .5rem .75rem;
    /* Zéro par défaut, à dessein : un rayon se demande, il ne s'impose pas — et
       il arrondissait les extrémités de la barre de soulignement de l'entrée
       active, qui doit être droite. `--atb-menu-radius` reste là pour en poser
       un quand on le veut. */
    --atb-menu-radius: 0;
    --atb-menu-color: var(--atb-secondary, #363c42);
    --atb-menu-color-hover: var(--atb-primary, #0099dd);
    --atb-menu-color-active: var(--atb-primary, #0099dd);
    --atb-menu-accent: var(--atb-primary, #0099dd);
    --atb-menu-font-size: 1rem;
    --atb-menu-font-weight: 500;
    --atb-menu-desc-size: .8125rem;
    --atb-menu-desc-color: var(--atb-grey, #6c7993);
    --atb-menu-icon-size: 1.15em;
    --atb-menu-underline: 2px;

    --atb-menu-panel-bg: #fff;
    --atb-menu-panel-radius: 6px;
    --atb-menu-panel-shadow: 0 10px 30px rgba(25, 39, 67, .14);
    --atb-menu-panel-padding: .5rem;
    --atb-menu-panel-width: 16rem;
    --atb-menu-panel-gap: .125rem;

    --atb-menu-mega-min: 190px;
    --atb-menu-mega-gap: 1.75rem;
    --atb-menu-mega-padding: 1.5rem;
    --atb-menu-mega-image-height: 120px;

    --atb-menu-branch-color: rgba(108, 121, 147, .35);
    --atb-menu-branch-width: 1px;
    --atb-menu-branch-indent: .85rem;
    --atb-menu-branch-offset: .75rem;

    --atb-menu-badge-bg: var(--atb-accent, #e92095);
    --atb-menu-badge-color: #fff;

    color: var(--atb-menu-color);
    font-size: var(--atb-menu-font-size);
    /* La graisse est posée ICI, pas sur le lien : déclarée sur le lien, elle
       battait une classe utilitaire mise sur l'entrée (`atb-font-bold` restait
       sans effet, mesuré à 500). Héritée, elle cède la place à toute règle plus
       proche — c'est ce qui rend `at_classes` réellement utile. */
    font-weight: var(--atb-menu-font-weight);
}

/* `!important` sur ces deux-là seulement, et c'est la convention déjà en place
   dans le builder (`.atb-list-simple`, `.atb-buttons-list`, `.atb-faq-list`…) :
   Divi impose ses puces depuis un sélecteur porteur d'ID, qu'aucune combinaison
   de classes ne peut battre. Mesuré ici : la liste calculait `list-style: disc`
   et `padding-left: 16px` alors que le reste de la règle s'appliquait. */
.atb-menu__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    gap: var(--atb-menu-gap);
}

.atb-menu__item {
    position: relative;
    margin: 0;
    list-style: none !important;
    display: flex;
    flex-direction: column;
}

/* La SURFACE d'une entrée : elle enveloppe le lien et son bouton de bascule, et
   c'est elle que les peaux colorent. Un parent cliquable a deux éléments
   (lien + bouton), un parent décoratif un seul : sans cette enveloppe, la
   pastille n'aurait pas la même taille de l'un à l'autre.

   `flex: 1` la fait remplir la hauteur de l'entrée — et comme la liste étire
   toutes ses entrées à la plus haute, toutes les pastilles d'un même menu
   finissent identiques, quel que soit le nombre de lignes de leur contenu. */
.atb-menu__row {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    border-radius: var(--atb-menu-radius);
    transition: background-color .15s ease;
}

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

/* ── L'entrée ──────────────────────────────────────────────────────────── */

.atb-menu__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: var(--atb-menu-padding);
    border-radius: var(--atb-menu-radius);
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.atb-menu__link:hover,
.atb-menu__link:focus-visible {
    color: var(--atb-menu-color-hover);
}

.atb-menu__link.is-current,
.atb-menu__link.is-ancestor {
    color: var(--atb-menu-color-active);
}

/* Un `<span>` (entrée sans lien et sans enfants) ne doit pas se donner des airs
   de cible cliquable. */
span.atb-menu__link {
    cursor: default;
}

.atb-menu__body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.atb-menu__label {
    display: block;
}

/* Icône seule : le libellé reste dans le DOM pour les lecteurs d'écran et pour
   la recherche du navigateur — le masquer avec `display: none` le retirerait
   des deux. */
.atb-menu__label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.atb-menu__desc {
    display: block;
    font-size: var(--atb-menu-desc-size);
    font-weight: 400;
    line-height: 1.35;
    color: var(--atb-menu-desc-color);
}

.atb-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: var(--atb-menu-icon-size);
    line-height: 1;
}

.atb-menu__icon svg,
.atb-menu__icon img {
    height: 1em;
    width: auto;
    display: block;
}

.atb-menu__badge {
    display: inline-block;
    align-self: flex-start;
    padding: .05em .45em;
    border-radius: 999px;
    background: var(--atb-menu-badge-bg);
    color: var(--atb-menu-badge-color);
    font-size: .6875em;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* Icône au-dessus du libellé. */
/* Icône au-dessus : la SURFACE bascule en colonne elle aussi. Sans cela, le
   bouton de bascule d'un parent cliquable restait à côté du lien (flèche à
   droite) alors que celui d'un parent décoratif passait dessous — deux entrées
   voisines, deux placements. */
/* `flex-start` et non `center` : une entrée sans sous-menu n'a pas de chevron,
   son contenu est donc plus court. Centré, il descendait de 6 px et la rangée
   d'icônes n'était plus alignée d'une entrée à l'autre. En partant du haut,
   toutes les icônes sont sur la même ligne et l'espace restant tombe en bas,
   là où les autres ont leur flèche. */
.atb-menu--icon-above .atb-menu__row {
    flex-direction: column;
    justify-content: flex-start;
}

.atb-menu--icon-above .atb-menu__link {
    flex-direction: column;
    gap: .3rem;
    text-align: center;
}

.atb-menu--icon-above .atb-menu__body {
    align-items: center;
}

/* La flèche seule sous le libellé n'a pas besoin du rembourrage complet d'une
   entrée : il doublerait la hauteur de la surface.

   Le `:not()` est indispensable : un bouton pleine largeur n'est pas une flèche
   ajoutée à côté d'un lien, il EST l'entrée. Lui retirer son rembourrage haut
   remontait tout son contenu de 2 px par rapport à l'entrée voisine. */
.atb-menu--icon-above .atb-menu__row > .atb-menu__toggle:not(.atb-menu__toggle--full) {
    padding-top: 0;
    padding-bottom: .25rem;
}

/* ── Bascule et indicateur ─────────────────────────────────────────────── */

.atb-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: var(--atb-menu-padding);
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: var(--atb-menu-radius);
}

/* Quand l'entrée n'a pas de lien, le bouton EST l'entrée : il reprend sa mise
   en forme au lieu de s'ajouter à côté. */
/* `flex-start`, et la flèche se cale seule à droite par `margin-left: auto`.
   Avec `space-between`, les trois enfants du bouton (icône, corps, flèche) se
   répartissaient sur toute la largeur : le libellé d'un parent décoratif
   partait au milieu, alors que celui d'un parent cliquable restait collé à son
   icône. Deux entrées voisines, deux alignements. */
.atb-menu__toggle--full {
    width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.atb-menu__toggle--full > .atb-menu__indicator {
    margin-left: auto;
}

/* En colonne, deux réglages du cas horizontal changent de sens et doivent être
   repris :

   · `margin-left: auto` jetterait la flèche contre le bord droit ;
   · `justify-content: flex-start` ne cale plus à gauche mais EN HAUT — le
     contenu du bouton se collait au plafond de l'entrée et toute la hauteur
     restante tombait sous la flèche, alors que l'entrée voisine (lien + bouton
     séparé) était centrée par la surface. */
/* On REPRODUIT la structure du voisin plutôt que de compenser au pixel : chez un
   parent cliquable, le lien occupe le haut et la flèche se pose en bas. Le
   bouton pleine largeur fait donc pareil — contenu au départ du haut, flèche
   repoussée en bas par `margin-top: auto` — avec les mêmes rembourrages. Les
   deux entrées s'alignent alors par construction, et non par un réglage qui
   dériverait à la première retouche. */
.atb-menu--icon-above .atb-menu__toggle--full {
    justify-content: flex-start;
    padding-bottom: .25rem;
}

.atb-menu--icon-above .atb-menu__toggle--full > .atb-menu__indicator {
    margin-top: auto;
    margin-left: 0;
    align-self: center;
}

.atb-menu__toggle-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.atb-menu__indicator {
    display: inline-block;
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-.1em, -.1em);
    transition: transform .2s ease;
}

.atb-menu__toggle[aria-expanded="true"] .atb-menu__indicator {
    transform: rotate(-135deg) translate(-.15em, -.15em);
}

.atb-menu--plus .atb-menu__indicator {
    /* réservé au variant d'indicateur « plus / moins », posé par le bloc */
    border: 0;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .atb-menu__link,
    .atb-menu__indicator {
        transition: none;
    }
}

/* ── Au doigt ──────────────────────────────────────────────────────────────

   Le motif « lien + bouton séparé » est le BON motif sur tactile : taper le
   libellé mène à la page, taper la flèche ouvre le sous-menu. Il évite le
   travers classique du menu au survol, où le premier appui navigue avant qu'on
   ait pu voir le sous-menu — c'est d'ailleurs pour ça que le survol n'est
   branché que sous `(hover: hover) and (pointer: fine)`.

   Ce qui manque, c'est la TAILLE. Mesuré : 32 × 24 px en barre et en accordéon,
   32 × 12 en icône-au-dessus — sous le minimum normatif de 24 × 24 (WCAG 2.5.8).
   44 px est le confort réel. */
@media (pointer: coarse) {
    .atb-menu__toggle {
        min-width: 44px;
        min-height: 44px;
    }

    /* En icône-au-dessus, la flèche est SOUS le libellé : lui donner 44 px de
       haut doublerait la hauteur de chaque entrée. On l'élargit plutôt à toute
       la ligne, et on tient le minimum normatif en hauteur. */
    .atb-menu--icon-above .atb-menu__toggle {
        min-height: 24px;
        width: 100%;
    }
}

/* ── Rendu « nav » : barre horizontale, enfants en panneau ─────────────── */

/* `stretch` et non `center` : c'est lui qui donne à toutes les entrées la
   hauteur de la plus haute. Avec `center`, chacune se dimensionnait sur son
   propre contenu et les pastilles étaient dépareillées. */
.atb-menu--nav > .atb-menu__list {
    flex-wrap: wrap;
    align-items: stretch;
}

/* Le socle d'un panneau FLOTTANT, commun aux deux rendus qui en ont un. Les
   déclarer ici plutôt que sous `.atb-menu--nav` évite l'oubli constaté en
   ajoutant le méga menu : son panneau restait dans le flux, sans fond ni ombre,
   et se dimensionnait sur son contenu. Nav et méga ne diffèrent ensuite que par
   leur GÉOMÉTRIE. */
.atb-menu--nav .atb-menu__panel,
.atb-menu--mega .atb-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    padding: var(--atb-menu-panel-padding);
    background: var(--atb-menu-panel-bg);
    border-radius: var(--atb-menu-panel-radius);
    box-shadow: var(--atb-menu-panel-shadow);
}

.atb-menu--nav .atb-menu__panel {
    min-width: var(--atb-menu-panel-width);
}

.atb-menu--nav .atb-menu__panel .atb-menu__list {
    flex-direction: column;
    gap: var(--atb-menu-panel-gap);
}

/* Un sous-sous-menu s'ouvre sur le côté, pas en dessous.
   `100%` seul le ferait démarrer au bord de son `<li>`, donc À L'INTÉRIEUR du
   rembourrage du panneau parent : les deux panneaux se chevauchaient de 8 px et
   la flèche du parent passait dessous. On ajoute le rembourrage pour tomber
   exactement sur son bord extérieur. */
.atb-menu--nav .atb-menu__panel .atb-menu__panel {
    top: 0;
    left: calc(100% + var(--atb-menu-panel-padding));
}

/* ── Repositionnement quand le panneau ne tient pas ────────────────────────
   Les classes sont posées par le JavaScript, qui essaie chaque position dans
   l'ordre et garde la première où le panneau tient — un `position-try` fait à
   la main, que l'ancrage CSS remplacera d'une déclaration le jour où il sera
   partout (58 % de support complet au 10/09/2026).

   L'ORDRE DE CES RÈGLES COMPTE : `.is-below` et `.is-flipped` ont la même
   spécificité, c'est la dernière écrite qui gagne. Chaque règle pose donc
   `left` ET `right`, pour qu'aucune combinaison ne dépende de l'ordre. */

/* 2. de l'autre côté */
.atb-menu--nav .atb-menu__panel.is-flipped {
    left: auto;
    right: 0;
}

.atb-menu--nav .atb-menu__panel .atb-menu__panel.is-flipped {
    left: auto;
    right: calc(100% + var(--atb-menu-panel-padding));
}

/* 3. sous l'entrée — le repli qui sauve un sous-panneau trop large pour les deux
      côtés : là, il retrouve toute la largeur de l'écran. Le `z-index` est
      indispensable, sinon les entrées suivantes du panneau parent, plus loin
      dans le DOM, se peindraient par-dessus. */
.atb-menu--nav .atb-menu__panel .atb-menu__panel.is-below {
    top: calc(100% + var(--atb-menu-panel-gap));
    left: 0;
    right: auto;
    z-index: 1;
}

/* 4. sous l'entrée, aligné à droite */
.atb-menu--nav .atb-menu__panel .atb-menu__panel.is-below.is-flipped {
    top: calc(100% + var(--atb-menu-panel-gap));
    left: auto;
    right: 0;
    z-index: 1;
}

/* L'ancrage CSS n'est pas requis : il n'apporte que le RETOURNEMENT automatique
   quand le panneau déborderait du viewport. Support incomplet chez Firefox à ce
   jour, d'où l'enrichissement sous `@supports` plutôt qu'une dépendance. */
@supports (anchor-name: --a) and (position-area: bottom) {
    .atb-menu--nav .atb-menu__item.has-children {
        anchor-name: var(--atb-menu-anchor, none);
    }
}

/* ── Rendu « méga menu » : panneau pleine largeur ──────────────────────── */

.atb-menu--mega {
    position: relative;
}

.atb-menu--mega > .atb-menu__list {
    flex-wrap: wrap;
    align-items: stretch;
}

/* `static` sur l'entrée, `relative` sur le menu : c'est TOUT le mécanisme du
   méga menu. Le panneau, positionné en absolu, résout alors ses décalages
   contre le menu entier au lieu de son seul `<li>` — il occupe la largeur de la
   barre plutôt que celle d'un libellé.

   Conséquence à connaître : il n'y a plus de cascade à replacer, donc plus rien
   à retourner. Le calcul de repli s'exécute quand même et ne trouve aucun
   débordement, ce qui est le résultat attendu. */
.atb-menu--mega .atb-menu__item {
    position: static;
}

.atb-menu--mega .atb-menu__mega {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    padding: var(--atb-menu-mega-padding, 1.5rem);
}

/* Panneau promu au calque supérieur : ses coordonnées sont posées en ligne par
   le JavaScript, en pixels d'écran. On neutralise les styles par défaut du
   navigateur pour un `popover` (bordure, marge automatique, cadrage centré) et
   on repasse en `fixed` — `absolute` n'aurait plus de repère, le calque
   supérieur n'ayant pas d'ancêtre positionné. */
/* `overflow: auto` plutôt que `visible` : la hauteur disponible est posée en
   ligne par le JavaScript (cf. `ancrer()`), et un panneau plus haut que l'écran
   doit défiler en lui-même — sinon son bas est inatteignable. */
.atb-menu__mega:popover-open {
    position: fixed;
    right: auto;
    margin: 0;
    border: 0;
    overflow: auto;
    overscroll-behavior: contain;
    max-width: none;
}

.atb-menu__mega-grid {
    display: grid;
    /* Sans nombre imposé, la grille se remplit d'elle-même : autant de colonnes
       que la largeur en permet, jamais plus étroites que le minimum. */
    grid-template-columns: repeat(
        var(--atb-menu-mega-cols, auto-fit),
        minmax(var(--atb-menu-mega-min, 190px), 1fr)
    );
    gap: var(--atb-menu-mega-gap, 1.75rem);
    align-items: start;
}

.atb-menu__mega-col {
    min-width: 0;
}

/* Hauteur BORNÉE, et c'est indispensable : rien n'empêche un éditeur de choisir
   une image en portrait — un scan de document, dans notre test. En `height:
   auto`, la colonne devenait démesurée et le panneau descendait sur trois écrans.
   `cover` recadre au lieu de déformer. */
.atb-menu__mega-image {
    display: block;
    width: 100%;
    height: var(--atb-menu-mega-image-height, 120px);
    object-fit: cover;
    margin-bottom: .6rem;
    border-radius: var(--atb-menu-mega-image-radius, 4px);
}

/* L'en-tête de colonne se distingue du reste par la graisse et un filet, pas par
   une couleur : la couleur reste réservée à l'état actif. */
.atb-menu__mega-head {
    font-weight: 700;
    margin-bottom: .35rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--atb-menu-branch-color, rgba(108, 121, 147, .35));
}

.atb-menu__mega-col .atb-menu__list {
    flex-direction: column;
    gap: var(--atb-menu-panel-gap);
}

/* Une colonne mise en avant se détache par un fond, sans quitter la grille. */
.atb-menu__mega-col.is-highlight {
    padding: var(--atb-menu-mega-gap, 1.75rem) calc(var(--atb-menu-mega-gap, 1.75rem) / 2);
    margin: calc(var(--atb-menu-mega-gap, 1.75rem) * -1) 0;
    background: var(--atb-menu-mega-highlight-bg, rgba(108, 121, 147, .08));
    border-radius: var(--atb-menu-mega-image-radius, 4px);
}

/* ── Rendu « niveau par niveau » ───────────────────────────────────────── */

/* Accrochées à la STRUCTURE (`.atb-menu__drill`) et non au nom du rendu : le
   tiroir embarque la même glissière sous un autre nom de rendu, et sous
   `.atb-menu--drilldown` ces règles ne s'y appliquaient pas — le menu s'y
   affichait à l'horizontale et débordait du panneau. Un rendu qui réutilise une
   structure doit en hériter la mise en forme sans avoir à se déclarer. */
.atb-menu__drill .atb-menu__list {
    flex-direction: column;
    gap: var(--atb-menu-gap);
}

.atb-menu__drill .atb-menu__row {
    justify-content: space-between;
}

.atb-menu__drill .atb-menu__row > .atb-menu__link {
    flex: 1 1 auto;
}

/* La fenêtre : elle borne ce qu'on voit et anime son changement de hauteur. */
.atb-menu__drill {
    position: relative;
    overflow: hidden;
    transition: height .28s ease;
}

/* Le niveau 1 reste DANS LE FLUX : c'est lui qui donne au conteneur sa hauteur
   de départ, avant que le JavaScript n'ait rien mesuré. Sans cela, un menu
   s'afficherait sur zéro pixel le temps du chargement. */
.atb-menu__drill-panel[data-atb-drill-root] {
    position: relative;
    transform: none;
}

/* Les niveaux suivants se rangent à droite, hors champ. `visibility` et non
   `display: none` : une boîte absente ne peut pas glisser — et `visibility`
   retire tout autant de l'ordre de tabulation et de l'arbre d'accessibilité,
   qui est le seul point qui comptait. */
.atb-menu__drill-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--atb-menu-drill-bg, transparent);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s .28s;
}

.atb-menu__drill-panel.is-active {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s 0s;
}

/* Les niveaux déjà traversés sortent par la GAUCHE : c'est le mouvement attendu
   d'un fil d'Ariane. Les panneaux étant FRÈRES (cf. le template), déplacer
   celui-ci n'emporte plus rien avec lui — c'était impossible tant qu'ils étaient
   imbriqués. */
.atb-menu__drill-panel.is-past {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s .28s;
}

@media (prefers-reduced-motion: reduce) {
    .atb-menu__drill,
    .atb-menu__drill-panel {
        transition: none;
    }
}

.atb-menu__drill-back {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: var(--atb-menu-padding);
    margin-bottom: var(--atb-menu-gap);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--atb-menu-branch-color, rgba(108, 121, 147, .35));
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    border-radius: var(--atb-menu-radius);
}

.atb-menu__drill-back:hover,
.atb-menu__drill-back:focus-visible {
    color: var(--atb-menu-color-hover);
}

/* Même chevron que l'indicateur, tourné vers la gauche. */
.atb-menu__drill-back-arrow {
    display: inline-block;
    width: .5em;
    height: .5em;
    flex: none;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ── Rendu « accordéon » : vertical, panneaux EN FLUX ──────────────────── */

.atb-menu--accordion .atb-menu__list {
    flex-direction: column;
    gap: var(--atb-menu-gap);
}

/* Le libellé prend la place, la flèche reste calée à droite : c'est la lecture
   attendue d'un menu latéral, où l'œil descend la colonne des chevrons. */
.atb-menu--accordion .atb-menu__row {
    justify-content: space-between;
}

.atb-menu--accordion .atb-menu__row > .atb-menu__link {
    flex: 1 1 auto;
}

/* Ici le panneau POUSSE le contenu — il n'est pas positionné en absolu comme
   celui du rendu « nav ». Le filet à gauche rattache visuellement les enfants à
   leur parent, ce que la seule indentation ne fait qu'à moitié. */
.atb-menu--accordion .atb-menu__panel {
    position: static;
    padding: var(--atb-menu-gap) 0 0 var(--atb-menu-branch-indent, .85rem);
    margin-left: var(--atb-menu-branch-offset, .75rem);
    border-left: var(--atb-menu-branch-width, 1px) solid
        var(--atb-menu-branch-color, rgba(108, 121, 147, .35));
    background: none;
    box-shadow: none;
    min-width: 0;
}

/* Dans un accordéon, la flèche indique un pli, pas une direction : fermée elle
   pointe vers le bas, ouverte vers le haut — même convention que le rendu nav,
   héritée telle quelle. */

/* ── Rendu « list » : vertical, tout visible ───────────────────────────── */

.atb-menu--list .atb-menu__list {
    flex-direction: column;
    gap: var(--atb-menu-gap);
}

.atb-menu--list .atb-menu__list .atb-menu__list {
    margin-top: var(--atb-menu-gap);
    padding-left: 1rem !important;   /* rétablit l'indentation, que le reset annule */
}

/* ── Peaux ─────────────────────────────────────────────────────────────── */

/* Toutes les peaux visent `.atb-menu__row`, jamais le lien : c'est la seule
   façon qu'un parent cliquable et un parent décoratif se ressemblent. Le survol
   aussi — il couvre alors le lien ET son bouton, au lieu de clignoter quand la
   souris passe de l'un à l'autre. */
.atb-menu--underline .atb-menu__row.is-current,
.atb-menu--underline .atb-menu__row.is-ancestor {
    box-shadow: inset 0 calc(var(--atb-menu-underline) * -1) 0 0 var(--atb-menu-accent);
}

/* La peau « pastilles » pose SON rayon — mais modéré.
   `999px` ne va qu'aux lignes basses : dès qu'une entrée grandit (icône
   au-dessus, description, deux lignes de libellé), la « pastille » devient un
   ovale. Mesuré sur ce menu : 88 × 77 px, soit une capsule. Un rayon fixe reste
   lisible à toutes les hauteurs.
   `--atb-menu-pill-radius: 999px` restitue la capsule pour un menu d'une seule
   ligne, `0` la rend carrée. */
.atb-menu--pills .atb-menu__row {
    border-radius: var(--atb-menu-pill-radius, 6px);
}

.atb-menu--pills .atb-menu__row.is-current,
.atb-menu--pills .atb-menu__row.is-ancestor {
    background: color-mix(in srgb, var(--atb-menu-accent) 12%, transparent);
}

.atb-menu--pills .atb-menu__row:hover {
    background: color-mix(in srgb, var(--atb-menu-accent) 8%, transparent);
}

.atb-menu--solid .atb-menu__row.is-current,
.atb-menu--solid .atb-menu__row.is-ancestor {
    background: var(--atb-menu-accent);
    color: #fff;
}

/* `color-mix()` n'est pas partout : sans ce repli, une peau « pastilles » n'a
   aucun état actif visible sur un navigateur ancien. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .atb-menu--pills .atb-menu__row.is-current,
    .atb-menu--pills .atb-menu__row.is-ancestor {
        background: rgba(0, 0, 0, .06);
    }
}

.atb-menu__link.is-highlight {
    font-weight: 700;
}