/* Réinitialise les propriétés de mise en forme de base pour tous les éléments, Supprime les marges extérieures et les rembourrages à zéro.
Définit la boîte de dimensionnement pour inclure les bordures.
Supprime les puces ou les numéros de liste pour tous les éléments de liste.   */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
  }
   
  
  
  /* Définit une largeur maximale de 1440 pixels pour le corps de la page et centre le contenu horizontalement en utilisant des marges automatiques à gauche et à droite. */
  body {
    max-width: 1440px;
    margin: 0 auto;
  }
  
  /*- Propriétés personnalisées -*/
  
  :root {
    --main-color: #0065FC; /* Définit une variable '--main-color' pour stocker la couleur bleue principale */
    --light-blue: #deebff;
    --grey: #d9d9d9;
    --main-bg-color: #f2f2f2;
    --black: rgba(0, 0, 0, 1);
    --white : #ffffff ; 
  }
  
  
  
  
  /****************************************- HEADER -***************************************/
  
  /*Style du haut de la page (header) avec une marge de 0 pixels en 
  haut, 55 pixels à droite, 37 pixels en bas, et 55 pixels à gauche.*/

  header {
    margin: 0px 55px 37px 55px; /*haut, droite, bas, gauche*/ 
  }
  
  
  
  /***************************************-  Navbar -***************************************/
  
  nav {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
    justify-content: space-between; /* Espace égal entre les éléments */
    align-items: flex-start; /* Les éléments sont alignés en haut */
}

.nav__logo {
    display: flex; /* Utilisation de flexbox pour aligner les éléments verticalement */
    align-items: center; /* Les éléments sont centrés verticalement */
}

.nav__logo img {
    width: 65px; /* Largeur spécifique pour l'image */
    height: 20px; /* Hauteur spécifique pour l'image */
}


nav ul {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    align-items: end; /* Alignement des éléments en bas */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
    height: 100px; /* Hauteur spécifique pour la liste non ordonnée */
}

nav {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
    justify-content: space-between; /* Espace égal entre les éléments */
    align-items: flex-end; /* Les éléments sont alignés en bas */
    height: 100px; /* Hauteur spécifique de la barre de navigation */
}

nav li {
    position: relative; /* Position relative pour permettre le positionnement absolu des pseudo-éléments */
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    justify-content: center; /* Les éléments sont centrés horizontalement */
    align-items: center; /* Les éléments sont centrés verticalement */
    width: 150px; /* Largeur spécifique pour chaque élément de liste */
    height: 100%; /* Hauteur égale à 100% */
    text-align: center; /* Le texte est centré horizontalement */
}

nav li a {
    text-decoration: none; /* Pas de soulignement pour les liens */
    font: 400 16px "Raleway", sans-serif; /* Police et taille spécifiques pour les liens */
    color: var(--black); /* Couleur de texte spécifique */
}




nav li a:hover {
    cursor: pointer; /* Curseur de la souris devient pointer au survol */
    color: var(--main-color); /* Changement de couleur au survol */
}

nav li a:hover::before {
    content: ""; /* Contenu vide pour le pseudo-élément */
    width: 0%; /* Largeur initiale de la barre de progression */
    height: 2px; /* Hauteur de la barre de progression */
    position: absolute; /* Position absolue par rapport à son conteneur */
    top: 0; /* Positionnement en haut */
    left: 0; /* Positionnement à gauche */
}

