/****** General ***********/

* {
    font-family: 'Raleway', sans-serif; /* Police principale */
}

:root {
    --main-color: #0065FC; /* Couleur principale */
    --main-bg-color: #F2F2F2;  /* Couleur de fond principale */
    --filter-bg-color: #DEEBFF; /* Couleur de fond des filtres */
}

.fa-solid {
    color: var(--main-color); /* Couleur principale */
}

body {
    display: flex; /* Active Flexbox pour aligner les éléments */
    justify-content: center; /* Centre le corps horizontalement */  
    margin: 0px; /* Enlève les marges par défaut reset CSS */

}

.main-container {
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1440px; /* Largeur maximale de 1440px */
    min-width: 1024px; /* Largeur minimale de 1024px */
    padding: 0 50px; /* Padding gauche et droite de 50px */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}    

a {
    color: inherit; /* Hérite de la couleur parente */ 
    text-decoration: none; /* Enlève le soulignement */
}

.section-title {
    margin: 0; /* Enlève les marges par défaut */
    font-size: 22px; /* Taille de la police */
}

.card {
    background-color: white; /* Couleur de fond blanche */
    border-radius: 20px; /* Bords arrondis */
    padding: 5px; /* Ajoute du padding */
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); /* Ajoute une ombre portée */
}

.card img {
    object-fit: cover; /* Couvre toute la zone de l'image */
}

.card-title {
    font-size: 16px; /* Taille de la police */
}

.euro {
    font-weight: 700;  /* Met le texte en gras */
}

.neutral-star {
    color: var(--main-bg-color);  /* Couleur de l'étoile neutre */
}

/****** Header-logo-menu ***********/

header {
    display: flex; /* Active Flexbox pour aligner les éléments sur une ligne */
    justify-content: space-between; /* Écarte le logo et la navigation aux extrémités */
    height: 79px; /* Hauteur du header */
    margin-bottom: 30px; /* Espace en dessous du header */
    
}

header img {
    width: 61.09px; /* Taille du logo comme dans l'image */
    height: 19px; /* Taille du logo comme dans l'image */
    padding-top: 30px; /* Ajoute de l'espace au-dessus du logo */
}

nav {
    display: flex; /* Active Flexbox pour la navigation */
    width: 244px; /* Largeur de la navigation */
    height: 35px; /* Hauteur de la navigation */
    padding-top: 0px; /* Ajoute de l'espace au-dessus de la navigation */
    gap: 68px; /* L'espacement entre les liens */
}

nav a {
  text-decoration: none; /* Pour enlever le soulignement */
  color: black; /* Couleur du texte */
  padding-top: 27px; /* Pour centrer verticalement les liens */
  position: relative; /* Indispensable pour positionner la ligne du hover */
}

nav a:hover {
  color: #0065FC; /* Change la couleur du texte au survol */
}

nav a::after {
  content: ""; /* Nécessaire pour afficher l'élément */
  position: absolute; /* Pour positionner la ligne par rapport au lien */
  top: 0; /* Positionne la ligne en haut du lien */
  left: 0;  /* Aligne la ligne à gauche du lien */
  width: 100%;  /* La ligne fait toute la largeur du lien */
  height: 2px;  /* Hauteur de la ligne */
  background-color: white; /* Couleur de la ligne */
}

nav a:hover::after {
  background-color: #0065FC; /* Change la couleur de la ligne au survol */
}

/****** Section Formulaire ***********/

.section-search{
    display:flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    width: 100%; /* Prend toute la largeur disponible */
    height: 281px; /* Hauteur de la section */
    gap: 35px; /* Espace entre les éléments */
}

.div-search{
    display:flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    width: 100%; /* Prend toute la largeur disponible */
    gap: 8px; /* Espace entre les éléments */
    color: #000000; /* Couleur du texte */
}

h1 {
    height: 26px; /* Hauteur du titre */
    font-size: 22px; /* Taille de la police */
    font-weight: 700; /* Poids de la police */
    margin: 0; /* Enlève les marges par défaut */
}

.p-section-search {
    height: 19px; /* Hauteur du paragraphe */
    font-size: 16px; /* Taille de la police */
    font-weight: 400; /* Poids de la police */
    margin: 0; /* Enlève les marges par défaut */
}   

