body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    

}

#container-a{
    height: 100vh;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url('../img/colo.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#container-a h2{
    font-size: 5em;
    color: whitesmoke;
    margin: 2%;
    text-shadow: 0 0 30px black;
}
#container-a a{
    padding: 15px 30px;
    background-color: coral;
    border-radius: 30px;
    transition: 1s;
    color: whitesmoke;
    cursor: pointer;
}
#container-a a:hover{
    background-color: rgb(209, 77, 29);
    transition: 1s;
}

#container-b{
    background-color: whitesmoke;
    height: 100vh;
    width: 100%;
    margin: 0;
    display: flex;
}

.container-b-int{
    margin: 0;
    flex: 1;
    padding:25px;
    display: flex;
    flex-direction: column;
}

#container-b h1{
    text-transform: uppercase;
    margin: 15px;
    font-size: 3em;
}
.container-b-int input,textarea,select{
    padding: 15px 30px;
    margin: 2%;
    border: none;
    backdrop-filter: blur(10px);
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    resize: vertical;

}

textarea{
    resize: vertical;
}
.container-b-int input,textarea,select::placeholder{
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    
}

input[type=submit]{
   transition: 1s; 
    background-color: cornflowerblue;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover{
    transition: 1s;
    background-color: rgb(39, 79, 154);
}


#img_close,#img_close_return{
    position: absolute;
    top:15px;
    left: 15px;
    transition: 2s;

}

#img_close:hover,#img_close_return:hover{
    cursor: pointer;
    animation: squish 2s;
    transition: 2s;
}
@keyframes squish {
    0% { transform: scaleY(1); }
    30% { transform: scaleY(0.7); } /* Écrasement */
    50% { transform: scaleY(1.1); } /* Relâchement rapide */
    70% { transform: scaleY(0.9); } /* Petit retour en arrière */
    100% { transform: scaleY(1); } /* Retour à la normale */
}




input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pour Firefox */
input[type="number"] {
  -moz-appearance: textfield; /* Change l'apparence à celle d'un champ texte */
}