/* Effet 3D combiné : flottante3 (sanshover) et lumiere */
.troisD {
    position: relative;
    display: inline-block;
    transition: transform 0.5s ease, box-shadow 0.5s ease;

    /* L'effet de lévitation */
    transform: translateY(-50px);
	
    /* Ombre */
    box-shadow: 0px 60px 90px rgba(0, 0, 0, 0.7);

    /* Animation de lumière dynamique */
    animation: lumiere-troisD 5s ease-in-out infinite;
}

@keyframes lumiere-troisD {
    0% { box-shadow: 0px 60px 90px rgba(0, 0, 0, 0.7); }
    50% { box-shadow: 0px 65px 100px rgba(0, 0, 0, 0.85); }
    100% { box-shadow: 0px 60px 90px rgba(0, 0, 0, 0.7); }
}


.troisDtrans {
    position: relative;
    display: inline-block;
    transition: transform 0.5s ease, filter 0.5s ease;

    /* L'effet de lévitation */
    transform: translateY(-50px);
	
    /* Ombre qui suit la forme de l'image transparente */
    filter: drop-shadow(0px 30px 50px rgba(0, 0, 0, 0.7));

    /* Animation de lumière dynamique */
    animation: lumiere-troisDtrans 5s ease-in-out infinite;
}

@keyframes lumiere-troisDtrans {
    0% { filter: drop-shadow(0px 30px 50px rgba(0, 0, 0, 0.7)); }
    50% { filter: drop-shadow(0px 35px 60px rgba(0, 0, 0, 0.85)); }
    100% { filter: drop-shadow(0px 30px 50px rgba(0, 0, 0, 0.7)); }
}



/* BOUTON ROBOT */
/* Flottement continu du robot */
@keyframes flottement {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
    100% { transform: translateY(0px); }
}

/* Effet hover lumineux sur le robot */
#toggleEffect:hover {
    filter: brightness(1.1);
}

#toggleEffect {
    transition: filter 0.3s ease-in-out;
}

/* Quand le bouton désactive l'effet 3D, retour lent des images */
.retour3D {
    transform: translateY(0);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); /* Suppression progressive de l'ombre */
    transition: transform 0.5s ease, filter 0.5s ease; /* Même durée que l'effet d'activation */
}


/* EFFETS INDEPENDANTS */
/* Effet de flottement */
.flotte {
    animation: flottement 4s ease-in-out infinite;
}

/* Effet de lumière hover */
.lumiere-hover:hover {
    filter: brightness(1.1);
}
.lumiere-hover {
    transition: filter 0.3s ease-in-out;
}

/* Effet de balancement */
.balancement {
    animation: balancement 3s ease-in-out infinite;
}

@keyframes balancement {
    0% { transform: translateX(-5px) rotate(-2deg); }
    50% { transform: translateX(5px) rotate(2deg); }
    100% { transform: translateX(-5px) rotate(-2deg); }
}