.form-search {
    display: flex; /* Active Flexbox pour aligner les éléments */
    width: 377px; /* Largeur du formulaire */
    height:49px; /* Hauteur des colonnes */
    align-items: center; /* Centre les éléments verticalement */
}

.form-column {
    display: inline-block; /* Affiche les éléments en ligne */
    margin: 0; /* Enlève les marges par défaut */
    vertical-align: top; /*aligne les éléments en haut */
    height: 49px; /* Hauteur des colonnes */    
}

.settings-btn-1 {
    width: 50px; /* Largeur du bouton */
    height: 49px; /* Hauteur des colonnes */
    border-top-left-radius: 15px; /* Arrondi en haut à gauche */
    border-bottom-left-radius: 15px; /* Arrondi en bas à gauche */
    border: 1px; /* Ajoute une bordure */
}

.settings-btn-1 i {
    display: inline-block; /* Affiche l'icône en ligne */
    width: 14px; /* Largeur de l'icône */
    height: 18px; /* Hauteur de l'icône */
    font-size: 18px;/* Taille de l'icône */
    color: #000000;  /* Couleur d l'icone */
}

.settings-btn-2 {
    font-size: 18px; /* Taille de l'icône */
    width: 195px; /* Largeur du bouton */
    height: 49px; /* Hauteur des colonnes */
    border-style: solid; /* Style de la bordure */
    border: 1px; /* Ajoute une bordure */
    border-color: #F2F2F2; /* Couleur de la bordure */
    font-weight: 700; /* Poids de la police */
    color: #000000; /* Couleur du texte */
    text-align: center; /* Centre le texte */
    padding: 0 10px; /* Ajoute du padding gauche et droite */
    
}

.settings-btn-3 {
    font-size: 18px; /* Taille de l'icône */
    font-weight: 700; /* Poids de la police */
    width: 132px; /* Largeur du bouton */
    height: 49px; /* Hauteur des colonnes */
    border-top-right-radius: 15px; /* Arrondi en haut à droite */
    border-bottom-right-radius: 15px; /* Arrondi en bas à droite */
    border: 1px; /* Ajoute une bordure */
    background-color: #0065FC; /* Couleur de fond */
    color: #ffffff; /* Couleur du texte */
}

/****** filtres ***********/

.section-search h2 {
    font-size: 18px; /* Taille de la police */
    font-weight: 700; /* Poids de la police */
    margin: 0; /* Enlève les marges par défaut */
}

.filtre-container {
    display: flex; /* Active Flexbox pour aligner les éléments */
    gap: 15px;  /* Espace entre les éléments */
    align-items: center;  /* Centre les éléments verticalement */
}

.filtre-btn {
    display: flex;  /* Active Flexbox pour aligner les éléments */
    align-items: center; /* Centre les éléments verticalement */
    height: 50px; /* Hauteur des boutons */
    padding: 4px 19px; /* Padding haut/bas et gauche/droite */
    background-color: white; /* Couleur de fond */
    border: 2px solid #d9d9d9; /* Bordure grise */
    border-radius: 25px; /* Bords arrondis */
    font-size: 17px;  /* Taille de la police */
    font-weight: 700;  /* Poids de la police */
    gap: 10px; /* Espace entre l'icône et le texte */
}

.filtre-btn:hover {
    background-color: #DEEBFF; /* Change la couleur de fond au survol */
}

.filtre-btn i {
    font-size: 22px; /* Taille de l'icône */
}

.info-message {
    display: flex;  /* Active Flexbox pour aligner les éléments */
    align-items: center;  /* Centre les éléments verticalement */
    gap: 10px; /* Espace entre l'icône et le texte */
}

.info-message i {
    color: #0065FC; /* Couleur de l'icône */
    font-size: 10px; /* Taille de l'icône */
    display: flex; /* Active Flexbox pour aligner les éléments */
    justify-content: center; /* Centre l'icône horizontalement */
    align-items: center;  /* Centre l'icône verticalement et horizontalement */
    width: 24px; /* Largeur de l'icône */
    height: 24px; /* Hauteur de l'icône */
    border: 1px solid #D9D9D9; /* Bordure grise */
    border-radius: 50%; /* Cercle */
}

