@font-face{ font-family:'Open Sans'; src: url(fonts/OpenSans-Regular.woff);}
@font-face{ font-family:'Open Sans'; src: url(fonts/OpenSans-Bold.woff); font-weight: bold;}
@font-face{ font-family:'Open Sans'; src: url(fonts/OpenSans-Italic.woff); font-style: italic;}
:root{ --navbar-wide-size:50px; --navbar-small-size:70px; --link-color:whitesmoke; --cr-1:#00afcc;/*#ded35d*/    --cr-2:#ded35d;/*#ded35d*/    --cr-3:#e81a2c;/*#ded35d*/    --cr-4:#71a806; --bg-1:#00afcc82;/*#ded35d*/    --bg-2:#ded35d82;/*#ded35d*/    --bg-3:#e81a2c82;/*#ded35d*/    --bg-4:#71a80682;}

/* Families */
body	{ font-family:'Open Sans', verdana, arial, sans-serif; }
h2,
h3 		{ font-family:'Open Sans', arial, verdana, sans-serif; }

/* Headings */
h1 		{ background:#ea2e49; color:#fff; display:inline-block; margin-bottom:1em; padding:0.5em 1em; }
h2 		{ color:#fff; font-weight:900; /* Heavy */ font-size:6em; letter-spacing:1px; line-height:1em; }
h3 		{ font-size:2.25em; line-height:1em; padding:0.5em 0 0.25em 0; }

/* Paragraph  */
p, ul, ol, li {font-size:1em;line-height:1.6em;margin-bottom:.5%;}
p.nustrale {background:#ddd;padding:5px 10px;margin-right:5px}
p.mentions-legales {text-align:center}
hr {clear:both}
.right {float:none;width:100%}
.full {width:100%;float:none}

/* Links */
#mentions-legales .courriel a, a {color: #015b04 ; text-decoration: none; font-weight: bold;}
a:hover {color:#ecae22}
.courriel a {color:#fef39c}
.courriel-reconstitution {font-style:italic;font-size:0.65em}

/* Modal */
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
.modal > img { margin: auto; display: block; width: 93%; max-width: 1000px;}
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;}
/* Add Animation - Zoom in the Modal */
.modal-content { animation-name: zoom; animation-duration: 0.6s;}
@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)}}
/* The Close Button */
.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;}
.close:hover,
.close:focus { color: #bbb; text-decoration: none; cursor: pointer;}


	/* ---------------------------------------------------------------------------------------------------------- 
	03 Layout ---------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------- */

* {box-sizing:border-box}
.flex-center { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
html { scroll-behavior:smooth; padding:1% 5% 5% 5%; }
body { margin:0; padding:0;  background: linear-gradient(100deg,#00afcc,22%,#182235d1,90%,#e17210); line-height: 1.3em; }
header { width:100%; }
header > .en-tete { height: 100px; width:100%; background:url(images/en-tete.png) no-repeat bottom left; background-size:100% auto;}
main { width:100%; background:whitesmoke; margin:0 auto;}
#inner-main > h2{ display:none; width: 100%; margin: 0 0 10px 0; padding: 5px 0 0 10px; font-style: italic; font-weight: bold; font-family: Serif; }
main h2.cr1{ background-color:var(--cr-1); color:whitesmoke; }
main h2.cr2{ background-color:var(--cr-2); color:whitesmoke; }
main h2.cr3{ background-color:var(--cr-3); color:whitesmoke; }
main h2.cr4{ background-color:var(--cr-4); color:whitesmoke; }
.diaporama { height:250px; background-color:#000; background-image:url("images/diaporama/diapo1.jpg"); background-position:center center; background-size:cover; animation-name:diaporama; animation-duration: 40s; animation-delay:4s; animation-iteration-count:infinite;}
@keyframes diaporama {
	10% {background-image:url("images/diaporama/diapo1.jpg");}
	20% {background-image:url("images/diaporama/diapo2.jpg");}
    30% {background-image:url("images/diaporama/diapo3.jpg");}
    40% {background-image:url("images/diaporama/diapo4.jpg");}
    50% {background-image:url("images/diaporama/diapo5.jpg");}
    60% {background-image:url("images/diaporama/diapo6.jpg");}
    70% {background-image:url("images/diaporama/diapo7.jpg");}
    80% {background-image:url("images/diaporama/diapo8.jpg");}
    90% {background-image:url("images/diaporama/diapo9.jpg");}
    100% {background-image:url("images/diaporama/diapo10.jpg");}
}

/* articles *********************************************/
article { width: 90%; margin:0 auto 20px auto; padding:0 0 2% 0; clear:both; z-index:10;}
main article:nth-of-type(1) { padding-top:0;}
article > header { width:100%;}
article > section {width:100%}
footer { width:100%; font-weight: bolder; color: whitesmoke; background-image:url("images/plumes-blanches.png"); background-size:cover;  line-height:1.7em; /* empêcher bug float image*/    overflow:hidden; padding:20px 0;}
footer > section { display:flex; flex-direction:column; justify-content:space-between; width:90%; margin:0 auto;}
footer > section > div { width:100%;}
footer > section img { width:100%;}
footer > section > div > p { margin-top:0;font-size:1.2em; line-height:1.3em;}

/* Navigation ******************************************************/
div.menu-mobile{ background:rgba(4, 4, 4, 0.9); width:100%; height:54px; text-align:center;border-bottom:1px solid whitesmoke}
div.menu-mobile a{ display:block; font-size: 18px; font-weight:bold; color: whitesmoke; text-decoration: none; width:100%;height:100%;padding-top:18px}
nav { display:none; position:relative; width:100%; border-bottom:1px solid black;background:rgba(4, 4, 4, 0.9);}
nav a { text-decoration: none; display:block;color:whitesmoke; font-weight:bold; padding: 14px 18px;}
.dropdown {height:100%}
.dropdown-content { display: none; position: relative; min-width: 160px; margin-left:20px; z-index: 1;}
.dropdown-content a { float: none; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
nav a:hover { color:var(--cr-1); }
nav .cr2 a:hover { color:var(--cr-2);}
nav .cr3 a:hover { color:var(--cr-3);}
nav .cr4 a:hover { color:var(--cr-4);}
nav .cr2 .dropdown-content { border-left: 2px solid var(--cr-2)}
nav .cr3 .dropdown-content { border-left: 2px solid var(--cr-3)}
nav .cr4 .dropdown-content { border-left: 2px solid var(--cr-4)}

/* ---------------------------------------------------------------------------------------------------------- 
	04 Media queries (using a mobile-first approach) ------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------- */

/* 1 and up */	
@media screen and (min-width:1px) {
	body { font-size:85%;  }
}

/* 550 and up */
@media screen and (min-width:550px){}
 

/* tablettes */

/* 650 and up */	
@media (min-width: 650px){
	body { font-size:95%; }
	.right{float:right;width:40%;margin:0 0 2% 2%}
    main { border-top:1px solid whitesmoke; box-shadow: 7px 10px 10px rgba(4,4,4,.5);  }	
	#inner-main{ width:96%; margin:2% auto; }
    header > .en-tete{ height: 100px; background-size:auto 100%;background-position:bottom left; }
    footer { font-weight: bolder; color: whitesmoke; }
    footer > section{ flex-direction:row; width:80%; }
    footer > section > div{ width:46%; }
    footer > section img{}
    
    div.menu-mobile{display:none}
    nav { display:block; height:54px; background:rgba(4, 4, 4, 0.9);border-bottom:1px solid whitesmoke }
    nav a{ text-align: center; float: left; color:whitesmoke}
    nav > a:hover{}
    .dropdown { float: left; height:100% }
    .dropdown-content { position:absolute; margin-left:0; background:rgb(4, 4, 4, 0.85); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
    .dropdown:hover .dropdown-content { display: block;margin-top:53px }
	.open-modal {cursor:pointer}
}

/* 700 and up */	
@media screen and (min-width:700px) {
	body { font-size:100%; }
}

/* PC */

/* 800 and up */	
@media screen and (min-width:800px) {
	body { font-size:105%; }
    header > .en-tete { height:140px; }
    .diaporama { height:400px; }
}
/* 900 and up */	
@media screen and (min-width:900px) {
	body 						{ font-size:110%; }
	header > .en-tete{ height:140px;}
	.diaporama { height:400px; }
}
/* 1200 and up */	
@media screen and (min-width:1200px) {
	header > .en-tete{ height:180px;}
	.diaporama { height:500px; }
}
/* 1500 and up */	
@media screen and (min-width:1500px) {
	body { font-size:125%; }
	nav { height:60px;}
	.dropdown:hover .dropdown-content { margin-top:59px }
}
/* 1800 and up */	
@media screen and (min-width:1800px) {
	body { font-size:150%; }
}
/* 2100 and up */	
@media screen and (min-width:2100px) {
	body { font-size:175%; }
}
/* 2500 and up */	
@media screen and (min-width:2500px) {
	body { font-size:200%; }
}