/* Définit les styles de base pour le corps de la page */
body {
  font-family: Arial, sans-serif; /* Définit la police de caractère */
  background-color: #f4f4f4; /* Définit la couleur de fond */
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les espacements internes par défaut */
}

/* Styles pour l'en-tête de la page */
.header {
  position: fixed; /* Fixe la position de l'en-tête */
  top: 0; /* Positionne l'en-tête en haut de la page */
  width: 100%; /* Définit la largeur à 100% */
  height: 9vh; /* Définit la hauteur à 9% de la hauteur de la fenêtre */
  overflow: hidden; /* Cache le contenu qui dépasse */
}

/* Styles pour les sections rouge et noire de l'en-tête */
.header .red,
.header .black {
  width: 100%; /* Définit la largeur à 100% */
  height: 50%; /* Définit la hauteur à 50% */
  position: relative; /* Position relative pour le positionnement absolu des enfants */
}

.header .red {
  background-color: #ee1c25; /* Définit la couleur de fond rouge */
}

.header .black {
  background-color: #38424b; /* Définit la couleur de fond noire */
}

/* Styles pour le conteneur du logo */
.logo-container {
  position: absolute; /* Position absolue pour le positionnement précis */
  top: 50%; /* Positionne le conteneur à 50% du haut */
  left: 2%; /* Positionne le conteneur à 2% de la gauche */
  transform: translateY(-50%); /* Centre verticalement le logo */
  z-index: 2; /* Positionne le conteneur au-dessus des autres éléments */
  display: flex; /* Utilise le modèle de boîte flexible */
  align-items: center; /* Centre verticalement les éléments */
  height: 60px; /* Définit la hauteur */
}

/* Styles pour le logo */
.logo-container .logo {
  height: 100%; /* Définit la hauteur du logo à 100% du conteneur */
  display: block; /* Affiche le logo comme un bloc */
}

/* Styles pour le conteneur du titre */
.title-container {
  position: absolute; /* Position absolue pour le positionnement précis */
  top: 49%; /* Positionne le conteneur à 49% du haut */
  left: 50%; /* Positionne le conteneur à 50% de la gauche */
  transform: translate(-50%, -50%); /* Centre le conteneur */
  z-index: 2; /* Positionne le conteneur au-dessus des autres éléments */
}

/* Styles pour le titre */
.title-container h1 {
  color: white; /* Définit la couleur du texte en blanc */
  font-size: 28px; /* Définit la taille de la police */
  margin: 0; /* Supprime les marges par défaut */
  font-weight: bold; /* Définit le poids de la police en gras */
  text-align: center; /* Centre le texte */
}

/* Styles pour le conteneur principal */
.container {
  margin: 0 auto; /* Centre le conteneur horizontalement */
  margin-top: 10vh; /* Définit la marge supérieure à 10% de la hauteur de la fenêtre */
  margin-bottom: 10vh; /* Définit la marge inférieure à 10% de la hauteur de la fenêtre */
  background-color: #fff; /* Définit la couleur de fond en blanc */
  padding: 20px; /* Définit l'espacement interne */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée */
  width: 90%; /* Définit la largeur à 90% */
  max-width: 1200px; /* Définit la largeur maximale */
}

/* Styles pour le formulaire */
form {
  display: flex; /* Utilise le modèle de boîte flexible */
  flex-direction: column; /* Dispose les éléments en colonne */
}

/* Styles pour les étiquettes */
label {
  margin-top: 10px; /* Définit la marge supérieure */
}

/* Styles pour les champs de texte et les listes déroulantes */
input[type="text"],
select {
  width: 100%; /* Définit la largeur à 100% */
  padding: 8px; /* Définit l'espacement interne */
  margin-top: 5px; /* Définit la marge supérieure */
  border: 1px solid #ccc; /* Définit la bordure */
  border-radius: 4px; /* Arrondit les coins */
}

/* Styles pour le bouton de validation */
.validate-button {
  display: flex; /* Utilise le modèle de boîte flexible */
  justify-content: center; /* Centre horizontalement les éléments */
  align-items: center; /* Centre verticalement les éléments */
  background-color: #007bff; /* Définit la couleur de fond */
  color: white; /* Définit la couleur du texte */
  border: none; /* Supprime la bordure */
  border-radius: 4px; /* Arrondit les coins */
  padding: 10px 20px; /* Définit l'espacement interne */
  margin-top: 20px; /* Définit la marge supérieure */
  cursor: pointer; /* Change le curseur au survol */
  font-size: 16px; /* Définit la taille de la police */
  text-align: center; /* Centre le texte */
  margin-bottom: 15px; /* Définit la marge inférieure */
}