nav li a:hover::before {
    background-color: var(--main-color); /* Couleur de la barre de progression */
    width: 100%; /* La barre de progression s'étend à 100% au survol */
}

  
  




  
  /************************************** Barre de recherche  *******************************************/

  
  /* Définition du style pour le titre dans la barre de recherche */
  .search-bar__titles h1 {
    font: 700 22px "Raleway", sans-serif; /* Police en gras, taille 22px, famille de police Raleway */
    margin: 53px 0 8px 0px; /* Marge: haut 53px, bas 8px */
  }
  
  /* Définition du style pour le paragraphe dans la barre de recherche */
  .search-bar__titles p {
    font: 400 16px "Raleway", sans-serif; /* Police normale, taille 16px, famille de police Raleway */
    margin-bottom: 20px; /* Marge en bas de 20px */
  }
  
  /* Définition du style pour le formulaire */
  form {
    margin-bottom: 32px; /* Marge en bas de 32px */
  }
  
 /* Style pour le conteneur de la zone de recherche */
 .input-search {
    display: flex; /* Affichage en flexbox */
    border: 1px solid var(--grey) ; /* Bordure de 1px solide avec une couleur définie par une variable */
    width: 418px; /* Largeur de 418px */
    
  }
  
  /* Style pour le conteneur de la zone de recherche */
  .input-search {
    display: flex; /* Affichage en flexbox */
    border: 1px solid var(--main-bg-color); /* Bordure de 1px solide avec une couleur définie par une variable  */
    width: 418px; /* Largeur de 418px */
    background-color: var(--main-bg-color); /* Couleur de fond gris clair */
    border-radius: 15px; /* Bordure complètement arrondie */
  }
  
  /* Style pour l'icône de recherche dans la zone de recherche */
  #search-bar--icon {
    fill: lightgrey; /* Couleur de remplissage en gris clair */
    width: 50px; /* Largeur de 50px */
    display: flex; /* Affichage en flexbox */
    justify-content: center; /* Alignement horizontal au centre */
    align-items: center; /* Alignement vertical au centre */
    border-radius: 15px 0px 0px 15px; /* Bordure arrondie à gauche */
  }
  
  
  
  
  /* Style pour le champ de saisie de la recherche */
  .input-search input {
    font: 700 18px "Raleway", sans-serif; /* Police en gras, taille 18px, famille de police Raleway */
    border: none; /* Pas de bordure */
    outline: none; /* Pas de contour */
    width: 60%; /* Largeur de 60% */
    border: none; /* Pas de bordure */
    padding-left: 17px; /* Remplissage à gauche de 17px */
  }
  
  /* Style pour le texte de l'attribut placeholder dans le champ de saisie */
  .input-search input::placeholder {
    align-self: center; /* Alignement vertical au centre */
    color: black;
  }
  
  /* Style pour le bouton de recherche */
  .search-bar--button {
    font: 700 18px "Raleway", sans-serif; /* Police en gras, taille 18px, famille de police Raleway */
    color: white; /* Couleur du texte blanc */
    background: var(--main-color); /* Couleur de fond définie par une variable 'couleur-principale' */
    padding: 14px 16px 14px 16px; /* Remplissage: haut 14px, droite 16px, bas 14px, gauche 16px */
    border: none; /* Pas de bordure */
    border-radius: 0px 15px 15px 0px; /* Bordure arrondie à droite */
  }
  
  /* Style lors du survol du bouton de recherche */
  .search-bar--button:hover {
    cursor: pointer; /* Curseur de type pointer au survol */
  }
  
  /* Style lors de l'appui sur le bouton de recherche */
  .search-bar--button:active {
    transform: translateY(1px); /* Déplacement vers le bas de 1px */
    box-shadow: 0 10px 16px rgba(21, 43, 170, 0.2); /* Ajoute une ombre avec un décalage vertical de 2px, flou de 4px, et une couleur rgba */
  }
  
  /* Style pour l'icône dans le bouton de recherche */
  .search-bar--button i {
    display: none; /* Ne pas afficher */
  }
  
  



  /****************************************- Filter bar -*****************************************/

  
  .filter-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 35px;
    gap: 16px; /* Réduit l'espace entre les filtres */
  }
  
  .filter-bar h2 {
    font: 700 18px "Raleway", sans-serif;
    
  }
  
  .filter-bar__btns {
    display: flex;
    align-items: center;
    gap: 20px; /* Réduit l'espace entre les boutons */
    width: 100%;
  }
  
  .filter-bar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font: 700 14px "Raleway", sans-serif; /* Réduit la taille de la police */
    border: 2px solid var(--grey);
    border-radius: 20px; /* Réduit le rayon de la bordure */
    height: 35px; /* Réduit la hauteur du bouton */
    padding: 4px 16px; /* Réduit le rembourrage */
    background-color: white; /* Bouton blanc à l'intérieur */
  }
  
  .filter-bar__btn:active {
    transform: translateY(2px); /* Décale le bouton vers le bas de 2 pixels lorsqu'il est activé */
}

  
  .filter-bar i {
    color: var(--main-color);
    font-size: 18px; /* Réduit la taille de l'icône */
    margin-right: 8px; /* Réduit l'espace entre l'icône et le texte */
  }
  
  .filter-bar__btn:hover {
    background-color: var(--light-blue); /* Change la couleur de fond au survol en utilisant la variable --light-blue */
    cursor: pointer; /* Change le curseur de la souris en une main au survol */
}

  
  
  
  
  /**************************************- Info bar -*****************************************/
  
