/* ============================================
   IMPORTANT : Les variables CSS sont maintenant dans variables.css
   Ce fichier doit être chargé APRÈS variables.css et utilities.css
   ============================================ */

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-family-base);
    background-color: var(--bg-body);
    margin: 0;
    color: var(--text-primary);
    transition: background-color var(--transition-slow);
}

/*******************************/
/* --- Barre de Navigation --- */
/*******************************/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-navbar);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

#barre-principale {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--bg-card);
}

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar .logo {
    width: var(--height-navbar);
    height: var(--height-navbar);
    margin-right: var(--spacing-sm);
}

.navbar .site-title {
    font-size: var(--font-size-navbar);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0 var(--spacing-md);
}

.nav-links a {
    text-decoration: none;
    color: var(--color-primary-dark);
    font-size: var(--font-size-nav-link);
    transition: color var(--transition-slow);
}

.nav-links a:hover {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-bold);
}

/* Positionnement spécifique pour les boutons de la navbar */
.navbar-right .btn {
    margin-left: var(--spacing-sm);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

/* ********/
/* Main */
/* ********/
.contenu-principal {
    flex-grow: 1;
    padding: var(--spacing-lg);
    width: 90%;
    max-width: 1400px;
    margin: var(--spacing-lg) auto;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
}


.login-page-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

/* ********/
/* Footer */
/* ********/
.footer {
    background-color: rgba(68, 68, 68, 0.28);
    color: var(--bg-card);
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding: var(--spacing-sm) 0;
}
.footer p {
    margin: 0;
}

/* ============================================
   SYSTÈME DE BOUTONS UNIFIÉ
   ============================================ */

/* Classe de base pour tous les boutons */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base);
    line-height: var(--line-height-normal);
}

.btn:hover {
    transform: translateY(-1px);
}

/* Variante primaire (bleu) */
.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

/* Variante secondaire (teal) */
.btn-secondary {
    background-color: var(--color-secondary);
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
}

/* Variante recherche (bleu foncé) */
.btn-search {
    background-color: var(--color-primary-dark);
    color: #ffffff;
}

.btn-search:hover {
    background-color: var(--color-primary-darker);
}

/* Variante outline */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: var(--border-width) solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Petit bouton */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Grand bouton */
.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* État sélectionné */
.btn.selected {
    background-color: var(--color-primary-darker);
    color: #ffffff;
}

/* État désactivé */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Contextes spécifiques */
.button-group-horizontal .btn,
.button-group-vertical .btn,
.b-wrapper .btn {
    margin: var(--spacing-xs);
}


/* *************************** */
/* Bouton icone Espace membre  */
/* *************************** */

/* Style pour le message de bienvenue */
.welcome-message {
    font-size: var(--font-size-button);
    color: var(--text-primary);
    margin-right: var(--spacing-xs);
}

    /* Style pour le formulaire de déconnexion pour qu'il s'intègre bien */
.logout-form {
    margin: 0; /* Supprime la marge par défaut du formulaire */
    padding: 0;
}

.icon-button{
    display: inline-block;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: var(--height-icon);
    height: var(--height-icon);
    border-radius: var(--radius-full);
}

.icon-button img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* Effet au survol de la souris */
.bouton-icone:hover {
    transform: scale(1.1); /* Agrandit légèrement le bouton */
}


   
/* ***********/
/* container */
/* ***********/

.cards-container, #cards-container {
    /* display: flex;  */
    justify-content: space-between; /* Espacement entre les encarts */
    gap: var(--gap-lg); /* Espacement entre les encarts */
    max-width: 1400px;
    margin: var(--spacing-lg) auto;
    background-color: var(--bg-section);
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    padding-left: 2rem;
    padding-right: 2rem;
}

.cards-container h1 {
    text-align: center;
    font-size: var(--spacing-xl);
}

.cards-container h2 {
    text-align: center;
    font-size: var(--spacing-lg);
}

.cards-container h3 {
    text-align: center;
    font-size: var(--spacing-md);
}

.cards-container h4 {
    color: var(--color-info);
    text-align: center;
    font-size: var(--font-size-xs);
}


