@font-face {
    font-family: "Crustaceans";
    src: url(../../../../assets/fonts/crustaceans-signature-demo/Crustaceans-SignatureDEMO-Regular.otf);
}

:root { 
    --base-color: #2D2424 ; 
    --primary-color: #5C3D2E ; 
    --primary2-color: #B85C38 ; 
    --secondary-color: #E0C097 ; 
    --secondary2-color: #EEEEEE ; 
    --secondary3-color: #F8F7F5 ; 
    --bonus-color: #FEC090;
    
}


nav{
    position: fixed;
    width: 100%;
    background: #2d2424b0; 
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 2px 3px 5px rgba(0, 0, 0, 1);
    z-index: 10;
     
    & #logo-img {
        position: fixed;
        transform: translate(-100%, -6%);
    }
    & #home-nav{
        display: flex;
        gap: 20px;
        margin-left: 30px;
        

    }
    & h3 {
        color: white;
        font-weight: bold;
        font-size: 1.6rem
    }
    & ul{
        display: flex;
        gap: calc(1px + 2vw);

        /* @media screen and (max-width: 1150px) { 
        flex-direction: column;
        display: none;
        } */
        
    }
    & img {
        height: 30px;
        width: 30px;
        
     }

     & a{
        color: white;
        text-decoration: none;
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 1150px) { /* Tablette, actif si max-width à 870px */
    nav {
        justify-content: center;
        align-items: center;
        
            & ul {
                flex-direction: column;
                display: none;
                position: absolute;
                text-align: center;  
                
                top: 50%;
                left: 50%;
                transform: translate(-50%, 10%);
                background-color: #2d2424b0; 
                padding: 25px;
                }
        & #shopping-cart {
           display: none;
        }
        
    }
    nav:hover ul {
        display: flex;
    }
}


#hero-section {
    height: 100vh;
    background: url(../../../../assets/img/pexels-ifreestock-585753.jpg) fixed center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    
     
    & #h1-container { 

        margin: 2%;
        padding: 7%;
        text-align: center;
        
        & h1{
            color: var(--bonus-color);
            font-size: calc(3.5vw + 4rem);
            font-family: Crustaceans;
            margin-bottom: 3%;
            text-shadow: #474747 3px 5px 2px;
        }
        & p {
            color: var(--secondary2-color);
            text-shadow: 0px 0px 5px #161616;
            font-family: serif;
            font-weight: 600;
            font-size: 1.5rem;
            margin-bottom: 9vh;
        }
        & a {
            text-decoration: none;
            color: var(--secondary2-color);
            font-family: serif;
            font-weight: 800;
            font-size: calc(1vw + 0.9rem);
            border: solid 2.5px var(--secondary2-color);
            border-radius: 50px;
            padding: 20px;
            transition: 0.5s;
             
        } 
        & a:hover{
            background: var(--primary-color);
            box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

        }
    
    }

}
#h2-section {
    background-color: white;
}

 
#img-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
 
    & h2 {
        color: var(--base-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold;
        margin: calc(2.5vw + 2rem);
     }
    & div{
        height: 50vh;
        margin: 3%;
        width: 90%;
        max-width: 800px;
        background: url(../../../../assets/img/795501340.png) center/cover;
     
    }
}


/* ---------------- NOUVEAUTES ----------------------- */

#news-section{
  
    background-color: var(--primary-color);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3%;
    padding: 50px 0;

    & h2{
        color: var(--bonus-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold;
        margin: 0 calc(2.5vw + 2rem);
    }

    & #news-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 3%;
        gap: 5vh;
    }
    & .news-card {
        min-width: 250px;
        max-width: 30%;  
        height: 50vh;
        display: flex;
        flex-flow: column nowrap;
        background-color: white;
          
    }
    & img {
        height: 250px;
        width: 250px;
        background: url(../../../../assets/img/134009550.png) center/cover;
     }

}



/* Source Serif 4 - 400 */ 

/* --------------------------------------- */

#our-products-section {
    height: 20vh;
    background: url(../../../../assets/img/891009545.png) fixed center/cover; 
  
    display: flex;
    align-items: center;
    justify-content: center;
    & a {
        text-decoration: none;
            color: var(--secondary2-color);
            font-family: serif;
            font-weight: 800;
            font-size: 1.5rem;
            border: solid 2.5px var(--secondary2-color);
            border-radius: 50px;
            padding: 20px;
            transition: 0.5s;
    }
    & a:hover {
        background: var(--primary-color);
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

    
    }
}




/* ------------------ OUR STORY ------------------------ */
#our-story-section {
     
    text-align: center;
    
    background-color: var(--secondary3-color);
    padding: 6vh 3vh;
    
    & #our-story {
        max-width: 800px;
        margin: 0 auto;
    }

    & h2 {
        color: var(--base-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold;
    }
    & p {
        margin: 50px 0;
    }
    & a {
        text-decoration: none;
        background-color: var(--primary-color);
        color: var(--secondary2-color);
        font-family: serif;
        font-weight: 800;
        font-size: 1.5rem;
        border: solid 2.5px var(--primary-color);
        border-radius: 50px;
        padding: 20px;  
        
         
    } 
    & a:hover{
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

    }
}


/* ------------------ AVIS ------------------------ */
#reviews-section {
    background-color: var(--secondary3-color);
    
    & h2 {
        color: var(--base-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold;
        padding: calc(2.5vw + 2rem) 0;
        text-align: center;
    }
}


