:root[data-theme="dark"] {
    /* Primary & brand */
    --primary-color: #3b82f6;
    --color-primary: var(--primary-color);

    /* Backgrounds */
    --bg-page: #030712;
    --bg-card: #0c1224;
    --bg-hover: #131a2a;
    --bg-muted: #111827;
    --color-surface: #0c1224;

    /* Borders */
    --border-color: rgba(255,255,255,0.08);
    --color-border: rgba(255,255,255,0.08);

    /* Text */
    --text-primary: #f3f4f6;
    --text-secondary: #a5b4cb;
    --text-muted: #94a3b8;
    --muted: var(--text-muted);
    --color-text: #f3f4f6;
    --color-muted: #94a3b8;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.6);
    --shadow-md: 0 10px 30px rgba(2,6,23,0.45);
    --shadow-lg: 0 20px 60px rgba(2,6,23,0.65);
    --shadow-sm-dark: 0 4px 12px rgba(0,0,0,0.6);
    --shadow-md-dark: 0 10px 30px rgba(2,6,23,0.45);
    --shadow-lg-dark: 0 20px 60px rgba(2,6,23,0.65);

    /* Radius */
    --radius-lg: 16px;
    --radius-sm: 8px;

    /* Interactions */
    --btn-ghost-hover: rgba(255,255,255,0.06);
    --input-focus: rgba(59,130,246,0.35);

    /* Contextual colors */
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #0ea5e9;
    --danger: #ef4444;

    /* Spacing */
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;

    /* Transitions */
    --transition-fast: 0.15s ease;

    /* Container */
    --container-max: 1280px;
}

/* ===============================
   BASELINE
================================ */
[data-theme="dark"] body {
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
}

/* ===============================
   NAVBAR / FOOTER
================================ */
[data-theme="dark"] .navbar,
[data-theme="dark"] .footer {
    background: rgba(8,11,18,0.92);
    border-color: var(--border-color);
    color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .navbar__brand {
    color: var(--color-primary);
}

[data-theme="dark"] .navbar__links a,
[data-theme="dark"] .footer__links a {
    color: var(--text-secondary);
}

[data-theme="dark"] .navbar__links a:hover,
[data-theme="dark"] .footer__links a:hover,
[data-theme="dark"] .navbar__links a[aria-current="page"] {
    color: var(--color-primary);
    background: rgba(59,130,246,0.08);
}

[data-theme="dark"] .navbar__links a[aria-current="page"]::after {
    background: var(--color-primary);
}

[data-theme="dark"] .footer__content > span {
    color: var(--text-secondary);
}

/* ===============================
   LAYOUT
================================ */
[data-theme="dark"] main.container {
    background: transparent;
}

/* ===============================
   CARDS
================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .alumni-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dashboard-profiles,
[data-theme="dark"] .profile-wizard {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md-dark);
}

[data-theme="dark"] .alumni-card:hover {
    box-shadow: 0 36px 72px rgba(0,0,0,0.5);
}

[data-theme="dark"] .alumni-card__date,
[data-theme="dark"] .alumni-card__status,
[data-theme="dark"] .company-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .alumni-card__name,
[data-theme="dark"] .company-role {
    color: var(--text-primary);
}

[data-theme="dark"] .alumni-card__company {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-card__label {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-card__value {
    color: var(--text-primary);
}

[data-theme="dark"] .progress-bar {
    background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .progress {
    background: linear-gradient(90deg, var(--primary-color), #3b82f6);
}

/* ===============================
   ALERTS & FLASH MESSAGES
================================ */
[data-theme="dark"] .alert,
[data-theme="dark"] .flash-message {
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .flash-message--success {
    background: rgba(16,185,129,0.1);
    border-left-color: var(--color-success);
    color: #bbf7d0;
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .flash-message--error,
[data-theme="dark"] .flash-message--danger {
    background: rgba(239,68,68,0.1);
    border-left-color: var(--color-danger);
    color: #fecaca;
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .flash-message--warning {
    background: rgba(245,158,11,0.1);
    border-left-color: var(--color-warning);
    color: #fde68a;
}

[data-theme="dark"] .flash-message--info {
    background: rgba(14,165,233,0.1);
    border-left-color: var(--color-info);
    color: #bfdbfe;
}

[data-theme="dark"] .flash-message__close {
    color: var(--text-primary);
}

/* ===============================
   BUTTONS
================================ */
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.05);
    color: var(--text-primary);
    box-shadow: none;
}

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, var(--primary-color) 100%);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 6px 18px rgba(59,130,246,0.35);
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
    box-shadow: 0 8px 24px rgba(59,130,246,0.45);
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled),
[data-theme="dark"] .btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .btn-outline:hover:not(:disabled) {
    background: var(--primary-color);
    color: #fff;
}

