Étape 3 : CSS - Le Thème “Clair et Aérien”

Nous voulons un fond clair et des bulles colorées mais douces.

Ouvrez style.css.

1. Variables et Reset

:root {
    /* Fond très clair, un bleu ciel imperceptible */
    --bg-color: #f0f8ff;
    --text-color: #333;
    /* Dégradé pour les bulles */
    --bubble-color: rgba(255, 255, 255, 0.8);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    overflow: hidden; /* CRUCIAL: Empêche les barres de défilement quand les bulles sortent */
    position: relative;
}

2. Le Conteneur

On veut qu’il prenne toute la place.

#bubble-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Derrière le texte */
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10; /* Devant les bulles */
    pointer-events: none; /* Les clics passent au travers pour créer des bulles */
}

h1 {
    font-size: 3rem;
    color: #4facfe;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

p {
    color: #666;
    margin-top: 10px;
}

3. Le style des Bulles (.bubble)

C’est ici qu’on définit à quoi ressemble une bulle. Note : La position (left, top) et la taille (width, height) seront définies dynamiquement en JS, mais on met les bases ici.

.bubble {
    position: absolute;
    bottom: -100px; /* Commence en bas de l'écran (caché) */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(173, 216, 230, 0.4));
    border-radius: 50%; /* Rond parfait */
    box-shadow:
        0 0 10px rgba(173, 216, 230, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.8);
    opacity: 0.7;
    animation: rise 10s infinite ease-in; /* L'animation qui fait tout */
    pointer-events: none;
}

/* On peut ajouter une petite variation de couleur si on veut */
.bubble::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 20%;
    height: 20%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    filter: blur(2px);
}

4. L’Animation “Rise” (Monter)

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
        transform: translateX(50px); /* Petit mouvement latéral */
    }
    100% {
        bottom: 110%; /* Sort par le haut */
        transform: translateX(-50px);
        opacity: 0;
    }
}

Avec ce CSS, dès qu’on ajoute un élément <span class="bubble"></span> dans le HTML, il va monter tout seul !