/*
Theme Name: Hôtel Paradise
Theme URI: https://www.example.com/themes/hotel-paradise/
Author: Votre Nom
Author URI: https://www.example.com/
Description: Un thème WordPress moderne et élégant spécialement conçu pour la gestion d'hôtels, de chambres d'hôtes et de locations de vacances. Il intègre des modèles pour les appartements, un système de réservation, et est entièrement responsive pour une expérience parfaite sur tous les appareils.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotel-paradise
Tags: hotel, booking, reservation, responsive-layout, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar

Ce thème, comme WordPress, est sous licence GPL v2.
Utilisez-le pour créer quelque chose de génial !
*/

@import url('./assets/css/front-page.css');
@import url('./assets/css/single-appartement.css');
@import url('./assets/css/archive-appartement.css');
@import url('./assets/css/header.css');
/* ========================================
   VARIABLES CSS (Personnalisation facile)
   ======================================== */
   :root {
    --primary-color: #0056b3;      /* Bleu professionnel */
    --secondary-color: #f0ad4e;    /* Or/ambre pour les accents */
    --text-color: #333;
    --light-gray: #f4f4f4;
    --medium-gray: #e0e0e0;
    --dark-gray: #666;
    --white: #ffffff;
    --font-main: 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Georgia', serif;
}


/* ========================================
   RÉINITIALISATION ET BASE
   ======================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--white);
}

img {
    max-width: 100%;
    height: auto;
}


/* ========================================
   TYPOGRAPHIE
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #004494;
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}


/* ========================================
   STRUCTURE GÉNÉRALE DU SITE
   ======================================== */


.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    display: inline-block;
    margin-right: 1rem;
}

.site-main {
    padding: 2rem 0;
}

.site-footer {
    background-color: var(--text-color);
    color: var(--light-gray);
    padding: 2rem 0;
    text-align: center;
}

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


/* ========================================
   COMPOSANTS SPÉCIFIQUES AU THÈME HÔTEL
   ======================================== */

/* Carte d'appartement/chambre */
.room-card {
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 2rem;
}

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

.room-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.room-card-content {
    padding: 1.5rem;
}

.room-card h3 {
    margin-bottom: 0.5rem;
}

.room-card .price {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* Formulaire de réservation */
.booking-form {
    background-color: var(--light-gray);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.booking-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="date"],
.booking-form select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--medium-gray);
    border-radius: 4px;
}

