body, html, :root{
	padding:0;
	margin:0;
/*	 --main-color: #55A8F1;*/
	--main-color: #4b7bde;
	--sec-color: #f18a25;
}


#contenu {
	width: 100%;
	transition: margin-left .5s;/*, filter .5s;*/
	box-sizing:border-box;
}

#contenu.fondFlouLeft{
	margin-left:-9%;
/*	filter: blur(2px) contrast(30%) brightness(130%);*/
}


#contenu.fondFlou{
/*	filter: blur(2px) contrast(30%) brightness(130%);*/
}


.bold{
	font-weight:bold;
}



.italic{
	font-style:italic;
}

a{
	color: #4b7bde;	
}

a[target]:hover::after{
	font-family:pictos;
	content:'\f08e';
	position:absolute;
	background-color:#fff;
	padding:.25em;
	margin-top:.07em;
	border-radius:50%;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////

	O V E R L A Y


///////////////////////////////////////////////////////////////////////////////////////////////////*/
#fond {
	width: 100vw;
	height: 0vh;
	position: fixed;
	top: 0;
	left: 0;
	transition: height 0s 1s, visibility 0s 1s;
	z-index:5;
	overflow:hidden;
	visibility:hidden;
}

.affFond #fond{
	height: 100vh;
	transition: height 0s, visibility 0s;
	visibility:visible;
}

#fond .fondBg {
	width: 100%;
	height: 100%;
	background-color: #eee;
	opacity: 0;
	transition: opacity .5s;
}
.affFond #fond .fondBg {
	opacity: .4;
}


.bt-closeFond{	
	position:absolute;
	top:-.8em;
	right:-.8em;
	text-decoration:none;
	
}
.bt-closeFond::before{
	font-family:'pictos';
	content:"\f00d"; /*'x'*/
	display:block;
	width:1.5em;
	height:1.5em;
	border-radius:50%;
	text-align:center;
	vertical-align:middle;
	line-height:1.5em;
	background-color:#fff;
	border:.3em solid  #4b7bde;
	color:  #4b7bde;
}



.bt-closeFondFleche{	
	position:absolute;
	bottom:3em;
	left:3em;
	text-decoration:none;
	
}

.bt-closeFondFleche::before{
	font-family:'pictos';
	content:"\f061"; /*MULT*/
	display:block;
	width:3em;
	height:3em;
	border-radius:50%;
	text-align:center;
	vertical-align:middle;
	line-height:3em;
	border:3px solid #fff;
	font-weight:bold;
	color:#fff;
}




.overlayDr{
	position: fixed;
	right: 0;
	height: 100vh;
	top: 0;
	width: 0%;
	background-color:  #4b7bde;
	transition: width .5s;
	box-shadow: 0px 0px 5px rgba(0,0,0,1.00);
	box-sizing: border-box;
}

.affFond #fond .overlayDr {
	width: 33%;
}

.dOverlay{
	position: fixed;
	left: 50%;
	top:50%;
	background-color: #fff;
	transition: opacity .5s;
	opacity:0;
	box-sizing: border-box;
	transform:translate(-50%, -50%)
}

.affFond #fond .dOverlay{
	opacity:1;
}

.dOverlay .overlayDr{
	overflow:hidden;	
}

