@import "reset.css";
@import "prestations.css";
@import "voir_produits.css";
@import "realisations.css";
@import "cookie.css";
@import "panier.css";
@import "inscription.css";
@import "cgv.css";
@import "pagination.css";
@import "devis.css";
@import "nav.css";
@import "contact.css";

@font-face {
  font-family: "POPPINS-REGULAR";
  src: local("POPPINS-REGULAR"), url("font/POPPINS-REGULAR.TTF");
}

main {
  min-height: 50vh;
}

.bande_couleur{
  height:20px;
  background: linear-gradient(to right, red , orange);
}

.center {
  width: 90%;
  margin: 0 auto;
}
body {
  font-family: "POPPINS-REGULAR";
  background-color: white;
}
header {
  width: 100%;  
  min-height: fit-content;
  margin-bottom: 5px;
}

header .nav{
background-color: #6bc6d9;
}
.img_logo{
  display:block;
  width:200%;
  
}


header h3{
  text-align: center;
  font-size: 3rem;
  color: white;
  padding-bottom: 50px;
  text-shadow: 3px 3px 2px black;
  
}

header h1{
  text-align: right;
  font-size:1rem;
  color: white;
  /*padding-bottom: 50px;*/
  text-shadow: 1px 1px 1px black;
}

.degrade{
  height:15px;
  /*border:2px solid red;*/
  /*background: linear-gradient(to right, red, yellow);*/
  background: linear-gradient(to bottom, rgb(230,230,230), white);
  
}

h2, h1{
  text-align: center;
  font-size: 1.5rem;
  color: black;
}

.top{
    height: 70px;
  padding: 5px 10px;
  background: rgb(0, 0, 0);
  display: flex;
  position: relative;
}
.contact_top{
    margin: 20px;
}

.reseau{
  height:20px;
}



.mail_top{
  justify-content: space-between;

}
.telephone_top{
margin-right: 25px;
}
.mail_top a{
  color: white;
  font-size: 15px;
}
.telephone_top a{
  color: white;
  font-size: 15px;
}

/* fin reseau top */

.logo {
  display: block;
  text-decoration: none;
  padding: 5px;
  /*min-width: 500px;*/
  width:15vw;
  margin-left: 10px;
  
  }

.logo figure{  
  width:100%;
}
.logo figcaption{
text-align: right;
display: block;
color:white;
}

 
/* Recherche */

.rechercher_produits{ 
  margin:auto;
  display:block;
  width:50%;
  padding:0;
  }
  
  .groupe_recherche{
  flex-direction: row;
  align-content: space-around;
  width:100%;
  }
  
  .form_recherche{
  width:100%;
  border-radius:5px;  
  }
  
  .image_recherche {
  background-color:rgb(240,240,240);
  border-radius:5px;
  margin:auto;
  }
  
  .btrecherche {
  color:black;
  width:54px;
  height:55px;
  background: rgb(62,78,88) url(./imgs_frt/loupe_blanche.png) no-repeat;
  background-position: 50% 50%;
  border:1px solid grey;
  border-radius:0px 25px 25px 0px;
  padding:5px;  
  }
  
  .txtrecherche{
  height:55px;
  width:calc(100% - 54px);
  border:1px solid grey;
  font-size:24px;
  padding-left:5px;
  padding-right:5px;
  float:left;
  background-color: white;
  }

  .rechercher_produits_petit{
    margin:auto;  
  width:100%;
  padding:0;  
  display: none;
  }



  /* mon compte */
.mon_compte, .deconnexion,.bulle_contact{
display:flex;
margin-right:10px;
margin-left:10px;
border:2px solid rgba(255,255,255,.2);
padding:10px;
border-radius: 20px;
background-color: rgba(255,255,255,.2);
}
  /*fin mon compte */

   /* mon panier */
.mon_panier{
  display:flex;
  margin:auto;
  border:2px solid rgba(255,255,255,.2);
padding:10px;
border-radius: 20px;
background-color: rgba(255,255,255,.2);
  }
    /*fin mon panier */
    /* mon compte mon  panier */
.groupe_mon_compte_mon_panier{
  text-align: right;
  display:flex;
  
  margin:auto;  
  
  }


    /*fin mon compte mon panier */

/* menu categorie */
#menu_categorie{
  /*border:2px solid silver;*/
  width:100%;
  display:flex;
  flex-direction: row;
  justify-content: space-envenly;
  }

.element_menu_categorie{
  width: calc(25% - 10px);
  border:2px solid black;
  text-align: center;
  margin:5px;
  border-radius: 5px; 
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.50);
}

.lien_element_menu_categorie {
  border-radius: 5px;
  display:block;
  transform: scale(0.9);
  font-size: 1.5em; 
  font-weight: 900;
  color:rgb(255,102,0);
  text-shadow: 1px 1px 0px rgb(235,82,0);
  
  
  transition:    
    background-color 1s,
    color 1s,
    text-shadow 1s,
    transform 1s;
}

.lien_element_menu_categorie:hover{
  background-color: rgb(255,102,0);
  color:white;
  transform: scale(1);
  text-shadow: 1px 1px 0px black;
}


  .element_menu_categorie a figure img{
    width:max-content;
  }

/* fin menu categorie */

/* menu */

h3,h4 {
  font-weight: 200;
  margin: 0.4em 0;
}
h3{ 
  font-size: 1.5em; 
}


/*-------------------FIN-TOP-----------------*/

/*
.container {
  height: 600px;
  margin: 0 auto;
  display: flex;
  grid-template-rows: 500px 100px;
  grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px 30px 1fr;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.intro{
  border-top: solid 20px white;
}
*/
.apercu_produit {
  text-align: center;  
  display: block;
  width: calc(33% - 40px);
  margin: 20px;
  background-color: rgb(240,240,240);
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  padding: 40px;
  transition: box-shadow .5s;  
}

