/*
	Theme Name: Chakilicious
	Author: Reda CHAKI
	Author URI: chakilicious.ch
	Description: Thème pour mon site Food-Truck
	Version: 1.0
	Text Domain: chakilicious
*/


/* VOTRE CSS */

        /* head {
            display: flex;
            align-items: center;
            /* padding marge par rapport aux bords (haut) */
            /* padding: 20px; */
        
            body {
                
                background-color: #000000;
                color: #f4f1f1;
                margin:0;
                            
            }
			/* centrer l'élément */
			.wrapper{
				max-width: 1200px;
				margin:0 auto;
			}

			.site-main{
				padding-top: 3em;
				padding-bottom: 3em;
				
			}
        /*--------------------------------------------------------------------------*/
                                        /*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 40px;
        background-color: #0e0d0d; /* Fond clair pour contraster avec la section noire du dessus */
        }

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

        /* 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;


        }

        /*-------------------------------------------------------------------------*/
                /*Gestion de l'affichage dynamique sur clique de l'utilisateur
                    le clique est sur les éléments de la section défilement*/
        /*--------------------------------------------------------------------------*/

        .section-dynamique {

            width: 100%;
            height: 300px;
            background: #ee0707;



        }

         /*------------------------------------------------------------------------*/
                                    /* separation bande blanche*/
        /*------------------------------------------------------------------------*/

        .separation {
            display: flex;
            background-color: #ffffff;
            height: 20px;
        }

         /*------------------------------------------------------------------------*/
                                    /* Section localisation*/
        /*------------------------------------------------------------------------*/

          .section-localisation {

            display: flex;
            justify-content: space-between;
            justify-content: start;
            align-items: center;
            margin-left: 200px;
            
            
       
           
          }
            .div-adresse {

                display: flex;
                flex-direction: column;
                margin: 4% 3% 2% 3%;

            }

            .div-adresse h1 {

               color: #ffffff;
               font-size: xx-large;
            

            }

            .div-adresse h4 {

               color: #ffffff;
               margin: 0;

            }

            .div-map {

                display: flex;
                margin: 4% 3% 2% 3%;
            }

            .div-map img {

                width: 900px;
                height: 450px;
            }

      

      /*------------------------------------------------------------------------*/
        /*   Gestion du label contact                   */
        /*------------------------------------------------------------------------*/
		
		



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


        .styleFooter {

            display: flex;
            background-color: #ffffff;
            margin: 2% 3% 2% 3%;
            justify-content: space-between;
            height: 250px;
            /* justify-content: start; */
            /* align-items: center; */

        }

        .styleFooter h6 {

        color : #000000;
            /* justify-content: start; */
            /* align-items: center; */

        }

        /* .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;
            /* justify-content: end;
            align-items: end; */
            margin-bottom: 0%;
            /* margin: 0px 0px 0px 10px; il tient pas compte 
                de margin au niveau de la div parent */
            /* justify-content : start; */
            

        }

        .div-moyenpnt {

            /* display: flex;
            flex-direction: row;
            justify-content: end;
            align-items: end;
            margin: 0px 0px 0px 10px;
            align-items: end; */
            display: flex;
            margin-left: 10px;
            margin-top: 117%;
            justify-content: center;
            align-items: center;
            
        }

        .div-moyenpnt h6{

            margin: 0;
            font-size: larger;
            color: black;
            /* justify-content: end;
            align-items: end; */
            /*align-items: end; */
            
            
        }



        .div-img-pmt {

            /* width: 25px;
            height: 25px;
            margin: 0px 0px 0px 10px;
            display: flex;
            flex-direction: row; */
            /* justify-content: end; */
            /* align-items: end; */
            display: flex;
            justify-content: space-between;
            margin : 0;
            

        }

        .div-img-pmt img {

            width: 25px;
            height: 25px;
            margin-left: 10px;
            margin-bottom: 0%;
            

        }

        
        /* .div-gauche h2 {

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

        } */

        .div-centre {

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

        .div-droite {

            display: flex;
            flex-direction: column;
            justify-content: end;
            /*  ça répond par rapport à la page body */
            margin: 0px 10px 0px 0px;
            /*align-items : center; */
            /* margin : 0; */
            

        }

        .div-droite h6 {
            margin: 0;
            font-size: large;
            
        }

        /*Boutique */
        #primary{
            max-width:1200px;
            margin:0px auto;
        }
        /* Attention à désactiver*/
        #secondary{
            display:none;
        }

        /* gestion barre latérale de la boutique cacher*/

        #sidebar { display:none; 

        }

        .shop-category-filters {

            display: flex;
            justify-content: center;
            gap: 10px 20px;


        }

        .shop-category-filters a {

            padding: 10px 20px;
            color: #f4f1f1;
            border: 1px solid #f4f1f1;
            text-decoration: none;

        }