.fondInt{
	padding:1em;	
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

M E N U S

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

nav{
	padding:0;
	margin:0;
}
nav ul{
	list-style-type: none;
	list-style:none;
	display:flex;
	background-color: #4b7bde;
	margin:0;
	padding:0;
}

nav ul>li{
	flex:1;

}

nav ul li>a{
	display:block;
	text-align:center;
	padding:.5em;
	text-decoration:none;
	color:rgba(255,255,255,.6);
	background-color:rgba(255,255,255,.2);
}

nav ul li>a:hover{
	background-color:rgba(255,255,255,0);
	color:rgba(255,255,255,1);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

F O R M S

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.fonce{
	background-color: #4b7bde;	
	color:#fff;
}
.d-formGroup{
	padding:1em;
	margin:1em 1em 0 1em;
	border:1px solid #eee;	
}


.fonce .d-formGroup{
	border-color:rgba(255,255,255,.3);
}

input[type=text], input[type=number], input[type=email], input[type=date],input[type=submit],input[type=tel],input[type=password], select, button, textarea{
	padding:0 .4em;	
	margin:.2em 0;
	width:100%;
	height:3em;
	box-sizing:border-box;
	border:1px solid #777;
	-webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;       /* remove default arrow */
 	border-radius:0;
	
	vertical-align:middle;
}

textarea{
	padding-top:.5em;
	padding-bottom:.5em;
}

textarea.ta-long{
	height:10em;
}


textarea.ta-fs{
	min-width:80vw;
	min-height:70vh;
}

.fonce input[type=text], .fonce input[type=number],.fonce input[type=email],.fonce input[type=date],.fonce input[type=tel], .fonce input[type=password],.fonce input[type=submit],.fonce  select, .fonce.button{
	background-color: rgba(255,255,255,.3);
	border: 0;
	border-bottom: 2px solid rgba(255,255,255,.6);	
	color: #fff;
	line-height:3em;
}

.fonce input[type=submit], .fonce.button{
	border-bottom:0;	
}



label.l-left{
	border:1px solid  #4b7bde;
	color: #4b7bde;
	display:inline-block;
	height:3em;
	width:10em;
	text-align:left;
	padding-left:1em;
	box-sizing:border-box;
	vertical-align:middle;
	margin:.2em 0;
	line-height:3em;
	border-right:0;
}


.fonce label.l-left{
	color: #fff;
	border: 0;
	background-color: rgba(255,255,255,.3);
	border-bottom: 2px solid rgba(255,255,255,.6);	
}

label.l-left+input, label.l-left+select, label.l-left+.sel-style{
	display:inline-block;
	vertical-align:middle;
	width:calc(100% - 10em);
}
input[type=submit], button{
	border:1px solid #777;
	background-color:#fff;
	margin:.2em 0;
}


label.l-picto span{
	display:none;
	width:0px;	
	color:red;
	background-color:green;
	max-width:0px;
}

label.l-picto::after{
	font-family:'pictos';	
	content:"";
	display:block;
	position:absolute;
	width:2em;
	height:3em;
	line-height:3em;
	text-align:center;
	font-size:130%;
}

label.l-picto + input{
	padding-left:3em;
}

label.l-passPicto::after{
	content:"\f023";
}


label.l-loginPicto::after{
	content:"\f007";
}


 /* F I L E S */
label.l-file{
	display: inline-block;
}
label.l-file input, label.b-file input{
	display:none;	
}

label.l-file input+span{
	display:block;	
}
label.l-file input+span::before, label.b-file input+span::before{
	font-family:'pictos';
	display:block;
	content:'\f016';	
	font-size:130%;
	width:100%;	
	padding:.2em;
	box-sizing:border-box;
}

label.b-file input+span::before{
	display:inline-block;
	width:auto;
}

label.l-file input[accept^=image]+span::before, label.b-file input[accept^=image]+span::before{
	content:'\f1c5'; /* FILE IMA*/
	backgound-color:red;
}

.fonce .label.l-file input+span::before{
	color:#fff;
}

label.l-file input+span+span{
	display:block;
	width:100%;
	height:.2em;
	background-color:#eee;	
	position:relative;
}


label.l-file input+span+span span{
	display:block;
	width:0%;
	visibility:hidden;
	height:100%;
	background-color:red;	
}
 /* C H E C K B O X E S */

label[class|=cb]{
	display:inline-block;
	padding:.2em 0;	
}

label[class|=cb] input{/* INPUS*/
	display:none;	
}


label[class|=cb] span:last-child{ /*LABEL*/
	opacity:.5;
	display:inline-block;
	padding-left:.5em;
	vertical-align:middle;
}

.fonce label[class|=cb] span:last-child{ /*LABEL*/
	color:#fff;
}


label[class|=cb] input:checked~span:last-child{
	opacity:1;	
}

.cb-check input+span, .cb-point input+span, .cb-toggle input+span, .cb-croix input+span{
	width:1.5em;
	height:1.5em;
	line-height:1.25em;
	display:inline-block;
	border:.3em solid #999;
	color:#777;		
	text-align:left;
	border-radius:1em;
	text-align:center;
	overflow:hidden;
	vertical-align:middle;	
}

	.fonce .cb-check input+span, .fonce .cb-point input+span, .fonce .cb-toggle input+span, .fonce .cb-criox input+span{
	
		background-color: transparent;
		border-color:rgba(255,255,255,.5);
		color:rgba(255,255,255,.5);
	}
	


 /* C H E C K B O X   T O G G L E */
.cb-toggle input+span{
	width:2.2em;
	background-color:#eee;
}


.cb-toggle input+span::before{
	content:'';
	display:block;
	width:1.5em;
	height:1.5em;
	background-color:#999;
	border-radius:50%;
	margin:0 0 0 -0.1em;
	transition: margin .2s, background-color.2s;
}

.cb-toggle input:checked+span::before{
	background-color: #4b7bde;
	margin-left:.8em;
}

.fonce .cb-toggle input+span::before {
	background-color: rgba(255,255,255,.6);
}

.fonce .cb-toggle input:checked+span::before {
	background-color: rgba(255,255,255,.9);
}

 
  /* C H E C K B O X  C H E C K */

	
	 .cb-check input:checked+span{
		border-color: #4b7bde;
	 }
	 .fonce .cb-check input:checked+span{
		border-color:rgba(255,255,255,.5);
	 }
	 
	.cb-check input+span::before, .cb-point input+span::before{
		 font-family:'pictos';
		content:"\f00d"; /*'x'*/
		display:inline-block;
		width:1.4em;
		height:1.4em;
		line-height:1.4em;		
		vertical-align:middle;
		border-radius:50%;
		box-sizing:border-box;
	}

	  .cb-point input+span::before{
		  content:"•";
	  }
	  
	 .fonce .cb-check input:checked+span::before, .fonce .cb-point input:checked+span::before{
		 font-family:'pictos';
		content:"\f00c"; /*'✓'*/
		color: #4b7bde;
		background-color:rgba(255,255,255,1);
		border-color:rgba(255,255,255,0);
	 }
	 
	  .cb-check input:checked+span::before, .cb-point input:checked+span::before{
		font-family:'pictos';	
		 content:"\f00c"; /*'✓'*/
		 color: #4b7bde;
	 }


  /* C H E C K B O X  C R O I X */

	
	 .cb-croix input:checked+span{
		border-color:red;
	 }
	 .fonce .cb-croix input:checked+span{
		border-color:red);
	 }
	 
	.cb-croix input+span::before{
		 font-family:'pictos';
		
		display:inline-block;
		width:1.4em;
		height:1.4em;
		line-height:1.4em;		
		vertical-align:middle;
		border-radius:50%;
		box-sizing:border-box;
	}

	  .cb-croix input+span::before{
		  content:"";
		  content:"";
	  }
	  
	 .fonce .cb-croix input:checked+span::before{
		 font-family:'pictos';
		content:"\f00d"; /*'x'*/
		color:red;
		background-color:rgba(255,255,255,1);
		border-color:rgba(255,255,255,0);
	 }
	 
	  .cb-croix input:checked+span::before{
		font-family:'pictos';	
		content:"\f00d"; /*'x'*/
		 color:red;
	 }
	
  
   /* S E L E C T */
   
 .sel-style select{
	padding:0 2em 0 0;	
 }
 
 .sel-style select:focus {
  	outline:none;
}
  .sel-style{
	display:block;
  	position:relative;
  }
  .sel-style::after{
	  font-family:'pictos';	
	  content:"\f078";
	  display:block;
	  position:absolute;
	  top:1em;
	  right:.35em;
	  background-color: #4b7bde;
	  color:#fff;
	  pointer-events:none;
	  width:1.6em;
	  height:1.6em;
	  border-radius:50%;
	  text-align:center;
	  vertical-align:middle;
	  line-height:1.4em;
  }
  
  .sel-style select option{
		border:0 ;
		padding:.5em;
  }
  

  
 /* C H E C K B O X  B O U T O N */
 
 
 
 .cb-bouton input~span:last-child{
	display:inline-block;
	border-left:1px solid #fff;
	color:#777;
	line-height:2em;
	padding:0 1em;	
	vertical-align:middle;	
	margin:.1em 0;
 }
 
 .fonce .cb-bouton input~span:last-child{
	border:1px solid #fff; 
 }

 .cb-bouton:last-child input~span:last-child{
 	border-radius:0 1em 1em 0;
 }
 
 
 .cb-bouton:first-child input~span:last-child{
 	border-radius:1em 0 0 1em;
	border-left-width:0px;
 }
 
 .fonce .cb-bouton:first-child input~span:last-child{
	 border-left-width:1px;
 }
 
 .cb-bouton input:checked~span:last-child{
	color:#fff;
	background-color: #4b7bde;
 }
 
  
  .i-error, .l-left.i-error{
  	border-color:red !important;
	color:red;
  }
  
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

F O R M S

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  .d-alert{
	border:2px solid red;  
  }