@font-face{font-family:'spartan'; src:url('img/fLeagueSpartan-Bold.otf');}
@font-face{font-family:'name'; src:url('img/Limelight-Regular.ttf');}
@font-face{font-family:'sylfaen'; src:url('img/fBKANT.TTF');}

*{margin:0px; padding:0px;}

body{scroll-behavior: smooth;}
		
	#supname{background:linear-gradient(to bottom right, rgb(30,30,30), black); padding:0.35em 0.1em 0.05em 0.1em; border:1px solid rgb(230,230,250); transition:0.1s}
		#supname:hover{background:linear-gradient(to bottom right, rgb(70,50,90), rgb(30,30,30));transition:0.2s;}
	#name a{font-weight:normal; font-family:name;color:rgb(20,20,20); font-size:1.45em; background: -webkit-linear-gradient(yellow, gold, goldenrod, black); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
	#name img{width:75px; background:black; border-radius:50%;border:1px solid rgb(230,230,250); margin:0px 3px -15px 0px; transition:0.15s;}
		#supname:hover img{background:linear-gradient(to bottom right, lightskyblue, magenta); transition:0.15s;}
	h1, h2, .ctr{text-align:center;}
	
	h1, h2, section h3, section h4, header p, nav a, nav p, .telephone_corps, .bohemienne{font-family: spartan,"trebuchet ms";}
	h3, p, footer a, li{font-family:sylfaen, "times new roman";}

	mark{background:none; text-decoration:underline;}
	
/* couleur de fond*/
section,  .bohemienne{background-color:moccasin;}
nav, li, nav a, aside, footer{background:rgb(30,30,70); color:rgb(230,230,230);}

