/* css/style.css */


/* Variables CSS pour les couleurs d'Outal et de Booking.com */

:root {
    /* Bleu principal, comme Booking.com */
    --secondary-orange: #ffb700;
    /* Orange/Jaune pour les accents, le "O" du logo */
    --dark-blue: #003580;
    /* Bleu foncé pour l'en-tête */
    --text-color: #333;
    /* Couleur de texte générale */
    --light-grey: #f2f2f2;
    /* Fond gris clair */
    --border-grey: #ccc;
    /* Couleur des bordures */
    --white: #fff;
}



/* Réinitialisation de base pour une meilleure cohérence entre navigateurs */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Inclut padding et border dans la largeur/hauteur */
    text-decoration: none;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Police moderne et lisible */
    color: var(--text-color);
    line-height: 1.6;
    /* Hauteur de ligne pour une meilleure lisibilité */
    background-color: var(--white);
}

a {
    text-decoration: none;
    /* Supprime le soulignement par défaut des liens */
    color: var(--primary-blue);
}

a:hover {
    text-decoration: underline;
    /* Réactive le soulignement au survol */
}


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

.main-header {
    background-color: var( --secondary-orange);
    /* Fond bleu foncé */
    padding: 0px 15px;
    width: 100%;
    color: var(--text-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Ombre légère pour la profondeur */
    position: fixed;
    z-index: 1000;
}

.header-content {
    max-width: 1200px;
    /* Largeur maximale du contenu de l'en-tête */
    margin: 0 auto;
    /* Centre le contenu */
    display: flex;
    justify-content: space-between;
    /* Espace les éléments aux extrémités */
    align-items: center;
    /* Aligne verticalement au centre */
    padding: 0 20px;
    /* Padding latéral */
}


/* Logo Outal */

.logo-container {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
}

.logo-link {
    display: flex;
    /* Permet d'aligner la forme ronde et le texte */
    align-items: center;
    color: inherit;
    /* Hérite de la couleur du parent */
    text-decoration: none;
    /* Pas de soulignement sur le lien du logo */
}
.logo-container>a {
    /* ENLEVE LA LIGNE QUI SOUSLIGNAIT LE LOGO */
    text-decoration: none;
}

.logo-round-shape {
    background-color: var(--secondary-orange);
    /* Couleur orange vif */
    color: var(--dark-blue);
    /* Texte bleu foncé à l'intérieur */
    border-radius: 50%;
    /* Rend la forme parfaitement ronde */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-right: 5px;
}

.logo-text {
    color: var(--white);
}



/* Navigation principale */

.main-nav ul {
    list-style: none;
    /* Supprime les puces de liste */
    display: flex;
    text-transform: uppercase;
}

.main-nav ul li {
    margin-left: 20px;
}

.main-nav .nav-item {
    color: var(--white);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    /* Transition douce au survol */
    display: flex;
    align-items: center;
}

.main-nav .nav-item:hover {
    background-color: var(--text-color);
    /* Fond légèrement transparent au survol */
    text-decoration: none;
}


/* Bouton Logement spécifique */

.button-housing {
    background-color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    padding: 8px 15px;
    font-weight: bold;
}

.button-housing:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.button-housing i {
    margin-right: 8px;
    /* Espace entre l'icône et le texte */
}


/* Actions utilisateur (S'inscrire, Se connecter) */

.user-actions .nav-item {
    color: var(--white);
    margin-left: 15px;
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.user-actions .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.user-actions .primary-button {
    background-color: var(--white);
    color: var(--primary-blue);
    border-color: var(--white);
    font-weight: bold;
}

.user-actions .primary-button:hover {
    background-color: var(--light-grey);
    color: var(--primary-blue);
}


/* --- Barre de recherche principale --- */

.search-bar-container {
    background-color: var(--secondary-orange);
    /* Bande orange pour la barre de recherche */
    padding: 20px 0;
    margin-top: 20px;
    position: relative;
    /* Pour positionner la barre par-dessus d'autres éléments si besoin */
    z-index: 10;
}

.main-search-form {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    padding: 0 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.main-search-form input,
.main-search-form button {
    padding: 12px 15px;
    border: 1px solid var(--border-grey);
    border-radius: 4px;
    font-size: 16px;
    flex: 1;
    /* Permet aux champs de prendre l'espace disponible */
    min-width: 150px;
}

.main-search-form input[type="date"] {
    min-width: 120px;
}

.main-search-form button {
    background-color: #FFCC00;
    /* Jaune de votre logo 'O' */
    color: #003366;
    /* Bleu foncé de votre header/logo */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
}

.main-search-form button:hover {
    background-color: #e6b800;
    /* Un jaune légèrement plus foncé pour le survol */
    color: #003366;
    /* Le texte reste bleu foncé */
}


/* --- Contenu principal (balise <main>) --- */

.main-content {
    max-width: 1200px;
    margin: auto;
    padding: 90px 20px;
}


/* Section Héro */

.hero-section {
    text-align: center;
    padding: 50px 0;
    background-color: var(--light-grey);
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.hero-section h1 {
    font-size: 3em;
    color: var(--primary-gold);
    margin-bottom: 10px;
}

.hero-section p {
    font-size: 1.2em;
    color: var(--text-color);
}


/* Section Hébergements Populaires */

.featured-listings {
    margin-bottom: 40px;
}

.featured-listings h2 {
    font-size: 2.2em;
    color: var(--primary-blue);
    margin-bottom: 25px;
    text-align: center;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Grille responsive */
    gap: 25px;
    /* Espace entre les cartes */
}

.listing-card {
    background-color: var(--white);
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    /* Utilisation de flexbox pour le contenu de la carte */
    flex-direction: column;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.listing-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    /* Assure que l'image couvre l'espace sans distorsion */
    display: block;
}

.listing-card h3 {
    font-size: 1.5em;
    margin: 15px 15px 5px 15px;
    color: var(--primary-blue);
}

.listing-card p {
    font-size: 0.95em;
    margin: 0 15px 10px 15px;
    color: #666;
}

.listing-card .rating {
    margin: 0 15px 10px 15px;
    color: var(--secondary-orange);
    font-weight: bold;
}

.listing-card .rating i {
    color: var(--secondary-orange);
    margin-right: 5px;
}

.listing-card .price {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-blue);
    margin: 0 15px 15px 15px;
}

.listing-card .book-now-button {
    display: block;
    /* Prend toute la largeur disponible */
    background-color: var(--primary-gold);
    color: var(--white);
    text-align: center;
    padding: 10px 15px;
    border-radius: 0 0 8px 8px;
    /* Bords inférieurs arrondis */
    margin-top: auto;
    /* Pousse le bouton vers le bas de la carte */
    transition: background-color 0.3s ease;
    font-weight: bold;
}

.listing-card .book-now-button:hover {
    background-color: var(--dark-blue);
    text-decoration: none;
}


/* --- Pied de page --- */

.main-footer {
    background-color: var(--secondary-orange);
    color: var(--white);
    padding: 30px 0;
    text-align: center;
    margin-top: 40px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-links a {
    color: var(--white);
    margin: 0 15px;
    transition: text-decoration 0.3s ease;
}

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


/* --- Styles pour les formulaires d'authentification (login, register) --- */

.error-message {
    color: #d9534f;
    /* Rouge pour l'erreur */
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

.success-message {
    color: #5cb85c;
    /* Vert pour le succès */
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

.auth-form-section {
    padding: 40px 0;
    text-align: center;
}

.auth-form-section h2 {
    font-size: 2.5em;
    color: var(--primary-blue);
    margin-bottom: 30px;
}

.auth-form-container {
    background-color: var(--white);
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    max-width: 450px;
    margin: 0 auto;
    padding: 30px;
}

.auth-form-container .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.auth-form-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.auth-form-container input[type="text"],
.auth-form-container input[type="email"],
.auth-form-container input[type="password"] {
    width: calc(100% - 24px);
    /* Prend en compte le padding */
    padding: 12px;
    border: 1px solid var(--border-grey);
    border-radius: 5px;
    font-size: 1em;
}

.auth-button {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 10px;
}

.auth-link {
    margin-top: 20px;
    font-size: 0.95em;
    color: #666;
}

.auth-link a {
    color: var(--primary-blue);
    font-weight: bold;
}


/* Styles spécifiques à la page de détails du logement */

.property-details-page {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
    /* Espace par rapport à la barre de recherche */
}


/* Galerie d'images */

.property-gallery {
    margin-bottom: 30px;
    background-color: var(--white);
    /* Fond blanc pour la galerie */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.main-image-container {
    width: 100%;
    max-height: 500px;
    /* Hauteur maximale pour l'image principale */
    overflow: hidden;
    /* Cache le débordement si l'image est plus grande */
    margin-bottom: 15px;
    border-radius: 6px;
    display: flex;
    /* Centrer l'image si elle n'occupe pas toute la largeur */
    justify-content: center;
    align-items: center;
}

#main-property-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    /* S'assure que l'image est contenue dans l'espace */
    display: block;
    border-radius: 6px;
}

.thumbnail-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    /* Permet le défilement horizontal si trop d'images */
    padding-bottom: 10px;
    /* Espace pour la barre de défilement */
    justify-content: center;
    /* Centre les miniatures si elles ne remplissent pas la largeur */
}

.thumbnail {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}


/* Informations du logement */

.property-info {
    background-color: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.property-info h1 {
    font-size: 2.5em;
    color: var(--dark-blue);
    margin-bottom: 10px;
}

.property-info p {
    color: #555;
    margin-bottom: 8px;
}

.property-info #property-location {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 15px;
}

.property-info #property-location i {
    margin-right: 5px;
    color: var(--primary-blue);
}

.property-rating {
    font-size: 1.1em;
    color: var(--secondary-orange);
    margin-bottom: 20px;
}

.property-rating i {
    margin-right: 5px;
}

.property-description h2,
.property-amenities h2,
.property-reviews h2,
.booking-section h2 {
    font-size: 1.8em;
    color: var(--primary-blue);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-grey);
    padding-bottom: 10px;
}

.property-description p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 20px;
}

.amenities-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.amenities-grid li {
    background-color: var(--light-grey);
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 1em;
    color: var(--text-color);
}

.amenities-grid li i {
    margin-right: 10px;
    color: var(--primary-blue);
    font-size: 1.2em;
}


/* Section de réservation */

.booking-section {
    background-color: #eaf6ff;
    /* Un bleu très clair */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--primary-blue);
}

.booking-form-container {
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.price-per-night {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--primary-blue);
    margin-bottom: 20px;
    text-align: center;
}

.booking-form .form-group {
    margin-bottom: 15px;
}

.booking-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.booking-form input[type="date"],
.booking-form input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-grey);
    border-radius: 4px;
    font-size: 1em;
}

