/* Style Général */
body { font-family: 'Segoe UI', Arial, sans-serif; line-height: 1.6; margin: 0; color: #333; background-color: #f4f1ee; }

/* Style de la bannière commune à toutes les pages */
.site-banner {
    width: 100%;
    max-height: 250px; 
    overflow: hidden;
    margin-bottom: 20px;
    border-bottom: 3px solid #d4a373; /* Ajoute un rappel de couleur sous la bannière */
}

.site-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* En-tête et Menu */
header { background: #4a3728; color: white; padding: 20px 0; text-align: center; }
header h1 { margin: 0; font-size: 2.2rem; }
nav { background: #35281e; padding: 10px 0; position: sticky; top: 0; z-index: 1000; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; }
nav ul li { margin: 0 15px; }
nav ul li a { color: white; text-decoration: none; font-weight: bold; font-size: 0.95rem; }
nav ul li a:hover { color: #d4a373; }

/* Structure en 2 colonnes (Contenu / Sidebar) */
.page-container { display: flex; gap: 30px; max-width: 1100px; margin: 20px auto; padding: 0 20px; }
.main-content { flex: 3; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.sidebar { flex: 1; background: #4a3728; color: white; padding: 20px; border-radius: 8px; height: fit-content; }

/* --- AJOUT : MISE EN PAGE CÔTE À CÔTE (PAGE ACCUEIL) --- */
.hero-flex { display: flex; gap: 40px; align-items: flex-start; margin-top: 30px; }
.hero-image-box { flex: 1; }
.hero-image-box img { width: 100%; border-radius: 4px; }
.hero-text-box { flex: 1; }

/* Éléments Sidebar */
.sidebar h3 { border-bottom: 2px solid #d4a373; padding-bottom: 10px; margin-top: 0; font-size: 1.2rem; }
.sidebar p { font-size: 0.9rem; }
.btn-sidebar { display: block; background: #d4a373; color: white; text-align: center; padding: 10px; text-decoration: none; border-radius: 5px; font-weight: bold; margin-top: 15px; }

/* Divers & Grilles */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.card { border: 1px solid #eee; padding: 15px; border-radius: 8px; text-align: center; }
.img-fluid { max-width: 100%; height: auto; border-radius: 5px; }
footer { text-align: center; padding: 30px; background: #333; color: white; margin-top: 50px; }
footer a { color: #d4a373; text-decoration: none; margin: 0 10px; font-size: 0.8rem; }

/* Mobile */
@media (max-width: 850px) {
    .page-container { flex-direction: column; }
    .sidebar { order: 2; }
    .hero-flex { flex-direction: column; } /* L'image repasse au dessus du texte sur mobile */
}