/*---------------------------------------------- CSS Document ---------------------------------------------------------*/
@charset "UTF-8";
@screen320: 320px;
@screen480: 480px;	
@Fonte-Size : 0.92em;
@Blanc : rgb(255,255,255);
@Rouge : rgb(255,0,0);
@Vert : rgb(0,255,0);
@Blue : rgb(0,0,255);	
.Fonte() { font-size:@Fonte-Size; font-family:'Open Sans', sans-serif, Arial; text-decoration:none;}															
*{margin:0; padding:0; box-sizing:border-box;}											
html, body {
	height:100%; min-height:100vh; padding-top:0px; .Fonte; background:#efefef;
	a {text-decoration:none; .Fonte;}
}															
header, nav, section, footer, video, figure, figcaption, summary {display:block;} 
/*pour que les enciens navigateur reconnaise ces balises comme block*/
						/*---------------------------------------------------------------------------------------------------------------------*/
@H-max-video: 98%;	

@liens1: #8A8C8E; /*Gris*/
@liens2: #1E8CD7; /*Blue*/
@txt_blue: #337ab7; /*Blue*/
@Color_Bleu: #029cff; /*Blue*/
@Couleur_Border: #d9d9d9; /*Gris Clair*/
.General {
	min-height:100%; height:auto !important; 
	}
.Marge {padding-left:0.1%; padding-right:0.1%; margin-left:auto; margin-right:auto;}
.Modele() {
	width:100%; z-index:1; position:fixed; 
	}
.Modele1() {
	max-width:1024px; .Marge;
}
/*---------------------------------------------------------------------------------------------------------------------*/
.headerz {.Modele1; background:#fff; width:100%; padding:0px; top:0px; position:relative;
			h1 {font-size:35px;}
		}
