/*
 * En-tête — Figma nodes 2435:24470 (les deux états) et 2098:18833 (les mega menus).
 *
 * Cadrage de la maquette : bandeau d'annonce de 42, barre de 163 avec 64 de padding tout autour,
 * logo rond de 203 débordant sous la barre. À l'état réduit : 107 de haut, monogramme de 75 et
 * une ombre portée.
 *
 * Les panneaux de mega menu reprennent le retrait de 64 du pied de page : ils font 1792 de large
 * sur une page de 1920.
 */

/* ---- Bandeau d'annonce ---- */

.site-announce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
    /* 42 de haut dans la maquette, soit 8 de padding autour d'un bouton de 24. */
    padding: var(--space-compact) var(--space-m);
    background-color: var(--color-primary);
}

.site-announce__text {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-text-invert);
}

/* ---- Barre de menu ---- */

/*
 * Réglages partagés par la barre et par la compensation de hauteur (voir plus bas). Posés sur
 * :root et non sur la barre : #main est son FRÈRE, il n'hériterait de rien.
 */
:root {
    /* 32 et non les 64 de la maquette : à pleine largeur, une barre de 163px écrasait le haut de
       page. C'était déjà le réglage sous 1400px, il vaut désormais partout. */
    --header-pad: var(--space-bloc);
    /*
     * Les deux logos restent hors du flux dans les deux états : la ligne de la barre garde ses
     * 39px et c'est le padding seul qui fait la hauteur (24 + 39 + 24 à l'état réduit). Avant,
     * le monogramme entrait dans le flux à l'état réduit : la hauteur de
     * la barre changeait d'un coup, en plein milieu de l'animation du padding — c'était
     * exactement le ressaut visible.
     */
    --header-pad-stuck: var(--space-list);
    /* Une seule durée et une seule courbe pour tout ce qui bouge entre les deux états : la barre,
       les logos, et la compensation. */
    --header-dur: 320ms;
    --header-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__sentinel {
    height: 1px;
}

.site-header {
    position: sticky;
    top: 0;
    /* Au-dessus du contenu, et au-dessus des panneaux ouverts d'une autre section. */
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--header-pad);
    background-color: var(--color-secondary-200);
    transition: padding var(--header-dur) var(--header-ease), box-shadow var(--header-dur) var(--header-ease);
}

/* La barre d'administration de WordPress est fixe : sans ce décalage, l'en-tête collant passe
   dessous en back-office. */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header.is-stuck {
    padding-block: var(--header-pad-stuck);
    /* Ombre de la maquette : 0 10px 7.5px rgba(0,0,0,.1) et 0 4px 3px rgba(0,0,0,.05). */
    box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.05);
}

/*
 * COMPENSATION DU RACCOURCISSEMENT DE LA BARRE
 *
 * L'en-tête est en position sticky : il occupe donc sa place dans le flux, et perdre 60px de
 * hauteur raccourcissait le document d'autant — tout le contenu en dessous remontait d'un coup au
 * moment du basculement. Mesuré : scrollHeight 2655 → 2595.
 *
 * Le <main> reprend exactement ce que la barre abandonne, avec la même durée et la même courbe :
 * la somme est nulle à chaque instant, et rien ne bouge plus sous la barre. Le calcul est dérivé
 * des deux paddings, il suit donc les paliers responsives sans valeur à recopier.
 *
 * Volontairement PAS de position: fixed pour la barre : le bandeau d'annonce doit défiler et
 * disparaître AVANT que la barre ne se colle, ce que seul sticky sait faire. La compensation ne
 * peut pas non plus vivre sur le repère de défilement : le faire grandir le ramènerait dans le
 * champ de l'observateur, qui rebasculerait aussitôt — un aller-retour sans fin au seuil.
 */
.site-header.is-stuck ~ #main {
    padding-block-start: calc(2 * (var(--header-pad) - var(--header-pad-stuck)));
}

#main {
    transition: padding-block-start var(--header-dur) var(--header-ease);
}

/* ---- Bouton du menu mobile ---- */

/* Absent au-dessus de 1100 : la barre complète tient, il n'aurait rien à ouvrir. */
.site-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    /* 44px de cible tactile pour une icône de 24. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xxxs);
    background: none;
    color: var(--color-secondary-900);
    cursor: pointer;
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.site-header__burger:hover,
.site-header__burger:focus-visible {
    background-color: var(--color-secondary);
}

/* ---- Entrées du menu ---- */

.site-header__nav {
    /* La navigation et le bloc de droite se partagent la place, ce qui laisse le logo
       exactement au centre de la barre. */
    flex: 1 1 0;
    min-width: 0;
}

