/*
Parme #cfa0e9 Vert #009748 
color:rgba(41,41,41,0.5)
un rouge pour des alertes : :#d0011b
black : :#292929
Grey : #81959f
grey light :#a9a9a9;
grey white :#e6e6e6; 


background-color:rgba(255,255,255,0.2)
*** Font ***
texts : Roboto Slab  / Title + Manu : Karla / Logo : futura-lt-w01-book 
https://www.download-free-fonts.com/details/72172/avenir-lt-65-medium
https://www.download-free-fonts.com/details/70273/futura-lt-medium
*/

html { scroll-behavior: smooth; }

body {
	background-color:#fff;
	font-family: 'Roboto Slab', serif;
	font-size: 1em;
	margin: 0; /* pour �viter les marges */
	padding: 0;
	text-align: center; /* pour corriger le bug de centrage IE */
	}

#print-footer { display:none; }

@font-face {
    font-family: 'Comfortaa';
	src: url('../../themes/giastudio/Comfortaa-Bold.ttf');
}

@font-face {
    font-family: 'Futura LT Medium';
	src: url('../../themes/giastudio/Futura_LT_Medium.ttf');
}
/*@font-face {
    font-family: 'Futura';
    font-style: normal;
    font-weight: normal;
    src: local('Futura_LT_Medium'), url('themes/giastudio/futura-lt-medium.ttf') format('truetype');
    }*/

h1 { font-size:1.2em; font-family:'Didact Gothic', sans-serif; color:#81959f; margin-left:0%; text-align: left;}
h2 { font-size:1em; color:#81959f; }
h3 { font-size:1em; color:#292929; }

A { text-decoration:none; }
A:link { color:#a9a9a9; }
A:visited { color:#a9a9a9; }
A:active { color:#F78000; } 
A:hover { color:#292929; transition: color .3s;} 

img { border:0px; padding:0px; margin:0px; line-height:0px; max-width:100%; }

.photo { border:1px solid #a9a9a9; }
.return { clear:both }
.center { margin:auto; text-align:center; }
.mini { font-size:0.7em }
.big { font-size:1.5em; color:#292929; }
.zoom:hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
.icon { width: 24px; vertical-align: middle;}

/*  entete  */ 
#header { background-color:#fff; width:100%; margin:0px; }
#logo { width:90px; margin:0; }
#claim { font-size:1.5em; font-family: 'Didact Gothic', sans-serif; letter-spacing:0.3em; font-weight: bold;  }

#bloc_ico {float:left; width: 150px ; margin:0; padding:0; text-align: left; }

#bloc_d { text-align:center; float:right; margin:0; padding:0; height:32px; font-size:0.8em; width: 150px }
#bloc_d ul { padding:0; margin:0; }
#bloc_d li { display:inline-block; list-style-type:none; padding:3px; }

#titre {  margin:auto; padding:0; width: 200px;}
#titre p { margin:0; padding:0; margin-top:5px; }

#menu { clear:both; text-align:center; width:auto; margin:0px; padding:0; font-size:1.2em;font-family: 'Didact Gothic', Sans-serif; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
#menu li { display: inline-block; padding:7px; background-color:#fff; margin:0%; }
#menu li:hover { -webkit-transform:scale(1.05); transform:scale(1.1); }

/*main { }* border-radius:5px; border:1px dotted #cfa0e9;*/
	
#content { clear:both; width:98%; text-align:left; margin:auto; padding:1%; }
#bloc { clear:both; width:100%; text-align:center; margin:auto; vertical-align:top; }
#bloc_100 { width:96%; margin:auto; padding:2%; padding-top: 0; display:inline-block; vertical-align:top;text-align:left; }

#bloc_titre { width:100%; margin:0; padding:0; }

#col_3 { display:none; }
#col_2 { float:right; width:255px; padding:5px; margin:0; text-align:center; margin-bottom:5px; border-left:1px #a9a9a9 solid; }
#col_1b { margin:0; padding:0; margin-right:270px; white-space:normal; }
#col_1 { max-width:1020px; margin:auto; text-align:left; }
/*#col_1 img { border:1px #cfa0e9 solid; border-radius:5px; }*/
#description { clear:both }
#description img { max-width:100% }

#bloc_1 { height:420px; background-position:center; background-size: cover; animation: bloc_1 60s infinite; margin:0%;padding:0; overflow: hidden; width: 100%;} 
#text { width:35%; padding:1%; margin:2%; background-color: #fff; float: right; opacity:0.75; display:none; }
.bloc_col {width:23% ; float: left; padding: 1%;}

@keyframes bloc_1 {
	0% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-1.jpg); 
	}
	20% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-2.jpg);
	}
	40% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-3.jpg);
	}
	60% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-4.jpg);
	}
	80% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-5.jpg);
	}
	99% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-1.jpg);
	}
}

