/* ===================================
   INSTRURAP - DESIGN SYSTEM v2.0
   Système de design moderne et cohérent
   =================================== */

:root {
    /* === COULEURS PRIMAIRES (ROUGE) === */
    --primary-500: #EF4444;
    --primary-600: #DC2626;
    --primary-700: #B91C1C;
    --primary-400: #F87171;
    --primary-300: #FCA5A5;

    /* === COULEURS ACCENT === */
    --accent-500: #10B981;
    --accent-600: #059669;
    --accent-400: #34D399;
    --accent-300: #6EE7B7;

    /* === BACKGROUNDS (sombre) === */
    --bg-app: #0C0C0E;
    --bg-elevated: #161618;
    --bg-card: #1C1C20;
    --bg-card-hover: #26262C;
    --bg-input: #232329;
    --bg-overlay: rgba(12, 12, 14, 0.95);

    /* === TEXTE === */
    --text-primary: #FFFFFF;
    --text-secondary: #B3B3B3;
    --text-tertiary: #8A8A8A;
    --text-muted: #6A6A6A;

    /* === BORDURES === */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* === OMBRES === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);

    /* === RAYONS DE BORDURE === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* === ESPACEMENTS === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* === TYPOGRAPHIE === */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;

    /* === TRANSITIONS === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === DIMENSIONS LAYOUT === */
    --sidenav-width: 260px;
    --sidenav-collapsed-width: 72px;
    --right-panel-width: 300px;

    /* === Z-INDEX === */
    --z-sidenav: 1000;
    --z-header: 900;
    --z-modal: 2000;
    --z-dropdown: 1500;
    --z-player: 950;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-app) !important;
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === SCROLLBAR CUSTOM === */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-elevated);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card-hover);
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-elevated);
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

.bg-card { background-color: var(--bg-card); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-card-hover { background-color: var(--bg-card-hover); }

.border-subtle { border-color: var(--border-subtle); }
.border-medium { border-color: var(--border-medium); }

.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* === GRADIENTS === */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-500) 100%);
}

.gradient-glass {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(20px);
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.animate-fadeIn { animation: fadeIn var(--transition-base); }
.animate-slideInLeft { animation: slideInLeft var(--transition-base); }
.animate-slideInUp { animation: slideInUp var(--transition-base); }
.animate-scaleIn { animation: scaleIn var(--transition-base); }

/* === LOADING STATES === */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 0%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* === FOCUS STATES === */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* === SELECTION === */
::selection {
    background-color: var(--primary-500);
    color: white;
}

::-moz-selection {
    background-color: var(--primary-500);
    color: white;
}

/* ===================================
   THÈME CLAIR
   =================================== */
[data-theme="light"] {
    --bg-app: #FFFFFF; /* comme Arid Labs : fond blanc, cartes gris léger, menu un cran plus sombre */
    --bg-elevated: #F6F7F9;
    --bg-card: #F3F4F7;
    --bg-card-hover: #EAEBF0;
    --bg-input: #FFFFFF;
    --bg-overlay: rgba(255, 255, 255, 0.97);

    --text-primary: #09090B;
    --text-secondary: #52525B;
    --text-tertiary: #71717A;
    --text-muted: #A1A1AA;

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.11);
    --border-strong: rgba(0, 0, 0, 0.20);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.18);

    /* Rouges clairs (liens, libellés) illisibles sur blanc : on assombrit */
    --primary-300: #EF4444;
    --primary-400: #DC2626;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-card);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #C0C0C8;
    border-color: var(--bg-card);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #A0A0A8;
}

/* Équivalents clairs des couleurs codées en dur dans les pages (générés : var(--lt-…, couleur sombre)).
   En sombre ces variables n'existent pas : chaque page garde sa couleur d'origine. */
