/* === Style global pour le body === */
body {
    font-family: 'Arial', sans-serif;
    background-color: #FFF3C4; /* Couleur crème inspirée d'un design asiatique chaleureux */
    color: #333; /* Texte sombre mais lisible */
    margin: 0;
    padding: 0;
}

/* === Conteneur principal === */
.container {
    max-width: 1300px;
    margin: 20px auto; /* Centre verticalement le contenu */
    padding: 10px;
}

/* === Style global pour l'entête === */
.site-header {
    background-color: #F0D879; /* Couleur jaune */
    padding: 30px 40px; /* Réduit le padding pour une hauteur correcte */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    position: sticky; /* Bandeau fixe en haut de la page */
    top: 0;
    z-index: 1000;
    width: 100%; /* Assure que l'entête prend toute la largeur */
    margin: 0 auto; /* Centre le header */
    max-width: 1400px; /* Limite la largeur à 1200px */
    box-sizing: border-box; /* Inclus padding et bordures dans la largeur totale */
}

/* Conteneur de l'entête */
.header-container {
    display: flex; /* Flexbox pour aligner les éléments horizontalement */
    justify-content: space-between; /* Séparation entre le logo et la navigation */
    align-items: center; /* Centre verticalement les éléments */
    width: 100%; /* S'assure que le conteneur prend toute la largeur */
    max-width: 1400px; /* Limite la largeur à 1200px */
    margin: 0 auto; /* Centre horizontalement le contenu */
    box-sizing: border-box; /* Prend en compte padding et marges */
}

/* Style du logo du site */
.site-logo {
    font-family: 'Roboto', sans-serif;
    font-size: 24px; /* Taille ajustée */
    font-weight: bold;
    color: #8C0A0A; /* Rouge asiatique */
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.site-logo:hover {
    color: #4A4A4A; /* Gris foncé au survol */
}

/* Navigation des liens */
.site-nav {
    display: flex; /* Alignement horizontal des liens */
    gap: 15px; /* Espacement entre les boutons */
}

.nav-link {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #4A4A4A; /* Gris foncé */
    background-color: #F0D879; /* Fond doux assorti au jaune */
    padding: 8px 15px; /* Espacement interne des boutons */
    border-radius: 5px;
    border: 2px solid #8C0A0A; /* Bordure rouge asiatique */
    transition: all 0.3s ease;
}

.nav-link:hover {
    background-color: #8C0A0A; /* Rouge asiatique */
    color: #FFFFFF; /* Texte blanc au survol */
    transform: scale(1.1); /* Zoom léger au survol */
}

/* Conteneur principal pour tout aligner */
.site-wrapper {
    display: flex; /* Place les bandeaux et le contenu principal côte à côte */
    justify-content: center;
    background-color: #FFF3C4; /* Fond jaune */
    height: 100vh; /* Utilise toute la hauteur de la fenêtre */
    margin: 0;
    overflow: hidden; /* Pour éviter le défilement horizontal */
}

/* Style pour les bandeaux latéraux */
.side-banner {
    width: 100px; /* Largeur des bandeaux (ajuste selon tes besoins) */
    background-color: #FFD54F; /* Fond assorti au site */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Légère ombre */
    height: 100vh; /* La hauteur est égale à la hauteur de la fenêtre */
}

/* Assurer que l'image couvre toute la hauteur du bandeau */
.side-banner img {
    width: 100%; /* L’image remplit le bandeau horizontalement */
    height: 100%; /* L’image couvre toute la hauteur du bandeau */
    object-fit: cover; /* L'image remplira le conteneur sans se déformer */
}

/* Style pour le contenu principal */
.main-content {
    flex: 1; /* Prend tout l'espace disponible entre les bandeaux */
    padding: 20px;
    box-sizing: border-box; /* Inclut les paddings dans les dimensions */
}

/* Responsive Design : masquer les bandeaux sur petits écrans */
@media (max-width: 768px) {
    .side-banner {
        display: none; /* Cache les bandeaux latéraux */
    }

    .main-content {
        padding: 10px; /* Réduit le padding pour s'adapter aux petits écrans */
    }
}