/* ============================================================
   SYPHAX — Espace Élève (Portail Étudiant)
   Namespace EXCLUSIF : el-*   (ne jamais importer pp-* / te-*)
   Palette : Indigo #6366F1
   ============================================================ */
:root{
    --el-primary:#6366F1; --el-primary-dark:#4F46E5; --el-primary-light:#EEF2FF;
    --el-ink:#1E293B; --el-muted:#64748B; --el-line:#E2E8F0; --el-bg:#F1F5F9;
    --el-ok:#10B981; --el-warn:#F59E0B; --el-danger:#EF4444; --el-info:#3B82F6;
    --el-radius:14px; --el-shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
}
*{box-sizing:border-box}
.el-body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--el-bg);color:var(--el-ink);font-size:14px}
a{text-decoration:none;color:inherit}
.el-app{display:flex;min-height:100vh}

/* ===== SIDEBAR ===== */
.el-sidebar{width:264px;background:#fff;border-right:1px solid var(--el-line);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50}
.el-brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid var(--el-line)}
.el-brand-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--el-primary),var(--el-primary-dark));color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.el-brand-text{font-weight:800;font-size:16px;letter-spacing:.5px}
.el-brand-sub{font-size:11px;color:var(--el-muted);font-weight:600}
.el-nav{flex:1;overflow-y:auto;padding:12px 10px}
.el-nav-section{margin-bottom:14px}
.el-nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--el-muted);font-weight:700;padding:6px 12px}
.el-nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#475569;font-weight:600;font-size:13.5px;margin-bottom:2px;transition:.15s}
.el-nav-link i{font-size:17px;width:20px;text-align:center}
.el-nav-link:hover{background:var(--el-primary-light);color:var(--el-primary-dark)}
.el-nav-link.active{background:linear-gradient(135deg,var(--el-primary),var(--el-primary-dark));color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.el-sb-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--el-line)}
.el-sb-avatar{width:38px;height:38px;border-radius:50%;background:var(--el-primary-light);color:var(--el-primary-dark);display:grid;place-items:center;font-weight:800}
.el-sb-user-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-sb-user-role{font-size:11px;color:var(--el-muted)}
.el-sb-logout{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--el-danger);background:#FEF2F2}
.el-sb-logout:hover{background:var(--el-danger);color:#fff}

/* ===== MAIN ===== */
.el-main{flex:1;margin-left:264px;display:flex;flex-direction:column;min-width:0}
.el-header{height:64px;background:#fff;border-bottom:1px solid var(--el-line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:40}
.el-hdr-left{display:flex;align-items:center;gap:14px}
.el-hdr-toggle{display:none;background:none;border:none;font-size:22px;color:var(--el-ink);cursor:pointer}
.el-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--el-muted)}
.el-breadcrumb .current{color:var(--el-ink);font-weight:700}
.el-year-badge{display:inline-flex;align-items:center;gap:6px;background:var(--el-primary-light);color:var(--el-primary-dark);padding:7px 12px;border-radius:9px;font-weight:700;font-size:12.5px}
.el-content{padding:24px;flex:1}