.info-message p {
    margin: 0;  /* Enlève les marges par défaut */
    font-size: 16px;  /* Taille de la police */
    font-weight: 400;  /* Poids de la police */
}

/****** Hebergements And Populaires ***********/

.hebergements-and-populaires {
    display: flex; /* Active Flexbox pour aligner les éléments */
    justify-content: space-between; /* Écarte les deux sections aux extrémités */
    margin: 35px 0; /* Espace au-dessus et en dessous des sections */
}

.hebergements-and-populaires section {
    background-color: var(--main-bg-color); /* Couleur de fond principale */
    border-radius: 20px; /* Bords arrondis */
    padding: 30px; /* Ajoute du padding */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */   
}

/****** Hebergements ***********/

.hebergements {
    width: 65%; /* Largeur de la section hébergements */
}

.hebergements-cards {
    display: grid; /* Active Grid pour aligner les éléments */
    grid-template-columns:repeat(3,1fr); /* 3 colonnes de taille égale */
    gap:30px; /* Espace entre les cartes */
}

.hebergements .section-title {
    display: flex; /* Active Flexbox pour aligner les éléments */
    justify-content: space-between; /* Écarte le titre et le lien aux extrémités */
    align-items: center; /* Centre les éléments verticalement */
    margin-bottom: 33px; /* Espace en dessous du titre */
 }

.hebergements-cards .card {
    display: flex; /* Active Flexbox pour aligner les éléments */
    width: 100%; /* Largeur des cartes */
    height: 207px; /* Hauteur des cartes */
    flex-direction: column; /* Aligne les éléments en colonne */
    gap: 4px; /* Espace entre les éléments */
    margin: 0; /* Enlève les marges par défaut */
}

.hebergements-cards img {
    width:100%; /* Largeur de l'image */
    height: 124px; /* Hauteur de l'image */
    border-top-left-radius: 20px; /* Arrondi en haut à gauche */
    border-top-right-radius: 20px; /* Arrondi en bas à gauche */
}

.hebergements-cards .card-content {
    display: flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    width: 100%; /* Largeur du contenu */
    height: 100%; /* Hauteur du contenu */
    margin: 0; /* Enlève les marges par défaut */
    padding: 0 15px; /* Espace à gauche du contenu */  
    gap: 8px; /* Espace entre les éléments */
    
}

.hebergements-cards .card-title {
    height: 100%; /* Hauteur du titre */
    font-size: 16px; /* Taille de la police */
    margin: 0; /* Enlève les marges par défaut */ 
}

.hebergements-cards .card-subtitle {
    height: 100%; /* Hauteur du sous-titre */
    font-size: 14px; /* Taille de la police */
    margin: 0; /* Enlève les marges par défaut */  
}

/****** Populaires ***********/

.populaires {
    width: 32%; /* Largeur de la section populaires */
}

.populaires-title {
    display: flex; /* Active Flexbox pour aligner les éléments */
    justify-content: space-between; /* Écarte le titre et le lien aux extrémités */
    align-items: center; /* Centre les éléments verticalement */
}

.populaires-cards .card {
    display: flex; /* Active Flexbox pour aligner les éléments */
    margin-top: 33px; /* Espace au-dessus des cartes */
}

.populaires-cards img {
    width: 33%; /* Largeur de l'image */
    height: 136px; /* Hauteur de l'image */
    border-top-left-radius: 20px; /* Arrondi en haut à gauche */
    border-bottom-left-radius: 20px; /* Arrondi en bas à gauche */
}

