/* Reset global léger */
* {
    box-sizing: border-box;
}

/* BODY – MODE CLAIR */
body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    padding-top: 80px;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;

    /* Utilisation de la variable si elle existe, sinon couleur par défaut */
    color: var(--text-dark, #2d3748);

    /* Ton fond premium light */
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 248, 255, 0.55) 0%, transparent 70%),
        radial-gradient(circle at 80% 90%, rgba(240, 242, 250, 0.45) 0%, transparent 80%),
        #ffffff;
    
    /* CORRECTION : Fond fixe pour éviter les coupures au scroll */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* BODY – MODE SOMBRE */
.dark body {
    font-family: 'Inter', sans-serif;
    /* Couleur de fond via variable */
    background-color: var(--bg-dark, #1a1a2e);
    
    /* Force le texte en blanc en mode sombre */
    color: #ffffff; 

    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.05) 0%, transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 136, 0.05) 0%, transparent 25%);
    
    /* CORRECTION : Fond fixe pour éviter les coupures au scroll */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Bulles flottantes pour le dark mode */
.floating-dots {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    background-image:
        radial-gradient(circle at 20% 30%, #00ff88 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, #00ff88 1px, transparent 1px);
    background-size: 50px 50px;
    animation: dotsMove 20s linear infinite;
    display: none;
}

.dark .floating-dots {
    display: block;
}




@keyframes dotsMove {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 100px 100px, -100px -100px;
    }
}