.total-price {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--dark-blue);
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
}

.book-final-button {
    width: 100%;
    padding: 15px;
    font-size: 1.2em;
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.book-final-button:hover {
    background-color: var(--dark-blue);
}


/* Section Avis */

.review-item {
    background-color: var(--light-grey);
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.review-author {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--primary-blue);
}

.review-rating {
    color: var(--secondary-orange);
    margin-bottom: 10px;
}

.review-text {
    font-size: 0.95em;
    line-height: 1.5;
    color: #444;
}


/* Section Logement non trouvé */

.property-not-found {
    padding: 50px 20px;
    text-align: center;
    background-color: var(--light-grey);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}


/* Styles spécifiques à la page Mes Réservations (my_bookings.php) */

.my-bookings-section {
    padding: 40px 0;
    text-align: center;
}

.my-bookings-section h2 {
    font-size: 2.5em;
    color: var(--primary-blue);
    margin-bottom: 30px;
}

.bookings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.info-message,
.error-message {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    font-size: 1.1em;
    text-align: center;
}

.info-message {
    background-color: #e6f7ff;
    /* Bleu très clair */
    color: #0056b3;
    /* Bleu plus foncé */
    border: 1px solid #99daff;
}

.bookings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Responsive grid */
    gap: 25px;
}

.booking-card {
    background-color: var(--white);
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.booking-card h3 {
    font-size: 1.8em;
    color: var(--dark-blue);
    margin-bottom: 10px;
}

.booking-card .location {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 15px;
}

.booking-card .location i {
    margin-right: 5px;
    color: var(--primary-blue);
}

.booking-card p {
    margin-bottom: 8px;
    color: #444;
}

.booking-card p strong {
    color: #222;
}

.booking-dates {
    border-top: 1px solid var(--light-grey);
    border-bottom: 1px solid var(--light-grey);
    padding: 10px 0;
    margin-bottom: 15px;
}

.booking-dates p {
    margin: 5px 0;
}

.booking-card .price {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--primary-blue);
    margin-top: 15px;
    margin-bottom: 15px;
}

.booking-card .status {
    font-weight: bold;
    margin-bottom: 10px;
}


/* Couleurs de statut */

.pending-status {
    color: #f0ad4e;
}


/* Orange pour en attente */

.confirmed-status {
    color: #5cb85c;
}


/* Vert pour confirmé */

.cancelled-status {
    color: #d9534f;
}


/* Rouge pour annulé */

.booking-card .booked-at {
    font-size: 0.85em;
    color: #888;
    margin-top: auto;
    /* Pousse vers le bas */
}

.view-details-button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--primary-blue);
    color: var(--white);
    text-align: center;
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.view-details-button:hover {
    background-color: var(--dark-blue);
    text-decoration: none;
}


/* Styles spécifiques pour l'admin_login.php */

