/* ---- Regles de base ---- */ 
html {
	background-color: rgba(0,0,0,.7);
	font-family: "Segoe UI", Arial, Verdana, sans-serif;
	font-size: 1em;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

main { display: block; } /* bug IE 11 */

h1 {
	color: #990000;
	font-size: 2.5em;
	font-family: "Segoe UI Light", "Segoe UI", sans-serif;
	font-weight: 100;
	text-transform: uppercase;
	margin: 0 0 .5em;
}
h2 {
	font-family: "Segoe UI Light", "Segoe UI", sans-serif;
	font-size: 2em;
	font-weight: 100;
	font-variant: small-caps;
	margin: 0;
}

h3 {
text-transform: uppercase;
    font-size: 1.3em;
    /* font-weight: 100; */
    text-align: center;
    /* height: 3em; */
    /* line-height: 3em; */
    margin: 10px;
}

a {
	color:  inherit;
}
nav a {
    text-decoration: none;
}

a[href$=".pdf"]{
	background-image: url("../img/pdf.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
	padding-right: 1.75em;
}
a[href$=".docx"]{
	background-image: url("../img/word.svg");
	background-size: contain;
	background-repeat: no-repeat;
	padding-left: 1.75em;
}


table, th, td {
/*	border: 1px solid #444444; */
}

img, video, audio, figure, form {
	max-width: 100%;
}
textarea {
	resize: vertical;
}
* {
}
/* --- Accessibilité --- */
.sr-only {
	display: none;
}
i[aria-hidden] { /* symboles icones */
	font-style: normal;
}



/* ---- positionnement ----- */
/*
#entete, #entete nav, #colGauche, #contenu, #pied, body {
	border: 1px dashed navy;
}
*/
body {
	margin: auto;
	padding-bottom: 150px;
	max-width:1000px;
	background-color: rgba(255,255,255,.7);
	background-color: #FFFFFFAA;
}

#entete {
	height: 100px;
	position: fixed;
	width: 100%;
	max-width: 1000px;
	z-index: 1;
	border-bottom: 4px solid #ffffff;
}
#entete nav {
	position: absolute;
	bottom: 0;
	right: 0;
}
#colGauche {
	position: fixed;
	width: 160px;
	top: 100px;
}
main {
	margin: 0;
	position: relative;
	top: 84px;
	/*! padding-top: 120px; */
}
#pied {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 1000px;
	background-color: white;
}

/* ----- entete  ----- */
header {
	background-color: #cccccc;
	/* --- background-image: url(../img/eni-bv-64.png);---*/
	/* --- background-repeat: no-repeat; ---*/ 
	/* ---- background-position: right 24px top 24px, 0 0; --- */
	background-size: 48px, cover;
	overflow: hidden;
}
header h1 {
	margin-left: 40px;
	margin-bottom: 0;
}

header h1.js {
	color: #0033cc;
	text-shadow: 0 0 8px #fff;
}

/*
@media screen and (max-width:800px){
	header h1 { font-size: 1em; }
}
 */
header.bandeau h1 {
	margin: 40px 0 0 60px;	
}
header h2 {
	font-size: 1.5em;
	margin-left: 40px;
}
header.bandeau h2 {
	background-color: rgba(0,0,0,.7);
	color: #ffffff;
	font-size: 1em;
	line-height: 40px;
	width: 162px;
	text-align: center;
	transform-origin: bottom left;
	transform: translate(-40px, -20px) rotate(-45deg);
}

header nav {
	margin: 0 8px;
	/* --border-radius: 8px 8px 0 0;--*/
	/* --border: 1px solid navy; --*/ 
	/* -- overflow: hidden; --*/ 
}

header nav a {
	background-color: #eeeeee;
	border-left: 1px solid #cccccc;
	display: inline-block;
	padding: .2em 1em;
}
header nav a:first-child {
	border-left: none;
	border-top-left-radius: 8px;
}
header nav a:last-child {
	border-radius: 0 8px 0 0;
}
header nav a:hover {
	background-color: #aaaaaa;
}



/* ----- fable (class="fable") ----- */

.fable {
	background-color: #990000;
	color: white;
	font-family: "Indie Flower", cursive;
	font-size: 1.2em;
	line-height: 1.6em;
	letter-spacing: .1em;
	font-style: italic;
	padding: 1em;
	border-radius: 1em;
}
.fable.animation {
	height: 1em;
	width: 5.5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: height .4s, width .6s .3s; /* fermeture */
}
.fable.animation:hover {
	height: 15em;
	width: 37em;
	white-space: normal;
	transition: height .4s .5s, width .6s; /* ouverture */
	text-align: justify;
	overflow: hidden;
}


