/* RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; background-color: #f9f7f2; color: #333; line-height: 1.6; }

/* HEADER */
.site-header { background-color: #fff; padding: 40px 0; text-align: center; border-bottom: 1px solid #eee; position: relative; }
/* --- LE HEADER (MENU) --- */
.site-header {
    background-color: #fff;
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.main-nav ul {
    display: flex;
    justify-content: center; /* Centre les onglets Accueil, Produits, etc. */
    list-style: none;
    gap: 40px;
    margin-top: 20px;
}

/* --- LE CONTENU (ACCUEIL) --- */
.hero-split {
    display: flex;
    align-items: center; /* Aligne verticalement le texte et l'image */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px; /* Espace entre le texte et l'image */
    padding: 60px 20px;
}

.hero-text {
    flex: 1;
    text-align: left; /* Le texte reste aligné à gauche pour un look pro */
}

.hero-image-side {
    flex: 1;
}

.hero-image-side img {
    width: 100%;
    height: auto;
}

/* --- MOBILE --- */
/* --- CETTE SECTION GÈRE LE MOBILE --- */
@media (max-width: 768px) {
    /* Menu mobile */
    .main-nav ul { gap: 15px; }
    .main-nav a { font-size: 11px; }

    /* Forcer l'unité d'affichage pour l'effet surprise */
    .product-card {
        min-width: 100%; 
        flex: 0 0 100%;
        scroll-snap-align: center;
        padding: 40px 20px;
    }

    .carousel-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory; 
        gap: 0; 
    }

    .carousel-arrow {
        display: none; /* Swipe au doigt sur mobile */
    }

    .promo {
        color: #d4af37;
        font-weight: bold;
        font-size: 0.8rem;
    }
}


.brand-wrapper { display: flex; flex-direction: column; align-items: center; }
.brand-name { font-family: 'Playfair Display', serif; font-size: 3rem; text-transform: uppercase; letter-spacing: 6px; }
.brand-tagline { color: #999; font-size: 0.9rem; margin-bottom: 10px; }
.brand-logo-small { width: 30px; height: auto; opacity: 0.8; }

/* NAV */
.main-nav ul { display: flex; justify-content: center; list-style: none; gap: 40px; margin-top: 20px; }
.main-nav a { text-decoration: none; color: #333; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; }

/* PANIER */
.cart-container { position: absolute; top: 20px; right: 5%; }
.view-cart { padding: 8px 15px; border: 1px solid #333; text-decoration: none; color: #333; font-size: 0.75rem; }

/* CARROUSEL */
.carousel-wrapper { position: relative; max-width: 1200px; margin: 40px auto; display: flex; align-items: center; padding: 0 40px; }
.carousel-container { display: flex; overflow-x: hidden; scroll-behavior: smooth; gap: 20px; width: 100%; }
.product-card { min-width: 300px; flex: 0 0 auto; background: #fff; padding: 25px; border: 1px solid #f0f0f0; text-align: center; }
.product-card img { width: 100%; max-width: 200px; height: auto; margin-bottom: 15px; }

.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #000; color: #fff; border: none; width: 40px; height: 40px; cursor: pointer; z-index: 10; border-radius: 50%; }
.carousel-arrow.left { left: 0; }
.carousel-arrow.right { right: 0; }

/* BOUTON */
.ajouter-panier { background-color: #000; color: #fff; padding: 12px 25px; border: none; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; margin-top: 10px; }

/* FOOTER */
.site-footer { padding: 40px 0; background-color: #fff; text-align: center; border-top: 1px solid #eee; margin-top: 60px; }
.produits-section {
    margin-bottom: 80px; /* Espace entre les deux carrousels */
}
/* Centrage global du contenu */
main {
    max-width: 1200px; /* Largeur maximale pour les grands écrans */
    margin: 0 auto;    /* Centre le bloc sur l'écran */
    padding: 40px 20px; /* Espace de sécurité sur les côtés pour le mobile */
}

/* Hero Section (Accueil) */
.hero-produits {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le texte horizontalement */
    text-align: center;
    gap: 30px;
}
input, textarea {
    width: 100%;
    max-width: 500px; /* Évite que les champs soient trop géants sur ordi */
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 12px;
}
/* Sections de texte (À Propos) */
.about-content, .contact-section {
    max-width: 800px; /* On réduit pour que la lecture soit plus confortable */
    margin: 0 auto;
    text-align: center;
}

/* Formulaire (Contact) */
.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les champs du formulaire */
    width: 100%;
}
.section-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

.section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    letter-spacing: 2px;
}

.badge {
    background: #000;
    color: #fff;
    padding: 5px 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

.promo {
    color: #d4af37; /* Couleur dorée pour l'économie */
    font-weight: bold;
    font-size: 0.8rem;
}
/* MOBILE */
@media (max-width: 768px) {
    .main-nav ul { gap: 15px; }
    .main-nav a { font-size: 11px; }
    .product-card { min-width: 85%; }
    .carousel-arrow { display: none; }
    .carousel-container { overflow-x: auto; }
}