/* ============================================================
   TALENTSYS — Dashboard Étudiant
   Fichier : public/students/css/student-dashboard.css
   Palette Logo ICK uniquement :
     Bleu principal  #F7B731
     Bleu foncé      #D4920A
     Jaune vif       #1565A8   ← couleur exacte du logo ICK
     Blanc           #FFFFFF
     Neutres gris    #F7F9FC / #F1F5F9 / #94A3B8
   Police   : chargée dans main.blade.php
   ============================================================ */

/* ── RESET GLOBAL layout étudiant ── */
body { background: #F7F9FC !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden; }

/* Neutraliser le wrapper <main id="main"> du layout étudiant sur le dashboard */
main#main { padding: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; }

/* ── RESET icônes FontAwesome ── */
#sd-sidebar i[class*="fa-"],
#sd-navbar  i[class*="fa-"],
#sd-main    i[class*="fa-"] {
    display: inline-block !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── POLICE (reset sans écraser FontAwesome) ── */
#sd-sidebar,  #sd-sidebar *:not(i):not([class*="fa-"]),
#sd-navbar,   #sd-navbar  *:not(i):not([class*="fa-"]),
#sd-main,     #sd-main    *:not(i):not([class*="fa-"]) {
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-sizing: border-box;
}

/* ============================================================
   SIDEBAR ÉTUDIANT
   ============================================================ */

#sd-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
    width: 260px;
    background: #ffffff;
    border-right: 1px solid #F1F5F9;
    display: flex; flex-direction: column;
    transition: width .3s ease;
    overflow: hidden;
}
#sd-sidebar.collapsed { width: 72px; }

