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

/*Général*/
    p{
        font-size: 1.5em;
        margin: 0.5em 0;
        font-family: serif;
        color:#4d4135;
    }
    ol, ul {
        list-style: none;
    }
    h1{
        display: none;
    }
    h2{
        font-size: 3em;
        color: #000000;
        margin-bottom: 40px;
        font-weight: 900;
        font-family: "Playfair Display", serif;
        line-height: 0.9;
    }
    h3{
        font-size: 1.5em;
        color: #000000;
        margin-bottom: 20px;
        font-weight: 700;
        font-family: "Playfair Display", serif;
    }
    .meta{
        font-family: "Great Vibes", cursive;
        font-size: 2em;
        color: #954500;
        font-weight: bold;
    }
    .text-1{
        font-size: 6em;
        color: #000000;
        margin-bottom: 40px;
        font-weight: 900;
        font-family: "Playfair Display", serif;
        line-height: 0.9;
    }
    .highlight{
        color: #954500;
        font-style: italic;
    }

    /*Bouton*/
    .cta {
        display: inline-block;
        padding: 0.75em 1.5em;
        background-color: #954500;
        color: #fff;
        text-decoration: none;
        font-size: 1.2em;
        border-radius: 15px;
        transition: background-color 0.3s ease;
        border: none;
    }
    .cta:hover {
        background-color: #4d4135;
    }

/*header*/
    header{
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10em;
        background-color: #f3ebe6;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        opacity: 0.98;
    }
    .brand{
        flex-basis: 20%;
    }
    nav{
        flex-basis: 70%;
        align-items: center;
        justify-content: center;
    }
    nav ul {
        display: flex;
        gap: 3em;
    }
    nav ul li a {
        text-decoration: none;
        color: #4d4135;
        font-weight: bold;
        font-size: x-large;
        position: relative;
    }
    nav ul li a:hover {
        color: #954500;
    }
    nav ul li a.active {
        color: #954500;
    }
    /*Soulignement au survol*/
    nav ul li a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0%;
        height: 2px;
        background: #954500;
        transition: width 0.3s ease;
    }

    nav ul li a:hover::after,
    nav ul li a.active::after {
        width: 100%;
    }
/*body*/
    body{
        background-color: #f3ebe6;
    }
/*accueil*/
    #accueil {
        display: flex;
        background-image: linear-gradient(
        to left,
        rgba(255, 255, 255, 0.05),  
        rgba(255, 255, 255, 0.7)    
        ),
        url('img/boutique.jpeg');
        background-size: cover;
        padding: 40px 10em;
    }
    .presentation{
        flex-basis: 45%;
    }

/*A propos de nous*/
    .img-ronde{
        border-radius: 50%;   
        object-fit: cover;        
        border: 15px solid #fff1e7;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }
    .valeur{
        display: flex;
        gap: 2em;
        margin-top: 20px;
    }
    .valeur-item{
        background-color: #fff1e7;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        flex-basis: 50%;
        text-align: center;
    }
    .valeur-item h3{
        margin-bottom: 10px;
    }
    .valeur-item p{
        font-size: 1.2em;
        color: #4d4135;
    }

/*Notre histoire*/
    #notrehistoire{
        background-color: #fff1e7;
        padding: 0;
        margin: 40px 0;
    }

/*Nos produits*/
    #nosproduits{
        padding: 40px 10em;
    }
    .produits{
        display: flex;
        gap: 2em;
        justify-content: center;
    }
    .img-produit{
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }
    .produits .produit-item{
        background-color: #fff1e7;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        flex-basis: 35%;
        text-align: center;
    }
    .produits .produit-item h3{
        margin-top: 15px;
    }

/*Ingredients locaux*/
    #ingredientslocaux{
        background-color: #fff1e7;
        padding: 0;
        margin: 40px 0;
    }
    .provenance{
        display: flex;
        gap: 2em;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .icone{
        color: #954500;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .texte{
        padding: 0;
    }

/*Contact*/
    #contact{
        padding: 0px 5em;
        display: flex;
        
        text-align: center;
    }
    #contact h2{
        margin-bottom: 20px;
        font-size: 2em;
    }
    .col1{
        flex-basis: 30%;
        display: flex;
        flex-direction: column;
        padding: 0 40px;
    }
    .col2{
        flex-basis: 40%;
        display: flex;
        flex-direction: column;
        padding: 0 40px;
    }
    .col3{
        flex-basis: 30%;
        display: flex;
        flex-direction: column;
        padding: 0 40px;
    }
    iframe{
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }
    .social{
        display: flex;
        gap: 20px;
        margin-top: 20px;
        justify-content: center;
    }
    .social svg{
        width: 40px;
        height: 40px;
        fill: #4d4135;
        transition: fill 0.3s ease;
    }
    .social svg:hover{
        fill: #954500;
    }

/*Bloc*/
    .text-image{
        display: flex;
        gap: 5em;
        padding: 40px 10em;
    }
    .image{
        display: flex;
        flex-basis: 50%;
        justify-content: center;
        align-items: center;
    }
    .text{
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-basis: 50%;
    }

/*Footer*/
    footer{
        background-color: #f3ebe6;
        text-align: center;
        padding: 20px 0;
        font-size: 0.9em;
        color: #4d4135;
        margin-top: 40px;
    }
    footer a{
        color: #954500;
        text-decoration: none;
        font-weight: bold;
    }
    footer a:hover{
        text-decoration: underline;
    }