/*--------------------------------------------------------------
  # Book a table button Menu
--------------------------------------------------------------*/

.book-a-table-btn {
  margin: 0 0 0 15px;
  border: 2px solid #cda45e;
  color: #fff;
  border-radius: 50px;
  padding: 8px 25px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: 0.3s;
}


.book-a-table-btn:hover {
  background: #cda45e;
  color: #fff;
}




/*--------------------------------------------------------------
# FIGURE DISTRICT
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Table
--------------------------------------------------------------*/

.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
/* Ajoutez une classe pour les bordures de tableau */
.bordered-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
}
.bordered-table th, .bordered-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.bordered-table th {
    background-color: #f2f2f2;
}

/*--------------------------------------------------------------
# MODIFICATION A RANGER
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# CARD AVIS HOME PAGE
--------------------------------------------------------------*/
.avis-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  color: black;
}

.avis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
   color: black;
}

.etoiles {
  color: #FFD700; /* Couleur des étoiles dorées */
}

.avis-texte {
  margin-top: 10px;
  line-height: 1.4;
   color: black;
}

/* Style pour les étoiles pleines */
.checked {
  color: #FFD700;
}


      


 /*--------------------------------------------------------------
# MODIFICATION A RANGER
--------------------------------------------------------------*/
/* .why-us .box p {
  color: #aaaaaa;
  font-size: 20px;
  margin: 0;
  padding: 0;
  }
  
  p{
    font-size: 20px;
  }
  .data-des{
      font-size: 25px;
      font-family :italic;
  }
   */

/*--------------------------------------------------------------
# MODIFICATION A RANGER
--------------------------------------------------------------*/

.bg-grey{
  background-color: rgb(200, 197, 197);
}



.btn-outline-brown {
  color: #8B4513;
  background-color: transparent;
  border-color: #8B4513;
}

.btn-outline-brown:hover {
  color: #fff;
  background-color: #8B4513;
  border-color: #8B4513;
}

.step-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* .step {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  color: #8B4513;
  background-color:#CDA45D;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
} */

.step.active {
  background-color: #8B4513;
  color:#CDA45D;
}
 .table{
  border-radius: 10%;

 }
 .step {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  color: #ffff;
  background-color: #CDA45D;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 3%;
}

/* Pseudo-élément pour créer la flèche */
/* Augmentez la taille de la flèche en ajustant les valeurs des bordures */
.step::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -31px; /* Ajustez cette valeur pour positionner la flèche */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 34px solid transparent; /* Augmentez la taille de la flèche */
  border-bottom: 34px solid transparent; /* Augmentez la taille de la flèche */
  border-left: 34px solid #CDA45D; /* Augmentez la taille et/ou la couleur de la flèche */
}




.stepok{
  background-color: #8B4513;
  color: #CDA45D;
  
  
}
/* Ciblez les éléments internes de l'input du type "datetime-local" */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Inverse la couleur de l'icône */
}


 .resa-form{
  background-color: black;
  color: white;
  padding-top:1%;
  padding-bottom:3%;
 }

/*--------------------------------------------------------------
# MODIFICATION A RANGER
--------------------------------------------------------------*/


/* Styles pour les cartes */
.category-card {
    position: relative;
    overflow: hidden;
    
    transition: transform 0.3s, filter 0.3s;
    background-color:#1A1814;
    color:#fff;
}

.category-card:hover {
    transform: scale(1.05);
    filter: brightness(70%);
}

/* Styles pour la flèche */
.category-card .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-size: 24px; /* Ajustez la taille de la police de la flèche ici */
    transition: opacity 0.3s;
}

.category-card:hover .arrow {
    opacity: 1;
}
.bg-hr{
     background-color:#fff;
}

.fa-user{
margin-right:10px;
}
.hand-icon-container {
    display: inline-block;
    position: relative;
    transform-origin: left center; /* Point de pivot à gauche au centre */
    transition: transform 3s ease-in-out; /* Transition de 3 secondes avec ralentissement au début et à la fin */
}

.hand-icon-container:hover {
    transform: rotateY(180deg); /* Rotation de 180 degrés lorsqu'on survole l'icône */
}

.card-single{
 background-color: #1A1814;
 color:#fff;

}



/* Style général */
.container_postuler {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  flex-wrap: wrap;
}


.compartment {
  flex: 1;
  margin: 10px;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  transition: transform 0.3s;
 /* min-width: 400px;  Définissez une largeur minimale pour les compartiments */
  /* max-width: 400px; Définissez une largeur maximale pour les compartiments */
}



/* Utilisez une requête media pour ajuster le comportement sur les petits écrans */
@media (max-width: 768px) {
  .container_postuler {
    flex-direction: column; /* Les compartiments s'affichent en colonne */
    align-items: center; /* Centrez les compartiments horizontalement */
  }

  .compartment {
    width: 100%; /* Les compartiments prennent la largeur totale de l'écran */
    margin: 10px 0; /* Ajoutez un peu d'espace en haut et en bas */
  }
}
.compartment:hover {
  transform: scale(1.05);
}

