@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');

/*debut style index.php*/
#index{
  width: 100% !important;
  margin:0!important;
  padding: 0px!important;
  overflow-x: hidden!important;
}
header{
  font-size: 23px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 23px!important;
}
.v2{
  font-size: 30px!important;
  color: red;
}


.panier{
  display: inline-block;
  position: absolute;
  top: 5px!important;
  right: 70px;
  /* margin-left: 1200px!important;*/
  font-size: 23px!important;
}

.num_panier{
  width: 10px;
  background: red !important;
  position: relative!important;
  bottom: 13px !important;
  right: 15px !important;
  color : white !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
  border-radius: 8px !important;    
}
#index .container{
  width: 100% !important;
  height: auto !important;
  margin: auto! important;
}
.text-index{
  background: rgb(161,5,109);
  position: relative;
  bottom: 220px;
  left: 48%;
}
/*
#index .champ0{
  width: 230px!important;
  height: 40px!important;
}
#index .champ2{
  width: 350px!important;
  height: 40px!important;
  margin-left: 50px;
}
*/
 #index .panier1{
  background: #670505 !important;
}

/*.imgProduit{
  width: 160px !important;
  height: 160px !important;
} 
*/

.decouvrir{
  font-size: 25px;
}

.cardA{
 /* width: 360px!important;*/
  height: 430px!important;
}
.cardB{
  /*width: 450px!important;*/
  height: 450px!important;
}
#index .container2{
  width: 1000px !important;
  height: auto !important;
  margin: auto !important;
  padding-bottom: 10px !important;
  padding-left: 8px !important;
}
/*
.section3{
    height: 300px;
    background: #80868a;
    opacity: 0.2;
}
.section4{
    height: 500px;
    background: #80868a;
    opacity: 0.8;
}
#index .img0{
  width: 310px !important;
  height: 350px !important;
}

#index .image{
  width: 80px;
  height: 80px;
}

.panier1{
  width: 260px !important;
  height: 40px!important;
}
*/
#index .paiement1{  
  display: inline-block;
  margin-bottom: 50px;
  margin-left: 39%!important;
  position: absolute; 
  z-index: 2;
}
/*fn style index.php*/

/*debut style footer*/

footer{
    
  width: 100%!important;
  font-size: 20px!important;
  position: relative!important;
  bottom: 0px!important;
  /*fin style   footer*/ 
}

/*fin style footer*/

/*debut style avantfooter*/
.section-bas{
  height: 380px!important;
}
.fleche_retour{
    width: 100px !important;
    height: 90px!important;
    text-align: right!important;
}

/*fin style avantfooter*/

@media screen and (max-width:767.98px){
body{
  font-size: 14px;
  margin: auto;
    }
    h1{
      font-size: 21px;
    }
  .container{
    width: 100%;
  }
  
  header{
  font-size: 16px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 16px!important;
}
.v2{
  font-size: 26px!important;
  color: red;
}
.panier{
  display: inline-block;
  position: absolute;
  top: 2px!important;
  right: 70px;
  margin-top: 15px;
  /* margin-left: 1200px!important;*/
  font-size: 16px!important;
}

.num_panier{
  width: 10px;
  background: red !important;
  position: relative!important;
  bottom: 13px !important;
  right: 15px !important;
  color : white !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
  border-radius: 8px !important;    
}
#index .container{
  width: 100% !important;
  height: auto !important;
  margin: auto! important;
}
/*.text-index{
  background: rgb(161,5,109);
  position: relative;
  bottom: 220px;
  left: 48%;
}
#index .champ0{
  max-width: 230px!important;
  height: 30px!important;
}
#index .champ2{
  width: 350px!important;
  height: 40px!important;
  margin-left: 50px;
} 

 #index .panier1{
  background: #670505 !important;
}

.imgProduit{
  width: 380px !important;
  height: 380px !important;
}
*/
.decouvrir{
  font-size: 25px;
}

 #index h4{
    font-size: 17px;
    font-weight: bold;
}
#index h6{
  font-size: 16px;   
  }