.card {
    flex: 1; /* Chaque encart prend la même largeur */
    max-width: var(--width-card-max); /* Largeur maximale des encarts */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--bg-card);
    border: var(--border-width) solid var(--border-color-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    cursor: pointer;
    text-decoration: none;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.card h3 {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
    text-decoration: underline;
}
.card p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);

}


.cards-container .titre-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005052;
    height: auto;
    font-size: var(--font-size-2xl);
    padding: 20px 0;
}

/* ******** */
/* En-tête */
/* ******** */

header {
    background-color: var(--bg-card);
    color: white;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: var(--font-size-h1);
}

/* ***************** */
/* Boutons Recherche */
/* ***************** */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-group-horizontal {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    gap: var(--gap-md);
}

#b-level-container {
    display: flex;
    justify-content: center;
    gap: var(--gap-lg);
    margin: var(--spacing-xs);
}

.b-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-group-vertical {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-sm);
}

.hidden {
    display: none !important;
}

/* Les styles des boutons de recherche sont maintenant gérés par le système unifié .btn */
/* Utilisez .btn .btn-search pour les boutons de recherche */


.button-group-horizontal2 {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-3xl);
    gap: 350px; /* Gap très large pour espacer les boutons */
}

/* Positionnement spécifique pour les boutons de validation et reset */
#reset-btn,
#validate-selections-btn {
    margin-top: var(--spacing-lg);
}

/* Styles pour la zone d'affichage */
.selection-container {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    border: var(--border-width) solid var(--border-color-light);
    border-radius: var(--radius-md);
    min-width: var(--width-container-sm);
    min-height: var(--spacing-3xl);
    text-align: center;
    background-color: var(--bg-muted);
}


/* ************ */
/* Encarts News */
/* ************ */
.encart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--width-container-lg);
    margin: var(--spacing-sm) auto;
    padding: var(--spacing-lg);
    background-color: var(--bg-input);
    border: var(--border-width) solid var(--border-color-input);
}

.encart h2 {
    color: blueviolet;
    margin: var(--spacing-lg) 0;
}

.encart .texte {
    width: 60%;
}

.encart img {
    width: 30%;
    height: auto;
    border-radius: var(--radius-md);
}

.encart h2 {
    margin-top: 0;
}


/******************************************/
/* Présentation des POI dans les  encarts */
/******************************************/

/* --- La Grille d'Articles --- */
.article-grid {
    display: grid;
    /* C'EST LA LIGNE MAGIQUE :
       Crée une grille de 5 colonnes. Chaque colonne prend une fraction (1fr) de l'espace disponible.
       Le navigateur s'occupe du reste et passe à la ligne automatiquement. */
    grid-template-columns: repeat(5, 1fr);

    /* Espace entre les colonnes et les lignes */
    gap: var(--gap-lg);

    /* Centrage de la grille sur la page */
    max-width: var(--width-container-3xl);
    margin: 0 auto;
}

/* --- Style de chaque carte d'article ("encart") --- */
.article-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* Important pour que l'image respecte les coins arrondis */
    display: flex;
    flex-direction: column; /* Aligne l'image et le contenu verticalement */
    transition: transform var(--transition-base) ease-in-out;
}

.article-card:hover {
    transform: translateY(-5px); /* Effet de surélévation au survol */
}

/* Style de l'image */
.card-image {
    width: 100%;
    height: var(--height-card-image); /* Hauteur fixe pour toutes les images */
    object-fit: cover; /* Assure que l'image remplit l'espace sans être déformée */
}

/* Style du contenu textuel */
.card-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Permet au contenu de prendre l'espace restant */
    display: flex;
    flex-direction: column;
}

/* Style du label (titre) */
.card-label {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-card-label);
}

/* Style de la description */
.card-description {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-card-desc);
    line-height: var(--line-height-base);
    flex-grow: 1; /* Pousse les métadonnées vers le bas */
}

/* --- NOUVEAUX STYLES --- */

