/* ──────────────────────────────────────────────────────────────────────
   app-header.css — en-tête unifié, commun à toutes les pages.
   S'appuie sur design-system/tokens.css pour les variables.
   ────────────────────────────────────────────────────────────────────── */

@keyframes ahFadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.app-header{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;gap:10px;
    height:var(--header-h,56px);padding:0 14px;
    background:var(--glass);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    animation:ahFadeUp .2s var(--ease,ease) .03s both;
}

/* ── Zone gauche : logo + titre de page ─────────────────────────────── */
.ah-brand{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;color:inherit;
    flex-shrink:0;
}
.ah-brand-mark{
    width:32px;height:32px;border-radius:8px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-raised);
}
.ah-brand-mark img{width:100%;height:100%;object-fit:contain}

.ah-title{
    display:flex;flex-direction:column;min-width:0;
}
.ah-title-kicker{
    font-family:var(--font-b);font-size:.55rem;font-weight:700;
    letter-spacing:1.3px;text-transform:uppercase;color:var(--text-3);
    line-height:1;margin-bottom:2px;
}
.ah-title-main{
    font-family:var(--font-h);font-size:.95rem;font-weight:800;
    color:var(--text-1);line-height:1.1;
    display:flex;align-items:center;gap:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ah-title-main i{color:var(--primary);font-size:.9rem;flex-shrink:0}

/* ── Spacer ─────────────────────────────────────────────────────────── */
.ah-spacer{flex:1;min-width:0}

/* ── Pill école ─────────────────────────────────────────────────────── */
.ah-school{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border-radius:999px;
    background:var(--bg-raised);border:1px solid var(--border);
    font-family:var(--font-b);font-size:.7rem;font-weight:700;color:var(--text-2);
    max-width:180px;min-width:0;cursor:default;
    transition:border-color var(--dur,.18s),background var(--dur,.18s);
}
.ah-school i{color:var(--primary);font-size:.75rem;flex-shrink:0}
.ah-school .ah-school-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-school .ah-school-dot{width:6px;height:6px;border-radius:50%;background:var(--success,#10b981);flex-shrink:0;box-shadow:0 0 0 2px rgba(16,185,129,.15)}

/* ── Boutons d'actions (theme, profil, back) ────────────────────────── */
.ah-btn{
    width:36px;height:36px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--bg-raised);border:1px solid var(--border);
    color:var(--text-2);cursor:pointer;text-decoration:none;
    transition:all var(--dur,.18s);flex-shrink:0;
}
.ah-btn:hover{color:var(--primary);border-color:var(--primary-border);background:var(--primary-muted)}
.ah-btn:active{transform:scale(.95)}
.ah-btn i{font-size:.95rem}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:560px){
    .app-header{gap:8px;padding:0 10px}
    .ah-brand-mark{width:28px;height:28px}
    .ah-title-kicker{display:none}
    .ah-title-main{font-size:.85rem}
    .ah-school{max-width:120px;padding:4px 8px;font-size:.64rem}
    .ah-school .ah-school-dot{width:5px;height:5px}
    .ah-btn{width:32px;height:32px;border-radius:8px}
}
@media (max-width:380px){
    .ah-school{max-width:90px;font-size:.58rem}
    .ah-title-main{font-size:.78rem}
}