[data-theme="light"] {
    --lt-000000: #FFFFFF;
    --lt-050608: #FFFFFF;
    --lt-080a0f: #FFFFFF;
    --lt-0a0a0c: #FFFFFF;
    --lt-0a0d12: #FDFEFE;
    --lt-0c0c0e: #FFFFFF;
    --lt-0d0e10: #FDFDFD;
    --lt-11141a: #F3F5F7;
    --lt-121417: #F5F6F8;
    --lt-12151b: #F2F4F6;
    --lt-141414: #F7F7F7;
    --lt-141417: #F5F5F6;
    --lt-15171a: #F2F3F4;
    --lt-171717: #F4F4F4;
    --lt-17171c: #F0F0F2;
    --lt-17191d: #EFF0F2;
    --lt-191d24: #E8EBEF;
    --lt-1a1a1a: #F0F0F0;
    --lt-1a1a1f: #ECECEF;
    --lt-1a1a2e: #DEDEED;
    --lt-1b1b1b: #EFEFEF;
    --lt-1b1d21: #EAEBEE;
    --lt-1d1c25: #E7E6EC;
    --lt-1d2025: #E6E8EB;
    --lt-1d2129: #E2E5EB;
    --lt-1f1f1f: #EBEBEB;
    --lt-202027: #E4E4E8;
    --lt-202328: #E3E5E8;
    --lt-202329: #E2E4E8;
    --lt-212832: #D9DEE6;
    --lt-222222: #E8E8E8;
    --lt-222831: #DADEE5;
    --lt-252525: #E4E4E4;
    --lt-25282d: #DDDFE3;
    --lt-262626: #E3E3E3;
    --lt-272a30: #DADCE1;
    --lt-272b33: #D7DAE0;
    --lt-272c34: #D6DAE0;
    --lt-282828: #E1E1E1;
    --lt-292c31: #D8DBDF;
    --lt-2a2c2f: #DADCDE;
    --lt-2e2e2e: #DADADA;
    --lt-323741: #C7CCD4;
    --lt-333333: #D5D5D5;
    --lt-343943: #C5C9D2;
    --lt-383838: #CFCFCF;
    --lt-3a3c42: #C5C7CC;
    --lt-3a3d43: #C4C7CC;
    --lt-3f4550: #B7BCC6;
    --lt-555b65: #9FA5AE;
    --lt-576fe6: #1C36BA;
    --lt-59606b: #999FAA;
    --lt-5f6368: #9B9FA4;
    --lt-60a5fa: #0761D0;
    --lt-626975: #8E94A0;
    --lt-626976: #8D93A0;
    --lt-636363: #A0A0A0;
    --lt-64a1ff: #0054D6;
    --lt-64ffda: #00D6A3;
    --lt-656565: #9E9E9E;
    --lt-666666: #9D9D9D;
    --lt-667eea: #1A37BC;
    --lt-676767: #9C9C9C;
    --lt-686e78: #8A909A;
    --lt-69707b: #878E98;
    --lt-69707c: #868D98;
    --lt-6f7681: #808792;
    --lt-707070: #929292;
    --lt-707784: #7D8491;
    --lt-70a7ff: #0052D6;
    --lt-71717a: #878790;
    --lt-71717c: #858590;
    --lt-737985: #7C828E;
    --lt-737a85: #7C838E;
    --lt-747b86: #7B828C;
    --lt-777e89: #777E89;
    --lt-7f858f: #707781;
    --lt-858b95: #6A707A;
    --lt-86efac: #19BD54;
    --lt-8e949d: #616770;
    --lt-8f96a1: #5D646F;
    --lt-8f96a2: #5C636F;
    --lt-9298a3: #5B616B;
    --lt-939baa: #5E6778;
    --lt-93c5fd: #0465D2;
    --lt-94a3b8: #556781;
    --lt-9da2ab: #52575F;
    --lt-9da3ad: #50565F;
    --lt-a78bfa: #3A09CD;
    --lt-a7f3d0: #1ABC72;
    --lt-a8adb7: #454A53;
    --lt-aab2c0: #5B677B;
    --lt-ababb4: #484850;
    --lt-acaebd: #3E404F;
    --lt-aeb3bc: #3F444D;
    --lt-aeb4bd: #3E444C;
    --lt-aeb5c0: #3B424C;
    --lt-afb7c1: #3A424B;
    --lt-b4b4b4: #474747;
    --lt-bfbfbf: #3B3B3B;
    --lt-c1c1c1: #393939;
    --lt-c3c7ce: #2C2F35;
    --lt-c4b5fd: #3006D1;
    --lt-c5c9d0: #292D33;
    --lt-c7c7c7: #323232;
    --lt-c7cbd2: #272B31;
    --lt-c9c9d2: #27272F;
    --lt-c9cdd4: #25292F;
    --lt-cbd5e1: #4E6888;
    --lt-d5d8dd: #1B1E22;
    --lt-d5d8de: #1A1D21;
    --lt-d6dee7: #12181F;
    --lt-d8dbe0: #181A1E;
    --lt-dfe2e7: #111316;
    --lt-e1e3e7: #101214;
    --lt-e4e7eb: #0C0E11;
    --lt-e5e5e5: #111111;
    --lt-e5e7eb: #0C0D10;
    --lt-e7eaf0: #08090C;
    --lt-e8eaed: #0A0B0C;
    --lt-eff4f7: #010202;
    --lt-f2f2f2: #030303;
    --lt-f2f3f5: #010101;
    --lt-f3f4f6: #000000;
    --lt-f4f5f7: #000000;
    --lt-f4f6fa: #000000;
    --lt-f5f3ff: #000000;
    --lt-f5f5f5: #000000;
    --lt-f5f6f8: #000000;
    --lt-f5f7fa: #000000;
    --lt-f6f6f8: #000000;
    --lt-f6f7f9: #000000;
    --lt-f7f8fa: #000000;
    --lt-f86d92: #CC0A3E;
    --lt-f87171: #CC0A0A;
    --lt-fca5a5: #CF0707;
    --lt-fd6d94: #D3033B;
    --lt-fde68a: #D3A904;
    --lt-fecaca: #D20404;
    --lt-ff4f78: #D60032;
    --lt-ff6b6b: #D60000;
    --lt-ff8b8f: #D60007;
    --lt-ff8ca8: #D60034;
    --lt-ffd166: #D69600;
    --lt-ffd5d6: #D60005;
    --lt-ffdce5: #D60037;
    --lt-ffe8ee: #D60038;
    --lt-fff7f7: #000000;
    --lt-ffffff: #000000;
    --lt-r0-0-0-a00: rgba(0, 0, 0, 0.0);
    --lt-r0-0-0-a008: rgba(0, 0, 0, 0.028);
    --lt-r0-0-0-a01: rgba(0, 0, 0, 0.035);
    --lt-r0-0-0-a014: rgba(0, 0, 0, 0.049);
    --lt-r0-0-0-a015: rgba(0, 0, 0, 0.052);
    --lt-r0-0-0-a018: rgba(0, 0, 0, 0.063);
    --lt-r0-0-0-a02: rgba(0, 0, 0, 0.07);
    --lt-r0-0-0-a022: rgba(0, 0, 0, 0.077);
    --lt-r0-0-0-a025: rgba(0, 0, 0, 0.087);
    --lt-r0-0-0-a026: rgba(0, 0, 0, 0.091);
    --lt-r0-0-0-a028: rgba(0, 0, 0, 0.098);
    --lt-r0-0-0-a03: rgba(0, 0, 0, 0.105);
    --lt-r0-0-0-a032: rgba(0, 0, 0, 0.112);
    --lt-r0-0-0-a034: rgba(0, 0, 0, 0.119);
    --lt-r0-0-0-a035: rgba(0, 0, 0, 0.122);
    --lt-r0-0-0-a036: rgba(0, 0, 0, 0.126);
    --lt-r0-0-0-a04: rgba(0, 0, 0, 0.14);
    --lt-r0-0-0-a042: rgba(0, 0, 0, 0.147);
    --lt-r0-0-0-a045: rgba(0, 0, 0, 0.158);
    --lt-r0-0-0-a048: rgba(0, 0, 0, 0.168);
    --lt-r0-0-0-a05: rgba(0, 0, 0, 0.175);
    --lt-r0-0-0-a054: rgba(0, 0, 0, 0.189);
    --lt-r0-0-0-a058: rgba(0, 0, 0, 0.203);
    --lt-r0-0-0-a06: rgba(0, 0, 0, 0.21);
    --lt-r0-0-0-a065: rgba(0, 0, 0, 0.227);
    --lt-r0-0-0-a07: rgba(0, 0, 0, 0.245);
    --lt-r0-0-0-a072: rgba(0, 0, 0, 0.252);
    --lt-r0-0-0-a075: rgba(0, 0, 0, 0.262);
    --lt-r0-0-0-a08: rgba(0, 0, 0, 0.28);
    --lt-r0-0-0-a09: rgba(0, 0, 0, 0.315);
    --lt-r0-0-0-a095: rgba(0, 0, 0, 0.332);
    --lt-r10-10-10-a046: rgba(0, 0, 0, 0.161);
    --lt-r10-10-10-a072: rgba(0, 0, 0, 0.252);
    --lt-r10-10-10-a092: rgba(0, 0, 0, 0.322);
    --lt-r10-10-10-a095: rgba(0, 0, 0, 0.332);
    --lt-r10-10-10-a098: rgba(0, 0, 0, 0.343);
    --lt-r11-13-17-a088: rgba(0, 0, 0, 0.308);
    --lt-r12-12-14-a05: rgba(0, 0, 0, 0.175);
    --lt-r12-12-14-a06: rgba(0, 0, 0, 0.21);
    --lt-r12-12-14-a085: rgba(0, 0, 0, 0.297);
    --lt-r13-17-23-a042: rgba(0, 0, 0, 0.147);
    --lt-r13-17-23-a095: rgba(0, 0, 0, 0.332);
    --lt-r13-17-23-a098: rgba(0, 0, 0, 0.343);
    --lt-r15-15-20-a082: rgba(0, 0, 0, 0.287);
    --lt-r160-160-170-a016: rgba(0, 0, 0, 0.16);
    --lt-r20-20-24-a072: rgba(0, 0, 0, 0.252);
    --lt-r20-20-24-a094: rgba(0, 0, 0, 0.329);
    --lt-r231-234-240-a01: rgba(0, 0, 0, 0.1);
    --lt-r231-234-240-a013: rgba(0, 0, 0, 0.13);
    --lt-r231-234-240-a014: rgba(0, 0, 0, 0.14);
    --lt-r231-234-240-a016: rgba(0, 0, 0, 0.16);
    --lt-r231-234-240-a018: rgba(0, 0, 0, 0.18);
    --lt-r231-234-240-a022: rgba(0, 0, 0, 0.22);
    --lt-r231-234-240-a028: rgba(0, 0, 0, 0.28);
    --lt-r255-255-255-a0012: rgba(0, 0, 0, 0.012);
    --lt-r255-255-255-a0014: rgba(0, 0, 0, 0.014);
    --lt-r255-255-255-a0015: rgba(0, 0, 0, 0.015);
    --lt-r255-255-255-a002: rgba(0, 0, 0, 0.02);
    --lt-r255-255-255-a0025: rgba(0, 0, 0, 0.025);
    --lt-r255-255-255-a003: rgba(0, 0, 0, 0.03);
    --lt-r255-255-255-a0035: rgba(0, 0, 0, 0.035);
    --lt-r255-255-255-a004: rgba(0, 0, 0, 0.04);
    --lt-r255-255-255-a0045: rgba(0, 0, 0, 0.045);
    --lt-r255-255-255-a005: rgba(0, 0, 0, 0.05);
    --lt-r255-255-255-a0055: rgba(0, 0, 0, 0.055);
    --lt-r255-255-255-a006: rgba(0, 0, 0, 0.06);
    --lt-r255-255-255-a0065: rgba(0, 0, 0, 0.065);
    --lt-r255-255-255-a007: rgba(0, 0, 0, 0.07);
    --lt-r255-255-255-a008: rgba(0, 0, 0, 0.08);
    --lt-r255-255-255-a0085: rgba(0, 0, 0, 0.085);
    --lt-r255-255-255-a009: rgba(0, 0, 0, 0.09);
    --lt-r255-255-255-a01: rgba(0, 0, 0, 0.1);
    --lt-r255-255-255-a011: rgba(0, 0, 0, 0.11);
    --lt-r255-255-255-a012: rgba(0, 0, 0, 0.12);
    --lt-r255-255-255-a013: rgba(0, 0, 0, 0.13);
    --lt-r255-255-255-a014: rgba(0, 0, 0, 0.14);
    --lt-r255-255-255-a015: rgba(0, 0, 0, 0.15);
    --lt-r255-255-255-a016: rgba(0, 0, 0, 0.16);
    --lt-r255-255-255-a018: rgba(0, 0, 0, 0.18);
    --lt-r255-255-255-a019: rgba(0, 0, 0, 0.19);
    --lt-r255-255-255-a02: rgba(0, 0, 0, 0.2);
    --lt-r255-255-255-a022: rgba(0, 0, 0, 0.22);
    --lt-r255-255-255-a024: rgba(0, 0, 0, 0.24);
    --lt-r255-255-255-a025: rgba(0, 0, 0, 0.25);
    --lt-r255-255-255-a026: rgba(0, 0, 0, 0.26);
    --lt-r255-255-255-a028: rgba(0, 0, 0, 0.28);
    --lt-r255-255-255-a03: rgba(0, 0, 0, 0.3);
    --lt-r255-255-255-a032: rgba(0, 0, 0, 0.32);
    --lt-r255-255-255-a045: rgba(0, 0, 0, 0.45);
    --lt-r255-255-255-a06: rgba(0, 0, 0, 0.6);
    --lt-r255-255-255-a068: rgba(0, 0, 0, 0.68);
    --lt-r255-255-255-a07: rgba(0, 0, 0, 0.7);
    --lt-r255-255-255-a072: rgba(0, 0, 0, 0.72);
    --lt-r255-255-255-a075: rgba(0, 0, 0, 0.75);
    --lt-r255-255-255-a076: rgba(0, 0, 0, 0.76);
    --lt-r255-255-255-a078: rgba(0, 0, 0, 0.78);
    --lt-r255-255-255-a08: rgba(0, 0, 0, 0.8);
    --lt-r255-255-255-a082: rgba(0, 0, 0, 0.82);
    --lt-r255-255-255-a085: rgba(0, 0, 0, 0.85);
    --lt-r255-255-255-a086: rgba(0, 0, 0, 0.86);
    --lt-r255-255-255-a088: rgba(0, 0, 0, 0.88);
    --lt-r255-255-255-a09: rgba(0, 0, 0, 0.9);
    --lt-r255-255-255-a092: rgba(0, 0, 0, 0.92);
    --lt-r255-255-255-a095: rgba(0, 0, 0, 0.95);
    --lt-r26-32-44-a098: rgba(0, 0, 0, 0.343);
    --lt-r6-7-10-a078: rgba(0, 0, 0, 0.273);
    --lt-r6-7-11-a074: rgba(0, 0, 0, 0.259);
    --lt-r7-8-11-a052: rgba(0, 0, 0, 0.182);
}

/* Bootstrap 4 pose un anneau bleu sur tout bouton cliqué : on le garde pour le clavier seulement */
button:focus:not(:focus-visible) {
    outline: none;
}

[data-theme="light"] .sidenav-quick-btn:hover {
    color: #DC2626;
}

/* Transition douce lors du changement de thème */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease !important;
}