/****** General ***********/
* {
  font-family: "Raleway", sans-serif;
  /* font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal; */
  padding: 0;
  margin: 0;
}

:root {
  --main-color: #0065fc;
  --main-bg-color: #f2f2f2;
  --filter-bg-color: #deebff;
}

.fa-solid {
  color: var(--main-color);
}

nav {
  display: flex;
  justify-content: space-between;
  height: 80px;
}

.logo {
  /* display: flex; */
  width: 161.09px;
  height: 79px;
  padding: 30px 50px 30px 50px;
  gap: 10px;
}

.logo img {
  width: 61.09px;
  height: 19px;
}

header nav ul {
  list-style: none;
  gap: 68px;
  display: flex;
  /* width: 344px; */
  /* height: 35px; */
  left: 1096px;
  padding: 30px 0 0 50px;
  /* padding: 0px 50px 0px 50px; */
}

header nav ul a:hover {
  color: var(--main-color);
  border-top: 2px solid #0065fc;
  padding-top: 15px;
}

.info-group {
  width: 1, 340px;
  height: 281px;
  gap: 35px;
  /* padding: 1%; */
}

.headline {
  gap: 8%;
  min-width: 1px;
  line-height: 30px;
  padding-bottom: 2%;
}

.search-bar {
  display: flex;
  width: 377px;
  height: 49px;
  /* gap: 24px; */
  border-radius: 15px;
}

.search-bar i {
  color: black;
}
.search-bar .local {
  width: 50px;
  height: 49px;
  border-radius: 15px 0px 0px 15px;
  border: 1px;
}

.search-bar .local:hover {
  cursor: pointer;
}

.search-bar input {
  color: var(--main-bg-color);
  width: 200px;
  height: 47px;
  border: solid 1px;
}

.search-bar .search {
  width: 132px;
  height: 49px;
  padding: 15px, 16px, 15px, 16px;
  border: 1px;
  border-radius: 0px 20px 20px 0px;
  gap: 10px;
  background-color: var(--main-color);
  color: var(--main-bg-color);
  font-weight: bold;
}

.search-bar .search:hover {
  background-color: blue;
  cursor: pointer;
}

::placeholder {
  color: #000000;
  font-weight: 700;
  text-align: center;
}

.filtre-bar {
  display: flex;
  width: 758px;
  height: 50px;
  gap: 15px;
  align-items: center;
  padding: 20px;
}

.filtre-bar h2 {
  width: 54px;
  height: 21px;
  padding-right: 20px;
}
.filtre-bar i {
  width: 22px;
  height: 16.26px;
  top: 2.87px;
}

.filtre-bar .Eco {
  width: 173px;
  height: 50px;
  padding: 4px 19px 4px 19px;
  border-radius: 25px;
  border: 2px;
  gap: 10px;
  background-color: white;
  border: 2px solid rgba(217, 217, 217, 1);
}

.filtre-bar .Fam {
  width: 134px;
  height: 50px;
  padding: 4px 19px 4px 19px;
  border-radius: 25px;
  border: 2px;
  gap: 10px;
  background-color: white;
  border: 2px solid rgba(217, 217, 217, 1);
}

.filtre-bar .Rom {
  width: 170px;
  height: 50px;
  padding: 4px 19px 4px 19px;
  border-radius: 25px;
  border: 2px;
  gap: 10px;
  background-color: white;
  border: 2px solid rgba(217, 217, 217, 1);
}

.filtre-bar .Pep {
  width: 167px;
  height: 50px;
  padding: 4px 19px 4px 19px;
  border-radius: 25px;
  border: 2px;
  gap: 10px;
  background-color: white;
  border: 2px solid rgba(217, 217, 217, 1);
}

.info-bar {
  align-items: center;
  display: flex;
  padding: 30px;
  gap: 15px;
}

.info-bar .cercle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 15px;
  background: white;
  border: 2px solid rgba(217, 217, 217, 1);
}

.info-bar i {
  /* width: 4px;
  height: 10px;
  color: rgba(0, 101, 252, 1);
  justify-items: center;
  align-items: center; */
  top: 7px;
  left: 10px;
  size: 5px;
}

.filtre-bar button:hover {
  background-color: var(--filter-bg-color);
  cursor: pointer;
}

body {
  /* width: 1, 440px;
  height: 1, 722.02px;
  padding: 0px 50px 0px 50px;
  gap: 35px; */
  display: -moz-groupbox;
  justify-content: center;
}

