/*
 * Projunior — App shell : barre latérale claire (blanc « site ») + barre supérieure + tiroir mobile.
 * Structure : .pj-shell > (.pj-sidebar | .pj-backdrop) + .pj-content > (.pj-topbar + .pj-main)
 *
 * Depuis l'itération « proju-arc.ch » : le shell reprend l'identité du site public
 * (en-tête blanc, navigation Ubuntu en capitales espacées, marigold pour l'état actif).
 */

.pj-shell {
    display: flex;
    min-height: 100dvh;
    background: var(--pj-canvas);
}

/* ==================================================================== */
/* Barre latérale                                                       */
/* ==================================================================== */
.pj-sidebar {
    width: var(--pj-sidebar-w);
    flex: none;
    background: var(--pj-surface);
    color: var(--pj-ink);
    border-right: 1px solid var(--pj-line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    z-index: 1040;
}

.pj-sidebar__brand {
    display: flex;
    align-items: center;
    padding: var(--pj-space-3) var(--pj-space-4);
    min-height: var(--pj-topbar-h);
    flex: none;
    border-bottom: 1px solid var(--pj-line);
}

.pj-sidebar__brand img {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
}

.pj-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--pj-space-4) var(--pj-space-3);
}

.pj-navgroup + .pj-navgroup { margin-top: var(--pj-space-5); }

.pj-navgroup__label {
    font-size: 0.6875rem; /* 11px */
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls-wide);
    font-weight: 500;
    color: var(--pj-slate-400);
    padding: 0 var(--pj-space-3);
    margin-bottom: var(--pj-space-2);
}

.pj-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Entrées de navigation : capitales espacées, comme le menu du site public */
.pj-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: var(--pj-radius-sm);
    color: var(--pj-slate);
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    line-height: 1.25;
    text-align: left;
    transition: background var(--pj-dur) var(--pj-ease), color var(--pj-dur) var(--pj-ease);
}

.pj-nav__link:hover {
    background: var(--pj-orange-50);
    color: var(--pj-orange-700);
    text-decoration: none;
}

.pj-nav__link svg,
.pj-nav__link .pj-ico { flex: none; width: 17px; height: 17px; opacity: 0.8; }

/* État actif : repère « aiguille » marigold + wash */
.pj-nav__link.is-active {
    background: var(--pj-orange-50);
    color: var(--pj-orange-700);
}

.pj-nav__link.is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem; /* = -var(--pj-space-3), aligné sur le padding de .pj-nav */
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 0 3px 3px 0;
    background: var(--pj-orange);
}

.pj-nav__link.is-active svg { opacity: 1; color: var(--pj-orange); }

/* Entrée indisponible (étape non débloquée) : visible mais grisée */
.pj-nav__link.is-disabled {
    color: var(--pj-slate-400);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pied de barre latérale : impersonation / déconnexion */
.pj-sidebar__foot {
    flex: none;
    padding: var(--pj-space-3);
    border-top: 1px solid var(--pj-line);
}

.pj-logout { margin: 0; }

.pj-nav__link--button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.pj-nav__link--warn { color: var(--pj-warning-fg); }
.pj-nav__link--warn:hover { background: var(--pj-warning-bg); color: var(--pj-warning-fg); }

/* ==================================================================== */
/* Colonne de contenu + barre supérieure                                */
/* ==================================================================== */
.pj-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pj-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--pj-topbar-h);
    display: flex;
    align-items: center;
    gap: var(--pj-space-3);
    padding: 0 var(--pj-space-5);
    background: var(--pj-surface);
    border-bottom: 1px solid var(--pj-line);
}

