/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Apply a top margin to anchor targets to prevent them from being hidden under the fixed menu */
/* REPLACE 100px by the height of your fixed menu + a little padding if needed */
.calendar-wrapper {
    scroll-margin-top: 100px; /* Adjust this value! */
}

/* Styles pour les liens de navigation rapide en haut des sections de gîte */
.gite-quick-links-top {
    margin-top: 15px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gite-quick-links-top a {
    display: inline-block;
    background-color: #6c757d; /* Gris anthracite */
    color: white;
    padding: 7px 14px;
    font-size: 0.9em;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 1px solid #6c757d;
}

.gite-quick-links-top a:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Conteneur des boutons "Réserver" et "Calculer un tarif" */
.calendar-button-container {
    margin-top: 20px;
    text-align: center;
    display: flex; /* Utilise flexbox pour aligner les boutons côte à côte */
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 15px; /* Espacement entre les deux boutons */
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne sur petits écrans */
}

/* Styles pour le bouton "Réserver" (classe principale pour les deux boutons) */
.btn-small-contact {
    display: inline-block; /* Rend l'élément un bloc inline pour qu'il puisse être stylisé comme un bouton */
    padding: 8px 15px; /* Padding interne pour la taille du bouton */
    background-color: #FFD700; /* Couleur de fond du bouton Réserver : Jaune or */
    color: #333; /* Couleur du texte (un gris foncé pour contraster avec le jaune) */
    text-align: center;
    text-decoration: none; /* Supprime le soulignement des liens */
    border-radius: 5px; /* Bords arrondis */
    transition: background-color 0.3s ease; /* Transition douce pour l'effet hover */
    font-size: 0.9em; /* Taille de police plus petite */
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    border: 1px solid #CCAA00; /* Bordure assortie au jaune */
    font-weight: bold; /* Ajouté ici pour être sûr qu'il est appliqué */
}

.btn-small-contact:hover {
    background-color: #E6C200; /* Assombrir légèrement le jaune au survol */
    cursor: pointer; /* Indique que le bouton est cliquable */
}

/* NOUVEAUX STYLES SPÉCIFIQUES POUR LE BOUTON "Calculer un tarif" */
/* Cette classe sera ajoutée EN PLUS de .btn-small-contact dans l'HTML */
.btn-blue {
    background-color: #007bff; /* Bleu pour le bouton Calculer */
    border-color: #007bff; /* Bordure bleue assortie */
    color: white; /* Texte blanc */
}

.btn-blue:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
    border-color: #004085; /* Bordure plus foncée au survol */
}


/* Section Héro Agenda */
.hero-agenda {
    padding: 3rem 0;
    text-align: center;
}

.hero-agenda h1 {
    font-size: 2.5em; /* Adjusted for multi-language title */
    margin-bottom: 0.5rem;
    color: #333;
}

/* Picto Agenda et Lignes (jaune) */
.agenda-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-icon-agenda {
    font-size: 2.5em;
    color: #FFD700; /* Jaune or pour l'icône agenda */
    margin: 0 15px;
    flex-shrink: 0;
}

.agenda-icon-wrapper .line {
    flex-grow: 1;
    height: 2px;
    background-color: #FFD700; /* Couleur de ligne assortie en jaune or */
    max-width: 50%;
}

/* Section Explication Multi-langue */
.explanation-section {
    padding: 2rem 0;
    background-color: #f8f8f8; /* Light background for the explanation section */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 3rem; /* Space before calendars */
}

.explanation-section h2 {
    text-align: center;
    font-size: 1.8em;
    color: #444;
    margin-bottom: 2rem;
}

.three-columns-text-agenda {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center; /* Center columns when they wrap */
    max-width: 1200px;
    margin: 0 auto;
}

.column-text-agenda {
    flex: 1;
    min-width: 280px; /* Minimum width for each column before wrapping */
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.column-text-agenda h3 {
    font-size: 1.4em;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.column-text-agenda p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #666;
    margin-bottom: 1rem;
}

/* Section des Agendas Google */
.gite-calendars {
    padding: 2rem 0;
}

.calendar-wrapper {
    margin-bottom: 3rem; /* Space between each calendar */
    text-align: center; /* Center the iframe */
}

.calendar-wrapper h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Styles pour les iframes (calendriers Google) */
.calendar-wrapper iframe {
    max-width: 100%; /* Ensure calendars are responsive */
    height: 600px; /* Keep height fixed or adjust with JS if needed for responsiveness */
    display: block; /* Remove extra space below iframe */
    margin: 0 auto; /* Center the iframe */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Media Queries pour la Responsivité --- */

/* Pour les tablettes et smartphones (largeur max 768px) */
@media (max-width: 768px) {
    .hero-agenda h1 {
        font-size: 2em;
    }
    .hero-icon-agenda {
        font-size: 2em;
    }

    .explanation-section h2 {
        font-size: 1.5em;
    }

    .three-columns-text-agenda {
        flex-direction: column; /* Empile les colonnes sur mobile */
        gap: 20px;
    }

    .column-text-agenda {
        min-width: unset; /* Supprime le min-width */
        width: 100%; /* Prend toute la largeur disponible */
        padding: 20px;
    }

    .column-text-agenda h3 {
        font-size: 1.2em;
    }

    .column-text-agenda p {
        font-size: 0.9em;
    }

    .calendar-wrapper h2 {
        font-size: 1.8em;
    }

    .calendar-wrapper iframe {
        height: 600px; /* Réduit la hauteur des calendriers sur mobile */
    }
}

/* Pour les smartphones (largeur max 480px) */
@media (max-width: 480px) {
    .hero-agenda h1 {
        font-size: 1.8em;
    }
    .hero-icon-agenda {
        font-size: 1.8em;
    }

    .calendar-wrapper iframe {
        height: 600px; /* Encore plus petit sur très petits écrans */
    }
}


/* Media Queries pour la responsivité des boutons */
@media (max-width: 767.98px) {
    .calendar-button-container {
        flex-direction: column; /* Empile les boutons verticalement sur les petits écrans */
        align-items: center; /* Centre les boutons empilés */
        gap: 8px; /* Espacement réduit entre les boutons empilés */
    }

    .btn-small-contact, .btn-blue { /* Applique ces styles aux deux boutons sur mobile */
        width: 80%; /* Rend les boutons plus larges sur mobile */
        max-width: 250px; /* Limite leur largeur pour qu'ils ne soient pas trop grands */
    }
}