/* style fonction setup */
#ensemble {
    background-color: transparent;
    position : sticky;
    top : 20px;
    border: none;
    box-shadow: none;
    display: none;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    
}

#boutonContainer {
    margin: 10px;
    display: flex;
}

app {
    display: inline-block; /* Transformations fonctionnent mieux avec inline-block ou block */
    transition: transform 0.3s ease; /* Transition fluide pour les transformations */
}
  /* toggle switch */
input[type="checkbox"]{
    -webkit-appearance : none; 
    -moz-appearance : none; 
    appearance : none; /* on enlève l'apparence d'origine de la case à cocher */
    position : relative; /* définit la position pour que after se positionne par rapport à lui */
    height : 20px; /*hauteur*/
    width : 50px;  /* largeur */
    background-color : white; 
    border-radius : 5rem; /* pour avoir la bordure arrondi */
    transition: background-color .2s; /* transition fluide pour les changement de couleur */
    box-shadow : 0 0 15px #0000001e; /*ombre pour effet de profondeur */
}

input[type="checkbox"]::after{
    content: ''; /* créer un pseudo éléments vide qui est necessaire pour afficher la boule */
    position : absolute; /*positionne l'élément par rapport au parent c-a-d css du dessus*/
    top : 50%; /* top et left permet de centrer le cercle verticalment et a gauche de l'interrupteur */
    left : 30%;
    transform : translate(-50%, -50%); /* assure un centrage parfait lors du décalage de l'élément */
    height : 20px; /* taille qui définit le cercle */
    width: 20px;
    border-radius : 50%; /* rend le cercle parfaitement rond */
    background-color : rgb(47,47,68); /* couleur du cercle */
    transition: left .2s;

}

input[type="checkbox"]:checked {
    background-color : rgb(97, 248, 173); /* lorsque l'élément est coché (checked) change la couleur du fond */
}

input[type="checkbox"]:checked::after{
    left: 70%; /* cible after lorsque l'on check => on déplace le cercle à droite */
}

/* style fonction creatBubbleVariantes */

#bubbles-container {
    gap: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px;
    background-color: white;
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: auto;
    max-height: 600px; 
    
    
    
}

#fleche-verslehaut {
    width: 40px;
    height: 40px;
    background-color: #d3d3d3;
    margin-left: 70%;
    text-align: center;
    border : 1px solid black;
    border-radius: 10px;
}

#blocVariantes {
    position: relative;
    padding: 10px;
    border : 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    gap : 10px;

}

#bubble {
    border:  1px solid black;
    padding: 20px;
    border-radius: 10px;
    display : flex;
    flex-direction: column;
    overflow: auto;
    cursor: pointer;
    z-index: 1;
    margin-top : 5px;
}

.buttonPlusMoins {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 20px;
    overflow: hidden;
    background-color: #ebf3f4;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 2;
    
}

#Titre-Bubble{
    display: flex;
    justify-content: center;
}