/* ===== COMPONENTS ===== */
.el-page-head{margin-bottom:20px}
.el-page-head h1{margin:0;font-size:21px;font-weight:800}
.el-page-head p{margin:4px 0 0;color:var(--el-muted);font-size:13px}
.el-grid{display:grid;gap:16px}
.el-grid-2{grid-template-columns:repeat(2,1fr)}
.el-grid-3{grid-template-columns:repeat(3,1fr)}
.el-grid-4{grid-template-columns:repeat(4,1fr)}
.el-card{background:#fff;border:1px solid var(--el-line);border-radius:var(--el-radius);box-shadow:var(--el-shadow)}
.el-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--el-line)}
.el-card-head h2{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.el-card-head h2 i{color:var(--el-primary)}
.el-card-body{padding:18px}
.el-stat{background:#fff;border:1px solid var(--el-line);border-radius:var(--el-radius);padding:18px;box-shadow:var(--el-shadow)}
.el-stat .lbl{font-size:12px;color:var(--el-muted);font-weight:600}
.el-stat .val{font-size:26px;font-weight:800;margin-top:4px}
.el-stat .ic{float:right;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:var(--el-primary-light);color:var(--el-primary-dark)}

/* badges */
.el-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.el-badge-ok{background:#ECFDF5;color:#047857}
.el-badge-warn{background:#FFFBEB;color:#B45309}
.el-badge-danger{background:#FEF2F2;color:#B91C1C}
.el-badge-info{background:#EFF6FF;color:#1D4ED8}
.el-badge-muted{background:#F1F5F9;color:#475569}

/* tables */
.el-table{width:100%;border-collapse:collapse}
.el-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--el-muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--el-line)}
.el-table td{padding:12px 14px;border-bottom:1px solid var(--el-line);font-size:13.5px}
.el-table tr:last-child td{border-bottom:none}
.el-table tr:hover td{background:#FafBff}

/* buttons */
.el-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;font-weight:700;font-size:13px;border:1px solid transparent;cursor:pointer;transition:.15s}
.el-btn-primary{background:linear-gradient(135deg,var(--el-primary),var(--el-primary-dark));color:#fff}
.el-btn-primary:hover{filter:brightness(1.05)}
.el-btn-ghost{background:#fff;border-color:var(--el-line);color:var(--el-ink)}
.el-btn-ghost:hover{background:var(--el-bg)}
.el-btn:disabled{opacity:.5;cursor:not-allowed}

/* forms */
.el-label{display:block;font-weight:700;font-size:12.5px;margin-bottom:6px}
.el-input,.el-select,.el-textarea{width:100%;padding:10px 12px;border:1px solid var(--el-line);border-radius:10px;font-size:13.5px;font-family:inherit;background:#fff}
.el-input:focus,.el-select:focus,.el-textarea:focus{outline:none;border-color:var(--el-primary);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.el-field{margin-bottom:14px}

/* misc */
.el-empty{text-align:center;padding:42px 18px;color:var(--el-muted)}
.el-empty i{font-size:38px;display:block;margin-bottom:10px;color:#CBD5E1}
.el-pill-grade{font-weight:800;font-size:15px}
.el-chip{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:700;background:var(--el-primary-light);color:var(--el-primary-dark)}
.el-list-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--el-line)}
.el-list-item:last-child{border-bottom:none}
.el-list-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.el-tr-up{color:var(--el-ok)} .el-tr-down{color:var(--el-danger)} .el-tr-stable{color:var(--el-muted)}

/* EDT grid */
.el-edt{width:100%;border-collapse:collapse;table-layout:fixed}
.el-edt th,.el-edt td{border:1px solid var(--el-line);padding:6px;font-size:12px;vertical-align:top;height:54px}
.el-edt th{background:var(--el-primary-light);color:var(--el-primary-dark);font-weight:700;text-align:center}
.el-edt .slot{border-radius:8px;padding:6px 8px;height:100%;color:#fff}
.el-edt .slot .m{font-weight:700;font-size:12px}
.el-edt .slot .s{font-size:10.5px;opacity:.9}

/* toast */
#elToastContainer{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.el-toast{padding:13px 18px;border-radius:11px;color:#fff;font-weight:600;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transform:translateX(40px);transition:.3s;max-width:340px}
.el-toast.show{opacity:1;transform:translateX(0)}
.el-toast-success{background:var(--el-ok)} .el-toast-error{background:var(--el-danger)} .el-toast-info{background:var(--el-info)}

/* auth */
.el-auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#6366F1,#4F46E5);padding:20px}
.el-auth-card{background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.25);width:100%;max-width:410px;padding:36px 32px}
.el-auth-logo{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--el-primary),var(--el-primary-dark));color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;margin:0 auto 16px}
.el-auth-card h1{text-align:center;font-size:20px;margin:0 0 4px}
.el-auth-card .sub{text-align:center;color:var(--el-muted);font-size:13px;margin-bottom:22px}
.el-auth-msg{padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px}
.el-auth-msg.err{background:#FEF2F2;color:#B91C1C} .el-auth-msg.ok{background:#ECFDF5;color:#047857}
.el-auth-link{text-align:center;margin-top:16px;font-size:13px}
.el-auth-link a{color:var(--el-primary-dark);font-weight:700}

/* responsive */
@media(max-width:992px){
    .el-grid-4{grid-template-columns:repeat(2,1fr)} .el-grid-3{grid-template-columns:1fr} .el-grid-2{grid-template-columns:1fr}
    .el-sidebar{transform:translateX(-100%);transition:.25s} .el-sidebar.open{transform:translateX(0)}
    .el-main{margin-left:0} .el-hdr-toggle{display:block}
    .el-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:45;opacity:0;visibility:hidden;transition:.25s}
    .el-overlay.show{opacity:1;visibility:visible}
}
@media(min-width:993px){.el-overlay{display:none}}


/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS PWA — zones sûres et débordement mobile
   ─────────────────────────────────────────────────────────────────────────
   Ajouté lors du passage en Progressive Web App. Ne modifie aucune règle
   existante : uniquement des ajouts, pour ne rien casser de la mise en page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le layout déclare viewport-fit=cover : la page occupe alors TOUT l'écran,
   y compris sous l'encoche et sous la barre d'accueil. Sans ces marges,
   l'en-tête se glisse derrière l'heure et les boutons du bas deviennent
   inatteignables — défaut très visible une fois l'application installée.
   @supports : les navigateurs sans env() gardent la mise en page d'origine. */
@supports (padding: env(safe-area-inset-top)) {
    .el-header {
        padding-top: env(safe-area-inset-top);
    }
    .el-sidebar {
        padding-top: calc(0px + env(safe-area-inset-top));
        padding-left: env(safe-area-inset-left);
    }
    .el-content {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    /* Insets latéraux en paysage, posés sur le conteneur principal : il n'a
       pas de padding propre, rien n'est donc écrasé. */
    .el-main {
        padding-right: env(safe-area-inset-right);
    }
}

/* Un tableau plus large que l'écran étirait la PAGE ENTIÈRE : la mise en page
   glissait horizontalement et les actions sortaient du cadre. Le défilement
   est désormais confiné au corps de la carte, le reste de l'écran ne bouge
   plus. width:max-content laisse le tableau garder sa largeur naturelle —
   sans quoi il se tasse au point de devenir illisible. */
@media (max-width: 768px) {
    .el-card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .el-card-body > table,
    .el-card-body > .el-table {
        width: max-content;
        min-width: 100%;
    }
}

/* Un média sans contrainte de largeur déborde de son conteneur : cause
   classique de défilement horizontal parasite sur mobile. */
.el-content img,
.el-content svg,
.el-content video,
.el-content canvas,
.el-content iframe {
    max-width: 100%;
    height: auto;
}

/* ── LARGEUR DE LECTURE SUR GRAND ECRAN ────────────────────────────────────
   Sans borne, le contenu s'etire jusqu'au bord d'un ecran 2560 px : les
   lignes deviennent trop longues pour etre lues confortablement et les
   champs de formulaire atteignent des largeurs absurdes.
   Valeur alignee sur .pp-content (1280 px), deja en place cote portail
   parents.
   Le centrage ne s'applique qu'au-dela du seuil : en dessous, la mise en
   page reste strictement identique. */
.el-content {
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
}