@font-face
{	font-family:'San'; src:url('polices/CreatoDisplay-Regular.otf') 
	format('opentype');
}

@font-face
{	font-family:'SanGra'; src:url('polices/CreatoDisplay-Bold.otf') 
	format('opentype');
}

@font-face
{	font-family:'Art'; src:url('polices/fall_in_love.ttf') 
	format('truetype');
}

@font-face
{	font-family:'special'; src:url('polices/nizhegorodsky.otf') 
	format('opentype');
}


/* RESET */
a:link, a:visited, a:hover, a:active	{text-decoration:none;}
body	{margin:0; padding:0;}
em	{font-style:normal;}
h1, h2, h3, h4, h5, h6 {font-weight:normal; margin:0;}
p	{margin:0;}
strong	{font-weight:normal;}
table	{border-collapse:collapse;}
ul, li {margin:0; padding:0; }
/* FIN RESET */



/* PORTRAIT */
@media (orientation: portrait)
{	header		{border-bottom:1vw solid #399;}
	/*		MENU		*/
	nav 	{position:fixed; bottom:0; text-align:center;}
	nav ul a:link, nav ul a:visited	
	{	border-left:0.5rem solid #399; border-right:0.5rem solid #399; border-radius:50%; color:#ccc; text-decoration:none; 
		text-shadow:none;
	}
	
	nav ul a:hover, nav ul a:active	
	{	border-left:0.5rem solid #cc3; border-right:0.5rem solid #cc3; border-radius:50%;  color:#eee;	}

	nav ul li 
	{	 font-family:special; 	}

}

/* PAYSAGE */
@media (orientation: landscape)
{	header		{border:none;}

	nav	{position:sticky; top:0;}
	nav ul li	{font-family:SanGra; padding:0 1rem; text-transform:uppercase;}

	nav ul a:link, nav ul a:visited	{color:#ccc; text-decoration:none; text-shadow:none;}
	nav ul a:hover, nav ul a:active	{color:#eee;}

	section	{max-width:65rem;}

	h1 + div		{max-height:36rem; max-width:64rem;}
}

/* FIN MEDIA QUERIES		*/

section article a:link, section article a:visited, section article a:hover, section article a:active
{color:#cc3;}

section a:link, section a:visited, section a:hover, section a:active	
{color:#399; font-family:SanGra;}


body
{	background-color:#ccc; background-repeat:no-repeat;
	background-size: cover; background-attachment: fixed; color:#333; font-family:San; 
	font-size:24px; text-align:center; 
}

em	{font-family:Art; font-style:normal;}

figure 	{border:0.2rem dotted #eee; border-radius:1rem; margin:2rem; padding:1rem;}
figure img {border:0.1rem solid #eee;}
	figcaption {font-family:SanGra; font-size:1rem; text-transform:uppercase;}

footer	
{	border-top:0.2rem dotted #699; color:#699; font-family:San; font-size:1rem; margin:3rem; 
	text-align:right; text-transform:uppercase; }

article ol {padding:0 0 0 1rem;}
article ol li h2	{font-family:SanGra; font-size:1.5rem;}
article ol li p	{font-family:San;}


header {font-size:0;}
header img {width:100%;}

	

/* MENU */
nav	{z-index:3; width:100%;}
nav ul {background-color:#399; list-style:none; margin:0; padding:0.2rem 0 0.4rem; width:100%; }

nav ul li		{display:inline-block; font-size:1rem; margin:0 1rem;}


p	{margin-bottom:1rem; text-align:justify;}


section	{margin:0 auto 5rem; padding:1vw; width:84vw;}
section article	{background-color:#399; border-radius:0.6rem; color:#ccc; margin:3rem auto; padding:1rem 2rem;}
section article h1	{color:#ccc; font-family:special; font-size:3rem; padding:0;}
section article h2	{color:#cc3; font-family:Art; font-size:2rem; padding:0; text-align:justify;}

section article iframe	{border:none; height:89rem;}
section article ul, section table + ul, section ul	{margin-left:1rem; text-align:left;}
section article ul, section article ul li, section table + ul li	{margin-bottom:1rem;}

section h1	
{	border-bottom:0.2rem solid; color:#399; font-family:special; font-size:5rem; 
	margin:3rem 0 1rem; padding-top:1rem;
}

section h1:first-child		{margin:1rem auto;}

section h2		{font-family:SanGra; font-size:2rem; margin:3rem 0 0;}	


section iframe	
{border:0.2rem solid #399; height:34rem; margin:3rem auto; width:100%;}

section table 	{margin:3rem auto;}
section table tr:nth-child(2), section table tr:nth-child(4) {background-color:#9cc;}

section table tr td	{padding:0.5rem 1rem; text-align:left;}
section table tr th	{font-family:SanGra; font-size:1rem; text-transform:uppercase;}

section ol, section ul	{font-family:SanGra; font-size:2rem; margin:1rem; text-align:left;}
section ol li, section ul li	{font-family:San; font-size:1.5rem; margin:0.5rem auto;}

section video	{border:1rem solid #399; margin:1rem auto; max-width:720px; width:64vw;}

strong	{font-family:SanGra;}


.cit
{	border-bottom:0.1rem solid #999; border-top:0.1rem solid #999; color:#399; font-family:Art; font-size:2rem; margin:5rem 8rem; 
	padding:3rem; text-align:center;
}

.flexvignet
{clear:both; display:flex; flex-wrap: wrap; justify-content:center; margin:2rem auto; text-align:center;}

.flexvignet img
{	border:0.2rem solid #eee; border-radius:1rem; height:8rem; margin:0.4rem; width:8rem;
}


/* POUR BINETTES */
.flex-container
{	clear:both; display:flex; flex-wrap: wrap; justify-content:center; margin:1rem auto; text-align:center;}
  
.flex-container > div
{	background-color: #eee; border-radius:1rem; box-shadow:0.1rem 0.1rem 0.5rem rgba(51,51,34,0.5); margin:1rem; 
	max-width:480px; min-width:288px; padding:1rem; width:20vw;
}

.flex-container > div h2
{	font-family:Art; color:#399; margin:0 auto;}

.flex-container > div img 
{	border:0.2rem solid #399; border-radius:100%; clear:both; height:13rem; max-height:240px; max-width:240px; 
	width:13rem;
}

#clubs img	{max-width:240px; height:5rem;}



 /* animation diaporama */
@keyframes diaporama 
{	0% {background:url('images/diaporama/097.webp'); background-size:cover;}
	20% {background:url('images/diaporama/432.webp'); background-size:cover;}
	40% {background:url('images/diaporama/gazette2506.webp'); background-size:cover;}
	60% {background:url('images/diaporama/1455.png'); background-size:cover;}
  	80% {background:url('images/diaporama/822.png'); background-size:cover;}
	100% {background:url('images/diaporama/779.png'); background-size:cover;}
}

/* élement auquel appliquer l'animation */
section + h1 + div 
{	animation-duration:24s; animation-iteration-count:12; animation-name:diaporama; animation-timing-function:ease-in-out;
	background-repeat:no-repeat; border:0.5rem solid #eee; box-shadow:0.1rem 0.1rem 0.3rem rgba(0,0,0,0.5);
	height:45vw; margin:2vw auto; width:80vw;
}