/* 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%; }

/* Le fond de la page vient du socle de tokens (atlas.css) : c'est lui qui
   décide du thème. La couleur de repli n'est là que pour le très bref instant
   où la feuille de la bibliothèque n'est pas encore appliquée. */
html { background: var(--mh-fond, #f7f6f2); }

body {
    margin: 0;
    background: var(--mh-fond, #f7f6f2);
    color: var(--mh-texte, #24262e);
    font-family: var(--mh-police, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* C'est l'EN-TÊTE qui colle, pas la barre. La carte des destinations est son
   second enfant : elle s'ancre ainsi sous la barre à sa hauteur réelle, qui
   change avec la largeur de l'écran — une carte posée à une hauteur écrite en
   dur se serait décollée dès la première rangée supplémentaire. */
.mh-tete {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* L'ardoise de la barre ne suit PAS le thème : c'est l'identité d'Atlas, et
   elle sert de repère fixe quand tout le reste bascule. En mode sombre, le
   liseré du bas est ce qui la détache du fond de page, très proche. */
.mh-nav {
    display: flex;
    align-items: center;
    gap: .85rem;
    /* Le remplissage vit sur les ENFANTS de bord, pas sur la barre : le bloc
       d'outils est collé à droite (position: sticky) et son fond doit
       atteindre le bord réel de l'écran. Avec un remplissage porté par la
       barre, une bande de 24 px restait à découvert et un bout de lien y
       réapparaissait — on croyait à un défaut d'affichage. */
    padding: 0;
    background: var(--mh-chrome, #1b1e28);
    border-bottom: 1px solid var(--mh-chrome-bord, rgba(233, 231, 224, .14));
    /* Plus AUCUN défilement horizontal : c'était le symptôme, pas la solution.
       La barre ne porte plus que ce qui tient — le reste vit dans la carte. */
    flex-wrap: wrap;
}

.mh-marque {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--mh-chrome-texte, #e9e7e0);
    text-decoration: none;
    padding: .8rem 0 .8rem 1.5rem;
    white-space: nowrap;
}

.mh-marque:focus-visible { outline: var(--mh-focus-trait, 2px solid #b0761f); outline-offset: 2px; }

.mh-logo { width: 36px; height: 36px; flex: none; }
.mh-logo-fond { fill: var(--mh-chrome-selection); }
.mh-logo-ecrou { stroke: var(--mh-chrome-texte); }
.mh-logo-centre { fill: var(--mh-chrome-action); }

.mh-marque-texte {
    font-family: var(--mh-police-titre, system-ui);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -.01em;
}

.mh-marque-texte strong { display: block; font-weight: 600; line-height: 1; }
.mh-marque-signature {
    display: block; margin-top: .2rem; color: var(--mh-chrome-texte-doux);
    font-family: var(--mh-police); font-size: .6rem; line-height: 1; letter-spacing: .035em;
}

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

/* Cibles de 48 px : la navigation se fait au doigt sur tablette. */
.mh-lien {
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: .4rem;
    padding: 0 .5rem;
    color: var(--mh-chrome-texte-doux, #a3a5b2);
    text-decoration: none;
    font-size: .975rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--mh-r-md);
    position: relative;
    transition: background-color var(--mh-duree-geste), color var(--mh-duree-geste);
    white-space: nowrap;
}

.mh-lien:hover { color: var(--mh-chrome-texte, #e9e7e0); background: var(--mh-chrome-2); }
.mh-lien-icone { color: var(--mh-chrome-texte-doux); }
.mh-lien:focus-visible { outline: var(--mh-focus-trait, 2px solid #b0761f); outline-offset: -2px; }

/* Le BLEU Atlas désigne où l'on est : navigation active = action principale
   (arbitrage Mh 11/08). Un seul trait, lisible d'un coup d'œil. */
.mh-lien.active {
    color: var(--mh-chrome-texte, #f2eee7);
    background: var(--mh-chrome-selection);
    border-color: var(--mh-chrome-bord);
    font-weight: 600;
}
.mh-lien.active .mh-lien-icone { color: var(--mh-chrome-action); }
.mh-lien.active::after {
    content: ""; position: absolute; bottom: -5px; left: 35%; right: 35%;
    height: 2px; background: var(--mh-chrome-action); border-radius: 2px;
}
.mh-tete :is(a, button, input):focus-visible {
    outline: 2px solid var(--mh-chrome-action); outline-offset: 2px;
}

/* Le remplissage haut est passé de 2 rem à 1,25 rem le 10 août : mesuré au
   banc, la première DONNÉE d'un écran arrivait à 189 px du haut. L'ossature
   ne doit pas coûter un quart d'écran avant que le travail commence. */
.mh-page {
    max-width: 88rem;
    margin: 0 auto;
    padding: 1.75rem 2rem 4rem;
}

@media (max-width: 40rem) {
    .mh-nav { gap: .75rem; }
    .mh-marque { padding-left: 1rem; }
    .mh-nav-outils { padding-right: 1rem; }
    .mh-page { padding: 1rem 1rem 3rem; }
}

@media (max-width: 30rem) {
    .mh-nav { gap: .5rem; }
}

/* --- Les raccourcis du quotidien : au-dessus de 80rem seulement -----------
   UNE SEULE RANGÉE, À TOUTES LES LARGEURS. C'est la règle qui a tranché.

   Mesuré au banc : marque, cinq intitulés, bouton de carte, recherche et
   outils totalisent 1 263 px d'encombrement minimal. En dessous de 1 280 px,
   quelque chose doit céder — et l'essai a été fait dans les deux sens :
   garder les raccourcis renvoyait la recherche sur une seconde rangée, et
   l'en-tête repassait de 55 à 119 px sur TOUTES les pages. Soixante-quatre
   pixels d'ossature permanents, sur un écran de tablette qui en compte 768,
   coûtent plus cher qu'un clic sur une destination.

   Les raccourcis s'effacent donc, et le quotidien reste le PREMIER GROUPE de
   la carte, sous le même intitulé qu'au bureau : la hiérarchie ne change pas
   avec la largeur, seule sa mise en page change.
--------------------------------------------------------------------------- */
/* Écrit en POSITIF : les raccourcis n'existent qu'au-dessus du seuil. Écrit
   en négatif, « max-width: 80rem » s'applique AUSSI à 1 280 px exactement —
   la largeur d'écran la plus courante — et les faisait disparaître là où ils
   tiennent tout juste. */
.mh-nav .mh-liens { display: none; }

@media (min-width: 80rem) {
    .mh-nav .mh-liens { display: flex; }
    /* La recherche absorbe la largeur disponible. Une ligne d'outils qui
       repasse dessous coûterait 56 px sur chaque écran à 1280 px. */
    .mh-nav:has(.mh-liens) { display: grid; grid-template-columns: auto auto auto minmax(8rem, 1fr) auto; gap: .65rem; }
    .mh-nav .mh-recherche-globale { width: 100%; max-width: none; margin-left: 0; }
}

/* --- Reconnexion ---------------------------------------------------------
   Blazor bascule les classes components-reconnect-* sur ce conteneur selon
   l'état de la connexion ; reconnexion.js l'ouvre alors en <dialog> modal,
   par-dessus un éventuel panneau de saisie. Fermé, il n'occupe rien. */

.mh-reconnexion { display: none; }

.mh-reconnexion[open] {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1rem;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.mh-reconnexion::backdrop { background: var(--mh-voile, rgba(20, 22, 29, .5)); }

.mh-reconnexion-boite {
    background: var(--mh-surface-haute, #fff);
    color: var(--mh-texte, #24262e);
    border: 1px solid var(--mh-bord, rgba(36, 38, 46, .14));
    padding: 1.75rem 2rem;
    border-radius: var(--mh-r-lg, 14px);
    width: min(26rem, 100%);
    text-align: center;
    box-shadow: var(--mh-ombre-haute, 0 12px 40px rgba(36, 38, 46, .18));
}
.mh-reconnexion-texte p { margin: 0; }
.mh-reconnexion-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .875rem; }

/* Rappel inséré en tête d'un panneau ouvert quand la session est perdue :
   le panneau est le sujet modal, ce rappel y reste donc cliquable. */
.mh-reconnexion-rappel {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .75rem 1rem;
    background: #fff3cf;
    color: #342800;
    border-bottom: 2px solid #866700;
}
/* En tête de page, le rappel doit rester devant l'en-tête collant
   (z-index 30) quand la page défile : mesuré masqué à 320 px. */
body > .mh-reconnexion-rappel { z-index: 31; }
.mh-reconnexion-statut:empty { display: none; }
.mh-reconnexion-texte .mh-reconnexion-statut { margin-top: .75rem; font-weight: 600; }
@media print { #components-reconnect-modal, .mh-reconnexion-rappel { display: none !important; } }
/* Message d'incident (incident.js) : même boîte que la reconnexion. */
.mh-incident .mh-reconnexion-titre { outline: none; }
.mh-incident-texte p { margin: 0 0 .6rem; line-height: 1.5; }
.mh-incident-reference { color: var(--mh-texte-doux, #63656f); font-size: .9rem; overflow-wrap: anywhere; }
@media print { .mh-incident { display: none !important; } }

/* « Votre accès a changé » (acces-change.js) : même place que le rappel de
   reconnexion. En tête de page, au-dessus de l'en-tête collant (z-index 30),
   ou en tête du panneau ouvert, collé en haut de son défilement. */
.mh-acces-change {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .75rem 1rem;
    background: #fde8e7;
    color: #4a0f0b;
    border-bottom: 2px solid #b3261e;
}
.mh-acces-change p { margin: 0; flex: 1 1 16rem; line-height: 1.5; }
body > .mh-acces-change { z-index: 31; }
@media print { .mh-acces-change { display: none !important; } }


.mh-reconnexion-titre {
    font-family: var(--mh-police-titre, system-ui);
    font-size: 1.1rem; font-weight: 650; margin-bottom: .5rem;
}
.mh-reconnexion-texte { display: none; margin: 0; color: var(--mh-texte-doux, #63656f); line-height: 1.6; }

/* 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; }

/* La porte d'entrée reste l'ardoise, dans les deux thèmes : c'est la première
   image d'Atlas et elle ne clignote pas selon le réglage du poste. */
.mh-connexion {
    min-height: calc(100dvh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--mh-chrome, #1b1e28);
    gap: clamp(2rem, 8vw, 8rem);
    position: relative;
    isolation: isolate;
}

.mh-connexion-introduction { max-width: 28rem; color: var(--mh-chrome-texte); }
.mh-connexion-embleme { width: 88px; height: 88px; margin-bottom: 2rem; }
.mh-connexion-introduction h2 {
    font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 600; line-height: 1.02;
    letter-spacing: -.03em; margin: 0 0 1.25rem;
}
.mh-connexion-introduction p { color: var(--mh-chrome-texte-doux); font-size: 1.125rem; max-width: 24rem; }
.mh-connexion-reperes { display: flex; gap: 1.5rem; margin-top: 2rem; }
.mh-connexion-reperes span { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.mh-connexion-reperes .mh-icone { color: var(--mh-chrome-action); }

.mh-connexion-carte {
    width: 100%;
    max-width: 27rem;
    background: var(--mh-surface-haute, #fff);
    color: var(--mh-texte, #24262e);
    border: 1px solid var(--mh-bord, rgba(36, 38, 46, .14));
    padding: 2.25rem;
    border-radius: var(--mh-r-lg, 14px);
    box-shadow: var(--mh-ombre-haute);
}

.mh-connexion-marque {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
    font-family: var(--mh-police-titre, system-ui);
    font-size: 1.35rem;
    font-weight: 400;
}

.mh-connexion-marque strong { font-weight: 650; }
.mh-connexion-titre { margin: 0 0 .3rem; font-size: 1.9rem; font-weight: 600; }
.mh-connexion-aide { margin: 0 0 1.5rem; color: var(--mh-texte-doux); }
.mh-connexion-submit { width: 100%; }

@media (max-width: 52rem) {
    .mh-connexion { flex-direction: column; gap: 1.5rem; padding: 1.5rem 1rem 2rem; }
    .mh-connexion-introduction { width: min(27rem, 100%); }
    .mh-connexion-introduction h2 { font-size: 2rem; }
    .mh-connexion-introduction p { margin: 0; font-size: 1rem; }
    .mh-connexion-embleme, .mh-connexion-reperes { display: none; }
    .mh-connexion-carte { padding: 1.5rem; }
}

.validation-message { display: block; margin-top: .3rem; font-size: .85rem; color: var(--mh-danger, #a8412f); }

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

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

.mh-utilisateur-nom { color: var(--mh-chrome-texte-doux, #a3a5b2); font-size: .9rem; }

.mh-deconnexion {
    background: none;
    border: 1px solid var(--mh-chrome-bord, rgba(233, 231, 224, .14));
    color: var(--mh-chrome-texte-doux, #a3a5b2);
    min-height: 44px;
    padding: .45rem .875rem;
    border-radius: var(--mh-r-md, 10px);
    font-size: .875rem;
    font-family: inherit;
    cursor: pointer;
}

.mh-deconnexion:hover { color: var(--mh-chrome-texte, #f2eee7); border-color: var(--mh-action, #a9c7d4); }

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

.mh-session {
    display: flex;
    align-items: center;
    gap: .625rem;
    white-space: nowrap;
}

.mh-session-nom { color: var(--mh-chrome-texte-doux, #a3a5b2); font-size: .9rem; }

.mh-session-sortie {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 1px solid var(--mh-chrome-bord, rgba(233, 231, 224, .14));
    color: var(--mh-chrome-texte-doux, #a3a5b2);
    /* 44 px : la barre est aussi un écran tactile, et « Déconnexion » y était
       la seule cible sous le seuil (34 px mesurés au banc). */
    min-width: 44px;
    min-height: 44px;
    padding: .4rem .8rem;
    border-radius: var(--mh-r-plein, 999px);
    font-size: .85rem;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.mh-session-sortie:hover { color: var(--mh-chrome-texte, #f2eee7); border-color: var(--mh-action, #a9c7d4); }
.mh-session-sortie:focus-visible { outline: var(--mh-focus-trait, 2px solid #b0761f); outline-offset: 2px; }