/* Style des sections */
.section_postuler {
  margin-bottom: 20px;
}


/* Style des flèches (masqué par défaut) */
.arrow_p {
  display: none;
  font-size: 24px;
  transition: transform 0.3s;
}

/* Afficher la flèche au survol */
.compartment:hover .arrow_p {
  display: inline-block;
  transform: scale(1.2);
  margin-top: 10px;
}

/* Style des liens */
.arrow-postuler {
  display: none;
  padding: 10px 20px;
  /*background-color: #333;*/
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  margin-top: 10px;
}

/* Afficher le lien au survol */
.compartment:hover .arrow-postuler {
  display: inline-block;
}



.card-single{
    background-color: #1A1814;
    color:#fff;

}



/*--------------------------------------------------------------
# Buttons search (city tour) & search (crenaux city tour)
--------------------------------------------------------------*/


#search-section {
  margin-top: 20px; /* Ajustez la marge selon vos besoins */
  color: #fff;
  transition: 0.3s;
  line-height: 1;
}

.search-form {
  border-radius: 50px;
  position: relative;
  text-align: center; /* Centre le formulaire */
  display: flex;
  align-items: center;
}


  .search-input, .search-input-c {
    border: 0;
    /* width: calc(100% - 110px); */
    flex: 1; /* Le champ de recherche prendra tout l'espace disponible */
    width: 700px;
    padding: 22px; 
    border-radius: 5px; /* Ajoute un rayon de bordure */
    font-size: 30px;
   
  }

 
  .search-label {
    font-size: 30px;
  }
  
  .search-button, .search-button-c {
    background-color: #cda45e; /* Couleur dorée */
    color: #fff; /* Couleur du texte */
    padding: 29px 29px; 
    font-size: 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  @media (max-width: 1700px) {
    .search-input-c {
      width: 650px;
      padding: 20px; 
      font-size: 17px;
    }
  
    .search-button-c {
      padding: 23px 23px; 
      font-size: 17px;
    }
  }

  @media (max-width: 1611px) {
    .search-input-c {
      width: 500px;
     
    }

  }
  
  @media (max-width: 1229px) {
    .search-input-c {
      width: 400px;
     
    }
  

  }

  @media (max-width: 1104px) {
    .search-input-c {
      width: 300px;
     
    }
  

  }

  @media (max-width: 760px) {
    .search-input, .search-input-c {
        width: 200px;
        padding: 16px; 
        font-size: 13px;
   
    }
    .search-button, .search-button-c {
        padding: 16px ; 
        font-size: 13px;
     }

  

  }





  .dstrCardHome{
      border: none;
    
  }


  h6{
      font-size:21px;
  }



  .nomDistricts{
      font:bold;
      color:#fff;
      font-size: 30px;
  }

  
  .testhover {
      
      overflow: hidden;
      height: auto;
        
  }

  .lazyloaded {

  opacity: 1;
  transition: 400ms;
  transition-delay: 0ms;
  }



  .img_D {
  /* position: relative; */
  /* width: 100%;
  height: auto; */
  transition: 1s;
  margin-top: -31px;
  }

  .img_D:hover {
  transform: scale(1.2);
  transition: 1s
  }




  /* Styles pour masquer la liste sur les écrans de grande taille */
  #districts-list {
      display: none;
  }

  /* Styles pour afficher la liste dans le menu burger en mode mobile */
  @media (max-width: 992px) {
      #districts-list {
          display: inline-block;
      }
  }
  .form-nl{
      background-color: transparent;
      border:none;
  }

  .heart{
      font-size: 30px;
  }
  .text-heart{
      font-size: 20px;
  }
  
  .itinerary-container {
      display: flex;
      flex-direction: column;
  }

  .itinerary-item {
      display: flex;
      align-items: center;
      position: relative;
  }

  .itinerary-point {
      margin-right: 10px; /* Espacement entre le point et le texte de l'itinéraire */
      font-size: 30px; /* Taille de la police pour le point */
      color: grey; /* Couleur des points */
  }

  .ico{
      background-color: transparent;
      color:#FFA500;
  }


  .itinerary-line {
      width: 6px; /* Largeur de la barre de progression */
      background-color: #FFA500; /* Couleur de la barre de progression orange */
      position: relative;
      height: 100px; /* Hauteur de la barre de progression */
      bottom: 0; /* Position finale de la barre */
  
      transform: translateX(-50%);
      z-index: -1; /* Placer la barre en arrière-plan des points */
  }

  .completed .itinerary-line {
      background-color: #00FF00; /* Couleur de la barre de progression verte pour les étapes complétées */
  }

/* Styles pour les écrans de petite taille */
@media (max-width: 768px) {
figure.img-fluid {
  padding: 300px; /* Ajustez cette valeur en fonction de vos besoins */
}
}

/* Styles pour les écrans encore plus petits */
@media (max-width: 576px) {
figure.img-fluid {
  padding: 150px; /* Ajustez cette valeur en fonction de vos besoins */
  margin: 10px;
  max-width: 100%;
}
}