/* ==================================================
   LES SERRES DE BRUNO
   Design Artisan Familial
================================================== */


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

:root {

    --vert-fonce:#1d3221;
    --vert-clair:#637b46;
    --beige:#f5f1e8;
    --blanc:#ffffff;
    --texte:#2b2b2b;

    --transition:0.3s ease;

}



/* ================= GLOBAL ================= */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing:border-box;
}

body {
    font-family:
    "Montserrat",
    Arial,
    sans-serif;
    font-weight:300;
    color:var(--texte);
    margin:0;
    line-height:1.8;
}

img {
    max-width: 100%;
    height: auto;
}
.universe-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 20px;
}
.navbar-toggler {
    border-color: white;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

h1,h2,h3 {
    font-weight:500;
    color:var(--vert-fonce);
    line-height:1.2;
}

.section {
    padding:90px 0;
}

.section h2 {
    font-size:3rem;
    font-weight:400;
    margin-bottom:30px;
}



.section h2::after {
    content:"";
    display:block;
    width:70px;
    height:3px;
    background:var(--vert-clair);
    margin-top:15px;
}



a {
    text-decoration:none;
}





/* ================= NAVBAR ================= */


.navbar {

    padding:15px 0;

    transition:var(--transition);

}


.navbar.scrolled,
.navbar.navbar-fixed-green {

    background:
    var(--vert-fonce);

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

}



.navbar-brand img {

    width:60px;
    border-radius:5px;
}



.nav-link {

    color:white !important;

    font-weight:500;

    margin-left:20px;

}


.nav-link:hover {

    color:#dce8c8 !important;

}




.navbar-toggler {

    border-color:white;

}




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


.hero {


    height:100vh;

    min-height:650px;

    background-image:
    url("../images/hero.jpg");

    background-size:
    cover;

    background-position:
    center;

    position:relative;

    display:flex;

    align-items:center;

    text-align:center;

    color:white;
}


.hero-overlay {
    position:absolute;
    inset:0;
    background:
    rgba(29,50,33,.55);

}

.hero-content {
    position:relative;
    z-index:2;
}

.hero-logo {
    width:180px;
    margin-bottom:20px;
}


.hero h1 {
    font-family:
    "Cormorant Garamond",
    serif;
    font-size:5rem;
    font-weight:400;
    letter-spacing:1px;
    color:white !important;
}


.hero h2 {
    color:white;
    font-size:1.8rem;
    max-width:700px;
    margin:auto;
}

p {
    font-size:1.05rem;
    font-weight:300;
}

.hero p {

    font-size:1.2rem;

    margin:25px;

}





/* ================= BOUTONS ================= */


.btn-green {


    background:
    var(--vert-clair);

    color:white;

    padding:14px 30px;

    border-radius:30px;

    border:none;

    margin:5px;

    transition:var(--transition);

}



.btn-green:hover {


    background:
    var(--vert-fonce);

    color:white;

    transform:
    translateY(-3px);

}




.btn-outline-light {


    padding:14px 30px;

    border-radius:30px;

    margin:5px;

}





/* ================= PRESENTATION ================= */


.presentation {


    background:
    var(--beige);

}



.presentation img {


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

}




.presentation h2 {


    font-size:2.5rem;

    margin-bottom:25px;

}




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



.card-product {


    background:white;

    padding:40px 25px;

    text-align:center;

    border-radius:20px;

    height:100%;


    box-shadow:

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


    transition:
    var(--transition);


}



.card-product:hover {


    transform:
    translateY(-10px);


}



.card-product i {


    font-size:45px;

    color:
    var(--vert-clair);

    margin-bottom:20px;

}



.card-product h3 {


    font-size:1.5rem;

}





/* ================= ENGAGEMENT ================= */



.engagement {


    background:
    var(--vert-fonce);


    color:white;

    text-align:center;

    padding:80px 0;


}



.engagement h2 {


    color:white;

    margin-bottom:50px;

}



.engagement i {


    font-size:40px;

    color:
    #d7e6bd;

    margin-bottom:15px;

}




.engagement p {


    color:white;

}





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


.contact-preview {


    background:
    var(--beige);

}








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


.footer-main {
    background:var(--vert-clair);
    color:white;
    padding:70px 0 30px;
}

.footer-main h2 {
    color:white;
    font-weight:800;
    font-size:1.9rem;
    text-transform:uppercase;
    margin-bottom:25px;
}

.footer-main p {
    color:white;
    line-height:1.8;
}

.footer-main i {
    color:#d7e6bd;
    width:25px;
}

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

.footer-main a:hover {
    color:#dce8c8;
}

.footer-link {
    display:inline-block;
    margin-top:10px;
}

.footer-main hr {
    border-color:rgba(255,255,255,.3);
    margin:50px 0 30px;
}

.footer-logo {
    width:90px;
    border-radius:10px;
}



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



@media(max-width:768px){
    .hero h1 {
        font-size:2.5rem;
    }

    .hero h2 {
        font-size:1.3rem;
    }

    .hero-logo {
        width:130px;
    }

    .section {
        padding:60px 0;
    }

    .navbar {
        background:
        var(--vert-fonce);
    }
}

.image-placeholder {

    height:320px;
    background:#e8e8e8;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#777;
    font-size:1.2rem;
}


.universe-box h3 {
    color:white;
    text-align:center;
    margin-top:20px;
}


.universe-box .image-placeholder {
    height:220px;
}