/* Conteneur pour les métadonnées (type et région) */
.card-meta {
    margin-top: var(--spacing-md); /* Espace entre la description et les étiquettes */
    display: flex;
    /*flex-wrap: wrap;*/ /* Permet aux étiquettes de passer à la ligne si pas assez de place */
    flex-direction: column; /* <<< MODIFICATION PRINCIPALE : empile les éléments verticalement */
    align-items: flex-start; /* <<< AJOUT IMPORTANT : empêche les étiquettes de s'étirer sur toute la largeur */
    gap: var(--gap-xs); /* Espace entre les étiquettes */
}

/* Style commun pour les étiquettes de type et de région */
.card-type,
.card-region {
    font-size: var(--font-size-xs); /* Police plus petite */
    padding: 4px 8px;
    border-radius: var(--radius-xl); /* Coins très arrondis pour un effet "pilule" */
    font-weight: var(--font-weight-semibold);
}

/* Style spécifique pour l'étiquette de type */
.card-type {
    background-color: var(--color-card-type-bg); /* Fond bleu clair */
    color: var(--color-card-type-text); /* Texte bleu */
}

/* Style spécifique pour l'étiquette de région */
.card-region {
    background-color: var(--color-card-region-bg); /* Fond vert clair */
    color: var(--color-card-region-text); /* Texte vert */
}


/* --- Adaptation pour les écrans plus petits (Responsive Design) --- */
/* Breakpoint XL - Large desktop (1200px) */
@media (max-width: 1200px) {
    .article-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur tablettes */
    }
}

/* Breakpoint LG - Desktop (1024px) */
@media (max-width: 1024px) {
    .article-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    }
}

/* Breakpoint MD - Tablet (768px) */
@media (max-width: 768px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur petits écrans */
    }
}

/* Breakpoint SM - Mobile (576px) */
@media (max-width: 576px) {
    .article-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
}


/*****************************************************/
/* Gestion des boutons de recherche en page d'acceuil*/
/*****************************************************/

/* --- Grille de Boutons --- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-lg); /* Espace réduit */
    max-width: var(--width-container-2xl); /* Largeur max réduite */
    margin: var(--spacing-xl) auto;
}

/* --- Style de chaque Bouton (maintenant un lien <a>) --- */
.category-button {
    background-color: var(--bg-card);
    border: var(--border-width-thick) solid var(--border-color-input);
    border-radius: var(--radius-lg); /* Coins légèrement moins arrondis */
    padding: var(--spacing-md); /* Padding réduit pour réduire la hauteur */
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-base) ease, box-shadow var(--transition-base) ease, border-color var(--transition-base) ease;

    /* Styles pour faire ressembler le lien à un div/bouton */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    color: inherit; /* Hérite la couleur du texte du parent (body) */
}

.category-button:hover, .category-button:focus {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    outline: none;
    border-color: var(--color-primary); /* Couleur de bordure uniforme au survol */
}

.category-button .icon {
    width: var(--spacing-3xl); /* Taille de l'icône réduite */
    height: var(--spacing-3xl); /* Taille de l'icône réduite */
    margin-bottom: var(--spacing-sm); /* Marge inférieure réduite */
    transition: color var(--transition-base) ease;
}

/* --- Styles de couleur des icônes --- */
.cat-documents .icon { color: var(--color-documents); }
.cat-discussions .icon { color: var(--color-discussions); }
.cat-projects .icon { color: var(--color-projects); }
.cat-news .icon { color: var(--color-news); }


.category-button h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
}

.category-button p {
    margin: 0;
    color: var(--text-light);
    font-size: var(--font-size-sm); /* Taille de police réduite */
    line-height: var(--line-height-base);
}

/* --- Vue du Moteur de Recherche --- */
#search-view {
    max-width: var(--width-container-lg);
    margin: var(--spacing-2xl) auto;
    text-align: center;
}

.search-container {
    display: flex;
    width: 100%;
    margin-top: var(--spacing-lg);
}

#search-bar {
    flex-grow: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    outline: none;
}

#search-bar:focus {
    border-color: var(--color-primary);
}

#search-button {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    transition: background-color var(--transition-base) ease;
}

#search-button:hover {
    background-color: var(--color-primary-hover);
}

#back-to-categories {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: var(--spacing-sm);
}

/* --- Classe Utilitaire --- */
.hidden {
    display: none;
}

