.wee-ContentCommune:before {
    color: #B60D60;
}
.nombre-offres {
    width: 100%;
}
.wee-ContentCommune:before {
    font-family: Font Awesome\ 5 Free;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 900;
    line-height: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    content: "\f3c5";
    margin-right: 5px;
}
/* Container principal */
.wee_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Éléments de l'article */
.wee_item {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
    flex: 0 1 calc(33% - 20px); /* Pour trois éléments par ligne */
    min-width: 250px; /* Largeur minimale pour une bonne réactivité */
}

.wee_item:hover {
    transform: translateY(-5px);
}

/* Image de l'article */
.wee_image-container {
    overflow: hidden;
    height: 200px;
    position: relative;
}

.wee_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wee_item:hover .wee_image {
    transform: scale(1.1); /* Zoom sur l'image au survol */
}

/* Conteneur d'offres */
.wee_offers-container {
    padding: 15px;
}

.wee_offers-container a {
    text-decoration: none;
    color: #005b5e;
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.wee_offers-container a:hover {
    color: #0056b3;
}

/* Info de la commune et type d'équipement */
.wee-ContentCommune, .wee-Clas {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Filtres */
.filters-container {
    margin-bottom: 20px;
}

.filters {
    display: flex;
    gap: 20px;
}

.filter-item {
    flex: 1;
}

select {
    width: 100%;
    padding: 5px;
}

/* Conteneur principal des filtres */
.filters {
    background-color: #f8f9fa; /* Couleur de fond douce */
    padding: 20px; /* Espacement intérieur */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre douce */
    margin: 20px 0; /* Marge autour du conteneur */
    display: flex; /* Utiliser Flexbox pour la mise en page */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: space-between; /* Espacement entre les éléments */
}

/* Styles pour les étiquettes */
.filters label {
    font-weight: bold; /* Mettre les étiquettes en gras */
    margin-right: 10px; /* Espacement entre l'étiquette et le sélecteur */
    color: #333; /* Couleur du texte */
}

/* Styles pour les sélecteurs */
.filter-select {
    padding: 10px; /* Espacement intérieur du sélecteur */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 5px; /* Coins arrondis pour les sélecteurs */
    font-size: 1rem; /* Taille de police du sélecteur */
    margin-bottom: 10px; /* Espacement inférieur pour éviter le chevauchement */
    /*flex: 1 0 200px; /* Flex pour permettre un ajustement responsive */
    max-width: 300px; /* Largeur maximale pour les sélecteurs */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

/* Styles pour les boutons */
.filter-button {
    padding: 10px 20px; /* Espacement intérieur du bouton */
    background-color: #005b5e; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Changer le curseur au survol */
    transition: background-color 0.3s; /* Transition douce pour la couleur */
}

.filter-button:hover {
    background-color: #0056b3; /* Couleur au survol */
}

/* Styles pour le compteur d'offres */
.nombre-offres {
    font-size: 1.1rem; /* Taille de police légèrement plus grande */
    margin-top: 20px; /* Espacement supérieur */
}

/* Zone des résultats */
.results-container {
    margin-top: 20px; /* Espacement supérieur */
    padding: 20px; /* Espacement intérieur */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 5px; /* Coins arrondis */
    background-color: #fff; /* Fond blanc */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

/* Styles pour les écrans plus petits */
@media (max-width: 600px) {
  .wee_item {
      flex: 1 1 calc(33% - 20px); /* Pour trois éléments par ligne */
  }
  .filters {
        flex-direction: column; /* Disposer les éléments en colonne */
    }

    .filter-select {
        max-width: 100%; /* Rendre les sélecteurs de pleine largeur */
    }

    .filter-button {
        width: 100%; /* Rendre le bouton de pleine largeur */
        margin-top: 10px; /* Espacement supérieur */
    }
}


/* Nombre d'offres */
.nombre-offres {
    margin-top: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #343a40;
}
/* Styles pour la page de détail de l'article */
.article-detail {
    background-color: #f9f9f9; /* Couleur de fond douce */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px; /* Augmenter le padding pour un effet aéré */
    margin: 20px 0;
    max-width: 800px; /* Limiter la largeur pour une meilleure lisibilité */
    margin: auto; /* Centrer l'article */
}

/* Titre de l'article */
.article-detail h1 {
    font-size: 2.5rem; /* Augmenter la taille pour un impact */
    margin-bottom: 15px;
    color: #333;
    text-align: center; /* Centrer le titre */
}

/* Paragraphes */
.article-detail p {
    font-size: 1.1rem; /* Taille de police augmentée pour la lisibilité */
    line-height: 1.6;
    margin: 10px 0;
    color: #555; /* Couleur gris pour le texte */
}

/* Mots en gras */
.article-detail p strong {
    color: #005b5e; /* Couleur bleue pour les éléments importants */
}

/* Conteneur pour les images */
.image-container {
    display: flex; /* Utiliser Flexbox pour la mise en page */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: center; /* Centrer les images */
    gap: 15px; /* Espacement entre les images */
    margin-top: 20px; /* Espacement au-dessus du conteneur */
}

/* Image de l'article */
.article-photo {
    /*width: calc(33.33% - 10px);  Trois images par ligne avec un espacement */
    height: 200px; /* Définir une hauteur fixe */
    object-fit: cover; /* Couvrir le conteneur sans déformer l'image */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre douce autour des images */
}

/* Pour les écrans plus petits */
@media (max-width: 768px) {
    .article-photo {
    /*    width: calc(50% - 10px);  Deux images par ligne sur les écrans moyens */
    }
}

@media (max-width: 480px) {
    .article-photo {
    /*    width: calc(100% - 10px);  Une image par ligne sur les petits écrans */
    }
}

/* Lien de retour */
a.back {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    background-color: #005b5e; /* Couleur du bouton */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center; /* Centrer le texte du lien */
    transition: background-color 0.3s, transform 0.3s; /* Ajouter une transition pour les effets */
}

a.back:hover {
    background-color: #0056b3; /* Couleur du bouton au survol */
    transform: scale(1.05); /* Légère augmentation au survol */
}
.article-content ul.comfort-list {
  column-count: 3;
  column-gap: 20px;
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.comfort-list li {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  /* Pour les écrans plus petits, revenir à une colonne */
  .article-content ul.comfort-list {
    column-count: 1;
  }
}
/* Styles communs pour activité principale et sous-activité */
.activite-principale,
.sous-activite {
    display: inline-block; /* Affichage en ligne pour les sous-activités */
    background-color: #088391; /* Couleur de fond par défaut */
    color: #fff; /* Couleur du texte */
    padding: 7px 20px; /* Espacement interne */
    margin-right: 10px; /* Marge à droite */
    margin-bottom: 5px; /* Marge en bas */
    border-radius: 4px; /* Coins arrondis pour un look moderne */
    font-family: Arial, sans-serif; /* Police de caractères */
    transition: background-color 0.3s; /* Effet de transition pour le changement de couleur */
}

/* Styles spécifiques pour l'activité principale */
.activite-principale {
    background-color: #212121; /* Couleur de fond pour l'activité principale */
    font-weight: bold; /* Met le texte en gras */
    display: block; /* Changer l'affichage à block pour faire un retour à la ligne */
    margin-top: 10px; /* Marge en haut pour espacer les activités principales */
}

/* Effets au survol */
.activite-principale:hover,
.sous-activite:hover {
    background-color: #005b5e; /* Changer la couleur de fond au survol */
}

/* Styles pour les sous-activités */
.sous-activite {
    margin-top: 0; /* Pas de marge en haut pour les sous-activités */
}

/* Styles responsives */
@media (max-width: 768px) {
    .activite-principale,
    .sous-activite {
        display: block; /* Affichage en bloc pour les petits écrans */
        width: calc(100% - 20px); /* Prend toute la largeur disponible en tenant compte des marges */
        margin-right: 0; /* Réinitialise la marge à droite */
    }
}
/* Styles communs pour activité principale et sous-activité */
.activite-principale,
.sous-activite {
    display: inline-block; /* Affichage en ligne pour un alignement horizontal */
    background-color: #088391; /* Couleur de fond par défaut */
    color: #fff; /* Couleur du texte */
    padding: 7px 20px; /* Espacement interne */
    margin-right: 10px; /* Marge à droite */
    margin-bottom: 5px; /* Marge en bas */
    border-radius: 4px; /* Coins arrondis pour un look moderne */
    font-family: Arial, sans-serif; /* Police de caractères */
    transition: background-color 0.3s; /* Effet de transition pour le changement de couleur */
}

/* Styles spécifiques pour l'activité principale */
.activite-principale {
    background-color: #212121; /* Couleur de fond pour l'activité principale */
    font-weight: bold; /* Met le texte en gras */
}

/* Effets au survol */
.activite-principale:hover,
.sous-activite:hover {
    background-color: #005b5e; /* Changer la couleur de fond au survol */
}

/* Styles responsives */
@media (max-width: 768px) {
    .activite-principale,
    .sous-activite {
        display: block; /* Affichage en bloc pour les petits écrans */
        width: calc(100% - 20px); /* Prend toute la largeur disponible en tenant compte des marges */
        margin-right: 0; /* Réinitialise la marge à droite */
    }
}