.info-bar {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
    align-items: center; /* Les éléments sont centrés verticalement */
    margin-left: 5px; /* Marge à gauche de 5 pixels */
}

.info-bar p {
    font: 400 16px "Raleway", sans-serif; /* Police et taille spécifiques pour les paragraphes */
}

.info-bar__container {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    justify-content: center; /* Les éléments sont centrés horizontalement */
    align-items: center; /* Les éléments sont centrés verticalement */
    width: 24px; /* Largeur spécifique */
    height: 24px; /* Hauteur spécifique */
    border-radius: 1000px; /* Bordure arrondie */
    border: 1px solid var(--grey); /* Bordure de couleur spécifique */
    margin-right: 11px; /* Marge à droite de 11 pixels */
}

#info-bar__icon {
    font-size: 11.75px; /* Taille de police spécifique pour l'icône */
    color: var(--main-color); /* Couleur spécifique pour l'icône */
    text-align: center; /* Le texte est centré horizontalement */
}

.offers {
    margin: 0 50px 60px 50px; /* Marge extérieure spécifique */ /* Marge extérieure spécifique */
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
}

.offers h2 {
    font: 700 22px "Raleway", sans-serif; /* Police et taille spécifiques pour les titres */
}

  
  
  
  
  
  
  /***********************************- Hébergements à Marseille -*****************************************/
  
  
  .offers__main {
    width: calc((2 * (100% - 40px)) / 3); /* Deux tiers de l'espace total moins 40px d'espacement */
    padding: 34px 44px 46px 36px; /* Rembourrage spécifique */
    background-color: var(--main-bg-color); /* Couleur de fond spécifique */
    border-radius: 20px; /* Bordure arrondie */
    padding: 30px; /* Rembourrage spécifique */
    box-sizing: border-box; /* Inclure le rembourrage dans le calcul de la largeur */
}

.offers__main h2 {
    margin-bottom: 23px; /* Marge inférieure spécifique */
}

.card__main {
    width: calc(100% / 3); /* Largeur égale à un tiers de l'espace total */
    border: 5px solid #ffffff; /* Bordure de 5 pixels solide blanche */
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); /* Ombre de boîte avec des paramètres spécifiques */
    border-radius: 20px; /* Bordure arrondie */
    cursor: pointer; /* Curseur de la souris devient pointer */
    transition: all 0.2s ease-in-out; /* Ajout d'une transition pour un effet plus doux */
    background-color: var(--white); /* Couleur de fond spécifique */
}

.card__main a {
    color: var(--black); /* Couleur de texte spécifique */
    text-decoration: none; /* Pas de soulignement pour les liens */
    cursor: pointer; /* Curseur de la souris devient pointer */
}

.card__main img {
    width: 100%; /* Largeur de l'image à 100% */
    border-radius: 20px 20px 0px 0px; /* Coins arrondis spécifiques */
    height: 124px; /* Hauteur spécifique */
    object-fit: cover; /* Ajustement de l'objet pour couvrir */
}

.card__main h3 {
    font: 700 16px "Raleway", sans-serif; /* Police et taille spécifiques pour les titres */
}