.admin-login-section .auth-container {
    background-color: #f8f8f8;
    /* Un arrière-plan légèrement différent pour l'admin */
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.admin-login-section h2 {
    color: var(--dark-blue);
    font-size: 2em;
    margin-bottom: 25px;
}

.admin-login-section .primary-button {
    background-color: var(--secondary-orange);
    border-color: var(--secondary-orange);
}

.admin-login-section .primary-button:hover {
    background-color: #e07b00;
    /* Orange plus foncé au survol */
    border-color: #e07b00;
}


/* Styles pour le Tableau de Bord Admin (admin_dashboard.php) */

.admin-dashboard-section {
    padding: 40px 0;
    background-color: #f4f7f6;
    min-height: calc(100vh - 120px);
    /* Ajuster selon la hauteur de votre header/footer */
}

.admin-dashboard-section h2 {
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
}

.admin-dashboard-section p {
    text-align: center;
    margin-bottom: 40px;
    color: #555;
    font-size: 1.1em;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.stat-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
    border-top: 5px solid var(--primary-blue);
    transition: transform 0.3s ease;
}

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

.stat-card h3 {
    color: var(--dark-blue);
    font-size: 1.6em;
    margin-bottom: 15px;
}

.stat-card .stat-number {
    font-size: 3em;
    color: var(--secondary-orange);
    font-weight: bold;
    margin-bottom: 20px;
    display: block;
    /* Pour s'assurer que margin-bottom est appliqué */
}

.stat-card .button-link {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.stat-card .button-link:hover {
    background-color: var(--dark-blue);
}

.dashboard-actions {
    text-align: center;
    margin-top: 50px;
}

.dashboard-actions h3 {
    color: var(--primary-blue);
    margin-bottom: 25px;
    font-size: 2em;
}

.dashboard-actions .primary-button {
    background-color: var(--secondary-orange);
    border-color: var(--secondary-orange);
    padding: 12px 25px;
    font-size: 1.1em;
    margin: 0 10px;
}

.dashboard-actions .primary-button:hover {
    background-color: #e07b00;
    border-color: #e07b00;
}


/* Base styles for generic buttons/links if not already defined */

.primary-button,
.secondary-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.primary-button {
    background-color: var(--primary-blue);
    color: #fff;
    border: 1px solid var(--primary-blue);
}

.primary-button:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.secondary-button {
    background-color: #f0f0f0;
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
}

.secondary-button:hover {
    background-color: #e0e0e0;
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}


/* Ensure the container is defined if not already */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Styles pour les pages de gestion admin (admin_manage_*.php) */

.admin-manage-section {
    padding: 40px 0;
    background-color: #f4f7f6;
    min-height: calc(100vh - 120px);
}

.admin-manage-section h2 {
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
}

.admin-manage-section .message {
    /* Pour les messages de succès/erreur */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.admin-manage-section .success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.admin-manage-section .error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.admin-actions-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    /* Pour que les coins arrondis soient respectés */
}

.admin-table th,
.admin-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.admin-table th {
    background-color: var(--primary-blue);
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

.admin-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.admin-table tbody tr:hover {
    background-color: #f1f1f1;
}

.admin-table td {
    color: #333;
}

.admin-table .action-buttons {
    white-space: nowrap;
    /* Empêche les boutons de passer à la ligne */
}

.admin-table .button-edit,
.admin-table .button-delete {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    margin-right: 5px;
    transition: background-color 0.2s ease;
}

.admin-table .button-edit {
    background-color: #28a745;
    /* Vert pour modifier */
    color: #fff;
    border: 1px solid #28a745;
}

.admin-table .button-edit:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.admin-table .button-delete {
    background-color: #dc3545;
    /* Rouge pour supprimer */
    color: #fff;
    border: 1px solid #dc3545;
}

.admin-table .button-delete:hover {
    background-color: #c82333;
    border-color: #bd2130;
}


/* Pour les cartes d'hébergements populaires sur index.php */

.accommodation-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    background-color: #fff;
    display: flex;
    /* Utilise flexbox pour la mise en page interne */
    flex-direction: column;
    /* Empile l'image et l'info */
}

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

.accommodation-image {
    width: 100%;
    height: 200px;
    /* Hauteur fixe pour les images */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accommodation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recadre l'image pour couvrir la zone sans déformer */
    display: block;
}

.accommodation-info {
    padding: 15px;
    flex-grow: 1;
    /* Permet aux informations de prendre l'espace restant */
    display: flex;
    flex-direction: column;
}

.accommodation-info h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--primary-blue);
    font-size: 1.3em;
}

.accommodation-info .location {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.accommodation-info .price {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--secondary-orange);
    margin-top: auto;
    /* Pousse le prix vers le bas de la carte */
    padding-top: 10px;
    /* Espace au-dessus du prix */
    border-top: 1px solid #eee;
}

.accommodation-info .rating {
    margin-bottom: 10px;
    color: #ffc107;
    /* Couleur des étoiles */
}

.accommodation-info .rating .fas.fa-star {
    color: #e0e0e0;
    /* Couleur des étoiles vides */
}

.accommodation-info .rating .fas.fa-star.filled,
.accommodation-info .rating .fas.fa-star-half-alt.filled {
    color: #ffc107;
    /* Couleur des étoiles pleines/demi-pleines */
}

.accommodation-info .rating span {
    font-size: 0.85em;
    color: #666;
    margin-left: 5px;
}

.accommodation-info .view-details-button {
    display: block;
    width: 100%;
    padding: 8px 15px;
    background-color: var(--primary-blue);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.accommodation-info .view-details-button:hover {
    background-color: var(--dark-blue);
}


/* Styles pour la section Hébergements Populaires sur index.php */

.popular-accommodations {
    padding: 50px 0;
    background-color: #f9f9f9;
}

.popular-accommodations h2 {
    text-align: center;
    color: var(--primary-blue);
    margin-bottom: 40px;
    font-size: 2.8em;
}

.accommodation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.accommodation-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 280px;
}

.accommodation-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.accommodation-image {
    width: 100%;
    height: 200px;
    /* Hauteur fixe pour les images */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    /* Fallback couleur si image non chargée */
}

.accommodation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recadre l'image pour couvrir la zone sans déformer */
    display: block;
}

.accommodation-info {
    padding: 15px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.accommodation-info h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--primary-blue);
    font-size: 1.4em;
    line-height: 1.3;
}

.accommodation-info .location {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 12px;
}

.accommodation-info .rating {
    margin-bottom: 12px;
    color: #ffc107;
    /* Couleur des étoiles par défaut */
    font-size: 0.95em;
}

.accommodation-info .rating .fas.fa-star {
    color: #e0e0e0;
    /* Couleur des étoiles vides */
}

.accommodation-info .rating .fas.fa-star.filled,
.accommodation-info .rating .fas.fa-star-half-alt.filled {
    color: #ffc107;
    /* Couleur des étoiles pleines/demi-pleines */
}

.accommodation-info .rating span {
    font-size: 0.9em;
    color: #666;
    margin-left: 5px;
}

.accommodation-info .price {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--secondary-orange);
    margin-top: auto;
    /* Pousse le prix vers le bas de la carte */
    padding-top: 15px;
    /* Espace au-dessus du prix */
    border-top: 1px solid #eee;
}

