@font-face {
    font-family : Coolvetica;
    src: url(../img/coolvetica_rg.ttf);
}
body{
		font-family: Arial;
		font-size: clamp(3vw, 4.5vw, 1.125rem);
		/*font-size: 4vw;*/
		padding: 0;
		margin : 0;
		text-align: center;
		background-color: #CCC; color: #335391;
	}
header {
		font-family: Coolvetica;
		margin:0;
		padding: 0 10vw;
		font-size: clamp(34px, 5.5vw, 1.125rem);
		font-size: 5vw;
		line-height: 10vh;
		text-align: left;}
header a{
		color: #335391;
		text-decoration: none;
	}
	
/* NAV */


	nav {
		font-family: Coolvetica;
		font-size: clamp(3vw, 14.5vw, 15vh);
		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;}
	/* ----------*/
    #main_pages, #croix
    {
        display: none;
        flex-direction: column;
        background: none;
        
    }
	#croix, #burger
	{	position: fixed;
		font-size: 5vw;
		line-height: 10vh;
		top:0px;
		right:10vw;
		text-transform: uppercase;}
	#croix {font-size: 10vw;}
    nav #main_pages a {
        width: 50%;
    }
	
	

    
	nav a {
		color: #666;
		text-decoration: none;
	}
	nav a:hover {
		color: #666;
		
	}
/* --- Nav*/

footer {position: fixed; bottom:0; z-index: -2;width: 100vw; background: #4763A5; height: 10vh;color: #FFF;padding:0 0 1.5rem;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) {
	footer li {width: 40px;}
	footer img {width: 30px;}
	footer {font-size: 14px;}
}
div { 
		position: relative;
		color: grey;
		padding: 5px;
		background: white;
		min-height: 100%;
		z-index: 0;
		text-align: justify;
		padding: 0;
	}
#corps {margin-bottom: 12vh;padding: 0 10vw;}
/*--------------------------*/
#img {
  display: grid;
  gap: 1rem;
  padding: 1rem;

  /* Mobile-first : 1 figure par ligne */
  grid-template-columns: 1fr;
}

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

/* Chaque figure */
#img figure {
  margin: 0;
  background: #f8f8f8;
  padding: 0.5rem;
  border-radius: 4px;
  text-align: center;
  transition-property: opacity;opacity:0.7;
}

/* Images fluides */
#img figure img {
	
  width: 100%;
  
  height: auto;
  display: block;
  border-radius: 4px;
}
#img figure:hover{width: 100%; opacity: 1; transition-duration: 2s;}
/* Figcaption responsive */
#img figure figcaption {
  margin-top: 0.5rem;
  color: #F33;
  /*font-size: clamp(1rem, 4vw, 1.1rem);*/
  line-height: 1.4;
  border-bottom: 1px dotted #C0C;
}

/*---------------------*/
.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;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		
	}
.parallax #corps {margin-top: 40vh;}

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