@font-face {
    font-family : Timeless;
    src: url(img/Timeless.ttf);
}
@font-face {
    font-family : Coolvetica;
    src: url(img/coolvetica_rg.ttf);
}
body{
		font-family: Timeless;
		font-size: clamp(15px, 5vw, 39px);
		
		padding: 0;
		margin : 0;
		background:#1b191a;/*  */
	}
	/*#335391  - Bleu*/
	
	@media (min-width: 981px) { /* Pour ORDI */body{ font-size: 19px;}}
a 	{color: #1b191a;text-decoration: none;}
a:hover {background:#1b191a; color: #fff;text-transform: uppercase;}
h1  {font-family: Coolvetica;font-weight: normal;text-transform: none;color:grey;text-align:left;}
h2  {background: none; border-bottom: 2px solid rgb(51, 83, 145);margin-top: 1.5em;padding:0.8em;text-align:left;}
h3  {font-size: 1em;}
label {font-weight: bold;}
p { text-indent: 1.5em; margin-top:0;text-align: justify;}

img.contact{ width: 100%;margin: 0 0 2em 0; float: right;}
img.pochette {width:50%; box-shadow: 8px 8px 12px #aaa;

}
@media (min-width: 981px) {img.contact{width:40vh;} }

header {
		font-family: Coolvetica;
		margin:0 auto;
		padding: 0 10vw;
		font-size: clamp(54px, 5.5vw, 1.125rem);
		font-size: 5vw;
		line-height: 10vh;
		text-align: left;
		max-width: 1082px;}
header a{
		color: #1b191a;
		text-decoration: none;
		}
header a:hover {background:none;color: grey;}
	
/* NAV */


	nav {
		font-family: Coolvetica;
		font-size: clamp(3vw, 12vw, 7vh);
		background: #FFF;
		width: 100%;
		text-align: center;
		flex-direction: column;
		
	}
	nav ul {
		list-style-type: none;
		list-style-position: inside;
		margin:0;
		padding:0;
	}
	
	/*  Exception pour la page de garde */
	/*.parallax #burger, .parallax #croix {color: #FFF;}*/
	 #burger,  #croix {color: #FFF;}
	/* ----------*/
    
    #main_pages, #croix, #rezo-menu
    {
        display: none;
        flex-direction: column;
        background: none;
        
    }
	#main_pages{transition:opacity 2s ease;transition-delay: 0.2s;}
	#croix, #burger
	{	position: fixed;
		font-size: 5vw;
		
		line-height: 10vh;
		top:0px;
		left:85vw;
		font-weight: normal;
		text-transform: uppercase;}
	
	#croix {font-size: 10vw;}
@media (min-width: 981px) 
	{ /* Pour ORDI */
		#croix, #burger {font-size: 34px;}
		#croix{font-size: 74px;}
	}	
    
	nav #main_pages a {
        width: 50%;
    }
    
	nav a {
		color: #666;
		text-decoration: none;
	}
	nav a:hover {
		color: #1b191a;
		background: none;
		opacity: .8;
	}

.rezo {list-style-type: none;
		margin:0;padding:0;}
.rezo li {display: inline-block;text-align: center;  }
.rezo img { margin:0;}
#rezo-menu img{max-height:4vh;}
#rezo-ordi {display:none;}	
@media (min-width: 981px) 
	{ 
		
		#rezo-ordi 
		{	line-height:10vh;
			
			list-style-type: none;
			display:inline-block;
			list-style-position: inside; 
			padding:0;
			font-size: 24px;
			position: fixed;
			top: 3.7px;
			left: 68vw;
			
		}
	 #rezo-ordi li {display:inline-block;}
	 /*#rezo-ordi a {background: blue;}*/
	 #rezo-ordi img {width: 24px;transition: width;transition: 0.3s;}
	 #rezo-ordi img:hover {width: 30px;margin-right: -6px;}
	 
	}



/* --- Nav*/


footer {position: fixed; bottom:0; z-index: -2;width: 100vw; background: #4763A5; background:#1b191a; height: 10vh;color: #FFF;margin: 0; padding:0.5em;text-align: center;}
footer ul {padding: 0.5em; margin:0;}
footer li {display: inline-block;width: 12%;text-align: center;}
footer img {width: 90%; max-width:7vh;}

@media (min-width: 981px) { /* Pour ORDI */
	footer li {width: 40px;}
	footer img {width: 30px;}
	footer {font-size: 14px;}
	}



div { 
		position: relative;
		color: #000;
		padding: 5px;
		background: white;
		min-height: 100%;
		z-index: 0;
		text-align: center;
		padding: 0;
	}

#corps {padding: 2em 10vw;margin: 0 auto 12vh; max-width: 1082px; animation: fadein 1s; 
		border-radius: 25px;}
@keyframes fadein {
  0%   { opacity:0; }
  
  100% { opacity:1; }
}
/*#corps img{width:100% ;}*/
#bio {width:100%;}
@media (min-width: 981px) 
{ #bio {width:700px;float: right;margin:0 0 0.5em 1em;}
}

.shop a
	{
		color:#FFF;
		background-color: #335391;
		padding: 0.4em;
		text-decoration: none;
		border-radius: 25px;
	}
.shop a:hover
	{color: #335391;
		border: 2px solid #335391;
		background: #FFF;
	}


/*******************************/
/*   IFRAME DE LA PAGE VIDÉOS
/*******************************/
.video
	{
		display: grid;
		grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
		gap: 2em;
	}
iframe {width:100%; aspect-ratio: 16 / 9; border-radius: 10px;}

/*--------------------------*/
/*--------------------------*/
.img 
	{
		display: grid;
		
		gap: 0.1em;
		
		
		padding: 1rem 0;
		z-index: 0;
		 /*Mobile-first : 1 figure par ligne */
		/*grid-template-columns: 1fr;*/
		grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
	}

/* Dès que l'écran est assez large, on peut afficher 3 colonnes */
@media (min-width: 981px) 
{
		.img { grid-template-columns: repeat(4, 1fr);}
		.img figure img { max-width: 400px;}
		
	}

/* Chaque figure */
.img figure 
	{
		margin:0;

		overflow: hidden;
		 min-width: 0;
		 position: relative; /* pour figcaption overlay */
		margin: 0;
		background: #f8f8f8;
		padding: 0.5rem;
		 
		border-radius: 4px;
		text-align: center;
		transition-property: opacity;
		opacity:1;
		
	}

/* Images fluides */
.img figure img {
	
		width: 100%;
		object-fit: cover;
		display: block;
		border-radius: 10px;
		z-index: 0;
	}
	
/*.hover{ z-index:12;
		max-width: 80vw;
		max-height: 80vh;
		width: auto;
		position: fixed;
		left: 20%;
		top: 10vh;
		margin: 0 auto;  
		
		background: #333;
	}*/

/* Figcaption responsive */
.img figure figcaption 
	{
		margin-top: 0.5rem;
		
		font-size: clamp(1rem, 4vw, 1.1rem);
		line-height: 1.4;
			
	}
	
/*  Spécificité à la galerie de photos  */

.photo	
	{
		
	}
.photo figure img
	{
			aspect-ratio: 1 / 1;
		}
.photo figure img
	{
		/*height: 100%;*/
	}
.photo  figure figcaption
{
		font-size: .8em;
}
/*--------------------------*/
/*--------------------------*/

.email{text-align: left;}

.parallax {
		/* The image used */
		/*background-image: url("img/LOUPS-5.jpg");/
		
		/* Set a specific height */
		/*min-height: 500px;*/

		/* Create the parallax scrolling effect */
		/*background-attachment: fixed !important;/
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100vw auto;
		background-size: auto;*/
		
	}
 header a {color: #FFF;}

.parallax #corps {margin-top: 700px;}

#test {
		position: fixed;
		top:-40px;
		right:0; /*   */
		text-align: center;
		z-index: -2 ;
		
		
	
	object-fit: cover;
	}
/*@media (max-width: 1363px) 
{*/
		/*#test {top:-100px;min-height:923px;width:100vw} /*Pour Cyano_43*/
		
	/*	#test {top:-15vw;max-height:1820px;width:100vw;}/* Pour couv01*/
		#test {top:0px;max-height:1430px;width:100vw;
		max-width: 1000px /*   */
		}/* Pour couv02*/






#yeah { 
		background-image: url("img/bio.jpg");
		position: relative;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 4em;
		Font-size: 25pt; 
	}
#yeah div 
	{
		background: none;
		text-transform: uppercase;
		font-size: 2em;
		color: #FFF;
	}
.plus {
		display: block;
		border: solid 1px black;
		border-radius: 25px;
		background: #666;
		color: #FFF;
		text-decoration: none;
		text-align: center;
}
.acceuil {text-align: center; border: 0;}

.sc-fFoeYl{display: none;}
@import url("dates.css");