.accommodation-info .view-details-button {
    display: block;
    width: calc(100% - 20px);
    /* Ajuster pour le padding */
    padding: 10px 15px;
    background-color: var(--primary-blue);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.accommodation-info .view-details-button:hover {
    background-color: var(--dark-blue);
}


/* Styles pour la section Hero (accueil) */

.hero-section {
    background-image: url('../img/1.jpg');
    /* Remplacez par le nom de votre image */
    background-size: cover;
    /* Couvre toute la zone sans étirer l'image */
    background-position: center center;
    /* Centre l'image de fond */
    background-repeat: no-repeat;
    /* Empêche l'image de se répéter */
    color: #fff;
    /* Couleur du texte pour qu'il soit visible sur l'image */
    text-align: center;
    padding: 100px 20px;
    /* Espace interne pour le contenu */
    position: relative;
    /* Nécessaire pour superposer un dégradé si besoin */
    display: flex;
    /* Pour centrer le contenu verticalement */
    align-items: center;
    justify-content: center;
    min-height: 500px;
    /* Hauteur minimale de la section */
}


/* Optionnel : Ajouter un calque sombre pour améliorer la lisibilité du texte */

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Calque noir semi-transparent (40% d'opacité) */
    z-index: 1;
    /* S'assure que le calque est au-dessus de l'image mais sous le texte */
}

.hero-section .container {
    position: relative;
    /* Place le contenu au-dessus du calque */
    z-index: 2;
    /* S'assure que le texte est au-dessus du calque */
    max-width: 800px;
}

.hero-section h1 {
    font-size: 3.5em;
    /* Grande taille pour le titre */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Ombre pour la lisibilité */
}

.hero-section p {
    font-size: 1.4em;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}


/* Ajustements pour le formulaire de recherche dans le Hero, si vous le laissez ici */

.hero-section .search-form {
    background-color: rgba(255, 255, 255, 0.9);
    /* Fond légèrement transparent */
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne */
    gap: 15px;
    /* Espacement entre les groupes de formulaire */
    justify-content: center;
    margin-top: 30px;
}

.hero-section .search-form .form-group {
    flex: 1;
    /* Permet aux groupes de formulaire de prendre de l'espace */
    min-width: 200px;
    /* Largeur minimale avant de passer à la ligne */
    text-align: left;
}

.hero-section .search-form label {
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.hero-section .search-form input,
.hero-section .search-form button {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}

.hero-section .search-form button {
    background-color: var(--primary-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-grow: 1;
    /* Permet au bouton de s'étirer */
}

.hero-section .search-form button:hover {
    background-color: var( --secondary-orange);
}


/* Media queries pour la responsivité */

@media (max-width: 768px) {
    .hero-section {
        padding: 80px 15px;
        min-height: 400px;
    }
    .hero-section h1 {
        font-size: 2.5em;
    }
    .hero-section p {
        font-size: 1.1em;
    }
    .hero-section .search-form {
        flex-direction: column;
        /* Les champs s'empilent */
        padding: 20px;
    }
    .hero-section .search-form .form-group {
        min-width: unset;
        /* Pas de largeur minimale */
        width: 100%;
        /* Prend toute la largeur */
    }
}


/* Responsive table */

@media (max-width: 768px) {
    .admin-table,
    .admin-table thead,
    .admin-table tbody,
    .admin-table th,
    .admin-table td,
    .admin-table tr {
        display: block;
    }
    .admin-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .admin-table tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 15px;
    }
    .admin-table td {
        border: none;
        position: relative;
        padding-left: 50%;
        text-align: right;
        flex: 1 1 100%;
        /* Take full width on small screens */
    }
    .admin-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: var(--primary-blue);
    }
    .admin-table td.action-buttons {
        text-align: center;
        padding-left: 0;
        margin-top: 10px;
        border-top: 1px solid #eee;
        width: 100%;
    }
    .admin-actions-top {
        flex-direction: column;
        gap: 15px;
    }
}


/* Responsive pour la page mes réservations */

@media (max-width: 768px) {
    .my-bookings-section h2 {
        font-size: 2em;
    }
    .bookings-grid {
        grid-template-columns: 1fr;
        /* Une seule colonne sur mobile */
        padding: 0 15px;
    }
    .booking-card {
        padding: 15px;
    }
}


/* Responsive pour la page de détails */

@media (max-width: 768px) {
    .property-details-page {
        gap: 20px;
        margin-top: 20px;
    }
    .property-gallery,
    .property-info,
    .booking-section,
    .property-reviews,
    .property-not-found {
        padding: 15px;
    }
    .property-info h1 {
        font-size: 2em;
    }
    .property-description h2,
    .property-amenities h2,
    .property-reviews h2,
    .booking-section h2 {
        font-size: 1.5em;
    }
    .amenities-grid {
        grid-template-columns: 1fr;
        /* Une seule colonne sur mobile */
    }
    .price-per-night,
    .total-price {
        font-size: 1.2em;
    }
    .book-final-button {
        font-size: 1em;
        padding: 12px;
    }
    .main-image-container {
        max-height: 300px;
        /* Réduire la hauteur de l'image principale sur mobile */
    }
    #main-property-image {
        max-height: 300px;
    }
}


/* --- Media Queries pour le Responsive Design (Adaptation Mobile) --- */

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
        padding: 0 15px;
    }
    .logo-container {
        margin-bottom: 15px;
        font-size: 24px;
    }
    .logo-round-shape {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 15px;
    }
    .main-nav ul li {
        margin: 5px 8px;
    }
    .main-nav .nav-item {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    .user-actions {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .user-actions .nav-item {
        margin: 0 8px;
        padding: 6px 12px;
        font-size: 0.9em;
    }
    .search-bar-container {
        padding: 15px 0;
    }
    .main-search-form {
        flex-direction: column;
        padding: 0 20px;
        gap: 12px;
    }
    .main-search-form input,
    .main-search-form button {
        width: 100%;
        min-width: unset;
        font-size: 15px;
        padding: 10px 12px;
    }
    .main-search-form input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .hero-section {
        padding: 30px 15px;
    }
    .hero-section h1 {
        font-size: 2em;
    }
    .hero-section p {
        font-size: 1em;
    }
    .featured-listings h2 {
        font-size: 1.8em;
    }
    .listings-grid {
        grid-template-columns: 1fr;
        /* Une seule colonne sur mobile pour les cartes */
        padding: 0 15px;
    }
    .listing-card {
        margin-bottom: 20px;
    }
    .footer-content {
        padding: 0 15px;
    }
    .footer-links {
        flex-direction: column;
        margin-top: 15px;
    }
    .footer-links a {
        margin: 5px 0;
    }
    .auth-form-container {
        padding: 20px;
    }
}

//////////////////////////////

/* Styles existants pour le header (main-header) - assurez-vous que la couleur de fond reste la même */

.main-header {
    background-color: #FFCC00;
    /* Couleur de fond bleue de l'image */
    color: white;
    padding: 2px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}


/* Nouvelle div pour la barre supérieure (logo et nav/burger) */

.header-top-bar {
    display: flex;
    justify-content: space-between;
    /* Pour espacer le logo et le menu/burger */
    align-items: center;
    max-width: 1200px;
    /* Ou la largeur maximale de votre contenu */
    margin: 0 auto;
    /* Pour centrer le contenu si vous avez une largeur maximale */
    padding-bottom: 10px;
    /* Un peu d'espace avant la barre de recherche */
}


/* Styles du logo existants - assurez-vous qu'ils correspondent à vos styles actuels */

.logo-container {
    display: flex;
    align-items: center;
}

.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-round-shape {
    background-color: #003366;
    /* Jaune de l'image */
    color: #FFCC00;
    /* Bleu foncé */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 5px;
}

.logo-text {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
}


/* Styles du bouton burger (caché par défaut sur grand écran) */

.burger-menu-toggle {
    display: none;
    /* Cache le bouton burger sur les grands écrans par défaut */
    background: none;
    border: none;
    color: white;
    font-size: 1.8em;
    cursor: pointer;
    padding: 5px;
}


/* Styles pour la navigation principale (main-nav) - Version Desktop */

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Pour aligner les éléments horizontalement sur grand écran */
    align-items: center;
}

.main-nav ul li {
    margin-left: 20px;
    /* Espace entre les éléments de menu */
}

.main-nav .nav-item {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    /* Empêche les liens de se casser sur plusieurs lignes */
}

.main-nav .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* Styles spécifiques pour le bouton logement */

