/* head {
            display: flex;
            align-items: center;
            /* padding marge par rapport aux bords (haut) */
            /* padding: 20px; */
        
            body {
                
                margin:0;
                            
            }
        
        /*--------------------------------------------------------------------------*/
                                        /*Style Header*/
        /*--------------------------------------------------------------------------*/

        .styleHeader {

            /* border-bottom: 1px solid #bb1313; */
            background-color: #000000;
        }

            
        .div-header {

              max-width: auto;
              margin: 0 50px;
              display: flex;
              justify-content: space-between;
              gap: auto;
              place-items: center; /* Centre à la fois verticalement et horizontalement */
              
        }

        .div-logo a {
            text-decoration: none;
            color: #beb7b7;
            

        }

        .div-nav {
            display: flex;
            align-items: center;

        }

        .nav-header {

            display: flex;
            /* justify-content: space-between; */
            align-items: center;
            gap: 18px;

        }

        .nav-header a {
            display: flex;
            text-decoration: none;
            color: #f2f6f4ed;
            font-size: 20px;
           
        }
        
        .ul-nav-header {

            display: flex;
            /* déjà par défault allignement horizontal du flex */
            flex-direction: row; 
            list-style: none;
            /* margin: 0;
            padding: 0; */
            /* le gap espace les menus de 18px */
            gap: 18px;
            align-items: center;

        }

        .nav-header {
            display: flex;
            /* équivalent à margin : 36px 0 */
            margin: 36px 0 36px 0;

        }

        .nav-header a:hover {
            color: #ee0707;
        }

        .div-logolivraison {

            display: flex;
            align-items: center;
 
        }

        .div-logolivraison a img {

            width: 300px;
            height: 300px;
            align-items: center;
            /* object-fit: cover; */
            width: 300px;  /* Testez avec une taille très petite pour voir le changement */
            max-width: 100%;
            height: auto;
           
        }

        /*--------------------------------------------------------------------------*/
                            /*Style section bouton à Emporter en Livraison*/
        /*--------------------------------------------------------------------------*/

        .btn-Livraison-Emporter {

                display: flex;
                justify-content: center; /* Centre les boutons horizontalement */
                align-items: center;
                gap: 30px;               /* Espace entre les deux grands boutons */
                padding: 60px 20px;      /* Espace généreux en haut et en bas */
                background-color: #000000; /* Fond noir pour la section */

        }

        .btn-Commander {

            background-color: #000000; /* Fond noir du bouton */
            color: #ffffff;           /* Texte blanc */
            font-size: 40px;          /* Taille de police demandée (au moins 40px) */
            font-family: sans-serif;  /* Style de police propre */
            font-weight: bold;        /* Rend le grand texte plus lisible */
            
            /* Coins arrondis et bordure */
            border-radius: 15px;      /* Ajustez cette valeur pour arrondir plus ou moins les coins */
            border: 2px solid #f4f1f1; /* Une fine bordure blanche pour que le bouton noir soit visible sur le fond noir */
            
            /* Espacement interne pour que le bouton respire autour du texte */
            padding: 15px 35px;
            cursor: pointer;
            transition: all 0.2s ease; /* Animation fluide lors du survol */

        }

        .btn-Commander:hover {
                background-color: #ffffff; /* Inverse les couleurs au survol */
                color: #000000;
        }

        /*--------------------------------------------------------------------------*/
        /* Gestion du défilement sur section défilement = "section-defilement" */
        /*--------------------------------------------------------------------------*/

        

        /* 1. Style de la section globale */
        .section-defilement {
        padding: 40px 20px;
        background-color: #050505; /* Fond clair pour contraster avec la section noire du dessus */
        }

        .section-defilement h2 {
        text-align: center;
        margin-bottom: 30px;
        font-family: sans-serif;
        }

        /* 2. Le conteneur magique qui gère le défilement horizontal */
        .conteneur-defilement {
        display: flex;
        gap: 20px;
        overflow-x: auto;            /* Active le défilement horizontal si le contenu dépasse */
        scroll-snap-type: x mandatory; /* Force l'image à se caler proprement lors du défilement */
        padding-bottom: 15px;        /* Espace pour ne pas coller à la barre de défilement */
        }

        /* 3. Style de chaque carte (Image + Textes) */
        .card-galerie {
        flex: 0 0 300px;             /* Empêche les cartes de rétrécir, elles feront fixement 300px de large */
        scroll-snap-align: start;    /* Point d'accroche pour le défilement automatique */
        background: rgb(6, 3, 3);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Légère ombre pour le style */
        font-family: sans-serif;
        color: #ffffff;
        }

        /* 4. Gestion de la taille des images (pour faire le lien avec votre première question !) */
        .card-galerie img {
        width: 100%;
        height: 200px;
        object-fit: cover;           /* Recadre proprement l'image sans la déformer */
        display: block;
        }

        /* Style des textes sous l'image */
        .card-galerie h3 {
        margin: 15px;
        font-size: 18px;
        }

        .card-galerie p {
        margin: 0 15px 15px 15px;
        font-size: 14px;
        color: #666;
        }

        .conteneur-defilement::-webkit-scrollbar {
        display: none; /* Masque la barre sur Chrome, Safari et Opera */
        }

        .conteneur-defilement {
        -ms-overflow-style: none;  /* Masque sur IE/Edge */
        scrollbar-width: none;  /* Masque sur Firefox */
        }

        .EnConstruction {

           display: block;
           margin: 0 auto;


        }

        /*------------------------------------------------------------------------*/
           /*NB*/ /*   img {  max-width : 100%     } 
            s applique à toutes les images dans le body                           */
        /*------------------------------------------------------------------------*/
        /*------------------------------------------------------------------------*/
                                    /* Style Footer*/
        /*------------------------------------------------------------------------*/


        .styleFooter {

            display: flex;
            background-color: #ffffff;
           

        }

        .div-container {

           display: flex;
           justify-content: space-between;
           /* align-items: center; Pour un alignement vertical au milieu */
           width: 100%; /* Ou une largeur fixe en pixels */
           
        }

        .div-gauche {

            display: flex;
            flex-direction: column;
            /* flex-wrap: wrap; */
            width: auto;
            margin: 80px auto auto 80px;

        }

        
        .div-gauche h2 {

            display: flex;
            /* max-width: 100px; */

        }

        .div-centre {

            display: flex;
            align-items: center;
            
        }

        .div-droite {

            /* display: flex; */
            margin: 80px 80px auto auto;

        }

        .div-moyenpnt {

            display: flex;
            gap: 10px;
            margin: auto auto 20px auto;

        }

        .div-moyenpnt img {

            width: 25px;
            height: 25px;
           

        }