/* Logo */
.sd-sb-logo {
    height: 72px; border-bottom: 1px solid #F1F5F9;
    display: flex; align-items: center;
    padding: 0 20px; flex-shrink: 0; gap: 12px;
    min-height: 72px;
}
.sd-sb-logo-icon {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #F7B731 0%, #F9C74F 100%);
    border: 2px solid #1565A8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(21,101,168,.25);
}
.sd-sb-logo-icon i { color: #fff !important; font-size: 16px !important; display: inline-block !important; line-height: 1; }
.sd-sb-brand-wrap { overflow: hidden; transition: opacity .2s, width .2s; }
.sd-sb-brand-main  { font-size: 18px; font-weight: 800; color: #F7B731; white-space: nowrap; }
.sd-sb-brand-main span { color: #1565A8; }
.sd-sb-brand-sub   { font-size: 11px; color: #94A3B8; white-space: nowrap; line-height: 1.2; margin-top: 1px; }
.sd-sb-toggle {
    margin-left: auto; width: 28px; height: 28px; flex-shrink: 0;
    border: none !important; background: none !important; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; color: #94A3B8;
}
.sd-sb-toggle:hover { background: #F7F9FC !important; color: #64748B; }
.sd-sb-toggle i { font-size: 14px !important; display: inline-block !important; line-height: 1; }
#sd-sidebar.collapsed .sd-sb-brand-wrap,
#sd-sidebar.collapsed .sd-sb-toggle { display: none; }

/* Nav */
.sd-sb-nav { flex: 1; overflow-y: auto; padding: 16px 12px; }
.sd-sb-nav::-webkit-scrollbar { width: 3px; }
.sd-sb-nav::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 3px; }

.sd-sb-group { margin-bottom: 20px; }
.sd-sb-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: #94A3B8;
    padding: 0 12px; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; transition: opacity .2s;
}
#sd-sidebar.collapsed .sd-sb-group-label { opacity: 0; }
#sd-sidebar.collapsed .sd-sb-divider { display: block; height: 1px; background: #F1F5F9; margin: 4px 8px 8px; }
.sd-sb-divider { display: none; }

/* Item nav */
.sd-nav-item {
    width: 100%; border: none !important; background: transparent !important;
    display: flex !important; align-items: center !important;
    padding: 10px 12px !important; border-radius: 12px;
    margin-bottom: 2px; cursor: pointer; position: relative;
    transition: background .2s;
    text-decoration: none !important; outline: none !important;
    box-shadow: none !important; color: inherit !important;
    border-left: 3px solid transparent !important;
    white-space: nowrap;
    justify-content: flex-start;
}
#sd-sidebar.collapsed .sd-nav-item { padding: 10px 0 !important; justify-content: center !important; }

.sd-nav-item.active {
    background: linear-gradient(135deg, rgba(21,101,168,.08) 0%, rgba(247,183,49,.08) 100%) !important;
    border-left-color: #1565A8 !important;
}
.sd-nav-item:hover:not(.active) { background: #F7F9FC !important; }
.sd-nav-item:focus { outline: none !important; box-shadow: none !important; }

.sd-nav-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.sd-nav-icon i { font-size: 16px !important; display: inline-block !important; line-height: 1; }
.sd-nav-item.active .sd-nav-icon i  { color: #1565A8 !important; }
.sd-nav-item:not(.active) .sd-nav-icon i { color: #94A3B8 !important; }
.sd-nav-item:hover:not(.active) .sd-nav-icon i { color: #F7B731 !important; }

.sd-nav-label {
    flex: 1; font-size: 13px; font-weight: 400; color: #475569 !important;
    white-space: nowrap; text-align: left; margin-left: 12px;
    transition: opacity .2s;
}
.sd-nav-item.active .sd-nav-label { color: #F7B731 !important; font-weight: 600; }

.sd-nav-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 20px;
    min-width: 18px; text-align: center;
    background: #1565A8; color: #fff;
    flex-shrink: 0;
}
.sd-nav-item.active .sd-nav-badge { background: #F7B731; }

/* Badge point (collapsed) */
.sd-nav-dot {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #E53935; display: none;
}
#sd-sidebar.collapsed .sd-nav-dot { display: block; }
#sd-sidebar:not(.collapsed) .sd-nav-dot { display: none; }

/* Tooltip collapsed */
.sd-tooltip {
    position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%);
    background: #1E293B; color: #fff;
    font-size: 12px; font-weight: 500;
    padding: 6px 12px; border-radius: 8px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .2s;
    z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.sd-tooltip::before {
    content: ''; position: absolute; right: 100%; top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1E293B;
}
#sd-sidebar.collapsed .sd-nav-item:hover .sd-tooltip { opacity: 1; }

#sd-sidebar.collapsed .sd-nav-label,
#sd-sidebar.collapsed .sd-nav-badge { display: none !important; }

/* User footer */
.sd-sb-footer {
    padding: 16px; border-top: 1px solid #F1F5F9;
    transition: opacity .2s;
}
#sd-sidebar.collapsed .sd-sb-footer { opacity: 0; pointer-events: none; }
.sd-sb-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: 12px;
    background: #F7F9FC; cursor: pointer;
    transition: background .15s;
}
.sd-sb-user:hover { background: #F1F5F9; }
.sd-sb-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: #F7B731;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700;
    overflow: hidden;
}
.sd-sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-sb-user-name  { font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sb-user-info  { font-size: 11px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sb-user-more  { margin-left: auto; flex-shrink: 0; }
.sd-sb-user-more i { font-size: 14px !important; color: #94A3B8 !important; display: inline-block !important; }

/* ============================================================
   NAVBAR / HEADER ÉTUDIANT
   ============================================================ */

#sd-navbar {
    position: fixed !important; top: 0; right: 0; left: 260px;
    height: 72px; z-index: 99;
    background: #ffffff !important;
    border-bottom: 1px solid #F1F5F9 !important;
    display: flex !important; align-items: center !important;
    padding: 0 32px !important; gap: 16px !important;
    transition: left .3s ease;
    margin: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
}
#sd-navbar.collapsed-nav { left: 72px; }

/* Breadcrumb */
.sd-nav-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sd-nav-breadcrumb .sd-bc-root { color: #94A3B8; cursor: pointer; transition: color .15s; }
.sd-nav-breadcrumb .sd-bc-root:hover { color: #64748B; }
.sd-nav-breadcrumb .sd-bc-sep i { font-size: 14px !important; color: #CBD5E1 !important; display: inline-block !important; }
.sd-nav-breadcrumb .sd-bc-current { font-weight: 600; color: #F7B731; }

/* Search */
.sd-search-wrap { flex: 1; max-width: 440px; margin: 0 32px; }
.sd-search-box {
    height: 44px; background: #F7F9FC;
    border: 2px solid transparent; border-radius: 99px;
    display: flex; align-items: center; gap: 10px; padding: 0 16px;
    transition: border .2s, box-shadow .2s, background .2s;
}
.sd-search-box:focus-within {
    border-color: #1565A8; background: #fff;
    box-shadow: 0 0 0 4px rgba(247,183,49,.10);
}
.sd-search-box i { color: #94A3B8 !important; font-size: 14px !important; display: inline-block !important; flex-shrink: 0; }
.sd-search-box input {
    flex: 1; border: none !important; background: transparent !important;
    outline: none !important; font-size: 13px; color: #334155;
    box-shadow: none !important;
}
.sd-search-box input::placeholder { color: #94A3B8; }
.sd-search-kbd {
    display: flex; align-items: center; gap: 3px;
    font-size: 11px; color: #94A3B8;
    background: #F1F5F9; border-radius: 4px; padding: 2px 6px;
    font-family: monospace; white-space: nowrap;
}

/* Right actions */
.sd-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Icon buttons */
.sd-icon-btn {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important; border: none !important;
    background: transparent !important; cursor: pointer;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background .2s; position: relative;
    outline: none !important; box-shadow: none !important;
    padding: 0 !important; color: #64748B !important;
}
.sd-icon-btn:hover { background: #F7F9FC !important; color: #334155 !important; }
.sd-icon-btn i { font-size: 18px !important; color: inherit !important; display: inline-block !important; line-height: 1; }

/* Badge notif */
.sd-notif-badge {
    position: absolute; top: 6px; right: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #E53935 !important; color: #fff !important;
    font-size: 9px !important; font-weight: 700 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    pointer-events: none; border: 2px solid #fff;
}

/* Diviseur vertical */
.sd-nav-divider { width: 1px; height: 24px; background: #E2E8F0; margin: 0 4px; flex-shrink: 0; }

/* Profil btn */
.sd-profile-btn {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 4px 12px 4px 4px !important; border-radius: 99px !important;
    border: none !important; background: transparent !important;
    cursor: pointer; transition: background .2s;
    outline: none !important; box-shadow: none !important;
    text-decoration: none !important;
}
.sd-profile-btn:hover { background: #F7F9FC !important; }
.sd-profile-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: #F7B731;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
    border: 2px solid #E2E8F0; overflow: hidden;
}
.sd-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-profile-name { font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
.sd-profile-level { font-size: 11px; color: #94A3B8; white-space: nowrap; }
.sd-profile-btn i { font-size: 14px !important; color: #94A3B8 !important; display: inline-block !important; }

/* Dropdowns */
.sd-dd {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #fff; border-radius: 20px;
    border: 1px solid #F1F5F9;
    box-shadow: 0 12px 40px rgba(0,0,0,.10);
    z-index: 1000; overflow: hidden; display: none;
}
.sd-dd.open { display: block; }

/* Notif dropdown */
.sd-dd-notif { width: 320px; }
.sd-dd-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #F1F5F9;
}
.sd-dd-notif-head h3 { font-size: 13px; font-weight: 700; color: #1E293B; margin: 0; }
.sd-dd-notif-head span { font-size: 11px; color: #94A3B8; }
.sd-notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; cursor: pointer; transition: background .15s;
    border-left: 3px solid transparent;
}
.sd-notif-item:hover { background: #F7F9FC; }
.sd-notif-item.unread { border-left-color: var(--ncolor, #1565A8); }
.sd-notif-icon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.sd-notif-icon i { font-size: 13px !important; display: inline-block !important; }
.sd-notif-msg  { font-size: 12px; color: #334155; line-height: 1.4; }
.sd-notif-msg.fw { font-weight: 600; }
.sd-notif-time { font-size: 11px; color: #94A3B8; margin-top: 2px; }
.sd-notif-dot  { width: 8px; height: 8px; border-radius: 50%; background: #E53935; flex-shrink: 0; margin-top: 4px; }
.sd-dd-notif-foot { padding: 12px 16px; border-top: 1px solid #F1F5F9; text-align: center; }
.sd-dd-notif-foot a { font-size: 12px; font-weight: 600; color: #1565A8; text-decoration: none; }

/* Profile dropdown */
.sd-dd-profile { width: 220px; }
.sd-dd-profile-head { padding: 14px 16px; border-bottom: 1px solid #F1F5F9; }
.sd-dd-profile-head p { margin: 0; }
.sd-dd-profile a,
.sd-dd-profile button {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 10px 16px !important; width: 100% !important;
    border: none !important; background: none !important;
    font-size: 13px !important; color: #475569 !important;
    text-decoration: none !important; cursor: pointer !important;
    transition: background .15s !important; text-align: left !important;
}
.sd-dd-profile a:hover,
.sd-dd-profile button:hover { background: #F7F9FC !important; color: #334155 !important; }
.sd-dd-profile i { font-size: 14px !important; display: inline-block !important; color: #94A3B8 !important; width: 16px; }

/* Backdrop */
.sd-nav-bd { position: fixed; inset: 0; z-index: 98; display: none; }
.sd-nav-bd.open { display: block; }

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */

#sd-main {
    margin-left: 260px;
    padding-top: 72px;
    min-height: 100vh;
    background: #F7F9FC;
    width: calc(100% - 260px);
    min-width: 0;
    transition: margin-left .3s ease, width .3s ease;
}
#sd-main.collapsed-main { margin-left: 72px; width: calc(100% - 72px); }

/* ============================================================
   WELCOME BANNER
   ============================================================ */

.sd-welcome {
    background: #F7B731;
    border-radius: 20px; padding: 24px; margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.sd-welcome .geo { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; }
.sd-welcome-greeting { color: rgba(21,101,168,.7); font-size: 13px; margin-bottom: 4px; }
.sd-welcome-title { font-size: 22px; font-weight: 700; color: #1565A8; margin: 0 0 4px; line-height: 1.3; }
.sd-welcome-sub { font-size: 13px; color: rgba(21,101,168,.65); margin: 0; }
.sd-welcome-sub strong { color: #1565A8; font-weight: 600; }
.sd-btn-planning {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,.15); color: #fff !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    backdrop-filter: blur(8px); cursor: pointer; transition: all .2s;
    text-decoration: none !important; white-space: nowrap;
}
.sd-btn-planning:hover { background: rgba(255,255,255,.25); transform: scale(1.03); color: #fff !important; }
.sd-btn-planning i { font-size: 14px !important; color: #fff !important; display: inline-block !important; }

/* Quick stats inside banner */
.sd-quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.sd-qs-item {
    background: rgba(21,101,168,.1); backdrop-filter: blur(8px);
    border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px;
}
.sd-qs-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: rgba(21,101,168,.15);
    display: flex; align-items: center; justify-content: center;
}
.sd-qs-icon i { font-size: 16px !important; color: #fff !important; display: inline-block !important; }
.sd-qs-val   { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }
.sd-qs-lbl   { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }

/* ============================================================
   COURSES SECTION
   ============================================================ */

.sd-section-title { font-size: 18px; font-weight: 700; color: #1E293B; margin: 0; }
.sd-section-sub   { font-size: 13px; color: #94A3B8; margin-top: 2px; }

/* View toggle */
.sd-view-toggle { background: #F7F9FC; border-radius: 12px; padding: 4px; display: inline-flex; gap: 2px; }
.sd-view-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none !important;
    background: transparent; cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; color: #94A3B8;
}
.sd-view-btn.active { background: #fff; color: #F7B731; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sd-view-btn i { font-size: 14px !important; display: inline-block !important; }

/* Filtres pills */
.sd-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.sd-filter-pill {
    padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 500;
    border: none !important; cursor: pointer; transition: all .2s; white-space: nowrap;
    background: #F7F9FC; color: #64748B;
}
.sd-filter-pill.active { background: #F7B731; color: #fff; }
.sd-filter-count {
    display: inline; font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 99px; margin-left: 4px;
}
.sd-filter-pill.active .sd-filter-count { background: rgba(255,255,255,.2); color: #fff; }
.sd-filter-pill:not(.active) .sd-filter-count { background: rgba(21,101,168,.1); color: #F7B731; }

/* Course card */
.sd-course-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1400px) {
    .sd-course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sd-course-grid { grid-template-columns: 1fr; }
}
.sd-course-list { display: flex; flex-direction: column; gap: 16px; }

.sd-course-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid #EFF2F7; cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sd-course-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(21,101,168,.12); }

.sd-card-thumb { position: relative; height: 160px; overflow: hidden; }
.sd-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sd-course-card:hover .sd-card-thumb img { transform: scale(1.05); }
.sd-card-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,101,168,.5) 0%, transparent 60%); }
.sd-card-level {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff;
}
.sd-card-fav {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 50%; border: none !important;
    background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
}
.sd-card-fav i { font-size: 14px !important; display: inline-block !important; }
.sd-card-category {
    position: absolute; bottom: 10px; left: 12px;
    padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 500; color: #fff;
    background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
}
.sd-card-body { padding: 16px; }
.sd-card-title { font-size: 15px; font-weight: 700; color: #1E293B; margin: 0 0 6px; line-height: 1.3; }
.sd-card-desc  { font-size: 12px; color: #64748B; line-height: 1.5; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-card-meta  { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sd-card-meta-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #94A3B8; }
.sd-card-meta-item i { font-size: 11px !important; display: inline-block !important; color: #94A3B8 !important; }
.sd-card-next {
    display: flex; align-items: center; gap: 8px;
    background: rgba(247,183,49,.06); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
.sd-card-next i { font-size: 14px !important; color: #1565A8 !important; display: inline-block !important; flex-shrink: 0; }
.sd-card-next-label { font-size: 11px; color: #94A3B8; }
.sd-card-next-val   { font-size: 12px; font-weight: 500; color: #334155; }

/* Progress dans card */
.sd-card-prog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sd-card-prog-label  { font-size: 11px; color: #94A3B8; }
.sd-card-prog-pct    { font-size: 12px; font-weight: 700; }
.sd-card-prog-track  { height: 7px; background: #EFF2F7; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.sd-card-prog-fill   { height: 100%; border-radius: 99px; transition: width 1s; }

/* CTA button card */
.sd-card-cta {
    width: 100%; padding: 10px; border-radius: 12px; border: none !important;
    background: #F7B731;
    color: #fff !important; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: all .2s; text-decoration: none !important;
}
.sd-card-cta:hover { background: linear-gradient(135deg, #D4920A, #F7B731) !important; color: #fff !important; }
.sd-card-cta i { font-size: 13px !important; color: #fff !important; display: inline-block !important; transition: transform .2s; }
.sd-course-card:hover .sd-card-cta i { transform: translateX(3px); }

/* Empty state */
.sd-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 24px; text-align: center;
}
.sd-empty-icon { width: 64px; height: 64px; border-radius: 20px; background: #F7F9FC; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sd-empty-icon i { font-size: 24px !important; color: #CBD5E1 !important; display: inline-block !important; }
.sd-empty p { color: #64748B; font-weight: 500; margin-bottom: 4px; }
.sd-empty small { color: #94A3B8; font-size: 12px; }

/* CTA catalogue */
.sd-cta-catalogue {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 20px; font-size: 13px; font-weight: 600;
    background: rgba(247,183,49,.08); color: #1565A8 !important;
    border: 1px solid rgba(247,183,49,.2) !important;
    cursor: pointer; transition: all .2s; margin-top: 32px; text-decoration: none !important;
}
.sd-cta-catalogue:hover { transform: scale(1.04); color: #1565A8 !important; }
.sd-cta-catalogue i { font-size: 14px !important; color: #1565A8 !important; display: inline-block !important; }

/* ============================================================
   PROFILE CARD (colonne droite)
   ============================================================ */

.sd-profile-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid #EFF2F7;
}
.sd-profile-banner {
    height: 64px; position: relative;
    background: #F7B731;
}
.sd-profile-banner .geo { position: absolute; border-radius: 50%; background: rgba(255,255,255,.3); pointer-events: none; }
.sd-profile-body { padding: 0 20px 20px; }
.sd-profile-pic-wrap { position: relative; margin-top: -28px; margin-bottom: 12px; display: inline-block; }
.sd-profile-pic {
    width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
    border: 3px solid #fff; box-shadow: 0 4px 12px rgba(21,101,168,.15);
    background: #F7B731;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; font-weight: 700;
}
.sd-profile-pic img { width: 100%; height: 100%; object-fit: cover; }
.sd-profile-online {
    position: absolute; bottom: -2px; right: -2px;
    width: 18px; height: 18px; border-radius: 50%; background: #1565A8;
    border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
}
.sd-profile-online i { font-size: 9px !important; color: #fff !important; display: inline-block !important; }
.sd-profile-name-text { font-size: 15px; font-weight: 700; color: #1E293B; margin-bottom: 2px; }
.sd-profile-level-text { font-size: 12px; color: #64748B; }
.sd-profile-badge {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600;
    background: rgba(247,183,49,.12); color: #0D3E6A;
}
.sd-profile-badge i { font-size: 11px !important; color: #1565A8 !important; display: inline-block !important; }

/* Progression ring */
.sd-prog-wrap { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.sd-prog-ring { position: relative; flex-shrink: 0; }
.sd-prog-ring svg { display: block; transform: rotate(-90deg); }
.sd-prog-ring-label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #F7B731;
}
.sd-prog-info p  { margin: 0; }
.sd-prog-sub  { font-size: 11px; color: #94A3B8; }
.sd-prog-val  { font-size: 24px; font-weight: 700; color: #F7B731; line-height: 1; }
.sd-prog-sub2 { font-size: 11px; color: #94A3B8; }

/* Completion bar */
.sd-completion { background: #F7F9FC; border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.sd-completion-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sd-completion-lbl { font-size: 12px; color: #64748B; }
.sd-completion-val { font-size: 12px; font-weight: 700; color: #1565A8; }
.sd-completion-track { height: 6px; background: #E8EDF2; border-radius: 99px; overflow: hidden; }
.sd-completion-fill  { height: 100%; border-radius: 99px; background: #1565A8; }

/* Points XP */
.sd-xp-row { display: flex; align-items: center; justify-content: space-between; }
.sd-xp-left { display: flex; align-items: center; gap: 8px; }
.sd-xp-icon { width: 24px; height: 24px; border-radius: 8px; background: rgba(247,183,49,.15); display: flex; align-items: center; justify-content: center; }
.sd-xp-icon i { font-size: 12px !important; color: #1565A8 !important; display: inline-block !important; }
.sd-xp-lbl { font-size: 11px; color: #94A3B8; }
.sd-xp-val { font-size: 13px; font-weight: 700; color: #334155; }
.sd-btn-profile {
    font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
    border: 1px solid #F7B731 !important; color: #F7B731 !important;
    background: transparent; cursor: pointer; transition: all .2s;
    text-decoration: none !important;
}
.sd-btn-profile:hover { background: rgba(21,101,168,.05) !important; color: #F7B731 !important; }

/* ============================================================
   MOTIVATION PANEL (colonne droite)
   ============================================================ */

.sd-motivation { display: flex; flex-direction: column; gap: 16px; }

.sd-mot-header { display: flex; align-items: center; justify-content: space-between; }
.sd-mot-title { font-size: 15px; font-weight: 700; color: #1E293B; margin: 0; }
.sd-mot-sub   { font-size: 12px; color: #94A3B8; margin-top: 2px; }
.sd-mot-trophy { width: 32px; height: 32px; border-radius: 10px; background: rgba(247,183,49,.15); display: flex; align-items: center; justify-content: center; }
.sd-mot-trophy i { font-size: 16px !important; color: #1565A8 !important; display: inline-block !important; }

/* Semester progress card */
.sd-sem-card {
    background: #F7B731;
    border-radius: 20px; padding: 16px; position: relative; overflow: hidden;
}
.sd-sem-card .geo { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; }
.sd-sem-inner { position: relative; display: flex; align-items: center; gap: 16px; }
.sd-sem-ring { position: relative; flex-shrink: 0; }
.sd-sem-ring svg { display: block; transform: rotate(-90deg); }
.sd-sem-ring-label {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.sd-sem-ring-pct  { font-size: 18px; font-weight: 700; color: #F7B731; line-height: 1; }
.sd-sem-ring-text { font-size: 10px; color: #94A3B8; }
.sd-sem-info p { margin: 0; color: rgba(255,255,255,.7); font-size: 11px; }
.sd-sem-week { font-size: 24px; font-weight: 700; color: #fff; line-height: 1; margin: 2px 0; }
.sd-sem-week span { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.6); }
.sd-sem-stat { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.sd-sem-stat i { font-size: 12px !important; color: rgba(255,255,255,.7) !important; display: inline-block !important; }
.sd-sem-stat-label { font-size: 11px; color: rgba(255,255,255,.7); }
.sd-sem-stat-val   { font-size: 12px; font-weight: 700; color: #fff; }
.sd-sem-rank-val   { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }

/* Cours terminés card */
.sd-cours-card {
    background: rgba(247,183,49,.04); border: 1px solid rgba(247,183,49,.2);
    border-radius: 20px; padding: 16px;
}
.sd-cours-count { font-size: 32px; font-weight: 700; color: #F7B731; line-height: 1; }
.sd-cours-count span { font-size: 16px; font-weight: 400; color: #94A3B8; }
.sd-cours-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(247,183,49,.15); display: flex; align-items: center; justify-content: center; }
.sd-cours-icon i { font-size: 24px !important; color: #1565A8 !important; display: inline-block !important; }
.sd-cours-mini { height: 5px; background: rgba(247,183,49,.15); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.sd-cours-mini-fill { height: 100%; background: #1565A8; border-radius: 99px; }

/* Quiz card */
.sd-quiz-card {
    background: rgba(21,101,168,.04); border: 1px solid rgba(21,101,168,.15);
    border-radius: 20px; padding: 16px;
}
.sd-quiz-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sd-quiz-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(21,101,168,.12); display: flex; align-items: center; justify-content: center; }
.sd-quiz-icon i { font-size: 13px !important; color: #F7B731 !important; display: inline-block !important; }
.sd-quiz-lbl  { font-size: 12px; font-weight: 600; color: #334155; }
.sd-quiz-date { font-size: 11px; color: #94A3B8; }
.sd-quiz-dur  { margin-left: auto; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: #F7B731; white-space: nowrap; }
.sd-quiz-subject { font-size: 13px; font-weight: 600; color: #1E293B; margin-bottom: 2px; }
.sd-quiz-info   { font-size: 11px; color: #94A3B8; margin-bottom: 12px; }
.sd-btn-quiz {
    width: 100%; padding: 10px; border-radius: 12px; border: none !important;
    background: linear-gradient(135deg, #F7B731, #D4920A);
    color: #fff !important; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: opacity .2s; text-align: center;
    text-decoration: none !important; display: block;
}
.sd-btn-quiz:hover { opacity: .9; color: #fff !important; }

/* Live card */
.sd-live-card {
    background: rgba(247,183,49,.05); border: 1px solid rgba(247,183,49,.15);
    border-radius: 20px; padding: 16px;
}
.sd-live-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sd-live-icon-wrap { position: relative; }
.sd-live-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(247,183,49,.12); display: flex; align-items: center; justify-content: center; }
.sd-live-icon i { font-size: 13px !important; color: #1565A8 !important; display: inline-block !important; }
.sd-live-dot {
    position: absolute; top: -2px; right: -2px;
    width: 10px; height: 10px; border-radius: 50%; background: #1565A8;
    animation: sd-pulse 1.5s ease-in-out infinite;
}
@keyframes sd-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
.sd-live-lbl  { font-size: 12px; font-weight: 600; color: #334155; }
.sd-live-date { font-size: 11px; color: #94A3B8; }
.sd-live-badge { margin-left: auto; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #1565A8; background: rgba(247,183,49,.12); white-space: nowrap; }
.sd-live-title { font-size: 13px; font-weight: 600; color: #1E293B; line-height: 1.3; margin-bottom: 8px; }
.sd-live-instructor { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sd-live-instructor img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.sd-live-instructor-init { width: 24px; height: 24px; border-radius: 50%; background: #F7B731; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; }
.sd-live-instructor-name { font-size: 12px; color: #64748B; }
.sd-live-students { margin-left: auto; font-size: 11px; color: #94A3B8; display: flex; align-items: center; gap: 4px; }
.sd-live-students i { font-size: 11px !important; display: inline-block !important; }
.sd-btn-live-cal {
    width: 100%; padding: 10px; border-radius: 12px;
    background: rgba(247,183,49,.1); color: #1565A8 !important;
    border: 1px solid rgba(247,183,49,.3) !important;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none !important;
}
.sd-btn-live-cal:hover { background: rgba(247,183,49,.18) !important; color: #1565A8 !important; }
.sd-btn-live-cal i { font-size: 13px !important; color: #1565A8 !important; display: inline-block !important; }

/* Streak card */
.sd-streak-card {
    display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(247,183,49,.08) 0%, rgba(247,183,49,.04) 100%);
    border: 1px solid rgba(247,183,49,.15);
}
.sd-streak-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(247,183,49,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-streak-icon i { font-size: 20px !important; color: #1565A8 !important; display: inline-block !important; }
.sd-streak-title { font-size: 13px; font-weight: 700; color: #1E293B; margin-bottom: 2px; }
.sd-streak-sub   { font-size: 11px; color: #94A3B8; }
.sd-streak-num   { font-size: 28px; font-weight: 900; color: #1565A8; margin-left: auto; }


/* Hamburger caché par défaut */
.sd-hamburger { display: none; }
.sd-mobile-overlay { display: none; }

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

@media (min-width: 1025px) {
    #sd-sidebar {
        position: fixed !important; left: 0 !important;
        width: 260px !important; transform: none !important; box-shadow: none !important;
    }
    #sd-sidebar.collapsed { width: 260px !important; }
    #sd-sidebar.collapsed .sd-nav-label,
    #sd-sidebar.collapsed .sd-sb-group-label,
    #sd-sidebar.collapsed .sd-sb-brand-wrap,
    #sd-sidebar.collapsed .sd-sb-footer,
    #sd-sidebar.collapsed .sd-sb-user-info,
    #sd-sidebar.collapsed .sd-nav-badge,
    #sd-sidebar.collapsed .sd-sb-divider {
        display: block !important; opacity: 1 !important; pointer-events: auto !important;
    }
    #sd-sidebar.collapsed .sd-nav-item   { padding: 10px 16px !important; justify-content: flex-start !important; }
    #sd-sidebar.collapsed .sd-sb-logo    { padding: 0 20px !important; justify-content: flex-start !important; }
    #sd-sidebar.collapsed .sd-nav-dot    { display: none !important; }
    #sd-sidebar.collapsed .sd-tooltip    { display: none !important; }
    #sd-main, #sd-main.collapsed-main { margin-left: 260px !important; width: calc(100% - 260px) !important; }
    #sd-navbar, #sd-navbar.collapsed-nav { left: 260px !important; width: calc(100% - 260px) !important; }
    .sd-hamburger { display: none !important; }
    .sd-mobile-overlay { display: none !important; }
    .sd-sb-toggle { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #sd-sidebar { position: fixed !important; left: 0 !important; width: 72px !important; transform: none !important; }
    #sd-sidebar .sd-nav-label,
    #sd-sidebar .sd-sb-group-label,
    #sd-sidebar .sd-sb-brand-wrap,
    #sd-sidebar .sd-sb-user-info,
    #sd-sidebar .sd-sb-user-badge,
    #sd-sidebar .sd-sb-user-name,
    #sd-sidebar .sd-sb-user-more,
    #sd-sidebar .sd-nav-badge,
    #sd-sidebar .sd-sb-toggle { display: none !important; }
    #sd-sidebar .sd-nav-item  { padding: 10px 0 !important; justify-content: center !important; }
    #sd-sidebar .sd-nav-icon  { margin: 0 auto; }
    #sd-sidebar .sd-sb-logo   { padding: 0 !important; justify-content: center !important; }
    #sd-sidebar .sd-sb-avatar { margin: 0 auto; }
    #sd-sidebar .sd-sb-footer { padding: 10px 0; }
    #sd-sidebar .sd-nav-item:hover .sd-tooltip { opacity: 1; left: 80px; }
    #sd-main, #sd-main.collapsed-main { margin-left: 72px !important; width: calc(100% - 72px) !important; }
    #sd-navbar, #sd-navbar.collapsed-nav { left: 72px !important; width: calc(100% - 72px) !important; }
    .sd-course-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    .sd-quick-stats   { grid-template-columns: repeat(2, 1fr) !important; }
    .sd-dash-row      { flex-direction: column !important; }
    .sd-dash-col-left, .sd-dash-col-right { width: 100% !important; flex: none !important; }
    .sd-hamburger      { display: none !important; }
    .sd-mobile-overlay { display: none !important; }
    .sd-nav-breadcrumb { display: none; }
    #sd-navbar         { padding: 0 16px; }
}

@media (max-width: 767px) {
    #sd-sidebar {
        position: fixed !important; left: -270px !important; width: 260px !important;
        z-index: 1050 !important; transition: left .28s cubic-bezier(.4,0,.2,1) !important; box-shadow: none !important;
    }
    #sd-sidebar.sd-mobile-open { left: 0 !important; box-shadow: 4px 0 32px rgba(0,0,0,.18) !important; }
    #sd-sidebar.sd-mobile-open .sd-nav-label,
    #sd-sidebar.sd-mobile-open .sd-sb-group-label,
    #sd-sidebar.sd-mobile-open .sd-sb-brand-wrap,
    #sd-sidebar.sd-mobile-open .sd-sb-user-info,
    #sd-sidebar.sd-mobile-open .sd-sb-user-name,
    #sd-sidebar.sd-mobile-open .sd-sb-user-more,
    #sd-sidebar.sd-mobile-open .sd-nav-badge,
    #sd-sidebar.sd-mobile-open .sd-sb-divider { display: block !important; opacity: 1 !important; }
    #sd-sidebar.sd-mobile-open .sd-nav-item { padding: 10px 16px !important; justify-content: flex-start !important; }
    #sd-sidebar.sd-mobile-open .sd-sb-logo  { padding: 0 20px !important; justify-content: flex-start !important; }
    #sd-sidebar.sd-mobile-open .sd-nav-icon { margin: 0; }
    #sd-main, #sd-main.collapsed-main { margin-left: 0 !important; width: 100% !important; }
    #sd-navbar, #sd-navbar.collapsed-nav { left: 0 !important; width: 100% !important; }
    .sd-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1049; transition: opacity .28s; }
    .sd-mobile-overlay.active { display: block; }
    .sd-hamburger {
        display: flex !important; align-items: center; justify-content: center;
        width: 38px; height: 38px; border-radius: 10px;
        background: #F7F9FC; border: 1.5px solid #E2E8F0;
        cursor: pointer; margin-right: 8px; flex-shrink: 0; transition: border-color .2s;
    }
    .sd-hamburger:hover { border-color: #1565A8; }
    .sd-hamburger i     { font-size: 15px !important; color: #475569 !important; }
    #sd-navbar               { padding: 0 14px; }
    .sd-nav-breadcrumb        { display: none !important; }
    .sd-search-wrap           { display: none !important; }
    .sd-course-grid           { grid-template-columns: 1fr !important; }
    .sd-quick-stats           { grid-template-columns: 1fr 1fr !important; }
    .sd-stat-cards-row        { grid-template-columns: 1fr 1fr !important; }
    .sd-dash-row              { flex-direction: column !important; }
    .sd-dash-col-left, .sd-dash-col-right { width: 100% !important; flex: none !important; }
    .sd-section-title         { font-size: 20px !important; }
    #sd-main main > div       { padding: 16px !important; }
}

@media (max-width: 479px) {
    .sd-quick-stats   { grid-template-columns: 1fr 1fr !important; }
    .sd-section-title { font-size: 18px !important; }
    #sd-navbar        { padding: 0 10px; }
    .sd-nb-search-box { display: none !important; }
    .sd-hamburger     { width: 34px !important; height: 34px !important; }
}