/**
 * Variables CSS Globales - QuantisDigitale
 * Système de design selon charte graphique officielle
 */

/* Import des polices GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Variables par défaut ( Mode Sombre ) */
:root {
    /* Fonds */
    --couleur-fond-principal:#0B0F0E;
    --couleur-fond-secondaire:#0E1412;
    --couleur-fond-tertiaire:rgba(14, 20, 18, 0.8);
    --couleur-fond-carte:rgba(255, 255, 255, 0.05);
    --couleur-fond-carte-hover:rgba(255, 255, 255, 0.08);

    /* Textes */
    --couleur-texte:#F1F5F4;
    --couleur-texte-secondaire:rgba(241, 245, 244, 0.72);
    --couleur-texte-tertiaire:rgba(241, 245, 244, 0.5);

    /* Accents identitaires */
    --couleur-accent:#3BFF7A;
    --couleur-accent-hover:#32E06A;
    --couleur-accent-fonce:#2BC95B;
    --couleur-accent-secondaire:#E8D8C3;
    --couleur-accent-rare:#FF4D6D;

    /* Couleurs fonctionnelles */
    --couleur-succes:#3BFF7A;
    --couleur-succes-fond:rgba(59, 255, 122, 0.1);
    --couleur-succes-bordure:rgba(59, 255, 122, 0.3);
    --couleur-warning:#FFD166;
    --couleur-warning-fond:rgba(255, 209, 102, 0.1);
    --couleur-warning-bordure:rgba(255, 209, 102, 0.3);
    --couleur-info:#93C5FD;
    --couleur-info-fond:rgba(147, 197, 253, 0.1);
    --couleur-info-bordure:rgba(147, 197, 253, 0.3);
    --couleur-erreur:#FF4D6D;
    --couleur-erreur-fond:rgba(255, 77, 109, 0.1);
    --couleur-erreur-bordure:rgba(255, 77, 109, 0.3);

    /* Bordures */
    --couleur-bordure:rgba(255, 255, 255, 0.1);
    --couleur-bordure-focus:rgba(59, 255, 122, 0.3);
    --couleur-bordure-hover:rgba(255, 255, 255, 0.2);

    /* Dégradés */
    --degrade-principal:linear-gradient(135deg, #0B0F0E 0%, #0E1412 100%);
    --degrade-accent:linear-gradient(135deg, #3BFF7A 0%, #2bc95b 100%);
    --degrade-carte:linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --degrade-hero:linear-gradient(180deg, #0B0F0E 0%, #0E1412 50%, #0B0F0E 100%);

    /* Ombres */
    --ombre-xs:0 1px 2px rgba(0, 0, 0, 0.3);
    --ombre-sm:0 2px 8px rgba(0, 0, 0, 0.3);
    --ombre-md:0 4px 16px rgba(0, 0, 0, 0.4);
    --ombre-lg:0 8px 32px rgba(0, 0, 0, 0.5);
    --ombre-xl:0 12px 48px rgba(0, 0, 0, 0.6);
    --ombre-accent:0 4px 20px rgba(59, 255, 122, 0.3);
    --ombre-interne:inset 0 2px 4px rgba(0, 0, 0, 0.2);

    /** TYPOGRAPHIES **/

    /* Polices officielles */
    --polices-titres:'Space Grotesk', system-ui, -apple-system, sans-serif;
    --polices-texte:'Inter', system-ui, -apple-system, sans-serif;
    --police-code:'JetBrains Mono', 'Courier-New', monospace;

    /* Tailles de police */
    --texte-xs:0.75rem; /* 12px */
    --texte-sm:0.875rem; /* 14px */
    --texte-base:1rem; /* 16px */
    --texte-lg:1.125rem; /* 18px */
    --texte-xl:1.25rem; /* 20px */
    --texte-2xl:1.5rem; /* 24px */
    --texte-3xl:1.875rem; /* 30px */
    --texte-4xl:2.25rem; /* 36px */
    --texte-5xl:3rem; /* 48px */
    --texte-6xl:3.75rem; /* 60px */
    --texte-7xl:4.5rem; /* 72px */

    /* Poids de police */
    --poids-light:300;
    --poids-normal:400;
    --poids-medium:500;
    --poids-semibold:600;
    --poids-bold:700;
    --poids-extrabold:800;
    --poids-black:900;

    /* Hauteurs de ligne */
    --ligne-serree:1.25;
    --ligne-normale:1.75;
    --ligne-relachee:1.75;
    --ligne-double:2;

    /** ESPACEMENTS **/

    /* Espacements fixes */
    --espace-0:0;
    --espace-1:0.25rem;     /* 4px */
    --espace-2:0.5rem;      /* 8px */
    --espace-3:0.75rem;     /* 12px */
    --espace-4:1rem;        /* 16px */
    --espace-5:1.25rem;     /* 20px */
    --espace-6:1.5rem;      /* 24px */
    --espace-8:2rem;        /* 32px */
    --espace-10:2.5rem;     /* 40px */
    --espace-12:3rem;       /* 48px */
    --espace-16:4rem;       /* 64px */
    --espace-20:5rem;       /* 80px */
    --espace-24:6rem;       /* 96px */
    --espace-32:8rem;        /* 128px */

    /** BORDURES & RAYONS */

    /* Rayons de bordure */
    --rayon-none:0;
    --rayon-sm:0.25rem;     /* 4px */
    --rayon-md:0.375rem;    /* 6px */
    --rayon-lg:0.5rem;      /* 8px */
    --rayon-xl:0.75rem;     /* 12px */
    --rayon-2xl:1rem;       /* 16px */
    --rayon-3xl:1.5rem;     /* 24px */
    --rayon-rond:50%;
    --rayon-pilule:9999px;
    
    /* Largeurs de bordure */
    --bordure-0:0;
    --bordure-1:1px;
    --bordure-2:2px;
    --bordure-4:4px;
    --bordure-8:8px;

    /** TRANSITIONS & ANIMATIONS **/

    /* Durée */
    --duree-ultra-rapide:75ms;
    --duree-rapide:150ms;
    --duree-normale:300ms;
    --duree-lente:500ms;
    --duree-tres-lente:700ms;

    /* Easing functions */
    --easing-linear:linear;
    --easing-ease:ease;
    --easing-ease-in:ease-in;
    --easing-ease-out:ease-out;
    --easing-ease-in-out:ease-in-out;
    --easing-bounce:cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-smooth:cubic-bezier(0.4, 0, 0.2, 1);

    /* Transitions pré-configurées */
    --transition-rapide:all 150ms ease;
    --transition-normale:all 300ms ease;
    --transition-lente:all 500ms ease;
    --transition-couleur:background-color 300ms ease, color 300ms ease;
    --transition-transform:transform 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /** Z-INDEX **/
    --z-base:0;
    --z-dropdown:1000;
    --z-sticky:1020;
    --z-fixed:1030;
    --z-modal-backdrop:1040;
    --z-modal:1500;
    --z-popover:1060:
    --z-tooltip:1070;
    --z-notification:1080;

    /** RESPONSIVE BREAKPOINTS **/
    --breakpoint-xs:360px; /* Très petits mobiles */
    --breakpoint-sm:640px; /* Mobiles */
    --breakpoint-md:768px; /* Tablettes portrait */
    --breakpoint-lg:1024px; /* Tablettes payasage / Petits laptops */
    --breakpoint-xl:1280px; /* Laptops */
    --breakpoint-2xl:1536px; /* Grands écrans */
    --breakpoint-3xl:1920px; /* Très grands écrans */

    /** LARGEURS DE CONTENEURS **/
    --conteneur-xs:100%;
    --conteneur-sm:640px;
    --conteneur-md:768px;
    --conteneur-lg:1024px;
    --conteneur-xl:1280px;
    --conteneur-2xl:1400px;
    --conteneur-full:100%;

    /** LAYOUTS **/

    /* Header */
    --hauteur-header-mobile:64px;
    --hauteur-header-desktop:80px;

    /* Footer */
    --hauteur-footer-min:400px;

    /* Sidebar */
    --largeur-sidebar:280px;
    --largeur-sidebar-collapsed:80px;

    /** OPACITÉS **/
    --opacite-0:0;
    --opacite-10:0.1;
    --opacite-20:0.2;
    --opacite-30:0.3;
    --opacite-40:0.4;
    --opacite-50:0.5;
    --opacite-60:0.6;
    --opacite-70:0.7;
    --opacite-80:0.8;
    --opacite-90:0.9;
    --opacite-100:1;
    --opacite-disabled:0.5;
    --opacite-hover:0.8;
}

/* MODE CLAIR */

:root.clair,
[data-theme="clair"] {
    /* Fonds */
    --couleur-fond-principal:#FFFFFF;
    --couleur-fond-secondaire:#F8F9FA;
    --couleur-fond-tertiaire:#E9ECEF;
    --couleur-fond-carte:rgba(0, 0, 0, 0.03);
    --couleur-fond-carte-hover:rgba(0, 0, 0, 0.06);
    
    /* Textes */
    --couleur-texte:#1A1F1D;
    --couleur-texte-secondaire:rgba(26, 31, 29, 0.72);
    --couleur-texte-tertiaire:rgba(26, 31, 29, 0.5);
    
    /* Accents identitaires */
    --couleur-accent:#28B35E;
    --couleur-accent-hover:#229C51;
    --couleur-accent-fonce:#1D8544;
    --couleur-accent-secondaire:#C5A67A;
    --couleur-accent-rare:#DC3545;
    
    /* Couleurs fonctionnelles */
    --couleur-succes:#28B35E;
    --couleur-succes-fond:rgba(40, 179, 94, 0.1);
    --couleur-succes-bordure:rgba(40, 179, 94, 0.3);
    
    --couleur-warning:#F59E0B;
    --couleur-warning-fond:rgba(245, 158, 11, 0.1);
    --couleur-warning-bordure:rgba(245, 158, 11, 0.3);
    
    --couleur-info:#3B82F6;
    --couleur-info-fond:rgba(59, 130, 246, 0.1);
    --couleur-info-bordure:rgba(59, 130, 246, 0.3);
    
    --couleur-erreur:#DC3545;
    --couleur-erreur-fond:rgba(220, 53, 69, 0.1);
    --couleur-erreur-bordure:rgba(220, 53, 69, 0.3);
    
    /* Bordures */
    --couleur-bordure:rgba(0, 0, 0, 0.1);
    --couleur-bordure-focus:rgba(40, 179, 94, 0.3);
    --couleur-bordure-hover:rgba(0, 0, 0, 0.2);
    
    /* Dégradés */
    --degrade-principal:linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
    --degrade-accent:linear-gradient(135deg, #28B35E 0%, #1D8544 100%);
    --degrade-carte:linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    --degrade-hero:linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 50%, #FFFFFF 100%);
    
    /* Ombres */
    --ombre-xs:0 1px 2px rgba(0, 0, 0, 0.05);
    --ombre-sm:0 2px 8px rgba(0, 0, 0, 0.08);
    --ombre-md:0 4px 16px rgba(0, 0, 0, 0.12);
    --ombre-lg:0 8px 32px rgba(0, 0, 0, 0.16);
    --ombre-xl:0 12px 48px rgba(0, 0, 0, 0.2);
    --ombre-accent:0 4px 20px rgba(40, 179, 94, 0.25);
    --ombre-interne:inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* TRANSITION ENTRE THEMES */
html {
    transition:background-color var(--duree-normale) var(--easing-smooth);
}

*,
*::before,
*::after {
    transition:var(--transition-couleur);
}

a {
    text-decoration:none;
    color:inherit;
}

a:hover {
    text-decoration:none;
}

/* STYLE DE BASE */
body {
    background:var(--couleur-fond-principal);
    color:var(--couleur-texte);
    font-family:var(--polices-texte);
    font-size:var(--texte-base);
    font-weight:var(--poids-normal);
    line-height:var(--ligne-normale);
    margin:0;
    padding:0;
    -webkit-font-smoothing:antialised;
    -moz-osx-font-smoothing:grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:var(--polices-titres);
    font-weight:var(--poids-semibold);
    line-height:var(--ligne-serree);
    margin:0;
}

h1 {
    font-size:var(--texte-5xl);
}

h2 {
    font-size:var(--texte-4xl);
}

h3 {
    font-size:var(--texte-3xl);
}

h4 {
    font-size:var(--texte-2xl);
}

h5 {
    font-size:var(--texte-xl);
}

h6 {
    font-size:var(--texte-lg);
}

code, 
pre  {
    font-family:var(--police-code);
}

/* SCROLLBAR PERSONNALISÉE */
::-webkit-scrollbar {
    width:12px;
    height:12px;
}

::-webkit-scrollbar-track {
    background:var(--couleur-fond-secondaire);
    border-radius:var(--rayon-pilule);
}

::-webkit-scrollbar-thumb {
    background:var(--couleur-accent);
    border-radius:var(--rayon-pilule);
    border:2px solid var(--couleur-fond-secondaire);
}

::-webkit-scrollbar-thumb:hover {
    background:var(--couleur-accent-hover);
}

/* SÉLECTION DE TEXTE */
::selection {
    background:var(--couleur-accent);
    color:var(--couleur-fond-principal);
}

::-moz-selection {
    background:var(--couleur-accent);
    color:var(--couleur-fond-principal);
}

/* FOCUS VISIBLE */
*:focus-visible {
    outline:2px solid var(--couleur-accent);
    outline-offset:2px;
}

/* RESPONSIVE - UTILITAIRES */
@media (max-width:768px) {
    h1 {
        font-size:var(--texte-4xl);
    }

    h2 {
        font-size:var(--texte-3xl);
    }

    h3 {
        font-size:var(--texte-2xl);
    }
}

@media (max-width:480px) {
    h1 {
        font-size:var(--texte-3xl);
    }

    h2 {
        font-size:var(--texte-2xl);
    }

    h3 {
        font-size:var(--texte-xl);
    }
}