:root {
    /* Palette de couleurs inspirée du logo */
    --primary-color: #004080;   /* Bleu profond */
    --secondary-color: #00A859; /* Vert dynamique */
    --accent-color: #F7B32B;    /* Jaune orangé */
    --light-color: #FFFFFF;
    --dark-color: #1A202C;
    --background-light: #F7FAFC;
    --font-family: 'Poppins', sans-serif;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --border-radius: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-family); color: var(--dark-color); line-height: 1.7; background-color: var(--light-color); overflow-x: hidden; }
h1, h2, h3 { color: var(--primary-color); font-weight: 600; }
h2 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; }
section p { text-align: center; max-width: 600px; margin: 0 auto 3rem auto; color: #4A5568; }
section { padding: 80px 20px; }
main { padding-top: 80px; } /* Hauteur du header */

/* --- ANIMATION D'OUVERTURE --- */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.8s ease, visibility 0.8s ease; }
#preloader.hide { opacity: 0; visibility: hidden; }
.logo-placeholder { font-size: 4rem; font-weight: 700; color: var(--light-color); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* --- EN-TÊTE ET NAVIGATION --- */
header { position: fixed; width: 100%; top: 0; z-index: 1000; transition: background-color 0.3s, box-shadow 0.3s; padding: 0 2rem; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
header.scrolled { box-shadow: var(--shadow-sm); }
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; height: 80px; }
nav .logo { color: var(--primary-color); font-weight: 700; font-size: 1.8rem; text-decoration: none; }
.nav-links { display: flex; list-style: none; align-items: center; }
.nav-links li { margin-left: 35px; }
.nav-links a { text-decoration: none; color: var(--dark-color); font-weight: 500; position: relative; padding-bottom: 5px; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s; }
.nav-links a:hover::after { width: 100%; }
.nav-cta { background-color: var(--accent-color); color: var(--dark-color); padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: transform 0.3s, box-shadow 0.3s; margin-left: 35px; }
.nav-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* --- SECTION ACCUEIL (HERO) --- */
#accueil { display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(rgba(0, 64, 128, 0.8), rgba(0, 64, 128, 0.6)), url('https://via.placeholder.com/1920x1080.png?text=Paysage+du+Burkina') no-repeat center center/cover; color: var(--light-color); height: 100vh; padding: 0 20px; }
#accueil h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--light-color); margin-bottom: 1rem; font-weight: 700; }
#accueil p { color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; font-weight: 300; margin-bottom: 2rem; }
.cta-button { background: var(--accent-color); color: var(--dark-color); padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.cta-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }

/* --- SECTION AVANTAGES --- */
#avantages { background-color: var(--background-light); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.feature-card { background-color: var(--light-color); padding: 2.5rem; text-align: center; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: transform 0.3s, box-shadow 0.3s; }
.feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); }
.icon-container { width: 60px; height: 60px; margin: 0 auto 1.5rem auto; background: var(--primary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--light-color); }
.feature-card h3 { margin-bottom: 0.5rem; }
.feature-card p { text-align: center; margin: 0; font-size: 0.95rem; }

/* --- TABLEAU DES HORAIRES ET RESPONSIVE --- */
.table-wrapper { width: 100%; overflow-x: auto; max-width: 1100px; margin: auto; }
.mobile-scroll-hint { display: none; text-align: right; font-style: italic; color: #718096; margin-bottom: 1rem; }
#horairesTable { width: 100%; border-collapse: collapse; text-align: left; min-width: 600px; /* Largeur minimale pour forcer le scroll */ }
#horairesTable th, #horairesTable td { padding: 15px; border-bottom: 1px solid #EDF2F7; }
#horairesTable th { font-weight: 600; font-size: 0.9rem; color: #718096; text-transform: uppercase; }
#horairesTable tbody tr { transition: background-color 0.2s; }
#horairesTable tbody tr:hover { background-color: var(--background-light); }
.reserve-btn { background-color: var(--secondary-color); color: white; border: none; padding: 10px 18px; border-radius: 50px; cursor: pointer; font-weight: 600; font-family: var(--font-family); transition: background-color 0.3s, transform 0.3s; }
.reserve-btn:hover { background-color: #008a48; transform: scale(1.05); }

/* --- SECTION CONTACT & FOOTER --- */
#contact { background-color: var(--background-light); }
.contact-info { max-width: 800px; margin: auto; background: var(--light-color); padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); text-align: center; }
.contact-info p { margin-bottom: 1rem; font-size: 1.1rem; }
.contact-info a { color: var(--secondary-color); text-decoration: none; font-weight: 600; }
footer { text-align: center; padding: 2rem; background-color: var(--dark-color); color: rgba(255, 255, 255, 0.7); }

/* --- MODALE --- */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
.modal-content { background-color: var(--light-color); margin: 10% auto; padding: 30px; width: 90%; max-width: 500px; border-radius: var(--border-radius); box-shadow: var(--shadow-md); position: relative; animation: slideDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.close-btn { color: #aaa; position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
#bookingForm label { font-weight: 600; margin-bottom: 5px; }
#bookingForm input, #bookingForm select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: var(--border-radius); font-family: var(--font-family); }
#bookingForm input[readonly] { background-color: #eee; }
#bookingForm button { width: 100%; padding: 15px; background: var(--secondary-color); color: var(--light-color); border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: background-color 0.3s; }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- RESPONSIVE DESIGN --- */
@media screen and (max-width: 768px) {
    h2 { font-size: 2rem; }
    .nav-links, .nav-cta { display: none; } /* On cache les liens et le bouton sur mobile */
    .burger { display: block; cursor: pointer; z-index: 1001;}
    .burger div { width: 25px; height: 3px; background-color: var(--dark-color); margin: 5px; transition: all 0.3s ease; }
    nav { padding: 0 1.5rem; }
    /* Menu mobile qui s'affiche */
    .nav-links-mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; right: 0; top: 0; background-color: var(--light-color); width: 80%; height: 100vh; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); list-style: none; }
    .nav-links-mobile li { margin: 25px 0; }
    .nav-active { transform: translateX(0%); }
    .mobile-scroll-hint { display: block; } /* On affiche l'indice de scroll */
}