@-webkit-keyframes bloc_1 {
	0% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-1.jpg); 
	}
	20% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-2.jpg);
	}
	40% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-3.jpg);
	}
	60% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-4.jpg);
	}
	80% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-5.jpg);
	}
	99% {
		opacity:1; background-image: url(../../images/cover/boutique_esoterique-1.jpg);
	}
}

#bloc_A, #bloc_B { background-color: rgba(245, 245, 245, 0.7); width:48%; margin:0; padding:0.5%; display:inline-block; vertical-align:top; text-align:left; }

/* border-radius: 5px; border:1px dotted #cfa0e9;  */

#search_bar { text-align:right; height:38px; }
#search_bar img { border:0px; margin:0 }

.promo { background-color:#d0011b; color:#fff; padding:3px; border-radius:50%; }
.compare {width:32px; }

.bloc_shop { width:56%; float:right; }
.photo_art { width:33%; border:1px #a9a9a9 solid;}

.bloc_shop1 { min-height:230px; font-size:1em; }
.photo_art1 { width:319px; margin-right:1%; float:left; border:1px #a9a9a9 solid;  }

.bloc_shop2 { height:305px; width:226px; width:23%; padding:0%; margin:1%; font-size:1em; float:left; }
.photo_art2 { clear:both; width:100%; margin:auto; border:1px #a9a9a9 solid;}
.bloc_photo2 { float:left; margin-right:1%;}
/* max-height:240px;*/

.bloc_shop3 { min-height:210px; width:48%; padding:1px; margin:1px; font-size:0.9em; float:left; }
.photo_art3 { width:220px;  border:1px #a9a9a9 solid; }
.bloc_photo3 { float:left; margin-right:1%;}
/* max-height:230px;*/

.bloc_shop1, .bloc_shop2, .bloc_shop3 { text-align:justify; overflow:hidden; }
.photo_art3:hover, .photo_art2:hover, .photo_art1:hover, .photo_art:hover { -webkit-transform:scale(1.03); transform:scale(1.03); }

.bloc_button { border:1px solid #a9a9a9; width:auto; background-color:#81959f; padding:5px; text-align:center; margin:auto; color:#e6e6e6; }
.bloc_button2 { border:1px solid #a9a9a9; padding:3px; border-radius:5px; background-color:#81959f; color:#e6e6e6; }
.bloc_button a, .bloc_button2 a { color:#e6e6e6; }
.bloc_button a:link, .bloc_button2 a:link { color:#e6e6e6; }
.bloc_button a:visited, .bloc_button2 a:visited { color:#e6e6e6; }
.bloc_button A:after { color:#e6e6e6; }

.bloc_button A:visited { color:#e6e6e6; }

#button1  { color:#e6e6e6; }
#button1:hover { color:#292929; }


#quantity { position: relative;  border: 1px solid #a9a9a9; color:#e6e6e6; background-color: #81959f; padding:7px; }
#quantity option:after { color:#81959f; padding:7px; }

.bloc_account { border:1px solid #a9a9a9; padding:1%; border-radius:12px; }

#line_photo { width:90px; float:left; }
#line_photo img { width: 70px; margin: 10px;}

.line_art { margin:0; height:0px; border-top: 1px dotted #292929; content: '\002665'; }
.rate_art { height:16px; width:80px; margin:3px; border:1px solid #292929; border-radius:5px; float:right }

.pagination { margin:auto; text-align:center; clear:both; margin-top:20px; }
.pagination a { display:inline-block; padding: 8px 16px; text-decoration:none; transition: background-color .3s; margin:2px; border: 1px solid #a9a9a9; }
.pagination a.active { background-color:#a9a9a9; color:white; }
.pagination a:hover:not(.active) { background-color:#e6e6e6;}

#bloc_annonce { background-color:#e6e6e6; border:2px solid #a9a9a9; width:90%; padding:1%; position:fixed; bottom:7%; right:4%; text-align:center; display:none; font-size: 0.95em;}
#b_ok a { float:right; background-color:#292929; color:#e6e6e6; }
#b_ok a:hover { background-color:#e6e6e6; color:#292929}

/* pied de page */ 

#footer { clear:both; background-color:#fff; width:96%; margin:auto; text-align:left; border-top: #a9a9a9 1px solid;}
#footer a { color:#292929 }
#footer a:hover { color:#81959f }

#bloc_adr { width:29%; float:left; text-align:center;  padding:0; margin:0; }
#bloc_adr ul { list-style-type:none; padding:0; margin:0; }
#logo_bas { margin:0; width:90px;}

#lien_social { width:100%; }
#lien_social ul { padding:0; text-align:center; }
#lien_social li { display:inline-block; list-style-type:none; width:32px; opacity:0.7; filter: grayscale(100%);}
#lien_social li:hover { -webkit-transform:scale(1.1); transform:scale(1.1); opacity:1; filter: grayscale(100%);}

#bloc_liens { width:70%; float:right; }
#lien_bloc1, #lien_bloc2 { width:42%; display:inline-block; vertical-align:top; margin:1%; padding:2%; list-style-type:none; }

#flexisite { clear: both; margin:20px; font-size:0.7em; font-family: 'Arial', sans-serif; text-align:right; }
#flexisite img { vertical-align: middle; }

/* formulaires */
fieldset { background-color:#FAFAFA; margin:auto; width:90%; margin-top:15px; border-color:#a9a9a9; }
legend { font-weight:bold; color:#81959f; }
form input { width:90%; background-color:#FAFAFA; display:inline; padding:2%; border:1px solid #a9a9a9}
form input[type=date] { width:35%; min-width:140px; }
form input[type=radio] { width:auto; border-color:#a9a9a9; }
form input[type="radio"]:hover+label{ font-weight: bold; color:#292929; }
form input[type=checkbox] { width:auto; border-color:#a9a9a9; }
form input[type=submit] { margin:auto; margin-top:15px; color:#292929; width:40%; border-color:#a9a9a9;background-color:#81959f; font-weight:600; }
form input[type=submit]:hover { color:#292929; background-color:#e6e6e6 ; }
form input:hover, input:hover { color:#292929; background-color:#fff; border-color:#292929; }
form select { background-color:#fff; color:#a9a9a9; border: 0px #fff; padding: 2%;} 
form select:hover { border-color:#fff; border: 0px #fff; }
form select:focus {	border-color: #fff; border: 0px #fff;}
form select:active { border-color:#fff; border: 0px #fff;}
form option {  position: absolute; line-height: 2em; margin: 2%; border:0px #fff; }
form option[type=value] { line-height: 2em; margin: 2%; }
form label { display: inline; width:15rem; }
form label[type=radio] { background-color:#81959f; }
form textarea { width:90%; background-color:#fff; border:1px solid #a9a9a9; padding: 2%; }
form textarea:focus, form#form_mail textarea:hover { color:#292929; background-color:#fff; border-color:#292929; } 

/** sharing bouton **/
#share-buttons { text-align:right; font-weight:bold; font-style:oblique; display:inline-block; font-size:0.9em; width:100%; clear:both ;}
#share-buttons img { width:30px; border:0; display:inline; vertical-align:middle; filter: grayscale(100%); }
#share-buttons img:hover { -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-filter:saturate(4); filter:saturate(4); filter: grayscale(100%); }

/** comment box **/
#com_art { min-width:300px; max-width:600px; padding:0 }
#com_art fieldset { padding:5px; background-color:#e6e6e677; }
#com_art input[type=submit] { margin: 0 auto; }
#com_art input[type=text], #com_art input[type=email] { max-width:350px; }
#com_show { min-width:300px; max-width:800px;margin:10px }
#com_line { margin-left:4px; color:#81959f; font-weight: bold; }
#com_text { border-bottom:1px dotted#292929; padding:2px; margin:2px; }

/** ------------------------------------------- **/
/** pour les petits �crans quelques adaptations **/
/** ------------------------------------------- **/

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

	#logo { width:10%;}
	#claim { font-size:0.8rem;}
	#bloc_titre { font-size:1.5em; width:95%;}
	#bloc_d {font-size:0.8em ;margin:0; padding:0; }
	#bloc_d li { padding:3px; }
	/* { width:85%; margin:4%; }
	#bloc_social { width:100%; }*/
	#bloc_liens, #bloc_adr { width:100%; }
	#lien_bloc1, #lien_bloc2 { width:85%; margin:4%; }
	.hidden { display:none;}
	h1 { font-size:1.3rem; clear:both }
	h2 { font-size:1rem; clear:both }
	h3 { font-size:1.1rem; }
	body { font-size:0.9em; }
	#menu { text-align:center; margin:0px; padding:0; font-size:1.1em; }
	#menu ul { padding:0; }
	#menu li { width:auto; padding:0px; margin:2px; white-space: nowrap;}
	.footer { width:100%; vertical-align: top; padding:1% }
	#content, #bloc_100, #bloc_100, #bloc_A, #bloc_B, #bloc_AB { width:98%; margin:auto; }
	#bloc_ico, #col_2 { display:none; }
	#col_1b { margin:0; width:98% }
	.bloc_col {width:48% ; float: left; padding: 1%;}
	/*.bloc_190, .bloc_290 { margin:auto; width:94%; clear:both; margin-bottom: 1%;}
	img { max-width: 100% ; margin:auto }*/
	.bloc_shop2, .bloc_shop1 { height:auto; width:48%; padding:2px; margin:0.3%; font-size:0.9em; float:left; }
	.bloc_shop1 { width:100%; height: auto; }
	#line_photo { width:100%; }
	#line_photo img { width: 70px; margin: 10px;}
	#art_cover { width:98%; height: auto; }
	.bloc_shop { width:100%; height: auto; }

	#flexisite { margin-top: 200px}
}

/** ------------------------------------------- **/
@media screen and (max-width: 400px) {
	#logo { width:20%;}
	#bloc_d {font-size:0.8em; margin:0; padding:0; }
	#menu li { padding:2px;}
	#claim { font-size:0.8em; }
	#bloc_lg img {width:24px;}
	#menu { width:100%; }
	#bloc_titre, h1 { font-size:1.1em; margin:0; padding: 0;}
	
	/*
	#lien_bloc1, #lien_bloc2 { width: 80%; } 
	fieldset { width:60%}*/
	form#form_mail input[type=date] { width: 40%; }
}

@media screen and (min-width: 400px) {
	/*#bloc_1, #bloc_2, #bloc_3, #bloc_4, #bloc_5, #bloc_6, #bloc_7 { margin: 4%;padding:2%;  }*/
}
@media print {
	body {
	  margin: 0;
	  color: #000;
	  background-color: #fff;
	  font-size: 10pt;
	}
	#header, #footer, #bloc_annonce { display:none; }
	.noprint { display:none; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98% }
	
	#print-footer { display:block ;position: absolute; width:100%; bottom: 0cm; font-size:7pt; } 
}