/* ════════════════════════════════════════════════════════════════════════
 * MyESEF — Layouts
 * Mises en page de pages — pas de composants ici.
 *
 *   .shell-centered     — page centrée vertic+horiz (login, erreurs)
 *   .shell-centered__card  — bornage largeur du contenu central
 *   .signature          — logo praquin bas-gauche (toutes les pages)
 *
 *  Les layouts "app" (sidebar + content) viendront ici quand on construira
 *  le dashboard et la page projet.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Page centrée ────────────────────────────────────────────────────── */
.shell-centered {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-10) var(--sp-5);
}
.shell-centered__card {
    width: 100%;
    max-width: 420px;
}

/* ── App shell (header sticky + contenu) ──────────────────────────────── */
.app-shell {
    flex: 1;
    display: flex; flex-direction: column;
    width: 100%;
    /* --c-client : variable injectée en inline-style à partir de
       clients.primary_color. Fallback charbon si absente. */
    --c-client: var(--c-text);
}

.app-header {
    display: flex; align-items: center;
    gap: var(--sp-8);
    padding: var(--header-pad-y) var(--header-pad-x); /* utilise les tokens partagés */
    min-height: var(--header-height);
    background: var(--c-bg-elevated);
    /* Pas de border-bottom, mais une TRÈS légère ombre portée pour
       marquer subtilement la séparation header/contenu quand on scrolle. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    position: sticky; top: 0;
    z-index: 20;                          /* doit couvrir l'action-bar quand
                                              elle slide vers le haut */
}

/* ── Identité client (logo ou texte) ── */
.app-header__brand {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    width:  var(--brand-zone);             /* zone carrée (48×48 défaut) */
    height: var(--brand-zone);
    overflow: hidden;
}
/* Variante « pas de client connecté » : pas de nav à côté, donc le
   logo MyESEF a le droit d'être 2× plus large pour mieux respirer. */
.app-header__brand--wide {
    width: calc(var(--brand-zone) * 2);
}
.app-header__brand:hover { text-decoration: none; }
.app-header__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;     /* préserve l'aspect, peut occuper tout 64×64 */
    display: block;
}
.app-header__brand-text {
    font-weight: 650;
    font-size: var(--fs-lg);
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Navigation : underline couleur client sur l'actif ── */
.app-header__nav {
    display: flex;
    gap: var(--sp-6);

    align-self: stretch;
    align-items: stretch;                   /* les liens prennent toute la
                                              hauteur (et leur texte est centré
                                              en interne via inline-flex). */
}
.app-header__nav a {
    position: relative;                     /* ancre pour ::after */
    display: inline-flex; align-items: center;
    padding: 0 2px;
    color: var(--c-text-faded);             /* gris clair par défaut */
    font-size: var(--fs-lg);                /* plus gros (18px) */
    font-weight: 650;
    text-decoration: none;
    transition: color var(--tr-base);
}
.app-header__nav a:hover     { color: var(--c-text); text-decoration: none; }
.app-header__nav a.is-active { color: var(--c-text); }

/* Underline ancré au BAS du HEADER (pas du lien).
   Distance descendante = padding-bottom du header (pas de border à compenser). */
.app-header__nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: calc(-1 * var(--header-pad-y));
    height: 5px;
    background: var(--c-client);
}

/* ── Outils header (boutons icônes + user pill) ── */
.app-header__tools {
    display: flex; align-items: center;
    justify-content: right;
    gap: var(--sp-3);
    flex: 1;
}
.app-header__tool { position: relative; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--c-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--tr-base), color var(--tr-base);
}
.icon-btn:hover { background: var(--c-bg-subtle); color: var(--c-text); text-decoration: none; }

/* ── Main content ── */
/* Rail horizontal du contenu : commence à hauteur du début de la nav
   (= header-pad + brand-zone + gap), pour aligner les bords du
   project-shell sur le 1er lien de nav. */
.app-main {
    flex: 1;
    padding: var(--sp-12) var(--content-rail) var(--sp-12);
    width: 100%;
    max-width: none;
    margin: 0;
}
/* Sous 1550px on réduit les marges latérales à `--header-pad-x` (la même
   valeur que le padding latéral du header) pour donner plus d'espace
   aux panneaux tout en conservant un alignement vertical cohérent avec
   le bord du logo client en haut. Au-dessus de 1550px on garde le
   content-rail aligné sur le 1er lien de nav. */
@media (max-width: 1550px) {
    .app-main {
        padding-left:  var(--header-pad-x);
        padding-right: var(--header-pad-x);
    }
}

/* ── Variante "page étroite" pour les écrans denses (paramètres,
   formulaires, lecture longue). À placer à l'intérieur de .app-main. */
.page-narrow {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Page section (titre + carte) ────────────────────────────────────── */
.page-header { margin-bottom: var(--sp-6); }
.page-header__title    { font-size: var(--fs-3xl); margin: 0 0 var(--sp-1); }
.page-header__subtitle { color: var(--c-text-muted); margin: 0; font-size: var(--fs-sm); }

/* ── Avatar (image circulaire ou initiales) ──────────────────────────── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-bg-subtle);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;        /* initiales toujours en MAJ
                                          (override le lowercase du parent) */
    overflow: hidden;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm  { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar--lg  { width: 56px; height: 56px; font-size: var(--fs-md); }
.avatar--xl  { width: 96px; height: 96px; font-size: var(--fs-2xl); }

/* Avatars colorés selon le rôle (utilise les couleurs des role-badges,
   identiques aux pastilles de curseur Hocuspocus côté éditeur) : utile
   en fallback quand l'utilisateur n'a pas encore d'avatar uploadé ou
   pour les invitations en attente. */
.avatar--super-admin { background: var(--role-super-admin-bg); color: var(--role-super-admin-fg); }
.avatar--admin       { background: var(--role-admin-bg);       color: var(--role-admin-fg); }
.avatar--editor      { background: var(--role-editor-bg);      color: var(--role-editor-fg); }
.avatar--reviewer    { background: var(--role-reviewer-bg);    color: var(--role-reviewer-fg); }

/* ── Signature agence (fixe bas-gauche, présente sur toutes les pages) ─
   Cale ses marges sur celles du header (--header-pad-x / --header-pad-y)
   pour que la signature occupe le coin bas-gauche en miroir du coin
   haut-gauche occupé par le logo client. */
.signature {
    position: fixed;
    bottom: var(--sp-6);            /* un cran plus haut que header-pad-y */
    left:   var(--header-pad-x);
    opacity: 0.7;
    pointer-events: none;
    z-index: -1;                    /* derrière le contenu (fond porté par <html>) */
}
.signature img { width: var(--brand-zone); height: auto; display: block; }
/* Masquée dès qu'on passe en mode « panneaux bord à bord » (≤ 1550px) :
   à cette largeur les contenus collent aux bords du viewport et la
   signature dans le coin chevaucherait. */
@media (max-width: 1550px) {
    .signature { display: none; }

    
}