.cardA{
  /*width: 320px!important;*/
  height: 480px!important;
 
}
.cardB{
  
  /*width: 360px!important;*/
  height: 490px!important;
  
}
/*#index .container2{
  width: 1000px !important;
  height: auto !important;
  margin: auto !important;
  padding-bottom: 10px !important;
  padding-left: 8px !important;
}

.section3{
  height: 300px;
  background: #80868a;
  opacity: 0.2;
}
.section4{
  height: 500px;
  background: #80868a;
  opacity: 0.8;
}
#index .img0{
  width: 310px !important;
  height: 350px !important;
}
#index .image{
  width: 80px;
  height: 80px;
}
*/

#index .paiement1{  
    display: inline-block;
    margin-bottom: 50px;
    margin-left: 39%!important;
    position: absolute; 
    z-index: 2;
}
}


@media screen and  (min-device-width:768px) and (max-device-width:1024px) {

  body{
  font-size: 14px;
  margin: auto;
    }
    h1{
      font-size: 21px;
    }
    #index h4{
      font-size: 17px;
      font-weight: bold;
    }
     #index h6{
      font-size: 16px;
      
    }
  .container{
    width: 100%;
  }

  header{
  font-size: 16px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 16px!important;
}
.v2{
  font-size: 26px!important;
  color: red;
}
.panier{
  display: inline-block;
    position: absolute;
    top: 2px!important;
    right: 70px;
    margin-top: 15px;
  /* margin-left: 1200px!important;*/
    font-size: 16px!important;
}

.num_panier{
  width: 10px;
    background: red !important;
    position: relative!important;
    bottom: 13px !important;
    right: 15px !important;
    color : white !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
    border-radius: 8px !important;    
}
#index .container{
  width: 100% !important;
  height: auto !important;
  margin: auto! important;
}
/*.text-index{
  background: rgb(161,5,109);
  position: relative;
  bottom: 220px;
  left: 48%;
}
 
 #index .panier1{
  background: #670505 !important;
}
*/

.decouvrir{
  font-size: 25px;
}

.cardA{
 /* width: 320px!important;*/
  height: 370px!important;
 
}
.cardB{
  /*width: 360px!important;*/
  height: 490px!important;
  
}

/*#index .container2{
  width: 1000px !important;
  height: auto !important;
  margin: auto !important;
  padding-bottom: 10px !important;
  padding-left: 8px !important;
}

.section3{
  height: 300px;
  background: #80868a;
  opacity: 0.2;
}
.section4{
    height: 500px;
    background: #80868a;
    opacity: 0.8;
}
#index .img0{
  width: 310px !important;
  height: 350px !important;
}
#index .image{
  width: 80px;
  height: 80px;
}
.panier1{
  width: 260px !important;
  height: 40px!important;
}*/

#index .paiement1{  
    display: inline-block;
    margin-bottom: 50px;
    margin-left: 39%!important;
    position: absolute; 
    z-index: 2;
}
}

/*debut style connexion.php*/
header{
  font-size: 23px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 23px!important;
}
.v2{
  font-size: 30px!important;
  color: red;
}


.panier{
  display: inline-block;
    position: absolute;
    top: 5px!important;
    right: 70px;
  /* margin-left: 1200px!important;*/
    font-size: 23px!important;
}

.num_panier{
  width: 10px;
    background: red !important;
    position: relative!important;
    bottom: 13px !important;
    right: 15px !important;
    color : white !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    border-radius: 8px !important;    
}
#connexion{
  overflow-x: hidden;
  padding:  0px!important;
  margin: 0px ! important;
}
#connexion .form{
  height: auto!important; 
  width: 450px; 
  margin: auto;
  padding: 80px; 
  box-shadow: 2px 2px 12px; 
  font-size: 19px!important;
}
#connexion .form1{
  height: 500px!important; 
  width: 450px; 
  margin: auto;
  padding: 80px; 
  box-shadow: 2px 2px 12px; 
  font-size: 20px!important;
  background: white!important;
}