.pj-topbar__title {
    font-weight: 600;
    font-size: var(--pj-text-md);
    color: var(--pj-ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-topbar__spacer { flex: 1 1 auto; }

/* Encadré de la personne connectée : prénom, nom, e-mail, puis groupe local et organisation
   (ENS-002). Rendu sur toutes les pages authentifiées ; la ligne de rattachement n'apparaît
   que pour les rôles qui en portent un — administrateur et secrétariat n'ont pas de groupe
   local, rien plutôt qu'un tiret. */
.pj-topbar__scope {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    padding-left: var(--pj-space-3);
    border-left: 1px solid var(--pj-line);
}

.pj-topbar__scope-identity {
    font-weight: 500;
    color: var(--pj-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-topbar__scope-mail {
    font-weight: 400;
    color: var(--pj-slate);
}

.pj-topbar__scope-region {
    font-size: 0.75rem;
    color: var(--pj-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-topbar__scope-org {
    font-size: 0.75rem;
    color: var(--pj-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-topbar__brand { display: none; } /* visible seulement en mobile */

/* Bouton hamburger (mobile) */
.pj-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-sm);
    background: var(--pj-surface);
    color: var(--pj-ink);
    cursor: pointer;
    flex: none;
}

.pj-burger:hover { background: var(--pj-canvas-2); }

/* Sélecteur de langue (barre supérieure) */
.pj-lang {
    display: inline-flex;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-pill);
    overflow: hidden;
    background: var(--pj-surface);
}

.pj-lang a {
    padding: 0.25rem 0.7rem;
    font-size: var(--pj-text-sm);
    font-weight: 600;
    color: var(--pj-slate);
    line-height: 1.6;
}

.pj-lang a:hover { background: var(--pj-canvas-2); text-decoration: none; color: var(--pj-ink); }
.pj-lang a.is-active { background: var(--pj-orange); color: #fff; }

/* Puce utilisateur → « Mon profil » */
.pj-userchip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.75rem;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-pill);
    background: var(--pj-surface);
    color: var(--pj-ink);
    font-size: var(--pj-text-sm);
    font-weight: 500;
    max-width: 220px;
    transition: border-color var(--pj-dur) var(--pj-ease), background var(--pj-dur) var(--pj-ease);
}

.pj-userchip:hover { background: var(--pj-orange-50); border-color: var(--pj-orange); text-decoration: none; color: var(--pj-ink); }
.pj-userchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pj-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pj-blue);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: var(--pj-text-xs);
    font-weight: 700;
    flex: none;
}

/* ==================================================================== */
/* Zone principale + largeur de lecture                                 */
/* ==================================================================== */
.pj-main {
    flex: 1 1 auto;
    padding: var(--pj-space-6) var(--pj-space-5) var(--pj-space-8);
}

.pj-main__inner {
    max-width: var(--pj-content-max);
    margin: 0 auto;
}

/* Voile du tiroir (mobile) */
.pj-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 35, 58, 0.5);
    z-index: 1035;
    opacity: 0;
    transition: opacity var(--pj-dur) var(--pj-ease);
}

/* ==================================================================== */
/* RESPONSIVE                                                           */
/* ==================================================================== */

/* Tablette : contenu un peu plus compact */
@media (max-width: 1024px) {
    .pj-main { padding: var(--pj-space-5) var(--pj-space-4) var(--pj-space-7); }
}

/* Mobile & petite tablette : barre latérale → tiroir */
@media (max-width: 860px) {
    .pj-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform var(--pj-dur) var(--pj-ease);
        box-shadow: var(--pj-shadow-lg);
    }

    .pj-shell.is-open .pj-sidebar { transform: translateX(0); }
    .pj-shell.is-open .pj-backdrop { display: block; opacity: 1; }

    .pj-burger { display: inline-flex; }
    .pj-topbar__title { display: none; }
    .pj-topbar__brand { display: inline-flex; }
    .pj-main { padding: var(--pj-space-5) var(--pj-space-4) var(--pj-space-7); }

    /* Barre supérieure compacte : marges resserrées, puce utilisateur
       réduite à l'avatar, sélecteur de langue plus étroit */
    .pj-topbar {
        padding: 0 var(--pj-space-3);
        gap: var(--pj-space-2);
    }

    .pj-userchip { padding: 0.2rem; }

    /* ENS-001/ENS-002 (recette client d'août 2026) : le rattachement était masqué ici, si
       bien que l'enseignant ne voyait son groupe local que sur ordinateur. Il reste affiché,
       en version resserrée — police réduite, séparateur retiré, texte tronqué plutôt que
       replié, pour ne pas repousser la puce utilisateur hors de l'écran. */
    .pj-topbar__scope {
        padding-left: var(--pj-space-2);
        border-left: none;
    }

    .pj-topbar__scope-identity,
    .pj-topbar__scope-region { font-size: 0.7rem; }

    .pj-topbar__scope-org { display: none; }

    /* Le nom reste dans l'arbre d'accessibilité, seul l'avatar est visible */
    .pj-userchip__name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        clip-path: inset(50%);
    }

    .pj-lang a { padding: 0.25rem 0.5rem; }
}

/* Verrouille le scroll du corps quand le tiroir est ouvert */
.pj-shell.is-open { overflow: hidden; }

/* Grands écrans / 4K : on élargit la colonne de lecture, on ne l'étire pas */
@media (min-width: 1800px) {
    .pj-main__inner { max-width: var(--pj-content-max-xl); }
    .pj-main { padding: var(--pj-space-7) var(--pj-space-6) var(--pj-space-8); }
}

@media (min-width: 2600px) {
    :root { --pj-sidebar-w: 320px; }
    .pj-main__inner { max-width: 1680px; }
    body { font-size: 1rem; }
}