.card__main p {
    font: 400 14px "Raleway", sans-serif; /* Police et taille spécifiques pour les paragraphes */
}



.card__description--main {
    padding: 4px 0 6px 11px; /* Rembourrage spécifique */
}

.card__description--main > h3,
.card__description--main > p {
    margin-bottom: 9px; /* Marge inférieure spécifique */
}

.card__main:hover {
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3); /* Ombre de boîte au survol */
}

.card__main:active {
    transform: translateY(2px); /* Déplacer la carte de 2 pixels vers le bas lorsqu'elle est activée */
}

.show-more__btn {
    font: 700 18px "Raleway", sans-serif; /* Police et taille spécifiques pour le bouton */
    margin-top: 40px; /* Marge supérieure spécifique */
    margin-left: 4px; /* Marge à gauche spécifique */
    padding: 0; /* Pas de rembourrage */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur de la souris devient pointer */
}

.show-more__btn:hover {
    color: var(--main-color); /* Couleur de texte au survol spécifique */
    background-color: white; /* Couleur de fond au survol spécifique */
}

.first-row,
.second-row {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
}

.first-row {
    margin-bottom: 30px; /* Marge inférieure spécifique */
}

.card__main:nth-child(n + 1):nth-child(-n + 2) {
    margin-right: 31px; /* Marge à droite spécifique pour les deux premières cartes */
}


.prix {
    font-weight: bold;
}


.stars__container--main i {
    color: var(--main-color); /* Couleur d'étoile spécifique */
    margin: -2px; /* Marge spécifique */
    font-size: 14px; /* Taille de police spécifique */
}

/* Style pour la cinquième étoile gris clair */
.stars__container--main i:nth-child(5) {
    color: var(--main-bg-color); /* Couleur gris clair pour la cinquième étoile */
}







  
  
 /***********************************- Les plus populaires -***************************************/

.offers__spensored {
    width: calc((100% - 40px) / 3); /* Un tiers de l'espace total moins 40px d'espacement */
    margin-left: 40px; /* Marge à gauche spécifique */
    padding: 41px 40px 1px 37px; /* Rembourrage spécifique */
    background-color: var(--main-bg-color); /* Couleur de fond spécifique */
    border-radius: 20px; /* Bordure arrondie */
    box-sizing: border-box; /* Inclure le rembourrage dans le calcul de la largeur */
}

.offers__spensored .card__spensored {
    background-color: var(--white); /* Réinitialisation de la couleur de fond pour les cards */
}

.card__spensored--container {
    display: flex; /* Utilisation de flexbox pour aligner les éléments verticalement */
    flex-direction: column; /* Les éléments sont disposés en colonne */
}

.offers__spensored h2 {
    margin-bottom: 26px; /* Marge inférieure spécifique */
}

.offers__spensored-title {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
    justify-content: space-between; /* Espace égal entre les éléments */
    align-items: baseline; /* Les éléments sont alignés en fonction de leur ligne de base */
}

.offers__spensored-title i {
    color: var(--main-color); /* Couleur spécifique pour l'icône */
    font-size: 18px; /* Taille de police spécifique */
}

.card__spensored {
    border-radius: 20px; /* Bordure arrondie */
    border: 5px solid #ffffff; /* Bordure de 5 pixels solide blanche */
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); /* Ombre de boîte avec des paramètres spécifiques */
}

.card__spensored:hover {
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3); /* Ombre de boîte au survol */
}

.card__spensored:active {
    transform: translateY(2px); /* Déplacer la carte de 2 pixels vers le bas lorsqu'elle est activée */
}

.card__spensored a {
    text-decoration: none; /* Pas de soulignement pour les liens */
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
}

.card__spensored img {
    height: 144px; /* Hauteur spécifique pour l'image */
    width: 36%; /* Largeur spécifique pour l'image */
    border-radius: 20px 0px 0px 20px; /* Coins arrondis spécifiques */
    object-fit: cover; /* Ajustement de l'objet pour couvrir */
}

