/**
 * actu - Design Components in CSS, JS and HTML pour la page d'acceuil
 * @version v1.1.0
 * 
 */
 @charset "UTF-8";

 input[type="text"] {
  width: 400px;
  padding: 10px;
  font-size: 16px;
  }
.fr-link {
  display: inline-block;
  padding: 10px;
  background-color: #000091;
  color: white ;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}
.fr-link:hover {
  background-color: none;
}
.fr-label {
  display: inline-block;
  padding: 10px;
  background-color: #53918c;
  color: white;
  border-radius: 5px;
}
.fr-label1 {
  background: #009081;
  display: inline;
  color: white;
}
.cat {
  height: 300px;
  width: 100%;
}
 
.image-source {
  font-size: 14px; /* Vous pouvez ajuster cette valeur selon vos préférences */
}
.cadre {
  border: 0px solid #6a6af4; /* Définit la bordure de 2 pixels de largeur et noire */
  padding: 5%; /* Ajoute un espace intérieur de 20 pixels */
  background-color: white; /* Définit la couleur de fond */
  width: 100%; /* Définit la largeur du cadre */
  margin: 0 auto; /* Centre le cadre horizontalement */
  background-image: url('/public/images/index/img_steu.webp'); /* Remplacez par le chemin de votre image */
  background-size: cover; /* Ajuste la taille de l'image pour remplir le conteneur */
  background-position: center; /* Centre l'image dans le conteneur */
  padding: 50px; /* Ajoute un padding pour séparer le contenu de l'image de fond */
  /* background-attachment: fixed; /* Ajout de cette ligne pour fixer l'image de fond */
  height: 600px; /* Ajustez cette valeur pour modifier la hauteur de l'image */
}

.fr-select {
  border: none; /* Supprime toutes les bordures */
  border-bottom: 0; /* Supprime la bordure du bas */
  background-color: white; /* Ajoute un arrière-plan blanc pour contraster avec le texte */
  display: none; /* Rendre la liste déroulante invisible au démarrage */
}
ul {
  /*border: 1px solid black; /* Ajout d'un cadre autour de la liste */
  padding: 5px;
  list-style-type: none;
}

li {
  cursor: pointer;
}

.hoverable-li:hover {
  background-color: #6a6af4;
}
.custom-list {
  width: 400px; /* Ajustez la largeur selon vos besoins */
  margin: 0;
  /* Ajoutez d'autres styles personnalisés selon vos besoins */
  /* border: 1px solid #000; /* Exemple de bordure */
  /* background-color: #ffffff; /* Définit la couleur de fond sur blanc */
  padding: 10px; /* Exemple de rembourrage */
  }
@media screen and (max-width: 600px) {
      /* Ajustements pour les petits écrans */
      .cadre {
          width: 90%; /* Réduire la largeur pour les petits écrans */
          padding: 2%;
      }
      .fr-input {
          max-width: 100%; /* La largeur maximale de l'input est de 100% de son conteneur */
      }

      .fr-select {
          width: 100% !important; /* La largeur de la liste déroulante est de 100% de son conteneur */
      }
      .custom-list {
          width: 100%; /* La largeur de la liste s'adapte à 100% de son conteneur */
          padding: 10px; /* Ajoutez un espacement intérieur si nécessaire */
          box-sizing: border-box; /* Garantit que le padding est inclus dans la largeur totale */
      }
      .text-end {
          display: flex;
          flex-direction: column;
          align-items: center; /* Centre les éléments dans la colonne */
      }

      .text-end button {
          margin-bottom: 10px; /* Ajoute de l'espace entre les boutons */
      }
  }  

  .ia-label {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
      color: white;
      padding: 5px 10px;
      border-radius: 3px;
      font-size: 14px;
  }