.main-container {
  width: 100%;
  max-width: 1440px;
  padding: 0 50px;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

.section-title {
  margin: 0;
  font-size: 22px;
}

.card {
  background-color: white;
  border-radius: 20px;
  padding: 5px;
  filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}

.card img {
  object-fit: cover;
}

.card-title {
  font-size: 16px;
}

.euro {
  font-weight: 700;
}

.neutral-star {
  color: var(--main-bg-color);
}

/****** Hebergements And Populaires ***********/
.hebergements-and-populaires {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hebergements-and-populaires section {
  background-color: var(--main-bg-color);
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  gap: 15px;
}

.hebergements h3 {
  /* width: 811px;
  height: 21px; */
  padding-top: 35px;
}

.section-title {
  width: 811px;
  height: 26px;
}

.frame_1 {
  padding-top: 35px;
  display: flex;
  width: 811px;
  height: 207.25px;
  gap: 30px;
}

.card-main {
  width: 200px;
  height: 207.25px;
  padding: 0px 0px 15px 0px;
  border-radius: 20px;
  gap: 4px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
}

.card-main img {
  width: 200px;
  height: 124px;
  border-radius: 20px 20px 0px 0px;
  border: 1px;
}

.card-main-content {
  width: 200px;
  height: 64.25px;
  padding: 0px 15px 0px 15px;
  gap: 8px;
}

/****** Hebergements ***********/
.hebergements {
  width: 65%;
}

/****** Populaires ***********/
.populaires {
  width: 32%;
}

.populaires-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.populaires-cards .card {
  display: flex;
  margin-top: 33px;
}

.populaires-cards img {
  width: 33%;
  height: 136px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.populaires-cards .card-content {
  width: 67%;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.populaires-cards .card-title {
  margin-top: 10px;
  margin-bottom: 4px;
}

.populaires-cards .card-subtitle {
  margin: 0;
}

.populaires-cards .card-rating {
  margin-bottom: 5px;
}

/****** Activités ***********/
.activite {
  width: 1, 340px;
  height: 559px;
  padding: 30px;
  gap: 30px;
}

.frame-4 {
  display: flex;
  width: 1, 280px;
  height: 439px;
  gap: 30px;
  flex-wrap: wrap;
}
.card-1 {
  width: 22%;
  height: 439px;
  border-radius: 20px;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
}

.card-1 img {
  display: flex;
  width: 100%;
  height: 380px;
  border-radius: 20px 20px 0px 0px;
  object-fit: cover;
}

.card-1 .text {
  display: flex;
  width: 297.5px;
  height: 59px;
  padding: 20px 19px 20px 19px;
  border-radius: 0px 0px 20px 20px;
  gap: 10px;
}

.card-1 p {
  width: 259.5px;
  height: 19px;
  font-weight: bold;
}

footer {
  display: flex;
  width: 1, 340px;
  height: 163px;
  background: rgba(242, 242, 242, 1);
}
footer div {
  width: 446.67px;
  height: 163px;
  padding: 20px;
  gap: 15px;
  display: flex;
  flex-direction: column;
}
/* Le code ci-dessous correspond à la version responsive uniquement */

/****** Media queries ***********/
/* Medium devices (tablets, less/equal than 1024px) */
@media (max-width: 1024px) {
  .hebergements-and-populaires {
    flex-direction: column;
  }

  .hebergements {
    width: 100%;
  }

  .populaires {
    width: 100%;
    margin-top: 50px;
  }

  .populaires-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .populaires-cards a {
    width: 30%;
  }

  .populaires-cards .card-title {
    font-size: 14px;
  }

  .populaires-cards .card-subtitle {
    font-size: 13px;
  }
}

/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
  /* ... */
}

/* Styles de base */
/* ... */

/* Media queries pour les écrans de petite taille */
@media only screen and (max-width: 600px) {
  /* Réorganiser la disposition pour les petits écrans */
  /* Par exemple, rendre la navigation verticale */
  header nav {
    flex-direction: column;
    align-items: center;
  }

  header nav ul {
    margin-top: 20px;
  }

  .info-group {
    padding: 20px;
  }

  /* Ajuster la taille des images des hébergements */
  .card-main img {
    width: 100%;
  }

  /* Ajouter des styles spécifiques pour les petites tailles */
  /* ... */
}

/* Media queries pour les écrans de taille moyenne */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Ajouter des styles pour les écrans de taille moyenne */
  /* Par exemple, réduire la taille de la police */
  h2 {
    font-size: 1.5rem;
  }

  .info-group {
    padding: 30px;
  }

  /* Ajuster la taille des images des hébergements */
  .card-main img {
    width: 80%;
  }

  /* Ajouter des styles spécifiques pour les tailles moyennes */
  /* ... */
}