.card__description--spensored {
    padding: 16px 22px 10px 15px; /* Rembourrage spécifique */
    display: flex; /* Utilisation de flexbox pour aligner les éléments verticalement */
    flex-direction: column; /* Les éléments sont disposés en colonne */
    flex-wrap: wrap; /* Les éléments peuvent se répartir sur plusieurs lignes */
    justify-content: space-between; /* Espace égal entre les éléments */
    color: var(--black); /* Couleur de texte spécifique */
}

.card__spensored:nth-child(n + 1) {
    margin-bottom: 33px; /* Marge inférieure spécifique */
    
}

.card__description--spensored h3 {
    font: 700 16px "Raleway", sans-serif; /* Police et taille spécifiques pour les titres */
    margin-bottom: 7px; /* Marge inférieure spécifique */
}

.card__description--spensored p {
    font: 400 14px "Raleway", sans-serif; /* Police et taille spécifiques pour les paragraphes */
}

.stars__container--spensored i {
    color: var(--main-color); /* Couleur d'étoile spécifique */
    margin: -2px; /* Marge spécifique */
    font-size: 14px; /* Taille de police spécifique */
}

/* Style pour la cinquième étoile gris clair */
.stars__container--spensored i:nth-child(5) {
    color: var(--main-bg-color); /* Couleur gris clair pour la cinquième étoile */
}



  
  
  /***************************************- ACTIVITIES SECTION -***************************************/
  
  .activities {
    margin: 60px 53px 61px 50px; /* Marge spécifique */
}

.activities h2 {
    font: 700 22px "Raleway", sans-serif; /* Police et taille spécifiques pour les titres */
    margin-bottom: 18.47px; /* Marge inférieure spécifique */
}

.card__activity {
    width: 100%; /* Largeur de l'image à 100% */
    border-radius: 20px; /* Bordure arrondie */
    object-fit: cover; /* évite la déformation des images */
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); /* Ombre de boîte avec des paramètres spécifiques */
}

.card__activity:hover {
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3); /* Ombre de boîte au survol */
    transform: translateY(2px); /* Déplacer la carte de 2 pixels vers le bas lorsqu'elle est survolée */
}

.card__activity a {
    text-decoration: none; /* Pas de soulignement pour les liens */
    color: var(--black); /* Couleur de texte spécifique */
}

.activities img {
    width: 100%; /* Largeur de l'image à 100% */
    height: 389px; /* Hauteur spécifique pour l'image */
    border-radius: 20px 20px 0px 0px; /* Coins arrondis spécifiques */
    object-fit: cover; /* évite la déformation des images */
}

.card__description--activity h3 {
    font: 700 16px "Raleway", sans-serif; /* Police et taille spécifiques pour les titres */
    padding: 20px 36px 21px 19px; /* Rembourrage spécifique */
}

.activities-row {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: row; /* Les éléments sont disposés horizontalement */
}

.card__activity:nth-child(-n + 3) {
    margin-right: 35px; /* Marge à droite spécifique pour les trois premières cartes */
}







  
  /***********************************- FOOTER SECTION -****************************************/


  
/* Footer */
footer {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
    padding: 40px;
    background-color: var(--main-bg-color);
    border-radius: 0px;
    box-sizing: border-box;
    position: relative; /* Positionnement relatif pour le positionnement absolu */
}

footer h3 {
    font: 700 18px "Raleway", sans-serif;
    margin-bottom: 30px;
}

.footer__column {
    width: calc(33.333% - 20px); /* Ajustement pour les colonnes */
    margin-right: 20px;
    margin-bottom: 70px;
}

.link-list a {
    text-decoration: none;
    color: var(--black);
    font: 400 15px "Raleway", sans-serif;
}

.link-list a:hover {
    text-decoration: underline;
   

}

.link-list li {
    margin-bottom: 20px; /* Espacement de 20px entre chaque élément de liste */
}