.main-nav .button-housing {
    background-color: rgba(255, 255, 255, 0.1);
    /* Légèrement grisé pour le bouton actif/principal */
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.main-nav .primary-button {
    background-color: #FFCC00;
    /* Jaune pour les boutons d'action */
    color: #003366;
    /* Texte bleu foncé */
    font-weight: bold;
}

.main-nav .primary-button:hover {
    background-color: #e6b800;
    /* Jaune légèrement plus foncé au survol */
}


/* --- Media Queries pour le Responsive Design --- */

@media (max-width: 768px) {
    /* Par exemple, pour les tablettes et mobiles */
    .header-top-bar {
        justify-content: space-between;
        /* Assure que le logo et le burger sont bien espacés */
    }
    .burger-menu-toggle {
        display: block;
        /* Affiche le bouton burger sur les petits écrans */
    }
    .main-nav {
        /* Par défaut, le menu est caché sur mobile */
        display: none;
        /* Cache le menu par défaut */
        position: absolute;
        top: 60px;
        /* Ajustez selon la hauteur de votre header */
        right: 0;
        width: 100%;
        /* Le menu prend toute la largeur */
        background-color: #003366;
        /* Même couleur de fond que le header */
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        /* Assure que le menu est au-dessus des autres éléments */
        flex-direction: column;
        /* Les liens s'empilent verticalement */
        align-items: flex-start;
        /* Aligne les liens à gauche */
        padding: 10px 0;
    }
    .main-nav.active {
        /* Classe ajoutée par JS quand le menu est ouvert */
        display: flex;
        /* Affiche le menu */
    }
    .main-nav ul {
        flex-direction: column;
        /* Les éléments de liste s'empilent */
        width: 100%;
    }
    .main-nav ul li {
        margin: 0;
        /* Supprime la marge horizontale */
        width: 100%;
        text-align: left;
    }
    .main-nav .nav-item {
        display: block;
        /* Les liens remplissent la largeur */
        padding: 12px 20px;
        border-radius: 0;
        /* Supprime les bords arrondis pour un look plus "menu" */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* Petite séparation */
    }
    .main-nav .nav-item:last-child {
        border-bottom: none;
        /* Pas de bordure pour le dernier élément */
    }
    .main-nav .button-housing,
    .main-nav .primary-button {
        border: none;
        /* Supprime les bordures spécifiques sur mobile */
        border-radius: 0;
        background-color: transparent;
        /* Retire le fond pour s'intégrer au menu */
        color: white;
        /* Assure que le texte reste blanc */
    }
    /* Le texte du bouton jaune doit rester jaune sur mobile si c'est un bouton d'action */
    .main-nav .primary-button {
        background-color: #FFCC00;
        /* Garde la couleur jaune pour les boutons importants */
        color: #003366;
        padding-left: 20px;
        /* Ajuste le padding pour les boutons */
    }
}


/* Styles de la barre de recherche (search-bar-container) - Ajustements mineurs */

.search-bar-container {
    background-color: #f8f8f8;
    /* Un gris très clair */
    padding: 15px 20px;
    border-radius: 8px;
    margin: 10px auto;
    /* Centre la barre de recherche */
    max-width: 800px;
    /* Limite la largeur */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main-search-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* Responsive grid */
    gap: 10px;
}

.main-search-form input[type="text"],
.main-search-form input[type="date"],
.main-search-form input[type="number"] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

.main-search-form button[type="submit"] {
    background-color: #007bff;
    /* Bleu des boutons de recherche */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
}

.main-search-form button[type="submit"]:hover {
    background-color: #0056b3;
}


/* Ajustements pour les petits écrans sur la barre de recherche si nécessaire */

@media (max-width: 500px) {
    .main-search-form {
        grid-template-columns: 1fr;
        /* Une colonne sur très petits écrans */
    }
}


/* --- Styles généraux pour les sections d'administration --- */

.admin-form-section {
    background-color: #ffffff;
    /* Fond blanc pour la section */
    padding: 30px 20px;
    margin: 40px auto;
    /* Centre la section sur la page */
    max-width: 800px;
    /* Largeur maximale pour le formulaire */
    border-radius: 10px;
    /* Coins arrondis */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    /* Ombre douce pour un effet de bloc */
    border: 1px solid #e0e0e0;
    /* Bordure subtile */
}

.admin-form-section .container {
    /* Si vous avez déjà un style pour .container, assurez-vous qu'il ne contredit pas max-width */
    /* Sinon, ce conteneur peut être utilisé pour limiter la largeur interne */
    width: 100%;
    padding: 0 15px;
    /* Petit padding pour éviter que le contenu touche les bords */
    box-sizing: border-box;
    /* Inclut le padding dans la largeur */
}

.admin-form-section h2 {
    text-align: center;
    color: var(--primary-blue, #0056b3);
    /* Couleur bleue pour le titre */
    margin-bottom: 30px;
    font-size: 2.2em;
    font-weight: 700;
    border-bottom: 2px solid #f0f0f0;
    /* Ligne de séparation sous le titre */
    padding-bottom: 15px;
}


/* Styles pour le formulaire en général */

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Espacement entre les groupes de formulaires */
}


/* Styles pour chaque groupe de formulaire (label + input/select/textarea) */

.admin-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    /* Réinitialise le margin-bottom du global .form-group si défini */
}

.admin-form .form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
    font-size: 1.05em;
}

.admin-form .form-group input[type="text"],
.admin-form .form-group input[type="number"],
.admin-form .form-group select,
.admin-form .form-group textarea {
    padding: 12px 15px;
    border: 1px solid #dcdcdc;
    /* Bordure des champs */
    border-radius: 8px;
    /* Coins arrondis pour les champs */
    font-size: 1em;
    width: 100%;
    /* Prend toute la largeur disponible */
    box-sizing: border-box;
    /* Inclut le padding et la bordure dans la largeur */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fefefe;
    /* Fond légèrement différent pour les inputs */
}

