#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(18, 18, 18, 0.7)), url('../images/baies-poivre-sichuan-rouges-alsace.webp') center/cover no-repeat fixed;
    color: white;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    margin-bottom: 4rem;
}
#hero h1 { font-size: 4.8rem; margin-bottom: 1rem; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
#hero p { font-size: 1.8rem; margin-bottom: 2.5rem; text-shadow: 0 1px 5px rgba(0,0,0,0.6); font-family: 'Lora', serif; font-style: italic; }

.text-center { text-align: center; }

/* Section Qui Sommes-Nous & Produit Phare */
.section-flex { display: flex; gap: 3rem; align-items: center; }
.section-flex > img { 
    flex: 0 0 45%; 
    max-height: 500px; 
    object-fit: cover; 
    border-radius: 12px; 
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.produit-phare-image {
    flex: 0 0 33%;
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.produit-phare-image a { display: block; height: 100%; }
.produit-phare-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease-in-out; }
.produit-phare-image .image-hover { opacity: 0; }
.produit-phare-image a:hover .image-default { opacity: 0; }
.produit-phare-image a:hover .image-hover { opacity: 1; transform: scale(1.08); }

.produit-phare-text { flex: 1; padding-left: 3rem; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.produit-phare-text h3 { font-size: 2.5rem; color: #fff; margin-bottom: 1rem; font-family: 'Lora', serif; }
.produit-phare-text p { font-size: 1.15rem; color: #ccc; line-height: 1.8; margin-bottom: 2.5rem; }
.cta-wrapper {
    margin-top: 2.5rem; /* Augmente l'espace au-dessus du bouton */
    display: block;      /* S'assure que le bloc prend bien sa place */
}

@media (max-width: 768px) {
    #hero h1 { font-size: 3rem; }
    #hero p { font-size: 1.3rem; }
    .section-flex { flex-direction: column; text-align: center; }
    .section-flex > img, .produit-phare-image { flex: 0 0 auto; width: 100%; max-width: 90%; height: 300px; margin: 0 auto; }
    .produit-phare-text { padding-left: 0; }
    .produit-phare-text .cta-wrapper { justify-content: center; }
}

.img-small {
    width: 40%; /* Ou 20% selon ton besoin */
    height: auto;
}