.footer__copyright {
    width: 100%; /* Prend toute la largeur */
    text-align: center; /* Centre le texte */
    position: absolute;
    bottom: 20px; /* Ajustement selon votre préférence */
    left: 0;
    font: 700 18px "Raleway", sans-serif;
}


  








/******************************- MEDIA QUERIES SECTION -*************************************/

@media (min-width: 768px) and (max-width: 1024px) {

    /*Header*/
  /* Style de l'en-tête */
  
    /* Marge de l'en-tête , haut droite bas gauche */
    header {
      margin: 0px 30px 37px 30px;
    }
  
    /* Style de la taille de la police de l'entrée de recherche */
    .input-search input {
      font-size: 16px;
    }
  

  

    /* Espacement entre les boutons de la barre de filtrage */
    .filter-bar__btns {
      gap: 10px;
    }

    
  
    /* Style des boutons de la barre de filtrage */
    .filter-bar__btn {
      padding: 4px 16px;
      font-size: 15px;
    }
  
    /* Espacement entre les éléments de la barre de filtrage */
    .filter-bar {
      display: flex;
      flex-direction: column;
    }

    .filter-bar h2 {
      margin-left: -900px; 
      /* Style de l'élément h2 */
    }


  
 
   /*Hébergements*/
  
   /* Début du style pour la classe d'éléments offers */
.offers {
    flex-wrap: wrap; /* Permet aux éléments enfants de passer à la ligne lorsque la largeur de la fenêtre est réduite */
    margin: 20px; /* Marge de 20 pixels autour des éléments */
}

/* Style pour les éléments offers__main et offers__spensored */
.offers__main,
.offers__spensored {
    width: 100%; /* Largeur de 100% */
    margin: 0; /* Aucune marge */
    padding: 0 5px 0px; /* Rembourrage de 0 pixels en haut, 5 pixels à gauche et à droite, 20 pixels en bas */
}

/* Style spécifique pour l'élément offers__main */
.offers__main {
    margin-bottom: 40px; /* Ajout de marge en bas de offers__main */
    
padding: 34px 44px 46px 36px; /* Rembourrage spécifique */
}









.card__main {
    height: max-content;
}

.card__main img {
   
    height: 80px; /* Hauteur spécifique */
    
}

.card__main h3 {
    font: 700 15px "Raleway", sans-serif; /* Police et taille spécifiques pour les titres */
}

.card__main p {
    font: 400 12px "Raleway", sans-serif; /* Police et taille spécifiques pour les paragraphes */
}

.stars__container--main i {
    color: var(--main-color); /* Couleur d'étoile spécifique */
    margin: -2px; /* Marge spécifique */
    font-size: 10px; /* Taille de police spécifique */
}

.card__description--main {
    padding: 4px 0 6px 6px; /* Rembourrage spécifique */
}

.card__description--main > h3,
.card__description--main > p {
    margin-bottom: 0px; /* Marge inférieure spécifique */
}






/* Style spécifique pour l'élément offers__sponsored */
.offers__sponsored {
    margin-top: 40px; /* Ajout de marge en haut de offers__sponsored */
    width: 100%; /* Modification de la largeur à 80% */
    
    
    
    
}

/* Style pour le conteneur des cartes sponsorisées */
.card__spensored--container {
    display: flex; /* Affichage en tant que flexbox */
    flex-direction: row; /* Définit la direction des éléments enfants en ligne */
    height: 140px; /* Modification de la hauteur à 200 pixels */
    width: 95%; /* Réduction de la largeur du conteneur à 80% */
    margin: 0 auto; /* Centrage horizontal des cartes à l'intérieur de leur parent */
    
}



/* Style pour les images à l'intérieur des cartes sponsorisées */
.card__spensored img {
    width: 35%; /* Largeur de l'image de 30% */
    height: 97px;
}

/* Style pour la description à l'intérieur des cartes sponsorisées */
.card__description--spensored {
    padding: 5px 10px 0px 20px; /* Rembourrage de 5 pixels en haut, 20 pixels à droite, 0 en bas, et 10 pixels à gauche */
}

/* Style pour les deux premières cartes sponsorisées */
.card__spensored:nth-child(-n + 2) {
    margin-right: 23px; /* Marge de 23 pixels à droite pour les deux premières cartes */
    
}

/* Style pour les trois premières cartes sponsorisées */
.card__spensored:nth-child(-n + 3) {
    flex: 1; /* Distribution égale de l'espace disponible pour les trois premières cartes */
    margin-left: 30px;
    margin-right: 30px;
    margin-left: 10px; /* Réduction supplémentaire de la marge à gauche pour les trois premières cartes */
    margin-right: 10px; /* Réduction supplémentaire de la marge à droite pour les trois premières cartes */
    
}





/* Style pour les titres à l'intérieur des cartes sponsorisées */
.card__description--spensored h3 {
    font-size: 10px; /* Taille de police de 14 pixels pour les titres */
}

/* Style pour les paragraphes à l'intérieur des cartes sponsorisées */
.card__description--spensored p {
    font-size: 10px; /* Taille de police de 13 pixels pour les paragraphes */
}



.stars__container--spensored i {
    font-size: 10px; /* Taille de police spécifique */
    
}

.offers__spensored-title i {
    position: relative;
    left: -35px; /* ajustez la valeur selon vos besoins */
}









.offers__spensored h2 {
    margin-bottom: 35px; /* Marge inférieure spécifique */
}

.offers__spensored-title {
    margin-left: 30px ;
    margin-top: 20px;
}










  /*Activités*/

  .card__activity:nth-child(-n + 3) {
    margin-right: 20px;
  }
  .activities img {
    height: 150px;
  }
  .activities h2 {
    margin-bottom: 25px;
  }
}       



  





   
/*----------  Téléphone mobile  ----------*/
  
