html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /*#*/
    --main-color: #87bd6c;
    --text-color: #211d21;
    --white-green: #e6f3de;
    --blue-color: #1694e7;
    --yellow-color: #ffd800;
    --dotnet-color: #5027D5;
    --react-color: #61DAFB;
    --dark-green: #2e7d32;
}

body {
    min-height: 200vh;

    background:
        /* Ombre ultra-fine (droite et bas) */
            linear-gradient(90deg, transparent 98%, rgba(0, 0, 0, 0.05) 99%),
            linear-gradient(180deg, transparent 98%, rgba(0, 0, 0, 0.05) 99%),
                /* Lumière ultra-fine (gauche et haut) */
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                /* Ton dégradé de base */
            linear-gradient(
                    to bottom,
                    #e8f5e9 0%,    /* Très clair (Départ) */
                    #81c784 45%,   /* Intermédiaire ajouté pour lier les deux */
                    #2e7d32 100%   /* Foncé (Arrivée) */
            );
    /* On augmente légèrement la taille des carreaux pour aérer le design */
    background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px, 100% 100%;


    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
p, a, h1, span, h2 {
    color: var(--text-color);
    margin: 0;
}

.body-content {
    margin: 0 10%;
    margin-bottom: 24px;
}

/* Animations de base */
.reveal {
    opacity: 0;
    transform: scale(0.9); /* L'élément est légèrement plus petit */
    transition: all 0.7s cubic-bezier(0.17, 0.55, 0.55, 1);
}

.reveal.active {
    opacity: 1;
    transform: scale(1); /* Il reprend sa taille normale */
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }


/* --- 1. LE CONTENEUR (Gère le déplacement horizontal) --- */
.flying-container {
    position: fixed;
    left: -150px; /* On le cache un peu plus loin à gauche */
    /* La hauteur sera définie par le JS */
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    /* Permet de positionner la traînée par rapport au ballon */
    display: flex;
    align-items: center;
}

/* Quand cette classe est ajoutée, le conteneur traverse l'écran */
.flying-container.shoot {
    animation: moveAcrossScreen 3s linear forwards;
}

@keyframes moveAcrossScreen {
    to { left: 100vw; }
}


/* --- 2. LE BALLON (Gère la rotation) --- */
.ball {
    font-size: 50px;
    line-height: 1;
    /* Le ballon tourne UNIQUEMENT quand le parent a la classe .shoot */
    .flying-container.shoot & {
        animation: spinBall 3s linear forwards;
    }
}

@keyframes spinBall {
    to { transform: rotate(1080deg); } /* 3 tours */
}


/* --- 3. LA TRAÎNÉE (Gère l'effet visuel arrière) --- */
.trail {
    position: absolute;
    /* On place la traînée à gauche du ballon */
    right: 30px;
    height: 40px; /* Un peu moins haut que le ballon */
    width: 100px; /* Longueur de la traînée */
    z-index: -1; /* Important : DERRIÈRE le ballon */
    opacity: 0; /* Invisible par défaut */

    /* La traînée apparaît quand ça tire */
    .flying-container.shoot & {
        opacity: 1;
    }
}

/* === OPTION A : STYLE FLAMMES 🔥 === */
.trail.flames {
    /* Un dégradé radial étiré pour faire une forme de flamme */
    background: radial-gradient(ellipse at right, rgba(255, 230, 0, 0.8), rgba(255, 69, 0, 0.6) 40%, transparent 70%);
    /* Flou pour l'effet de chaleur */
    filter: blur(4px);
    /* Petite animation de scintillement */
    animation: flickerFlame 0.1s infinite alternate;
    /* Légèrement incliné */
    transform-origin: right center;
}

@keyframes flickerFlame {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
    100% { transform: scaleY(0.9) scaleX(1.1); opacity: 0.7; }
}