body {
    background-color: black;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: auto;
    /* Ajout de l'image de fond avec URL relative */
    background-image: url('https://bureau.neovalen.systems/background-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ampoules-lumineuses {
    text-align: center;
    margin: 20px 0;
    position: relative; /* Ajouté pour positionner correctement les éléments enfants comme le bouton */
}

.ampoules-lumineuses .ampoules-container {
    position: relative !important; /* Assure que le conteneur est relatif pour le positionnement absolu des ampoules */
    display: inline-block !important; /* S'adapte à la taille de l'image */
    width: 100% !important;
    max-width: 600px !important; /* Ajustez selon la taille souhaitée */
    line-height: 0 !important; /* Évite les espaces indésirables sous l'image */
    overflow: visible !important; /* Permet aux reflets d'être visibles même s'ils dépassent */
    /* Effet de vibration mécanique subtile pour simuler un appareil fixe */
    animation: mechanical-vibration 1s infinite ease-in-out !important;
    /* Effet de vignettage */
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8) !important;
}

/* Animation pour simuler une vibration mécanique subtile */
@keyframes mechanical-vibration {
    0% { transform: translateX(0.2px) translateY(0.2px); }
    50% { transform: translateX(-0.2px) translateY(-0.2px); }
    100% { transform: translateX(0.2px) translateY(0.2px); }
}

/* Ajout d'un calque pour simuler le grain de film */
.ampoules-lumineuses .ampoules-container::before {
    content: '';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJElEQVR42mNgYGD4//8/Axjo6Oi4uLiZmZkRkaGhgYGBgYGBgQEAF9AC7WZn0mYAAAAASUVORK5CYII=') repeat !important; /* Image de bruit générée */
    opacity: 0.1 !important; /* Grain subtil */
    pointer-events: none !important;
    z-index: 9 !important;
    animation: noise 0.2s infinite steps(10) !important; /* Animation rapide pour simuler le grain */
}

/* Animation pour le grain */
@keyframes noise {
    0% { background-position: 0 0; }
    100% { background-position: 10px 10px; }
}

/* Ajout d'un calque pour simuler un flou intermittent */
.ampoules-lumineuses .ampoules-container::after {
    content: '';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    filter: blur(1px) !important; /* Flou léger */
    opacity: 0.3 !important;
    pointer-events: none !important;
    z-index: 8 !important;
    animation: focus-adjust 10s infinite ease-in-out !important; /* Animation de flou pour simuler un focus manuel */
}

/* Animation pour simuler un ajustement de focus */
@keyframes focus-adjust {
    0% { filter: blur(0.5px); opacity: 0.2; }
    50% { filter: blur(1.5px); opacity: 0.4; }
    100% { filter: blur(0.5px); opacity: 0.2; }
}

.ampoules-lumineuses .ampoules-container img {
    width: 100% !important;
    height: auto !important;
    display: block !important; /* Évite les marges indésirables */
    opacity: 0.8 !important; /* Rend l'image principale légèrement transparente pour voir l'image de fond */
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; /* Permet les interactions avec l'image sous-jacente */
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse {
    position: absolute !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important; /* Permet les interactions avec les ampoules si nécessaire */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Bordure fine */
    box-sizing: border-box !important; /* Assure que la bordure est incluse dans les dimensions */
}

/* Reflet principal sur le sol avec ::after - Style aluminium brossé */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse::after {
    content: '';
    position: absolute !important;
    border-radius: 50% !important;
    /* Dégradé linéaire pour un effet aluminium brossé */
    background: linear-gradient(45deg, rgba(200, 200, 200, 0.8) 0%, rgba(230, 230, 230, 0.9) 50%, rgba(200, 200, 200, 0.8) 100%) !important;
    /* Ajout d'un motif de rainures subtiles */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px) !important;
    filter: blur(10px) !important; /* Flou réduit pour un aspect plus net */
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    /* Position initiale : centrée sous l'ampoule */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centre horizontalement par rapport à l'ampoule */
    /* Décalage vertical pour atteindre le sol */
    top: 100% !important;
    z-index: 5 !important; /* S'assurer que les reflets sont visibles, mais sous le badge "Direct Live" */
}

