/* Conteneur principal pour les ballons et les bulles */
#bulle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Style commun des ballons */
.bulle {
    position: absolute;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    will-change: transform, opacity, background-color;
    transition: opacity 0.5s, background-color 2s linear;
    transform-origin: center;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 4px 8px rgba(0, 0, 0, 0.2);
    animation: colorChange 10s linear infinite, rotateBulle 5s ease-in-out infinite alternate;
    position: relative;
}

/* Corde du ballon */
.bulle::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: #ccc;
}

/* Style du texte à l'intérieur des ballons */
.text {
    color: #000;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    opacity: 1;
    transform-origin: center;
    font-size: clamp(8px, 1.5vw, 24px);
    line-height: 1;
    padding: 5px;
    font-family: 'Segoe Script', 'Bradley Hand', cursive, sans-serif;
}


/* Couleurs de base des ballons (couleurs festives) */
.bulle-bleue { background-color: rgba(173, 216, 230, 0.8); } /* Bleu clair */
.bulle-orange { background-color: rgba(255, 204, 153, 0.8); } /* Orange pastel */
.bulle-rouge  { background-color: rgba(255, 182, 193, 0.8); } /* Rose pastel */
.bulle-verte  { background-color: rgba(144, 238, 144, 0.8); } /* Vert clair */

/* Animation de changement de couleur progressive */
@keyframes colorChange {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Rotation limitée à +/- 45 degrés */
@keyframes rotateBulle {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

@keyframes rotateBulleReverse {
    0% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* Animation d'apparition (zoom) */
@keyframes fadeInZoom {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

/* Animation de disparition (fondu) */
.fade-out {
    opacity: 0;
    transition: opacity 3s ease;
}

/* Style pour les boîtes cadeaux */
.gift-box {
    position: absolute;
    bottom: -100px; /* Augmenter la distance entre le ballon et le cadeau */
    left: 50%;
    transform: translateX(-50%);
    width: 75px; /* Augmenter la taille des cadeaux */
    height: 50px; /* Augmenter la taille des cadeaux */
    border-radius: 4px;
    background-color: #ff6600;
    border: 2px solid #ff3300;
}

/* Style pour les rubans des cadeaux */
.gift-ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background-color: #ff3366;
    border-radius: 2px;
}

/* Style pour les fils des cadeaux */
.gift-string {
    position: absolute;
    bottom: -20px; /* Positionner le fil entre le ballon et le cadeau */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 80px; /* Longueur du fil */
    background: #ccc;
    animation: swing 2s ease-in-out infinite alternate;
}

/* Animation pour le fil des cadeaux */
@keyframes swing {
    0% { transform: translateX(-50%) rotate(-10deg); }
    100% { transform: translateX(-50%) rotate(10deg); }
}

/* Style pour les anciennes bulles */
.old-bubble {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    will-change: transform, opacity, background-color;
    transition: opacity 0.5s, background-color 2s linear;
    transform-origin: center;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 4px 8px rgba(0, 0, 0, 0.3);
    animation: colorChange 10s linear infinite, rotateBulle 5s ease-in-out infinite alternate;
}

/* Style pour les feux d'artifice */
.firework {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ff0;
    border-radius: 50%;
    opacity: 0;
    animation: firework 2s ease-out forwards;
}

/* Animation pour les feux d'artifice */
@keyframes firework {
    0% { opacity: 1; transform: scale(0); }
    100% { opacity: 0; transform: scale(2); }
}

/* Style pour les confettis */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f00;
    opacity: 0;
    animation: confetti 3s ease-out forwards;
}

/* Animation pour les confettis */
@keyframes confetti {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(100px); }
}