/* Ossature de l'application. Le style des écrans vit dans la bibliothèque
   partagée (_content/Atlas.Components/atlas.css) : un futur hôte
   Blazor Hybrid reprendra les mêmes composants et le même rendu. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #f4f6f9;
    color: #14181d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.mh-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.5rem;
    background: #14181d;
    position: sticky;
    top: 0;
    z-index: 30;
    overflow-x: auto;
}

.mh-marque {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: #fff;
    text-decoration: none;
    padding: .75rem 0;
    white-space: nowrap;
}

.mh-logo { width: 30px; height: 30px; flex: none; }

.mh-marque-texte {
    font-size: 1.075rem;
    font-weight: 400;
    letter-spacing: -.01em;
}

.mh-marque-texte strong { font-weight: 650; }

.mh-liens { display: flex; gap: .25rem; }

/* Cibles de 48 px : la navigation se fait au doigt sur tablette. */
.mh-lien {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1rem;
    color: #aab4c0;
    text-decoration: none;
    font-size: .975rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.mh-lien:hover { color: #fff; }

.mh-lien.active {
    color: #fff;
    border-bottom-color: #4d9de8;
}

.mh-page {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Le bouton de menu n'existe qu'en étroit — voir la requête média plus bas. */
.mh-nav-bascule { display: none; }

@media (max-width: 40rem) {
    .mh-nav { gap: 1rem; padding: 0 1rem; }
    .mh-page { padding: 1.25rem 1rem 3rem; }
}

/* --- Navigation étroite ---------------------------------------------------
   Sous 60rem, la rangée de dix-sept liens ne tient pas : elle s'étendait
   jusqu'à ~2000 px dans une bande à défilement horizontal, et tout ce qui
   suivait « Ordres » était hors d'atteinte. Les liens passent en panneau
   déroulant ; au-dessus de 60rem, rien ne change. */
@media (max-width: 60rem) {
    .mh-nav {
        flex-wrap: wrap;
        /* Le défilement horizontal n'a plus lieu d'être et masquerait le
           panneau déroulant. */
        overflow-x: visible;
    }

    .mh-nav-bascule {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
        margin-left: auto;
        background: none;
        border: 0;
        border-radius: 8px;
        color: #d7dde4;
        cursor: pointer;
    }

    .mh-nav-bascule:hover { background: rgba(255, 255, 255, .08); }
    .mh-nav-bascule:focus-visible { outline: 2px solid #4d9de8; outline-offset: 2px; }

    /* Fermé par défaut : une navigation qui s'ouvre toute seule au chargement
       volerait l'écran à chaque page. */
    .mh-nav .mh-liens { display: none; }

    .mh-nav--ouvert .mh-liens {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: .5rem;
        /* Beaucoup de destinations sur un petit écran : le panneau défile
           verticalement plutôt que de repousser la page. */
        max-height: 70vh;
        overflow-y: auto;
    }

    .mh-nav--ouvert .mh-liens .mh-lien { width: 100%; }

    /* La recherche garde sa place dans la barre, avant le bouton : c'est le
       geste le plus fréquent, il ne doit pas se cacher derrière un menu. */
    .mh-recherche-globale { flex: 1 1 8rem; min-width: 0; }

    /* Le nom de la personne connectée passe à la ligne avec le panneau plutôt
       que d'écraser la barre. */
    /* « white-space: nowrap » tient sur un bandeau large, pas sur un
       téléphone à police agrandie : le nom de l'utilisateur poussait alors
       la barre hors de l'écran. Il peut passer à la ligne, et se tronquer
       plutôt que de déborder. */
    .mh-session { order: 3; min-width: 0; flex-wrap: wrap; white-space: normal; }
    .mh-session-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .mh-nav--ouvert .mh-session { width: 100%; justify-content: flex-end; padding-bottom: .5rem; }
}

/* --- Reconnexion ---------------------------------------------------------
   Blazor bascule les classes components-reconnect-* sur ce conteneur selon
   l'état de la connexion. La boîte reste masquée tant qu'aucun état n'est
   actif — sans quoi elle s'afficherait en permanence. */

.mh-reconnexion {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 24, 29, .55);
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.mh-reconnexion-boite {
    background: #fff;
    padding: 1.75rem 2rem;
    border-radius: 10px;
    max-width: 26rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(20, 24, 29, .3);
}

.mh-reconnexion-titre { font-size: 1.1rem; font-weight: 650; margin-bottom: .5rem; }
.mh-reconnexion-texte { display: none; margin: 0; color: #5b6672; line-height: 1.6; }
.mh-reconnexion-texte button { margin-top: .875rem; }

/* Seul le texte correspondant à l'état courant s'affiche. */
.components-reconnect-show .components-reconnect-show,
.components-reconnect-failed .components-reconnect-failed,
.components-reconnect-rejected .components-reconnect-rejected { display: block; }

/* --- Connexion et installation -------------------------------------------
   Écrans hors application : pas de navigation, une carte centrée. */

/* Écrans d'accueil (connexion, installation) : le fond sombre doit remplir
   l'écran. Il vivait dans .mh-page — max-width 80rem et padding — et se
   rendait donc en rectangle flottant avec du gris clair de chaque côté :
   à 1600 px il commençait à 184 px. Les marges du conteneur sont annulées
   ici, pour ces écrans seulement. */
.mh-page:has(> .mh-connexion) { max-width: none; padding: 0; }

.mh-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #14181d;
}

.mh-connexion-carte {
    width: 100%;
    max-width: 24rem;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.mh-connexion-marque {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
    font-size: 1.35rem;
    font-weight: 400;
}

.mh-connexion-marque strong { font-weight: 650; }

.validation-message { display: block; margin-top: .3rem; font-size: .85rem; color: #b3261e; }

/* --- Utilisateur connecté ------------------------------------------------ */

.mh-utilisateur {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .875rem;
    white-space: nowrap;
}

.mh-utilisateur-nom { color: #aab4c0; font-size: .9rem; }

.mh-deconnexion {
    background: none;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #aab4c0;
    padding: .45rem .875rem;
    border-radius: 8px;
    font-size: .875rem;
    font-family: inherit;
    cursor: pointer;
}

.mh-deconnexion:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* --- Session ------------------------------------------------------------- */

.mh-session {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .875rem;
    white-space: nowrap;
}

.mh-session-nom { color: #aab4c0; font-size: .9rem; }

.mh-session-sortie {
    background: none;
    border: 1px solid #3a444f;
    color: #aab4c0;
    padding: .4rem .8rem;
    border-radius: 8px;
    font-size: .85rem;
    font-family: inherit;
    cursor: pointer;
}

.mh-session-sortie:hover { color: #fff; border-color: #5b6672; }