@media (max-width: 767px) { 

/*Header*/
  
    header {
      margin: 0px;
    }
    nav {
      flex-direction: column;
      align-items: center;
    }
  
    .nav__logo {
      margin-top: 21px;
      margin-bottom: 38px;
    }
  
    nav ul {
      width: 100%;
      height: 50px;
    }
  
    nav ul li {
      width: 50%;
    }
  
    nav li a:hover::before {
      top: 100%;
    }
  

    /*Barre de recherche */

    .search-bar__container {
      margin: 0px 20px;
    }
  
    .search-bar--button i {
      display: block;
    }
  
    .search-bar--button span {
      display: none;
    }
  
    .input-search {
      width: 100%;
      margin-top: 30px; /* Ajout de la marge haute */

    }
  
    .input-search input {
      font-size: 16px;
      width: 100%;
    }


/*Filter bar*/
  
.filter-bar {
    margin-top: 34px; /* Définit la marge supérieure à 34 pixels */
    gap: 15px; /* Définit l'espacement entre les éléments enfants à 15 pixels */
    flex-direction: column; /* Définit la direction de flexion des éléments enfants en colonne */
    align-items: flex-start; /* Aligne les éléments enfants sur le côté de départ de l'axe transversal */
  }


  .filter-bar__btns{
    flex-wrap: wrap; /* Définit si les éléments enfants peuvent être enveloppés sur plusieurs lignes */
    row-gap: 20px; /* Définit l'espacement entre les lignes des éléments enfants */
    column-gap: 3%; /* Définit l'espacement entre les colonnes des éléments enfants en pourcentage */
    padding: 0; /* Supprime le remplissage à l'intérieur de l'élément parent */
  }

  .filter-bar__btn{
    flex: 1 1 47%; /* Définit les propriétés de flexibilité pour le redimensionnement des éléments enfants */
    font-size: 17px; /* Définit la taille de police à 14 pixels */
    justify-content: center; /* Aligne les éléments enfants sur l'axe principal au centre */
    align-items: center; /* Aligne les éléments enfants sur l'axe transversal au centre */
    padding: 24px 14px; /* Définit les espacements intérieurs de 24 pixels en haut et en bas, et de 14 pixels à gauche et à droite */
    border-radius: 35px; /* Réduit le rayon de la bordure */
}

  

  .fa-solid.fa-person {
    margin-left: -30px; /* Décalage de la classe vers la gauche de 5 pixels */
}




  
    
/* Hébergements */
    
.offers {
    flex-direction: column-reverse; /* Définit la direction des éléments enfants en colonne inversée */
    margin: 0 20px; /* Définit les marges à 0 en haut et en bas, et à 20 pixels à gauche et à droite */
    
  }
  
 

  .offers__spensored {
    width: 113%; /* Prendre toute la largeur de l'écran */
    margin-left: -20px; /* Supprimer la marge à gauche */
    margin-right: -50px;
    border-radius: 0px; /* Bordure arrondie */
    margin-top: 40px; /* Ajout de la marge haute */
    
}

  
  
  .offers__main{
    width: 100%;
    padding: 0;
    background-color: var(--white); /* Couleur de fond spécifique */
    margin-top: 50px; /* Ajout de la marge haute */
 }

  
  
  
  .first-row, .second-row{
    flex-direction: column; /* Définit la direction des éléments enfants en colonne */
    gap: 30px; /* Définit l'espacement entre les éléments enfants à 30 pixels */
    
  }
  
  .card__main{
    width: 100%; /* Définit la largeur à 100% */
    
  }

  .card__spensored {
    border-radius: 20px; /* Bordure arrondie */
    color: #ffffff;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); /* Ombre de boîte avec des paramètres spécifiques */
    margin-left: -20px; /* Supprimer la marge à gauche */
    margin-right: -17px;
   }

   .card__main img {
    height: 104px; /* Hauteur spécifique */
    }



  
  
  
  
    
/* Activités à marseille */
    
    /* Style pour la classe d'éléments activities */
.activities {
    margin: 80px 20px 0 20px; /* Marge de 80 pixels en haut, 0 à droite, 0 en bas, et 20 à gauche */
}

/* Style pour la classe d'éléments activities-row */
.activities-row {
    display: flex; /* Affichage en tant que flexbox */
    flex-direction: column; /* Définit la direction des éléments enfants en colonne */
    gap: 30px; /* Espacement de 30 pixels entre les éléments enfants */
}

/* Style pour la classe d'éléments card__activity */
.card__activity {
    width: 100%; /* Largeur de 100% */
    height: 240px; /* Hauteur de 190 pixels */
}

/* Style pour les images à l'intérieur des éléments activities */
.activities img {
    height: 180px; /* Hauteur de l'image de 124 pixels */
}

  
    
/*Footer*/
    
    
footer {
    flex-direction: column; /* Définit la direction des éléments enfants en colonne */
    padding: 0; /* Aucun rembourrage à l'intérieur du footer */
    margin: 0px 0px; /* Marge de 80 pixels en haut et en bas, 20 pixels à gauche et à droite */
    gap: 25px; /* Espacement de 30 pixels entre les éléments enfants */
    margin-top: 50px; /* Ajout de la marge haute */
    
}

/* Style pour les deux premières colonnes du footer */
.footer__column:nth-child(-n + 3) {
    width: 100%; /* Les deux premières colonnes occupent 100% de la largeur */
    margin: 20px 0 20px 20px; /* Marge de 20 pixels en haut et en bas, 20 pixels à gauche, aucune à droite */
}

/* Footer */
footer {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
    padding: 15px;
    background-color: var(--main-bg-color);
    border-radius: 0px;
    box-sizing: border-box;
    position: relative; /* Positionnement relatif pour le positionnement absolu */
}

footer h3 {
    font: 700 18px "Raleway", sans-serif;
    margin-bottom: 20px;
}

.footer__column {
    width: calc(33.333% - 20px); /* Ajustement pour les colonnes */
    margin-right: 20px;
    margin-bottom: 20px;
}

.link-list a {
    text-decoration: none;
    color: var(--black);
    font: 400 15px "Raleway", sans-serif;
}

.link-list a:hover {
    text-decoration: underline;
}







    

/*Fin du responsive design*/