/* GENERAL */
body {
    font-family: Arial, sans-serif;
}
/* NAVBAR FIX */
.custom-navbar{
    background-color: #198754 !important;
    width: 100%;
    z-index: 9999;
     padding: 1px 0;  
}

/* LOGO */
.navbar-logo{
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* TEXT */
.company-name{
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
}

/* LINKS */
.navbar-nav .nav-link{
    color: white !important;
    font-size: 1.1rem;
    font-weight: 600;
}

.navbar-nav .nav-link:hover{
    color: #d4ffd9 !important;
}

.navbar-nav .nav-link:hover{

    color: #d4ffd9 !important;
}

/* BOUTON */

.contact-btn{

    background: white;

    color: #198754 !important;

    padding: 12px 24px;

    border-radius: 10px;

    font-weight: bold;

    text-decoration: none;

    transition: 0.3s;

    border: none;
}

.contact-btn:hover{

    background: #026e14;

    color: #f8fcfa !important;
}

/* TOGGLER MOBILE */

.navbar-toggler{

    border: 2px solid white;
}

.navbar-toggler:focus{

    box-shadow: none;
}

/* ICONE MENU */

.navbar-toggler-icon{

    filter: brightness(0) invert(1);
}

/* RESPONSIVE */

@media(max-width:992px){

    .custom-navbar .container{

        padding-left: 15px;

        padding-right: 15px;
    }

    .navbar-logo{

        width: 60px;

        height: 60px;
    }

    .company-name{

        font-size: 1.1rem;
    }

    .navbar-collapse{

        background: #198754;

        padding: 20px;

        margin-top: 15px;

        border-radius: 12px;
    }

    .navbar-nav{

        gap: 0;

        text-align: left;
    }

    .navbar-nav .nav-link{

        padding: 12px 0 !important;
    }

    .contact-btn{

        display: inline-block;

        margin-top: 15px;
    }
}
/* HERO */
.hero {
    height: 90vh;
    background-size: cover;
    background-position: center;
}


/* FOOTER */
footer a:hover {
    color: #198754 !important;
}

/* WHATSAPP FLOTTANT */
.whatsapp-btn {
    position: fixed;
    bottom: 10px;
    right: 10px;

    width: 60px;
    height: 60px;

    background: #25D366;
    color: white;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 10px;

    text-decoration: none;

    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.whatsapp-btn:hover {
    color: white;
    transform: scale(1.1);
}
/* =========================
   FOOTER
========================= */

.footer-section{

    background: #111;
}

/* NEWSLETTER INPUT */

.newsletter-input{

    height: 50px;

    border-radius: 10px;

    border: none;

    padding-left: 15px;
}

.newsletter-input:focus{

    box-shadow: none;

    border: 2px solid #198754;
}

/* BOUTON NEWSLETTER */

.newsletter-btn{

    background: #198754;

    color: white;

    border: none;

    height: 50px;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s;
}

.newsletter-btn:hover{

    background: #146c43;
}

/* RESEAUX SOCIAUX */

.social-icons a{

    transition: 0.3s;
}

.social-icons a:hover{

    color: #198754 !important;

    transform: translateY(-5px);
}

/* RESPONSIVE */

@media(max-width:768px){

    .footer-section{

        text-align: center;
    }

    .newsletter-btn{

        margin-top: 10px;
    }
}
/* Le blog actualite */
.blog-hero{
    position: relative;
    height: 500px;
    overflow: hidden;
    margin-top: 60px;
    margin-bottom: 90px;
}

/* CAROUSEL EN FOND */
#heroCarousel{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}

#heroCarousel .carousel-inner,
#heroCarousel .carousel-item,
.hero-img{
    height: 100%;
}

.hero-img{
    width: 100%;
    object-fit: cover;
}

/* TEXTE AU-DESSUS */
.hero-overlay{
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    color: white;
}

/* SUPPRESSION DU FOND */
.hero-overlay p{
    background: none;
    text-shadow: 0 3px 10px rgba(0,0,0,0.8);
    font-size: 20px;
    max-width: 800px;
    margin: auto;
}

/* TEMOIGNAGES */

.testimonial-box{

    background: white;

    padding: 50px;

    border-radius: 25px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    max-width: 900px;

    margin: auto;

    text-align: center;
}

/* IMAGE */

.testimonial-image{

    width: 350px;

    height: 350px;

    object-fit: cover;

    border-radius: 20px;

    display: block;

    margin: 0 auto 25px auto;
}

/* NOM */

.testimonial-box h4{

    font-size: 30px;

    font-weight: bold;

    color: #198754;

    margin-bottom: 15px;
}

/* MESSAGE */

.testimonial-box p{

    font-size: 22px;

    line-height: 1.9;

    color: #555;
}

/* RESPONSIVE */

@media(max-width:768px){

    .testimonial-image{

        width: 100%;

        height: 320px;
    }

    .testimonial-box{

        padding: 30px;
    }

    .testimonial-box p{

        font-size: 18px;
    }
}

/* PRODUIT */
.hero{

    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ),
        url("../images/produits-bg.jpg");

    background-size: cover;

    background-position: center;

    padding: 120px 20px;

    text-align: center;

    color: white;
}

.hero h1{

    font-size: 60px;

    font-weight: bold;
}

.hero p{

    font-size: 22px;

    margin-top: 15px;
}

/* SECTION PRODUITS */

.produits-section{

    padding: 100px 0;

    background: #f4f7f2;
}

/* PRODUIT */

.produit-box{

    margin-bottom: 40px;
}

/* IMAGE */

.produit-image{

    width: 100%;

    height: 350px;

    object-fit: cover;

    border-radius: 25px;

    transition: 0.5s;

    box-shadow: 0 10px 30px rgba(161, 8, 8, 0.1);
}

.produit-image:hover{

    transform: scale(1.03);
}

/* TEXTE */

.produit-content{

    margin-top: 25px;

    padding: 0 15px;
}

.produit-content h2{

    color: #198754;

    font-size: 34px;

    font-weight: bold;

    margin-bottom: 20px;
}

.produit-content p{

    color: #555;

    line-height: 2;

    font-size: 17px;
}

/* RESPONSIVE */

@media(max-width:768px){

    .hero h1{

        font-size: 38px;
    }

    .hero p{

        font-size: 18px;
    }

    .produit-image{

        height: 280px;
    }

    .produit-content h2{

        font-size: 28px;
    }

}
/* =========================
   NAVBAR 3 ZONES ERP
========================= */
/* LOGO */
.navbar-logo{
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.company-name{
    color: white;
    font-weight: 700;
    font-size: 15px;
}

/* MENU CENTRE */
.navbar-nav.mx-auto .nav-link{
    color: white !important;
    font-weight: 500;
    padding: 6px 10px;
}

.navbar-nav.mx-auto .nav-link:hover{
    color: #ffd700 !important;
}

/* BOUTONS DROITE */
.btn-login-custom{
    background: #f8f8f6;
    color: black !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
}

.btn-login-custom:hover{
    background: white;
}

.btn-danger-custom{
    background: #dc3545;
    color: white !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
}

.btn-danger-custom:hover{
    background: #b02a37;
}

/* MOBILE FIX */
@media(max-width:992px){

    .navbar-nav{
        text-align: center;
        background: #0b3d2e;
        padding: 10px;
        border-radius: 10px;
    }

    .ms-lg-auto{
        margin-left: 0 !important;
    }
}

/* Bouton panier */
.btn-panier{
    width: 80px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #c95d05;
    border-radius: 8px;

    color: #613007;
    background: #fff;

    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-panier:hover{
    background: #8aa397;
    color: #fff;
}

.btn-panier i{
    font-size: 50px;
}


/* Bouton commander */
.btn-commande{
    background-color: #ff9800;
    border: 1px solid #ff9800;

    color: white !important;

    font-size: 18px;
    font-weight: 600;

    padding: 8px 15px;
    border-radius: 8px;

    text-decoration: none !important;

    transition: all 0.3s ease;
}

.btn-commande:hover{
    background-color: #e68900;
    border-color: #e68900;

    color: white !important;
    text-decoration: none !important;
}

/* Prix */

.product-name{
    font-weight: 800;
    font-size: 20px;
    color: #023b05; 
}

.product-price{
    font-weight: 900;
    font-size: 20px;
    color: #0c0102; 
}