/* ============================================================
   navigation.css — bandeau lateral en quatre familles

   Etape P1.12, lot 2, 27/09/2026.
   Cadrage : docs/cadrage_navigation_4_familles.md
   Maquette : mockups/navigation-4-familles.html

   Remplace les deux barres horizontales superposees (.module-switcher et
   .nav-tabs) par un bandeau lateral gauche, motif repris de admin.php.

   LES CLASSES ET LES IDENTIFIANTS DES BOUTONS NE CHANGENT PAS : .nav-tab,
   .module-btn, data-tab, les attributs onclick et les identifiants btnMod*
   sont un contrat avec core.js, dashboard.js et pcp.js. Seule leur mise en
   page change. Les regles ci-dessous surchargent celles de base.css et de
   remediation.css, chargees avant.

   PAS DE LISERE : l'etat actif se signale par un fond, la couleur du texte et
   la graisse, jamais par un trait colore sur un bord.
   ============================================================ */

/* ── Coquille : le bandeau a gauche, l'existant a droite ───── */
.app-container.ap-avec-bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

/* Le pied de page en application est inclus APRES le gabarit, et
   .app-container n'y est jamais ferme : il se retrouve donc troisieme enfant
   de la rangee et prenait sa part de largeur a la colonne principale.
   Il passe a la ligne au lieu de s'installer a cote. */
.app-container.ap-avec-bandeau > footer {
    width: 100%;
}

/* min-width indispensable : sans elle, un tableau large deborde la colonne
   au lieu de defiler a l'interieur. */
.ap-principal {
    flex: 1;
    min-width: 0;
}

.ap-nav {
    /* 276 px et non 252 : « Conformité règlementaire » suivie de sa pastille
       de palier depassait de huit pixels, et une entree du menu
       definitivement coupee n'est pas acceptable, meme avec une infobulle. */
    width: 276px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 10px 0;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* ── Bouton de repli ──────────────────────────────────────── */
.ap-nav-repli {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 10px 4px auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ap-gray-400);
    cursor: pointer;
}
.ap-nav-repli:hover { background: var(--ap-gray-50); color: var(--ap-gray-700); }
.ap-nav-repli svg { width: 17px; height: 17px; }
.ap-nav.replie .ap-nav-repli { margin: 0 auto 4px; transform: rotate(180deg); }

/* ── Bandeau replie : icones seules ───────────────────────── */
.ap-nav.replie { width: 58px; }
.ap-nav.replie .ap-nav-famille { display: none; }
/* Un trait de separation remplace le titre de famille, sinon les icones
   forment une colonne indifferenciee. */
.ap-nav.replie .ap-nav-separateur {
    display: block;
    height: 1px;
    background: var(--ap-gray-200);
    margin: 8px 12px;
}
.ap-nav-separateur { display: none; }
.ap-nav.replie .nav-tab,
.ap-nav.replie .module-btn {
    justify-content: center;
    width: calc(100% - 16px);
    margin: 1px 8px;
    padding: 10px 0;
}
.ap-nav.replie .ap-nav-libelle,
.ap-nav.replie .badge,
.ap-nav.replie .module-count,
.ap-nav.replie .ap-palier,
.ap-nav.replie .ap-essai { display: none; }

/* ── Parcours au clavier ──────────────────────────────────── */
/* Contour visible uniquement au clavier : la souris n'en a pas besoin. */
.ap-nav button:focus-visible,
.workflow-step:focus-visible {
    outline: 2px solid var(--ap-primary);
    outline-offset: 2px;
}

/* ── Fil d'audit : les etapes sont devenues des boutons ───── */
.workflow-step {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}
.workflow-step:hover { filter: brightness(.96); }

/* ── Familles ─────────────────────────────────────────────── */
.ap-nav-famille {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8;
    padding: 15px 18px 6px;
    font-weight: 700;
}
.ap-nav-famille:first-child { padding-top: 6px; }

/* ── Entrees : meme balisage, autre mise en page ───────────── */
.ap-nav .nav-tab,
.ap-nav .module-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: calc(100% - 20px);
    margin: 1px 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    text-align: left;
    cursor: pointer;
    flex: none;
    transition: background .12s, color .12s;
}

.ap-nav .nav-tab:hover,
.ap-nav .module-btn:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Etat actif : fond, couleur, graisse. Aucun bord accentue. */
.ap-nav .nav-tab.active,
.ap-nav .module-btn.active-conf,
.ap-nav .module-btn.active-remed,
.ap-nav .module-btn.active-ebios,
.ap-nav .module-btn.active-tiers,
.ap-nav .module-btn.active-pcp,
.ap-nav .module-btn.active-tech,
.ap-nav .module-btn.ap-actif {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.ap-nav .tab-icon,
.ap-nav .module-btn > i,
.ap-nav .module-btn > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ap-nav .tab-icon svg,
.ap-nav .module-btn svg { width: 18px; height: 18px; }

/* Libelle : une seule ligne, coupee proprement si besoin. */
.ap-nav .ap-nav-libelle {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Pastilles de comptage ─────────────────────────────────── */
.ap-nav .badge,
.ap-nav .module-count {
    margin-left: auto;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 0;
}
.ap-nav .nav-tab.active .badge,
.ap-nav .module-btn.ap-actif .module-count {
    background: #2563eb;
    color: #fff;
}

/* ── Entree verrouillee par le plan (decision D4) ──────────── */
/* Elle reste visible et annonce le palier a atteindre, au lieu de
   disparaitre. Le clic n'ouvre pas de panneau absent : il explique. */
.ap-nav .ap-verrouille {
    color: #94a3b8;
}
.ap-nav .ap-verrouille:hover { color: #64748b; }
.ap-nav .ap-verrouille .tab-icon,
.ap-nav .ap-verrouille > i { opacity: .55; }

.ap-nav .ap-palier {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 2px 5px;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
}

/* ── Entree desarmee par un essai expire ───────────────────── */
.ap-nav .nav-tab-disabled-demo {
    color: #94a3b8;
    cursor: not-allowed;
}
.ap-nav .ap-essai {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
}

/* ── Ecrans etroits ───────────────────────────────────────────
   Repli complet et comportement tactile : lot 3. Ici, le minimum pour
   qu'aucune largeur ne soit cassee entre-temps : sous 1100 px le bandeau
   repasse au-dessus du contenu, en ligne. */
@media (max-width: 1100px) {
    .app-container.ap-avec-bandeau {
        display: block;
    }
    /* Le repli n'a pas d'objet quand le bandeau est deja en ligne. */
    .ap-nav-repli { display: none; }
    .ap-nav.replie { width: auto; }
    .ap-nav.replie .ap-nav-famille { display: block; }
    .ap-nav.replie .ap-nav-libelle { display: inline; }
    .ap-nav {
        width: auto;
        position: static;
        max-height: none;
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px;
        padding: 7px;
    }
    .ap-nav-famille {
        width: 100%;
        padding: 8px 8px 2px;
    }
    .ap-nav .nav-tab,
    .ap-nav .module-btn {
        width: auto;
        margin: 0;
        padding: 7px 11px;
        font-size: 12.5px;
    }
    .ap-nav .ap-nav-libelle { flex: none; }
}