/*
/*  M O B I L E    F I R S T
/*
/**********************
 * STYLES GENERIQUES *
 *********************/


* {
 	box-sizing: border-box;	
 	margin: 0;
 	padding: 0;
 }

 html {

 	font-size : 46.8%;  /* 1rem = 7.5px*/
 	margin : 0 auto;
	font-family:'Sniglet', sans-serif;
	line-height: 1.5;

 }

body {

	font-size : 1.5rem;
	text-align : center;
	color : #333;
	box-sizing: border-box;
	background-color: white;
}

main {

	/*padding-right : 4rem;*/
	margin : 2rem auto;
}

.clear {

	clear: both;
}

.hidden {
	display: none;
}

.active {

	background-color: rgba(255,219,0,0.5);
}

.flex {
	display : flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;	
}	

nav#menu ul {

	flex-direction: column;

}	

.flex-colonne {
	display : flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;	
}	

.flex1 {
	flex :1;
}

.flex2 {
	flex :2;
}

.flex3 {
	flex :3;
}

.flex4 {
	flex :4;
}

.alignegauche {
	text-align: left;
}

.centre {
	text-align: center;
}

.bordure {
	border: 5px solid rgb(255,219,0);
}

.posrelative {
	position: relative;
}

.margin1 {
	margin : 1rem;
}

.center {
	margin: 0 auto;
	text-align: center;
}

.pointer {

	cursor:pointer;

}

a, a:hover {

	text-decoration: none;
}

a.lien, .alien {

 	background: rgb(255,219,0);
	color : black;
	border : none;
	font-weight: bold;
	font-size : 1.5rem ;
	border-radius: 3rem;
	padding : 0.8rem;
}


a.lien:hover, .alien:hover {

	background: linear-gradient(#000, rgb(255,219,0));
	color: white;
	cursor: pointer;
}

.fa-user {

	font-size: 2rem;
	color : black;
}

.bg-coul-p1 {
	background-color : rgb(255,219,0);
}

.purple {
	color : purple;
}

.rouge {
	color : red;
}

.gris {
	color : #676767;
}

.blanc {
	color : white;
}

.noir {
	color : black;
}

.jaune {
	color : rgb(255,219,0);
}

.bold {
	font-weight: bold;
}

.italic {
	font-style : italic;
}

.minus {
	font-size: 1rem;
}


.opacity1
{
  opacity:1;
}

.boutondines {

	background: rgb(255,219,0);
	color : black;
	border : none;
	font-weight: bold;
	font-size : 1.5rem ;
	border-radius: 3rem;
	padding : 1rem;
}

input {

	border : none;
}


a {
	color : white;
	text-decoration: none;
}

.pageactive {
	
	color : rgb(255,219,0);
	font-style: italic;	
}


ul {
	list-style-type: none;
	padding-left: 0;
	margin : 0;
}

h1, h2 {

	margin-bottom: 2rem;
}

/**************
     HEADER
***************
*/

header nav a:hover {

	color : rgb(255,219,0);			
}

header h1 {

	padding: 0 3rem;
}


nav {

	width : 75%;
	margin: 0.5rem auto; /* modifié le 14 avril 2020 avant : 2rem */
	padding-bottom: 1rem; /* modifié le 14 avril 2020 avant : 3rem */
}

header nav li {

	padding: 1.5rem 0 1.5rem;
}

header nav a {

	font-size: 2.5rem;
	padding : 10px;
	color : white;
	width : 15%;
}


/******************************
   MAIN
 ******************************
 */

 div#main1 {

 	justify-content: center;

 }

/*****************
    FORMULAIRE 
******************/

#resa-form button.close {

	font-size : 4rem;
}

section#formulaire {

	border: 0.5rem solid rgb(255,219,0);
	margin: 2rem auto;
	padding: 1rem;
}

#formulaire a {
	color:black;
}

input#nom {
	text-transform: uppercase;
}

input#prenom {
	text-transform: capitalize;
}

#formulaire form input, #formulaire form select {

	border: 0;
	border-bottom: 1px solid #dedede;
	background-color: white;
	padding: 0.5rem;

}

#formulaire form input[type=radio] {

	margin-bottom: 2rem;

}

#formulaire form input[type=checkbox] {

	margin-bottom: 2rem;

}

#formulaire form a.rgpd {

	font-weight: bold;
	text-decoration: underline;
	
}

#formulaire form a.rgpd:hover, form a.rgpd:focus {

  color: #a60000;
  text-decoration: none;
}

#formulaire form a.rgpd :visited  {

	color : purple;
}

#formulaire label {

	margin-left: 1rem;
	font-size: 1.8rem;
}

#formulaire select {

	padding: 0.5rem;
	margin: 2.5%;
	border : solid 2px rgb(255,219,0);
}

#formulaire textarea, #formulaire input  {

	padding: 1rem;
	font-family:'Sniglet', sans-serif;
	border : solid 2px rgb(255,219,0);
}

.form-control {

	font-family:'Sniglet', sans-serif;
	font-size: 2rem;
	border : solid 2px rgb(255,219,0);

}

a#envoi-form:hover {

	color:white;
}

p#msgretour {

	background-color: black;
	margin-top: 1rem;
	font-size: 1.5rem;
}

div#msgenvoimail {
	position: absolute;
	top:30%;
	left:20%;
	background-color: #ccc;
	color: black;
	font-size: 2rem;
}

div#msgenvoimail.attente {

	animation-name: envoimail;
  	animation-duration: 30s;

}

