/* start login page 1 ----------------------------------------------------------------------  */

/*
#formulaire { width:100%;  margin-top:20px; padding:20px; background:#ffffff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
*/
#formulaire {  margin-left:20px; margin-top:20px;  background:#ffffff; display:flex; flex-direction:column; align-items:center; justify-content:center; }

#formulaire p { color:#1a82c5; font-family: 'Gentium Basic', serif; font-size:20px; line-height:25px; text-align:justify; margin-top:20px; margin-bottom:20px; }

#box { width:100%; display:flex; align-items:center; flex-direction:column;}

.champ  input {
display:inline-block;
margin-bottom:10px;
padding:6px;
width:400px; height:20px;
background:#FFFFFF;
border: 1px solid #000000;
font-size:18px; color:#000000; font-weight:normal; line-height:17px;
}

.submit { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.black_button_submit { 
display:inline-block; height:auto; padding:15px 32px; margin:30px auto; 
color:#1a82c5; background-color:#ffffff; letter-spacing:0.15em; 
font-family:'Open Sans', sans-serif; font-size:12px; font-weight:600; 
line-height:1em; text-transform:uppercase; text-decoration:none; border: 1px solid #1a82c5; border-radius: 4px; }

.black_button_submit:hover { color:#ffffff; background-color:#1a82c5; }

.errors ul li {
color:#b3393f; background-color:#ffffff;
}

#button_container_login { clear:both; width:100%; height:25px; display:flex; align-items:center; }

#cookie { width:100%; padding:10px; background:#ffffff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#cookie p { color:#000000; font-family: 'Gentium Basic', serif; font-size:20px; line-height:25px; text-align:justify; padding:10px; }


/* end login page 1 ----------------------------------------------------------------------  */

/* start login license page ----------------------------------------------------------------------  */

#license { width:100%; margin-top:20px; padding-top:20px; padding-bottom:20px; background:#ffffff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#license h2 { color:#1a82c5; font-family: 'Gentium Basic', serif; font-size:22px; line-height:25px; text-align:justify; margin-top:20px; margin-bottom:20px; }
#license p { font-family: 'Gentium Basic', serif; font-size:20px; line-height:25px; text-align:center; margin-top:0px; margin-bottom:20px; }

#termes { width:100%; margin-top:0px; margin-bottom:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.termes_text { width:100%; max-width:650px; padding:15px; margin-top:20px; margin-bottom:20px;}

#accept { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#accept_button { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.error { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#a0084d; font-family: 'Gentium Basic', serif; font-size:22px; margin-bottom:20px;  }


/* end login license page ----------------------------------------------------------------------  */

/* start download codec page ----------------------------------------------------------------------  */

#download { width:100%; margin-top:20px; padding-top:20px; padding-bottom:20px; background:#ffffff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#download h2 { color:#1a82c5; font-family: 'Gentium Basic', serif; font-size:22px; line-height:25px; text-align:justify; margin-top:20px; margin-bottom:20px; }
#download p { font-family: 'Gentium Basic', serif; font-size:20px; line-height:25px; text-align:center; margin-top:0px; margin-bottom:20px; }

/* end download codec page ----------------------------------------------------------------------  */

/* start mobiles ----------------------------------------------------------------------  */

@media only screen and (max-width : 1022px)
{	
#container { width:100%; } 

#formulaire p { width:80%; text-align:center; }
#cookie p { width:80%; text-align:center; }

#license { width:90%; margin:0 auto; }
#license p { width:80%; text-align:center; }

#termes { width:100%; }
.termes_text { width:80%; }

#accept { width:80%; }

#download { width:90%; margin:0 auto; }
#download h2 { width:80%; text-align:center; }
#download p { width:80%; text-align:center; }

}

/* mobile: champs du formulaire Contact ajustés à la largeur de l'écran (étaient fixés à 400px) */

@media only screen and (max-width : 640px)
{
#formulaire { margin-left:0px; width:100%; }
#formulaire .box, #formulaire form { width:100%; }
#formulaire .champ input { width:100%; max-width:400px; height:34px; box-sizing:border-box; }
#formulaire #text_field { width:100%; }
#formulaire #text_field .text_field_text { width:100%; max-width:400px; margin-left:0px; box-sizing:border-box; }
}

/* end mobiles ---------------------------------------------------------------------- 

backup - ancienne version des boutons (bleus avec texte blanc, et mouseover blanc avec contour bleu):

.black_button_submit { display:inline-block; height:auto; padding:15px 32px; margin:10px auto; color:#ffffff; background-color:#1a82c5; letter-spacing:0.15em; font-family:'Open Sans', sans-serif; font-size:12px; font-weight:600; line-height:1em; text-transform:uppercase; text-decoration:none; }
.black_button_submit:hover { color:#1a82c5; background-color:#ffffff; border: 1px solid #1a82c5;}

 */