body {
                font-family: Arial, Helvetica, sans-serif;
                background: #f2f2f2;
                margin: 0;
                padding: 0;
            }

            /* HEADER GLOBAL (IMAGE NAV + HERO) */
            .header-global{
                background-image: url("../images/header3.jpg");
                background-size: cover;
                background-position: center;
                color: white;
                padding-bottom: 80px;
                position: relative;
            }

            /* OVERLAY SOMBRE POUR LIRE LE TEXTE */
            .header-global::before{
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(0,0,0,0.45);
            }

            .header-global > *{
                position: relative;
                z-index: 2;
            }

            /* NAVBAR */
            

            /* ...existing code... */
            .navbar .nav-link,
            .navbar .nav-item form .logout-btn {
                display: block;
                padding: .5rem 1rem;
                color: #fff !important;
                background: transparent;
                border: none;
                cursor: pointer;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 500;
                line-height: 1;
                text-decoration: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }

            .navbar .nav-item form {
                display: inline-block; /* garde l'item dans la ligne des nav */
                margin: 0;
                padding: 0;
            }

            .navbar .nav-item form .logout-btn:focus,
            .navbar .nav-item form .logout-btn:active {
                outline: none;
                box-shadow: none;
            }
            /* ...existing code... */

            .nav-custom {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }


            /* liens du menu */    
            #navMenu{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                font-size: bold;
                letter-spacing: 2px;
                align-items: center;
            }

            /* ICÔNE PANIER */
            .cart-icon{
                position: relative;
                font-size: 24px;
                color: white;
                margin-left: 15px;
                text-decoration: none;
            }

            .cart-icon i{
                font-size: 24px;
            }

            /* petit rond compteur */
            .cart-count{
                position: absolute;
                top: -8px;
                right: -10px;
                background: #0c5a2cd0;
                color: white;
                font-size: 12px;
                font-weight: bold;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }


            /*Dispositions du conteneur du panier */
            .panier-container{
                width: 70%;
                margin-left: 25px;
                background: #0c5a2cd0;
                padding: 10px;
                border-radius: 15px;
                box-shadow: 0 15px 35px rgba(0,0,0,0.08);
            }

            /* Le rappel */
            .rappel-panier{
                position: absolute;
                top: 42px;
                right: -65px;
                background: #0c5a2cd0;
                color: white;
                padding: 8px 14px;
                border-radius: 20px;
                font-size: 13px;
                white-space: nowrap;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);

                opacity: 0;
                transform: translateY(-8px);
                animation: showAndHide 3.2s ease-in-out forwards;
            }

            /* Petit triangle */
            .rappel-panier::before{
                content: "";
                position: absolute;
                top: -6px;
                left: 20px;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid #0c5a2cd0;
            }

            /* Animation complète */
            @keyframes showAndHide{
                0%   {opacity:0; transform:translateY(-8px);}
                10%  {opacity:1; transform:translateY(0);}
                80%  {opacity:1;}
                100% {opacity:0; transform:translateY(-8px);}
            }            
            


            .logo {
                font-size: 40px;
                font-weight: bold;
                font-family: 'Montserrat','sans-serif';
                font-style: italic;
                display: inline-block;
                animation: logoIntro 1.2s ease-out forwards, logoGlow 3s ease-in-out infinite;
        
            }

            /* ANIMATION LOGO Animation d'entrée */
            @keyframes logoIntro {
                0%{
                    transform: translateY(-20px);
                    opacity: 0;
                }
                100%{
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            /* Effet glow subtil en boucle */
            @keyframes logoGlow {
                0%,100%{
                    text-shadow: 0 0 0px rgba(255,255,255,0);
                }
                50%{
                    text-shadow: 0 0 12px rgba(255,255,255,0.6);
                }
            }

            .logo:hover{
                transform: scale(1.05);
                transition: 0.3s;
            }


            /* HERO */
            .hero{
                text-align: center;
                margin-top: 90px;
            }

            .hero h1{
                font-size: 46px;
                font-weight: bold;
                font-family: 'Montserrat','sans-serif';
                font-style: normal;
                letter-spacing: -1px;
            }

            .hero p{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                font-size: 17px;
                font-style: normal;
                margin-top: 10px;
                letter-spacing: 2.5px;
            }

            .hero .btn{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                margin-top: 25px;
                background: #0c5a2cd0;
                border-radius: 30px;
                padding: 12px 30px;
                border: none;
            }

            /* TITRE SECTION */
            .section-title{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                text-align: center;
                font-weight: bold;
                font-size: 28px;
                position: relative;
                margin: 70px 0 50px;
            }

            /* la ligne verte */
            .section-title::before{
                content: "";
                position: absolute;
                bottom: -18px;
                left: 50%;
                transform: translateX(-50%);
                width: 250px;
                height: 3px;
                background: #1faa59;
                border-radius: 5px;
            }

            /* le petit rond au milieu */
            .section-title::after{
                content: "";
                position: absolute;
                bottom: -23px;
                left: 50%;
                transform: translateX(-50%);
                width: 12px;
                height: 12px;
                background: #0c5a2cd0;
                border-radius: 50%;
            }

            /* CARTES PRODUITS */            

            .card-product{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;


                background: white;
                border-radius: 16px;
                box-shadow: 0 8px 20px rgba(0,0,0,0.08);
                overflow: hidden;
                text-align: center;
                transition: 0.3s;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
            }


            .card-product h6{
                font-size: 14px;
            }

            .card-product:hover{
                transform: translateY(-5px);
            }


            .card-product img{
                height: 200px;
                width: 100%;
                object-fit: contain;   /* affiche toute l’image */
                background: #fff;      /* fond blanc autour */
                padding: 10px;
                /*object-fit: cover;*/
                border-radius: 12px 12px 0 0;
            }


            .price{
                font-weight: bold;
                font-size: 14px;
                margin: 10px 0;
            }

            .btn-sm{
                font-size: 12px;
                padding: 6px 10px;
            }

            .avis-card{
                
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 220px; /* hauteur identique pour tous */
            }





            /* FOOTER */
            .footer{
                background: white;
                padding: 40px 0;
                margin-top: 70px;
            }

            /* LIGNE HAUTE */
            .footer-top{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            /* LIGNE BASSE 
            .footer-bottom{
                margin-top: 15px;
            }*/

            .footer-bottom p{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                margin: 5px 0;
                text-align: center;
                padding: 5px ;
            }

            /* ICÔNES */
            .footer-socials{
                display: flex;
                gap: 15px;
            }

            .social{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 18px;
                text-decoration: none;
            }

            .fb{ background: #1877f2; }
            .ig{ background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf); }
            .tk{ background: #000; }
            .social.wa { background: #25D366; color: white; }

            .social:hover{
                transform: scale(1.1);
                transition: 0.3s;
            }
            


            /* LIENS LÉGAUX */
            .footer-legal {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                margin-top: 15px;
                text-align: center;
                font-size: 14px;
            }

            .footer-legal a {
                color: #000;
                text-decoration: none;
                margin: 0 8px;
            }

            .footer-legal a:hover {
                text-decoration: underline;
            }

            .footer-legal span {
                color: #a7a5a5;
            }

            .footer-copyright{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif , Times, serif;
                text-align: center;
                margin-top: 5px;
                padding: 10px ;
                
            }
            

            .footer-bottom::before,
            .footer-legal::before{
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                background: #e5e5e5;
                margin: 0 auto 15px;
            }

            /*Détail_produit.html les images*/
            .detail-img-wrapper{
                background: #f8f8f8;
                border-radius: 18px;
                padding: 25px;
            }


            .detail-img{
                width: 100%;
                height: 420px;          
                object-fit: contain;    
                background: #f8f8f8;   
                border-radius: 18px;
                box-shadow: 0 15px 35px rgba(0,0,0,0.15);
                padding: 20px;          
            }

            /* Lightbox sur image pour le zoomer */
            .image-modal{
                display: none;
                position: fixed;
                z-index: 9999;
                padding: 40px;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.9);
                justify-content: center;
                align-items: center;
            }

            .image-modal img{
                max-width: 90%;
                max-height: 90%;
                border-radius: 15px;
                box-shadow: 0 20px 50px rgba(0,0,0,0.5);
                animation: zoomIn 0.3s ease;
            }

            @keyframes zoomIn{
                from{transform: scale(0.7); opacity: 0;}
                to{transform: scale(1); opacity: 1;}
            }

            .zoomable{
                cursor: zoom-in;
            }

            /*section avis */
            .avis-section{
                padding-top: 50px;    
                border-top: 1px solid #e5e5e5;  
            }

            /*SECTION NOUS FAIRE CONFIANCE*/
            #confiance .row.list{
                padding-bottom: 30px;
            }

            
            .card-confiance {
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 8px 20px rgba(0,0,0,0.08);
                transition: transform 0.3s, box-shadow 0.3s;
            }
            .card-confiance:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 30px rgba(0,0,0,0.12);
            }
            .card-confiance i {
                margin-bottom: 10px;
            }
            .section-title {
                font-weight: bold;
                margin-bottom: 30px;
            }



                /* ================= MOBILE RESPONSIVE ================= */
                @media (max-width: 768px){

                    .logo{
                        font-size: 26px;
                    }

                    .nav-links{
                        width: 100%;
                        justify-content: center;
                        text-align: center;
                    }
                    
                    .navbar-nav{
                        width: 100%;
                        align-items: center;
                        text-align: center;
                    }


                    /* Ajustements mobile pour aligner / homogénéiser le bouton Déconnexion */
                    /* centre tous les items du nav (y compris le form/logout) */
                    .navbar-nav .nav-item {
                        text-align: center;
                    }

                    /* forcer le form à occuper sa ligne pour centrage propre */
                    .navbar .nav-item form {
                        display: block;
                        margin: .25rem 0;
                    }

                    /* bouton logout : même police, taille et espacement que les liens */
                    .navbar .nav-item form .logout-btn {
                        display: inline-block;
                        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                        font-size: 1rem;
                        font-weight: 500;
                        letter-spacing: 2px;
                        padding: .5rem 1rem;
                        color: #fff !important;
                        background: transparent;
                        border: none;
                        text-decoration: none;
                        vertical-align: middle;
                    }
                


                    .btn-whatsapp{
                        display: inline-block;
                        margin-top: 10px;
                    }

                    .hero{
                        margin-top: 40px;
                        padding: 0 15px;
                    }

                    .hero h1{
                        font-size: 28px;
                    }

                    .hero p{
                        font-size: 16px;
                        letter-spacing: 1px;
                    }

                    .card-product img{
                        height: 180px;
                    }

                    .footer-top{
                        flex-direction: column;
                        gap: 20px;
                        text-align: center;
                    }
                

                    /* ===== VERSION MOBILE PANIER =====*/
                    .table-panier thead {
                        display: none;
                    }

                    .table-panier,
                    .table-panier tbody,
                    .table-panier tr,
                    .table-panier td {
                        display: block;
                        width: 100%;
                    }

                    .table-panier tr {
                        background: #fff;
                        margin-bottom: 15px;
                        padding: 15px;
                        border-radius: 10px;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                    }

                    .table-panier td {
                        text-align: left !important;
                        padding: 8px 0;
                        border: none;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .table-panier td::before {
                        content: attr(data-label);
                        font-weight: 600;
                        color: #555;
                    }
                

                    /* COMMENTAIRES MOBILE OPTIMISÉ */
                    .comment-card{
                        padding: 12px !important;
                        border-radius: 10px;
                        justify-content: space-between;
                    
                    }

                    .comment-card h6{
                        font-size: 14px;
                        margin-bottom: 4px;
                    }

                    .comment-card .stars{
                        font-size: 13px;
                        margin-bottom: 6px;
                    }

                    .comment-card p{
                        font-size: 13px;
                        line-height: 1.4;
                        margin: 0;
                    }

                    .detail-img{
                        max-height: 260px;
                    }

                    .navbar-nav{
                        width: 100%;
                        justify-content: center;  /* centre les liens */
                        text-align: center;
                    }

                
                }


            /*Style pour le popup de rappel de valider sa commande */
            .popup-panier{
                position: fixed;
                bottom: 25px;
                left: 50%;
                transform: translateX(-50%);
                background: #111827;
                color: white;
                padding: 14px 28px;
                border-radius: 30px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.2);
                font-size: 15px;
                z-index: 2000;
                animation: fadein 2s forwards;
                pointer-events: none; /*pour pas bloquer les click*/
            }

            @keyframes fadein{
                0%{opacity:0; transform: translate(-50%, 20px);}
                10%{opacity:1; transform: translate(-50%, 0);}
                85%{opacity:1;}
                100%{opacity:0; transform: translate(-50%, 20px);}
            }


            /*Style pour le popup de validtion de commande */
            .popup-message{
                position: fixed;
                top: 25px;
                right: 25px;
                background: #0c5a2cd0;
                color: rgb(214, 211, 211);
                padding: 16px 28px;
                font-size: large;
                border-radius: 10px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.15);
                font-weight: 500;
                z-index: 2000;
                animation: slideFade 7s forwards;
                pointer-events: none; /*pour pas bloquer les click*/
            }

            @keyframes slideFade{
                0%{opacity:0; transform: translateY(-20px);}
                10%{opacity:1; transform: translateY(0);}
                85%{opacity:1;}
                100%{opacity:0; transform: translateY(-20px);}
            }