/* En-tête et menu mobile (sous lg, quand le bouton ☰ remplace le menu principal).
   Chargé après tailwind-output.css : l'en-tête reste en haut de l'écran au défilement, et le menu ouvert occupe
   l'écran sous l'en-tête (sa hauteur est posée en JS dans --tlc-header-bottom, tlc-ui.js), la page derrière ne
   défile plus. Sur l'accueil, l'en-tête est déjà fixe (.body-homepage .is-site-header). */
@media screen and (max-width: 1023px) {
    /* au-dessus du menu ouvert : le bouton ✕ reste cliquable (sur l'accueil, l'en-tête fixe était recouvert par
       le menu, qui se plaçait en haut de page, et on ne pouvait plus le fermer) */
    html body #site-header {
        position: sticky;
        top: 0;
        z-index: 60;
    }
    html body #primary-menu-wrapper {
        position: fixed;
        top: var(--tlc-header-bottom, 80px);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    html body.tlc-menu-open {
        overflow: hidden;
    }
}