/*Police*/

@font-face{
	font-family:"CFPinceau";
	src:url('police/CFPinceau.ttf');
}

@font-face{
	font-family:"Neuton-Regular";
	src:url('police/Neuton-Regular.ttf');
}

@font-face{
	font-family:"Japanese 3017";
	src:url('police/Japanese 3017.ttf');
}

@font-face{
	font-family:"RockfordSans-Light";
	src:url('police/RockfordSans-Light.otf');
}

/*Initialisation*/
html{
	font-size:100%;
	width:100%;
	height:100%;
	scroll-behavior:smooth;
}

body,header{
	width:100%;
}

html,body,header,main,footer,p{
	margin:0px 0px;
	padding:0px 0px;
}

body {
	background-attachment:fixed;
	background-image:url('../img/background.webp');
	background-size:cover;
	background-position:center center;
}


/*Taille/type police*/


main h2,article h2{
	font-size:2rem;
	font-family:"RockfordSans-Light","Neuton-Regular","Arial Rounded MT Bold";
}

main h3{
	font-size:1.60rem;
	font-family:"RockfordSans-Light","Neuton-Regular","Arial Rounded MT Bold";
	text-align:center;
}

main p,main th,footer{
	font-size:1.25rem;
}

main caption{
	font-size:1.50rem;
}
p,a,table,footer{
	font-family:"RockfordSans-Light","Neuton-Regular","Arial";
}

.bold{
	font-weight: bold;
	font-size:1.30rem;
}

/*Popup*/

header article{
	width:100vw;
	height:100vh;
	background-color: rgba(0,0,0,0.7);
	position:fixed;
	margin:0px;
	display:none;
	z-index:2;
	
}

header article div{
	background-color:#ddffbc;
	width:70vw;
	height:75vh;
	position:fixed;
	top:12vh;
	left:15vw;
	border-radius:5px;
	min-width:900px;
	min-height:250px;
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
}

header article div p{
	max-width:100%;
	max-height:100%;
	text-align:center;
	font-size:1.5rem;
	overflow:auto;
	margin-top:0.5rem;
}


header article img#croix{
	background-color:#ddffbc;
	width:70px;
	height:70px;
	top:0vh;
	right:0vw;
	position:fixed;
	cursor:pointer;
	border-radius:5px;
}

header article img#raton{
	width:75%;
	max-width:500px;
}

/*Lazy Loading*/

.apparition{
	transition:1s;
}

.invisible{
	transition:0s;
	opacity:0;
}


/*Header*/

header {
	background-color:#ddffbc;
}


header nav{
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content:space-between;
	height:10vh; 
}

header nav img#pc{
	max-width:320px;
	padding:0px 10px;
} 

header nav img#mobile{
	display:none;
} 

header nav img.don{
	width:50px;
	
} 

header nav>nav{
	display:flex;
	flex-flow:row nowrap;
	align-items: center;
	justify-content: space-between;
	width:40vw;
}

header nav a{
	text-decoration:none;
	font-size:1.5rem;
	text-transform:uppercase;
	font-weight:bold;
	color:#53734E;
	width:20vw;
}
header nav nav a{
	padding:10px 20px;
	width:auto;
}

nav nav a:link{
	color:#53734E;
}

nav nav a:active{
	background-color:#53734E;
	color:#FEFFDF;
}

header a#don{
	display:flex;
	flex-flow:row nowrap;
	align-items: center;
	justify-content: center;
	cursor:pointer;
}

nav a#don p:active{
	background-color:#53734E;
	color:#FEFFDF;
}

/*Slider*/

header figure {
	height:90vh; 
	margin:0px;
	min-height:550px; 
}

#lucarne {
	width:100%; 
	height:100%; 
	overflow:hidden; 
	position:relative; 
	top:0; 
	left:0; 
}

#plateau {  
	position:absolute; 
	top:0; 
	left:0; 
	transition:1000ms;
	display:flex;
	flex-flow:row nowrap;
}

#plateau img{ 
	width:100vw; 
	display:block; 
}

/*Titre*/

h1#h1{
	font-family:"Japanese 3017","CFPinceau","Arial Rounded MT Bold";
	font-size:6rem;
	text-align:center;
	color:#FEFFDF;
	padding:10px 20px;
	background-color: rgba(83,115,78,0.7);
	letter-spacing: 1rem;
	margin:10px;
}

#fond_h1{
	position:absolute; 
	display:flex;
	flex-flow:column nowrap;
	align-items: center;
	justify-content: space-between;
	height:50vh;
	min-height:500px;
	margin:0px auto;
	padding:0px;
	
}	

div#fond_h1 a{
	text-decoration:none;
	font-size:1.5rem;
	background-color:#31402E;
	color:#FEFFDF;
	padding:20px 30px;
}

div#fond_h1 a:active{
	color:#FEFFDF;
	background-color:#53734E;
}


/*Main*/

main {
	background-color:#ddffbc;
	max-width:1300px;
	margin:0px auto;
}

main h2{
	margin-top:1.3rem;
	margin-bottom:0.5rem;
}