/* ----- menu (class="menu") ----- */

.menu {
	background-color: #990000;
	color: #ffffff;
	perspective: 1000px;
	perspective-origin: 50vw 50vh;
    font-size: 0.8em;
}

.menu a { 
	display: block;
	padding: .5em 1em;
	background-color: #990000;
	transition: background-color .4s;
}
.menu a:hover, .menu a:focus {
	transition: background-color 1s, transform 1s;
	color: #990000;
	background-color: #eeeeee;
}

/* ----- Video ----- */
video + .controls {

}
video + .controls button {
	font-family: "Segoe MDL2 Assets", "Segoe UI Symbol", "Segoe UI", sans-serif;
	background-image: none;
	border: none 0 transparent;
	background-color: #990000;
	color: white;

	padding: 0;
	margin: 0;

	text-transform: uppercase;

	line-height: 3em;
	width: 3em;
	border-radius: 50%;

	cursor: pointer;
	box-shadow: 0 2px 8px #444;
}
video + .controls button:active {
	transform: scale(0.9);
	box-shadow: none;

}

/* ----- tableau (class="mon-tableau") ----- */

.mon-tableau {
	border-collapse: collapse;
}

.mon-tableau th, 
.mon-tableau td {
	padding: .5em 1em;
}

.mon-tableau thead {
	background-color: #0088AA;
	background-image: linear-gradient(to bottom, #33aadd, #0088AA);
	color: #ffffff;
}
.mon-tableau tbody {
	border-bottom: 1px solid #999999;
}
.mon-tableau tbody tr:nth-child(odd) {
	background-color: #eeeeee;
	
}
.mon-tableau tbody tr:nth-child(even) {
	background-color: #cccccc;

}
.mon-tableau tbody tr:hover {
	background-color: #666666;
    color: white;
}
.mon-tableau tbody td {
	border: 1px #999999;
	border-style: none solid;
}
.mon-tableau tfoot {
	font-size: .8em;
}

#table-population.mon-tableau tbody td:nth-child(1) {
	text-align: center;
}
#table-population.mon-tableau tbody td:last-child {
	text-align: right;
	background-color: rgba(255,255,0,.3);
}


/* ----- formulaire (class="mon-formulaire") ----- */

.mon-formulaire {
	background-color: rgba(255,255,255,.5);
	border: 1px solid #ffffff;
	width: 346px;
	padding: 1em;
	max-width: calc(100% - 2em - 2px);
	margin: auto;
}

.mon-formulaire label {
	display: inline-block;
	width: 120px;
	margin: 4px 0;
	vertical-align: top;
}
.mon-formulaire > input:not([type="checkbox"]),
.mon-formulaire textarea,
.mon-formulaire select {
	display: inline-block;
	box-sizing: border-box;
	width: 220px;
	margin: 8px 0;
}
.mon-formulaire button {
	display: inline-block;
	margin: 8px 0;
}
.mon-formulaire fieldset label {
	width: 60px;
}

@keyframes envoi-form {
	
	from {
		transform: scale(1,1) translateY(0px);
	}
	30% {
		transform: scale(0.9,0.5) translateY(60%);
	}
	to {
		transform: scale(0,1) translateY(-2000px);
	}
}

.mon-formulaire.envoi {
	animation-name: envoi-form;
	animation-duration: 1s;
}


/* ----- Animation CSS3 Cube ----- */
@keyframes cube-anim {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(0.1) scaleY(0.1) scaleZ(0.1) ;
	}
	50% {
		transform: rotateX(360deg) rotateY(1080deg) rotateZ(180deg) scaleX(2) scaleY(2) scaleZ(2) ;
	}
	to {
		transform: rotateX(720deg) rotateY(2160deg) rotateZ(360deg)  scaleX(0.1) scaleY(0.1) scaleZ(0.1);
	}
}

article#aAnimation {
	-webkit-perspective: 500px;
	perspective: 500px;
	width: 400px;
	max-width: 100%;
	
}

#cube3D {
	transform-style: preserve-3d;
