@import url('https: //fonts.googleapis.com/css2?family=roboto&display=swap');
/*-------------------------------------products-------------------------------------------*/


          

body{display: flex; justify-content: center; align-items: center; background-color:
 #f5f5f5;font-family: roboto,sans-serif; margin:100px;}

 div img
         {
             
            position: absolute;
            margin-left:15px;
            top:0px;/*permet la position souhaité pas le webmaster*/
            width: 50px;
            height: 50px; 
            left:50px;
             
          }
           .couleur{background-color: #eb7371 ;background-size:cover; position: absolute;
            margin:15px;
            top:5px;/*permet la position souhaité pas le webmaster*/
            width: 1400px;
            height: 50px; 
            }

 .main{text-align: center;color: #fff;background-color: rgb(128, 0, 0);cursor: pointer;border-radius: 5px; width: 500px;
  display:inline-block; padding: 10px 5px 5px 10px;}

   span{font-family: arial; color:black; text-shadow: red;}
   a{color: white;}

form{margin-top: 20px; background-color: #fff; padding: 40px 60px; border-radius: 10px; min-width: 300px; box-shadow: black;}

form h1{color: #eb7371; text-align: center; text-shadow: red;}
     h2{color: #eb7371; text-align: center; text-shadow: red; font-size:3em;}

form.social-midia{margin-top: -10px; display: flex; flex-wrap: wrap; justify-content: center;}

form.social-midia p{padding: 50px;margin-left: 10px; border: 1px solid  #545454;border-radius: 
   100px; width: 20px;text-align: center; cursor: pointer;} 

form p.choose-email{text-align: center;}
form p.choose-login{text-align: center;}
form p.choose-contact{text-align: center;}
 /*------------------------------------------- pages products-------------------------------------------*/

 form .inputs{display: flex;flex-direction: column;}/* cela permet d'empiler les input les un sour les autre*/

 form .inputs input[type="email"],input[type="login"],input[type="password"],input[type="contact"]

 {padding: 15px; border-radius: 5px; border:2px; background-color:#f2f2f2; 
   margin-bottom:15px ; outline: none; }

 form p.inscription{font-size: 14px; margin-bottom: 20px; color: #878787;}/*#878787 la couleur grise du texte p*/

 form p.inscription span{color: #eb7371;}
 /*-----------------------------------------page pour les produits------------------------------------------------------*/


form.forma{margin-top: 20px; background-color: #b5b5b5; box-shadow:#eb7371; border:2px; }


form .input{display: flex;flex-direction: column;}

 form .input input{padding: 5px; border-radius: 5px; border:2px; background-color: #fff; margin-bottom:15px ;width: 160px; overflow:maroon; }

 form button{padding: 15px 25px; border: none; border-radius: 5px;font-size: 15px;

  color: #fff;background-color: #eb7371; outline: none; cursor: pointer;}

  form .valider button { padding: 5px; border: none;
    border-radius:5px;font-size:14px; color:#eb7371; background-color: #f2f2f2; font-family: "Adobe Caslon Pro";}
 
   label{font-family: bahnschrift; font-size:1.05em;color: #878787; top: 5px; box-shadow: black;}

   form .services{ font-size: 0.8em;  }
   .grille{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(0,1fr);
   grid-gap: 80px;
   font-size: 1em;

   }



   /*-------------------------------champ pour les logiciels-------------------------------------------------*/

   
 form.champ{margin-top: 20px; background-color: #fff; box-shadow:#eb7371; border:2px; }

  .lien a  {color:orange; font-size: 1.2em;}

  form button.champ{width: 100px; background-color: #f5f5f5 ;}