main h3{
	margin-top:1.3rem;
	margin-bottom:0.5rem;
}

article{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-around;
}

article h2{
	padding:0px;
	width:100%;
	text-align:center;
}

/*Bienvenue*/

article#bienvenue p{
	max-width:90%;
	column-count:2;
	column-gap:15px;
}

/*Frequentation du parc*/

article#graph{
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
}

article#graph p{
	max-width:90%;
	padding:10px;
}

div#chart_div{
	border:5px inset;
	margin:10px;
}

/*Nos attractions phares*/

section#phare{ 
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
}

section#phare h2{ 
	width:100%;
	text-align:center;
}

section#phare article{ 
	width:45%;
}

section#phare article p{ 
	width:90%;
	padding:20px;
}


section#phare img{ 
	display:block;
	width:90%;
	cursor:pointer;
	margin:auto;
}


#couleur1{
	background-color:#91C788;
	padding-bottom:50px;
}

/*Horaires*/

div article#horaires{
	flex-flow:column nowrap;
	align-items:center;
}

div article#horaires p{
	padding:10px;
	text-align:center;
}

/*Galerie*/

.swiper-container {
		width: 90%;
		padding-top: 50px;
		padding-bottom: 50px;
		position:relative;
		height:auto;
}

.swiper-slide p{
	position:absolute;
	top:0px;
	left:0px;
	background-color:#3D3D3D;
	color:#FEFFDF;
	padding:5px;
}

.swiper-slide img{
	justify-content:center;
	align-items: center;
	width: 100%;
}


#couleur2{
	background-color:#52734d;
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	max-width:100%;
	color:#FEFFDF;
}

/*Tableau*/

div article#tarifs{
	max-width:100%;
}

table{
	max-width:95%;
	margin:10px 0px;
	min-width:50vw;
	border-collapse:collapse;
	
}

table th{
	border: 3px solid #3D3D3D;
	padding: 5px;
	background-color: #FEFFDF;
	color:black;
}
table td {
	padding: 5px;
}


/*Map*/


article#map{
	width:100%;
}
iframe{
	width:90%;
	height:450px;
	padding-bottom:50px;
}


/*Footer*/

footer {
	background-color:#3D3D3D;
	color:#FEFFDF;
	display:flex;
	align-items:center;
	justify-content:center;
}

footer p{
	width:75%;
	text-align:center;
	margin:20px;
}

footer span#exposant{
	vertical-align:super;
}








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

/*Taille/type police*/

header nav a{
	font-size:1.25rem;
	width:auto;
}

/*Popup*/

header article div{
	min-width:430px;
	min-height:250px;
}

header article div p{
	font-size:1.2rem;
}



/*Header*/


header nav{
	flex-flow:row nowrap;
	height:20vh;
	min-height:150px;
}

header nav nav a{
	padding:5px 10px;
}

header nav img#pc{
	display:none;
} 

header nav img#mobile{
	display:block;
	max-width:150px;
	margin:10px auto;
} 

header a#logo{
	width:15vw;
	padding:5px 10px;
} 


header nav nav{
	flex-flow:row nowrap;
	justify-content:space-around;
	width:50vw;
}

/*Slider*/ 
header figure {
	min-height:560px; 
}


#plateau img{ 
	width:auto; 
	height:760px;  
}

div#fond_h1{
	height:400px;
}


/*Bienvenue*/

article#bienvenue p{
	max-width:90%;
	column-count:1;
}

}









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

/*Taille police*/

main p,main th,footer{
	font-size:1rem;
}


header nav a{
	font-size:1.25rem;
	width:10vw;
}

/*Popup*/

header article div {
	height:70vh;
	top:15vh;
	min-width:230px;
	min-height:375px;
}

header article div p{
	font-size:1rem;
}

/*Header*/



header>nav{
	flex-flow:column nowrap;
	height:65vh;
	min-height:420px;
	
}

header nav img#pc{
	display:none;
} 

header nav img#mobile{
	display:block;
	max-width:150px;
	margin:10px auto;
} 

header a#logo{
	width:75%;
} 



header nav nav{
	flex-flow:column nowrap;
	justify-content:center;
	height:200px;
	
}

/*Slider*/ 

#plateau img{ 
	width:auto; 
	height:400px; 
}

header figure {
	height:320px; 
	margin:0px;
	min-height:230px;
}

div#fond_h1{
	height:160px;
	min-height:60px;
}

h1#h1{
	font-size:2rem;
	letter-spacing:0.30rem;
}	

div#fond_h1 a{
	font-size:1.25rem;
}


/*Main*/


article{
	flex-flow:column wrap;
	align-items:center;
}

/*Bienvenue*/

article#bienvenue p{
	max-width:90%;
}

/*Nos attractions phares*/

section#phare{ 
	display:flex;
	flex-flow:column wrap;
	align-items:center;
}

section#phare article{ 
	width:90%;
}

section#phare article p{ 
	width:90%;
}


section#phare img{ 
	width:90%;
	height:auto;
}

/*Footer*/

footer {
	height:auto;
}

footer p{
	padding:20px;
}


}