/* Définition des polices personnalisées */

@font-face
{
    font-family: 'titlefont'; src:url('polices/Julee-Regular.ttf');
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body{background:url('images/fond_jaune.png'); font-family: 'Trebuchet MS', Arial, sans-serif; color:rgb(20,20,20); max-width:1350px; width:100%; margin:auto;}

img{max-width:100%;}

section h1, section h2, section h3, #partenaires h4, footer h1, nav a{font-family: Dayrom, serif; font-weight:normal; text-transform:uppercase;}
	section article h4{font-family: Dayrom, serif; margin-bottom:0em; padding-bottom:0em; border-left:5px solid steelblue; text-indent:0.35em;}

header a, section a, footer a {text-decoration:none; color:darkred;}
	section a:hover, footer a:hover{text-decoration:underline;}

/* HEADER */

header{background: url('images/separateur.png') repeat-x bottom; padding:10px 0px;}
	#main-title{display:inline-block; width:; background:url("images/belline.png") left no-repeat; background-size:contain; padding-left:80px; }
		
		header p:first-of-type{font-family:'titlefont', serif; font-size:2em; font-weight:normal; display:inline-block; margin-bottom:0px;}
			header p a{color:rgb(20,20,20);}
			header p a:hover{color:darkred;}
			
			header p:nth-child(2){font-family: Dayrom, serif; font-size: 1.1em; margin-top:0.5em; font-weight: normal;}

/* NAVIGATION */

nav {float:right; margin-top:52px; text-align:right;}
	label, input{display:none;}
	nav ul {list-style-type:none;}
	nav li {display:inline-block; margin-right:18px; max-height:60px; vertical-align:top; max-width:270px;}
	nav a{display:block; font-size:1.1em; color:rgb(20,20,20); text-decoration:none;}	
			nav a:hover{color: #760001;}
	
	#subnav, #subnav2{display:inline-block; opacity:0; font-size:0.8em; padding-left:5px; padding-right:5px; text-align:center; visibility:hidden; top:3px; right:0px; position:relative; width:200px; border-radius:0px 0px 5px 5px; z-index:9; box-shadow:0px 4px 4px #1c1a19; background:url('images/fond_jaune.png'); transition:0.5s; overflow:hidden;}
		#subnav li, #subnav2 li{padding:5px; min-width:100%;}
		
		nav ul li:hover #subnav, nav ul li:hover #subnav2{visibility:visible; opacity:1; transition:0.5s;}

	#subnav2{font-size:0.7em; width:; margin-left:-20px;}
	
/* BANNER */

#banniere_image{margin-top:15px; height:200px; border-radius: 5px; background: url('images/voyance-gratuite-telephone.jpg') no-repeat center ; background-size:cover; position: relative; box-shadow: 0px 4px 4px #1c1a19; margin-bottom: 25px;}

	@media screen and (max-width: 1280px){#banniere_image{border-radius:0px; box-shadow:none;} }


#banniere_description{position: absolute; border-radius: 5px 0px 0px 5px; width: 19%; padding-left: 4px; background-color: rgb(24,24,24); background-color: rgba(24,24,24,0.8); color: yellow; font-family:arial; font-size:1.4em; font-weight:bold; text-align:left; padding:30px 0px 0px 15px; text-shadow:0px 2px 1px black; height:170px;}
	#banniere_description img{position:absolute; top:62px; left:5px;}
	#banniere_description p a{color:yellow; text-decoration:none; font-family:titlefont;}
		#banniere_description p a:first-of-type{font-size:1.45em;}
/* CORPUS */


h2 {font-size:1.05em;}
	h3{font-size:0.95em;}

	section{display:flex; flex-wrap:non-wrap; margin-bottom:1em; padding:0px 0.5em;}

	section img{max-width:100%;}
	
article, aside{vertical-align:top; text-align:justify;}

article{margin:0px 15px 0em 0px; min-height:370px; padding:0px 10px 50px 1em;}
	article p{font-size:0.9em;}
		article li{font-size:0.9em;}

aside{background:linear-gradient(to bottom,slateblue, indigo); width:250px; flex-shrink:0;  box-shadow: 0px 2px 5px #1c1a19; border-radius: 5px; padding:10px; color: white; font-size:0.9em;}
	aside h2{font-family:times new roman; text-align:center; font-size:1.35em; margin-bottom:5px;  font-family:titlefont;}
		#aside-tel{text-align:center; font-size:1.5em; margin:0px 0px 0px 0px;}
		aside p{text-align:left;}
		aside a{color:yellow; font-family:titlefont;}
	#aside-tel a{text-align:center; margin:0px; font-size:1.1em; color:white;}

	@media screen and (max-width: 1280px){section{padding-right:0px;} aside{border-radius:10px 0px 0px 10px;} }


		#fleche_bulle{position: absolute; top: 100px; left: -12px;}
				#vignette-aside {display:block; margin:1em auto; border: 1px solid #181818; width:145px; max-width:100%;}

#tableau-yiking tr:first-of-type{font-weight:bold; background:khaki;}
table td {font-size:0.9em; padding:3px 7px;} 

/* FOOTER */

footer {background:url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; padding:25px 1em 0px 1em; display:flex; flex-wrap:non-wrap; justify-content:space-between;}
	footer h1 {font-size: 1.1em;}
	footer h3{font-family: Dayrom, serif; font-weight:normal; text-decoration:underline;}
	footer p, footer ul {font-size: 0.8em;}

#footer-articles, #between, #partenaires {min-width:25%; display:inline-block; vertical-align:top;}

#footer-articles{}
	#between{min-height:200px; background:url('images/separator.png')no-repeat top center; background-size:contain; margin-right:15px;}	
	#partenaires{line-height:1.25em;}
		#partenaires img{max-width:325px;}
		#partenaires ul{display: inline-block; vertical-align:top; margin-top: 0; width: 48%; list-style-image: url('images/ico_liensexterne.png'); padding-left: 2px;}

/* PARTICULARS */
.imgd{float:right; margin-left:10px; border-radius:5px;}
.imgg{float:left; margin-right:10px; border-radius:5px;}
.imggg{margin-right:10px; border-radius:5px;}
.imgc{display:block; margin:15px auto; border-radius:15px; box-shadow:0px 5px 7px rgb(35,35,50);}
.ctr{text-align:center;}

#ascendant td{vertical-align:top; text-align:left; width:50%;}

#tableau-cartes {border-collapse:collapse;}
#tableau-cartes tr:first-child td{font-weight:bold; text-align:center; font-family:Dayrom; border-bottom:1px solid rgb(50,50,50);}
#tableau-cartes td{vertical-align:middle; text-align:left;}
#tableau-cartes td:first-child{width:15%; font-family:Dayrom;}
#tableau-cartes td:nth-child(2){width:40%; border-bottom:1px solid rgb(50,50,50);}
#tableau-cartes td:nth-child(3){width:40%; border-bottom:1px solid rgb(50,50,50);}

#tableau-rune{border-collapse:collapse; font-size:0.9em;}
#tableau-rune tr:first-child{font-family:Dayrom; font-weight:bold; font-size:1.1em;}
#tableau-rune td:first-child, #tableau-rune td:nth-child(2){vertical-align:middle; text-align:center;}
#tableau-rune td{vertical-align:top; text-align:left; border:1px solid rgb(110,90,90);}
#tableau-rune img{width:50px;}
#tableau-rune br{margin-bottom:10px;}
#gr{font-weight:bold;}

#tableau-yiking{border-collapse:collapse;}
#tableau-yiking tr:first-child{font-family:Dayrom; font-size:1em;}
#tableau-yiking td{border:1px solid rgb(90,90,90); text-align:left; }
#tableau-yiking img{width:50px;
}

	#tableau-oraclebelline td p{text-align:left; font-family:calibri; font-size:1em; text-indent:0px;}
	#tableau-oraclebelline td img{height:200px; text-align:center; padding-left:2.5em;}

/*pages du tarot RC*/
#tarot-carte{height:220px; float:left; padding-right:5px;}
article p.ctr{max-width:100%; width:620px; display:inline-block; }


/* Correctifs pour les vieilles versions d'Internet Explorer */
/* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */

.old_ie #main-title, .old_ie #logo, .old_ie header h1, .old_ie nav, .old_ie nav li, .old_ie .bouton_rouge, .old_ie article, .old_ie aside, .old_ie #footer-articles, .old_ie #mes_photos, .old_ie #partenaires, .old_ie #partenaires ul{display:inline; zoom:1;}

/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie section h1, .ie8 section h1{font-size: 1.1em;}
.old_ie footer div, .ie8 footer div{margin-top:30px; background: url('images/separateur.png') repeat-x top;}
	
	
	@media screen and (max-width: 960px) 
		{
			#main-title{display:block; padding-left:60px;}
			nav{float:none; width:100%; text-align:left; margin-top:20px;}
				nav li{max-width:none; width:30%;}
					#subnav, #subnav2{left:-10px; width:200px;}
					
			article{margin-left:5px;}
			aside{}
		}
		
	@media screen and (max-width: 640px) 
		{			
			
			#main-title{background:none; padding-left:0px;}
				header h1{display:block; text-align:center;}
				header h2{display:none;}
						
						
			section{flex-wrap:wrap;}
			section h1{text-align:left;}
			
			article{display:none;}
			
			aside{width:auto;}
			
			footer{flex-wrap:wrap;}
			
			#partenaires img{max-width:100%;}
			
			nav{float:none;padding:0px;}
				nav ul{padding:0px;}
				nav li{display:block; width:100%; text-align:center; max-height:none; padding:8px 0px;}
				nav a{font-size:0.95em;}
				#subnav, #subnav2{display:block; padding:0px; margin:0px; width:100%; opacity:1; visibility:visible; position:static; border-radius:0px; box-shadow:none;}
				
				#subnav li, #subnav2 li{padding:0px;}
				#subnav li a, #subnav2 li a{padding:5px 0px;}
			
			
			nav input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav input:checked ~ ul {max-height:60em; transition:0.2s;}
			nav #li1 input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav #li1 input:checked ~ ul {max-height:60em; transition:0.2s;}
			nav #li2 input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav #li2 input:checked ~ ul {max-height:60em; transition:0.2s;}

			#li1 label, #li2 label{float:right; width:70px; height:32px; margin:-30px 0px 0px 0px; background:tan;}
			nav label {display:block; position:static; padding:0px; margin:auto; font-size:1.5em; text-align:center; color:rgb(20,20,20); transition:0.2s; font-family:Dayrom; text-transform:uppercase;}			
			nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8); transition:0.1s;}
			
			nav #li1 label:before, nav #li2 label:before {content:""; display:block; height:1.5rem; width:2rem; background-color:transparent;
			background-image: -webkit-gradient(linear, left top, right top, from(rgb(20,20,20)), to(rgb(20,20,20))), -webkit-gradient(linear, left top, right top, from(rgb(20,20,20)), to(rgb(20,20,20))), -webkit-gradient(linear, left top, right top, from(rgb(20,20,20)), to(rgb(20,20,20))); background-image: -webkit-linear-gradient(left, rgb(20,20,20), rgb(20,20,20)), -webkit-linear-gradient(left, rgb(20,20,20), rgb(20,20,20)), -webkit-linear-gradient(left, rgb(20,20,20), rgb(20,20,20));
			background-image: linear-gradient(to right, black, rgb(20,20,20)), linear-gradient(to right, rgb(20,20,20), rgb(20,20,20)), linear-gradient(to right, rgb(20,20,20), rgb(20,20,20)); background-position:center top, center, center bottom; background-repeat:no-repeat; -webkit-background-size: 2rem .3rem; background-size: 2rem .3rem; margin:.2em 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 #li1 input:checked + label , nav #li2 input:checked + label {-webkit-transform: scale(.8); transform: scale(.8);}
			nav #li1 input:checked + label::before, nav #li2 input:checked + label::before {background-position: center, center, center;}			
			
			#banniere_image{border-radius:0px; height:160px; box-shadow:none;}
			#banniere_description{position:static; text-align:center; width:100%; border-radius:0px; height:80px; padding:5px 0px 20px 0px;}

			section{max-width:100%; overflow:;}
				aside{position:static; border-radius:0px;}
					article, aside{padding:2%; margin:0px; display:block; max-width:100%; width:96%;}
			
				#footer-articles{float:left; width:45%;}
				#partenaires{float:right; width:45%;}
				#between{display:none;}
		}