.admin-form .form-group input[type="text"]:focus,
.admin-form .form-group input[type="number"]:focus,
.admin-form .form-group select:focus,
.admin-form .form-group textarea:focus {
    border-color: var(--primary-blue, #007bff);
    /* Bordure bleue au focus */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    /* Ombre légère au focus */
    outline: none;
    /* Supprime l'outline par défaut du navigateur */
}

.admin-form .form-group textarea {
    resize: vertical;
    /* Permet de redimensionner verticalement la zone de texte */
    min-height: 100px;
}


/* Styles pour les messages d'erreur et de succès */

.error-message,
.success-message {
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-weight: 500;
    text-align: center;
}

.error-message {
    background-color: #f8d7da;
    /* Rouge clair */
    color: #721c24;
    /* Rouge foncé */
    border: 1px solid #f5c6cb;
}

.success-message {
    background-color: #d4edda;
    /* Vert clair */
    color: #155724;
    /* Vert foncé */
    border: 1px solid #c3e6cb;
}


/* Styles pour les actions du formulaire (boutons) */

.form-actions {
    display: flex;
    justify-content: center;
    /* Centre les boutons */
    gap: 15px;
    /* Espacement entre les boutons */
    margin-top: 30px;
    flex-wrap: wrap;
    /* Permet aux boutons de passer à la ligne sur petits écrans */
}

.primary-button,
.secondary-button {
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    /* Pour les liens stylisés en bouton */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    white-space: nowrap;
    /* Empêche le texte du bouton de se couper */
}

.primary-button {
    background-color: var(--primary-blue, #007bff);
    color: white;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2);
}

.primary-button:hover {
    background-color: var(--darker-blue, #0056b3);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.secondary-button {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.secondary-button:hover {
    background-color: #e0e0e0;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}


/* Assurez-vous d'avoir ces variables CSS définies si vous les utilisez ailleurs */

:root {
    --primary-blue: #007bff;
    --darker-blue: #0056b3;
    /* Vous pouvez ajouter d'autres variables de couleur ici */
}


/* --- Styles pour les liens actifs dans la navigation --- */

.main-nav ul li a.active {
    background-color: #ffd700;
    /* Une couleur dorée/jaune pour le fond */
    color: var(--primary-blue, #0056b3);
    /* Texte en bleu foncé */
    font-weight: bold;
    /* Texte en gras */
    border-radius: 5px;
    /* Petits coins arrondis */
    padding: 8px 15px;
    /* Ajustez le padding pour qu'il soit joli */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Une légère ombre */
    transform: scale(1.02);
    /* Léger agrandissement */
}


/* Vous pourriez aussi vouloir un style différent pour l'icône si elle est présente */

.main-nav ul li a.active i {
    color: var(--primary-blue, #0056b3);
    /* Assurez-vous que l'icône aussi a la bonne couleur */
}


/* Pour le bouton "Logement" qui a déjà la classe 'button-housing' */

.nav-item.button-housing.active {
    background-color: #ffd700;
    /* Couleur similaire pour cohérence */
    color: var(--primary-blue, #0056b3);
}


/* Assurez-vous que le style du survol n'écrase pas le style actif, ou ajustez-le */

.main-nav ul li a:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.2);
    /* Un léger fond pour les non-actifs au survol */
    color: white;
}

********************************************************* .app-listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    /* Espacement entre les cartes */
}

.app-listing-card {
    background-color: var(--white);
    border-radius: 12px;
    /* Coins plus arrondis */
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    /* Ombre plus douce */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-listing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px var(--shadow-medium);
    /* Ombre plus prononcée au survol */
}

.app-listing-card__image-container {
    width: 100%;
    height: 220px;
    /* Hauteur des images des cartes */
    position: relative;
    overflow: hidden;
}

.app-listing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-listing-card__tag {
    position: absolute;
 
    bottom: 15px;
    /* Plus d'espace depuis le bas */
    left: 15px;
    /* Plus d'espace depuis la gauche */
    background-color: var(--primary-blue);
    /* Tag bleu */
    color: #F3F4F6;
    padding: 6px 12px;
    border-radius: 20px;
    /* Plus rond */
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.app-listing-card__tag>a {
    background-color: var(--primary-blue);
    color: var(--white);
    /* Plus rond */
    text-transform: uppercase;
    text-decoration: none;
}

.app-listing-card__content {
    padding: 20px;
    /* Plus de padding */
}

.app-listing-card__price {
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--primary-gold);
    /* Prix en doré */
    margin-bottom: 8px;
}

.app-listing-card__title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-dark);
    /* Titre noir */
    margin-bottom: 8px;
    min-height: 48px;
    /* Hauteur minimale pour éviter le décalage si le titre est sur 2 lignes */
}

.app-listing-card__details {
    font-size: 0.95em;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

*************************************************** .price-map-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.price-map-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
}

.price-map-image {
    flex: 1 1 50%;
}

.price-map-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.price-map-text {
    flex: 1 1 45%;
    min-width: 300px;
}

.price-map-text h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: var(--primary-blue);
}

