@font-face{font-family:'police'; src:url('IMFeGPrm28P.ttf');}
	@font-face{font-family:'caladea'; src:url('Caladea.ttf');}
	@font-face{font-family:'annonce'; src:url('IMFeGPrm28P.ttf');}
	@font-face{font-family:'chili'; src:url('Pyktor.ttf');}
	@font-face{font-family:'wonder'; src:url('Wonderland.ttf');}
	
	*{margin:0px; padding:0px; font-family:open sans, caladea; font-size:1.01em; scroll-behavior: smooth;}
	
	#phone, article h4, #d1 h2 a, #encart h2, #invisible{font-family:police;}
	
	h1, h2, h3, nav li a, header h2 a, #amorce, #encart h2 a{font-family:caladea;}
	

	body{background:linear-gradient(to right bottom,purple,mediumorchid) fixed; background-size:contain;}
	section{max-width:1250px; margin:auto; background:mistyrose;}
	
	
/*  ENTETE */
	
	
	#entete{max-width:100%; margin:0px; padding:0px;}

	header{display:flex; flex-wrap:wrap; padding:3em 3em 0em 3em; background:url('bgcouple.png') right no-repeat, linear-gradient(to right bottom, mediumblue, darkorchid, orchid, darkorchid); background-size:contain;}
		
		#headerimg img{width:175px;  transition:0.5s;}
			#headerimg:hover {animation: shake 1.2s; animation-iteration-count: infinite; filter:contrast(180%); filter:brightness(180%); transition:0.3s;}