.site-header__menu {
    display: flex;
    align-items: center;
    gap: var(--space-list);
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Les entrées SONT le bouton Secondary / md / Ghost du design system : tout l'habillage — fond au
 * survol, chevron qui glisse, paddings qui se compensent — vient du partial « button ». Il ne
 * reste ici que ce qui est propre au menu.
 */

/* Les capitales viennent du CSS et non du texte saisi : un lecteur d'écran épellerait
   « NOS UNIVERS » écrit en dur, et le client garde une casse normale dans son menu. */
.site-header__link {
    text-transform: uppercase;
}

/* Le marqueur natif du <summary> : le chevron du bouton le remplace. */
summary.site-header__link {
    list-style: none;
}

summary.site-header__link::-webkit-details-marker {
    display: none;
}

/*
 * Panneau ouvert = état actif du bouton. PHP ne peut pas le savoir (c'est [open] qui le dit) et
 * le poser en JavaScript le perdrait sans script : les trois déclarations de « button--active »
 * sont donc reprises ici, avec les MÊMES variables — elles ne peuvent pas dériver en valeur.
 */
.site-header__panel[open] > .site-header__link {
    padding-inline: var(--button-padding-inline-start-hover) var(--button-padding-inline-end-hover);
    background-color: var(--color-secondary-300);
}

.site-header__panel[open] > .site-header__link .button__icon {
    left: var(--button-icon-offset-hover);
}

/* ---- Panneau de mega menu ---- */

.site-header__panel {
    /* Le panneau se positionne par rapport à la BARRE, pas par rapport à l'entrée : il traverse
       toute la largeur. Le <details> reste donc en position statique. */
    position: static;
}

/*
 * ANIMATION D'OUVERTURE ET DE FERMETURE
 *
 * Un <details> masque son contenu d'un coup : il n'y a normalement rien à animer, et surtout rien
 * à la fermeture puisque le contenu disparaît avant d'avoir pu s'effacer. Le pseudo-élément
 * ::details-content lève exactement ce problème — « content-visibility » y devient une propriété
 * transitionnable grâce à « allow-discrete », qui retarde la bascule jusqu'à la fin du fondu.
 *
 * Amélioration progressive stricte : un navigateur qui ignore ::details-content ignore ces deux
 * règles, garde le masquage natif, et le panneau s'ouvre sans fondu. Rien ne peut rester invisible.
 */
.site-header__panel::details-content {
    content-visibility: hidden;
    transition: content-visibility 200ms allow-discrete;
}

.site-header__panel[open]::details-content {
    content-visibility: visible;
}

.site-header__mega {
    position: absolute;
    top: 100%;
    /* Le fondu et le glissement vivent sur le panneau lui-même, pas sur ::details-content : un
       transform sur le pseudo en ferait le bloc de référence du panneau en position absolue, qui
       cesserait alors de traverser toute la largeur. */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
    /* 64 de retrait de chaque côté, comme le pied de page. */
    left: var(--space-hero);
    right: var(--space-hero);
    /* 20 de padding dans la maquette. */
    padding: var(--space-l);
    background-color: var(--color-secondary-200);
    /* Ni rayon ni ombre portée : le panneau prolonge la barre à plat. L'ombre de l'état réduit est
       sur la BARRE et sur elle seule. Deux filets le détachent, en haut et en bas (node 2098:3749). */
    border-block: 1px solid var(--color-secondary-500);
}

.site-header__panel[open] > .site-header__mega {
    opacity: 1;
    transform: none;
}

.site-header__mega-list {
    display: grid;
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cartes verticales : 278,67 de large dans la maquette, autant de colonnes qu'il y a de
   cartes. */
.site-header__mega--cards .site-header__mega-list {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Cartes horizontales : 550 de large, trois par rangée. */
.site-header__mega--bands .site-header__mega-list {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    /* 51 dans la maquette : c'est le reste d'un espacement automatique entre trois colonnes
       égales, pas une valeur du système. On prend le pas le plus proche. */
    gap: var(--space-xl);
}

/* Actualités : trois articles et la tuile « Voir tous les articles », à parts égales. */
.site-header__mega--news .site-header__mega-list {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-list);
}

/* ---- Carte d'un panneau ---- */

/*
 * AUCUN FOND SUR LES CARTES
 *
 * La maquette (node 2098:3749) les pose directement sur le beige du panneau : ni aplat, ni cadre.
 * Le retour au survol passe donc par le titre, comme sur les fiches d'actualité du site — pas par
 * un fond clair, qui ferait apparaître des rectangles blancs que le dessin ne prévoit pas.
 */
.site-header__card {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.site-header__card {
    border-radius: var(--radius-xxs);
    transition: background-color var(--hover-dur) var(--hover-ease);
}

/*
 * TOUTE LA CARTE EST CLIQUABLE, ET ÇA SE VOIT
 *
 * Le « Découvrir » n'est qu'un habillage : c'est la carte entière qui porte le lien. Il faut donc
 * que la carte réagisse, sinon seul le bouton semble actif. La teinte reprend celle des fiches
 * d'actualité du site (primary-alpha-10 + titre souligné), plutôt qu'un aplat clair qui
 * ramènerait le fond blanc que la maquette ne veut pas.
 */
.site-header__card:hover,
.site-header__card:focus-visible {
    background-color: var(--color-primary-alpha-10);
}

/* Le trait est toujours présent, transparent au repos : c'est sa couleur qui apparaît, et une
   couleur, ça se transitionne. Un text-decoration ne s'anime pas. */
.site-header__card-title {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--hover-dur) var(--hover-ease);
}

.site-header__card:hover .site-header__card-title,
.site-header__card:focus-visible .site-header__card-title {
    text-decoration-color: currentColor;
}

/*
 * Le bouton de la carte est un <span> : il ne peut pas être survolé pour son propre compte. C'est
 * donc le survol de la CARTE qui déclenche son état — mêmes variables que :hover dans l'atome,
 * elles ne peuvent pas dériver.
 */
.site-header__card:hover .button,
.site-header__card:focus-visible .button {
    padding-inline: var(--button-padding-inline-start-hover) var(--button-padding-inline-end-hover);
}

.site-header__card:hover .button__icon,
.site-header__card:focus-visible .button__icon {
    left: var(--button-icon-offset-hover);
}

.site-header__card-media {
    overflow: hidden;
    border-radius: var(--radius-xxs);
}

.site-header__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-header__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-m);
    justify-content: space-between;
    /* Le bouton est aligné à droite dans la maquette, le texte reste à gauche. */
    align-items: flex-end;
}