/* Styles pour le bouton de validation au survol */
.validate-button:hover {
  background-color: #0056b3; /* Change la couleur de fond au survol */
}

/* Styles pour le tableau */
.tableau {
  width: 99%; /* Définit la largeur à 99% */
  margin: 30px auto; /* Centre le tableau horizontalement */
  margin-top: 15px; /* Définit la marge supérieure */
  overflow-y: scroll; /* Ajoute une barre de défilement verticale */
  border: 1px solid black; /* Définit la bordure */
  scroll-behavior: smooth; /* Rend le défilement fluide */
}

/* Styles pour la table */
table {
  table-layout: fixed; /* Fixe la disposition de la table */
  width: 100%; /* Définit la largeur à 100% */
  border-top: 3px solid black; /* Définit la bordure supérieure */
  border-left: 3px solid black; /* Définit la bordure gauche */
  border-right: 3px solid black; /* Définit la bordure droite */
  border-collapse: separate; /* Sépare les bordures */
  border-spacing: 0; /* Supprime l'espacement entre les bordures */
}

/* Styles pour les en-têtes de tableau */
thead th {
  background-color: red; /* Définit la couleur de fond */
  color: black; /* Définit la couleur du texte */
  position: sticky; /* Fixe la position */
  top: 0; /* Positionne en haut */
  z-index: 3; /* Positionne au-dessus des autres éléments */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée */
}

/* Styles pour les lignes du corps du tableau */
tbody tr {
  background-color: grey; /* Définit la couleur de fond */
  color: white; /* Définit la couleur du texte */
  border: 2px solid black; /* Définit la bordure */
  height: 47px; /* Définit la hauteur */
}

/* Styles pour les cellules de tableau */
td, th {
  padding: 15px; /* Définit l'espacement interne */
  border: 1px solid black; /* Définit la bordure */
  text-align: center; /* Centre le texte */
  vertical-align: middle; /* Centre verticalement le texte */
}

/* Styles pour les cellules de tableau dans le conteneur de tableau */
.tableau th, .tableau td {
  padding: 10px; /* Définit l'espacement interne */
  border: 1px solid black; /* Définit la bordure */
  word-wrap: break-word; /* Permet le retour à la ligne */
  white-space: normal; /* Définit l'espacement blanc */
  box-sizing: border-box; /* Inclut l'espacement et la bordure dans la largeur et la hauteur */
}

/* Styles pour la barre de défilement du conteneur de tableau */
.tableau::-webkit-scrollbar {
  width: 12px; /* Définit la largeur */
}

/* Styles pour la piste de la barre de défilement */
.tableau::-webkit-scrollbar-track {
  background: #f1f1f1; /* Définit la couleur de fond */
  border-radius: 5px; /* Arrondit les coins */
  border: 1px solid black; /* Définit la bordure */
}

/* Styles pour le pouce de la barre de défilement */
.tableau::-webkit-scrollbar-thumb {
  background-color: #888; /* Définit la couleur de fond */
  border: 2px solid black; /* Définit la bordure */
  border-radius: 2px; /* Arrondit les coins */
  background-image: linear-gradient(
    to bottom,
    black 0px,
    black 2px,
    transparent 2px,
    transparent 6px,
    black 6px,
    black 8px,
    transparent 8px,
    transparent 12px,
    black 12px,
    black 14px
  ); /* Définit l'image de fond */
  background-repeat: no-repeat; /* Empêche la répétition de l'image de fond */
  background-position: center; /* Centre l'image de fond */
  background-size: 70% 14px; /* Définit la taille de l'image de fond */
}

/* Styles pour le pouce de la barre de défilement au survol */
.tableau::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Change la couleur de fond au survol */
}

/* Styles pour le conteneur de tags */
.tag-container {
  margin-top: 10px; /* Définit la marge supérieure */
  display: flex; /* Utilise le modèle de boîte flexible */
  flex-wrap: wrap; /* Permet le retour à la ligne des éléments */
  gap: 8px; /* Définit l'espacement entre les éléments */
}

/* Styles pour les tags */
.tag {
  background-color: #007bff; /* Définit la couleur de fond */
  color: white; /* Définit la couleur du texte */
  padding: 6px 10px; /* Définit l'espacement interne */
  border-radius: 20px; /* Arrondit les coins */
  display: flex; /* Utilise le modèle de boîte flexible */
  align-items: center; /* Centre verticalement les éléments */
  font-size: 14px; /* Définit la taille de la police */
}

/* Styles pour le bouton de suppression des tags */
.tag button {
  background: none; /* Supprime le fond */
  border: none; /* Supprime la bordure */
  color: white; /* Définit la couleur du texte */
  margin-left: 6px; /* Définit la marge gauche */
  cursor: pointer; /* Change le curseur au survol */
  font-weight: bold; /* Définit le poids de la police en gras */
}

