@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=DM+Sans:wght@300;400;500&display=swap");

:root {
    /* --- COULEURS UVCI --- */
    --uvci-purple: #8e1582;
    --uvci-purple-light: #a855f7;
    --uvci-purple-glow: rgba(142, 21, 130, 0.5);
    
    --uvci-green: #18a855;
    --uvci-green-glow: rgba(24, 168, 85, 0.4);
    
    --uvci-pink: #d946ef;
    --uvci-gold: #ffc832;

    /* --- FONDS ET SURFACES --- */
    --bg-dark: #07030a;
    --bg-deep: #070b14;
    --bg-surface: #0d1220;
    
    /* --- GLASSMORPHISM --- */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-light: rgba(255, 255, 255, 0.07);

    /* --- NAVIGATION & SIDEBAR --- */
    --h-height: 72px;
    --h-bg-scroll: rgba(10, 6, 20, 0.93);
    --h-border-scroll: rgba(255, 255, 255, 0.07);
    --sidebar-bg: #080413;
    --sidebar-w: 300px;

    /* --- ACCENTS & ÉTATS --- */
    --accent: #7c5cfc;
    --accent-light: #a98bff;
    --av: #00e5a0;
    --av-glow: rgba(0, 229, 160, 0.28);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.52);
}

/* --- REGLAGES GLOBAUX --- */
html, body {
    overflow-x: hidden;
    width: 100%;
    background-color: var(--bg-dark);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
}

.main {
    overflow-x: hidden;
    width: 100%;
    background-color: var(--bg-dark);
}

/* --- LAYOUT UTILS --- */
.container-custom {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container-custom {
        padding: 0 20px;
    }
}