/* colors :
    #2c6a4f : vert header
    #294b37: vert foncé
    #a4a16e: vert clair
    #d6a23b : doré
    #F9F1DD: neutre
*/

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Active le défilement fluide pour toute la page */
}

body {
    font-family: 'Georgia', serif;
    background-color: #f4f4f4; /* Fond doux */
    color: #4d4d4d; /* Gris doux */
    line-height: 1.6;
}

/* Header sans logo, titre à gauche */
header {
    /* background-color: #2d6a4f; */
    background: repeating-linear-gradient(
        90deg,  /* Angle de 90 degrés pour les rayures verticales */
        #92b280,  /* Couleur dorée */
        #92b280 80px, /* Largeur de la première rayure */
        #2d6a4f 80px, /* Couleur verte */
        #2d6a4f 160px  /* Largeur de la deuxième rayure */
    );
    color: white;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligne le contenu à gauche */
    border-bottom: 5px solid #c7a15d;
}

/* Titre à gauche avec police différente */
.header-text h1 {
    font-family: "Leckerli One", cursive;
    font-size: 3em;
    color: white;
    margin: 0;
    text-align: left;  /* Assure que le texte est aligné à gauche */
}

.logo-container {
    flex: 1;
}

.logo {
    width: auto;
    height: 95px;
}

.header-text {
    text-align: right;
    flex: 2;
}

.header-text h1 {
    font-size: 3em;
    letter-spacing: 2px;
}

.header-text p {
    font-size: 1.2em;
    font-style: italic;
}

/* _________________________ Section Hero ____________________ */
.hero {
    background: url('images/photo-cover-2.JPG') no-repeat center center;
    background-size: cover;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 40px;
    overflow: hidden;
}

.hero-content h2 {
    font-family: "Kaushan Script", cursive;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

button {
    background-color: #c7a15d; /* Jaune vif */
    color: #294b37;
    padding: 15px 30px;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 30px; /* Coins arrondis pour un style vintage */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2d6a4f; /* Jaune plus doux */
    color: white;
}

/* -------------- Section Présentation de la ferme -------------- */
.about {
    background-color: #f0f0f0;
    padding: 40px;
    text-align: center;
    font-family: 'Merriweather', serif; /* Utilisation de la police appropriée */
}

.about h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #2d6a4f;
    font-family: "Kaushan Script", cursive;
}

.about p {
    font-size: 1.1em;
    color: #555;
    text-align: left;
    margin: 10px 0;
    line-height: 1.7;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------  Section Produits  -------------- */
.products {
    background-color: #f4f4f4;
    display: flex;
    flex-wrap: wrap; /* Permet de gérer les produits sur plusieurs lignes si nécessaire */
    justify-content: center; /* Centre les produits horizontalement */
    padding: 20px;
    margin-top: 40px;
    gap: 20px; /* Ajoute de l'espace entre les produits */
}

/* Titre de la section */
.products h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #2d6a4f; /* Ajuste la couleur du titre selon le logo */
    font-family: "Kaushan Script", cursive;
    width: 100%; /* S'assure que le titre prend toute la largeur */
}

/* Grille des produits */
.products .product {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu des produits */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    width: 360px; /* Largeur de chaque produit */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.products .product:hover {
    transform: scale(1.05); /* Effet de zoom au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.products .product img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e0d0b7; /* Bordure douce autour des images */
}

.products .product h3 {
    margin-top: 20px;
    font-size: 1.5em;
    color: #92b280; /* Ajuste la couleur du texte */
}

.products .product p {
    font-size: 1em;
    color: #777;
    margin-top: 10px;
}
/* ___________________________________________________________________ */
.products {
    display: flex;
    /* justify-content: space-between; */
    gap: 20px;
    flex-wrap: wrap;
}

.product {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.product img {
    width: 100%;
    border-radius: 8px;
}

.product a {
    text-decoration: none;
    color: #333;
}

.product h3 {
    margin-top: 10px;
    font-size: 1.5em;
    color: #92b280;
}

.product p {
    font-size: 1em;
    color: #777;
}

/* --------------  Section Nos Boutiques --------------  */
.boutiques {
    background-color: #f0f0f0;
    display: flex;
    flex-wrap: wrap; /* Permet de gérer les produits sur plusieurs lignes si nécessaire */
    justify-content: center; /* Centre les produits horizontalement */
    padding: 20px;
    margin-top: 40px;
    gap: 20px; /* Ajoute de l'espace entre les produits */
    /* padding:20 80px; */
}

/* Titre de la section */
.boutiques h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #2d6a4f; /* Ajuste la couleur du titre selon le logo */
    font-family: "Kaushan Script", cursive;
    width: 100%; /* S'assure que le titre prend toute la largeur */
}

/* Grille des produits */
.boutiques .boutique {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu des produits */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    width: 360px; /* Largeur de chaque produit */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boutiques .boutique:hover {
    transform: scale(1.05); /* Effet de zoom au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.boutiques .boutique img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e0d0b7; /* Bordure douce autour des images */
}

.boutiques .boutique h3 {
    margin-top: 20px;
    font-size: 1.5em;
    color: #92b280; /* Ajuste la couleur du texte */
}

.boutiques .boutique p {
    font-size: 1em;
    color: #777;
    margin-top: 10px;
}

/* --------------  Section Où sommes-nous  -------------- */
.location {
    background-color: #f4f4f4;
    text-align: center;
    margin-top: 40px;
    padding: 20px;
}

.location h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #2d6a4f;
    font-family: "Kaushan Script", cursive;
}

.location p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #555;
}

#map {
    width: 100%;
    height: 400px;  /* Taille de la carte */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --------------  Footer  -------------- */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #2d6a4f;  /* Fond vert */
    color: white;  /* Texte blanc */
    border-top: 1px solid #ccc;  /* Légère bordure */
}

/* Contenu à gauche (email) */
.footer-left {
    font-size: 1.1em;
}

.footer-left a {
    text-decoration: none;
    color: white;
}

/* Contenu à droite (réseaux sociaux) */
.footer-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-icon {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: scale(1.1);  /* Zoom léger au survol */
}

/* Centrer et harmoniser les sections "About", "Boutiques" et "Où me trouver" */
.about, .boutiques, .location .products{
    padding: 40px 20px;  /* Plus d'espace pour un effet aéré */
    text-align: center;  /* Texte centré */
    font-family: 'Merriweather', serif; /* Utilisation de la même police */
}

/* Titre des sections */
.about h2, .boutiques h2, .location h2 .products h2{
    font-family: "Kaushan Script", cursive;
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #2d6a4f;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Paragraphes dans ces sections */
.about p, .boutiques p, .location p .products h2{
    font-size: 1.2em;
    line-height: 1.6;
    color: #555;
    margin: 10px 0;
    max-width: 800px;  /* Limiter la largeur du texte */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    /* Responsive Design pour le menu */
    .header-text h1 {
        font-size: 2em;  /* Réduire la taille du titre sur téléphone */
    }

    .hero-content h2 {
        font-size: 2em; /* Réduire la taille du sous-titre sur téléphone */
    }

    .hero-content p {
        font-size: 1em; /* Réduire la taille du texte sur téléphone */
    }

    button {
        font-size: 1em; /* Réduire la taille du bouton sur téléphone */
        padding: 10px 20px;
    }
}