/* ═══════════════════════════════════════════════════
   ROOT.CSS — Variables globales, reset et base
   Fichier importé sur TOUTES les pages du site
   ═══════════════════════════════════════════════════ */

/* Variables globales (couleurs, espacements, transitions) */
:root {
    --primaire: #2d1f42;
    --primaire-clair: #3B2850;
    --secondaire: #6D6D6D;
    --sombre: #1E1E1E;
    --clair: #FFFFFF;
    --accentue: #8A63D2;
    --accentue-clair: #a78bfa;
    --accentue-rose: #FF7DEE;
    --succes: #4ADE80;
    --avertissement: #F59E0B;
    --danger: #EF4444;
    --transition: all 0.3s ease;
    --section-gap: 4rem;
    --card-radius: 20px;
    --card-padding: 1.5rem;
}

/* Reset global */
*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: inherit;
}

/* Base HTML / Body */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(160deg, var(--primaire) 0%, var(--primaire-clair) 45%, #2a1d3e 100%);
    background-attachment: fixed;
    color: var(--clair);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* ── Loader (écran de chargement) ── */
.chargement {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primaire);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}
.chargement-contenu {
    text-align: center;
    transform: translateY(-20px);
}
.chargement-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #8A63D2;
    animation: spin 1s ease-in-out infinite;
    margin: 0 auto 20px;
}
.texte-degrade-chargement {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(90deg, #8A63D2 0%, #FF7DEE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.fade-out {
    opacity: 0;
}

/* ── Utilitaire : texte dégradé ── */
.texte-degrade {
    background: linear-gradient(90deg, #8A63D2 0%, #FF7DEE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Animations au scroll (IntersectionObserver) ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal.revealed .reveal-delay-1 { transition-delay: 0.1s; }
.reveal.revealed .reveal-delay-2 { transition-delay: 0.2s; }
.reveal.revealed .reveal-delay-3 { transition-delay: 0.3s; }

/* ── Alertes toast (formulaire, notifications) ── */
.alerte-formulaire {
    position: fixed;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #262626;
    color: #fff;
    padding: 16px 28px;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    animation: fadeInScale 0.3s ease forwards;
    opacity: 0;
}
.alerte-formulaire.success {
    background: #00c46a;
}
.alerte-formulaire.error {
    background: #ff4d4f;
}
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ── Animation shake (champ invalide) ── */
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}