/**
 * Correctif ciblé — bascule responsive du header (menu desktop -> hamburger).
 *
 * Constat en production : à une largeur intermédiaire/tablette, le menu
 * desktop reste affiché faute de place, provoquant des libellés de
 * navigation coupés ou sur deux lignes. En local, ce problème n'existe pas :
 * le header bascule proprement en hamburger via un bloc
 * "@media (max-width: 1040px)" déjà présent et validé dans main.css, mais
 * qui n'a pas été transféré en production (main.css n'a volontairement pas
 * été déployé pour ne pas écraser d'autres modifications en place).
 *
 * Ce fichier reprend UNIQUEMENT ces règles de bascule (.site-header,
 * .site-header__inner, .site-nav, .site-nav__list, .nav-toggle et leurs
 * variantes ".js"), à l'identique du main.css local, sans toucher au design,
 * aux proportions, aux couleurs ni à la typographie. Chargé après main.css
 * sur toutes les pages du site (voir reset_signature_assets() dans
 * inc/setup.php), il corrige le même header partout, pas seulement sur
 * /offre-decouverte/ ou /merci-rendez-vous/.
 *
 * Breakpoint repris tel quel du local (non choisi arbitrairement) : 1040px,
 * cohérent avec le seuil déjà utilisé par main.js (desktopMedia =
 * "min-width: 1041px") pour la gestion du focus/redimensionnement. Cette
 * valeur couvre déjà 1024px et toutes les largeurs inférieures.
 *
 * Renforcement (2e correctif) : malgré un redéploiement confirmé de ce
 * fichier, la bascule restait inopérante en production à ces largeurs — signe
 * qu'une règle du main.css réellement en ligne (différent du main.css local,
 * jamais déployé) l'emporte encore sur la cascade normale. Les déclarations
 * qui pilotent strictement l'affichage/repli desktop -> hamburger passent donc
 * en !important, uniquement sur ces propriétés de bascule (display,
 * flex-wrap, flex-direction, width), pour garantir qu'elles l'emportent quel
 * que soit le contenu réel du main.css de production. Aucune propriété
 * cosmétique (couleurs, espacements, bordures, typographie) n'est touchée.
 */
@media (max-width: 1040px) {
    .site-header {
        position: static;
        height: auto;
        min-height: 76px;
    }

    .site-header__inner {
        height: auto;
        min-height: 76px;
        flex-wrap: wrap !important;
    }

    .site-nav {
        display: flex !important;
        width: 100% !important;
        align-items: stretch;
        flex-direction: column !important;
        gap: 18px;
        padding: 0 0 28px;
    }

    .site-nav__list {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .site-nav__list li {
        border-bottom: 1px solid var(--line, rgba(23, 57, 47, 0.16));
    }

    .site-nav__list a {
        padding: 14px 0;
        font-size: 0.9375rem;
    }

    .site-nav__list a::after {
        content: none;
    }

    .site-nav > .button {
        width: 100%;
    }

    .js .site-header {
        position: sticky;
        height: 76px;
        min-height: 0;
    }

    .js .site-header__inner {
        height: 100%;
        min-height: 0;
        flex-wrap: nowrap !important;
    }

    .js .nav-toggle {
        display: block !important;
        flex: 0 0 44px;
    }

    .js .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none !important;
        max-height: calc(100vh - 76px);
        padding: 24px 24px 32px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: 1px solid var(--line, rgba(23, 57, 47, 0.16));
        background: var(--paper, #fdfcf9);
    }

    .js .admin-bar .site-nav {
        max-height: calc(100vh - 108px);
    }

    .js .site-nav.is-open {
        display: flex !important;
    }
}