/* Reflet principal visible lorsque l'ampoule est allumée */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.active::after {
    opacity: 0.4 !important; /* Opacité inchangée pour un effet subtil */
}

/* Reflet principal invisible lorsque l'ampoule est éteinte */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.inactive::after {
    opacity: 0 !important;
}

/* Reflet principal pour D4 (légèrement plus blanc) */
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4::after {
    background: linear-gradient(45deg, rgba(210, 210, 210, 0.8) 0%, rgba(240, 240, 240, 0.9) 50%, rgba(210, 210, 210, 0.8) 100%) !important; /* Dégradé légèrement plus blanc */
}

/* Reflet supplémentaire pour toutes les ampoules avec ::before */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse::before {
    content: '';
    position: absolute !important;
    border-radius: 50% !important;
    /* Dégradé jaune par défaut */
    background: radial-gradient(circle at center, rgba(255, 235, 100, 0.8) 0%, rgba(255, 215, 0, 0.5) 50%, rgba(255, 215, 0, 0) 70%) !important;
    filter: blur(15px) !important; /* Flou réduit pour plus de visibilité */
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    /* Position : centrée sous l'ampoule, décalée de 15px à droite et 30px plus bas que ::after */
    left: 50% !important;
    top: 100% !important;
    z-index: 5 !important; /* Même niveau que le reflet principal */
}

/* Reflet supplémentaire visible lorsque l'ampoule est allumée */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.active::before {
    opacity: 0.4 !important; /* Opacité augmentée pour plus de visibilité */
}

/* Reflet supplémentaire invisible lorsque l'ampoule est éteinte */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.inactive::before {
    opacity: 0 !important;
}

/* Reflet supplémentaire pour D4 (légèrement plus blanc) */
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4::before {
    background: radial-gradient(circle at center, rgba(255, 245, 200, 0.8) 0%, rgba(255, 235, 150, 0.5) 50%, rgba(255, 235, 150, 0) 70%) !important; /* Dégradé légèrement plus blanc */
}

/* Troisième reflet (shadow mask) pour toutes les ampoules */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse .ampoule-lumineuse-shadow-mask {
    position: absolute !important;
    border-radius: 50% !important;
    /* Dégradé jaune par défaut */
    background: radial-gradient(circle at center, rgba(255, 235, 100, 0.8) 0%, rgba(255, 215, 0, 0.5) 50%, rgba(255, 215, 0, 0) 70%) !important;
    filter: blur(15px) !important; /* Flou réduit pour plus de visibilité */
    opacity: 0 !important; /* Par défaut, invisible */
    transition: opacity 0.3s ease !important;
    /* Position : décalée de 10px à droite et 20px vers le bas par rapport au cercle */
    left: 50% !important;
    top: 100% !important;
    transform: translateX(calc(-50% + 10px)) translateY(20px) !important; /* Décalage demandé */
    z-index: 6 !important; /* Au-dessus des autres reflets pour masquer l'ombre */
}

/* Troisième reflet visible lorsque l'ampoule est allumée */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.active .ampoule-lumineuse-shadow-mask {
    opacity: 0.1 !important; /* Très atténué pour toutes les ampoules sauf A1 */
}

/* Troisième reflet invisible lorsque l'ampoule est éteinte */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.inactive .ampoule-lumineuse-shadow-mask {
    opacity: 0 !important;
}

/* Troisième reflet pour D4 (légèrement plus blanc) */
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4 .ampoule-lumineuse-shadow-mask {
    background: radial-gradient(circle at center, rgba(255, 245, 200, 0.8) 0%, rgba(255, 235, 150, 0.5) 50%, rgba(255, 235, 150, 0) 70%) !important; /* Dégradé légèrement plus blanc */
}