[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
    background: var(--btn-ghost-hover);
}

[data-theme="dark"] .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 18px rgba(220,38,38,0.35);
}

[data-theme="dark"] .btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 6px 18px rgba(22,163,74,0.35);
}

/* ===============================
   FORMS
================================ */
[data-theme="dark"] label {
    color: var(--text-primary);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #94a3b8;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--input-focus);
    background: var(--bg-card);
}

[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .form-error,
[data-theme="dark"] .form-error-message {
    color: var(--color-danger);
}

/* ===============================
   DASHBOARD
================================ */
[data-theme="dark"] .dashboard-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.01), rgba(255,255,255,0.03));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md-dark);
}

[data-theme="dark"] .dashboard-header__title {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-header__subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .dashboard-search,
[data-theme="dark"] .dashboard-profiles {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md-dark);
}

[data-theme="dark"] .dashboard-search {
    background: rgba(255,255,255,0.02);
}

[data-theme="dark"] .dashboard-search__form input {
    border-color: var(--border-color);
    background: var(--bg-hover);
}

[data-theme="dark"] .dashboard-profiles__title {
    color: var(--text-primary);
}

/* ===============================
   PROFILE WIZARD / TIMELINE
================================ */
[data-theme="dark"] .wizard-header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .step-dot {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .step-dot.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

[data-theme="dark"] .step-dot.completed {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

[data-theme="dark"] .timeline-card,
[data-theme="dark"] .timeline-actions .btn,
[data-theme="dark"] .timeline {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .timeline::before {
    background: var(--border-color);
}

[data-theme="dark"] .timeline-card {
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm-dark);
}

[data-theme="dark"] .timeline-header strong {
    color: var(--text-primary);
}

[data-theme="dark"] .timeline-dot {
    background: var(--primary-color);
}

[data-theme="dark"] .legal-text {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

/* ===============================
   AUTH / REGISTER
================================ */
[data-theme="dark"] .auth-container,
[data-theme="dark"] .register-container {
    background: rgba(5,8,18,0.95);
}

[data-theme="dark"] .auth-card,
[data-theme="dark"] .register-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md-dark);
}

[data-theme="dark"] .auth-card__title,
[data-theme="dark"] .register-card__title {
    background: linear-gradient(135deg, var(--primary-color), #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .auth-card__subtitle,
[data-theme="dark"] .register-card__subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .auth-card__footer,
[data-theme="dark"] .register-card__footer {
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .auth-card__footer a,
[data-theme="dark"] .register-card__footer a {
    color: var(--color-primary);
}

[data-theme="dark"] .auth-card__options a {
    color: var(--color-primary);
}

[data-theme="dark"] .register-card__divider {
    color: var(--text-secondary);
}

[data-theme="dark"] .register-card__divider::before,
[data-theme="dark"] .register-card__divider::after {
    border-bottom-color: var(--border-color);
}

/* ===============================
   PROFILE DETAILS
================================ */
[data-theme="dark"] .profile-view {
    background: transparent;
}

[data-theme="dark"] .profile-view__header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-view__header h1 small {
    color: var(--text-secondary);
}

[data-theme="dark"] .profile-view__section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm-dark);
}

[data-theme="dark"] .profile-view__section h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-view__list li {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .profile-view__experiences,
[data-theme="dark"] .profile-view__experience {
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .profile-view__experience {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

[data-theme="dark"] .profile-view__experience h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-view__experience p.muted {
    color: var(--text-muted);
}

/* ===============================
   UTILITIES
================================ */
[data-theme="dark"] .badge {
    background: rgba(255,255,255,0.03);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-action {
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-action:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

[data-theme="dark"] .btn-action--primary {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

[data-theme="dark"] .btn-action--primary:hover {
    background: #1d4ed8;
}

[data-theme="dark"] .flash-messages {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-header__actions .btn-primary {
    box-shadow: 0 6px 18px rgba(59,130,246,0.25);
}

[data-theme="dark"] .avatar {
    background: linear-gradient(135deg, var(--primary-color), #2563eb);
}

/* ===============================
   FOCUS STATES
================================ */
[data-theme="dark"] :focus-visible,
[data-theme="dark"] a:focus,
[data-theme="dark"] button:focus {
    outline: 3px solid rgba(59,130,246,0.2);
    outline-offset: 2px;
}

[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] .btn-primary:focus-visible {
    outline: 3px solid rgba(59,130,246,0.3);
}
/* ===============================
   ADMIN PANEL
================================ */
[data-theme="dark"] .badge--admin {
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.2) 0%, rgba(252, 165, 165, 0.25) 100%);
    color: #fca5a5;
    border: 1px solid rgba(252, 165, 165, 0.3);
}

[data-theme="dark"] .badge--referent {
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.2) 0%, rgba(147, 197, 253, 0.25) 100%);
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.3);
}

[data-theme="dark"] .badge--user {
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.2) 0%, rgba(203, 213, 225, 0.25) 100%);
    color: #cbd5e0;
    border: 1px solid rgba(203, 213, 225, 0.3);
}

[data-theme="dark"] .btn-icon--info {
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.2) 0%, rgba(147, 197, 253, 0.25) 100%);
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.2);
}