/* ------------------ CONTACT ------------------------ */
/* https://developer.mozilla.org/fr/docs/Learn_web_development/Extensions/Forms/Your_first_form */
#contact-us-section {

    & #formulaire {
        padding: 6vh 3vh;
    }
    
    & #form {
        display: flex;
        align-items: center;
        margin: 3%;
        
    }
    #formulaire h2 {
        color: var(--base-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold; 
        text-align: center;
    }

    & a {
        text-decoration: none;
        background-color: var(--primary-color);
        color: var(--secondary2-color);
        font-family: serif;
        font-weight: 800;
        font-size: 1.5rem;
        border: solid 2.5px var(--primary-color);
        border-radius: 50px;
        padding: 10px 30px;
    } 

    & #formButton {
        text-align: center;
        margin: 3vh 0 2vh;
    }

    & a:hover{
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

    }
    & form {
        /* On centre le formulaire */
        margin: 0 auto;
        width: 650px;
        /* Le contour du formulaire */
        padding: 2.5em 1em;
        border: solid 2.5px var(--base-color);
        border-radius: 1em;
        box-shadow: 0 2px 7px #dfdfdf;


        & ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }
        & li {
            margin-bottom: 1em;
          }
          
        & label {
            /* Taille et alignement uniformes */
            display: inline-block;
            width: 90px;
            text-align: center;
          }
          
        & input,
          textarea {
            /* On s'assure que les champs texte ont la même police
               Par défaut, les zones de texte ont une police à chasse
               fixe. */
            font: 1em sans-serif;
          
            /* Taille uniforme pour des champs */
            width: 300px;
            box-sizing: border-box;
          
            /* On utilise la même bordure que pour le formulaire */
            border: 1px solid #999;
          }
          
          
        & input:focus,
          textarea:focus {
            /* On rajoute une mise en avant pour les éléments avec
               le focus. */
            border-color: #000;
          }
          
        & textarea {
            /* On aligne les textes sur plusieurs lignes avec leur
               libellé. */
            vertical-align: top;
          
            /* On fournit un peut d'espace pour saisir du texte. */
            height: 5em;
          
            /* On permet de redimensionner verticalement. */
            resize: vertical;
          }
          
      }
}

/* ------------------ NOUS RENDRE VISITE ------------------------ */
#localisation {
    text-align: center;
    
    background-color: var(--secondary3-color);
    padding: 6vh 3%;

    & h2 {
        color: var(--base-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold;
        margin-bottom: calc(2.5vw + 2rem);
        text-align: center;
    }
    & #cards {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 3em;
    }
    & #infos, #map {
        border: solid 2.5px var(--primary-color);
        border-radius: 1em;
        width: calc(350px + 10vw);
        height: 30vh;
        box-shadow: 0 2px 7px #dfdfdf;


        overflow: hidden;
        display: flex; 
        flex-direction: row; 
        align-items: center;
        justify-content: center;

        font-family: serif; 
        font-size: 1.3rem; 
        line-height: 150%;

    
        & ul {
            padding: 0 6%;
        }
    }
}


/* ------------------ PAGE PRODUCTS ------------------------ */



#section-products{
    /* background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(45,36,36,1) 25%, rgba(45,36,36,1) 71%, rgba(0,0,0,1) 100%); */

    background-image: linear-gradient(to top, #000000 0%, var(--base-color) 100%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3%;

    & h2{
        color: var(--secondary2-color);
        font-size: calc(2.5vw + 1.5rem);
        font-family: serif;
        font-weight: bold;
        text-align: center;

        padding: calc(2.5vw + 3rem);
        margin: calc(2.5vw + 3rem);
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://media.istockphoto.com/id/185220255/fr/photo/grains-de-caf%C3%A9-de-la-carte-du-monde.jpg?s=2048x2048&w=is&k=20&c=Au4eqFOHjCWg_TrLUC4daMKD8USxCL4t0x24CLk_gqQ=') center/cover;
    }

    & #news-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 3%;
        margin-bottom: 5%;
        gap: 9vh;
        max-width: 1300px;
    }
    & .news-card-products {
        min-width: 250px;
        max-width: 30%;  
        height: 50vh;
        display: flex;
        flex-flow: column nowrap;
        background-color: white;
        border-radius: 25px;
    
        & .products-paragraphe {
            display: flex;
            flex-direction: column;
    
            padding: 5%;
    
            & a {
                color: var(--base-color);
                font-family: sans-serif;
                font-size: calc(1.5vw + 0.8rem);
                display: inline-block;
            }
            & p {
                margin-top: 20px;
            }
            
    
        }
        
    
    
    
    }
    /* & img {
        height: 250px;
        width: 250px;
        background: url(../../../../assets/img/134009550.png) center/cover;
        border-radius: 25px;
    } */

}






/* ------------------ PAGE 404 ------------------------ */

#section404{
    display: flex;
    height: 95vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    & h1 {
        color: var(--secondary-color);
        font-size: calc(2.5vw + 2.5rem);
        font-family: serif;
        font-weight: bold;
        margin: calc(2.5vw + 2rem);
        text-align: center;
    }
}
#background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
 
    z-index: -1;
}
 


/* ------------------ PAGE à propos ------------------------ */

#a-propos-section {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(45,36,36,1) 25%, rgba(45,36,36,1) 71%, rgba(0,0,0,1) 100%); 
    
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3%;
    & h1{
        margin: 5%;
    }
}




/* ------------------ FOOTER ------------------------ */

#footer {
    text-align: center;
    color: whitesmoke;
    background-color: var(--base-color);
    padding: 6vh 3vh;
}