/* Ajustement spécifique pour A1 : position aux coordonnées 181x, 184y */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse #shadow-mask-A1 {
    /* Positionnement absolu par rapport à .ampoules-overlay */
    left: 30.17% !important; /* Correspond à 181px sur une image de 600px de large */
    top: 30.67% !important; /* Correspond à 184px si l'image fait 600px de haut, ajuster si nécessaire */
    transform: none !important; /* Supprime le décalage relatif pour utiliser left/top absolus */
    width: 50px !important; /* Taille augmentée pour plus de visibilité */
    height: 50px !important;
    filter: blur(10px) !important; /* Flou réduit pour plus de netteté */
    box-shadow: 0 0 10px rgba(255, 235, 100, 0.7) !important; /* Ajout d'une lueur extérieure */
    z-index: 6 !important; /* Même niveau que les autres reflets */
}

/* Ajustement spécifique pour A1 : opacité plus visible */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.active #shadow-mask-A1 {
    opacity: 0.8 !important; /* Opacité augmentée pour plus de visibilité */
}

/* Tailles initiales pour laptop */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale {
    width: 38px !important;
    height: 38px !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale::after {
    width: 50px !important; /* Plus large que l'ampoule normale */
    height: 50px !important;
}

/* Tailles des reflets supplémentaires pour toutes les ampoules */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale::before {
    width: 50px !important; /* Même taille que le reflet principal */
    height: 50px !important;
}

/* Tailles du troisième reflet pour les ampoules normales */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale .ampoule-lumineuse-shadow-mask {
    width: 50px !important; /* Même taille que les autres reflets, sauf pour A1 */
    height: 50px !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse {
    width: 76px !important;
    height: 76px !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse::after {
    width: 101px !important; /* Plus large que l'ampoule grosse */
    height: 101px !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse::before {
    width: 101px !important; /* Même taille que le reflet principal */
    height: 101px !important;
}

/* Tailles du troisième reflet pour les ampoules grosses */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse .ampoule-lumineuse-shadow-mask {
    width: 101px !important; /* Même taille que les autres reflets */
    height: 101px !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.active {
    background: radial-gradient(circle at center, rgba(255, 235, 100, 0.9) 0%, rgba(255, 215, 0, 0.4) 50%, rgba(255, 215, 0, 0) 70%) !important; /* Dégradé radial pour simuler une lumière */
    box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.5), /* Lueur extérieure */
                0 0 40px 20px rgba(255, 235, 100, 0.3) !important; /* Lueur plus douce */
}

/* Éclairage légèrement plus blanc pour les ampoules B4 et C4 lorsqu'elles sont actives */
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4.active,
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4.active {
    background: radial-gradient(circle at center, rgba(255, 255, 240, 0.9) 0%, rgba(245, 245, 245, 0.4) 50%, rgba(245, 245, 245, 0) 70%) !important; /* Dégradé radial plus blanc */
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5), /* Lueur extérieure blanche */
                0 0 40px 20px rgba(240, 240, 240, 0.3) !important; /* Lueur plus douce blanche */
}

/* Éclairage pour D4 (un peu plus blanc mais avec une teinte jaunâtre) */
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4.active {
    background: radial-gradient(circle at center, rgba(255, 245, 200, 0.9) 0%, rgba(255, 235, 150, 0.4) 50%, rgba(255, 235, 150, 0) 70%) !important; /* Dégradé légèrement plus blanc mais jaunâtre */
    box-shadow: 0 0 20px 10px rgba(255, 235, 150, 0.5), /* Lueur extérieure légèrement plus claire */
                0 0 40px 20px rgba(255, 245, 200, 0.3) !important; /* Lueur plus douce légèrement plus claire */
}

/* Appliquer l'animation pulse uniquement aux ampoules normales allumées */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale.active {
    animation: pulse 2s infinite ease-in-out !important;
}

/* Pas d'animation pulse pour les grosses ampoules allumées */
.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse.active {
    animation: none !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.inactive {
    background: radial-gradient(circle at center, rgba(50, 50, 50, 0.5) 0%, rgba(0, 0, 0, 0.3) 70%) !important; /* Fond noir transparent */
    box-shadow: none !important;
    opacity: 0.5 !important; /* Opacité réduite */
}

/* Animation de pulsation pour les ampoules normales allumées */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* Positions des reflets principaux pour laptop (écrans > 767px) */
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A1 {
    left: 13.10% !important;
    top: 12.82% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A1::after {
    transform: translateX(-50%) translateY(40px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A1::before {
    transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A2 {
    left: 34.59% !important;
    top: 12.32% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A2::after {
    transform: translateX(-50%) translateY(40px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A2::before {
    transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A3 {
    left: 55.73% !important;
    top: 11.62% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A3::after {
    transform: translateX(-50%) translateY(40px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A3::before {
    transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A4 {
    left: 74.66% !important;
    top: 08.12% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A4::after {
    transform: translateX(-50%) translateY(45px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A4::before {
    transform: translateX(calc(-50% + 15px)) translateY(75px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B1 {
    left: 12.51% !important;
    top: 32.04% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B1::after {
    transform: translateX(-50%) translateY(35px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B1::before {
    transform: translateX(calc(-50% + 15px)) translateY(65px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B2 {
    left: 31.66% !important;
    top: 29.04% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B2::after {
    transform: translateX(-50%) translateY(40px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B2::before {
    transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B3 {
    left: 53.24% !important;
    top: 28.64% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B3::after {
    transform: translateX(-50%) translateY(40px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B3::before {
    transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4 {
    left: 75.87% !important;
    top: 28.44% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4::after {
    transform: translateX(-50%) translateY(40px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4::before {
    transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C1 {
    left: 10.42% !important;
    top: 48.93% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C1::after {
    transform: translateX(-50%) translateY(30px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C1::before {
    transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C2 {
    left: 32.66% !important;
    top: 48.03% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C2::after {
    transform: translateX(-50%) translateY(30px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C2::before {
    transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C3 {
    left: 57.13% !important;
    top: 50.53% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C3::after {
    transform: translateX(-50%) translateY(25px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C3::before {
    transform: translateX(calc(-50% + 15px)) translateY(55px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4 {
    left: 76.06% !important;
    top: 48.03% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4::after {
    transform: translateX(-50%) translateY(30px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4::before {
    transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D1 {
    left: 10.72% !important;
    top: 68.40% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D1::after {
    transform: translateX(-50%) translateY(20px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D1::before {
    transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D2 {
    left: 33.66% !important;
    top: 68.20% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D2::after {
    transform: translateX(-50%) translateY(20px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D2::before {
    transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D3 {
    left: 53.94% !important;
    top: 67.60% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D3::after {
    transform: translateX(-50%) translateY(20px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D3::before {
    transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
}

.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4 {
    left: 76.57% !important;
    top: 68.20% !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4::after {
    transform: translateX(-50%) translateY(20px) !important;
}
.ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4::before {
    transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
}

/* Styles pour le badge "Direct Live" */
.ampoules-lumineuses .live-badge {
    position: absolute !important;
    top: 10px !important; /* Position en haut */
    right: 10px !important; /* Position à droite */
    display: flex !important; /* Utiliser flex pour aligner le point et le texte */
    align-items: center !important; /* Centrer verticalement */
    z-index: 10 !important; /* S'assurer que le badge est au-dessus de l'image */
}

.ampoules-lumineuses .live-dot {
    display: inline-block !important;
    width: 10px !important; /* Taille initiale du point */
    height: 10px !important;
    background-color: red !important; /* Couleur rouge */
    border-radius: 50% !important; /* Forme circulaire */
    margin-right: 5px !important; /* Espacement entre le point et le texte */
    animation: pulse-dot 1.5s infinite ease-in-out !important; /* Animation de pulsation */
}

/* Animation pour le point rouge */
@keyframes pulse-dot {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.ampoules-lumineuses .live-text {
    color: white !important; /* Texte blanc pour contraster */
    font-size: 12px !important; /* Taille de police */
    font-weight: bold !important;
    line-height: 1 !important; /* Éviter les décalages de texte */
}

/* Styles pour le conteneur des boutons */
.ampoules-lumineuses .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espacement de base entre les boutons */
    margin: 10px 0;
}

/* Styles pour les boutons avec icônes */
.ampoules-lumineuses #toggle-sounds,
.ampoules-lumineuses #info-button,
.ampoules-lumineuses #buy-button {
    width: 40px; /* Largeur fixe pour les icônes */
    height: 40px; /* Hauteur fixe pour les icônes */
    background-color: #666;
    color: white;
    border: none; /* S'assurer que le bouton n'a pas de bordure */
    border-radius: 20px;
    cursor: pointer;
    display: flex; /* Utiliser flex pour centrer l'icône */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    line-height: 1; /* Éviter tout décalage dû à la hauteur de ligne */
    padding: 0; /* Supprimer le padding pour que l'icône remplisse l'espace */
}

/* Ajustement spécifique pour le bouton "Son" */
.ampoules-lumineuses #toggle-sounds {
    margin-top: 15px; /* Descendre le bouton de 15px pour aligner avec les autres */
}

/* Ajustement spécifique pour le bouton "Info" */
.ampoules-lumineuses #info-button {
    text-decoration: none;
    margin-right: 15px; /* Ajouter un espacement supplémentaire à droite pour éloigner de #buy-button */
}

/* Ajustement spécifique pour le bouton "Acheter" */
.ampoules-lumineuses #buy-button {
    width: 44px; /* Légèrement plus grand pour équilibrer visuellement */
    height: 44px; /* Légèrement plus grand pour équilibrer visuellement */
    text-decoration: none;
}

/* Ajustement des tailles des icônes */
.ampoules-lumineuses #toggle-sounds i,
.ampoules-lumineuses #info-button svg,
.ampoules-lumineuses #buy-button i {
    font-size: 20px; /* Taille de l'icône ajustée pour équilibrer */
    width: 20px; /* Ajuster la taille du SVG */
    height: 20px; /* Ajuster la taille du SVG */
}

/* Ajustements pour laptop (écrans > 767px) */
@media (min-width: 768px) {
    .ampoules-lumineuses #toggle-sounds,
    .ampoules-lumineuses #info-button,
    .ampoules-lumineuses #buy-button {
        width: 44px !important; /* Uniformiser la taille des deux boutons sur laptop */
        height: 44px !important;
    }

    .ampoules-lumineuses #toggle-sounds {
        margin-top: 15px !important; /* Descendre le bouton de 15px pour aligner avec les autres */
    }

    .ampoules-lumineuses #info-button {
        margin-right: 15px !important; /* Maintenir l'espacement supplémentaire à droite */
    }

    .ampoules-lumineuses #vibrance-button {
        margin-bottom: 20px !important; /* Ajouter un espace supplémentaire sous "Voir la vibrance" */
    }

    .ampoules-lumineuses #toggle-sounds i,
    .ampoules-lumineuses #info-button svg,
    .ampoules-lumineuses #buy-button i {
        font-size: 20px !important; /* Maintenir la taille des icônes */
        width: 20px !important; /* Ajuster la taille du SVG */
        height: 20px !important; /* Ajuster la taille du SVG */
    }

    .ampoules-lumineuses .live-badge {
        top: 10px !important;
        right: 10px !important;
    }

    .ampoules-lumineuses .live-dot {
        width: 10px !important;
        height: 10px !important;
    }

    .ampoules-lumineuses .live-text {
        font-size: 12px !important;
    }
}

/* Ajustement pour mobile (écrans ≤ 767px) */
@media (max-width: 767px) {
    body {
        min-height: auto !important; /* Supprime la hauteur minimale par défaut */
        height: auto !important; /* La hauteur sera déterminée par le contenu */
        overflow: auto !important; /* Permet le défilement pour voir le bas de la page */
        align-items: flex-start !important; /* Aligne l'image principale avec le haut de la fenêtre */
        background-position: center bottom !important; /* Aligne l'image de fond avec le bas */
        flex-direction: column !important; /* S'assure que les éléments sont empilés verticalement */
    }

    .ampoules-lumineuses {
        margin: 20px 0 !important; /* Rétablit une marge pour éviter que le contenu soit collé en haut */
    }

    .ampoules-lumineuses .ampoules-container {
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important; /* Permet aux ampoules et reflets d'être visibles */
    }

    .ampoules-lumineuses .ampoules-container img {
        width: 100% !important;
        height: auto !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay {
        width: 100% !important;
        height: 100% !important;
    }

    /* Ajout d'une marge en bas pour s'assurer que le contenu suivant (texte et boutons) est visible */
    .ampoules-lumineuses .ampoules-container {
        margin-bottom: 60px !important; /* Espace pour le texte et les boutons */
    }

    /* Ajustement des styles pour le texte et les boutons */
    .ampoules-lumineuses #current-sequence,
    .ampoules-lumineuses #vibrance-button {
        display: block !important; /* S'assure qu'ils sont visibles */
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }

    /* Tailles réduites pour mobile */
    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale {
        width: 20px !important; /* Réduit par rapport à 38px */
        height: 20px !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale::after {
        width: 26px !important; /* Réduit proportionnellement */
        height: 26px !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale::before {
        width: 26px !important; /* Réduit proportionnellement */
        height: 26px !important;
    }

    /* Tailles du troisième reflet pour les ampoules normales sur mobile */
    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.normale .ampoule-lumineuse-shadow-mask {
        width: 26px !important; /* Réduit proportionnellement */
        height: 26px !important;
    }

    /* Ajustement spécifique pour A1 sur mobile */
    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse #shadow-mask-A1 {
        /* Positionnement absolu par rapport à .ampoules-overlay */
        left: 30.17% !important; /* Correspond à 181px sur une image de 600px de large */
        top: 30.67% !important; /* Correspond à 184px si l'image fait 600px de haut, ajuster si nécessaire */
        transform: none !important; /* Supprime le décalage relatif pour utiliser left/top absolus */
        width: 26px !important; /* Taille augmentée pour plus de visibilité */
        height: 26px !important;
        filter: blur(10px) !important; /* Flou réduit pour plus de netteté */
        box-shadow: 0 0 10px rgba(255, 235, 100, 0.7) !important; /* Ajout d'une lueur extérieure */
        z-index: 6 !important; /* Même niveau que les autres reflets */
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse {
        width: 40px !important; /* Réduit par rapport à 76px */
        height: 40px !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse::after {
        width: 52px !important; /* Réduit proportionnellement */
        height: 52px !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse::before {
        width: 52px !important; /* Réduit proportionnellement */
        height: 52px !important;
    }

    /* Tailles du troisième reflet pour les ampoules grosses sur mobile */
    .ampoules-lumineuses .ampoules-container .ampoules-overlay .ampoule-lumineuse.grosse .ampoule-lumineuse-shadow-mask {
        width: 52px !important; /* Réduit proportionnellement */
        height: 52px !important;
    }

    /* Positions initiales pour mobile (à ajuster manuellement) */
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A1 {
        left: 13.10% !important;
        top: 12.82% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A1::after {
        transform: translateX(-50%) translateY(30px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A1::before {
        transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A2 {
        left: 34.59% !important;
        top: 12.32% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A2::after {
        transform: translateX(-50%) translateY(30px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A2::before {
        transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A3 {
        left: 55.73% !important;
        top: 11.62% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A3::after {
        transform: translateX(-50%) translateY(30px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A3::before {
        transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A4 {
        left: 74.66% !important;
        top: 08.12% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A4::after {
        transform: translateX(-50%) translateY(35px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-A4::before {
        transform: translateX(calc(-50% + 15px)) translateY(65px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B1 {
        left: 12.51% !important;
        top: 32.04% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B1::after {
        transform: translateX(-50%) translateY(25px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B1::before {
        transform: translateX(calc(-50% + 15px)) translateY(55px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B2 {
        left: 31.66% !important;
        top: 29.04% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B2::after {
        transform: translateX(-50%) translateY(30px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B2::before {
        transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B3 {
        left: 53.24% !important;
        top: 28.64% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B3::after {
        transform: translateX(-50%) translateY(30px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B3::before {
        transform: translateX(calc(-50% + 15px)) translateY(60px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4 {
        left: 75.87% !important;
        top: 28.44% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4::after {
        transform: translateX(-50%) translateY(40px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-B4::before {
        transform: translateX(calc(-50% + 15px)) translateY(70px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C1 {
        left: 10.42% !important;
        top: 48.93% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C1::after {
        transform: translateX(-50%) translateY(20px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C1::before {
        transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C2 {
        left: 32.66% !important;
        top: 48.03% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C2::after {
        transform: translateX(-50%) translateY(20px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C2::before {
        transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C3 {
        left: 57.13% !important;
        top: 50.53% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C3::after {
        transform: translateX(-50%) translateY(15px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C3::before {
        transform: translateX(calc(-50% + 15px)) translateY(45px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4 {
        left: 76.06% !important;
        top: 48.03% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4::after {
        transform: translateX(-50%) translateY(20px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-C4::before {
        transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D1 {
        left: 10.72% !important;
        top: 68.40% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D1::after {
        transform: translateX(-50%) translateY(15px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D1::before {
        transform: translateX(calc(-50% + 15px)) translateY(45px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D2 {
        left: 33.66% !important;
        top: 68.20% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D2::after {
        transform: translateX(-50%) translateY(15px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D2::before {
        transform: translateX(calc(-50% + 15px)) translateY(45px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D3 {
        left: 53.94% !important;
        top: 67.60% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D3::after {
        transform: translateX(-50%) translateY(15px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D3::before {
        transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
    }

    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4 {
        left: 76.57% !important;
        top: 68.20% !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4::after {
        transform: translateX(-50%) translateY(20px) !important;
    }
    .ampoules-lumineuses .ampoules-container .ampoules-overlay #ampoule-lumineuse-D4::before {
        transform: translateX(calc(-50% + 15px)) translateY(50px) !important;
    }
}
/* Animation de clignotement lente pour le bouton "Tout le stock" */
@keyframes slow-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.ampoules-lumineuses #buy-button {
    animation: slow-blink 3s infinite ease-in-out !important; /* Clignotement lent sur 3 secondes */
    white-space: nowrap !important; /* Empêche le texte de passer à la ligne */
    padding: 10px 30px !important; /* Padding horizontal pour élargir le bouton */
    font-size: 16px !important; /* Taille de police conservée */
    line-height: 1 !important; /* Évite les décalages de hauteur de ligne */
    background-color: #e63946 !important; /* Nouvelle couleur rouge */
    color: white !important; /* Texte blanc pour le contraste */
}

/* Ajustements pour laptop (écrans > 767px) */
@media (min-width: 768px) {
    .ampoules-lumineuses #buy-button {
        padding: 14px 60px !important; /* Padding horizontal encore plus large sur laptop */
        font-size: 18px !important; /* Taille de police conservée */
        background-color: #e63946 !important; /* Couleur rouge conservée */
        color: white !important; /* Texte blanc conservé */
    }
}

/* Ajustements pour mobile (écrans ≤ 767px) */
@media (max-width: 767px) {
    .ampoules-lumineuses #buy-button {
        padding: 20px 55px !important; /* Padding horizontal légèrement plus large sur mobile */
        font-size: 14px !important; /* Taille de police conservée */
        background-color: #e63946 !important; /* Couleur rouge conservée */
        color: white !important; /* Texte blanc conservé */
    }
}