.accommodation-and-popular-section {
  display: flex;
  flex-direction: column-reverse;
}

.accommodation-and-popular-section h2 {
  margin-left: 20px;
}   


/* ============ card ============ */

.card {
  display: flex;
  width: calc(100% - 40px); /* pour compenser les marges de 20px de chaque côté */
  margin: 15px 20px;
  border: 3px solid var(--white);
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.100);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  background-color: var(--white);
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.100);
}

.card picture img {
  object-fit: cover;
  display: block; /* pas d'espace parasite en dessous, et remplir parfaitement son espace. */
}

.card-details-container {
  display: flex;
  flex-direction: column;
}

.card-details {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-price {
  font-size: 14px;
  font-weight: 400;
}

.icone-star {
  display: flex;
  gap: 1px;
}

.icone-star i {
  font-size: 12px;
  color: var(--dark-grey);
  /* Par défaut, les étoiles sont grises */
}

/* La notation en étoiles */

.rating-1 i:nth-child(-n+1),
/* La 1ère étoile est bleue */
.rating-2 i:nth-child(-n+2),
/* Les 2 premières étoiles sont bleues */
.rating-3 i:nth-child(-n+3),
/* Les 3 premières étoiles sont bleues */
.rating-4 i:nth-child(-n+4),
/* Les 4 premières étoiles sont bleues */
.rating-5 i:nth-child(-n+5) {
  /* Les 5 étoiles sont bleues */
  color: var(--blue);
}

/* ============ Les plus populaires ============ */

.most-popular-container {
  background-color: var(--light-grey);
  padding: 30px 20px;
  width: 100%;
}

.most-popular-container>h2 {
  margin: 0 0 30px 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.most-popular-container>h2>i {
    color: var(--blue);
    font-size: 17px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }


.most-popular-gallery {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.most-popular-card {
  height: 144px;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.most-popular-card picture img {
  height: 100%;
  width: 130px;
  border-radius: 13px 0px 0px 13px;
}

.most-popular-details-container {
  padding: 10px 15px;
  justify-content: space-between;
}

.most-popular-details {
  gap: 10px;
}



/* ============ hébergements ============ */

.accommodation-container {
  padding: 30px 0px;
}

.accommodation-container h2 { 
  margin-bottom: 30px; 
}

.accommodation-card {
  height: 186px;
  flex-direction: column;
}

.accommodation-card picture img {
  height: 110px;
  width: 100%; 
  border-radius: 13px 13px 0px 0px;
}

.accommodation-details-container {
  padding: 5px 15px 5px 15px;
  height: 100%;
  justify-content: space-between;
}

.accommodation-details {
  gap:4px;
}

.display-more {
  display: none;
}