/* =========================================
   MIEL-DE-SOL
   Design Premium Nature & Miel
   CSS Version 1.0
========================================= */


/* ==========================
   RESET GENERAL
========================== */

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


html {
    scroll-behavior:smooth;
}


body {

    font-family:'Poppins', sans-serif;
    background:#fffaf0;
    color:#3b2a1a;
    line-height:1.7;

}



img {

    max-width:100%;
    display:block;

}


a {

    text-decoration:none;
    color:inherit;

}


ul {

    list-style:none;

}



/* ==========================
   VARIABLES COULEURS
========================== */


:root {


    --miel:#e6a817;

    --miel-clair:#ffd86b;

    --or:#c88919;

    --bois:#5b3a1c;

    --nature:#6f8f3d;

    --creme:#fffaf0;

    --blanc:#ffffff;

    --ombre:
    0 15px 40px rgba(0,0,0,0.12);


}





/* ==========================
   CONTAINER
========================== */


.container {

    width:90%;
    max-width:1200px;
    margin:auto;

}




/* ==========================
   HEADER
========================== */


.header {

    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:1000;

}



.navbar {

    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 5%;

    background:
    rgba(255,250,240,0.85);

    backdrop-filter:blur(10px);

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.logo {

    font-size:28px;
    font-weight:700;

    color:var(--bois);

}



.menu {

    display:flex;
    gap:35px;

}



.menu a {

    font-weight:500;
    transition:.3s;

}



.menu a:hover {

    color:var(--miel);

}



.menu-toggle {

    display:none;

    font-size:28px;

    background:none;
    border:0;

}



/* ==========================
   HERO
========================== */


.hero {


    height:100vh;

    background:

    url('../images/hero.jpg')

    center/cover no-repeat;


    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;


}



.hero-overlay {


    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(0,0,0,.45),

    rgba(0,0,0,.25)

    );


}



.hero-content {


    position:relative;

    text-align:center;

    color:white;

    max-width:800px;

    animation:fadeUp 1.5s;


}



.hero h1 {


    font-size:60px;

    line-height:1.2;

    font-weight:700;

    margin-bottom:20px;


}



.hero p {


    font-size:22px;

    margin-bottom:35px;

}



/* ==========================
   BUTTONS
========================== */


.btn {


    display:inline-block;

    background:

    var(--miel);


    color:white;

    padding:

    15px 35px;


    border-radius:50px;


    font-weight:600;


    transition:.4s;


}



.btn:hover {


    background:var(--or);

    transform:translateY(-5px);

    box-shadow:var(--ombre);


}




.whatsapp {


    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;


    margin-top:20px;

    padding:12px 25px;


    border-radius:30px;


    background:#25D366;

    color:white;


    transition:.3s;


}



.whatsapp:hover {


    transform:scale(1.05);

}





/* ==========================
   SECTIONS
========================== */


.section {


    padding:100px 0;

}



.section h2 {


    text-align:center;

    font-size:40px;

    color:var(--bois);

    margin-bottom:60px;


}



.section h2::after {


    content:"";

    width:70px;

    height:4px;

    background:var(--miel);

    display:block;

    margin:15px auto;

    border-radius:5px;


}




/* ==========================
   HISTOIRE
========================== */


.grid {


    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:50px;

    align-items:center;


}



.grid img {


    border-radius:20px;

    box-shadow:var(--ombre);

}





/* ==========================
   PRODUITS
========================== */


.produits {


    background:#fff5dc;


}



.cards {


    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;


}




.card {


    background:white;

    border-radius:25px;

    padding:25px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


    transition:.4s;


}



.card:hover {


    transform:translateY(-12px);

    box-shadow:var(--ombre);


}




.card img {


    height:250px;

    width:100%;

    object-fit:cover;


    border-radius:20px;

    margin-bottom:20px;


}




.card h3 {


    color:var(--bois);

    font-size:24px;

}



.card strong {


    display:block;

    margin-top:15px;

    font-size:22px;

    color:var(--miel);


}




/* ==========================
   SAVOIR FAIRE
========================== */


.savoir {


    background:

    linear-gradient(

    135deg,

    #f8e8b0,

    #fffaf0

    );


}



.features {


    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

    text-align:center;


}



.features div {


    background:white;

    padding:40px 20px;

    border-radius:25px;


    font-size:45px;


    box-shadow:var(--ombre);


}



.features h3 {


    font-size:20px;

    margin-top:15px;

}





/* ==========================
   GALERIE
========================== */


.gallery {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:20px;


}



.gallery img {


    height:250px;

    width:100%;


    object-fit:cover;


    border-radius:20px;


    transition:.4s;


}



.gallery img:hover {


    transform:scale(1.05);


}





/* ==========================
   CONTACT
========================== */


.contact {


    text-align:center;


    background:#5b3a1c;

    color:white;


}



.contact h2 {


    color:white;

}




/* ==========================
   FOOTER
========================== */


footer {


    background:#3b2410;

    color:white;

    text-align:center;

    padding:25px;


}





/* ==========================
   ANIMATIONS
========================== */


@keyframes fadeUp {


from {

    opacity:0;

    transform:translateY(40px);

}


to {


    opacity:1;

    transform:translateY(0);

}


}





/* ==========================
   RESPONSIVE TABLETTE
========================== */


@media(max-width:900px){


.menu {

display:none;

}



.menu-toggle {

display:block;

}



.cards {


grid-template-columns:

repeat(2,1fr);


}



.features {


grid-template-columns:

1fr;


}



.gallery {


grid-template-columns:

repeat(2,1fr);


}



.hero h1 {


font-size:42px;


}



.grid {


grid-template-columns:1fr;


}



}






/* ==========================
   RESPONSIVE MOBILE
========================== */


@media(max-width:600px){


.hero {


height:90vh;


}



.hero h1 {


font-size:32px;


}



.hero p {


font-size:17px;


}



.cards {


grid-template-columns:1fr;


}



.gallery {


grid-template-columns:1fr;


}



.section {


padding:70px 0;


}



.section h2 {


font-size:30px;


}

/* Animation JS */

.section,
.card,
.features div,
.gallery img {

opacity:0;

transform:translateY(40px);

transition:0.8s ease;

}


.show {

opacity:1;

transform:translateY(0);

}



/* Header après scroll */

.header.scrolled .navbar {


background:white;

box-shadow:0 5px 25px rgba(0,0,0,.15);


}



/* Menu mobile */


.menu.active {


display:flex;

flex-direction:column;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

padding:30px;

text-align:center;


}




/* Retour haut */


.back-top {


position:fixed;

right:25px;

bottom:25px;


width:45px;

height:45px;


border-radius:50%;

border:none;


background:#e6a817;

color:white;


font-size:25px;


cursor:pointer;


opacity:0;

visibility:hidden;


transition:.4s;


z-index:999;


}



.back-top.visible {


opacity:1;

visibility:visible;


}



/* Lightbox */


.lightbox {


position:fixed;

inset:0;


background:rgba(0,0,0,.85);


display:flex;

align-items:center;

justify-content:center;


z-index:2000;


}



.lightbox img {


max-width:90%;

max-height:90%;


border-radius:20px;


}



.lightbox .close {


position:absolute;

top:30px;

right:40px;


color:white;

font-size:50px;

cursor:pointer;


}

}