.booking-form .btn {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.booking-form .btn:hover {
    background-color: #ec971f;
    text-decoration: none;
}

/* Élément de réservation (pour la liste des réservations) */
.reservation-item {
    background-color: var(--white);
    border: 1px solid var(--medium-gray);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reservation-item .reservation-details h4 {
    margin: 0 0 0.5rem 0;
}

.reservation-item .reservation-status {
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: #5cb85c; /* Vert pour "confirmé" */
    color: var(--white);
}

.reservation-item .reservation-status.pending {
    background-color: var(--secondary-color); /* Orange pour "en attente" */
}

.reservation-item .reservation-status.cancelled {
    background-color: #d9534f; /* Rouge pour "annulé" */
}


/* ========================================
   DESIGN RESPONSIF (pour mobiles et tablettes)
   ======================================== */
@media screen and (max-width: 768px) {
    .container {
        padding: 0 0.5rem;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }

    .main-navigation li {
        display: block;
        margin-bottom: 0.5rem;
    }

    .reservation-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .reservation-item .reservation-status {
        margin-top: 1rem;
    }
}

/* ========================================
   STYLES POUR HEADER.PHP (MODERNE)
   ======================================== */

/* --- Header Principal --- */
.site-header {
    position: fixed; /* Reste en haut de la page */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Fond semi-transparent */
    backdrop-filter: blur(10px); /* Effet de flou moderne */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 1rem 0;
}



.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Branding (Logo) --- */
.site-branding .custom-logo-link img {
    max-height: 50px; /* Ajustez la taille du logo */
    width: auto;
}
.site-title {
    font-size: 1.8rem;
    margin: 0;
    font-family: var(--font-heading);
    color: var(--primary-color);
}
.site-title-link {
    text-decoration: none;
}

/* --- Navigation Desktop --- */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation li {
    margin-left: 2.5rem;
}

.main-navigation a {
    text-decoration: none;
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: var(--primary-color);
}

/* Soulignement animé au survol */
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}
.main-navigation a:hover::after {
    width: 100%;
}

/* Style pour le bouton d'appel à l'action dans le menu */
.main-navigation a.cta-button {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.main-navigation a.cta-button:hover {
    background-color: #ec971f;
    color: var(--white);
}
.main-navigation a.cta-button::after {
    display: none; /* Cache le soulignement pour le bouton */
}


/* --- Menu Mobile (Hamburger) --- */
.menu-toggle {
    display: none; /* Caché sur desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.menu-toggle-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    position: relative;
    transition: background 0.3s ease;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    transition: transform 0.3s ease;
}
.menu-toggle-icon::before { top: -8px; }
.menu-toggle-icon::after { top: 8px; }

/* Animation du hamburger en croix quand le menu est ouvert */
.main-navigation.toggled-on .menu-toggle-icon {
    background-color: transparent;
}
.main-navigation.toggled-on .menu-toggle-icon::before {
    transform: rotate(45deg);
    top: 0;
}
.main-navigation.toggled-on .menu-toggle-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Menu mobile caché par défaut */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block; /* Visible sur mobile */
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%; /* Caché à droite */
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--white);
        padding-top: 5rem;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: right 0.4s ease;
    }

    .main-navigation.toggled-on {
        right: 0; /* Visible */
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 2rem;
    }

    .main-navigation li {
        margin: 1rem 0;
        width: 100%;
    }

    .main-navigation a {
        font-size: 1.2rem;
        padding: 1rem 0;
        display: block;
        border-bottom: 1px solid var(--light-gray);
    }
    
    .main-navigation a.cta-button {
        margin-top: 2rem;
        text-align: center;
        border-radius: 5px;
    }
}
/* ========================================
   STYLES POUR FOOTER.PHP (MODERNE)
   ======================================== */
   .site-footer {
    background-color: #1a1a1a; /* Un noir très foncé */
    color: #b0b0b0;
    font-size: 0.9rem;
}

/* --- Section Principale --- */
.footer-main {
    padding: 4rem 0 2rem;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* La colonne "À Propos" est plus large */
    gap: 3rem;
}

.footer-column .custom-logo-link img {
    max-height: 50px;
    margin-bottom: 1.5rem;
}

.footer-heading {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Colonnes spécifiques */
.footer-about p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.footer-social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #333;
    color: var(--white);
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-social-links a:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

.footer-links-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-menu li {
    margin-bottom: 0.8rem;
}

.footer-links-menu a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links-menu a:hover {
    color: var(--secondary-color);
}

.footer-contact-info p {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.footer-contact-info .dashicons {
    margin-right: 1rem;
    font-size: 1.2rem;
    color: var(--secondary-color);
}

/* --- Barre Inférieure --- */
.footer-bottom {
    background-color: #0d0d0d; /* Noir encore plus foncé */
    padding: 1.5rem 0;
    border-top: 1px solid #333;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--white);
}

.footer-legal-links .separator {
    margin: 0 1rem;
    color: #555;
}

/* --- Responsive Design --- */
@media screen and (max-width: 992px) {
    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-about {
        grid-column: 1 / -1; /* La colonne "À Propos" prend toute la largeur */
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-about {
        grid-column: 1;
    }
    .footer-contact-info p {
        justify-content: center;
    }
    .footer-bottom-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Page d'archive */
.active-filters { margin-bottom: 2rem; }
.active-filters p { font-weight: bold; margin-bottom: 0.5rem; }
.filter-tag {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* ========================================
   STYLES POUR SINGLE-SERVICE-PREMIUM.PHP
   ======================================== */

   .single-service-header {
    background-size: cover;
    background-position: center;
    padding: 8rem 0;
    text-align: center;
    color: var(--white);
    position: relative;
    margin-bottom: 3rem;
}
.single-service-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    margin: 0;
}

.single-service-content {
    margin-bottom: 3rem;
}

.service-details-box {
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--medium-gray);
}

.service-details-box h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 0.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.service-meta .meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.terms-content {
    line-height: 1.8;
    font-size: 1.1rem;
}

.booking-terms-section {
    display: block !important;
    background-color: red !important;
    border: 2px solid blue !important;
}
/* Le reste des styles .meta-item, .meta-info, etc. est déjà défini dans single-appartement.css et peut être réutilisé. */