/* =============================================================
   Navigation (refonte UX, phase 3) : coque commune à toutes les pages.
     - barre du haut (.app-top) : tous les écrans ;
     - barre latérale (.app-side) : pages du module en cours, >= 1200px,
       pliable en bande d'icônes (html.nav-pliee) ;
     - onglets du bas (.app-tabs) + feuille « Plus » (.app-plus) + bouton
       « + » flottant (.app-fab) : < 1200px.
   Markup dans templates/socle/_nav.html. Couleur du module : --m, --m-soft,
   --m-ink (app.css, posées par base.html selon le module en cours).
   ============================================================= */

:root {
    --nav-side-width: 248px;
    --nav-side-width-pliee: 68px;
    --nav-tabs-height: 62px;
    --nav-survol: color-mix(in srgb, var(--m) 6%, #f3f5f4);
    /* Hauteur de l'en-tête collé en haut de l'écran : une barre d'outils
       elle-même collante (ex. Planning, .header-fixe) se place juste dessous. */
    --navbar-height: 56px;
}

.app-shell { min-height: 100vh; }
.app-main { min-width: 0; }

/* ---------- pastilles (compteurs) ---------- */
.app-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 0.625rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--m);
    color: #fff;
}
.app-badge-inline { margin-left: auto; }

/* Icône du module sur fond de sa couleur (barre latérale, feuille « Plus »). */
.app-side-icone {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--m);
    color: #fff;
    font-size: 1.2rem;
}

/* =============================================================
   BARRE DU HAUT (toutes les pages)
   ============================================================= */
.app-top {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--app-espace-2);
    height: var(--navbar-height);
    padding: 0 var(--app-espace-3);
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-bordure);
}
.app-top-marque {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--app-espace-2);
    min-height: var(--app-zone-tactile);
    color: var(--app-texte);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.app-top-marque:hover { color: var(--app-texte); }
.app-top-logo { width: 28px; height: 28px; object-fit: contain; }
.app-top-fil {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
}
.app-top-sep { color: var(--app-bordure); font-weight: 400; font-size: 1.2rem; }
.app-top-module { color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; }
.app-top-page { color: var(--app-texte-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.app-top-droite {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--app-espace-1);
    flex: none;
}
.app-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: var(--app-zone-tactile);
    height: var(--app-zone-tactile);
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--app-texte);
    font-weight: 600;
    text-decoration: none;
}
.app-top-btn .mdi { font-size: 1.35rem; color: var(--app-texte-2); }
.app-top-btn:hover { background: var(--nav-survol); color: var(--app-texte); }
.app-top-btn:focus-visible,
.app-top-marque:focus-visible,
.app-top-action:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
.app-top-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px 0 12px;
    margin-right: var(--app-espace-2);
    border-radius: var(--app-rayon-pill);
    background: var(--m);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.app-top-action .mdi { font-size: 1.25rem; }
.app-top-action:hover { color: #fff; filter: brightness(1.1); }
/* Éléments réservés à l'ordinateur (libellés, page en cours, bouton d'action). */
.app-top-ordi { display: none; }

/* La barre latérale n'existe qu'à partir de 1200px. */
.app-side { display: none; }

/* =============================================================
   TÉLÉPHONE / TABLETTE (< 1200px) : onglets du bas, « Plus », « + »
   ============================================================= */
.app-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    min-height: var(--nav-tabs-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--app-surface);
    border-top: 1px solid var(--app-bordure);
    box-shadow: 0 -2px 10px rgba(20, 35, 31, 0.06);
}
.app-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--nav-tabs-height);
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--app-texte-2);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}
.app-tab-icone {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 30px;
    border-radius: var(--app-rayon-pill);
    font-size: 1.35rem;
}
.app-tab-lib {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-tab:hover { color: var(--app-texte); }
.app-tab.is-active { color: var(--m-ink); }
.app-tab.is-active .app-tab-icone { background: var(--m-soft); color: var(--m); }
.app-tab:focus-visible { outline: 2px solid var(--m); outline-offset: -4px; border-radius: 10px; }
.app-badge-tab {
    position: absolute;
    top: -3px;
    right: 4px;
    height: 1rem;
    min-width: 1rem;
    font-size: 0.6rem;
    border: 2px solid var(--app-surface);
    box-sizing: content-box;
}

/* Place réservée en bas du contenu : onglets, et bouton « + » s'il y en a un. */
.app-shell:has(~ .app-tabs) .app-main { padding-bottom: calc(var(--nav-tabs-height) + env(safe-area-inset-bottom, 0px)); }
.app-shell:has(~ .app-fab) .app-contenu { padding-bottom: 5.5rem !important; }

.app-fab {
    position: fixed;
    right: var(--app-espace-4);
    bottom: calc(var(--app-espace-4) + env(safe-area-inset-bottom, 0px));
    z-index: 1031;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--m);
    color: #fff;
    font-size: 1.7rem;
    text-decoration: none;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m) 40%, transparent), 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* Au-dessus des onglets quand le module en a. */
