/* === RESET ET BASE STYLES === */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: var(--line-height-normal);
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: linear-gradient(
        135deg,
        var(--color-purple-200),
        var(--color-pink-200),
        var(--color-coral-200),
        var(--color-green-200),
        var(--color-purple-300),
        var(--color-pink-300),
        var(--color-coral-300),
        var(--color-green-300),
        var(--color-purple-200)
    );
    background-size: 500% 500%;
    animation: gradientShift 120s ease-in-out infinite;
}

/* Override pour empêcher Bulma de créer des scrollbars doubles */
html,
body {
    overflow-x: hidden; /* Pas de scroll horizontal */
}

/* Forcer une seule scrollbar verticale native */
body {
    overflow-y: hidden !important;
}

/* Empêcher Bulma de créer des conteneurs avec scroll */
.container,
.section,
.columns {
    overflow: visible !important;
}

/* Background animé avec gradient et particules */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    position: relative;
    min-height: 100vh;
}

/* Assure que le contenu passe devant les particules */
section,
main,
div:not(.floating-elements):not(.floating-circle):not(.soft-overlay) {
    position: relative;
    z-index: 10;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-small);
}

a {
    color: var(--primary-color-dark);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-easing);
    padding: var(--spacing-xs);
}

a:hover {
    color: var(--secondary-color-hover);
    text-decoration: underline;
    /* background-color: var(--glass-background); */
    /* border-radius: var(--border-radius-small) ;
    border: var(--glass-border-strong);
    box-shadow: var(--glass-shadow); */
}

strong {
    color: inherit;
}

/* Force la couleur blanche sur tous les éléments de formatage dans le contenu blanc */
.has-text-white strong,
.has-text-white em,
.has-text-white b,
.has-text-white i,
.has-text-white u,
.has-text-white span {
    color: white !important;
}

.content.has-text-white strong,
.content.has-text-white em,
.content.has-text-white b,
.content.has-text-white i,
.content.has-text-white u,
.content.has-text-white span {
    color: white !important;
}

/* === PARTICULES FLOTTANTES === */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(25px);
}

.floating-circle:nth-child(1) {
    width: 280px;
    height: 280px;
    background: radial-gradient(
        ellipse at center,
        var(--color-purple-200) 0%,
        var(--color-purple-300) 50%,
        transparent 85%
    );
    left: 5%;
    animation: floatWave1 65s infinite ease-in-out;
}

.floating-circle:nth-child(2) {
    width: 320px;
    height: 320px;
    background: radial-gradient(
        ellipse at center,
        var(--color-pink-200) 0%,
        var(--color-pink-300) 50%,
        transparent 85%
    );
    left: 75%;
    animation: floatWave2 72s infinite ease-in-out;
    animation-delay: -15s;
}

.floating-circle:nth-child(3) {
    width: 240px;
    height: 240px;
    background: radial-gradient(
        ellipse at center,
        var(--color-green-200) 0%,
        var(--color-green-300) 50%,
        transparent 85%
    );
    left: 30%;
    animation: floatWave3 60s infinite ease-in-out;
    animation-delay: -30s;
}

.floating-circle:nth-child(4) {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        ellipse at center,
        var(--color-coral-200) 0%,
        var(--color-coral-300) 50%,
        transparent 85%
    );
    left: 85%;
    animation: floatWave4 68s infinite ease-in-out;
    animation-delay: -45s;
}

/* Overlay subtil pour l'harmonie */
.soft-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
}