/* Notes : 1rem = 12pt = 16px = 100% / L'unité rem est relative à sa définition à la racine (html), donc sa référence de base ne varie pas */
/*@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400&display=swap');*/
html{ width:100%; height:100%; background-color:#FFFFFF; zoom:100%; }
body { display:flex; display:-webkit-flex; flex-direction:column; -webkit-flex-direction:column; width:100%; min-height:100vh; margin:0 auto  0 auto; background-color:#9d8686; }
main { display:flex; display:-webkit-flex; flex:1 1 auto; width:100%; }
aside { width:10em; background:#33CCDD; }

.header { position:fixed; display:flex; display:-webkit-flex; flex-direction:row; justify-content:center; align-items:flex-end; width:100%; height:65px; margin:0; padding:0; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); background-color:#e1dac4; z-index:1000; }
/*.header_accueil { background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); }*/
.main { display:flex; display:-webkit-flex; flex-direction:column; margin-top:65px; background-color:transparent; align-items:center; } /* Comme le header est fixé (donc inline) => l'élement contenu (main) sera margé TOP vers le haut de la hauteur du header  */
/* background-image:url(fond60.jpg); background-repeat:no-repeat; background-position:50% 50%; background-size:contain;*/
.navMenuSite { width:100%; background-color:#e1dac4; background-image:url(fond-menu-motif.png); background-repeat:repeat-x; background-position:0% 100%; } 
.menuSite { display:flex; display:-webkit-flex; justify-content:center; margin:0 0 0 0; padding:0; list-style:none; order:2; font-family:Garamond, Baskerville, bitstream, serif; font-size:1.15rem; /*letter-spacing:-0.06rem;*/ }
.menuSite li { display:flex; display:-webkit-flex; align-items:flex-end; margin-left:1%; margin-right:1%; }
.menuSite li:last-child{  }
.menuSite a { display:flex; display:-webkit-flex; height:auto; height:34px; justify-content:center; align-items:center; color:#9d8686; font-weight:bold; text-decoration:none; font-family:Garamond, Baskerville, bitstream, serif; }
/*.menuSite a:not(.accueil a) { margin-top:1rem; }*/
.menuSite .accueil a { position:absolute; left:0; display:flex; display:-webkit-flex; width:290px; height:70px; font-size:0px; margin-bottom:-0.80rem; color:transparent; background-image:url(logo-institut-valmy2.png); background-repeat:no-repeat; background-position:0% 0%; }
.menuSite a:hover { text-decoration:underline; }
.menuSite .pageActive:not(.contact) { text-decoration:underline; color:#d84540; font-weight:normal; }

.menuSite .contact a { display:block; position:absolute; right:0; width:266px; height:37px; color:transparent; cursor:default; text-decoration:none; background-image:url(contact.png); background-repeat:no-repeat; background-position:50% 6px; background-size:80%; }


nav#navMenuSite li.sousmenu { float:left; }
nav#navMenuSite ul ul { display:none; text-decoration:none; } 
nav#navMenuSite { position:relative; }
nav#navMenuSite .niveau2 li a{ justify-content:start; }
nav#navMenuSite ul.niveau1 li.sousmenu:hover ul.niveau2, 
nav#navMenuSite ul.niveau2 li.sousmenu:hover ul.niveau3 { position:absolute; margin-top:-4rem; display:block; background:red; }

.langues { display:flex; display:-webkit-flex; height:100%;  align-self:flex-start;  margin:0rem 1rem 0 0; padding:0; list-style:none; color:#000000; font-family:Garamond, Baskerville, bitstream, serif; font-size:0.8rem; }
.langues .lgSeparateur { display:flex; display:-webkit-flex; height:100%; align-items:center; justify-content:center; margin-left:0.1rem; margin-right:0.1rem; } 
.langues a { display:flex; display:-webkit-flex; text-decoration:none; color:#000000; height:100%; align-items:center; justify-content:center; }
.langues .lgActive { opacity:0.3; cursor:default; }

/* BOUTON MENU INIT */
.btnMenu { position:fixed; width:40px; height:40px; background-color:transparent; border:0; background-image:url(menu.svg); background-size:80%; background-repeat:no-repeat; background-position:50% 0%; z-index:10000; }
.show-menu-btn { display:none; font-size:0px; cursor:pointer; transition:0.2s; }
#chk{ position:absolute; visibility:hidden; z-index:-1111; }

/*.main:not(.mainAccueil){ display:inline-flex; align-items:center;  }*/

/* PAGE INSTITUT */
.mainInstitut { display:flex; display:-webkit-flex; flex-direction:column; flex-wrap:wrap; width:900px; align-items:start; justify-content:start;  margin-left:auto; margin-right:auto; background-color:#FFF; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); }
#institut .bloc { display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; background-color:#FFFFFF; width:100%; }
#institut h3 { margin:1rem 1rem 0rem 1rem; font-size:2rem; letter-spacing:0.3rem; text-decoration:none; text-align:center; color:#9d8686; width:100%; }
#institut h4 { margin:0.5rem; font-size:1.5rem; letter-spacing:0.5rem; color:#c7b1b1; width:100%; }

#institut .description { display:flex; display:-webkit-flex; width:100%; margin:0.2rem 0rem 0rem 0rem; text-align:justify; padding:0; color:#444444; }
#institut img { margin:0; padding:0; border:0; margin:0.5rem; box-shadow:2px 2px 5px 2px rgba(0,0,0,0.3 ); }
#institut .contenu { display:flex; display:-webkit-flex;flex-direction:colum; display:flex-inline; flex-wrap:wrap; margin:0; margin-right:0.5rem; padding:0; width:99%; height:100%; }
#institut .titredesc { width:99%; margin:0rem; padding:0; font-size:1.5rem; font-weight:bold; letter-spacing:0.2rem; color:#CC9966; }
#institut .textedesc { margin:0; padding:0; height:100%;  }

#institut .separateur { width:300px; margin-left:auto; margin-right:auto; } /* margin-top:0rem; padding:0; margin-bottom:1rem; margin-left:calc(50% - 150px); */
#institut .separateur hr { color:#9d8686; }
/*#institut  img{ width:300px; height:200px;}*/

/* PAGE PUBLICATIONS */
.mainNospublications { display:flex; display:-webkit-flex; flex-direction:column; flex-wrap:wrap;  align-items:start;  justify-content:start;  margin-left:auto; margin-right:auto; background-color:#FFF; width:900px; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); }
.mainNospublications a { display:block; margin:1rem 1rem 1rem 1rem; padding:0.3rem; border:1px solid #e1dac4; width:95%; border-radius:5px; text-decoration:none; transition:box-shadow 0.4s; }
.mainNospublications a:hover { box-shadow:0px 0px 8px #003366; }
.mainNospublications div { /*display:flex; display:-webkit-flex;*/ margin:0rem 1rem 1rem 1rem; padding:0.3rem; border:1px solid #e1dac4; width:95%; border-radius:5px; }
.mainNospublications div:first-child { margin-top:1rem; }
.mainNospublications h3 { text-align:center; font-size:1.9rem; letter-spacing:0.3rem; text-decoration:none; color:#bf1d1d; } /*9d8686*/
.mainNospublications p { font-size:1.2rem; color:#47526d; } 
.mainNospublications img { margin-left:0.2rem; margin-right:1rem; float:left; box-shadow:0px 0px 3px 1px rgba(0,0,0,0.3); zoom:50%; }

/* PAGE PRESSE */
.mainPresse { display:flex; display:-webkit-flex;  /*flex-wrap:wrap; align-items:start; justify-content:center;*/ margin-left:auto; margin-right:auto; background-color:#FFF; width:900px; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); }
.mainPresse ul { display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; margin:0; padding:0; list-style:none; }
.mainPresse li { width:46%; margin:1rem; border:1px solid #e1dac4; border-radius:5px; transition:box-shadow 0.4s; }
.mainPresse li:hover { box-shadow:0px 0px 8px #003366; } 
.mainPresse h3 { text-align:center; font-size:1.5rem; letter-spacing:0.3rem; text-decoration:none; color:#bf1d1d; }
.mainPresse h4 { text-align:center; font-size:1rem; letter-spacing:0.3rem; text-decoration:none; color:#9d8686; } 
.mainPresse .img { width:150px; height:150px; float:left; padding:0; border:1px solid #e1dac4; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; border-radius:5px; }
.mainPresse a { width:100%; height:100%; text-decoration:none;  }

/* PAGE NOS ÉVÉNEMENTS */
.mainNosevenements { display:flex; display:-webkit-flex;  /*flex-wrap:wrap; align-items:start; justify-content:center;*/ margin-left:auto; margin-right:auto; background-color:#FFF; width:900px; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); }
.mainNosevenements .listeEvenements { display:flex; display:-webkit-flex; flex-direction:column; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; margin:0; padding:0; list-style:none; }
.mainNosevenements .listeEvenements li { width:95%; margin-top:1rem; border:1px solid #e1dac4; border-radius:5px; transition:box-shadow 0.4s; }
.mainNosevenements .listeEvenements li:hover { box-shadow:0px 0px 8px #003366; } 
.mainNosevenements .listeEvenements h3 { text-align:center; font-size:1.5rem; letter-spacing:0.3rem; text-decoration:none; color:#bf1d1d; margin:1rem 0 1rem 0; }
.mainNosevenements .listeEvenements h4 {  text-align:center; font-size:1.2rem; margin:0; letter-spacing:0.3rem; text-decoration:none; color:#9d8686; margin:0 0 0 0; } 
.mainNosevenements .listeEvenements p { font-size:1.2rem; color:#47526d; text-align:justify; } 
.mainNosevenements .listeEvenements .img { width:200px; height:200px; float:left; margin-right:1rem; padding:0; border:1px solid #e1dac4; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; border-radius:5px; }
.mainNosevenements .listeEvenements a { width:100%; height:100%; text-decoration:none; }

.mainNosevenements .detailEvenements { display:flex; display:-webkit-flex; flex-direction:column; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; margin:0; padding:0; list-style:none; }
.mainNosevenements .detailEvenements li { width:95%; margin-top:1rem; margin-bottom:1rem; border:1px solid #e1dac4; border-radius:5px; box-shadow:0px 0px 8px #003366; }
.mainNosevenements .detailEvenements h3 { text-align:center; font-size:1.5rem; letter-spacing:0.3rem; text-decoration:none; color:#bf1d1d; margin:1rem 0 1rem 0; }
.mainNosevenements .detailEvenements h4 {  text-align:center; font-size:1.2rem; margin:0; letter-spacing:0.3rem; text-decoration:none; color:#9d8686; margin:0 0 0 0; } 
.mainNosevenements .detailEvenements p { padding:0.5rem; font-size:1.2rem; color:#47526d; text-align:justify; } 
.mainNosevenements .detailEvenements .img { width:400px; height:400px; float:left; margin-right:1rem; padding:0; border:1px solid #e1dac4; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; border-radius:5px; }
.mainNosevenements .detailEvenements a { width:auto; height:100%; text-decoration:none; }
.mainNosevenements .eventDoc { display:inline-flex; margin:1rem; padding-left:2rem; width:50rem; color:#9d8686; font-size:1.5rem; background-image:url(dl.png); background-repeat:no-repeat; background-position:50% 50; background-size:contain; transition:opacity 0.4s; }
.mainNosevenements .eventDoc:hover { opacity:0.7; text-decoration:underline; }
.mainNosevenements .retour { color:#B85F1D }

/* PAGE NOUS SOUTENIR */
.mainNoussoutenir { display:flex; display:-webkit-flex; flex-direction:column; flex-wrap:wrap; align-items:center; margin-left:auto; margin-right:auto; background-color:#FFF; background-image:url(frise_page0.15.jpg); background-repeat:no-repeat; background-position:0% 100%; width:900px; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); }
.grilleNs { display:flex; display:-webkit-flex; flex-direction:row; justify-content:space-evenly; flex-wrap:wrap; width:99%; margin-top:2rem; margin-bottom:1rem;  }
.grilleNs fieldset { border-radius:5px; }
.grilleNs legend { font-size:2.5rem; color:#9d8686; letter-spacing:0.8rem; text-transform:uppercase; }

.adherez {}
.adherez p { display:flex; display:-webkit-flex; width:100%; }
.adherez input { width:11rem; border-radius:4px; font-size:inherit; }
.adherez select { width:17rem; }
.adherez label { width:70%; margin-right:.5rem; text-align:right; }
.adherez label::after { content: " :"; }
.adherez .submitAdherez { display:flex; display:-webkit-flex; align-items:center; justify-content:center; }
.adherez button { font-size:22px; cursor:pointer; padding:0.5rem; color:#9d8686; }
.adherez .envoiOk { font-size:1.4rem; color:#bf1d1d; font-weight:bold; }
.adherez .infoAdherez { font-style:italic; color:#666666; }

.adherez input {  }
.adherez input[type=text] { background:#EEEEEE; transition:all 0.3s;  /*padding:0 10px;*/ border:1px solid #888; color:#666666; /*margin:10px 0; line-height:45px;*/ } /*Input Base*/
.adherez input:focus { background:#97ABBE; border-color:#999; color:#FFFFFF; } /*Only on focus*/
.adherez input:valid { box-shadow:0 0 2px rgba(0,255,0,0.4); } /*Only on valid*/
.adherez input:valid:focus { background:#80BE93; box-shadow:none; } /*Only on focus and valid*/
.adherez input:invalid { box-shadow:0 0 2px rgba(255,0,0,0.4); } /*Only on invalid*/
.adherez input:invalid:focus{ background:#CB9089; box-shadow:none; } /*Only on focus and invalid*/
.adherez input::placeholder { color:transparent; opacity:0; }
/*.adherez .btnParticipants { width:160px; margin-left:0px; padding:5px; border:1px solid #CCCCCC; background:#FFFFFF; font:normal 14px "Century Gothic","Avantgarde Bt","Tw Cent MT", sans-serif; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
.adherez .btnParticipants:hover { border:1px solid #ef3c3c; color:#ef3c3c; }
.adherez input::placeholder { color:transparent; opacity:0; }
*/
.don {}
.don ul { margin:0.5rem; padding:0; list-style:none; }
.don li { font-size:1.5rem; color:#333333; }
.don li p { font-size:1.4rem; letter-spacing:0.3rem; color:#969; background-color:#DDDDDD; }
.don li:first-child { margin-bottom:4rem;  }
.don li span { font-weight:bold; }

/* PAGE MENTIONS LÉGALES */
.mainMentions { margin-left:auto; margin-right:auto; background-color:#FFF; width:900px; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); }
.mainMentions h2 { color:#9d8686; font-size:2rem; letter-spacing:0.3rem; text-decoration:none; }
.mainMentions p { font-size:1.1rem; color:#444444; }


/* BAS DE PAGE */
.footer { background-color:#333333;  display:flex; display:-webkit-flex; justify-content:center; flex-wrap:wrap; width:100%;}
.navBasDePage { display:flex; display:-webkit-flex; align-items:center; }
.basDePage { display:flex; display:-webkit-flex; flex-wrap:wrap; margin:0; padding:0; list-style:none;  font-family:Garamond, Baskerville, bitstream, serif; color:#FF0000; }
.basDePage li { margin-left:.2rem;/* margin-right:.2rem; padding-right:.5rem;*/ }
/*.basDePage li:first-child{ border-right:1px dotted #000000;  }*/
.basDePage p { display:flex; display:-webkit-flex; height:100%; align-items:center; margin:0; padding:0; color:#CCCCCC; font-size:0.8rem;}
.basDePage a { display:block; font-size:0.7rem; font-weight:normal; text-decoration:none; }
.basDePage h1 { padding:0; margin:0; color:#000000;font-weight:normal; text-decoration:none; font-size:0.8rem; color:#CCCCCC; transition:0.3s; }

.basDePage .contact { display:none; } /* invisibilise contact A SUPPRIMER */

#basDePage h1:before { content:'• \000020 '; color:#CCCCCC; } 
#basDePage li:first-child a h1:before { content: ''; }*/
/*#basDePage li:last-first a h1:before { content: ''; }/
/*#basDePage h1 { display:inline; }*/

.basDePage h1:hover { color:#C49A6C; }
.basDePage .accueil { order:-1; }
.basDePage .copyright { order:-2; }

#basDePageLogo { display:flex; display:-webkit-flex; justify-content:center; filter:drop-shadow(0px 0px 3px #FFFFFF); }
#basDePageLogo a { display:block; width:150px; height:32px; margin:1rem; background-image:url(logo-darkenciel.svg); background-repeat:no-repeat; background-position:50% 50%; background-size:contain;  opacity:1; transition:0.3s; }
#basDePageLogo a:hover { opacity:0.8; }

@media (max-width:840px){
	
	/* ENTETE */
	.header { background-color:#e1dac4; background-image:url(frise_mob.jpg); background-repeat:no-repeat; background-position:0 0; }
	
	/* BAS DE PAGE */
	.footer { justify-content:center; align-items:center; }
	.navBasDePage { justify-content:center; align-items:center; }
	.basDePage { justify-content:center; align-items:center; }
	
	/* ACCUEIL */
	fondAccueil { display:none; }
	.body_accueil img { display:none; }
	body { background-image:url(fond_mob.png); background-repeat:no-repeat; background-size:cover;}
	.mainAccueil{ background-image:url(logo-institut-valmy_mob.png); background-repeat:no-repeat; background-position:50% 20%; background-size:contain; }
	
	/* INSTITUT */
	.mainInstitut { width:auto; }
	#institut img { width:100px; height:100px; }
	#institut h4 { text-align:center; font-size:2rem; text-decoration:underline; letter-spacing:0.4rem; }
	#institut p { border-top:1px solid #EEEEEE; }
	#institut .bloc { margin-top:1rem; }
	
	/* PUBLICATIONS */
	.mainNospublications { width:auto; /* min-width:505px;*/ }
	.mainNospublications a { margin-left:auto; margin-right:auto; }
	.mainNospublications h3 { font-size:1.6rem; }
	
	/* PRESSE */
	.mainPresse { width:auto; }
	.mainPresse li { width:99%; margin:1rem; }
	
	/* ÉVÉNEMENTS */
	.mainNosevenements { width:auto; }
	.mainNosevenements .detailEvenements p { margin-left:0.5rem; margin-right:0.5rem; padding:0; }
	.mainNosevenements .detailEvenements .img { width:100%; background-position:50% 50%; }
	
	/* NOUS SOUTENIR */
	.mainNoussoutenir { width:auto; }
	.grilleNs fieldset { width:95%; }
	.adherez input { width:100%;  }
	.adherez select { width:100%; }
	.adherez label { width:30%; margin-right:.5rem; text-align:left; }
	
	/* MENTIONS LÉGALES */
	.mainMentions { width:auto; }
	.mentionslegales { margin:0rem 1rem 0rem 1rem; }
	
	/* BAS DE PAGE */
	.basDePage {  margin-top:1rem; }
	
	
	/*BOUTON MENU MOBILE*/
	.btnMenu { display:block; top:0rem; right:0.2rem; border-radius:5px; cursor:pointer; } 
	.show-menu-btn { display:block; }
	#chk:checked ~ .navMenuSite { right:0; } /* top:0;si de haut en bas et vice versa top:0 */
	#chk:checked+label .btnMenu { width:40px; height:40px; border:0; background-image:url(fermer3.svg); background-color:transparent; background-size:80%; background-repeat:no-repeat; background-position:50% 0%;}
	
	.navMenuSite {
		position:fixed;
		display:flex; display:-webkit-flex; display:-webkit-flex;
		width:100%;
		height:100%;
		background-color:#FFFFFF;		
		right:-100%;/*right: -100%; 100% si gauche->droite */
		top:0; /*top:-100%; 100% si haut en bas et vice versa */
		text-align:center;   
		line-height:normal;
		transition: 0.3s;
	   /* overflow-x:none; */
		overflow-y:none; /* fixe modal menu pour Android */
		scrollbar-color:#333 #999; /* fixe modal menu pour Android */
		scrollbar-width:thin;  /* fixe modal menu pour Android */	
		z-index:1005;		
	}
	.navMenuSite #menuSite
	{
		margin-left:0px;
		display:flex; display:-webkit-flex;
		display:-webkit-flex;
		flex-direction:column; -webkit-flex-direction:column;
		-webkit-flex-direction:column; -webkit-flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		width:100%;
		height:100vh;
		padding:0;
		margin:0;
		list-style:none;
		font-size:auto; 
	}
	.menuSite li { display:flex; display:-webkit-flex; width:100%; height:100%; margin:0; background-color:#333333; border-top:1px dotted #8e6b45; }
	
	/*.menuSite a:not(.accueil a) { margin-top:0rem; }*/	
	.menuSite { font-size:1.6rem; }
	.menuSite .accueil a { display:flex; display:-webkit-flex; width:100%; background-image:url(fond_menu_mob.png); background-position:50% 50%; text-decoration:none; }
	.menuSite a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; text-decoration:none;  }
	.menuSite #menuSiteAccueil { order:-50; }
	.menuSite .pageActive:not(.menuSite .accueil) { text-decoration:none; color:#FFFFFF; background-color:#9d8686; text-decoration:none;  }
	.menuSite .pageActive a {color:#000000; text-decoration:none; }

	
}
/*
Jusqu’à 479px : smartphone en portrait
De 480px à 959px : smartphone en paysage, tablette en portrait et petite tablette en paysage
De 960px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne
1281px et au delà : grand écran d’ordinateur (21″ et + en plein écran )
*/