.populaires-cards .card-content {
    width: 67%; /* Largeur du contenu */
    padding-left: 15px; /* Espace à gauche du contenu */
    display: flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    justify-content: space-between; /* Écarte les éléments verticalement */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

.populaires-cards .card-title {
    margin-top: 10px; /* Espace au-dessus du titre */
    margin-bottom: 4px; /* Espace en dessous du titre */
}

.populaires-cards .card-subtitle {
    margin: 0; /* Enlève les marges par défaut */
}

.populaires-cards .card-rating {
    margin-bottom: 5px; /* Espace en dessous de la note */
}

.afficher-plus {
    font-size: 18px;  /* Taille de la police */
    font-weight: 700;  /* Poids de la police */
}

/****** Activités à Marseille ***********/

.activities {
    display: flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    width: 100%; /* Prend toute la largeur disponible */
    height: 559px; /* Hauteur de la section */
    padding: 30px; /* Ajoute du padding */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    gap:30px; /* Espace entre les éléments */
}

.activities-title {
    margin: 0; /* Enlève les marges par défaut */
    font-size: 22px; /* Taille de la police */
    font-weight: 700; /* Poids de la police */
}

.activities-line {
    display: flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: row; /* Aligne les éléments en ligne */
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    justify-content: space-between; /* Écarte les cartes aux extrémités */
    width: 100%; /* Prend toute la largeur disponible */
    height: 439px; /* Hauteur des lignes */
    gap: 30px; /* espace entre les cartes */    
}

.activities-card-link {
    width: 24%; /* Largeur du lien */
    height: 439px; /* Hauteur du lien */
}

.activities-article-card {
    background-color: white; /* Couleur de fond blanche */
    border-radius: 20px; /* Bords arrondis */
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); /* Ajoute une ombre portée */
    width: 100%; /* Largeur de la carte */
    height: 439px; /* Hauteur de la carte */
    display: flex; /* Active Flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */ 
}   

.activities img {
    width: 100%; /* Largeur de l'image */
    height: 380px; /* Hauteur de l'image */
    border-top-left-radius: 20px; /* Arrondi en haut à gauche */
    border-top-right-radius: 20px; /* Arrondi en bas à gauche */
    object-fit: cover; /* Couvre toute la zone de l'image */
}

.activities-card-title {
    font-size: 16px; /* Taille de la police */
    font-weight: 700; /* Poids de la police */
    margin: 0; /* Enlève les marges par défaut */
    padding: 19px 20px; /* Ajoute du padding */
} 

/****** Footer ***********/

.footer {
    display: flex; /* Active Flexbox pour aligner les éléments */
    justify-content: space-around; /* Écarte les colonnes aux extrémités */
    padding: 20px; /* Ajoute du padding */
    margin-top: 50px; /* Espace au-dessus du footer */
    background-color: var(--main-bg-color); /* Couleur de fond principale */
}

.footer-column {
    display: flex; /* Active Flexbox pour aligner les éléments */
    flex: 1; /* Chaque colonne prend une part égale de l'espace */
    flex-direction: column; /* Aligne les éléments en colonne */
    padding: 0 15px; /* Ajoute du padding gauche et droite */
}

.footer-column-title {
    font-size: 18px; /* Taille de la police */
    font-weight: 700; /* Poids de la police */
    margin: 0 0 15px 0; /* Correction de la marge */
}

.footer-column-list {
    list-style: none; /* Enlève les puces */
    padding: 0; /* Enlève le padding par défaut */
    margin: 0; /* Enlève les marges par défaut */
}

.footer-column-list-item {
    font-size: 16px; /* Taille de la police */
    font-weight: 400; /* Poids de la police */
    margin-bottom: 10px; /* Espace entre les éléments de la liste */
}

.footer-column-link {
    text-decoration: none; /* Enlève le soulignement */
    color: inherit; /* Hérite de la couleur parente */
}

/* 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; /* Aligne les sections en colonne */
    }

    .hebergements {
        width: 100%; /* Largeur de la section hébergements */
    }

    .populaires {
        width: 100%; /* Largeur de la section populaires */
        margin-top: 50px; /* Espace au-dessus de la section populaires */
    }

    .populaires-cards {
        display: flex; /* Active Flexbox pour aligner les éléments */
        flex-direction: row; /* Aligne les cartes en ligne */
        justify-content: space-between; /* Écarte les cartes aux extrémités */
    }

    .populaires-cards a {
        width: 30%; /* Largeur des cartes */
    }

    .populaires-cards .card-title {
        font-size: 14px; /* Taille de la police du titre */
    }

    .populaires-cards .card-subtitle {
        font-size: 13px; /* Taille de la police du sous-titre */
    }
}

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