header {
	position:relative; z-index:1; .Modele1; height:220px; top:0; border-bottom:1px solid @Blanc*0.85; 
	box-shadow:0px 0px 10px rgba(0,0,0, 0.1); background-image: url("../img/h2020.jpg"); background-repeat:no-repeat;
	/**********************************************/
	
	hgroup {
		.Modele1; top:0px;
		/**********************************************/
		nav {max-width:1024px; width:100%; color:#fff; top:179px; position:absolute; background:#fff;}
		.A {padding:5px; text-transform:uppercase;}
		.B {padding:5px;
			ul { list-style-type:none; display:flex; justify-content:end; line-height:1.2em; 
				li { padding:10px; border-left:1px solid @Blanc*0.85;
					a {display:block; text-decoration:none; text-transform:uppercase; }
				}
				li:hover {background:@Blanc*0.95;}
				li:nth-child(1) {border:0px;}
			}
		}
	}
}
/*---------------------------------------------------------------------------------------------------------------------*/
section {
	.Modele1; .Air; flex: 1 1 auto; /*occupe la hauteur restante*/ display:flex; /*crée un contexte flex pour ses enfants*/
	.gauche {flex:1; /*occupe la largeur restante*/}
	.centre {width:80%; padding-left:2%;}
	.droite {width:0%;}
}
/*---------------------------------------------------------------------------------------------------------------------*/
footer {
	width:100%; padding:6px; bottom:0; 
}
.footers {
	width:100%; background:#6B8EAB; bottom:0;
}

.Air {padding-top:15px; padding-bottom:50px;}
.Air1() {padding-top:15px; padding-bottom:50px; padding-right:0px; padding-left:10px;}
.Air2() {padding-top:15px; padding-bottom:50px; padding-right:10px; padding-left:0px;}
p {text-align:justify; padding-top:8; padding-bottom:8px;}
.Titre_Page {
	width:100%; border-bottom:solid 1px #06C; margin-bottom:10px; font-size:1.2em; text-transform:uppercase; color:#06C;
	}
/*----------------------------------------------------------------------------------------------------------------------*/
@white: rgba(254,255,250,1);
@grey: rgba(220,231,235,1);
@red: rgba(255,104,115,1);
@black: rgba(48,69,92,0.8);
@sans: 'Titillium Web', sans-serif;
  
.transition {
  transition: all 0.25s ease-in-out; }

.flipIn {
  animation: .flipdown 0.5s ease both; }
    
.no-select {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.flipdown {
  0% { opacity:0; transform-origin: top center; transform: rotateX(-90deg); }  
  5% { opacity: 1; }
  80% { transform: rotateX(8deg); }
  83% { transform: rotateX(6deg); }
  92% { transform: rotateX(-3deg); }
  100% { transform-origin: top center; transform: rotateX(0deg); }
}
.Faqs { 
  li {.flipIn; position:relative; list-style:none; margin-bottom:1px;
	  &:nth-of-type(1){ animation-delay: 0.5s; }
	  &:nth-of-type(2){ animation-delay: 0.75s; }
	  &:nth-of-type(3){ animation-delay: 1.0s; }
	  &:last-of-type { padding-bottom: 0; }
	  span {color:@red; background:#f5f3f2; font-size:12px; display:block; margin:0; padding:7px; cursor:pointer; .no-select; 
	  }
	  p {color:@black; background:#f0ecea; font-size:12px; line-height:20px; letter-spacing:1px; position:relative; overflow:hidden; max-height:800px; 	
	  .transition; opacity:1; transform:translate(0, 0); z-index:2; padding-left:5px; padding-right:5px; margin:1px;
	  }
  }
  i { position:absolute; transform:translate( -6px , 0 ); margin-top:12px; right:5px; 
	  &:before, &:after { content:""; .transition; position:absolute; background-color:@red; width:2px; height:8px; }
	  &:before { transform: translate( 0px , 0 ) rotate( 45deg ); }
	  &:after { transform: translate( 0px , 0 ) rotate( -45deg ); }
  }
  input[type=checkbox] { position:absolute; cursor:pointer; width:100%; height:100%; z-index:1; opacity:0; 
  	  &:checked {
		&~p { margin-top: 0; max-height: 0; opacity: 0; transform: translate( 0 , 50% ); }    
        &~i {
          &:before { transform: translate( 0px , 0 ) rotate( 90deg ); }  
          &:after { transform: translate( 0px , 0 ) rotate( 0deg ); }
        }
      }    
  }
}
/**********************************************************************************/
.Events {width:100%; background:#fff; box-shadow:0px 0px 10px rgba(0,0,0, 0.1); margin-bottom:10px;
td {margin:0px; padding:5px;}
td:nth-child(1) {width:25%; padding:1px;}
strong {color:#357951;}
img {width:100%; height:100%;}
h4 {color:#000;font-weight:bold;}
a {color:red;}
}
.MD{width:100%; background:#fff; box-shadow:0px 0px 10px rgba(0,0,0, 0.1); margin-bottom:2px;
td {margin:0px; padding:5px;}
td:nth-child(1) {width:25%; padding:1px;}
strong {color:#357951;}
a {color:BLACK;}
}
.PROJET {width:100%; background:#fff; box-shadow:0px 0px 10px rgba(0,0,0, 0.1); margin-bottom:10px;
td {margin:0px; padding:5px;}
td:nth-child(1) {width:25%; padding:1px;}
strong {color:#357951;}
img {width:100%; height:100%;}
h4 {color:#000;font-weight:bold;}
a {color:red;}
}
**********************************************
.Tbl_Incurbateurs {
	width:100%; border: solid 0px #DDEEEE; border-collapse: collapse; border-spacing:0; font-size:0.95em;
	a{text-decoration:none; color:@Rouge;}
}
.Tbl_Incurbateurs caption {
	color:#fff; padding:4px; text-transform:uppercase; background-color: #5d625c;
}
.Tbl_Incurbateurs tr:nth-child(1) {
background-color: #DDEFEF; border:solid 1px #DDEEEE; color:#336B6B; padding:4px; text-align:center;
}
.Tbl_Incurbateurs tr:nth-child(2n+3){
  border-top:0px solid @liens1*1.2; background-color: #fff;
}

.Tbl_Incurbateurs tr td {
  color:@txt_blue; padding:4px; text-decoration:none; border-top:1px solid @liens1*1.6;
}
.Tbl_Incurbateurs tr td:nth-child(1) {
  text-align:left;
}
.Tbl_Incurbateurs tr td:nth-child(1n+2) {
  border-left:1px solid @liens1*1.6;
}