/* ============ 1. RESET & BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background:#dbe1e8; color:#1e293b; font-size:14px; }
a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }
a.btn-action:hover, a.btn-icone:hover { text-decoration:none; }

/* ============ 2. HEADER & BURGER ============ */
#header {
    background: linear-gradient(135deg, #db9b38 0%, #c8891f 100%);
    color: #fff; padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 20px rgba(219,155,56,0.35);
    position: relative; z-index: 100; overflow: visible;
}
#header-logo { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
#header-logo-badge,
.header-logo-badge {
    width:44px; height:44px; border-radius:50%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow:0 1px 4px rgba(0,0,0,0.18);
    overflow:hidden;
}
#header-logo img,
.header-logo-badge img { height:32px; width:auto; flex-shrink:0; }
#header h1 { font-size:17px; font-weight:700; letter-spacing:0.5px; margin:0; color:#fff; }
#header h1 span { font-size:11px; font-weight:400; opacity:0.8; display:block; color:#fff; }

#burger-btn {
    width:36px; height:36px; border-radius:9px;
    background:#fff; border:none;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:4px; flex-shrink:0;
    box-shadow:0 1px 4px rgba(0,0,0,0.18);
    transition:background 0.2s, transform 0.15s;
}
#burger-btn:hover { background:#f8fafc; transform:scale(1.05); }
.burger-line { width:16px; height:2px; background:#c8891f; border-radius:2px; display:block; }

/* ============ 3. MENU UTILISATEUR (DROPDOWN) ============ */
#user-bloc { cursor:pointer; display:flex; align-items:center; gap:8px; position:relative; text-decoration:none !important; }
#user-info { display:flex; flex-direction:column; align-items:flex-end; }
#user-pseudo { font-size:14px; font-weight:800; color:#fff; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,0.15); }
#user-role { font-size:11px; opacity:0.85; margin-top:2px; display:flex; align-items:center; gap:4px; }
/* Étiquette rôle colorée */
.badge-role {
    display:inline-flex; align-items:center;
    font-size:10px; font-weight:800;
    padding:2px 8px; border-radius:99px;
    line-height:1.4; letter-spacing:0.5px;
    text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.5);
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
    vertical-align:middle;
}
.badge-role-0 { background:rgba(59,130,246,0.35); color:#fff; }  /* Élève — bleu */
.badge-role-1 { background:rgba(16,185,129,0.35); color:#fff; }  /* Professeur — vert */
.badge-role-2 { background:rgba(239,68,68,0.35);  color:#fff; }  /* Admin — rouge */
/* Badge rôle dans le dropdown (fond doré) */
.umenu-header .badge-role-0 { background:rgba(59,130,246,0.4); color:#fff; }
.umenu-header .badge-role-1 { background:rgba(16,185,129,0.4); color:#fff; }
.umenu-header .badge-role-2 { background:rgba(239,68,68,0.4);  color:#fff; }
/* Badge rôle dans la sidebar (fond doré) */
#sidebar-header .badge-role-0 { background:rgba(59,130,246,0.4); color:#fff; }
#sidebar-header .badge-role-1 { background:rgba(16,185,129,0.4); color:#fff; }
#sidebar-header .badge-role-2 { background:rgba(239,68,68,0.4);  color:#fff; }
#user-menu { display:none; position:absolute; top:calc(100% + 15px); right:20px; background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.2); border:1px solid #e2e8f0; min-width:260px; z-index:10000; overflow:hidden; }
#user-menu.ouvert { display:block; animation: fadeInMenu 0.2s ease-out; }

/* Badges abonnement sur fond doré (header, sidebar, dropdown) — version blanc translucide */
#header .badge-premium,
#header .badge-premium-plus,
#header .badge-ultra,
#header .badge-gratuit,
#sidebar-header .badge-premium,
#sidebar-header .badge-premium-plus,
#sidebar-header .badge-ultra,
#sidebar-header .badge-gratuit,
.umenu-header .badge-premium,
.umenu-header .badge-premium-plus,
.umenu-header .badge-ultra,
.umenu-header .badge-gratuit {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Badges abonnement Gratuit / Premium / Premium+ / Ultra */
.badge-premium,
.badge-premium-plus,
.badge-ultra,
.badge-gratuit {
    display: inline-flex;
    align-items: center;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 99px;
    line-height: 1.4; letter-spacing: 0.3px;
    vertical-align: middle;
}
.badge-gratuit {
    background: rgba(100,116,139,0.15);
    color: #475569;
    border: 1px solid rgba(100,116,139,0.35);
}
.badge-premium {
    background: rgba(196,147,255,0.25);
    color: #a76bff;
    border: 1px solid rgba(196,147,255,0.5);
}
.badge-premium-plus {
    background: rgba(109,40,217,0.15);
    color: #6d28d9;
    border: 1px solid rgba(109,40,217,0.35);
}
.badge-ultra {
    background: rgba(55,10,120,0.12);
    color: #4a235a;
    border: 1px solid rgba(55,10,120,0.25);
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.umenu-header { padding:16px; background:linear-gradient(135deg,#db9b38,#c8891f); color:#fff; }
.umenu-role { display:flex; align-items:center; gap:4px; margin-top:4px; }
.umenu-item { display:flex; align-items:center; gap:12px; padding:12px 16px; color:#1e293b; text-decoration:none !important; font-size:14px; font-weight:500; transition:background 0.15s; cursor:pointer; border:none; background:none; width:100%; text-align:left; }
.umenu-item:hover { background:#f8fafc; text-decoration:none !important; }
.umenu-item .umenu-ico { font-size:16px; width:20px; text-align:center; flex-shrink:0; opacity:0.7; }
.umenu-sep { height:1px; background:#f1f5f9; margin:4px 0; }

/* ============ 4. SIDEBAR ============ */
#sidebar {
    position:fixed; top:0; left:-280px; width:280px; height:100%; background:#fff; z-index:9999;
    box-shadow:4px 0 24px rgba(0,0,0,0.15); transition:left 0.28s cubic-bezier(0.4,0,0.2,1);
    display:flex; flex-direction:column;
}
#sidebar.open { left:0; }
#sidebar-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.35); z-index:9998;
}
#sidebar-overlay.visible { display:block; }

#sidebar-header { background:#db9b38; padding:20px 20px 16px; display:flex; align-items:center; gap:12px; position:relative; }
#sidebar-avatar, #user-avatar {
    width:36px; height:36px; border-radius:50%;
    background:#fff; color:#b45309; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid rgba(255,255,255,0.9); flex-shrink:0;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    position:relative;
}
/* Pastille de notification sur l'avatar (nb messages non lus) */
.notif-badge {
    position:absolute; top:-5px; right:-5px;
    background:#ef4444; color:#fff;
    font-size:10px; font-weight:700; line-height:1;
    min-width:17px; height:17px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px; border:2px solid #db9b38;
    pointer-events:none;
}
/* Badge compteur (messages non lus) dans le menu déroulant utilisateur */
.umenu-badge-count {
    margin-left:auto; background:#ef4444; color:#fff;
    font-size:10px; font-weight:700; padding:2px 7px;
    border-radius:9px; line-height:1.4;
}
/* Icônes SVG dans les boutons header (connexion / inscription) */
.btn-header svg { flex-shrink:0; vertical-align:middle; }

/* ============ BANDEAU MODE APERÇU ADMIN ============ */
.apercu-bandeau {
    background:#7c3aed; color:#fff;
    padding:8px 24px;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
    font-size:13px; font-weight:600;
    box-shadow:0 2px 8px rgba(124,58,237,0.4);
    position:sticky; top:0; z-index:99;
}
.apercu-bandeau-btn {
    background:rgba(255,255,255,0.2); color:#fff; text-decoration:none;
    padding:5px 14px; border-radius:6px; font-size:12px; white-space:nowrap;
    border:1px solid rgba(255,255,255,0.35);
}
.apercu-bandeau-btn:hover { text-decoration:none; }
#sidebar-user-info { color:#fff; font-weight:700; }
#sidebar-user-name { font-weight:800; font-size:15px; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,0.15); }
#sidebar-user-role { font-size:11px; opacity:0.85; margin-top:3px; font-weight:400; display:flex; align-items:center; gap:4px; }
#sidebar-close {
    margin-left:auto; background:none; border:none; color:rgba(255,255,255,0.7);
    font-size:24px; cursor:pointer; line-height:1; padding:2px 4px;
}
#sidebar-close:hover { color:#fff; }

#sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.sidebar-item {
    display:flex; align-items:center; gap:12px; padding:12px 20px;
    color:#374151; font-size:14px; font-weight:500; text-decoration:none !important;
    transition:background 0.15s, border-left-color 0.15s; border-left:3px solid transparent;
}
.sidebar-item:hover { background:#f8fafc; color:#1e293b; border-left-color:#db9b38; text-decoration:none !important; }
.sidebar-item.actif { background:#fff7ed; color:#d97706; border-left-color:#db9b38; font-weight:700; }
.sidebar-item-icon { font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.sidebar-section-label { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; padding:8px 20px 4px; }
#sidebar-footer { border-top:1px solid #f1f5f9; padding:8px 0; }
.sidebar-connexion {
    display:flex; align-items:center; gap:12px; padding:12px 20px;
    color:#2563eb; font-size:14px; font-weight:600; text-decoration:none !important;
    transition:background 0.15s, border-left-color 0.15s; border-left:3px solid transparent;
}
.sidebar-connexion:hover { background:#eff6ff; border-left-color:#2563eb; text-decoration:none !important; }
.sidebar-connexion svg { flex-shrink:0; }
.sidebar-deconnexion {
    display:flex; align-items:center; gap:12px; padding:12px 20px;
    color:#dc2626; font-size:14px; font-weight:500; text-decoration:none !important;
    transition:background 0.15s, border-left-color 0.15s; border-left:3px solid transparent;
}
.sidebar-deconnexion:hover { background:#fef2f2; border-left-color:#dc2626; text-decoration:none !important; }
.sidebar-deconnexion svg { flex-shrink:0; }

/* ============ 5. BOUTONS HEADER (non connecté) ============ */
#header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-header {
    display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
    align-items:center; gap:6px;
    padding:8px 16px; border-radius:8px;
    font-size:13px; font-weight:700;
    text-decoration:none !important;
    white-space:nowrap; flex-shrink:0;
    transition:opacity 0.15s, background 0.15s;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;
}
.btn-header:hover { opacity:0.88; text-decoration:none !important; }
.btn-header.connexion {
    background:#10b981;
    color:#fff;
    border:1px solid #059669;
}
.btn-header.connexion:hover { background:#059669; opacity:1; }

/* ============ 6. RESPONSIVE ============ */
@media (max-width: 900px) {
    #grille { grid-template-columns:repeat(2, 1fr); }
    .btn-header { padding:9px 12px; }
    .btn-txt { display:none; }
    .btn-header svg { width:18px; height:18px; }
}
@media (max-width: 600px) {
    #grille { grid-template-columns:1fr; }
    #user-info, #header h1 span { display:none; }
    #header h1 { font-size:14px; }
    #header-logo img { height:34px; }
}
@media (max-width: 380px) {
    #header h1 { display:none; }
    #header-logo::after { content:'eSVT'; font-size:18px; font-weight:800; color:#fff; margin-left:2px; }
}