.site-header__card-text {
    width: 100%;
}

.site-header__card-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
}

.site-header__card-title {
    font-weight: 700;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-secondary-900);
}

.site-header__card-desc {
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-700);
    /* Deux lignes en carte verticale, trois en carte horizontale : au-delà, le panneau
       s'allongerait sans rien apprendre de plus. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Carte verticale : image de 278,67 x 92 en haut, contenu de 20 x 28. */
.site-header__mega--cards .site-header__card {
    flex-direction: column;
}

.site-header__mega--cards .site-header__card-media {
    /* Toute la largeur de la carte, comme le cadrage fourni : sans ça, le bloc se cale sur la
       largeur naturelle de l'image dans une carte centrée. */
    width: 100%;
    height: 92px;
}

.site-header__mega--cards .site-header__card-body {
    padding: 28px var(--space-l) var(--space-l);
}

/* ---- Carte d'actualité du panneau — node Figma 2128:1226 ---- */

/*
 * Celles-ci ont un CADRE, contrairement aux cartes horizontales : filet secondary-300, rayon 4,
 * 16 de padding, et trois blocs espacés de 24 — visuel, titre, pied.
 */
.site-header__mega--news .site-header__card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-list);
    padding: var(--space-m);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-xxs);
}

.site-header__mega--news .site-header__card-media {
    /* 100 de haut dans la maquette, sur toute la largeur de la carte. */
    width: 100%;
    height: 100px;
    border-radius: var(--radius-xxxs);
}

.site-header__mega--news .site-header__card-body {
    /* Le corps enchaîne le titre puis le pied, alignés à gauche : pas de bouton à pousser à
       droite ici, c'est le pied qui s'en charge. */
    width: 100%;
    gap: var(--space-list);
    align-items: stretch;
}

.site-header__card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-compact);
    width: 100%;
    /* Date et temps de lecture en secondary-900, comme le titre. */
    color: var(--color-secondary-900);
}

/*
 * Tuile « Voir tous les articles » : un aplat beige avec son libellé centré, comme la maquette.
 * C'est une carte du même rang que les autres, donc elle prend la même place dans la grille.
 */
.site-header__card--all {
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-xxs);
    background-color: var(--color-secondary-300);
    color: var(--color-secondary-900);
    text-align: center;
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.site-header__card--all:hover,
.site-header__card--all:focus-visible {
    background-color: var(--color-secondary-400);
}

/* Carte horizontale : image de 200 x 184 à gauche, contenu à 24 d'écart, bouton aligné à droite. */
.site-header__mega--bands .site-header__card {
    gap: var(--space-list);
}