[data-theme="dark"] .btn-icon--info:hover {
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.3) 0%, rgba(96, 165, 250, 0.35) 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .btn-icon--warning {
    background: linear-gradient(135deg, rgba(253, 186, 116, 0.2) 0%, rgba(251, 146, 60, 0.25) 100%);
    color: #fdba74;
    border: 1px solid rgba(253, 186, 116, 0.2);
}

[data-theme="dark"] .btn-icon--warning:hover {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3) 0%, rgba(249, 115, 22, 0.35) 100%);
    box-shadow: 0 4px 8px rgba(251, 146, 60, 0.4);
}

[data-theme="dark"] .btn-icon--danger {
    background: linear-gradient(135deg, rgba(252, 165, 165, 0.2) 0%, rgba(248, 113, 113, 0.25) 100%);
    color: #fca5a5;
    border: 1px solid rgba(252, 165, 165, 0.2);
}

[data-theme="dark"] .btn-icon--danger:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(239, 68, 68, 0.35) 100%);
    box-shadow: 0 4px 8px rgba(248, 113, 113, 0.4);
}

[data-theme="dark"] .alert-success {
    background: linear-gradient(135deg, rgba(167, 243, 208, 0.15) 0%, rgba(110, 231, 183, 0.2) 100%);
    color: #6ee7b7;
    border-color: rgba(110, 231, 183, 0.35);
}

[data-theme="dark"] .alert-warning {
    background: linear-gradient(135deg, rgba(253, 224, 71, 0.15) 0%, rgba(252, 211, 77, 0.2) 100%);
    color: #fcd34d;
    border-color: rgba(252, 211, 77, 0.35);
}

[data-theme="dark"] .alert-info {
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.15) 0%, rgba(96, 165, 250, 0.2) 100%);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.35);
}

[data-theme="dark"] .alert-danger {
    background: linear-gradient(135deg, rgba(252, 165, 165, 0.15) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.35);
}

[data-theme="dark"] .admin-table tbody tr:hover {
    background: var(--bg-hover);
}
/* ===============================
   SCHOOL YEAR CARDS – DARK MODE
================================ */

[data-theme="dark"] .school-year-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md-dark);
}

[data-theme="dark"] .school-year-card:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-lg-dark);
}

/* ===============================
   CARD HEADER
================================ */

[data-theme="dark"] .school-year-card__title {
    color: var(--text-primary);
}

/* ===============================
   CARD BODY / STATS
================================ */

[data-theme="dark"] .school-year-card__stat {
    color: var(--text-secondary);
}

[data-theme="dark"] .school-year-card__stat i {
    color: var(--primary-color);
}

/* ===============================
   CARD LINK
================================ */

[data-theme="dark"] .school-year-card__link {
    color: var(--primary-color);
}

[data-theme="dark"] .school-year-card__link:hover {
    color: #60a5fa; /* bleu plus clair pour contraste dark */
    transform: translateX(4px);
}

/* ===============================
   EMPTY STATE
================================ */

[data-theme="dark"] .no-data-message {
    background: var(--bg-hover);
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
}

/* ===============================
   BACK BUTTON
================================ */

[data-theme="dark"] .go-back {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .go-back:hover {
    background: rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

[data-theme="dark"] .search {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm-dark);
}

[data-theme="dark"] .search input[type="search"] {
    background: transparent;
    color: var(--text-primary);
}