@keyframes envoimail {
  5% {color:#ccc;}   7%  {color:black;}
  11%  {color:#ccc;} 13%  {color:black;} 
  17%  {color:#ccc;} 19%  {color:black;}
  23%  {color:#ccc;} 25%  {color:black;}
  29%  {color:#ccc;} 31%  {color:black;}
  35%  {color:#ccc;} 37%  {color:black;}
  41%  {color:#ccc;} 43%  {color:black;}
  47%  {color:#ccc;} 49%  {color:black;}
  53%  {color:#ccc;} 55%  {color:black;}
  59%  {color:#ccc;} 61%  {color:black;}
  65%  {color:#ccc;} 67%  {color:black;}
  71%  {color:#ccc;} 73%  {color:black;}
  77%  {color:#ccc;} 79%  {color:black;}
  83%  {color:#ccc;} 85%  {color:black;}
  89%  {color:#ccc;} 91%  {color:black;}
  95%  {color:#ccc;} 97%  {color:black;}
  
}

header h3 {

	color : rgb(255,219,0);
	font-size : 2rem;
}

header h3.attente {

	animation-name: attente;
  	animation-duration: 10s;

}


/******************************
   DIAPORAMAS
*******************************
*/

.diaporama {

	width:90%;
	margin: 0 auto;
}

.diaporama ul {

	padding-bottom: 2rem;
}

.diaporama li.grandformat {

	width: 100%;
	position: relative;
}

.diaporama li.grandformat p {

	position: absolute;
	top:10px;
	left:10px;

}

.diaporama li p.legende span {

		display : none;
}

.diaporama li.grandformat p.legende {

	padding: 0.5rem;
	background-color: white;
	color: rgb(70,70,70);
	border-radius: 1rem;
}


.diaporama li.grandformat button {

    position : absolute;
    font-size: 4rem;
    font-weight: normal;
    background-color: rgba(255,219,0,0.7);
    border : none;
    color : white;
    padding: 2rem 1rem;
    top : 20%;

}

.diaporama li.grandformat button:hover {

	display: block;

}


button.diaposuiv {

	border-radius: 1rem 0 0 1rem;
	right : 0;
}

button.diapoprec {

	border-radius: 0 1rem 1rem 0;

}

	
.diaporama li:first-child {

	margin-bottom: 2rem;
}


.diaporama li.petitformat{

	width: 48%;
	margin: 0 auto;
	cursor:pointer;
}


.diaporama li img {

	width: 100%;
	height: auto;

}

/****************
    FOOTER
*****************
*/
footer p {

	font-weight: bold;
	font-size: 1.5rem;
	margin : 0 auto;
}

footer h2 {

	font-size: 3rem;
	padding: 0 3rem;
}

footer h3 {

	font-size: 6rem;
	line-height: 0;
	margin : 5rem auto;
}

footer nav a {

	font-size: 2rem;
}

footer section#ondininfo {
	background-color : rgb(255,219,0);
	color : black;
	margin-top: 2rem;
	padding : 2.5rem 0 3rem;
}

/*footer div div:nth-child{
	display:  inline-block;
}*/
footer section#ondininfo img {

	display : block;
	width: 6rem;
/*	height: 13rem;*/
	margin : 1rem auto;

}

footer section#ondininfo>div {

	text-align: center;
	width : 75%;
	margin: 0 auto;

}

footer section#ondininfo div div {

	width : 90%;
	margin: 0 auto;
}

footer section#ondininfo div div:nth-child(2n) {

	border-left: 1px solid black;
	opacity : 0.1;
}

footer section#mentions {

	background-color : #222;
	padding-bottom: 3rem;
	justify-content: center;
}

footer section#mentions a {

	color : white;
}

footer section#mentions a:hover{
	background-color : black;
	color : rgba(255,219,0,1);						
}

footer nav {

	padding: 3rem;
	margin : 0 auto;
}

.flaticon {

	margin: 0 auto;
	font-size : 1rem;
}

/**********************************/
/* F O R M A T    T A B L E T T E */
/**********************************/

 @media only screen and (min-width: 760px ) {

 	html {

	 	font-size : 56.25%;			/* 1rem = 9px */
		line-height: 1.5;
 	}


	nav#menu .flex {
	
		flex-direction: row;

	}	



	nav ul.flex {

	 	flex-wrap: nowrap;
	 }

 	

/* ------------------------------------------->  HEADER 
*/
	header nav a {

		font-size: 2rem; /* modifié le 14 avril 2020 avant : 1.5rem */

	}

	/****************
	    DIAPORAMAS
	*****************
	*/
	.diaporama li p.legende span {

		display : inline;
	}

	.diaporama li.grandformat button {

	    top : 40%;
	}


	/****************
	    FOOTER
	*****************
	*/

	footer section#ondininfo div div.info {

		width : 30%;
	}

	footer section#ondininfo div div.vide {

		width : 0%;
	}

	/****************
	 FORMULAIRE
	*****************
	*/	

	.form-control {

		font-size: 2rem;

	}

	div#msgenvoimail {

	font-size: 3rem;
}



}

/**********************************/
/* F O R M A T    D E S K T O P   */
/**********************************/

 @media only screen and (min-width: 1025px ) {

 	 html {

	 	font-size : 62.5%;	/* 1rem = 10px*/
		line-height: 1.5;
 	}
	

	head {
		position : relative;
	}

	.pageactive::after, .pageactive::before {
		content: "  __  ";
		color : white;

	}


 }