.site-header__mega--bands .site-header__card-media {
    flex: none;
    width: 200px;
    height: 184px;
}

.site-header__mega--bands .site-header__card-body {
    /* Aucun padding : les 20 du panneau et l'écart de 24 suffisent, la maquette n'en met pas. */
    gap: var(--space-m);
    align-items: flex-end;
}

.site-header__mega--bands .site-header__card-desc {
    -webkit-line-clamp: 3;
}

/* ---- Logo ---- */

.site-header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/*
 * LES DEUX LOGOS SONT LE MÊME OBJET QUI SE RÉDUIT
 *
 * Médaillon et monogramme sont tous deux hors du flux, centrés sur la barre et superposés au
 * pixel : le médaillon se réduit jusqu'à la taille exacte du monogramme (75/140) pendant que le
 * monogramme part de la taille du médaillon (140/75) pour revenir à la sienne. À chaque instant,
 * les deux images ont la même taille et la même position — l'œil ne voit donc pas deux visuels
 * qui se croisent, mais un seul qui rétrécit.
 *
 * Ils partagent la durée et la courbe de la barre (--header-dur / --header-ease) : c'est ce qui
 * évite que chaque morceau parte à son propre rythme.
 */
.site-header__logo-full,
.site-header__logo-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    height: auto;
    transition: opacity var(--header-dur) var(--header-ease), transform var(--header-dur) var(--header-ease);
}

/* 203 dans la maquette, ramené à 140 avec la barre ; son centre est 28px SOUS celui de la barre :
   le médaillon déborde volontairement. */
.site-header__logo-full {
    width: 140px;
    transform: translate(-50%, calc(-50% + 28px));
}

.site-header__logo-mark {
    /* 75 dans la maquette. Il démarre à la taille et à la place du médaillon. */
    width: 75px;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 28px)) scale(calc(140 / 75));
}

.site-header.is-stuck .site-header__logo-full {
    opacity: 0;
    /* Converge sur la boîte exacte du monogramme. */
    transform: translate(-50%, -50%) scale(calc(75 / 140));
    /* Un médaillon qui déborde sous une barre collante recouvrirait le contenu et
       capterait les clics. */
    pointer-events: none;
}

.site-header.is-stuck .site-header__logo-mark {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ---- Bloc de droite ---- */

.site-header__aside {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xl);
    min-width: 0;
}

.site-header__search {
    display: flex;
    align-items: center;
    gap: var(--space-compact);
    padding: var(--space-compact) var(--space-m) var(--space-compact) var(--space-compact);
    border: 1px solid var(--color-neutral-600);
    border-radius: var(--radius-full);
}

.site-header__search-label {
    display: flex;
    align-items: center;
    color: var(--color-neutral-600);
}

.site-header__search-input {
    width: 8rem;
    border: 0;
    background: none;
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    /*
     * Interlignage serré et non le 1,5 du dessin : à 1,5 la pilule fait 44 de haut, dépasse les
     * boutons voisins de 9px et pousse toute la barre à 172 au lieu des 163 de la maquette. La
     * maquette dessine bien la pilule et les boutons à la même hauteur.
     */
    line-height: var(--line-height-tight);
    color: var(--color-primary-950);
}

/* La maquette met le texte de substitution en neutral-300 : trop clair pour un vrai contenu,
   c'est un placeholder, pas une valeur. */
.site-header__search-input::placeholder {
    color: var(--color-neutral-600);
    opacity: 1;
}

.site-header__search-input:focus {
    outline: none;
}

/* L'anneau de focus passe sur le champ entier plutôt que sur l'input nu, sinon il se dessine à
   l'intérieur de la pilule. */
.site-header__search:focus-within {
    outline: 2px solid var(--color-secondary-400);
    outline-offset: 2px;
}

.site-header__cta {
    display: flex;
    align-items: center;
    gap: var(--space-list);
}

/* ---- Adaptations ---- */

@media (max-width: 1400px) {
    .site-header {
        gap: var(--space-bloc);
    }

    .site-header__aside {
        gap: var(--space-list);
    }

    .site-header__mega {
        left: var(--space-bloc);
        right: var(--space-bloc);
    }

    .site-header__search-input {
        width: 6rem;
    }
}