.secform{
  height: 800px;
}
#connexion p{
  font-size: 22px!important;
  text-align: center !important;
  font-weight: bold !important;
  color: red !important;
}

#connexion .paiement1{  
  display: inline-block;
  margin-bottom: 50px;
  margin-left: 39%!important;
  position: absolute; 
  z-index: 2;
}
footer{ 
  width: 100%!important;
  font-size: 20px!important;
  position: relative!important;
  bottom: 0px!important;
  
}
footer p{
  color: white !important;
}
@media screen and (max-width:767.98px){
  body{
  font-size: 14px;
  margin: auto;
    }
    h1{
      font-size: 21px;
    }
  .container{
    width: 100%;
  }
  
  header{
  font-size: 16px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 16px!important;
}
.v2{
  font-size: 26px!important;
  color: red;
}

.panier{
  display: inline-block;
    position: absolute;
    top: 2px!important;
    right: 70px;
    margin-top: 15px;
  /* margin-left: 1200px!important;*/
    font-size: 16px!important;
}

.num_panier{
  width: 10px;
  background: red !important;
  position: relative!important;
  bottom: 13px !important;
  right: 15px !important;
  color : white !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
  border-radius: 8px !important;    
}
#connexion{
  overflow-x: hidden;
  padding:  0px!important;
  margin: 0px ! important;
}
#connexion .form{
  height: auto!important; 
  width: 90%;  
  margin: auto;
  box-shadow: 2px 2px 12px; 
  font-size: 1em!important;
}
#connexion .form1{
  height: auto!important; 
  width: 90%; 
  margin: auto;
  box-shadow: 2px 2px 12px; 
  font-size: 1em!important;
  background: white!important;
}

.secform{
  height: 800px;
}
#connexion p{
  font-size: 22px!important;
  text-align: center !important;
  font-weight: bold !important;
  color: red !important;
}

#connexion .paiement1{  
  display: inline-block;
  margin-bottom: 50px;
  margin-left: 39%!important;
  position: absolute; 
  z-index: 2;
}
.section-bas{
  height: 380px!important;
}

footer{
  width: 100%!important;
  font-size: 16px!important;
  position: relative!important;
  bottom: 0px!important;
  }
  footer p{
  color: white !important;
}
}

@media screen and  (min-device-width:768px) and (max-device-width:1024px) {
  body{
  font-size: 14px;
  margin: auto;
    }
  h1{
      font-size: 21px;
    }
  .container{
    width: 100%;
  }
  
    /*debut style header*/

  header{
  font-size: 16px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 16px!important;
}
.v2{
  font-size: 26px!important;
  color: red;
}
.panier{
  display: inline-block;
    position: absolute;
    top: 2px!important;
    right: 70px;
    margin-top: 15px;
  /* margin-left: 1200px!important;*/
    font-size: 16px!important;
}

.num_panier{
  width: 10px;
    background: red !important;
    position: relative!important;
    bottom: 13px !important;
    right: 15px !important;
    color : white !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
    border-radius: 8px !important;    
}
#connexion{
  overflow-x: hidden;
  padding:  0px!important;
  margin: 0px ! important;
  font-size: 1em;
}
#connexion .form{
  height: auto!important; 
  width: 90%;  
  margin: auto;
  box-shadow: 2px 2px 12px; 
  font-size: 1em!important;
}
#connexion .form1{
  height: auto!important; 
  width: 90%; 
  margin: auto;
  box-shadow: 2px 2px 12px; 
  font-size: 1em!important;
  background: white!important;
}

.secform{
  height: 800px;
}
#connexion p{
  font-size: 22px!important;
  text-align: center !important;
  font-weight: bold !important;
  color: red !important;
}