header{background:url("img/bv2.jpg") no-repeat bottom, rgb(18,26,72); background-size:cover; padding:1em; min-height:220px; overflow:hidden; border-bottom:2.5px solid yellow; color:white;  display:flex; flex-wrap:non-wrap; justify-content:space-between;}
	#telpremium{border:5px gold solid; transition:0.15s; margin:; filter:contrast(100%); animation: clignoter 2s linear infinite;} @keyframes clignoter { 50%  {border:5px black solid; margin:; }}
		#telpremium:hover{filter:contrast(200%); transition:0.3s; animation-duration:1s;}
		
	header a{color:yellow;}
	header div:nth-child(1){background:rgb(30,30,80,0.4); padding:0.5em;}
	header div:nth-child(2){padding:0.5em;}
	.titre{font-size:1.8em;}
		header div div p{transition: 0.1s; overflow:hidden; font-size:1.3em;}
		header div div p:first-of-type{font-size:2em; background: -webkit-linear-gradient(pink,violet,violet, darkviolet); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
		header div div a{color:yellow;}
		header div div sup{font-style:italic;}
		
		.intro{font-family:calibri; color:white; text-align:center; margin-top:-25px; text-shadow:0px 2px 1px black; padding:10px;}
	
#annonce{display:flex; flex-wrap:wrap; justify-content:center;}
	#annonce h3{padding:10px 0px; font-size:1.05em;}
	#annonce h3 a{font-family:sylfaen; color:black; animation: clignote 1.5s linear infinite;} @keyframes clignote { 50%  {color:deepskyblue; opacity: 50; }}
	#annonce a:not(h3 a){width:90px; margin:0px 15px;}
	#annonce img{max-width:100%;}


	@media screen and (max-width: 1024px) {header{flex-wrap:wrap; align-items:center; flex-direction:column;}}
	
	@media screen and (max-width: 640px) 
		{
			
		
			header a{text-align:center;}
			header img:first-of-type{max-width:95%;}
	
		#annonce h3{width:100%; font-size:1.2em; text-align:center;}
		#annonce a:not(h3 a){width: 45%; margin:10px; text-align:center; display:inline-block;}
		
		}

#contenu{display:flex; flex-wrap:non-wrap; vertical-align:top; align-items:stretch; flex-direction:row; justify-content:flex-start;}

	@media screen and (max-width: 640px) 
	{
		
#contenu, footer{flex-wrap:wrap;}

		
		
	}
	
	
section{flex-grow:1; padding-bottom:1em;}
	section h1{padding:15px 0px; background: darkviolet; color:white; font-family:name;}
	section h1 a{color:white; font-size:1.3em; font-family:name;}
		section h2{font-size:1.35em; padding:0.75em 1em 0.5em 1em; margin:10px 25px; color:white; text-shadow:0px 0px 1px black, 0px 0px 2px black; background:darkorange; text-align:left; }
			section h3{font-size:1.1em; padding:0.75em 1em 0.5em 1em; margin:10px 25px; color:white; text-shadow:0px 0px 1px black,0px 0px 2px black; background:goldenrod;}
				section h4{position:relative; font-size:1.15em; margin:0px 10px; padding:0.5em 0px 10px 1.75em;}
				section h4:before{content:""; display:block; position:absolute; left:0.85em; top:0px; width:10px; height:35px; background:goldenrod;}
	section p{margin:0px 10px; font-size:1.05em; padding:10px 20px; text-align:justify;}
		section h1 + p {margin-top:1em;}
	section strong{}

a{font-weight:bold; text-decoration:none;}
	nav a{font-size:1.2em;}
	section p a{color:mediumvioletred; transition:0.3s;}
		section a:hover, footer a:hover{text-decoration:underline; transition:0.3s;}

	section ul, section ol{margin:0.5em 2em; }
		section li{margin:0em 1em; font-size:1.05em; background:papayawhip; color:black;}
	

aside{min-width:200px; max-width:250px;}
	aside h3{background:darkviolet; text-decoration:underline; font-style:italic; text-align:center; padding-top:0.5em; font-size:1.2em;}
	aside img{width:100%; border-radius:15px; box-shadow:0px 4px 5px black;}
	aside div{padding:1em; background:linear-gradient(darkviolet,darkviolet, indigo); border-bottom:8px solid rgb(30,30,70);}
		aside div h2{font-size:0.9em; padding:0.5em 0.3em; margin-bottom:0.2em; background:linear-gradient(violet, darkviolet); box-shadow:0px 2px 4px black; transition:0.15s; border-radius:5px;}
		aside div h2:hover{background:linear-gradient(magenta, darkmagenta); transition;0.15s;}
			aside a{color:white; font-size:1em; font-weight:normal;}
				aside h2 a{font-weight:bold; color:gold; transition:0.15s;}
				aside h2 a:hover{color:yellow; transition:0.15s;}
				
	.boutonappel{text-align:center; margin:0.5em;}
	.boutonappel a{font-size:1.1em; padding:0.5em 0.5em; margin-bottom:0.2em; background:linear-gradient(violet, darkviolet); box-shadow:0px 2px 4px black; transition:0.15s; border-radius:5px; color:white;  transition;0.15s;}
		.boutonappel a:hover{background:linear-gradient(magenta, darkmagenta); transition;0.15s;}
				
				
	@media screen and (max-width: 640px){aside{max-width:none; width:100%;}} 

	nav div{padding:1em; background:linear-gradient(darkviolet,darkviolet, indigo); border-bottom:8px solid rgb(30,30,70);}
		nav div p:first-of-type{font-size:1.15em; transition:0.3s; border:none; padding:8px 0px 0px 0px; font-family:name; background:linear-gradient(violet, darkviolet); transition:0.15s; border-radius:5px; box-shadow:0px 2px 4px black;}
		nav div p:first-of-type a span{color:gold;}
		nav div p:first-of-type a{background:none;}
		nav div p:hover{background:linear-gradient(magenta, darkmagenta); transition;0.15s;}
		
nav{text-align:center; min-width:250px; width:250px;}
	nav h2 {}
		nav h2 a:nth-of-type(1){padding:8px; margin:3px; background:linear-gradient(darkviolet,darkviolet, indigo); font-size:0.9em; color:gold;}
	
	nav img{}
		nav h2 span{font-size:0.85em;}
	nav input, nav label {display:none;}
	nav h4{font-size:1.8em; transition:0.3s; border-bottom:1.5px solid burlywood; padding:8px 0px 0px 0px; font-family:name;}
	nav ul{padding:0px; margin:0px;}
		nav li{display:block; list-style-type:none; padding:5px 0px; margin-bottom:0px; border-bottom:1.5px solid burlywood; min-width:165px; height:; transition:0.3s;}
		nav h4:hover, nav li:hover{background-color:fuchsia; color:gold; transition:0.3s;}

	nav ul li ul{display:none;}
	nav ul li:hover ul{display:block; position:relative; top:-29px; left:198px;}
		
		
footer{padding:30px 0px 20px 0px; border-top:rgb(200,200,50) 5px solid; display:flex; flex-wrap:non-wrap; justify-content:space-around;}	
	footer p{font-size:0.85em; margin:10px 0px;}
	footer a{color:rgb(230,230,150); font-weight:normal;}
	footer img{width:250px; margin:1em 0em;}
	
	.checked {color: orange;}
	.centre{text-align:center;}
	.imgc{display:block; max-width:100%; margin:auto;}
	.imgd{float:right; margin:0px 10px 0px 10px; border-radius:5px; padding:0px 20px;}
	.imgg{float:left; margin:0px 10px 0px 10px; border-radius:5px; padding:0px 20px;}

	
		#flyerz{max-height:450px; overflow:auto; background:linear-gradient(to bottom, papayawhip,rgb(250,230,200), rgb(250,200,170)); color:rgb(15,15,15); border-top:5px solid midnightblue;}
			#flyerz h2 a, #flyers p a{color:;}
				#flyerz h2 a:hover, #flyers p a:hover{color:goldenrod;}
			#flyers strong{color:midnightblue;}
			#flyerz input{display:none;}
	
	.container div{width: 85px;height: 85px;}

.diaporama2{margin:0 auto; width:1000px; height:250px; overflow:hidden;}
	.diaporama2 div {display:inline-block; text-align:left; height:250px; max-width:50%; width:220px; vertical-align:top;}
	.diaporama2 p {margin:0px 10px; padding:5px; font-size:0.95em; font-family:trebuchet ms;}
	.diaporama2 p span{float:right; font-style:italic;}
.diaporama2 figure{width:3525px; position:relative; left:0px; animation-name:diapo2; animation-duration:40s; animation-timing-function:linear; animation-iteration-count:infinite; animation-direction:normal;}

@keyframes diapo2{
	0%{left:0px;}
	100%{left:-2690px;}
}
			
	#tarot-carte{display:block; margin:auto; width:120px;}

	#oracle-manuscrit{text-align:center;}
		#oracle-manuscrit li a{width:120px; height:225px; display:block;}
		#oracle-manuscrit li{display:inline-block; width:120px; height:225px; background:url("img/oracle-le-manuscrit/oracle-le-manuscrit.jpg"); background-size:contain; border-radius:10px;}
		#oracle-manuscrit #achats:hover{background:url("img/oracle-le-manuscrit/achats.png"); background-size:contain;}
		#oracle-manuscrit #argent:hover{background:url("img/oracle-le-manuscrit/argent.png"); background-size:contain;}
		#oracle-manuscrit #arts:hover{background:url("img/oracle-le-manuscrit/arts.png"); background-size:contain;}
		#oracle-manuscrit #chance:hover{background:url("img/oracle-le-manuscrit/chance.png"); background-size:contain;}
		#oracle-manuscrit #changement:hover{background:url("img/oracle-le-manuscrit/changement.png"); background-size:contain;}
		#oracle-manuscrit #choix:hover{background:url("img/oracle-le-manuscrit/choix.png"); background-size:contain;}
		#oracle-manuscrit #construction:hover{background:url("img/oracle-le-manuscrit/construction.png"); background-size:contain;}
		#oracle-manuscrit #danger:hover{background:url("img/oracle-le-manuscrit/danger.png"); background-size:contain;}
		#oracle-manuscrit #deces:hover{background:url("img/oracle-le-manuscrit/deces.png"); background-size:contain;}
		#oracle-manuscrit #destin:hover{background:url("img/oracle-le-manuscrit/destin.png"); background-size:contain;}
		#oracle-manuscrit #dualite:hover{background:url("img/oracle-le-manuscrit/dualite.png"); background-size:contain;}
		#oracle-manuscrit #echanges:hover{background:url("img/oracle-le-manuscrit/echanges.png"); background-size:contain;}
		#oracle-manuscrit #emotions:hover{background:url("img/oracle-le-manuscrit/emotions.png"); background-size:contain;}
		#oracle-manuscrit #ennuis:hover{background:url("img/oracle-le-manuscrit/ennuis.png"); background-size:contain;}
		#oracle-manuscrit #equilibre:hover{background:url("img/oracle-le-manuscrit/equilibre.png"); background-size:contain;}
		#oracle-manuscrit #esoterisme:hover{background:url("img/oracle-le-manuscrit/esoterisme.png"); background-size:contain;}
		#oracle-manuscrit #examens:hover{background:url("img/oracle-le-manuscrit/examens.png"); background-size:contain;}
		#oracle-manuscrit #famille:hover{background:url("img/oracle-le-manuscrit/famille.png"); background-size:contain;}
		#oracle-manuscrit #femme:hover{background:url("img/oracle-le-manuscrit/femme.png"); background-size:contain;}
		#oracle-manuscrit #fete:hover{background:url("img/oracle-le-manuscrit/fete.png"); background-size:contain;}
		#oracle-manuscrit #force:hover{background:url("img/oracle-le-manuscrit/force.png"); background-size:contain;}
		#oracle-manuscrit #homme:hover{background:url("img/oracle-le-manuscrit/homme.png"); background-size:contain;}
		#oracle-manuscrit #hopital:hover{background:url("img/oracle-le-manuscrit/hopital.png"); background-size:contain;}
		#oracle-manuscrit #idees:hover{background:url("img/oracle-le-manuscrit/idees.png"); background-size:contain;}
		#oracle-manuscrit #justice:hover{background:url("img/oracle-le-manuscrit/justice.png"); background-size:contain;}
		#oracle-manuscrit #medecine:hover{background:url("img/oracle-le-manuscrit/medecine.png"); background-size:contain;}
		#oracle-manuscrit #mefiance:hover{background:url("img/oracle-le-manuscrit/mefiance.png"); background-size:contain;}
		#oracle-manuscrit #naissance:hover{background:url("img/oracle-le-manuscrit/naissance.png"); background-size:contain;}
		#oracle-manuscrit #nouvelles:hover{background:url("img/oracle-le-manuscrit/nouvelles.png"); background-size:contain;}
		#oracle-manuscrit #perte:hover{background:url("img/oracle-le-manuscrit/perte.png"); background-size:contain;}
		#oracle-manuscrit #protection:hover{background:url("img/oracle-le-manuscrit/protection.png"); background-size:contain;}
		#oracle-manuscrit #rencontre:hover{background:url("img/oracle-le-manuscrit/rencontre.png"); background-size:contain;}
		#oracle-manuscrit #reussite:hover{background:url("img/oracle-le-manuscrit/reussite.png"); background-size:contain;}
		#oracle-manuscrit #sante:hover{background:url("img/oracle-le-manuscrit/sante.png"); background-size:contain;}
		#oracle-manuscrit #secret:hover{background:url("img/oracle-le-manuscrit/secret.png"); background-size:contain;}
		#oracle-manuscrit #separation:hover{background:url("img/oracle-le-manuscrit/separation.png"); background-size:contain;}
		#oracle-manuscrit #soutien:hover{background:url("img/oracle-le-manuscrit/soutien.png"); background-size:contain;}
		#oracle-manuscrit #surprise:hover{background:url("img/oracle-le-manuscrit/surprise.png"); background-size:contain;}
		#oracle-manuscrit #temps:hover{background:url("img/oracle-le-manuscrit/temps.png"); background-size:contain;}
		#oracle-manuscrit #trahison:hover{background:url("img/oracle-le-manuscrit/trahison.png"); background-size:contain;}
		#oracle-manuscrit #travail:hover{background:url("img/oracle-le-manuscrit/travail.png"); background-size:contain;}
		#oracle-manuscrit #union:hover{background:url("img/oracle-le-manuscrit/union.png"); background-size:contain;}
		#oracle-manuscrit #voyage:hover{background:url("img/oracle-le-manuscrit/voyage.png"); background-size:contain;}
		
	#tableau-oracle-manuscrit, #tableaugrigri{padding:0px 0px 0px 0px; border-top:20px solid lightpink; border-bottom:20px solid lightpink;}
	#tableau-oracle-manuscrit div, #tableaugrigri div{display:block; min-height:250px; padding:10px 0px;}
	#tableau-oracle-manuscrit h2, #tableaugrigri h2{font-size:1.2em; margin:0px 30px;}
		#tableau-oracle-manuscrit img{width:156px; height:300px; padding:0px 20px;}
		#tableaugrigri img{width:225px;}
		.carte-gauche{border-right:20px solid pink; border-top:5px solid lightpink; border-radius:0px 0px 0px 0px;}
			.carte-gauche h2{text-align:left;}
		.carte-droite{border-left:20px solid pink; border-top:5px solid lightpink; border-radius:0px 0px 0px 0px; text-align:left;}
			.carte-droite h2{text-align:center;}

	#horoscope {padding:0em 3em;}
	#horoscope img{width:105px;}


/* Styles de base */
#horoscope-annuel-menu {   display: flex;   flex-wrap: wrap;   justify-content: space-between;   gap: 20px; /* Espace entre les colonnes */ }

.signes {background:url('../charte/texture2.png') ;   display: flex;   flex-direction: row;   justify-content: space-between;   align-items: stretch;   width: 45%; /* Deux colonnes avec un petit espace */   padding: 10px;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Pour un léger effet d'ombre */ }

.signes div {background:rgba(0,0,0,0.3); flex: 1;}
.signes h2{background:none; padding:0.75em 0em 0em 0.75em; margin:0em;}
.signes p{padding:0.75em; margin:0em;}
.signes a{color:purple;}
.signes img {   max-width: 150px; /* Taille maximale de l'image */   margin-left: 20px; }

@media (max-width: 768px) {
  /* Version mobile: une seule colonne */
  #horoscope-annuel-menu {flex-direction:;}

  .signes {     width: 100%; 	flex-wrap:b;     flex-direction: row;   }
	.signes div{}
	.signes a{}
  .signes img {max-width: 180px;     margin-left: 10px;   }
}



	.encyclomenu{margin:auto; text-align:center;}
	.encyclomenu li{background:pink; width:350px; display:inline-block; padding:15px 10px; margin:1em; vertical-align:top;}
	.encyclomenu h2{padding-top:5px; text-align:center;}
	.encyclomenu li a{ display:block;}
	.encyclomenu li:hover{background:khaki;}
	.encyclomenu li img{width:200px; height:200px;}
	
	#listevoyants{display:flex; flex-wrap:wrap; justify-content:space-around; background:;}
		#listevoyants div{width:300px; margin:0.5em; box-shadow:0px 1px 3px black;  background:darkorange;}
		#listevoyants a{}
		#listevoyants h2{margin:0px; padding:0.25em 1em; text-align:center; background:;}
		#listevoyants img{max-width:100%; margin:0px; padding:0px;}
	
@media (max-width: 768px) {
		#listevoyants div{width:42.5%; margin:0.5em;}
		
}

	#partenaires{display:flex; flex-wrap:wrap; text-align:center;}
		#partenaires p{width:42.5%;}

	@media screen and (max-width: 680px) 
	{#partenaires p{width:37.5%;}}
	
	

/* MOBILE FRIENDLY */	
	@media screen and (max-width: 1280px) 
		{	
		header{}
		
		
		nav{width:17.5%; overflow:hidden;}
			nav p{font-size:1.35em;}
			nav li{min-width:0px; height:auto;}
			nav ul li:hover ul{display:none;}
		}

	@media screen and (max-width: 640px) 
		{
		body{background:rgb(255,255,160);}
		
		header{border-radius:0px; margin-top:0px; height:auto; border:none; }
		header div{margin:7em 0em 1.5em 0em; font-size:0.55em;}
		header div div:first-of-type{display:none;}
		
		.telephone{padding-top:25px; font-size:1.5em;}
		.intro{text-align:justify; margin-top:-5px;}
					
		section{width:100%; margin:0px; padding:0px 0px 20px 0px; box-shadow:none; border-bottom:3px solid fuchsia;}
			section p{margin:0px 5px;}
			section h2{margin:0.5em 0em;}
			section h3{font-size:1.2em; background:; padding:0.75em 1em; margin:10px 0px;}

		footer{padding:10px;}

			.encyclomenu li{width:90%;}		
			.imgd, .imgg{float:none; display:block; max-width:100%; margin:auto;}
		
		#flyerz{margin-bottom:-20px;}
			#flyerz input:checked ~ #flyers {max-height:300px; overflow:auto; transition:0.5s;}
		
		#oracle-manuscrit li{background:none;}
		#oracle-manuscrit #achats{background:url("img/oracle-le-manuscrit/achats.png"); background-size:contain;}
		#oracle-manuscrit #argent{background:url("img/oracle-le-manuscrit/argent.png"); background-size:contain;}
		#oracle-manuscrit #arts{background:url("img/oracle-le-manuscrit/arts.png"); background-size:contain;}
		#oracle-manuscrit #chance{background:url("img/oracle-le-manuscrit/chance.png"); background-size:contain;}
		#oracle-manuscrit #changement{background:url("img/oracle-le-manuscrit/changement.png"); background-size:contain;}
		#oracle-manuscrit #choix{background:url("img/oracle-le-manuscrit/choix.png"); background-size:contain;}
		#oracle-manuscrit #construction{background:url("img/oracle-le-manuscrit/construction.png"); background-size:contain;}
		#oracle-manuscrit #danger{background:url("img/oracle-le-manuscrit/danger.png"); background-size:contain;}
		#oracle-manuscrit #deces{background:url("img/oracle-le-manuscrit/deces.png"); background-size:contain;}
		#oracle-manuscrit #destin{background:url("img/oracle-le-manuscrit/destin.png"); background-size:contain;}
		#oracle-manuscrit #dualite{background:url("img/oracle-le-manuscrit/dualite.png"); background-size:contain;}
		#oracle-manuscrit #echanges{background:url("img/oracle-le-manuscrit/echanges.png"); background-size:contain;}
		#oracle-manuscrit #emotions{background:url("img/oracle-le-manuscrit/emotions.png"); background-size:contain;}
		#oracle-manuscrit #ennuis{background:url("img/oracle-le-manuscrit/ennuis.png"); background-size:contain;}
		#oracle-manuscrit #equilibre{background:url("img/oracle-le-manuscrit/equilibre.png"); background-size:contain;}
		#oracle-manuscrit #esoterisme{background:url("img/oracle-le-manuscrit/esoterisme.png"); background-size:contain;}
		#oracle-manuscrit #examens{background:url("img/oracle-le-manuscrit/examens.png"); background-size:contain;}
		#oracle-manuscrit #famille{background:url("img/oracle-le-manuscrit/famille.png"); background-size:contain;}
		#oracle-manuscrit #femme{background:url("img/oracle-le-manuscrit/femme.png"); background-size:contain;}
		#oracle-manuscrit #fete{background:url("img/oracle-le-manuscrit/fete.png"); background-size:contain;}
		#oracle-manuscrit #force{background:url("img/oracle-le-manuscrit/force.png"); background-size:contain;}
		#oracle-manuscrit #homme{background:url("img/oracle-le-manuscrit/homme.png"); background-size:contain;}
		#oracle-manuscrit #hopital{background:url("img/oracle-le-manuscrit/hopital.png"); background-size:contain;}
		#oracle-manuscrit #idees{background:url("img/oracle-le-manuscrit/idees.png"); background-size:contain;}
		#oracle-manuscrit #justice{background:url("img/oracle-le-manuscrit/justice.png"); background-size:contain;}
		#oracle-manuscrit #medecine{background:url("img/oracle-le-manuscrit/medecine.png"); background-size:contain;}
		#oracle-manuscrit #mefiance{background:url("img/oracle-le-manuscrit/mefiance.png"); background-size:contain;}
		#oracle-manuscrit #naissance{background:url("img/oracle-le-manuscrit/naissance.png"); background-size:contain;}
		#oracle-manuscrit #nouvelles{background:url("img/oracle-le-manuscrit/nouvelles.png"); background-size:contain;}
		#oracle-manuscrit #perte{background:url("img/oracle-le-manuscrit/perte.png"); background-size:contain;}
		#oracle-manuscrit #protection{background:url("img/oracle-le-manuscrit/protection.png"); background-size:contain;}
		#oracle-manuscrit #rencontre{background:url("img/oracle-le-manuscrit/rencontre.png"); background-size:contain;}
		#oracle-manuscrit #reussite{background:url("img/oracle-le-manuscrit/reussite.png"); background-size:contain;}
		#oracle-manuscrit #sante{background:url("img/oracle-le-manuscrit/sante.png"); background-size:contain;}
		#oracle-manuscrit #secret{background:url("img/oracle-le-manuscrit/secret.png"); background-size:contain;}
		#oracle-manuscrit #separation{background:url("img/oracle-le-manuscrit/separation.png"); background-size:contain;}
		#oracle-manuscrit #soutien{background:url("img/oracle-le-manuscrit/soutien.png"); background-size:contain;}
		#oracle-manuscrit #surprise{background:url("img/oracle-le-manuscrit/surprise.png"); background-size:contain;}
		#oracle-manuscrit #temps{background:url("img/oracle-le-manuscrit/temps.png"); background-size:contain;}
		#oracle-manuscrit #trahison{background:url("img/oracle-le-manuscrit/trahison.png"); background-size:contain;}
		#oracle-manuscrit #travail{background:url("img/oracle-le-manuscrit/travail.png"); background-size:contain;}
		#oracle-manuscrit #union{background:url("img/oracle-le-manuscrit/union.png"); background-size:contain;}
		#oracle-manuscrit #voyage{background:url("img/oracle-le-manuscrit/voyage.png"); background-size:contain;}
		
		
		
		#navigation{position:fixed; top:0px;}
		#navigation div{display:none;}

		nav{float:none; width:100%; margin:0px; border-top:3px solid peru; border-bottom:3px solid peru; box-shadow:none;}
		nav h4{padding:0.3em 0em 0.25em 0.5em; text-align:left;}
		nav p{padding:5px 0px 0px 0px; margin:0px; box-shadow:none;}
		nav li{padding-top:15px; margin:0px; height:40px; border-top:1px solid burlywood; box-shadow:none;}

		/* handling clic with CSS3 checked */
		/* Theming closed nav */	
		nav input:not(:checked) ~ ul {max-height: 0; overflow: hidden; transition:0.5s;}
		/* Theming opened nav */
		nav input:checked ~ ul {max-height: ; transition:0.5s;}
		

		/* Global styling nav button */	
		nav label {display:inline-block; position:absolute; margin-top:2px; right:25px; z-index: 1; height:50px; width:50px; background:goldenrod; border-radius:5px; text-align:center; font-size:0.65em; line-height:1.6; color:white;}
		
		nav label:before {content:""; display:block; height:1.6rem; width:2rem; 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; }
		
		/* Theming opened nav button */	
		nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8);}
		nav input:checked + label::before {background-position: center, center, center;}	
	}


.popup {display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100va; overflow: auto; background-color: rgba(0, 0, 0, 0.4);}
	.popup-content {position: relative;  background:linear-gradient(to bottom, gold,goldenrod); margin: 12% auto; padding: 20px; border-radius: 5px; width:30%; box-shadow:0px 3px 5px black;}
	@media screen and (max-width: 640px) {.popup-content{width:75%;}}
		.popup-content img{max-width:100%;}
		.popup-content a{transition:0.15s;}
		.popup-content a:hover{filter:saturate(150%) brightness(125%); transition:0.15s;}

.close-button {color: black; float: right; font-size: 28px; font-weight: bold;}
	.close-button:hover, .close-button:focus {color: white; text-decoration: none; cursor: pointer;}