/*	animation-name: cube-anim;*/
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	
	position: relative;
	width:102px;
	height:102px;
	margin:100px;
}
#cube3D > div {
	background-color: rgba(255,255,255,0.4);
	width:100px;
	line-height:100px;
	font-size: 60px;
	text-align:center;
	border: 1px solid #336;
	position: absolute;
	backface-visibility: visible; /* hidden */
}
#cube3D > #face1 {
	transform: translateZ(50px);	
}
#cube3D > #face6 {
	transform: translateZ(-50px) rotateY(180deg);	
}
#cube3D > #face2 {
	transform: translateX(-50px) rotateY(-90deg);	
}
#cube3D > #face5 {
	transform: translateX(50px) rotateY(90deg);	
}
#cube3D > #face3 {
	transform: translateY(-50px) rotateX(90deg);	
}
#cube3D > #face4 {
	transform: translateY(50px) rotateX(-90deg);
}
#cube3D > div > img { /* image */
	width: 100%;
	height: 100%;
	vertical-align: top;
	opacity: .85;	
}

/* ---- alignement des elements img ----*/

.imgalign {
height: auto;
width: 100%;
display:inline-block;
vertical-align: middle;
text-align: center;
padding-top: 45px;
}
	
.imgalign-Two{
height: auto;
width: 100%;
display:inline-block;
vertical-align: middle;
}

.imgalign-Tree{
height: auto;
width: 100%;
display:inline-block;
vertical-align: middle;
text-align: right;
}
 
 
.imgalign1,.imgalign3,.imgalign5 {
display:inline-block;
padding-left: 15px;
width:auto;
text-align:left;
height:20px;
vertical-align: top;

}
	
.imgalign2,.imgalign4,.imgalign6 {
display:inline-block;
padding-left: 15px;
width:auto;
text-align:left;
height:28px;
}


/* 3 blocs img + textes */

.text-center-block {
    text-align: center;
    margin-top: 25px;
    /* vertical-align: bottom; */
}

.picture-text-tree-in-line {
    font-family: Arial, Helvetica, sans-serif;
    width: 250px;
    display: inline-block;
    margin: 10px 20px 5px 20px;
    vertical-align: top;
    position: relative;
    /*! background: #fff; */
}

.picture-text-tree-in-line p {
    padding: 1em;
    margin-top: 15px;
   /*--- border: 1px solid #0a0a00; ---*/
    height: 250px;
    background-color: #ffffff;
    text-align: justify;
    font-size: 13px;
    line-height: 19px;
    box-shadow: 3px 3px 3px #8f8f8f;
    border-radius: 0px 50px 0px 50px;
}

.picture-text-tree-in-line img {
	border-radius: 50px 0px 50px 0px;
	box-shadow: 3px 3px 3px #8f8f8f;
}

/* slider home */
.slides {
    height:333px;
    overflow:hidden;
}
.slides ul {
    list-style:none;
    position:relative;
    padding-left: 0px;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    /* background-color:#000000; */
    /* border-radius:10px 10px 10px 10px; */
    /* box-shadow:0 0 5px #FFFFFF inset; */
    color:#FFFFFF;
    /* font-size:26px; */
    /* left:10%; */
    /* margin:0 auto; */
    padding: 120px 0 0 750px;
    position:absolute;
    top:50%;
    width: 300px;

    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* ----- texte home central  ----- */

.texthome:after{ /* ligne noire droite du titre*/
    content:'';
    border-bottom:#000000 double;
    display:inline-block;
    width:10em;
    vertical-align: middle;
}
.texthome:before { /* ligne noire droite du titre*/
    content:'';
    border-bottom:#000000 double;
    display:inline-block;
    width:10em;
    vertical-align: middle;
}
.texthome:before { margin-right: 1em; border-left-style: double;}
.texthome:after { margin-left: 1em; border-right-style: double; }

/* ----- pied (address) ----- */

footer address {
	padding: .5em 1em;
	text-align: center;
	font-style: normal;
}


/* ----- Présentation Adaptative ------ */

@media screen and (max-width: 720px) {
	
html{
	font-size: 0.85em;
}
	
aside {
	display: none;
}
	
#colGauche {
	position: static;
	width: auto;
}
main {
	margin-left: 0;
}
body {
	padding-bottom: 0;
}
#pied {
	position: static;
}
.menu {
	text-align: center;
}
.menu a { 
	display: inline-block;
}	
	
	
	
}

@media screen and (max-width: 360px) {

	
.mon-tableau th, .mon-tableau td {
	padding: 0em .25em;
}
	
	
}