#connexion .paiement1{  
    display: inline-block;
    margin-bottom: 50px;
    margin-left: 39%!important;
    position: absolute; 
    z-index: 2;
}
.section-bas{
  height: 380px!important;
}
footer{
  width: 100%!important;
  font-size: 16px!important;
  position: relative!important;
  bottom: 0px!important;
  }
  footer p{
  color: white !important;
}  
}
/*fin style connexion.php*/

/* debut style panier.php*/
header{
  font-size: 23px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 18px!important;
}
.v2{
  font-size: 30px!important;
  color: red;
}

.panier{
  display: inline-block;
  position: absolute;
  top: 5px!important;
  right: 70px;
  margin-top: 15px;
  /* margin-left: 1200px!important;*/
  font-size: 1em!important;
}

.num_panier{
  width: 10px;
  background: red !important;
  position: relative!important;
  bottom: 13px !important;
  right: 15px !important;
  color : white !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
  border-radius: 8px !important;    
}

#pagepanier{
  overflow-x: hidden;
} 
#pagepanier .container-fluide{
  width: 100%!important;
  height: 950px!important;
  margin: auto!important;
}   

.btn-continuer{
  width: 220px;
  margin-left: 48%!important;
}
#pagepanier .a_panier:hover{
  color: white!important;
}
#pagepanier #alertVide{
  height: 120px;
  font-size: 25px;
  text-align: center!important;
}
#pagepanier .table{
  width: 100%!important;
  text-align: center!important;
  margin: auto!important;
  font-size: 18px;
}

.imgProduit{
  width: 160px !important;
  height: 160px !important;
  }
.total{
  font-size: 30px!important;
  width: 100%!important;
  margin:  auto!important;
}
#pagepanier .valider{
  width: 220px!important;
  margin-left: 48%!important;
}
.selection{
  width: 60px!important;
  height: 35px!important;
}

/*debut style footer*/

footer{
    
  width: 100%!important;
  font-size: 20px!important;
  position: relative!important;
  bottom: 0px!important;
  /*fin style   footer*/ 
}

@media screen and (max-width:767.98px){
  body{
  font-size: 14px;
  margin: auto;
    }
    h1{
      font-size: 21px;
    }
  .container{
    width: 100%;
  }
  
    /*debut style header*/

  header{
  font-size: 16px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 16px!important;
}
.v2{
  font-size: 26px!important;
  color: red;
}
.panier{
  display: inline-block;
    position: absolute;
    top: 2px!important;
    right: 70px;
    margin-top: 15px;
  /* margin-left: 1200px!important;*/
    font-size: 16px!important;
}

.num_panier{
  width: 10px;
  background: red !important;
  position: relative!important;
  bottom: 13px !important;
  right: 15px !important;
  color : white !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
  border-radius: 8px !important;    
}
#pagepanier{
  overflow-x: hidden;
} 
#pagepanier .container-fluide{
  width: 100%!important;
  height: 950px!important;
  margin: auto!important;
}   

.btn-continuer{
  width: 220px;
  margin-left: 20%!important;
}

#pagepanier .a_panier:hover{
  color: white!important;
}
#pagepanier #alertVide{
  height: 100px;
  font-size: 25px;
  text-align: center!important;
}
#pagepanier .table{
  overflow-x: hidden;
  width: 100%!important;
  text-align: center!important;
  margin: auto!important;
  font-size: 0.8em;
}
#pagepanier .table h4{
  font-size: 0.6em;
}
.tableHead{
  font-size: 10px!important;
  font-weight: bold;
}
.total{
  font-size: 18px!important;
  width: 100%!important;
  margin:  auto!important;
}
#pagepanier .valider{
  width: 220px!important;
  margin-left: 20%!important;
}
.selection{
  width: 30px!important;
  height: 32px!important;
}

.imgProduit{
  width: 58px !important;
  height: 58px !important;
}
.section-bas{
  height: 380px!important;
}
footer{
  width: 100%!important;
  font-size: 16px!important;
  position: relative!important;
  bottom: 0px!important;
} 

}


