:root {
        --primary: #0f172a;
        --primary-light: #1e293b;
        --accent: #d4af37;
        --accent-hover: #b5952f;
        --bg-body: #f8fafc;
        --surface: #ffffff;
        --surface-glass: rgba(255, 255, 255, 0.85);
        --text-main: #1e293b;
        --text-light: #475569;
        --border: #e2e8f0;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --info: #3b82f6;

        --sidebar-width: 260px;
        --scroll-track: rgba(148, 163, 184, 0.14);
        --scroll-thumb: #78909a;
        --scroll-thumb-hover: #176f81;
        --radius: 16px;
        --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
        --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
        --glass-border: 1px solid rgba(255, 255, 255, 0.5);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-theme="dark"] {
        --primary: #f8fafc;
        --primary-light: #e2e8f0;
        --bg-body: #0f172a;
        --surface: #1e293b;
        --surface-glass: rgba(30, 41, 59, 0.85);
        --text-main: #f1f5f9;
        --text-light: #94a3b8;
        --border: #334155;
        --glass-border: 1px solid rgba(255, 255, 255, 0.05);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; outline: none; }

    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    ::selection {
        background: rgba(212, 175, 55, 0.3);
        color: var(--primary);
    }

    html {
        scroll-behavior: smooth;
    }

    /* Barres de défilement cohérentes sur toute l’application. */
    #login-screen,
    .main-content,
    .nav-menu,
    .modal-content,
    .table-container,
    #creatorTeacherSubjects {
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    }
    #login-screen::-webkit-scrollbar,
    .main-content::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar,
    .table-container::-webkit-scrollbar,
    #creatorTeacherSubjects::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }
    #login-screen::-webkit-scrollbar-track,
    .main-content::-webkit-scrollbar-track,
    .nav-menu::-webkit-scrollbar-track,
    .modal-content::-webkit-scrollbar-track,
    .table-container::-webkit-scrollbar-track,
    #creatorTeacherSubjects::-webkit-scrollbar-track {
        background: var(--scroll-track);
        border-radius: 999px;
    }
    #login-screen::-webkit-scrollbar-thumb,
    .main-content::-webkit-scrollbar-thumb,
    .nav-menu::-webkit-scrollbar-thumb,
    .modal-content::-webkit-scrollbar-thumb,
    .table-container::-webkit-scrollbar-thumb,
    #creatorTeacherSubjects::-webkit-scrollbar-thumb {
        min-height: 44px;
        background: var(--scroll-thumb);
        border: 2px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
    }
    #login-screen::-webkit-scrollbar-thumb:hover,
    .main-content::-webkit-scrollbar-thumb:hover,
    .nav-menu::-webkit-scrollbar-thumb:hover,
    .modal-content::-webkit-scrollbar-thumb:hover,
    .table-container::-webkit-scrollbar-thumb:hover,
    #creatorTeacherSubjects::-webkit-scrollbar-thumb:hover {
        background-color: var(--scroll-thumb-hover);
    }

    body {
        font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
        background:
            radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), transparent 28%),
            radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12), transparent 24%),
            var(--bg-body);
        color: var(--text-main);
        font-size: 14px;
        line-height: 1.6;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        min-width: 320px;
    }

    /* La connexion possède son propre défilement : le document ne doit pas
       afficher une seconde barre verticale en parallèle. */
    body.login-visible {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    body.modal-open { overflow: hidden; }

    h1, h2, h3, h4 { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: var(--primary); font-weight: 700; letter-spacing: 0; }

    .hidden { display: none !important; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .gap-4 { gap: 1rem; }
    .w-full { width: 100%; }

    #login-screen {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        background: radial-gradient(circle at top right, #1e293b, #0f172a);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 2rem max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }

    .login-card {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.16);
        padding: 3rem;
        border-radius: 28px;
        width: 100%;
        max-width: 450px;
        box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.55);
        text-align: center;
        animation: slideUp 0.6s ease-out;
        position: relative;
        overflow: hidden;
        flex: 0 0 auto;
        margin: auto 0;
    }
    .login-card::before {
        content: '';
        position: absolute;
        inset: -20% auto auto -10%;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(212, 175, 55, 0.22), transparent 70%);
        pointer-events: none;
    }

    .creator-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(212, 175, 55, 0.12);
        border: 1px solid rgba(212, 175, 55, 0.35);
        color: #f8fafc;
        padding: 0.9rem 1rem;
        border-radius: 12px;
        text-align: left;
        margin-bottom: 1.2rem;
    }

    .creator-banner i {
        width: 18px; height: 18px;
        color: var(--accent);
        flex-shrink: 0;
    }

    .creator-banner strong {
        display: block;
        font-size: 0.8rem;
        color: #fef3c7;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .creator-banner span {
        display: block;
        font-size: 0.74rem;
        color: rgba(255,255,255,0.8);
        margin-top: 0.1rem;
    }

    .login-logo { font-size: 3rem; color: var(--accent); margin-bottom: 1rem; }
    .login-logo img { width:100%; height:100%; object-fit:contain; border-radius:inherit; display:block; }
    .brand-icon img { width:100%; height:100%; object-fit:cover; display:block; }
    .site-wordmark {
        margin: 0 0 .55rem;
        color: #f8fafc;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-size: clamp(1.9rem, 5vw, 2.35rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -.055em;
        text-shadow: 0 3px 14px rgba(0,0,0,.28);
    }
    .site-wordmark .wordmark-kongo {
        color: #f5bd43;
        text-shadow: 0 3px 16px rgba(245,189,67,.25);
    }
    .form-group { margin-bottom: 1.5rem; text-align: left; }
    .form-label { display: block; color: #cbd5e1; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 500; }
    .form-input {
        width: 100%; padding: 0.8rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px; color: white;
        transition: var(--transition);
    }
    .form-input:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.1); }
    .form-input.input-error { border-color: var(--danger) !important; }
    select.form-input option,
    select.form-input optgroup { background: #ffffff; color: #0f172a; }
    .field-error { color: var(--danger); font-size: 0.75rem; margin-top: 4px; min-height: 16px; }
    .password-option { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; color: #cbd5e1; font-size: 0.8rem; cursor: pointer; }
    .password-option input { accent-color: var(--accent); cursor: pointer; }
    .profile-photo-picker { display: flex; justify-content: center; padding: 0.35rem 0 0.1rem; }
    .profile-photo-control { position: relative; display:block; width: 112px; height: 112px; cursor:pointer; }
    .profile-photo-preview { width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden; border: 3px solid rgba(212, 175, 55, 0.75); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
    .profile-photo-preview i { width: 48px; height: 48px; }
    .profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
    .profile-photo-trigger { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #0f172a; border-radius: 50%; background: var(--accent); color: #0f172a; cursor: pointer; box-shadow: var(--shadow-sm); }
    .profile-photo-trigger:hover { background: #f4d46b; }
    .profile-photo-trigger i { width: 17px; height: 17px; }

    .school-logo-preview {
        width: 96px;
        height: 96px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
        display: grid;
        place-items: center;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }
    .school-logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .school-logo-preview i {
        width: 40px;
        height: 40px;
        color: var(--text-light);
    }

    .btn-premium {
        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
        color: #0f172a; border: none; padding: 0.9rem 2rem;
        border-radius: 14px; font-weight: 700; cursor: pointer;
        width: 100%; transition: var(--transition);
        font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
        box-shadow: 0 12px 24px -8px rgba(212, 175, 55, 0.35);
    }
    .btn-premium:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(212, 175, 55, 0.45); }
    .btn-premium:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .btn-outline {
        background: transparent; border: 1px solid var(--accent); color: var(--accent);
        padding: 0.6rem 1.2rem; border-radius: 12px; font-weight: 600; cursor: pointer;
        transition: var(--transition); display: inline-flex; align-items: center; gap: 8px;
        font-size: 0.85rem;
    }
    .btn-outline:hover { background: rgba(212, 175, 55, 0.1); }

    .btn-secondary {
        background: var(--bg-body); border: 1px solid var(--border); color: var(--text-main);
        padding: 0.6rem 1.2rem; border-radius: 12px; font-weight: 600; cursor: pointer;
        transition: var(--transition); display: inline-flex; align-items: center; gap: 8px;
        font-size: 0.85rem;
    }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

    .btn-success {
        background: var(--success); color: white; border: none;
        padding: 0.5rem 1rem; border-radius: 10px; font-weight: 600; cursor: pointer;
        transition: var(--transition); display: inline-flex; align-items: center; gap: 6px;
        font-size: 0.8rem;
    }
    .btn-success:hover { background: #059669; }
    .btn-success:disabled, .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

    .btn-danger {
        background: var(--danger); color: white; border: none;
        padding: 0.5rem 1rem; border-radius: 10px; font-weight: 600; cursor: pointer;
        transition: var(--transition); display: inline-flex; align-items: center; gap: 6px;
        font-size: 0.8rem;
    }
    .btn-danger:hover { background: #dc2626; }

    #login-screen.creator-active {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 2.5rem;
        align-items: center;
    }
    #creatorUsersPanel {
        width: 100%;
        max-width: 980px;
        padding: 0 1rem 3rem;
        box-sizing: border-box;
    }

    .phone-prefix-wrap {
        display: flex; align-items: stretch;
        border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    }
    .phone-prefix-wrap .phone-prefix {
        padding: 0.8rem 0.75rem;
        background: rgba(212, 175, 55, 0.1);
        color: var(--accent); font-weight: 700; font-size: 0.85rem;
        white-space: nowrap; border-right: 1px solid var(--border);
        display: flex; align-items: center;
    }
    .phone-prefix-wrap .form-input {
        border: none; border-radius: 0; flex: 1; min-width: 0;
    }

    #app-layout {
        display: flex;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .sidebar {
        width: var(--sidebar-width); background: linear-gradient(180deg, var(--surface) 0%, rgba(248, 250, 252, 0.96) 100%);
        border-right: 1px solid rgba(226, 232, 240, 0.9); height: 100vh; height: 100dvh;
        position: fixed; left: 0; top: 0; z-index: 100;
        display: flex; flex-direction: column; transition: var(--transition);
        box-shadow: 12px 0 30px rgba(15, 23, 42, 0.06);
    }

    #app-layout.role-parent .sidebar {
        background: linear-gradient(180deg, #7c2d12 0%, #b45309 100%);
        border-right-color: rgba(255, 255, 255, 0.18);
        box-shadow: 12px 0 30px rgba(124, 45, 18, 0.24);
    }
    #app-layout.role-parent .brand-text h2,
    #app-layout.role-parent .brand-text span,
    #app-layout.role-parent .nav-title,
    #app-layout.role-parent .nav-item,
    #app-layout.role-parent .user-info h4,
    #app-layout.role-parent .user-info p {
        color: #fff7ed;
    }
    #app-layout.role-parent .nav-item:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #fff7ed;
    }
    #app-layout.role-parent .nav-item.active {
        background: linear-gradient(90deg, #fff7ed, #fde68a);
        color: #7c2d12;
    }
    #app-layout.role-parent .main-content {
        background: linear-gradient(180deg, #fff7ed 0%, #fef3c7 55%, #fff7ed 100%);
    }
    #app-layout.role-parent .page-title h1 {
        color: #7c2d12;
    }
    #app-layout.role-parent .page-title p {
        color: #9a2c0f;
    }
    #app-layout.role-parent .table-container,
    #app-layout.role-parent .stat-card,
    #app-layout.role-parent .profile-card {
        border-color: rgba(245, 158, 11, 0.22);
        box-shadow: 0 16px 35px -20px rgba(124, 45, 18, 0.24);
    }

    .brand {
        padding: 2rem 1.5rem; border-bottom: 1px solid var(--border);
        display: flex; align-items: center; gap: 12px;
    }
    .brand-icon {
        width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), #1e293b);
        color: var(--accent); border-radius: 12px;
        display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
    }
    .brand-text h2 { font-size: 1.2rem; margin: 0; line-height: 1.2; }
    .brand-text span { font-size: 0.75rem; color: var(--text-light); font-family: 'Inter', 'Segoe UI', Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; }

    .nav-menu { flex: 1; min-height:0; padding: 1.5rem 1rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
    .nav-section { margin-bottom: 2rem; }
    .nav-title { font-size: 0.7rem; text-transform: uppercase; color: var(--text-light); font-weight: 700; margin-bottom: 0.8rem; padding-left: 1rem; letter-spacing: 0.05em; }

    .nav-item {
        display: flex; align-items: center; gap: 12px;
        padding: 0.8rem 1rem; color: var(--text-light);
        border-radius: 12px; cursor: pointer;
        transition: var(--transition); margin-bottom: 0.4rem; font-weight: 500;
    }
    .nav-item:hover { background: var(--bg-body); color: var(--primary); }
    .nav-item.active { background: linear-gradient(90deg, var(--primary), #1e293b); color: white; box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.35); }
    .nav-item i { width: 20px; height: 20px; }

    .user-profile {
        padding: 1.5rem; border-top: 1px solid var(--border);
        display: flex; align-items: center; gap: 12px; background: var(--bg-body);
    }
    .avatar {
        width: 40px; height: 40px; border-radius: 50%;
        background: var(--accent); display: flex; align-items: center; justify-content: center;
        font-weight: 700; color: #0f172a;
    }
    .user-info h4 { font-size: 0.9rem; margin: 0; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
    .user-info p { font-size: 0.75rem; color: var(--text-light); margin: 0; }

    .main-content {
        flex: 1;
        margin-left: var(--sidebar-width);
        padding: 2rem;
        background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent 30%), var(--bg-body);
        transition: var(--transition);
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        min-width: 0;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        position: relative;
        isolation: isolate;
    }
    .main-content::before {
        content: '';
        position: absolute;
        inset: -15% -5% auto auto;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(212, 175, 55, 0.11), transparent 70%);
        z-index: -1;
        pointer-events: none;
    }

    .top-bar-panel {
        padding: 1rem 1.2rem;
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.88));
        backdrop-filter: blur(14px);
        border: 1px solid rgba(226,232,240,0.9);
        box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.22);
        margin-bottom: 1.5rem;
    }
    [data-theme="dark"] .top-bar-panel {
        background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.9));
        border-color: rgba(51,65,85,0.95);
    }
    .top-bar { display: flex; justify-content: space-between; align-items: center; }
    .page-title h1 { font-size: 1.8rem; margin: 0; }
    .page-title p { color: var(--text-light); margin: 0; font-size: 0.9rem; }
    .page-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        width: fit-content;
        margin-bottom: 0.45rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: rgba(212, 175, 55, 0.12);
        color: var(--accent);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .actions-bar { display: flex; gap: 1rem; align-items: center; }
    .icon-btn {
        width: 42px; height: 42px; border-radius: 50%;
        border: 1px solid var(--border); background: rgba(255,255,255,0.8);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: var(--transition); color: var(--text-main);
        position: relative;
        box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.2);
    }
    .icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(15deg); }

    .notif-badge {
        position: absolute; top: -4px; right: -4px;
        background: var(--danger); color: white;
        font-size: 0.65rem; font-weight: 700;
        min-width: 18px; height: 18px; border-radius: 9px;
        display: flex; align-items: center; justify-content: center;
        padding: 0 4px; border: 2px solid var(--surface);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .stat-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.86)); padding: 1.5rem; border-radius: 20px;
        box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.24); border: 1px solid rgba(226,232,240,0.95);
        position: relative; overflow: hidden; transition: var(--transition);
    }
    .stat-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -20px rgba(15, 23, 42, 0.3); }
    .stat-card::after {
        content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05)); pointer-events: none;
    }
    .stat-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; }
    .stat-icon {
        width: 48px; height: 48px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    .stat-value { font-size: 2rem; font-weight: 700; color: var(--primary); font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
    .stat-label { color: var(--text-light); font-size: 0.85rem; font-weight: 500; }

    .table-container {
        background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.9)); border-radius: 22px;
        box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.2); overflow: hidden; border: 1px solid rgba(226,232,240,0.95);
        width: 100%;
    }

    .profile-shell {
        display: grid;
        gap: 1rem;
    }

    .profile-hero {
        padding: 1.3rem 1.4rem;
        border-radius: 18px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .profile-hero h2 {
        color: white;
        margin: 0 0 0.25rem;
        font-size: 1.25rem;
    }

    .profile-hero p {
        margin: 0;
        color: rgba(255,255,255,0.85);
    }

    .profile-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.16);
        font-size: 0.8rem;
        font-weight: 600;
    }

    .profile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }

    .profile-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.9));
        border: 1px solid rgba(226,232,240,0.95);
        border-radius: 18px;
        padding: 1rem;
        box-shadow: 0 16px 32px -22px rgba(15, 23, 42, 0.28);
    }

    .profile-card h4 {
        margin: 0 0 0.3rem;
        font-size: 1rem;
    }

    .profile-card p {
        color: var(--text-light);
        margin: 0;
        font-size: 0.85rem;
    }

    .profile-card .value {
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--primary);
        margin-top: 0.5rem;
    }

    .profile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.9rem;
    }

    .profile-actions button,
    .profile-actions a {
        width: auto;
    }
    .custom-table { width: 100%; border-collapse: collapse; table-layout: auto; }
    .custom-table th {
        text-align: left; padding: 1.2rem; background: linear-gradient(180deg, rgba(248,250,252,0.95), rgba(241,245,249,0.9));
        color: var(--text-light); font-weight: 600; font-size: 0.8rem;
        text-transform: uppercase; letter-spacing: 0.05em;
    }
    .custom-table td { padding: 1.2rem; border-bottom: 1px solid var(--border); color: var(--text-main); }
    .custom-table tr:last-child td { border-bottom: none; }
    .custom-table tr:hover { background: rgba(212, 175, 55, 0.02); }

    .badge { padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
    .badge-success { background: rgba(16, 185, 129, 0.1); color: var(--success); }
    .badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
    .badge-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
    .badge-info { background: rgba(59, 130, 246, 0.1); color: var(--info); }
    .badge-primary { background: rgba(15, 23, 42, 0.1); color: var(--primary); }
    .badge-pending { background: rgba(245, 158, 11, 0.15); color: var(--warning); animation: pulse 2s infinite; }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .animate-in { animation: slideUp 0.5s ease-out forwards; }

    @media (max-width: 1200px) {
        .main-content { padding: 1.25rem; }
        .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 1024px) {
        #mobileMenuBtn { display: flex !important; }
        .sidebar {
            transform: translateX(-100%);
            width: min(84vw, 280px);
            overflow: hidden;
        }
        .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
        .main-content { margin-left: 0; }
        .login-card { padding: 2rem 1.25rem; }
        .top-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
        .actions-bar { width: 100%; justify-content: space-between; }
    }

    @media (max-width: 768px) {
        body { font-size: 13px; }
        .login-card { border-radius: 18px; padding: 1.5rem 1rem; }
        .creator-banner { padding: 0.75rem 0.8rem; }
        .creator-banner strong { font-size: 0.7rem; }
        .creator-banner span { font-size: 0.7rem; }
        .toolbar { padding: 1rem; flex-direction: column; align-items: stretch; }
        .search-box { width: 100%; max-width: none; }
        .filter-group { width: 100%; }
        .filter-group > * { flex: 1 1 140px; }
        .btn-premium, .btn-outline, .btn-secondary { width: 100%; justify-content: center; }
        .modal-content { padding: 1.25rem; }
        .main-content { padding: 1rem; }
        .brand { padding: 1.2rem 1rem; }
        .nav-item { padding: 0.9rem 0.8rem; }
        .user-profile { padding: 1rem; flex-wrap: wrap; }
        .page-title h1 { font-size: 1.4rem; }
        .stats-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
        body { font-size: 12.5px; }
        .top-bar { margin-bottom: 1.5rem; }
        .actions-bar { gap: 0.6rem; }
        .icon-btn { width: 38px; height: 38px; }
        .custom-table th, .custom-table td { padding: 0.8rem; font-size: 0.8rem; }
        .main-content { padding: 0.9rem; }
        .pagination { flex-wrap: wrap; }
        .payment-hero { padding: 1.25rem; }
    }

    .premium-modal {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px);
        z-index: 1000; display: none; align-items: center; justify-content: center;
        padding: 1rem;
        overflow: hidden;
    }
    .premium-modal.active { display: flex; }
    .modal-content {
        background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95)); border: 1px solid rgba(226,232,240,0.95);
        border-radius: 24px; padding: 2rem; width: 100%; max-width: 600px;
        box-shadow: 0 25px 45px -20px rgba(15, 23, 42, 0.28); animation: slideUp 0.3s ease-out;
        max-height: min(90vh, 800px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable;
    }
    .modal-content.modal-sm { max-width: 420px; }
    .payment-hero {
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: var(--accent); padding: 2rem; border-radius: var(--radius);
        text-align: center; margin-bottom: 1.5rem; position: relative; overflow: hidden;
    }
    .payment-hero::before {
        content: ''; position: absolute; top: -50%; right: -10%; width: 200px; height: 200px;
        background: rgba(212, 175, 55, 0.1); border-radius: 50%;
    }
    .operateur-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
    .operateur-card {
        border: 1px solid var(--border); border-radius: 12px; padding: 1rem;
        text-align: center; cursor: pointer; transition: var(--transition);
    }
    .operateur-card:hover, .operateur-card.selected {
        border-color: var(--accent); background: rgba(212, 175, 55, 0.05);
    }
    .payment-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
    .payment-method-card {
        border: 1px solid var(--border); border-radius: 12px; padding: 1rem;
        text-align: left; cursor: pointer; transition: var(--transition);
        background: var(--bg-card);
    }
    .payment-method-card:hover, .payment-method-card.selected {
        border-color: var(--accent); background: rgba(212, 175, 55, 0.05);
    }
    .payment-method-card .method-title { font-weight: 700; margin-bottom: 0.25rem; }
    .payment-method-card .method-subtitle { font-size: 0.8rem; color: var(--text-light); }
    .child-avatar {
        width: 45px; height: 45px; border-radius: 50%; background: var(--accent);
        color: var(--primary); display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 1.1rem;
    }
    .timeline-item {
        padding-left: 1.5rem; border-left: 2px solid var(--border);
        margin-left: 0.5rem; padding-bottom: 1.5rem; position: relative;
    }
    .timeline-item::before {
        content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px;
        border-radius: 50%; background: var(--accent);
    }
    #toastContainer {
        position: fixed; top: 20px; right: 20px; z-index: 2000;
        display: flex; flex-direction: column; gap: 10px; max-width: 340px;
    }

    .toolbar {
        padding: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
        align-items: center; justify-content: space-between;
        border-bottom: 1px solid var(--border);
    }
    .search-box {
        display: flex; align-items: center; gap: 8px;
        background: var(--bg-body); border: 1px solid var(--border);
        border-radius: 12px; padding: 0.5rem 1rem; flex: 1; min-width: 200px; max-width: 400px;
    }
    .search-box input {
        border: none; background: transparent; flex: 1;
        color: var(--text-main); font-size: 0.9rem;
    }
    .search-box i { color: var(--text-light); width: 18px; height: 18px; }

    .filter-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .filter-select {
        padding: 0.5rem 1rem; border-radius: 10px;
        background: var(--bg-body); border: 1px solid var(--border);
        color: var(--text-main); font-size: 0.85rem; cursor: pointer;
    }

    .pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; border-top: 1px solid var(--border); }
    .pagination button {
        min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
        background: var(--surface); color: var(--text-main); cursor: pointer; transition: var(--transition);
        font-size: 0.8rem; font-weight: 600;
    }
    .pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
    .pagination button.active-page { background: var(--primary); color: white; border-color: var(--primary); }
    .pagination span { font-size: 0.8rem; color: var(--text-light); }

    .scroll-top-button {
        position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:850;
        width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%;
        display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),#f1cf62); color:#0f172a;
        box-shadow:0 12px 28px rgba(15,23,42,.28); cursor:pointer;
        opacity:0; visibility:hidden; transform:translateY(16px); pointer-events:none;
        transition:opacity .2s ease,transform .2s ease,visibility .2s ease,filter .2s ease;
    }
    .scroll-top-button.visible { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
    .scroll-top-button:hover { filter:brightness(1.08); }
    .scroll-top-button span { font-size:1.5rem; line-height:1; font-weight:900; }

    .calendar-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 1.5rem; border-bottom: 1px solid var(--border);
    }
    .calendar-nav { display: flex; gap: 0.5rem; align-items: center; }
    .calendar-nav button {
        width: 36px; height: 36px; border-radius: 50%;
        border: 1px solid var(--border); background: var(--surface);
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        color: var(--text-main); transition: var(--transition);
    }
    .calendar-nav button:hover { border-color: var(--accent); color: var(--accent); }
    .calendar-nav h3 { margin: 0 1rem; min-width: 180px; text-align: center; }

    .calendar-grid {
        display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr));
        min-width: 644px;
        gap: 1px; background: var(--border); padding: 1px;
    }
    .calendar-day-header {
        background: var(--bg-body); padding: 0.8rem; text-align: center;
        font-weight: 700; font-size: 0.8rem; text-transform: uppercase;
        color: var(--text-light); letter-spacing: 0.05em;
    }
    .calendar-day-header:first-child, .calendar-day:nth-child(7n + 8) { border-left:3px solid var(--accent); }
    .calendar-day-header:nth-child(7), .calendar-day:nth-child(7n + 14) { border-right:3px solid var(--accent); }
    .calendar-day {
        background: var(--surface); padding: 0.8rem; min-height: 100px;
        cursor: pointer; transition: var(--transition);
        display: flex; flex-direction: column; gap: 4px;
    }
    .calendar-day:hover { background: var(--bg-body); }
    .calendar-day.other-month { opacity: 0.3; }
    .calendar-day.today { background: rgba(212, 175, 55, 0.05); }
    .calendar-day-number { font-weight: 700; font-size: 0.9rem; color: var(--primary); }
    .calendar-event {
        font-size: 0.7rem; padding: 3px 6px; border-radius: 4px;
        background: var(--accent); color: #0f172a; font-weight: 600;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        display: flex; align-items: center; justify-content: space-between; gap: 4px;
    }
    .calendar-event.exam { background: var(--danger); color: white; }
    .calendar-event.meeting { background: var(--info); color: white; }
    .calendar-event.holiday { background: var(--success); color: white; }
    .calendar-event .evt-del { cursor: pointer; opacity: 0.7; }
    .calendar-event .evt-del:hover { opacity: 1; }

    .notif-item {
        display: flex; gap: 1rem; padding: 1rem;
        border-bottom: 1px solid var(--border); cursor: pointer;
        transition: var(--transition);
    }
    .notif-item:hover { background: var(--bg-body); }
    .notif-item.unread { background: rgba(212, 175, 55, 0.03); }
    .notif-icon {
        width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .notif-content { flex: 1; }
    .notif-title { font-weight: 600; margin-bottom: 2px; }
    .notif-desc { font-size: 0.85rem; color: var(--text-light); }
    .notif-time { font-size: 0.75rem; color: var(--text-light); margin-top: 4px; }

    .level-badge {
        display: inline-block; padding: 2px 8px; border-radius: 10px;
        font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.05em; margin-left: 6px;
    }
    .level-primary { background: rgba(59, 130, 246, 0.1); color: var(--info); }
    .level-college { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
    .level-lycee { background: rgba(16, 185, 129, 0.1); color: var(--success); }

    /* --- OTP CONFIRMATION UI --- */
    .otp-container { text-align: center; padding: 2rem 1rem; }
    .otp-icon {
        width: 80px; height: 80px; border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
        color: #0f172a; display: flex; align-items: center; justify-content: center;
        margin: 0 auto 1.5rem; font-size: 2.5rem;
        animation: pulse 2s infinite;
    }
    .otp-code-display {
        font-family: 'Courier New', monospace;
        font-size: 2.5rem; font-weight: 700;
        letter-spacing: 0.5rem; color: var(--accent);
        background: var(--bg-body); padding: 1rem 2rem;
        border-radius: 12px; display: inline-block;
        border: 2px dashed var(--accent);
        margin: 1rem 0;
    }
    .otp-input-group { display: flex; gap: 0.5rem; justify-content: center; margin: 1.5rem 0; }
    .otp-input {
        width: 50px; height: 60px; text-align: center;
        font-size: 1.5rem; font-weight: 700;
        background: var(--bg-body); border: 2px solid var(--border);
        border-radius: 10px; color: var(--text-main);
        transition: var(--transition);
    }
    .otp-input:focus { border-color: var(--accent); background: var(--surface); }
    .otp-timer { font-size: 0.8rem; color: var(--text-light); margin-top: 0.5rem; }
    .sms-simulation {
        background: linear-gradient(135deg, #1e293b, #334155);
        color: white; padding: 1.2rem; border-radius: 12px;
        margin: 1rem 0; text-align: left; font-size: 0.85rem;
        border-left: 4px solid var(--accent);
    }
    .sms-simulation strong { color: var(--accent); }
    .sms-simulation .sms-from { font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.5rem; }
    .spinner {
        display: inline-block; width: 20px; height: 20px;
        border: 3px solid rgba(212, 175, 55, 0.3);
        border-radius: 50%; border-top-color: var(--accent);
        animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-light); }
    .empty-state i { width: 42px; height: 42px; margin-bottom: 1rem; opacity: 0.6; }

    .pdf-template {
        position: absolute; left: -9999px; top: 0;
        width: 800px; background: white; color: #0f172a;
        padding: 40px; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    }
    .pdf-header { text-align: center; border-bottom: 2px solid #d4af37; padding-bottom: 20px; margin-bottom: 30px; }
    .pdf-header h1 { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: #0f172a; font-size: 28px; margin: 0; }
    .pdf-header p { color: #64748b; margin: 5px 0 0; }
    .pdf-info { display: flex; justify-content: space-between; margin-bottom: 30px; }
    .pdf-info-box { background: #f8fafc; padding: 15px; border-radius: 8px; width: 48%; }
    .pdf-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    .pdf-table th { background: #0f172a; color: white; padding: 12px; text-align: left; }
    .pdf-table td { padding: 12px; border-bottom: 1px solid #e2e8f0; }
    .pdf-footer { margin-top: 50px; text-align: center; font-size: 12px; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 20px; }
    .pdf-stamp { margin-top: 40px; display: flex; justify-content: space-between; align-items: flex-end; }
    .pdf-stamp-box { text-align: center; width: 200px; border-top: 1px solid #0f172a; padding-top: 10px; font-weight: 600; }

    /* Direction visuelle ScolaKongo : chaleureuse, premium et lisible */
    :root {
        --primary: #102a43; --primary-light: #1d5969;
        --accent: #e3a72f; --accent-hover: #c98716; --emerald: #138a72;
        --bg-body: #f4f7f8; --surface: #ffffff; --text-main: #183b4e;
        --text-light: #5b7083; --border: #dce6ea; --radius: 18px;
        --shadow-sm: 0 8px 20px rgba(16,42,67,.06);
        --shadow-md: 0 16px 38px rgba(16,42,67,.09);
        --shadow-lg: 0 24px 60px rgba(16,42,67,.13);
    }
    [data-theme="dark"] { --primary:#f8fafc; --primary-light:#d9e7ed; --bg-body:#0b1f2a; --surface:#102c3a; --text-main:#edf7f8; --text-light:#abc2cb; --border:#294755; }
    body { font-family:'DM Sans','Segoe UI',sans-serif; background:radial-gradient(circle at 3% 5%,rgba(227,167,47,.15),transparent 23rem),radial-gradient(circle at 97% 98%,rgba(19,138,114,.12),transparent 28rem),var(--bg-body); }
    h1,h2,h3,h4,.brand-text h2,.stat-value { font-family:'Manrope','DM Sans',sans-serif; letter-spacing:-.025em; }

    #login-screen { background:radial-gradient(circle at 12% 18%,rgba(227,167,47,.28),transparent 24rem),radial-gradient(circle at 92% 82%,rgba(22,150,124,.26),transparent 27rem),linear-gradient(135deg,#071d2b 0%,#102f42 52%,#0b2735 100%); }
    #login-screen::before,#login-screen::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none; }
    #login-screen::before { width:32rem; height:32rem; right:-12rem; top:-12rem; }
    #login-screen::after { width:22rem; height:22rem; left:-10rem; bottom:-9rem; }
    .login-card { max-width:470px; border-color:rgba(255,255,255,.18); background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055)); box-shadow:0 32px 80px rgba(0,0,0,.34); }
    .login-logo { width:104px; height:104px; padding:5px; margin:0 auto 1.25rem; display:grid; place-items:center; border-radius:24px; background:#fff; color:#102a43; box-shadow:0 14px 30px rgba(227,167,47,.26); }
    .login-logo svg { width:38px; height:38px; }
    .form-input { min-height:48px; font-family:inherit; border-color:rgba(255,255,255,.16); }
    .form-input::placeholder { color:#93a9b7; }
    .form-input:focus { box-shadow:0 0 0 4px rgba(227,167,47,.16); }

    .sidebar { background:linear-gradient(180deg,#fff 0%,#f2f7f7 100%); border-right-color:rgba(16,42,67,.08); }
    .brand { padding:1.7rem 1.4rem; }
    .brand-icon { width:48px; height:48px; border-radius:15px; background:linear-gradient(145deg,#0c3145,#1d5b67); box-shadow:0 10px 22px rgba(16,42,67,.2); }
    .nav-menu { padding:1.35rem .9rem; } .nav-section { margin-bottom:1.55rem; }
    .nav-item { border:1px solid transparent; margin-bottom:.28rem; }
    .nav-item:hover { background:#eaf3f1; color:#0b6b5a; }
    .nav-item.active { background:linear-gradient(100deg,#0d4051,#176e68); box-shadow:0 12px 22px -12px rgba(16,78,95,.65); }
    .user-profile { background:rgba(234,243,241,.7); }
    .avatar { background:linear-gradient(135deg,#f8d36d,#e3a72f); }

    .main-content { padding:2.25rem; }
    .top-bar-panel { padding:1.15rem 1.35rem; border-radius:22px; background:rgba(255,255,255,.82); box-shadow:0 12px 32px rgba(16,42,67,.08); }
    .page-title h1 { font-size:clamp(1.45rem,2vw,2rem); } .page-kicker { color:#9a6300; background:#fff3d8; }
    .icon-btn:hover { transform:translateY(-2px); background:#fff8e9; }
    .stats-grid { gap:1.25rem; }
    .stat-card,.profile-card,.table-container { background:rgba(255,255,255,.88); border-color:rgba(16,42,67,.09); box-shadow:0 14px 34px rgba(16,42,67,.07); }
    .stat-card { border-radius:22px; } .stat-card:hover { transform:translateY(-6px); border-color:rgba(227,167,47,.38); }
    .stat-icon { border-radius:16px; } .table-container { border-radius:20px; }
    .custom-table th { background:#eff6f5; color:#476578; } .custom-table tr:hover { background:#fffbf2; }
    .btn-premium { min-height:46px; border-radius:13px; } .btn-secondary,.btn-outline { min-height:40px; border-radius:11px; }
    .btn-success { background:var(--emerald); } .btn-success:hover { background:#0e735e; }
    .premium-modal { background:rgba(5,27,38,.72); } .modal-content { box-shadow:0 28px 70px rgba(5,27,38,.22); }
    [data-theme="dark"] .sidebar { background:linear-gradient(180deg,#102c3a,#0b1f2a); }
    [data-theme="dark"] .top-bar-panel,[data-theme="dark"] .stat-card,[data-theme="dark"] .profile-card,[data-theme="dark"] .table-container,[data-theme="dark"] .modal-content { background:rgba(16,44,58,.92); border-color:rgba(171,194,203,.16); }
    [data-theme="dark"] .custom-table th { background:#153b4a; color:#c5d8dd; } [data-theme="dark"] .user-profile { background:rgba(5,22,30,.28); }
    @media (max-width:1024px) { .main-content { padding:1.25rem; } }
    @media (max-width:640px) { .main-content { padding:.8rem; } .top-bar-panel { border-radius:17px; padding:1rem; } .login-logo { width:64px; height:64px; border-radius:20px; } .login-card { padding:1.5rem 1rem; } }

    /* Système visuel 2026 — contraste, cohérence et accessibilité */
    :root {
        --primary:#123e52;
        --primary-light:#1d6072;
        --accent:#a85f00;
        --accent-hover:#824900;
        --emerald:#08745f;
        --bg-body:#f2f6f7;
        --surface:#ffffff;
        --text-main:#172f3d;
        --text-light:#526b78;
        --border:#cfdee3;
        --success:#08745f;
        --danger:#b4232f;
        --warning:#9a5700;
        --info:#175fa8;
        --focus-ring:0 0 0 4px rgba(18,96,114,.20);
        --shadow-sm:0 3px 12px rgba(15,54,70,.08);
        --shadow-md:0 12px 30px rgba(15,54,70,.10);
        --shadow-lg:0 24px 55px rgba(15,54,70,.15);
    }
    [data-theme="dark"] {
        --primary:#f0f7f9; --primary-light:#c5e2e7; --accent:#ffc966;
        --accent-hover:#ffdc96; --bg-body:#071b25; --surface:#102f3c;
        --text-main:#f3f8fa; --text-light:#bdd0d7; --border:#385967;
        --success:#66d6b8; --danger:#ff9299; --warning:#ffd078; --info:#8dc5ff;
    }
    body { font-size:15px; line-height:1.55; color:var(--text-main); }
    p,li,td,label,input,select,textarea,button { letter-spacing:.005em; }
    h1,h2,h3,h4 { line-height:1.25; }
    a { color:#075f72; text-underline-offset:3px; }
    [data-theme="dark"] a { color:#85d7e4; }
    :focus-visible { outline:3px solid #19768c; outline-offset:3px; box-shadow:none; }

    .sidebar { background:linear-gradient(180deg,#ffffff 0%,#edf5f5 100%); border-right:1px solid #cbdde2; }
    .brand { border-bottom-color:#d7e5e8; }
    .brand-icon { background:linear-gradient(145deg,#0b3548,#17666d); color:#ffd06f; }
    .brand-text h2 { color:#123e52; }
    .brand-text span,.nav-title { color:#5c727d; }
    .nav-item { color:#395765; min-height:46px; font-weight:650; }
    .nav-item:hover { color:#0c5d62; background:#deefed; border-color:#c3e0dc; }
    .nav-item.active { color:#fff; background:linear-gradient(100deg,#123e52,#087063); box-shadow:0 9px 22px rgba(8,74,74,.22); }
    .user-profile { background:#e6f0f1; }
    .user-info h4 { color:#173b4b; }
    .avatar { color:#3d2600; background:#ffc95f; }

    .main-content { background:linear-gradient(180deg,#f7fafb 0%,#eef4f5 100%); }
    .top-bar-panel,.stat-card,.profile-card,.table-container,.content-card {
        background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm);
    }
    .content-card { border-radius:18px; overflow:hidden; }
    .card-header { padding:1.15rem 1.25rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; align-items:center; }
    .card-header h3 { margin:0; color:#173f50; }
    .card-header p { margin:.2rem 0 0; color:var(--text-light); }
    .page-title h1,.stat-value,.profile-card .value { color:#123e52; }
    .page-title p,.stat-label { color:#526b78; }
    .page-kicker { color:#704000; background:#fff0ce; border:1px solid #f3d18d; }
    .stat-card:hover { border-color:#87b9b2; box-shadow:var(--shadow-md); }

    .btn-premium,.btn-success {
        color:#fff; background:linear-gradient(135deg,#126878,#075e55); border:1px solid transparent;
        box-shadow:0 8px 18px rgba(8,94,85,.20); font-weight:750;
    }
    .btn-premium:hover,.btn-success:hover { color:#fff; background:linear-gradient(135deg,#0d5664,#064b45); box-shadow:0 10px 22px rgba(8,80,76,.28); }
    #login-screen .btn-premium { color:#2d210b; background:linear-gradient(135deg,#ffd777,#e9a92e); box-shadow:0 10px 24px rgba(227,167,47,.25); }
    #login-screen .btn-premium:hover { background:linear-gradient(135deg,#ffe39a,#f1bb4d); }
    .btn-secondary { color:#244958; background:#f4f8f9; border-color:#b9d0d6; }
    .btn-secondary:hover { color:#074f5c; background:#e5f1f2; border-color:#5c9eaa; }
    .btn-outline { color:#086173; border:2px solid #388494; background:#fff; }
    .btn-outline:hover { color:#fff; background:#126878; border-color:#126878; }
    .btn-danger { background:#b4232f; }
    .btn-danger:hover { background:#8f1822; }
    button:disabled { filter:grayscale(.25); opacity:.58; }

    #app-layout .form-input,
    #app-layout input:not([type="checkbox"]):not([type="radio"]),
    #app-layout select,
    #app-layout textarea,
    .modal-content .form-input {
        color:#172f3d; background:#fff; border:1px solid #aebfc6; min-height:46px;
        border-radius:10px; font-family:inherit; font-size:.95rem;
    }
    #app-layout input::placeholder,.modal-content input::placeholder,.modal-content textarea::placeholder { color:#71858e; opacity:1; }
    #app-layout .form-input:focus,#app-layout input:focus,#app-layout select:focus,#app-layout textarea:focus,.modal-content .form-input:focus {
        border-color:#176f81; box-shadow:var(--focus-ring); background:#fff;
    }
    #app-layout .form-label,.modal-content .form-label { color:#294b59; font-weight:700; }
    input[type="checkbox"],input[type="radio"] { accent-color:#087063; }
    .field-error { color:#a61625; font-weight:650; }

    .custom-table th { color:#294f5e; background:#eaf2f3; border-bottom:2px solid #c1d6db; font-weight:800; }
    .custom-table td { color:#203b48; border-bottom-color:#dbe6e9; }
    .custom-table tbody tr:nth-child(even) { background:#f8fafb; }
    .custom-table tr:hover { background:#eef8f5; }
    .table-container { overflow-x:auto; }
    .badge-success { color:#05614f; background:#d9f3ea; }
    .badge-warning,.badge-pending { color:#754100; background:#fff0ce; }
    .badge-danger { color:#9c1d28; background:#ffe2e4; }
    .badge-info { color:#124f8a; background:#e1efff; }
    .badge-primary { color:#173f50; background:#e2edf0; }

    .premium-modal { background:rgba(3,20,29,.76); }
    .modal-content { color:var(--text-main); background:#fff; border:1px solid #cfdee3; border-radius:18px; max-height:92vh; overflow-y:auto; }
    .modal-content h2,.modal-content h3,.modal-content h4 { color:#173f50; }
    .icon-btn { color:#294b59; background:#fff; border-color:#bcd0d6; }
    .icon-btn:hover { color:#075e68; background:#e8f4f2; border-color:#6da7ab; transform:translateY(-2px); }

    #login-screen .form-input { color:#fff; background:rgba(4,25,35,.36); border-color:rgba(255,255,255,.35); }
    #login-screen .form-input::placeholder { color:#c1d1d8; }
    #login-screen .form-input:focus { border-color:#ffd06f; background:rgba(4,25,35,.55); }
    #login-screen .form-label,#login-screen .password-option { color:#eef5f7; }
    #login-screen .field-error { color:#ff9ca3; }

    [data-theme="dark"] .sidebar,[data-theme="dark"] .main-content,[data-theme="dark"] .user-profile { background:#0b2632; }
    [data-theme="dark"] .brand-text h2,[data-theme="dark"] .user-info h4,[data-theme="dark"] .page-title h1,[data-theme="dark"] .stat-value,[data-theme="dark"] .card-header h3,[data-theme="dark"] .modal-content h3 { color:#f0f7f9; }
    [data-theme="dark"] .nav-item { color:#c6d9df; }
    [data-theme="dark"] .nav-item:hover { color:#fff; background:#173c48; border-color:#315866; }
    [data-theme="dark"] .top-bar-panel,[data-theme="dark"] .stat-card,[data-theme="dark"] .profile-card,[data-theme="dark"] .table-container,[data-theme="dark"] .content-card,[data-theme="dark"] .modal-content { background:#102f3c; border-color:#385967; }
    [data-theme="dark"] .custom-table th { color:#e1edf0; background:#173c49; border-color:#466875; }
    [data-theme="dark"] .custom-table td { color:#edf5f7; border-color:#31515e; }
    [data-theme="dark"] .custom-table tbody tr:nth-child(even) { background:#123440; }
    [data-theme="dark"] .custom-table tr:hover { background:#194550; }
    [data-theme="dark"] #app-layout .form-input,[data-theme="dark"] #app-layout input:not([type="checkbox"]):not([type="radio"]),[data-theme="dark"] #app-layout select,[data-theme="dark"] #app-layout textarea,[data-theme="dark"] .modal-content .form-input { color:#f3f8fa; background:#0b2632; border-color:#53717d; }
    [data-theme="dark"] #app-layout .form-label,[data-theme="dark"] .modal-content .form-label { color:#dbe8ec; }
    [data-theme="dark"] .icon-btn,[data-theme="dark"] .btn-outline,[data-theme="dark"] .btn-secondary { color:#e4f0f3; background:#173b47; border-color:#53717d; }
    [data-theme="dark"] { --scroll-track:rgba(255,255,255,.08); --scroll-thumb:#62808b; --scroll-thumb-hover:#f5bd43; }

    @media (max-width:768px) {
        body { font-size:14px; }
        .main-content { padding:.85rem; }
        .top-bar-panel { position:relative; border-radius:14px; }
        .card-header { align-items:flex-start; flex-direction:column; }
        .custom-table { min-width:680px; }
        .modal-content { width:100%; border-radius:15px; padding:1rem; }
        .stats-grid { gap:.8rem; }
        .stat-card { padding:1.15rem; }
    }

    /* Défilement stable de l’espace créateur */
    #login-screen.creator-active {
        position:fixed;
        inset:0;
        width:100%;
        height:100vh;
        height:100dvh;
        min-height:0;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:auto;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y;
        scrollbar-gutter:stable;
        align-items:center;
        justify-content:flex-start;
        padding:2rem max(1rem,env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
    }
    #login-screen.creator-active .login-card,
    #login-screen.creator-active #creatorUsersPanel { flex:0 0 auto; }
    #login-screen.creator-active #creatorUsersPanel { max-width:1100px; padding-bottom:4rem; }
    #login-screen.creator-active #creatorTeacherSubjects { overscroll-behavior:auto; }
    @media (max-width:640px) {
        #login-screen.creator-active { padding-top:1rem; }
        #login-screen.creator-active #creatorUsersPanel { padding-left:0; padding-right:0; }
        #login-screen.creator-active #creatorTeacherSubjects { max-height:none !important; }
    }
    #login-screen.personal-register-active {
        align-items: flex-start;
        overflow-y: auto;
        scroll-behavior: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        scroll-padding-block: 1rem;
    }
    #login-screen.personal-register-active .login-card {
        flex: 0 0 auto;
        margin: auto 0;
    }
    /* Diagrammes statistiques */
    .analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1.25rem 0; }
    .chart-card { background:var(--surface,#fff); border:1px solid var(--border); border-radius:20px; padding:1.25rem; box-shadow:var(--shadow-sm); min-width:0; }
    .chart-card.chart-wide { grid-column:1/-1; }
    .chart-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
    .chart-heading h3 { margin:0; color:var(--text-main); font-size:1rem; }
    .chart-heading p { margin:.3rem 0 0; color:var(--text-light); font-size:.78rem; }
    .chart-total { font-weight:800; color:var(--primary); white-space:nowrap; }
    .chart-svg { display:block; width:100%; min-height:230px; overflow:visible; }
    .chart-axis { stroke:var(--border); stroke-width:1; stroke-dasharray:3 3; }
    .chart-axis-line { stroke:var(--text-light); stroke-width:1.15; opacity:.7; }
    .chart-label { fill:var(--text-light); font-size:11px; }
    .chart-value { fill:var(--text-main); font-size:12px; font-weight:700; }
    .chart-bar { cursor:help; transform-box:fill-box; transform-origin:center bottom; animation:chart-bar-grow .65s cubic-bezier(.22,1,.36,1) both; transition:filter .18s ease,opacity .18s ease; }
    .chart-bar:hover { filter:brightness(.88); opacity:1; }
    @keyframes chart-bar-grow { from { transform:scaleY(0); opacity:.35; } to { transform:scaleY(1); opacity:.78; } }
    @media (prefers-reduced-motion:reduce) { .chart-bar { animation:none; } }
    .donut-layout { display:flex; align-items:center; justify-content:center; gap:1.5rem; min-height:210px; flex-wrap:wrap; }
    .donut-chart { width:150px; height:150px; border-radius:50%; position:relative; flex:0 0 auto; box-shadow:inset 0 0 0 1px var(--border); }
    .donut-chart::after { content:''; position:absolute; inset:30px; border-radius:50%; background:var(--surface,#fff); box-shadow:0 0 0 1px var(--border); }
    .chart-legend { display:grid; gap:.65rem; min-width:170px; }
    .legend-row { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:.55rem; font-size:.8rem; color:var(--text-main); }
    .legend-dot { width:10px; height:10px; border-radius:3px; }
    .chart-empty { display:grid; place-items:center; min-height:210px; padding:1rem; color:var(--text-light); text-align:center; border:1px dashed var(--border); border-radius:14px; }
    .announcement-zone { display:grid; gap:.65rem; margin:-.5rem 0 1.25rem; }
    .announcement-strip { display:flex; align-items:flex-start; gap:.8rem; padding:.85rem 1rem; border-radius:14px; border:1px solid #93c5fd; background:#eff6ff; color:#173b4b; box-shadow:var(--shadow-sm); }
    .announcement-strip.warning { border-color:#f5c96a; background:#fff7df; }
    .announcement-strip.urgent { border-color:#fca5a5; background:#fff1f2; }
    .announcement-strip.success { border-color:#86d6b1; background:#ecfdf5; }
    .announcement-strip strong { display:block; margin-bottom:.15rem; }
    .announcement-strip p { margin:0; font-size:.84rem; line-height:1.45; }
    .announcement-meta { color:var(--text-light); font-size:.72rem; margin-top:.3rem; }
    .announcement-form-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:.8rem; padding:1rem; }
    [data-theme="dark"] .announcement-strip { background:#13394a; color:#edf7fa; border-color:#3c7184; }
    [data-theme="dark"] .announcement-strip.warning { background:#493914; border-color:#806323; }
    [data-theme="dark"] .announcement-strip.urgent { background:#4a2028; border-color:#8c4652; }
    [data-theme="dark"] .announcement-strip.success { background:#143d32; border-color:#34745f; }
    [data-theme="dark"] .chart-card { background:#102f3c; }
    [data-theme="dark"] .donut-chart::after { background:#102f3c; }
    @media (max-width:900px) { .analytics-grid { grid-template-columns:1fr; } .chart-card.chart-wide { grid-column:auto; } }
    @media (max-width:900px) { .announcement-form-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:560px) { .announcement-form-grid { grid-template-columns:1fr; } }
    @media (max-width:480px) { .chart-card { padding:1rem .75rem; } .donut-layout { gap:1rem; } }

    /* Paiement parent : contraste stable en thèmes clair et sombre */
    #app-layout.role-parent .payment-hero {
        color:#fff;
        background:linear-gradient(135deg,#123e52 0%,#0b5964 55%,#087063 100%);
        border:1px solid rgba(255,255,255,.22);
        box-shadow:0 16px 32px rgba(7,48,62,.22);
    }
    #app-layout.role-parent .payment-hero::before {
        background:rgba(255,201,95,.18);
    }
    #app-layout.role-parent .payment-hero h2 {
        color:#fff !important;
        font-size:clamp(1.35rem,2.4vw,1.8rem);
        text-shadow:0 1px 2px rgba(0,0,0,.28);
    }
    #app-layout.role-parent .payment-hero p {
        max-width:720px;
        margin:.35rem auto 0;
        color:#eaf7f7 !important;
        font-size:.95rem;
        font-weight:600;
        line-height:1.6;
        text-shadow:0 1px 1px rgba(0,0,0,.2);
    }
    [data-theme="dark"] #app-layout.role-parent .top-bar-panel .page-title h1 {
        color:#fff4d6;
    }
    [data-theme="dark"] #app-layout.role-parent .top-bar-panel .page-title p {
        color:#d7e7eb;
    }

    /* Protection dissuasive : les contrôles de formulaire restent sélectionnables. */
    body { -webkit-user-select:none; user-select:none; }
    input, textarea, select, [contenteditable="true"] { -webkit-user-select:text; user-select:text; }
    img, svg { -webkit-user-drag:none; }
    .content-protection-notice {
        position:fixed; z-index:100000; left:50%; bottom:1.25rem;
        max-width:min(90vw,620px); padding:.8rem 1rem;
        border:1px solid rgba(255,255,255,.25); border-radius:.65rem;
        color:#fff; background:#132f3b; box-shadow:0 10px 30px rgba(0,0,0,.3);
        font-size:.88rem; font-weight:600; text-align:center;
        opacity:0; pointer-events:none; transform:translate(-50%,1rem);
        transition:opacity .18s ease, transform .18s ease;
    }
    .content-protection-notice.is-visible { opacity:1; transform:translate(-50%,0); }