/* --- Responsive Design --- */
/* Breakpoint XL - Large desktop (1200px) */
@media (max-width: 1200px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Breakpoint LG - Desktop (1024px) */
@media (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Breakpoint MD - Tablet (768px) */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
    .app-header h1 {
        font-size: var(--font-size-2xl);
    }
}

/*******************/
/* Page Détail POI */
/*******************/

.container {
            max-width: var(--width-container-xl);
            margin: var(--spacing-xl) auto;
            padding: var(--spacing-lg);
            background-color: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
        }
h1 {
    font-size: var(--font-size-4xl);
    color: var(--text-heading);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}
h2 {
    font-size: var(--font-size-h2);
    color: var(--text-subheading);
    border-bottom: var(--border-width-thick) solid var(--bg-form-header);
    padding-bottom: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}
.section {
    margin-bottom: var(--spacing-lg);
}
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap-md);
    margin-top: var(--spacing-lg);
}
.photo-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Fait en sorte que l'image couvre la zone sans se déformer */
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-slow) ease;
}
.photo-gallery img:hover {
    transform: scale(1.05);
}
ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}
li.tag {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-circle);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}
/* Palette de couleurs pour les tags */
.tag-theme { background-color: var(--color-tag-theme-bg); color: var(--color-tag-theme-text); }
.tag-amenity { background-color: var(--color-tag-amenity-bg); color: var(--color-tag-amenity-text); }
.tag-payment { background-color: var(--color-tag-payment-bg); color: var(--color-tag-payment-text); }
.tag-language { background-color: var(--color-tag-language-bg); color: var(--color-tag-language-text); }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-lg);
}
.info-item strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-heading);
}
.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
}
.map-container {
    width: 100%;
    height: var(--height-map);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Breakpoint MD - Tablet (768px) */
@media (max-width: 768px) {
    .location-grid {
        grid-template-columns: 1fr;
    }
}


/*********************************************************/
/* Page de Connexion, Inscription et Gestion Mot de Passe*/
/*********************************************************/

/* Affiche verticalement les éléments du formaulaire */
.login-card form {
    display: flex;
    flex-direction: column; /* La correction clé est ici */
}

.login-page-container {
    /* On lui donne la capacité de grandir pour remplir l'espace */
    flex-grow: 1;

    /* Et on lui applique les styles de centrage */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg); /* Ajoute un peu d'espace sur les petits écrans */
}

/* --- La carte de connexion --- */
.login-card {
    background: var(--bg-card);
    max-width: var(--width-login-card);
    width: 100%;
    margin: 0 auto; /* Centre la carte horizontalement */
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: var(--border-width) solid var(--border-color);
}

/* --- En-tête de la carte --- */
.card-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.card-header h2 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 28px; /* Taille spécifique au header */
    font-weight: var(--font-weight-semibold);
}

.card-header p {
    margin: 0;
    color: var(--text-light);
}

/* --- Groupes de champs (label + input) --- */
.input-group {
    margin-bottom: var(--spacing-lg);
}

.input-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
}

.input-group input {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    box-sizing: border-box; /* Assure que le padding n'augmente pas la largeur */
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Box-shadow spécifique focus */
}

/* --- Options du formulaire --- */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    font-size: 14px; /* Taille spécifique options */
}

.remember-me {
    display: flex;
    align-items: center;
}

.remember-me input {
    margin-right: var(--spacing-sm);
}

.forgot-password {
    color: var(--color-primary);
    text-decoration: none;
}
.forgot-password:hover {
    text-decoration: underline;
}

/* --- Bouton de connexion --- */
.login-btn {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.login-btn:hover {
    background-color: var(--color-primary-hover);
}

/* --- Pied de la carte --- */
.card-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
    font-size: var(--spacing-md);
    color: var(--text-light);
}

.card-footer a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.card-footer a:hover {
    text-decoration: underline;
}


/**********************************/
/* Caroussel Photo page détail POI*/
/**********************************/


#carousel-container {
    width: var(--width-carousel); /* (350px * 3) + (30px * 2) */
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