.apercu_produit:hover {
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.35);

}

.apercu_produit figure img{
  /*min-width:max-content;
  max-height:40vh;*/
  max-height: max-content;
  
}

.lien_decouvrir_produit{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  background-color:rgb(255,102,0);
  color:white;
  padding:3px 20px 3px 20px;
  border:2px solid rgb(235,82,0);
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.25);
}

.lien_decouvrir_produit:hover{
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.35);
}

body .produits .bleu {
  background-color: #6ec7d9;
}
body .produits .bleu h2 {
  color: black;
}

.imgproduit{
  /*display: block;*/
  /*overflow: hidden;*/
  height: 50vh;
  align-items: center;
  
}

.imgproduit img{
  display: block;
  margin:auto;
  max-height: 40vh;
}


.rupture_stock{
  background-color:red;
  color:white;
  padding:5px;
}

.categorie a{
text-align: center;
color: rgb(0, 0, 0);
font-size: 30px;
margin-right: 30px;
padding: 10px;
display: inline-block;


}
.categorie a:hover{
  color: red;
  /*text-decoration: underline;*/
 }


body form p {
  color: white;
  font-weight: 500;
}
body form .stopfade {
  opacity: 0.5;
}
body form h1 {
  font-size: 50px;
}
body form p.title {
  font-size: 70px;
  font-weight: 700;
  color: bisque;
}

body form textarea {
  border-bottom: solid 1px #848484;
  height: 200px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.14);
}
body form textarea:focus {
  background-color: white;
}
body form .envoyer {
  border-radius: 20px;
  width: 30%;
  margin: 20px auto;
  color: white;
}
body .messageform {
  color: white;
  font-size: 20px;
  border: #0000ff;
  display: block;
  text-align: center;
  padding: 20px;
}

.message_accueil{
  background-color: rgba(0,0,0,0.25);
  text-align: center;
}

h4{
  color: #6ec7d9;
  text-align: center;
  font-size: 40px;
  padding: 60px;
  text-shadow: 3px 3px 2px black;

} 

footer {
  /*background-color:rgb(50,50,50);*/
  /*background-color: black;*/
  background: linear-gradient(to right, black,rgb(50,50,50));
  margin-top: 20px;
}

footer div h3 {
  font-size: 16px;
  color:rgb(255,102,0);
  font-weight: 800;
  border-bottom: solid 2px rgba(255,255,255,0.5);
  padding: 5px 0;
  text-shadow: 0px 1px 1px rgba(255,0,0,0.5);

}

footer div p {
  color: white;
  font-size: 14px;
}

footer a{
  color:white;
}

.copyright{
 /*margin: 0 auto;
 justify-content: space-around;
 */
 text-align: center;
 justify-content: center;
 font-size: 1.2rem;
 color:white;
}

.block_bot{
  width: calc(33% - 40px);
  margin: 20px;
  color:white;
}

.paiement{
  padding:10px;
  margin-top: auto;
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.35);
}

.paiement form{
  margin:auto;
  border:none;
  text-align: center;
}

.boutton_paypal{  
  text-align: center;
  display:block;
  margin:auto;
  width:50%;
}

.logo_footer{
  height:60px;
}
/*
footer{
  height: 250px;
}
  */


.erreur{
border-radius:5px 5px;
width:70%;
display:block;
color: white;
background-color:#E26760;
margin:auto;
padding-left:2px;
}

.erreur img{
vertical-align: middle;
}
.remarque{
	width:70%;
	display:block;
	color: white;
	background-color:#27AE60;
	margin:auto;
	border-radius:5px 5px;
	padding-left:1px;
}

.remarque img{
vertical-align: middle;
}

.image_accueil{
  background: linear-gradient(to right,black,grey);
}


/* connexion */

.colonne_gauche, .colonne_droite{
  display:block;
  width:50%;
  padding:10px;
}

.senregistrer, .seconnecter{
  /*display:block;*/
  color:white;
  background-color: #69939e;
  width:30%;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
  padding:5px;
  border:0;
}

.sendpass{
  color: black;
}


/*fin connection */

/* livraison */
.livraison{
  margin-top:20px;
  padding:10px;
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
}

.section_livraison{  
  border:1px solid black;
  margin:10px;
  /*max-width: max-content;*/
}

.section_livraison:hover{  
  border:1px solid grey;
  margin:10px;  
}


.section_livraison img{
  vertical-align: middle;
  
}

.section_livraison a{
  display: block;
  border:3px solid grey;
  padding:5px;
  color:black;
  transition: border-color 1s;
}

.section_livraison a:hover{
  display: block;
  border:3px solid black;
  padding:5px;
  color:black;
}

.prix_catalogue{
    font-weight: bold;
    color:rgb(79, 123, 184);    
    
}

/* fin livraison */


/* ------------------------ MEDIA QUERIES ---- */
@media all and (max-width: 960px) {
  .apercu_produit {
    width: 90%;
    margin: 20px auto;
    padding: 0 40px 20px ;
  } 
  .center{
    width:98%;
  }
  .element_menu_categorie{
    width:calc(50% - 10px);
  }

  .rechercher_produits{
    display:none;    
  }
  .rechercher_produits_petit{
    margin-top:20px;
    display: block;
    width:90%;
  }
  .logo{
    width:50%;
  }
  .groupe_mon_compte_mon_panier{
    width:45%;
  }
  .block_bot{
    width:100%;
    padding:none;
    margin:none;    
  }
  table{
    margin:none;
  }
  .colonne_gauche, .colonne_droite{
  width:100%;
  }

}