/* style.css */
/* JLF 12/2018 */

/* General */

body {
	background : #3F3F3F;
  margin : 1% 5% 1% 5%;
  font-family : Open sans, Helvetica, sans-serif;
}

.page {
  background : #FFF;
  border : solid 1px #555;
  padding : 10px;
  /* ombrage */
	-moz-box-shadow: 2px 2px 5px 0px #000000;
	-webkit-box-shadow: 2px 2px 5px 0px #000000;
	-o-box-shadow: 2px 2px 5px 0px #000000;
	box-shadow: 2px 2px 5px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
}

div {
  padding : 10px;
}

/* General : FIN */

/* DIV en-tete */

.header {
  position : relative;
  height : 150px;
	/*background-color: #265884;*/
  background-image : url('img/LogoJLF51.png');
  background-repeat : no-repeat;
  background-size : 100% auto;
  background-position : top center;
  padding : 10px;
	border-bottom : solid 4px #ff0000;
}

.titre-header {
  margin-top : 0;
  font-family : 'Montserrat', sans-serif;
  font-size : 4em;
  font-variant : small-caps;
  text-shadow : -2px 0 0 #050C36, 2px 0 0 #050C36, 0 -2px 0 #050C36, 0 2px 0 #050C36, 0 0 2px #050C36;
  color : #FFF;
}

/* DIV en-tete  : FIN */

/* DIV Gauche et Droite */

.gauche {
  border : none;
  float : left;
  width : 46.5%;
  margin : 5px 0 5px 0;
}

.droite0 {
  border : solid 3px #F00;
  background : transparent;
  float : right;
  width : 46.5%;
  margin : 5px 0 5px 0;
}

.droite {
  border : solid 3px #EEE;
  background : #EEE;
  float : right;
  width : 46.5%;
  margin : 5px 0 5px 0;
}

.msg {
	margin : 0;
}

/* DIV Gauche et Droite : FIN */

/* DIV Pied de page */

.footer {
  clear : both;
	display : block;
  border : none;
  background : #EEE;
  padding : 1px 5px 1px 5px;
}

/* DIV Pied de page : FIN */

/* a:href */

a {
	color : #265884;
  font-weight : bold;
	text-decoration : none;
	}

a:hover {
	text-decoration : underline;
	}

.titre-header a {
  color : #FFF;
  font-weight : normal;
	text-decoration : none;
}

.titre-header a:hover {
  color : #FFF;
  text-decoration : none;
}

/* a:href : FIN */

/* HelpIMG */

.HelpIMG {
	height : 60px;
	width : 60px;
	background : url('img/i60.png') center center no-repeat;
	margin : 0;
}

.HelpIMG:hover {
	height : 60px;
	width : 60px;
	background : url('img/iGi60.png') center center no-repeat;
	margin : 0;
}

.HelpIMG:active {
	height : 60px;
	width : 60px;
	background : url('img/iG60.png') center center no-repeat;
	margin : 0;
}

/* HelpIMG  : FIN*/

/* hr */

/* Separation grise */

.separation {
	background : transparent url(img/hr1.png) center repeat-x;
	height : 1px;
	border : none;
	padding : 0 0 0 0;
}

.separation hr {
	display : none;
}

/* Separation grise : FIN */

/* Separation blanche */

.separation2 {
	background : transparent url(img/hr2.png) center repeat-x;
	height : 1px;
	border : none;
	padding : 0 0 0 0;
}
.separation2 hr {
	display : none;
}

/* Separation blanche : FIN */

/* hr : FIN */

/* Input type=text */

input[type="text"], input[type="email"] {
  left : 10px;
	background : #FFF;
	font-size : 1em;
	border : none; /*solid 1px #265884;
	border-radius : 5px;*/
	padding : 2px 5px 2px 5px;
  margin : 5px 0 0 0;
  height : 2.2em;
	}

  input + span {
    padding-right: 1%;
    padding-left : 1%;
  }

  input:invalid+span:after {
    position: absolute;
    content: '✖';
    color : red;
    padding-left: 5px;
    padding-top : 5px;
  }

  input:valid+span:after {
    position: absolute;
    content: '✓';
    padding-left: 5px;
    padding-top : 5px;
  }

::placeholder {
  font-style : italic;
}

.input0 {
  	width : 95%;
}

/* Input type=text : FIN */

/* Bouton */

.bouton {
  width : 50%;
  height : 2.5em;
  padding : 2px 5px 2px 5px;
  font-size : 14px;
	border-radius : 5px;
  background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#cccccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#cccccc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#cccccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	color : #265884;
	text-shadow: #fff 0em 0.1em 0.15em;
	border :  solid 1px #aaa;
}

.bouton:active {
  background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(top,  #cccccc 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #cccccc 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #cccccc 0%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #cccccc 0%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #cccccc 0%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	color : #444;
	text-shadow: #cccccc 0em 0.1em 0.15em;
}

/* Bouton : FIN */


/* Zone responsive */
/* 640x480 - smartphones */
@media (max-width : 840px) {

  body{
    margin : 0;
    padding : 0;
  }

  .page {
    float : none;
    border : none;
    margin : 0;
  }

  .header {
  background-size : 120% auto;
  }

  .gauche {
    float : inherit;
    width : auto;
  }

  .droite {
    float : inherit;
    width : auto;
  }

	.droite0 {
    float : inherit;
    width : auto;
  }

  .footer {
    border : none;
  }

}