@media screen and  (min-device-width:768px) and (max-device-width:1024px) {
body{
  font-size: 14px;
  margin: auto;
    }
    h1{
      font-size: 21px;
    }
  .container{
    width: 100%;
  }
  
    /*debut style header*/

  header{
  font-size: 16px!important;
  margin: auto;
}
.v{
  font-family:'Bungee Inline', cursive!important;
  font-size: 16px!important;
}
.v2{
  font-size: 26px!important;
  color: red;
}
.panier{
  display: inline-block;
    position: absolute;
    top: 2px!important;
    right: 70px;
    margin-top: 15px;
  /* margin-left: 1200px!important;*/
    font-size: 16px!important;
}

.num_panier{
  width: 10px;
  background: red !important;
  position: relative!important;
  bottom: 13px !important;
  right: 15px !important;
  color : white !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
  border-radius: 8px !important;    
}



#pagepanier{
  overflow-x: hidden;
} 
#pagepanier .container-fluide{
  width: 100%!important;
  height: 950px!important;
  margin: auto!important;
}   

.btn-continuer{
  width: 220px;
  margin-left: 20%!important;
}
#pagepanier .a_panier:hover{
  color: white!important;
}
#pagepanier #alertVide{
  height: 100px;
  font-size: 25px;
  text-align: center!important;
}
#pagepanier .table{
  overflow-x: hidden;
  width: 100%!important;
  text-align: center!important;
  margin: auto!important;
  font-size: 0.8em;
}
#pagepanier .table h4{
  font-size: 0.6em;
}
.tableHead{
  font-size: 10px!important;
  font-weight: bold;
}
.imgProduit{
  width: 58px !important;
  height: 58px !important;
  }
.total{
  font-size: 18px!important;
  width: 100%!important;
  margin:  auto!important;
}
#pagepanier .valider{
  width: 220px!important;
  margin-left: 20%!important;
}
.selection{
  width: 30px!important;
  height: 32px!important;
}
.section-bas{
  height: 380px!important;
}
footer{
  width: 100%!important;
  font-size: 16px!important;
  position: relative!important;
  bottom: 0px!important;
}  

}
/* fin style panier.php*/


/* debut style paiement.php*/

/*#paiement .container{
  width: 1200px!important;
}
.section_paie{
  height: 800px!important;
}
#paiement{
  overflow-x: hidden !important;
}
.separateur{ 
  border: 2px dotted black;
}*/

/* fin style paiement.php*/
/*#paiement{
    font-size: 23px!important;
}
.fleche{
  display: flex!important;
  justify-content: flex-end !important;
}
.fleche_retour{
    width: 100px !important;
    height: 90px!important;
    text-align: right !important;
}*/


/*debut style monProfil.php
#monprofil{
  overflow-x: hidden!important;
  font-size: 23px!important;
  background: white!important;  
}
.imgcompte{
    left: 82%;
    top: 45%;
    position: absolute;
}
#icone{
    width: 140px!important;
    height: 120px!important;
    color: white!important;
}*/
/*
.fond{
 background: url('../images/fond1.jpg');
 background-size: 100%;
 background-repeat: no-repeat;
 position: fixed; /* Le fond est fixé en haut de la page */
 /*width: 100%!important; /* Il occupe toute la largeur de l'écran */
 /*height: 220px; /* On met ici la même hauteur que le jumbotron 
 top:0;
 left:0;
 z-index: -1;
}*/
/*.jumbotron {
 height: 220px;
 font-size: 28px!important;
 color: white; /* Le texte sera affiché en blanc */
 /*font-style: italic;
 text-shadow: black 0.4em 0.4em 0.4em;
 background: transparent;
}
.salutation{
  font-size: 40px!important;
  font-family: Monserrat!important;
}
#fact{
  font-size: 20px!important;
}
#modif{
  font-size: 20px!important;
}
#monprofil .container2{
    max-width: 1500px;
}
/*#monprofil .jumbotron{
  position: absolute;
  left: 40%;
    top: 15%;
}*/
/*
p .pasok{
  height: 15px!important;
}*/