.app-tabs ~ .app-fab { bottom: calc(var(--nav-tabs-height) + var(--app-espace-3) + env(safe-area-inset-bottom, 0px)); }
.app-fab:hover { color: #fff; filter: brightness(1.08); }
.app-fab:focus-visible { outline: 3px solid var(--m-soft); outline-offset: 2px; }

/* Feuille « Plus » : toutes les pages du module. */
.app-plus.offcanvas-bottom {
    height: auto;
    max-height: 80vh;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-plus .offcanvas-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; }
.app-plus .offcanvas-body { padding-top: 0; }
.app-plus-groupe {
    padding: 0.75rem 0.5rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-texte-2);
}
.app-plus-liste { list-style: none; margin: 0; padding: 0; }
.app-plus-lien {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 0.75rem;
    border-radius: 12px;
    color: var(--app-texte);
    font-weight: 600;
    text-decoration: none;
}
.app-plus-lien .mdi { font-size: 1.3rem; color: var(--app-texte-2); }
.app-plus-lien:hover { background: var(--nav-survol); color: var(--app-texte); }
.app-plus-lien.is-active { background: var(--m-soft); color: var(--m-ink); }
.app-plus-lien.is-active .mdi { color: var(--m); }

/* =============================================================
   ORDINATEUR (>= 1200px)
   ============================================================= */
@media (min-width: 1200px) {
    .app-shell { display: flex; align-items: flex-start; }
    .app-main { flex: 1 1 0; padding-bottom: 0 !important; }
    .app-tabs,
    .app-fab,
    .app-plus,
    .offcanvas-backdrop { display: none !important; }
    .app-shell .app-contenu { padding-bottom: 1.5rem !important; }

    .app-top { padding: 0 var(--app-espace-5); gap: var(--app-espace-3); }
    .app-top-ordi { display: inline; }
    .app-top-action.app-top-ordi { display: inline-flex; }
    /* Avec la barre latérale, le module est déjà nommé à gauche : le fil
       garde « / Module / Page » pour se repérer. */

    /* ---------- barre latérale : pages du module en cours ---------- */
    .app-side {
        display: flex;
        flex-direction: column;
        flex: none;
        position: sticky;
        top: 0;
        width: var(--nav-side-width);
        height: 100vh;
        background: var(--app-surface);
        border-right: 1px solid var(--app-bordure);
        z-index: 1035;
        transition: width 0.15s;
    }
    .app-side-tete {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: var(--navbar-height);
        padding: 0 14px;
        border-bottom: 1px solid var(--app-bordure);
    }
    .app-side-titre {
        min-width: 0;
        font-weight: 800;
        font-size: 1rem;
        color: var(--app-texte);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-side-corps { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px; }
    .app-side-bas { padding: 8px; border-top: 1px solid var(--app-bordure); }
    .app-side-liste { list-style: none; margin: 0; padding: 0; }
    .app-side-groupe {
        padding: 12px 10px 4px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--app-texte-2);
        white-space: nowrap;
    }
    .app-side-lien {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 40px;
        padding: 0 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--app-texte);
        font-weight: 500;
        font-size: 0.92rem;
        text-align: left;
        text-decoration: none;
        white-space: nowrap;
    }
    .app-side-lien .mdi { flex: none; width: 22px; text-align: center; font-size: 1.15rem; color: var(--app-texte-2); }
    .app-side-lien:hover { background: var(--nav-survol); color: var(--app-texte); }
    .app-side-lien.is-active { background: var(--m-soft); color: var(--m-ink); font-weight: 700; }
    .app-side-lien.is-active .mdi { color: var(--m); }
    .app-side-lien:focus-visible { outline: 2px solid var(--m); outline-offset: -2px; }
    .app-side-lib { overflow: hidden; text-overflow: ellipsis; }
    .app-side-badge { margin-left: auto; }
    .app-side-plier .mdi { transition: transform 0.15s; }

    /* ---------- pliée : bande d'icônes ---------- */
    html.nav-pliee .app-side { width: var(--nav-side-width-pliee); }
    html.nav-pliee .app-side-lib { display: none; }
    html.nav-pliee .app-side-tete { justify-content: center; padding: 0; }
    html.nav-pliee .app-side-lien { justify-content: center; padding: 0; }
    html.nav-pliee .app-side-plier .mdi { transform: rotate(180deg); }
    html.nav-pliee .app-side-badge {
        position: absolute;
        top: 1px;
        right: 6px;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.25rem;
        font-size: 0.6rem;
        border: 2px solid var(--app-surface);
        box-sizing: content-box;
    }
    /* Séparation des groupes quand les intertitres sont masqués. */
    html.nav-pliee .app-side-liste + .app-side-liste { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--app-bordure); }
}

/* Impression : uniquement le contenu. */
@media print {
    .app-top, .app-side, .app-tabs, .app-fab, .app-plus { display: none !important; }
}