@keyframes shake {
  0% { transform: translate(0px, 0px) rotate(-1deg); }
  20% { transform: translate(0px, 3px) rotate(0deg); }
  35% { transform: translate(0px, 5px) rotate(1deg); }
  50% { transform: translate(0px, 7px) rotate(1deg); }
  65% { transform: translate(0px, 5px) rotate(1deg); }
  80% { transform: translate(0px, 3px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(-1deg); }
}
		#header1{ margin:1em 0px 1em 0px;}
			#header1 p a{transition:0.3s; color:white;}
			#header1 p a:hover{text-shadow:0px 0px 1px yellow,0px 0px 2px white,0px 0px 3px white,0px 0px 4px white,0px 0px 5px white; transition:0.3s;}
			
			#header1 a{font-family:wonder; font-size:3em;}
		
		#headernum{display:flex; flex-wrap:wrap; padding-left:2.5em;}
			#headernum div{padding:1em; text-align:center; border:solid 8px midnightblue; transition:0.25s;}
			#headernum div:first-of-type{margin-right:2em; background:linear-gradient(to bottom,magenta,magenta, darkmagenta);}
			#headernum div+div{background:linear-gradient(to bottom,yellow,gold,gold, goldenrod 90%, darkgoldenrod 100%);}
			#headernum p{font-size:2em;}
					#headernum div:hover{transform:scale(1.055); filter:brightness(120%); transition:0.4s; z-index:1;}
					#header2, #header3{}
					#header2:hover, #header3:hover a{filter:brightness(150%); transition:0.15s;}
					
				#header2 span, #header3 span{font-size:0.8em; line-height:0.5em;}
			
			
			
	@media screen and (max-width: 1100px) { 

		#entete{padding-top:4em; }
			header{display:block; padding:1em 0px 0px 0px; background:url('bgcouplemobil.jpg') top no-repeat, black; background-size:contain; flex-wrap:non-wrap; padding-top:20px; }
				#headerimg{display:none;}
				
				#headernum{padding:0em;}
			#headernum div:first-of-type{margin-right:0em;}

				header div, #header1, #header2, #header3{width:100%; align-items:strech; flex-direction:row;flex-grow:1; flex-basis:100%;}
				
				header div:nth-child(2){background:url('logo-precieuse.png') top left 50px no-repeat ; background-size:100px;}
				#header1 a{color:white; text-shadow:0px 0px 1px black,0px 0px 5px orangered;}
				
				header div{display:block; width:100%; margin:auto; padding:5px 0px; text-align:center;}
				
	}

	
	@media screen and (max-width: 640px) {

		#entete{padding-top:5px; background:url('bgcouplemobil.jpg') top no-repeat; background-size:contain;}
		#header1 a{font-size:2em;}
		
		header{background:rgba(20,20,20,0.5);}
		header div:nth-child(2){background:url('logo-precieuse.png') top left 5px no-repeat ; background-size:85px;}

	}
			
			
			
			
			
		#encours{animation: clignote 1.5s linear infinite;} @keyframes clignote { 25%{color:yellow} 50%  {color:orange; opacity: 50; }}

	nav{text-align:center; position:fixed; z-index:99; height:50px; width:100%; background:linear-gradient(to right,darkmagenta,magenta,darkmagenta); padding:0px; margin:0px;}
		nav input, nav label {display: none;}
		nav ul{list-style-type:none; }
			nav ul li{display:inline-block; vertical-align:top; padding:0px; margin:0px; max-width:20%;}
			nav a{height:50px; display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:bold; width:240px; background:plum; padding:0px 10px; margin:0px; transition:0.2s; overflow:hidden; color:black;}
			nav a:hover{background:gold; transition:0.2s;}
						
				nav ul li ul {position:relative; visibility:hidden; opacity:0; transition:0.5s; width:260px;  text-align:left; z-index:5;}
					nav ul li ul{z-index:5; visibility:hidden; display:none;}
					nav ul li ul li{max-width:100%;}
					nav ul li:hover ul li{z-index:5; visibility:; display:block;}
					nav ul li:hover ul{visibility:visible; display:block; opacity:1; transition:0.5s; z-index:5;}


	a{text-decoration:none; color:black;}
	
	button{background:linear-gradient(to bottom,pink, magenta); border:none; border-radius:5px; box-shadow:0px 2px 4px black; max-width:100%; margin:1em auto ; display:block; font-size:1.2em; transition:0.1s; animation: clignote 1.5s linear infinite;} @keyframes clignote { 50%  {filter:saturate(180%); opacity: 50; }}
		button:hover{filter:brightness(180%); transition:0.1s;}
		button a{display:block; color:yellow; padding:0.8em; text-align:center;  font-family:arial; text-shadow:0px 1px 1px black;}
		button a:hover{color:yellow;}
		button a:visited{color:yellow;}
		
	mark{background:none; text-align:underline;}

	
	section{margin-top:0px; padding:30px; min-height:630px; overflow:hidden;}
		#indexflow{margin: 0em 0em 2em 0em;}
		article{max-width:70%; display:inline-block; overflow:hidden; font-size:1.1em;}
			article h1{padding:0px 0px 30px 0px; text-align:center; font-size:1.8em; text-decoration:underline;}
				article h2,  #indexflow h2{/*background:mediumvioletred;*/ color:; padding:0.5em 0.5em; margin:20px 0px 10px 0px; font-size:1.4em; text-transform:uppercase;}
					article h3, #indexflow h3{/*background:rgb(220,50,180);*/ color:; padding:0.5em 0.5em; font-size:1.1em; margin:20px 0px 15px 0px;}
					article h4, #indexflow h4{font-size:1.2em; margin:20px 10px; text-decoration:underline; position:relative; text-indent:0.75em;}
					article h4:before{content:""; display:block; position:absolute; left:0em; top:-5px; width:8px; height:35px; background:deeppink;}
					article h5{text-align:center; background:paleturquoise; padding:0.45em; margin:0.2em 0em; font-size:1.1em;}
					article h6{text-align:left; background:paleturquoise; padding:0.45em; margin:0.2em 0em; font-size:1.1em;}
					
			article ul{list-style-type:disc; font-size:1.1em; margin:1em 0em; padding:0px 10px 0px 35px; text-align:justify;}
			article ol{list-style-type:numero; font-size:1.1em; margin:0px; padding:0px 10px 0px 35px; text-align:justify;}
			 article li{margin-bottom:0.5em;}
			 article p, #indexflow p{font-size:1.1em; text-align:justify; margin-bottom:15px; padding:0px 10px;}
			article a{color:darkmagenta;}
			article img{max-width:100%;}
			
			.cite{text-align:center; font-style:italic; font-size:1.1em;}
			blockquote{text-align:center; font-size:1.1em; color:slateblue;}
			
		#followpages{margin-top:25px; max-height:550px; overflow:auto; background:plum;}
			#followpages h2 a, h2 a, #followpages h3 a, h3 a{transition:0.1s; color:white;}
			#followpages h2 a:hover, h2 a:hover, #followpages h3 a:hover, h3 a:hover{color:white; transition:0.1s;}
		
		#encart{display:; background:rgb(250,180,0);}
			#encart h2{background:none; color:black; text-align:center; padding:15px 0px 0px 0px; margin-bottom:0px; font-size:1.5em;}
			#encart h2 a{ color:magenta; text-shadow:0px 0px 1px black; font-size:1.25em; transition:0.2s;}
				#encart h2 a:hover{color:orchid; transition:0.2s;}
			#encart h2 span{font-weight:bold;font-size:1.25em;}
			#encart p{padding:10px 35px; text-indent:0em;}
			#encart img{margin-right:0px; width:250px;}
			
		#esoterisme{margin:0px 0px 20px 0px;}
			#d1{display:flex; border-top:solid 1px black; margin:10px 0px; overflow:hidden;}
				#d1 div{display:block; padding:15px; width:80%;}
				#d1 div p{max-width:100%;}
					#d1 h2 a:hover{color:orchid}
					
					#d1 p a{border-bottom:1px solid black;}
					#d1 p a:hover{border-bottom:1px solid orchid;}

				#d1 img{transition:0.3s;}
				#d1 a{width:300px; overflow:hidden;}
				#d1 img:hover{transform: scale(1.2); transition:0.5s;}
				
		#partenaires{display:flex; flex-wrap:wrap; justify-content:space-between;}
			
	@media screen and (max-width: 1040px) 
	{
	
			#encart img{width:210px; padding-left:0px;}
	}
	
	@media screen and (max-width: 720px) 
		{
			
			 nav{max-height:none;}
			
			#encart{width:100%; flex-wrap:wrap;}
			#encart img{width:100%;}
			
			#d1{display:block; text-align:center;}
				#d1 div{width:95%; z-index:99;}
				#d1 img{width:100%; z-index:1;}
					#d1 img:hover{ transform: scale(1.03); }

		}

		aside{max-width:25%; display:inline-block; float:right; z-index:50; vertical-align:top; position:; right:0px;}			
			aside div{margin-bottom:15px; box-shadow:0px 5px 10px rgb(50,50,50); height:auto; transition:0.2s; perspective:500px; perspective-origin:50% 50%; display:flex; flex-direction:column;  overflow:hidden;}
				
				aside a{max-width:100%; z-index:0;}
				
				aside img{height:; width:200x; box-shadow:0px 10px 5px rgba(10,10,10,0.8); transition:0.2s; z-index:1;}
					aside a div:hover img{transform:scale(1.055); filter:brightness(120%); transition:0.4s; z-index:1;}

			/*		
				aside div p{background:khaki; border-radius:0px 0px 10px 10px; padding:5px 10px; margin-top:-30px; text-align:center; box-shadow:0px 5px 3px rgba(10,10,10,0.8); border-bottom:3px solid orange; transition:0.2s; z-index:99;}
					aside div:hover p{transition:0.5s; background:gold; z-index:99;}
					
				aside div:hover{transform:translate(0px,0px) rotate(5deg) skewX(0deg) skewY(0deg) scale(1.1,1.1); transition:0.5s; z-index:99;}
			*/



	footer{background:plum;  margin-top:0px; padding:20px 0px 20px 0px; text-align:center;}
		footer p{max-width:1250px; margin:15px auto;}
		footer p a{margin:0.5em; line-height:2em;}
		footer img{max-width:325px;}
		
		#logos-rs{max-width:750px; margin:auto; text-align:center; background:pink; border-radius:5px; padding:1em 0em;}
		#logos-rs p{font-size:1.05em;}
		#logos-rs img{transition:0.1s;  box-shadow:5px solid red; margin:0px 10px;}
		#logos-rs img:hover{transition:0.3s; filter: invert(75%) brightness(200%);}
		
	@media screen and (max-width: 720px) {
		
		#logos-rs{border-radius:0px;}
		#logos-rs img{min-width:; padding:0.5em;}

		
	}

		
	/* VOYANTS */
	
	#indexmed{display:flex; flex-wrap:wrap; justify-content:space-around;}
		#indexmed div{background:indigo; color:white; padding:0.5em; margin:0.5em;}
		#indexmed h3, #indexmed p{text-align:center; margin-bottom:0.5em;}
		#indexmed li{margin-left:1em;}
		#indexmed a{color:white;}
		
	.voyante{box-shadow:-0px -1px 3px black; padding:10px; margin:5px 5px; background:linear-gradient(to bottom,yellow,magenta); transition:0.3s; width:175px;}
	.voyante:hover{box-shadow:inset 0px 3px 3px black; transition:0.3s; }
	
	#fichevoyant{display:flex; flex-wrap:non-wrap;}
		#fichevoyant div:first-of-type{flex-basis:185px; flex-shrink:0; padding:10px 25px 20px 5px; border:solid 4px lemonchiffon; border-radius:1em 1em 0em 0em; margin-right:1em; background:linear-gradient(to bottom, palegoldenrod, gold);}
		#fichevoyant div:first-of-type p{text-align:center; font-size:0.95em; text-indent:0px;}
		#fichevoyant div:first-of-type ul{padding:1em 1.5em;}
		#fichevoyant div:first-of-type li{padding:0.15em 0em;}
		#fichevoyant div:nth-child(2){border-left:5px solid range; margin:1em; flex-shrink:;}
		
		#fichevoyant button{ display:block; text-align:center; animation-duration: 2.8s; animation-name: clignoter; animation-iteration-count: infinite; transition: 0.1s;}
			#fichevoyant button a{color:black; font-family:police; width:100%; width:150px; padding:1em;}
			
	@keyframes clignoter {
	0%   {background:linear-gradient(to bottom,yellow,orange); }
	40%   {background:linear-gradient(to bottom,yellow,orange); }
	55%   {opacity:0; }
	80%   {background:linear-gradient(to bottom,yellow,orange); }
	100% { background:linear-gradient(to bottom,yellow,orange); }
}
	
	
	@media screen and (max-width: 640px) {
		
	#fichevoyant{display:flex; flex-wrap:wrap;}
		#fichevoyant div:first-of-type{flex-basis:100%; flex-shrink:0; padding:0px; border:none; border-radius:1em 1em 0em 0em; margin-right:0em; display:flex;}
		.voyant{margin:5px 10px; display:block; flex-grow:0;}
		#fichevoyant div:first-of-type p{font-size:1.1em;  text-align:center;  flex-grow:1;}

		
		
		
	}

	/*PARTICULARS */
	
	.trio{display:flex; flex-wrap:wrap; justify-content:space-between; margin:1em 0em;}
		.trio div{width:33%; background:lightblue; box-shadow:0px 1px 2px black;}
		.trio div *{text-align:center;}
		.trio div h3{margin:0em 0em 0.5em 0em; background:deepskyblue; color:black; text-transform:uppercase;}
		.trio div p{text-align:center; color:;}
			.trio div p:first-letter{font-size:2em;}
		
	@media screen and (max-width: 640px) {
		
		.trio div{width:100%; margin:0.5em 1.5em;}

		
	}

	#aida{display:flex; flex-wrap:non-wrap; max-width:100%; margin:auto; box-shadow:0px 3px 5px black; text-align:center; overflow:hidden; justify-content:space-around; background:url%("voyance-gratuite.jpg") top no-repeat; background-size:cover;}
		#aida img:first-child{max-width:700px; border:10px solid darkviolet;}
		#aida div{background:linear-gradient(to top, yellow, white); border-radius:0; border:3px solid darkviolet; padding:0px 1em; flex-grow:1;}
		#aida div p:first-child{margin-top:10px; font-weight:bold;}
		#aida p{font-weight:bold; font-size:1.5em; font-family:caladea; padding-top:1.8em;}
		#aida div a>img{width:80px}
		#aida div:nth-child(n+2) img{width:135px; justify-content:center;}

	@media screen and (max-width: 1200px) {
	#aida{}
}
	@media screen and (max-width: 860px) {
	#aida{flex-wrap:wrap;}
	#aida img:first-child{border-top:10px solid magenta; border-bottom:10px solid midnightblue;}
		#aida p{padding-top:0.1em;}

	}
				
	@media screen and (max-width: 640px) {
	#aida{background:plum; margin:0px 0px; max-width:100%;} 
		#aida img:first-child{max-width:100%;}
	#aida div{max-width:27%; border-radius:0px; padding:0px 0.5em;}
		#aida p{font-size:1em;}
		#aida div p:first-child{text-decoration:none; font-weight:bold; margin-top:5px;}
	#aida div>img{width:70px}
	#aida div:nth-child(n+2) img{width:80px}
	
}
		
		#cat{ text-align:center; margin:20px 0px;}
		#cat a{border-radius:10px; font-size:1.8em; font-family:caladea; background:linear-gradient(to top,rgb(150,150,150),rgb(200,200,200), white); padding:9px; color:black; border:3px solid orange; transition:0.3s; font-style:italic;}
		#cat a:hover{background:linear-gradient(to top,rgb(220,220,220),rgb(250,250,250), white); transition:0.2s;}
	
	#troisboutons{width:100%; height:11em; background:url('voyance-gratuite.jpg') center fixed; background-size:contain; text-align:center; box-shadow:inset 0em 0.5em 1em black;}
		#troisboutons div{display:flex; flex-wrap:wrap; justify-content:space-between; padding-right:25px; padding-left:25px;}
			#troisboutons h3{font-family:chili; font-size:2em; color:white; text-shadow:0px 2px 3px black; padding:10px 0px 0px 0px;}
			#troisboutons p{text-align:center; margin-top:1.5em;}
		#troisboutons a{background:linear-gradient(rgb(250,250,190),rgb(250,250,150),yellow); border-radius:1em; padding:10px 25px; font-family:chili; border:solid rgb(150,20,110); border-width:0px 2px 5px 2px; transition:0.3s; box-shadow:0px 5px 30px rgb(220,220,150);}
			#troisboutons a:hover{padding:10px 45px; box-shadow:0px 5px 45px rgb(250,220,100); transition:0.7;}
			
	@media screen and (max-width: 640px) {
		
		#troisboutons{height:auto; background-size:cover; background:url('voyance-sentimentale.jpg') center fixed; background-size:cover;}
		#troisboutons div{display:block; padding:10px 0px;}
		#troisboutons p{margin-bottom:3.5em;}
		#troisboutons a{font-size:1.8em;}


	}

	
#cartesbas{margin:2em 0em; text-align:center; display:flex; flex-wrap:wrap; justify-content:space-around;}
#cartesbas a{max-width:45%; transition:0.3s;}
#cartesbas a:hover{filter:brightness(135%); transition:0.3s;}

	@media screen and (max-width: 640px) 
		{		
			#cartesbas{}
				#cartesbas a{max-width:90%;}
				#cartesbas img:first-child{margin-bottom:20px;}
		}
	.centre{text-align:center; font-weight:bold;}
	/*.imgc{display:block; max-width:100%; margin:auto; margin-bottom:25px; box-shadow:0px 10px 5px rgb(30,30,30);}*/
	.imgc, .imgd{float:right; margin-left:10px; box-shadow:1px 1px 3px black;}
	.imgg{float:left; margin-right:10px; box-shadow:1px 1px 3px black;}
	
	#sommaire{box-shadow:1px 2px 3px black; background:rgb(250,170,170); margin:20px 0px;}
		#sommaire p{font-weight:bold; text-decoration:underline; padding-top:25px;}
		#sommaire ul{padding:10px 20px;}
		#sommaire li{margin:0px 0px 10px 0.5em;}
		#sommaire a{font-family:chili; color:rgb(50,30,240);}
	
	iframe{max-width:100%; display:block; margin:1em auto; box-shadow:0px 3px 6px black;}
	

	#plan{display:flex; flex-wrap:wrap;}
		#plan p{margin:10px;}
		
	#tableau-tarot-de-marseille{display:flex; flex-wrap:wrap; padding:25px; justify-content:space-between;}
		#tableau-tarot-de-marseille img{width:120px; transition:0.3s; box-shadow:1px 1px 3px black;}
				#tableau-tarot-de-marseille img:hover{transform:rotate(3deg) skewX(0deg) skewY(0deg) scale(1.1,1.1) ; position:relative; box-shadow:1px 3px 5px black; transition:0.5s;}

	#horoscopesliens{text-align:center; display:flex; flex-wrap:wrap;}
	#horoscopesliens div{border:4px solid rgb(210,210,255); max-width:65px; height:65px; margin:1em 1.5em; border-radius:0px; background:linear-gradient(to top,gold,yellow); transition:0.15s;}
		#horoscopesliens div:hover{background:linear-gradient(to top,orange,gold); transition:0.15s;}
		
	
	/* MOBILE FRIENDLY */	
	@media screen and (max-width: 1040px) 
		{	
			
			

			nav{height:70px; background:; text-align:center;}
				nav a {min-width:25%;}
					
				nav ul li ul li{display:none;}
				nav ul li:hover ul li{display:block; transition:0.15s;}

			
	/*		
		nav{text-align:center; height:350px; background:url("backgroundtop.jpg")top; background-size:cover; box-shadow:0px 10px 5px rgba(10,10,10,0.8);}
		nav input, nav label {display: none;}
		nav ul{list-style-type:none;}
			nav ul li{display:inline-block; vertical-align:top; }
			nav a{height:50px; display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:bold; width:215px; max-width:20%; background:khaki; padding:0px 10px; box-shadow:0px 2px 2px rgba(10,10,10,0.8); transition:0.2s; overflow:hidden; color:chocolate;}
			nav a:hover{background:gold; transition:0.2s;}
						
				nav ul li ul {position:relative; visibility:hidden; opacity:0; transition:0.5s; width:235px;  text-align:left; z-index:5;}
					nav ul li ul li{padding:0px; z-index:5;}
					nav ul li:hover ul{visibility:visible; opacity:1; transition:0.5s; z-index:5;}
		
			
			*/
			
			
			
			section{padding:30px 0px 0px 0px;}			
			
			article{max-width:90%;}
			
/*

		aside{max-width:22%; display:inline-block; float:right; vertical-align:top; position:relative; right:-80px;}			
			aside div{margin-bottom:15px; height:220px; width:100%; border-radius:10px;  transition:0.2s; perspective:500px; perspective-origin:50% 50%; display:flex; flex-direction:column;  overflow:hidden;}
				
				aside a{background:red; z-index:0;}
				
				aside div img{height:200px; width:200x; border-radius:10px; box-shadow:0px 10px 5px rgba(10,10,10,0.8); transition:0.2s; z-index:1;}
					aside div:hover img{transform:scale(1.2); transition:0.5s; z-index:1;}
				
				aside div p{background:rgb(255,215,255); border-radius:0px 0px 10px 10px; padding:5px 10px; margin-top:-30px; text-align:center; box-shadow:0px 5px 3px rgba(10,10,10,0.8); border-bottom:3px solid orange; transition:0.2s; z-index:99;}
					aside div:hover p{transition:0.5s; background:orchid; z-index:99;}



*/
			aside{position:static; float:none; max-width:none; text-align:center; display:block; margin-top:25px; text-align:left; padding:0px 25px;}
				aside div{overflow:show; height:auto; width:99%; margin: 12px auto; display:inline-block;}
				aside div p{margin-top:0px; padding:15px 0px;}
				aside div img, aside div p, aside div a, aside div{border-radius:0px;}
				aside div img{max-width:100%; height:; box-shadow:none;}
					aside a div:hover img{transform:none;}

			
			
		}
		
	@media screen and (max-width: 640px) 
		{
			
			
		
	/*.imgc {box-shadow:none; border:1px solid black; max-width:99%;}*/
	.imgc, .imgd{float:none; box-shadow:none; border:1px solid black; max-width:99%; display:block; margin:auto; margin-bottom:25px;}
	.imgg{float:none; box-shadow:none; border:1px solid black; max-width:99%; display:block; margin:auto; margin-bottom:25px;}

			

			section{margin-top:0px;}
				
				article{max-width:none; width:100%; display:block; text-align:left;}
					article h1{font-size:1.8em;}
					article p{font-size:1.2em;}
					article img{padding:0px;}
					
			aside{position:static; float:none; max-width:none; text-align:center; display:block;}
				aside div{overflow:show; height:auto;}
				aside div p{margin-top:0px; padding:15px 0px;}
				aside div img, aside div p, aside div a, aside div{border-radius:0px;}
				aside div img{height:auto;}
					aside div img:hover{transform:scale(1.05);}					
			
									
			footer{margin-top:0px;}
			
			nav{min-height:; height:auto; overflow:hidden;}
			nav ul{}
			nav ul li{min-width:100%;}
			nav ul li a{font-size:1.6em; min-width:100%; display:block; text-align:center; box-shadow:none;}



		/*	
			nav ul li{display:inline-block; vertical-align:top; }
			nav a{height:50px; display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:bold; width:200px; padding:0px 10px; box-shadow:0px 2px 2px rgba(10,10,10,0.8); transition:0.2s; overflow:hidden;}
			nav a:hover{background:gold; transition:0.2s;}
						
				nav ul li ul {position:relative; visibility:hidden; opacity:0; transition:0.5s; width:200px;  text-align:center; z-index:5;}
					nav ul li ul li{padding:0px; z-index:5;}
					nav ul li:hover ul{visibility:visible; opacity:1; transition:0.5s; z-index:5;}

			*/
			
			
		nav input, nav label {display: visible;}

			
		nav input:not(:checked) ~ ul { max-height: 0; overflow: hidden; transition:0.5s;}
		nav input:checked ~ ul {max-height: 25em; transition:0.5s;}
		
		#firstlabel{display:block; position:fixed; top:0px; right:0px; height:50px; width:50px; background:gold; text-align:center; font-size:1.1em; line-height:1.8; color:white;}
		
		nav{position:fixed; top:0px; right:0px; background:none;}
		
		nav label:before {content:""; display:block; height:1.6rem; width:100%; background-color:transparent;
			background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)); background-image: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
			background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff); background-position:center top, center, center bottom; background-repeat:no-repeat; -webkit-background-size: 2rem .3rem; background-size: 2rem .3rem; margin:.8em auto 0; padding:0; outline:0; border:0; cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-transition: .2s cubic-bezier(0, 1.8, 1, 1.2); transition: .2s cubic-bezier(0, 1.8, 1, 1.2); transition-property: background; }
		
		nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8);}
		nav input:checked + label::before {background-position: center, center, center;}	
	}
	
	
	
	#annonce p{font-family:annonce; font-size:1.2em;}
		#annonce{display:; flex-wrap:;  background:url("bord-tg.png") top left no-repeat, url("bord-bd.png") bottom right no-repeat, mistyrose; background-size:auto, auto; padding:1em; box-shadow:0px 3px 5px black;}
			#annonce h1{display:block; width:100%; padding:0.5em 0px; margin-bottom:0.5em; font-family:annonce; text-align:center; background:url('bgtitre.jpg') no-repeat top; color:gold; font-size:2em; text-decoration:;}			
			#annonce h2{font-size:1.4em; padding:15px ; margin:5px 15px; text-decoration:; background:orchid;}
			#annonce h3, #annonce h4{padding:15px ; margin:5px 15px; font-size:1.2em; border-left:8px solid magenta; background:plum;}
			#annonce p{padding:0px 15px 15px 15px; flex-grow:1; flex-basis:70%;}
			#annonce ul{padding:0px 15px 15px 35px; font-size:1.2em;}
				#horero{transition:0.2s; flex-grow:0; padding:0px 15px; order:-1;}
				#horero img{width:210px;}
				#horero:hover{filter:brightness(120%); transition:0.25s;}

	@media screen and (max-width: 1040px) 
	{
			
			#annonce{justify-content:center; padding-top:10px;}
			#horero{order:1;}
			#horerodiv{text-align:center;}
	}