/* Styles pour le pied de page */
.footer {
  background-color: black; /* Définit la couleur de fond */
  color: white; /* Définit la couleur du texte */
  display: flex; /* Utilise le modèle de boîte flexible */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: center; /* Centre horizontalement les éléments */
  margin: 0 auto; /* Centre le pied de page horizontalement */
  flex-direction: column; /* Dispose les éléments en colonne */
}

/* Styles pour le conteneur des contacts */
.contacts {
  display: flex; /* Utilise le modèle de boîte flexible */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: center; /* Centre horizontalement les éléments */
  background-color: #ee1c25; /* Définit la couleur de fond */
  width: 100%; /* Définit la largeur à 100% */
  padding: 3px; /* Définit l'espacement interne */
  height: 5vh; /* Définit la hauteur à 5% de la hauteur de la fenêtre */
}

/* Styles pour la transition du pied de page */
.transition-footer {
  height: 5px; /* Définit la hauteur */
  width: 100%; /* Définit la largeur à 100% */
  background: linear-gradient(to bottom, #ee1c25, #38424b); /* Définit le dégradé de fond */
}

/* Styles pour le conteneur des droits */
.Droits {
  display: flex; /* Utilise le modèle de boîte flexible */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: center; /* Centre horizontalement les éléments */
  background-color: #38424b; /* Définit la couleur de fond */
  width: 100%; /* Définit la largeur à 100% */
  padding: 3px; /* Définit l'espacement interne */
  height: 5vh; /* Définit la hauteur à 5% de la hauteur de la fenêtre */
}

/* Styles pour les listes non ordonnées */
ul {
  list-style-type: none; /* Supprime les puces */
}

/* Styles pour les éléments de liste */
li {
  display: inline; /* Affiche les éléments en ligne */
  color: white; /* Définit la couleur du texte */
}

/* Styles pour les liens */
a {
  text-decoration: none; /* Supprime le soulignement */
  color: white; /* Définit la couleur du texte */
}

/* Styles pour les logos des réseaux sociaux */
.reseaux-logo {
  height: 15px; /* Définit la hauteur */
  margin-left: 3px; /* Définit la marge gauche */
  margin-right: 7px; /* Définit la marge droite */
  vertical-align: middle; /* Centre verticalement */
}

/* Styles pour le conteneur de la liste déroulante personnalisée */
.custom-select-wrapper {
  position: relative; /* Position relative pour le positionnement absolu des enfants */
  width: 100%; /* Définit la largeur à 100% */
  margin-top: 10px; /* Définit la marge supérieure */
}

/* Styles pour le champ de recherche de mobilité */
#mobiliteSearch {
  padding: 8px; /* Définit l'espacement interne */
  border-radius: 4px; /* Arrondit les coins */
  border: 1px solid #ccc; /* Définit la bordure */
  width: 100%; /* Définit la largeur à 100% */
  box-sizing: border-box; /* Inclut l'espacement et la bordure dans la largeur et la hauteur */
}

/* Styles pour les options personnalisées */
.custom-options {
  position: absolute; /* Position absolue pour le positionnement précis */
  top: 100%; /* Positionne en bas du champ de recherche */
  left: 0; /* Positionne à gauche */
  right: 0; /* Positionne à droite */
  max-height: 200px; /* Définit la hauteur maximale */
  overflow-y: auto; /* Ajoute une barre de défilement verticale */
  border: 1px solid #ccc; /* Définit la bordure */
  background: white; /* Définit la couleur de fond */
  z-index: 1000; /* Positionne au-dessus des autres éléments */
  display: none; /* Cache par défaut */
}

/* Styles pour les options personnalisées */
.custom-options div {
  padding: 8px; /* Définit l'espacement interne */
  cursor: pointer; /* Change le curseur au survol */
}

/* Styles pour les options personnalisées au survol */
.custom-options div:hover {
  background-color: #f0f0f0; /* Change la couleur de fond au survol */
}

/* Styles pour le champ de recherche de mobilité au focus */
#mobiliteSearch:focus {
  border-color: #007bff; /* Change la couleur de la bordure au focus */
  outline: none; /* Supprime le contour */
}

/* Styles pour les options personnalisées sélectionnées */
.custom-options div.selected {
  background-color: #007bff; /* Change la couleur de fond */
  color: white; /* Change la couleur du texte */
}

/* Styles pour le message "Aucun résultat" */
.custom-options div.no-result {
  font-style: italic; /* Met le texte en italique */
  color: #888; /* Définit la couleur du texte */
  text-align: center; /* Centre le texte */
  padding: 10px; /* Définit l'espacement interne */
}