@media (max-width: 1100px) {
    /*
     * Sous cette largeur, les quatre entrées, le médaillon, la recherche et les deux boutons ne
     * tiennent plus sur une ligne : la navigation passe dans le menu mobile et le bouton burger
     * prend sa place.
     */
    .site-header {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .site-header__burger {
        display: flex;
    }

    .site-header__nav {
        display: none;
    }

    .site-header__logo-full {
        position: static;
        width: 96px;
        transform: none;
    }

    .site-header__logo-mark {
        display: none;
    }

    /* Le médaillon est revenu dans le flux : ni réduction ni recentrage à lui appliquer, sinon il
       partirait de travers à l'état réduit. */
    .site-header.is-stuck .site-header__logo-full {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

@media (max-width: 768px) {
    :root {
        --header-pad: var(--space-m);
        --header-pad-stuck: var(--space-s);
    }

    .site-header {
        gap: var(--space-m);
    }

    .site-header__mega {
        left: var(--space-m);
        right: var(--space-m);
        padding: var(--space-m);
    }

    /*
     * Burger, médaillon, recherche et deux boutons ne tiennent pas sur 390px : le bloc de droite,
     * plus étroit que son contenu, débordait vers la gauche PAR-DESSUS le médaillon. Il s'efface
     * (display: contents) pour que ses enfants deviennent des éléments de la barre : la recherche
     * reste sur la première ligne, face au burger, et les deux boutons passent sur la seconde.
     */
    .site-header__aside {
        display: contents;
    }

    .site-header__cta {
        flex: 1 1 100%;
        justify-content: center;
    }

    /*
     * Barre collée au défilement : une seule ligne. Sur 844px de haut, deux lignes et un
     * médaillon de 96 mangeaient le quart de l'écran. Les boutons se retirent — ils sont repris
     * en bas du menu mobile — et le médaillon passe à 56.
     */
    .site-header.is-stuck .site-header__cta {
        display: none;
    }

    .site-header.is-stuck .site-header__logo-full {
        width: 56px;
    }

    .site-header__search-input {
        width: 100%;
        min-width: 0;
    }
}

/* ---- Menu mobile ---- */

/*
 * Une <dialog> : le fond assombri, l'inertie de la page et l'enfermement du focus sont ceux du
 * navigateur. Elle est ancrée à droite et prend toute la hauteur, comme un tiroir.
 */
.site-menu-mobile {
    width: min(420px, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    /* Les marges automatiques de la <dialog> la centrent : on la pousse à droite. */
    margin: 0 0 0 auto;
    padding: var(--space-bloc);
    border: 0;
    background-color: var(--color-secondary-200);
    color: var(--color-secondary-900);
    overflow-y: auto;
}

.site-menu-mobile__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-block-start: var(--space-xl);
}

.site-menu-mobile::backdrop {
    background-color: rgba(8, 12, 17, 0.5);
}

.site-menu-mobile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    margin-block-end: var(--space-l);
}

.site-menu-mobile__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

.site-menu-mobile__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xxxs);
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--color-secondary-900);
    cursor: pointer;
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.site-menu-mobile__close:hover,
.site-menu-mobile__close:focus-visible {
    background-color: var(--color-secondary);
}

.site-menu-mobile__list,
.site-menu-mobile__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu-mobile__item + .site-menu-mobile__item {
    border-top: 1px solid var(--color-secondary);
}

.site-menu-mobile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Cible confortable au pouce, sur toute la largeur du tiroir. */
    min-height: 44px;
    padding-block: var(--space-s);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
}

.site-menu-mobile__link--summary {
    list-style: none;
}

.site-menu-mobile__link--summary::-webkit-details-marker {
    display: none;
}

/* Chevron qui pivote à l'ouverture : le seul indice que l'entrée se déplie. */
.site-menu-mobile__link--summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--hover-dur) var(--hover-ease);
}

.site-menu-mobile__group[open] > .site-menu-mobile__link--summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.site-menu-mobile__sublist {
    padding-block-end: var(--space-s);
    padding-inline-start: var(--space-m);
}

.site-menu-mobile__sublink {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-secondary-700);
    text-decoration: none;
}

.site-menu-mobile__link,
.site-menu-mobile__sublink {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}

.site-menu-mobile__link[aria-current],
.site-menu-mobile__sublink[aria-current] {
    text-decoration-color: currentColor;
    color: var(--color-primary);
}

.site-menu-mobile__link:hover,
.site-menu-mobile__sublink:hover,
.site-menu-mobile__link:focus-visible,
.site-menu-mobile__sublink:focus-visible {
    text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .site-menu-mobile__link--summary::after {
        transition: none;
    }

    .site-header,
    .site-header__logo-full,
    .site-header__logo-mark,
    .site-header__card {
        transition: none;
    }

    /* Le panneau apparaît et disparaît sans fondu ni glissement, mais content-visibility garde
       sa transition : c'est elle qui laisse le temps au panneau d'exister pendant la fermeture. */
    .site-header__mega {
        transition: none;
        transform: none;
    }
}