.price-map-text p {
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.primary-button {
    display: inline-block;
    background-color: var(--primary-gold);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .price-map-content {
        flex-direction: column;
        text-align: center;
    }
    .price-map-text,
    .price-map-image {
        flex: 1 1 100%;
    }
}

********************************************************************************* .price-hero {
    background: #f2f4f8;
    padding: 60px 0;
    text-align: center;
}

.price-hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.price-hero p {
    font-size: 1.1em;
    color: #555;
}

.price-search-form {
    margin-top: 20px;
}

.price-search-form input {
    padding: 10px;
    width: 300px;
    max-width: 90%;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.price-search-form button {
    padding: 10px 20px;
    margin-left: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.map-image {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.region-price-list {
    padding: 40px 0;
    background: #fff;
}

.region-price-list h2 {
    text-align: center;
    margin-bottom: 30px;
}

.region-table {
    max-width: 600px;
    margin: 0 auto;
    border-top: 1px solid #ccc;
}

.region-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 1.1em;
}

.region-row.header {
    font-weight: bold;
    border-bottom: 2px solid #007bff;
}

**************************************************************************** .search-form {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-form .form-group {
    display: flex;
    flex-direction: column;
}

.search-form label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.search-form input,
.search-form select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.search-form .form-row {
    display: flex;
    gap: 15px;
}

.search-form .form-row .form-group {
    flex: 1;
}

.search-btn {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-btn:hover {
    background-color: #0056b3;
}

**************************************************************************** .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: auto;
}

.form-group {
    flex: 1 1 2px;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

input,
select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
}

.form-submit {
    flex: 1 1 100%;
    text-align: right;
}

button {
    background-color: #007bff;
    color: white;
    padding: 12px 24px;
    font-size: 1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background-color: #0056b3;
}

******************************************************************** .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 20px 0;
}

.pagination a {
    padding: 8px 12px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.pagination span {
    font-weight: bold;
}

/************************************************************************site 1 *******************************************/
/* Slider */

.slider-container {
    width: 90vw;
    /* Utiliser un peu plus de largeur */
    height: 70vh;
    /* Hauteur légèrement augmentée */
    margin: 3rem auto;
    /* Plus de marge */
    border-radius: 20px;
    /* Coins plus arrondis */
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-medium);
    /* Ombre plus prononcée */
    position: relative;
    /* Pour positionner le texte */
}

.slider-box {
    width: 100%;
    height: 100%;
    background: #222;
    /* Conserver le fond sombre */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    opacity: 0.95;
    /* Légèrement moins transparent */
}

.slider-text {
    position: absolute;
    top: 50%;
    /* Centrer verticalement */
    left: 50%;
    /* Centrer horizontalement */
    transform: translate(-50%, -50%);
    /* Ajustement pour le centrage parfait */
    width: 90%;
    /* Occupe une bonne partie de la largeur */
    text-align: center;
    z-index: 2;
    color: var(--white);
    font-size: 2.8rem;
    /* Plus grande taille */
    font-weight: 700;
    /* Plus gras */
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
    /* Ombre plus forte */
    pointer-events: none;
    line-height: 1.2;
}

.slider-text p:first-child {
    font-size: 3.5rem;
    /* OUTAL encore plus grand */
    margin-bottom: 10px;
}

.slider-text p:last-child {
    font-size: 2rem;
}

.slider {
    height: 100%;
    width: 100%;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /* Transition plus longue */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: blur(2px);
    Applique un flou de 5 pixels */
}

.slide.active {
    opacity: 1;
    z-index: 1;
}


/* Boutons de service sous le slider */

.services-outal {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* Plus d'espace entre les boutons */
    justify-content: center;
    margin-top: 40px;
    /* Espacement après le slider */
    margin-bottom: 60px;
    /* Espacement avant la section suivante */
}
.services-outal>a {
    text-decoration: none;

}

.service-btn {
    display: flex;
    align-items: center;
    border: 2px solid var(--primary-gold);
    border-radius: 30px;
    /* Plus arrondis */
    padding: 15px 30px;
    /* Plus de padding */
    background-color: var(--white);
    color: var(--text-dark);
    font-weight: 600;
    font-size: 17px;
    /* Légèrement plus grand */
    cursor: pointer;
    transition: all 0.3s ease;
    /* Transition sur toutes les propriétés */
    box-shadow: 0 5px 15px var(--shadow-light);
    /* Ombre légère */
}

.service-btn>a {
    text-decoration: none;
    color: black;
}

.service-btn .icon {
    font-size: 24px;
    /* Icône plus grande */
    margin-right: 12px;
    color: var(--primary-gold);
    /* Couleur de l'icône */
}

.service-btn:hover {
     border: 2px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: var(--dark-blue);
    /* Texte foncé sur fond jaune au survol */
    transform: translateY(-5px) scale(1.02);
    /* Effet de soulèvement et léger agrandissement */
    box-shadow: 0 8px 20px var(--shadow-medium);
    /* Ombre plus prononcée au survol */
}

.service-btn:hover .icon {
    color: var(--dark-blue);
    /* Icône foncée au survol */
}


/*section rubrique*/

.rubriques-section {
    max-width: 800px;
    /* Limite la largeur du contenu pour une meilleure lisibilité */
    text-align: left;
    padding-left: 40px;
    box-sizing: border-box;
    /* S'assure que le padding est inclus dans la largeur/hauteur */
}

.rubriques-header {
    display: flex;
    /* Permet à la barre et au titre d'être sur la même ligne */
    align-items: center;
    /* Aligne verticalement la barre et le texte */
    margin-bottom: 10px;
    /* Espace entre le titre et la description */
}

.rubriques-barre-verticale {
    width: 8px;
    /* Largeur de la barre */
    height: 40px;
    /* Hauteur de la barre, ajustez si votre titre est plus grand */
    background-color: #FFC107;
    /* Couleur jaune orangé demandée */
    margin-right: 15px;
    /* Espace entre la barre et le titre */
    border-radius: 2px;
    /* Légèrement arrondi comme sur l'image */
}

.rubriques-header h1 {
    font-size: 2em;
    /* Taille du titre */
    color: #333;
    margin: 0;
    /* Supprime la marge par défaut des h1 */
    line-height: 1.2;
    /* Ajuste l'espacement des lignes du titre */
}

.rubriques-description {
    font-size: 1.1em;
    /* Taille du texte de description */
    color: #555;
    line-height: 1.5;
    /* Espacement des lignes pour la lisibilité */
    margin-left: calc(8px + 15px);
    /* Aligne le texte avec le début du titre, en tenant compte de la barre et de sa marge */
    padding-left: 20vh;
    /* Assure pas de padding supplémentaire */
}


/* Media Queries pour la responsivité sur les petits écrans */

@media (max-width: 768px) {
    .rubriques-section {
        max-width: 800px;
        /* Limite la largeur du contenu pour une meilleure lisibilité */
        text-align: left;
        padding-left: 40px;
        box-sizing: border-box;
        /* S'assure que le padding est inclus dans la largeur/hauteur */
    }
    .rubriques-header h1 {
        font-size: 1.7em;
        /* Rétrecit le titre sur les petits écrans */
    }
    .rubriques-description {
        font-size: 1em;
        /* Rétrecit le texte de description */
        /* Ajuste l'alignement sur les petits écrans */
        background-color: #f8f811;
        display: none;
    }
    .rubriques-barre-verticale {
        height: 35px;
        /* Rétrecit la barre verticale */
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .rubriques-section {
        padding: 15px;
    }
    .rubriques-header h1 {
        font-size: 1.4em;
    }
    .rubriques-description {
        font-size: 0.95em;
        margin-left: calc(8px + 8px);
    }
    .rubriques-barre-verticale {
        height: 30px;
        margin-right: 8px;
    }
}


/* Content Block - Sections */

.app-content-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 80px auto;
    /* Plus de marge pour les sections */
    background-color: var(--white);
    border-radius: 15px;
    /* Coins plus arrondis */
    box-shadow: 0 8px 25px var(--shadow-medium);
    /* Ombre plus prononcée */
    overflow: hidden;
    transition: transform 0.3s ease;
}

.app-content-block:hover {
    transform: translateY(-8px);
    /* Léger soulèvement au survol */
}

.app-content-block__image-container {
    width: 100%;
    min-height: 300px;
    /* Hauteur minimale augmentée */
    position: relative;
    overflow: hidden;
}

.app-content-block__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-content-block__text-content {
    padding: 40px;
    /* Plus de padding */
    text-align: center;
}

.app-tag {
    display: inline-block;
    background-color: rgba(0, 123, 255, 0.1);
    /* Fond légèrement bleuté */
    color: var(--primary-blue);
    padding: 8px 15px;
    border-radius: 25px;
    /* Plus rond */
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    /* Texte en majuscules */
}

.app-title {
    font-size: 2.2em;
    /* Plus grand */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.3;
}

.app-description {
    font-size: 1.05em;
    /* Légèrement plus grand */
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.7;
    /* Plus d'espace entre les lignes */
}

.app-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-gold);
    /* Bouton bleu */
    color: var(--white);
    padding: 15px 30px;
    /* Plus de padding */
    border-radius: 8px;
    /* Coins arrondis */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    /* Ombre bleutée */
}

.app-button:hover {
    background-color: #ffb700;
    transform: translateY(-3px);
}

.app-button-arrow {
    margin-left: 10px;
    font-size: 1.3em;
}

.app-price-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.app-price-bubble {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    pointer-events: auto;
}

.app-price-bubble.top-left {
    top: 20%;
    left: 10%;
}

.app-price-bubble.middle {
    top: 45%;
    left: 40%;
}

.app-price-bubble.bottom-left {
    bottom: 15%;
    left: 15%;
}

.app-price-bubble.top-right {
    top: 15%;
    right: 10%;
}

.app-price-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    /* Hauteur de la barre de gradient */
    background: linear-gradient(to right, #0056b3, /* Bleu profond */
    var(--primary-gold), /* Jaune doré */
    #f8f811, /* Jaune vif */
    #0056b3/* Bleu profond */
    );
    opacity: 0.9;
}


/* Listings Grid */

.app-listings-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

.app-listings-section__title {
    font-size: 2.5em;
    /* Plus grand */
    font-weight: 700;
    color: var( --primary-blue);
    margin-bottom: 40px;
    /* Plus de marge */
    text-align: center;
}

.app-filter-button {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    margin-right: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.app-filter-button:hover {
    background-color: #e0e0e0;
}

.app-filter-button--active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.app-filter-button--active:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.app-listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    /* Espacement entre les cartes */
}

.app-listing-card {
    background-color: var(--white);
    border-radius: 12px;
    /* Coins plus arrondis */
    box-shadow: 0 6px 20px var(--shadow-light);
    /* Ombre plus douce */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-listing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px var(--shadow-medium);
    /* Ombre plus prononcée au survol */
}

.app-listing-card__image-container {
    width: 100%;
    height: 220px;
    /* Hauteur des images des cartes */
    position: relative;
    overflow: hidden;
}

.app-listing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-listing-card__tag {
    position: absolute;
    bottom: 15px;
    /* Plus d'espace depuis le bas */
    left: 15px;
    /* Plus d'espace depuis la gauche */
    background-color: var(--primary-gold);
    /* Tag bleu */
    color: var(--white);
    padding: 6px 12px;
    border-radius: 20px;
    /* Plus rond */
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.app-listing-card__tag>a {
    background-color: var(--primary-gold);
    color: var(--white);
    /* Plus rond */
    text-transform: uppercase;
    text-decoration: none;
}

.app-listing-card__content {
    padding: 20px;
    /* Plus de padding */
}

.app-listing-card__price {
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--primary-gold);
    /* Prix en doré */
    margin-bottom: 8px;
}

