/* === 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 */
}

/* === Grille des articles === */
.produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
}

/* === Style pour chaque produit === */
.produit {
    border: 1px solid #ddd; /* Légère bordure */
    border-radius: 8px; /* Coins arrondis */
    background-color: white;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour donner de la profondeur */
    text-align: center;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.produit:hover {
    transform: translateY(-5px); /* Soulève légèrement l'article au survol */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* === Image des produits === */
.produit img {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Assure que les images soient bien adaptées à l'espace */
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

/* === Titres des produits === */
.produit h3 {
    font-size: 18px;
    color: #c0392b; /* Rouge rappelant la culture asiatique */
    margin: 10px 0;
}

/* === Description des produits === */
.produit p {
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0;
}

/* === Disponibilité === */
.produit h4 {
    color: #e74c3c; /* Rouge pour l'indisponibilité */
    font-size: 14px;
    margin-bottom: 10px;
}

/* === Prix === */
.produit p:last-child {
    font-size: 16px;
    font-weight: bold;
    color: #27ae60; /* Vert pour le prix */
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .produits {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Moins de produits par ligne sur petits écrans */
    }
}

@media (max-width: 480px) {
    .produits {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .produit img {
        height: 100px; /* Réduit la taille des images */
    }
}







/* 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 */
    overflow-y: auto; /* Ajoute un d�filement vertical si le contenu d�passe */
}

/* Style pour les bandeaux latéraux */
.side-banner {
    position: fixed; /* Fixe les bandeaux à leur position */
    top: 0; /* Place les bandeaux en haut de la fenêtre */
    width: 100px; /* Largeur des bandeaux */
    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 fenêtre */
    z-index: 10; /* Assure que les bandeaux sont au-dessus du contenu */
}
.side-banner img {
    width: 100%; /* L'image remplit la largeur du bandeau */
    height: 100%; /* L'image remplit la hauteur du bandeau */
    object-fit: cover; /* Ajuste l'image sans déformation */
}


/* Bandeau gauche */
.left-banner {
    left: 0; /* Fixe le bandeau gauche au bord gauche de l'écran */
}

/* Bandeau droit */
.right-banner {
    right: 0; /* Fixe le bandeau droit au bord droit de l'écran */
}

/* === Contenu principal === */
.main-content {
    margin-top: 10px; /* Décalage sous le bandeau */
    padding: 20px;
    box-sizing: border-box;
}

/* 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 */
    }
}