/* Ce conteneur est nécessaire pour le masquage et le défilement */
.carousel-viewport {
    width: 100%;
    overflow: hidden;
}

#carousel-slide {
    display: flex;
    gap: var(--gap-xl);
    transition: transform var(--transition-smooth);
}

.photo-item {
    width: 350px; /* Largeur fixe pour carousel */
    height: var(--height-photo-item);
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0; /* Important pour que la taille fixe soit respectée */
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent noir */
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 24px; /* Taille icône flèche */
    cursor: pointer;
    z-index: var(--z-sticky);
    border-radius: var(--radius-full);
    display: none; /* Masqué par défaut, affiché par JS si nécessaire */
    width: var(--spacing-3xl);      /* On force une largeur fixe */
    height: var(--spacing-3xl);     /* On force une hauteur fixe */
    flex-grow: 0;     /* On interdit au bouton de grandir dans un conteneur flex */
    flex-shrink: 0;   /* On interdit au bouton de rétrécir dans un conteneur flex */
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Plus foncé au survol */
}

#prevBtn {
    left: -25px; /* Position hors carousel */
}

#nextBtn {
    right: -25px; /* Position hors carousel */
}


/***************************/
/* Nouvelle page recherche */
/***************************/
/* Style pour le conteneur de l'arborescence */
#tree-container ul, #tree-container li {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
}

#tree-container ul {
    padding-left: var(--spacing-lg); /* Indentation for nested lists */
}

#tree-container > ul {
    padding-left: 0; /* No indentation for the root list */
}

#tree-container .tree-toggle {
    cursor: pointer;
    margin-right: var(--spacing-xs);
    display: inline-block;
    width: 1em;
    color: var(--text-light);
    transition: transform var(--transition-base);
}

#tree-container .department-list.collapsed {
    display: none;
}

#tree-container .region.open > .tree-toggle {
    transform: rotate(90deg);
}

#tree-container .region > label {
    font-weight: var(--font-weight-bold);
}

/* Style pour les étiquettes/boutons de type */
.tag-btn {
    width: var(--spacing-3xl);
    height: var(--spacing-3xl);
    font-size: var(--font-size-2xl);
    transition: background-color var(--transition-slow), border-color var(--transition-slow);
}

/* Style pour une étiquette sélectionnée */
.tag-btn.selected {
    background-color: var(--color-primary); /* Couleur primaire de Bootstrap */
    color: white;
    border-color: var(--color-primary-hover);
}

#results-display .list-group-item {
    border: none; /* Remove default list-group borders */
    padding-left: 0;
    display: flex;
    align-items: baseline;
}

#results-display .region-wrapper {
    flex-basis: 280px; /* Largeur fixe région */
    flex-shrink: 0;   /* Prevent it from shrinking */
}

.tag-group-row {
    display: flex;
    align-items: center; /* Aligne verticalement le libellé et les boutons */
    flex-wrap: wrap; /* Permet aux boutons d'aller à la ligne si pas assez de place */
}

.tag-group-label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    color: var(--text-light); /* Gris Bootstrap */
}


/* Style pour les résultats */
#results-display h5 {
    margin-top: 1rem;
    color: var(--color-primary);
}
#results-display .badge {
    font-size: var(--font-size-md);
}

#show-criteria-container {
    display: flex;
    justify-content: center;
}

.hidden {
    display: none;
}

/* Ajustements spécifiques pour les boutons d'action */
#action-buttons .btn {
    vertical-align: middle; /* Assure un bon alignement vertical */
}


/* Nouveaux styles pour le résumé des critères */

.summary-container {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    display: flex; /* Utilise flexbox pour aligner les éléments */
    flex-direction: column; /* Permet aux éléments de passer à la ligne */
    gap: var(--gap-sm); /* Espace entre les pilules */
}

.criteria-line {
    display: flex; /* Chaque ligne est un conteneur flex */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.summary-title {
    font-weight: var(--font-weight-bold);
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-md);
    color: var(--text-subtle);
}

.criteria-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-form-header); /* Couleur de fond gris clair */
    border: var(--border-width) solid var(--border-color-form);
    border-radius: var(--radius-pill); /* Coins très arrondis pour l'effet pilule */
    padding: var(--spacing-xs) 12px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: all var(--transition-base) ease-in-out;
}