.app-listing-card__title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-dark);
    /* Titre noir */
    margin-bottom: 8px;
    min-height: 48px;
    /* Hauteur minimale pour éviter le décalage si le titre est sur 2 lignes */
}

.app-listing-card__details {
    font-size: 0.95em;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}


/* Footer */

.app-site-footer {
    background-color: var(--secondary-yellow);
    /* Changé en jaune */
    color: var(--dark-blue);
    /* Texte en bleu foncé pour le contraste */
    padding: 50px 30px 20px;
    font-family: 'Roboto', sans-serif;
}

.app-footer-top-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Plus d'espace */
    max-width: 1200px;
    margin: 0 auto 50px auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* Ligne plus visible */
    padding-bottom: 40px;
}

.app-footer-logo-heart {
    text-align: center;
}

.app-footer-heart-icon {
    width: 70px;
    /* Logo plus grand */
    border-radius: 25%;
}

.app-footer-column {
    text-align: center;
}

.app-footer-column__title {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--white);
}

.app-footer-list li {
    margin-bottom: 12px;
    /* Plus d'espace entre les liens */
}

.app-footer-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
}

.app-footer-link:hover {
    color: var(--primary-blue);
}

.app-footer-cta-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Plus d'espace */
    align-items: center;
}

.app-footer-cta-button {
    display: inline-block;
    padding: 15px 30px;
    /* Plus de padding */
    border-radius: 30px;
    /* Plus arrondis */
    color: var(--dark-blue);
    /* Texte bleu foncé sur les boutons CTA */
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    width: 90%;
    /* Prend plus de largeur sur mobile */
    max-width: 320px;
    /* Limite la largeur max */
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.app-footer-cta-button--pro {
    background-color: var(--primary-gold);
    /* Utiliser le bleu principal */
    color: var(--white);
}

.app-footer-cta-button--pro:hover {
    background-color: white;
    color: black;
}

.app-footer-cta-button--solutions {
    background-color: var(--primary-gold);
    /* Utiliser le jaune doré */
}

.app-footer-cta-button--solutions:hover {
    background-color: white;
}


/* Retrait de la queue de bulle car elle est complexe à maintenir et moins moderne */

.app-footer-cta-button::after {
    display: none;
}


/* Section du bas (Réseaux sociaux, App Stores) */

.app-footer-bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    /* Plus d'espace */
    max-width: 1200px;
    margin: 50px auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 30px;
}

.app-social-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Plus d'espace entre les icônes */
}

.app-social-label {
    font-size: 1em;
    font-weight: 500;
    margin-right: 15px;
    color: var(--white);
}

.app-social-icon-link {
    color: var(--white);
    font-size: 1.8em;
    /* Icônes plus grandes */
    transition: color 0.3s ease, transform 0.2s ease;
}

.app-social-icon-link:hover {
    color: var(--primary-gold);
    transform: translateY(-3px);
}

.app-app-store-links {
    display: flex;
    flex-direction: column;
    /* Par défaut empilés sur mobile */
    gap: 15px;
    /* Plus d'espace entre les badges */
    align-items: center;
    /* Centrer horizontalement */
}

.app-app-store-link {
    transition: transform 0.2s ease;
}

.app-app-store-link:hover {
    transform: scale(1.05);
}

.app-store-badge {
    height: 60px;
    /* Taille plus grande pour les badges */
    width: auto;
    display: block;
}


/* Section Légale */

.app-footer-legal-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
    /* Plus d'espace */
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 25px;
}

.app-legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-legal-link {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.app-legal-link:hover {
    color: var(--primary-gold);
}

.app-legal-logo-image {
    height: 60px;
    /* Logo légal plus grand */
    width: auto;
    object-fit: contain;
    /* La propriété background-image ici est redondante si l'image est définie dans l'HTML avec src */
}


/* --- Responsive Design --- */

@media (max-width: 768px) {
    header {
        padding: 10px 20px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .logo-image {
        max-height: 60px;
    }
    /* Masque la navigation principale (y compris le bouton "Télécharger l'application" de la nav) sur mobile */
    nav.app-header-nav {
        display: none;
    }
    .header-search-desktop {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
    }
    /* Ajustement du slider pour mobile */
    .slider-container {
        width: 95vw;
        height: 50vh;
        margin: 2rem auto;
    }
    .slider-text p:first-child {
        font-size: 2.5rem;
    }
    .slider-text p:last-child {
        font-size: 1.5rem;
    }
    .services-outal {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .service-btn {
        width: 90%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 15px;
    }
    .service-btn .icon {
        font-size: 20px;
        margin-right: 8px;
    }
    .app-content-block {
        margin: 50px auto;
        border-radius: 10px;
    }
    .app-content-block__text-content {
        padding: 30px;
    }
    .app-title {
        font-size: 1.6em;
    }
    .app-description {
        font-size: 0.95em;
    }
    .app-listings-section {
        margin: 50px auto;
    }
    .app-listings-section__title {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
    .app-listings-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .app-listing-card__image-container {
        height: 180px;
    }
    .app-listing-card__price {
        font-size: 1.2em;
    }
    .app-listing-card__title {
        font-size: 1.05em;
    }
    .app-site-footer {
        padding: 30px 20px 15px;
    }
    .app-footer-top-section,
    .app-footer-bottom-section,
    .app-footer-legal-section {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-bottom: 30px;
        padding-bottom: 25px;
    }
    .app-footer-column {
        text-align: center;
    }
    .app-footer-cta-group {
        width: 100%;
    }
    .app-footer-cta-button {
        width: 90%;
        max-width: 300px;
    }
    .app-app-store-links {
        flex-direction: column;
        /* Les badges restent empilés sur mobile */
        gap: 10px;
        /* Moins d'espace pour économiser de la place */
    }
    .app-store-badge {
        height: 50px;
        /* Réduire la taille des badges sur mobile */
    }
    .app-legal-list {
        flex-direction: column;
        gap: 8px;
    }
}

@media (min-width: 769px) {
    /* Styles pour tablettes et desktops */
    .app-content-block {
        flex-direction: row;
        text-align: left;
    }
    .app-content-block--reverse {
        flex-direction: row-reverse;
    }
    .app-content-block__image-container,
    .app-content-block__text-content {
        flex: 1;
        width: auto;
        min-height: auto;
    }
    .app-content-block__text-content {
        padding: 50px;
    }
    .app-title {
        font-size: 2.5em;
    }
    .app-description {
        font-size: 1.1em;
    }
    .app-listings-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colonnes sur tablette */
    }
    .app-footer-top-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    .app-footer-column {
        text-align: left;
    }
    .app-footer-cta-group {
        align-items: flex-end;
    }
    .app-footer-cta-button {
        width: auto;
    }
    .app-footer-bottom-section {
        flex-direction: row;
        justify-content: space-between;
    }
    .app-app-store-links {
        flex-direction: row;
        /* Badges côte à côte sur tablette/desktop */
    }
    .app-footer-legal-section {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    .app-legal-list {
        flex-direction: row;
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .app-listings-grid {
        grid-template-columns: repeat(4, 1fr);
        /* 4 colonnes sur desktop */
    }
}