/* Fichier : css/style_disponibilites.css */

/* Styles pour le titre et les icônes */
.hero-agenda { padding: 3rem 0; text-align: center; }
.hero-agenda h1 { font-size: 2.5em; margin-bottom: 0.5rem; color: #333; }
.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; margin: 0 15px; flex-shrink: 0; }
.agenda-icon-wrapper .line { flex-grow: 1; height: 2px; background-color: #FFD700; max-width: 50%; }

/* Navigation calendrier */
.calendar-navigation { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding: 0 20px; }
.calendar-navigation .container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.calendar-navigation .nav-arrow { text-decoration: none; color: #007bff; font-weight: bold; }
.calendar-navigation .nav-arrow:hover { text-decoration: underline; }
.calendar-navigation h2 { font-size: 1.8em; color: #333; text-align: center; }

/* Calendrier combiné */
.combined-calendar-section { margin-bottom: 3rem; }
.calendar-title { font-size: 2em; color: #444; text-align: center; margin-bottom: 1.5rem; }
.calendar-table-container { margin-bottom: 2rem; }
.calendar-table-title { text-align: center; font-size: 1.5em; margin-bottom: 1rem; color: #555; }
.calendar-wrapper { display: flex; justify-content: center; overflow-x: auto; }
.calendar-table { width: 100%; max-width: 1200px; border-collapse: collapse; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
.calendar-table th, .calendar-table td { border: 1px solid #ddd; padding: 10px; text-align: center; white-space: nowrap; }
.calendar-table th { background-color: #f8f8f8; color: #555; font-weight: bold; }
.calendar-table .gite-column { width: 150px; text-align: left; background-color: #f8f8f8; }
.calendar-table .day-header { width: calc(85% / 7); }

/* Cellules */
.calendar-table td { transition: background-color 0.3s ease; position: relative; overflow: hidden; }
.calendar-table td.today { border: 2px solid #FFD700; font-weight: bold; }

/* --- GÎTE BLANC (Ligne 1) --- */
/* Disponible */
.calendar-table tr:nth-child(1) td.available { background-color: #e6f7ff; }
/* Occupé (Couleur VIVE) */
.calendar-table tr:nth-child(1) td.occupied,
.calendar-table tr:nth-child(1) td.changeover {
    background-color: #007bff; /* Bleu plus vif */
    color: white; /* Texte blanc pour contraste */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 6px);
}
.calendar-table tr:nth-child(1) td.arrival { background: linear-gradient(135deg, #e6f7ff 50%, #007bff 50%); }
.calendar-table tr:nth-child(1) td.departure { background: linear-gradient(-45deg, #e6f7ff 50%, #007bff 50%); }

/* --- GÎTE ROSÉ (Ligne 2) --- */
/* Disponible */
.calendar-table tr:nth-child(2) td.available { background-color: #faeef2; }
/* Occupé (Couleur VIVE) */
.calendar-table tr:nth-child(2) td.occupied,
.calendar-table tr:nth-child(2) td.changeover {
    background-color: #e91e63; /* Rose foncé vif */
    color: white;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 6px);
}
.calendar-table tr:nth-child(2) td.arrival { background: linear-gradient(135deg, #faeef2 50%, #e91e63 50%); }
.calendar-table tr:nth-child(2) td.departure { background: linear-gradient(-45deg, #faeef2 50%, #e91e63 50%); }

/* --- GÎTE ROUGE (Ligne 3) --- */
/* Disponible */
.calendar-table tr:nth-child(3) td.available { background-color: #ffe6e6; }
/* Occupé (Couleur VIVE) */
.calendar-table tr:nth-child(3) td.occupied,
.calendar-table tr:nth-child(3) td.changeover {
    background-color: #d50000; /* Rouge vif */
    color: white;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 6px);
}
.calendar-table tr:nth-child(3) td.arrival { background: linear-gradient(135deg, #ffe6e6 50%, #d50000 50%); }
.calendar-table tr:nth-child(3) td.departure { background: linear-gradient(-45deg, #ffe6e6 50%, #d50000 50%); }

/* --- LA SOURCE (Ligne 4 - ID 4) --- */
/* Disponible (Ouvert à la location) : Vert très clair par exemple ou neutre */
.calendar-table tr:nth-child(4) td.available { background-color: #f0fff0; }

/* Indisponible (Fermé) : Comme "Occupé" standard (Croix rouge) */
/* Note : Dans le PHP, 'unavailable' n'a pas d'icone par défaut, il faut forcer l'affichage si on veut une croix. */
/* Mais si vous voulez juste une croix visuelle : */
.unavailable {
    background-color: #eee;
    color: #999;
    position: relative;
}
.unavailable::after {
    content: "\f00d"; /* Code FontAwesome pour la croix (fa-times) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #d9534f; /* Rouge de la croix */
    font-size: 1.2rem;
}

/* Occupé (Loué) : JAUNE */
.calendar-table tr:nth-child(4) td.occupied,
.calendar-table tr:nth-child(4) td.changeover {
    background-color: #FFD700; /* Jaune Or */
    color: #333; /* Texte sombre sur jaune */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.4) 3px, rgba(255,255,255,0.4) 6px);
}
/* Pour le jaune, la croix doit être visible (noire ou rouge foncé ?) */
.calendar-table tr:nth-child(4) td.occupied i.fa-times { color: #d32f2f; }

/* Arrivée/Départ pour la Source (Jaune / Vert clair) */
.calendar-table tr:nth-child(4) td.arrival { background: linear-gradient(135deg, #f0fff0 50%, #FFD700 50%); }
.calendar-table tr:nth-child(4) td.departure { background: linear-gradient(-45deg, #f0fff0 50%, #FFD700 50%); }

/* Responsive */
@media (max-width: 768px) {
    .calendar-navigation { flex-direction: column; text-align: center; }
    .calendar-navigation .nav-arrow { margin-top: 10px; }
    .calendar-navigation h2 { margin: 10px 0; font-size: 1.5em; }
    .calendar-table th, .calendar-table td { padding: 5px; font-size: 0.8em; }
}

/* Infos */
.calendar-info { border: 1px solid #ddd; border-radius: 8px; padding: 10px 20px; margin: 20px auto; max-width: 400px; background-color: #f9f9f9; font-size: 1em; text-align: left; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.calendar-info p { margin: 0; line-height: 1.5; }
@media (max-width: 768px) { .calendar-info { max-width: 100%; padding: 10px; font-size: 0.9em; } }

/* Boutons */
.cta-buttons-section { margin: 3rem 0; }
.buttons-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 2rem; }
.cta-button { display: inline-block; padding: 15px 30px; background-color: #007bff; color: #fff; text-decoration: none; font-weight: bold; border-radius: 50px; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.cta-button:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,0.15); }