.criteria-pill .icon {
    margin-right: var(--gap-xs); /* Espace entre l'icône et le texte */
    color: var(--color-primary); /* Couleur bleue pour l'icône */
}

.criteria-pill .remove-btn {
    margin-left: var(--spacing-sm);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--text-light);
    line-height: 1;
}

.criteria-pill .remove-btn:hover {
    color: var(--color-danger); /* Rouge au survol */
}

/*******************/
/* Grille des avis */
/*******************/
.container {
    width: 90%;
    max-width: var(--width-container-3xl);
    margin: var(--spacing-3xl) auto;
    text-align: center;
    position: relative; /* Ajout pour servir de référence de positionnement */
}

h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-heading-alt);
}

.subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
    margin-bottom: var(--spacing-2xl);
}

.reviews-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligne les cartes à gauche */
    gap: var(--gap-lg);
    text-align: left;
}

/* Carte d'un avis */
.review-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-slow) ease, box-shadow var(--transition-slow) ease;
    display: flex;
    flex-direction: column;
    flex: 0 1 var(--width-card-review); /* Contrôle la largeur de la carte */
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

/* En-tête de la carte (avatar, nom, étoiles) */
.review-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.avatar {
    width: var(--height-avatar);
    height: var(--height-avatar);
    border-radius: var(--radius-full);
    margin-right: var(--spacing-md);
    object-fit: cover;
    background-color: var(--border-color); /* Couleur de fond si l'image est absente */
}

.author-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    margin: 0;
}

/* Étoiles */
.stars {
    font-size: var(--font-size-xl);
}

.stars .star {
    color: var(--color-star-empty); /* Gris clair par défaut */
}

.stars .star.filled {
    color: var(--color-star-filled); /* Jaune doré pour les étoiles pleines */
}

.review-date {
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
    margin: 0.25rem 0;
}

/* Texte de l'avis */
.review-text {
    font-size: var(--font-size-md);
    color: var(--text-subtle);
}

/* Style pour le lien "Ajouter un commentaire" */
.add-review-link {
    position: absolute;
    top: var(--spacing-3xl); /* Aligné avec le haut du conteneur */
    right: 0;
    background-color: var(--color-review-link);
    color: var(--bg-card);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-size-md);
    transition: background-color var(--transition-slow) ease;
}

.add-review-link:hover {
    background-color: var(--color-review-link-hover);
}


/* Avis */
/* Conteneur pour un groupe label + champ */
  .form-group {
      margin-bottom: var(--spacing-lg);
  }

  .form-group label {
      display: block;
      margin-bottom: var(--spacing-sm);
      font-weight: var(--font-weight-medium);
  }

  /* NOUVEAU : Conteneur pour les actions de formulaire (boutons) */
  .form-actions {
      text-align: right; /* Aligne le ou les boutons sur la droite */
  }

  /* Style pour les champs eux-mêmes (input, textarea) */
  .form-control {
      width: 100%; /* Le champ prend 100% de la largeur de son parent .form-group */
      padding: 12px var(--spacing-md);
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: var(--font-size-button);
      box-sizing: border-box;
      transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }

  .form-control:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Box-shadow spécifique focus */
  }

  /* NOUVEAU : Conteneur pour mettre des champs côte à côte */
  .form-row {
      display: flex;
      gap: var(--gap-lg); /* Espace entre les champs */
  }

  /* Chaque groupe dans la ligne prend une part égale de l'espace */
  .form-row .form-group {
      flex: 1;
  }

  /* NOUVEAU : Style pour le bouton d'envoi */
  .submit-btn {
      display: inline-block; /* Le bouton prend la largeur de son contenu */
      padding: var(--spacing-sm) var(--spacing-lg); /* Hauteur et largeur du bouton */
      font-size: var(--font-size-button);
      font-weight: var(--font-weight-semibold);
      color: var(--bg-card);
      background-color: var(--color-primary);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background-color var(--transition-base);
  }

  .submit-btn:hover {
      background-color: var(--color-primary-hover);
  }