/* Style originel */
@font-face {
  font-family: "font-1";
  src: url(./assets/LibreBaskerville-Regular.ttf);
}

/* Styles pour le conteneur de la carte */
#mapContainer {
  position: relative;
}

/* Styles pour la carte */
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 25%;
  z-index: -1; /* La carte se trouve en arrière-plan */
}


.appli {
list-style-type: none;
  background: black;
  color: white ;
  text-align: center;
  font-family: "font-1", cursive;
}
h1 {
text-align: center;
  font-size: 3rem;
  letter-spacing: 3px;
  margin: 40px 10px 40px;
}
input {

  border: none;
  border-radius: 25px 25px 0 0;
  outline: none;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-1", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;
}

input::placeholder {
  text-align: center;
  font-size: 1.2rem ;
}

input[type="submit"] {
  /* border-radius: 0 0 25px 25px;  */
  background: rgb(177, 176, 176) ;
  transition: 0.3s ease ;
  cursor: pointer ;
}

input[type="submit"]:hover {
  background: rgb(46, 46, 46);
  color: white ;
  letter-spacing: 1px ;
}

/*img {
  object-fit: cover ;
  width: 40%;
  max-width: 250px ;
}
*/

.result-container {
  margin: 0 auto;
}

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: auto;
  max-width: 1400px;
}

li {
  max-width: 400px;
  border: 2px solid rgb(206, 206, 206);
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
}

h2 {
text-align: center;
  margin: 10px 0 25px;
}

.card-content {
  display: grid;
  grid-template-columns: 40% 60%;
}

.card-content img {
  width: 90%;
  border-radius: 5px;
  box-shadow: -3px 3px 10px 3px #242323;
}

.card-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

 /* Fin style originel */

 /* 1. Authentification à Deux Facteurs (2FA) : Champ de saisie du numéro de téléphone  
<input type="tel" id="phoneNumber" placeholder="Phone number"> */

 /* Champ de saisie du code de vérification 
<input type="text" id="verificationCode" placeholder="Verification code"> */

 /* Bouton pour vérifier le code 
<button id="verifyButton">Verify</button> */



/* Styles pour le sélecteur de date et d'heure */
#datePickerContainer {
     /*display: none; */
    /* Autres styles... */
	background: none;
color : white ;
  outline: none;
  border: 1px solid #3e51bd;
  margin: 20px;
  padding:20px;
  border-radius: 10px;
  font-size: 1.15rem;
  width: 200px;
  text-align: center;
}


 /* Personnalisation du Date Picker input[type="date"]  */
 input[type="date"]
{
  
  padding: 8px; 
   border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
}

/* Personnalisation du Hour Picker /*
input[type="time"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


/* Exemple de personnalisation des champs de texte */

/* input[type="text"], input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
} */

/* Exemple de personnalisation des boutons */
/* button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}  */