/* CSS portail FlexiSite Default v.2 */
/* */

html { scroll-behavior: smooth; scrollbar-color: #333 rgba(0,0,0,.15);
scrollbar-width: thin;}

html::-webkit-scrollbar {
	width: 0.5rem;
	background-color: rgba(0,0,0,.15); 
  }
html::-webkit-scrollbar-thumb { background: #333; }

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

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

h1 {font-size:1.5em; font-family: 'Comfortaa-Bold'; text-align:center; }
h2 {font-size:1.1em; color:#333;  }
h3 {font-size:1em; color:#F78000; text-shadow: -0.7px 0.7px 1px #5d5e5e; }

A { text-decoration: none; } 
A:link { color:#000}
A:visited {color:#000;} 
A:active {color:#009748;} 
A:hover {color:#F78000; } 

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

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

/*  entete  */ 
#header { background-color:#d3d3d2; width:100%; margin:0px; }
#logo { width:13%; float:left; margin:1%; }
#claim { font-size:1.5em; font-family: 'Comfortaa-Bold', sans-serif ;float:left; }

#bloc_titre { text-align:right; margin:0; margin-top:55px; background-color:#5d5e5e; width:60%; font-size:3em; font-family: 'Arial', sans-serif; font-weight: bold; padding:0px; line-height:0.8em; letter-spacing:3px }
 
#titre { margin:0; margin-right:-2.1em ;}

#bloc_lg { text-align:center;float:right;margin:0.5%; height:32px }
#bloc_lg li { display:inline-block; list-style-type:none; }
#bloc_lg ul { padding:0; margin:0; }
#bloc_lg img { width:32px; margin-right:2px }

#menu { text-align:left; margin:-12px; width:90%; }
#menu li { display: inline-block; padding:3px; background-color:#ddd; }
.dot { color:#ddd; background-color:#fff; padding:0px }
	
#content { clear:both; width:98%; text-align:left; margin:auto; padding:1%; 
	background-image: url(../../themes/flexisite/imgs/fond.gif);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position: 0 150px;
	background-size:auto; }

#bloc { clear:both; width:100%; text-align:center; margin:auto; vertical-align:top; }

#bloc_100 { width:98%; margin:auto; padding:1%; display:inline-block; text-align:left; }

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

#bloc_S, #bloc_G, #bloc_Q, #bloc_C { transform:skewY(0deg); -webkit-transform:skewY(0deg); animation: intro 3s 1; width:23%; margin:0.3%; padding:0.5%; display:inline-block; }
#bloc_S:hover, #bloc_Q:hover, #bloc_G:hover, #bloc_C:hover { transform:skewY(-5deg); -webkit-transform:skewY(-5deg); transition:.40s;}

.bloc_L { background-color:rgba(245, 245, 245,0.7); width:98%; margin:0.3%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted black; vertical-align:top; text-align:left; min-height:175px; overflow: hidden; }

@keyframes intro {
/*	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(0);
	}
	40% {
		transform: scale(90deg);
	}
	60% {
		transform: scale(0deg);
	}
	80% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}*/
	from { transform:  translate(0em, 10em);}
	to { transform: translate(0em, 0em);}
   /*	from {transform: scale(0);  }
    to { transform: scale(1); transform: rotateZ(60deg) translate(1em, -9em);}*/
  }
@-webkit-keyframes intro { 
	from { transform:  translate(0em, 10em);}
	to { transform: translate(0em, 0em);}

    /*from {transform: scale(0); }
    to { transform: scale(01);}*/
}

.bloc_290 { background-color:rgba(245, 245, 245,0.7); margin:0.9%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted black; vertical-align:top; text-align:left; min-height:175px; width:30%; overflow: hidden; }
/*.bloc_190 { background-color:rgba(245, 245, 245,0.7); width:190px; margin:0.3%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted black; vertical-align:top; text-align:left; height:110px ; text-align:center; }*/

#bloc_newsletter { background-color:rgba(245, 245, 245,0.7); border-radius:5px; border:1px dotted black; display: flex; flex-wrap: wrap;}

.bloc_galery1 { height:360px; }
.bloc_galery2 { height:420px; }
.bloc_galery2 img, .bloc_galery1 img { width: 107%; box-shadow: 1px 1px 5px #5d5e5e;}
.bloc_galery2 img:hover, .bloc_galery1 img:hover { -webkit-transform:scale(1.05); transform:scale(1.05); transition:.60s;}

#bloc_A, #bloc_B { background-color: rgba(245, 245, 245, 0.7); width:calc(47% - 2px); margin:1%; padding:0.5%; border-radius: 5px; border:1px dotted black; vertical-align:top; text-align:left; }

.bloc50 { width:45%; margin: 1%; padding:1%; display:inline-block; border-radius: 5px; border:1px dotted black; vertical-align:top; text-align:left; }

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

.promo { background-color:#f44336; color:#fff; padding:3px; border:1px solid #4caf50; border-radius:50%; }
.compare {width:32px; }

.bloc_shop { width:66% }
.photo_art { width:33% }

.bloc_shop1 { min-height:230px; font-size:1em; }
.photo_art1 { width:319px; margin-right:2px; float:left; }

.bloc_shop2 { min-height:270px; width:32%; padding:0.2%; margin:0.2%; font-size:0.9em; float:left; }
.photo_art2 { clear:both; width:100%; margin:auto;}

.bloc_shop3 { min-height:210px; width:48%; padding:1px; margin:1px; font-size:0.9em; float:left; }
.photo_art3 { float:left; width:220px; margin-right:2px;  }

.bloc_shop1, .bloc_shop2, .bloc_shop3 { text-align:justify; overflow:hidden; }

.bloc_button { border:1px solid #F78000;background-color:#ddd; text-align:center; border-radius:7px; width: fit-content; padding: 1%; margin: auto; }
.bloc_button:hover { background-color: #F7800077; color: #000 }

.bloc_button2 { border:1px solid #F78000; padding:5px; border-radius:5px;  }
.bloc_button2:hover { background-color: #F7800077; color:#000 }

.line_art { margin:0; height:0px; border-top: 1px dotted #000; content: '\002665'; }

.rate_art { height:16px; width:80px;  margin:3px; border:1px solid #000; border-radius:5px; float:right }

#line_photo { width: 100%; vertical-align:top;}
#line_photo img {vertical-align:middle; margin:0.5%;}
#line_photo img:hover:not(.active) {width: 100%;}

.pagination  { margin:auto; text-align:center; clear:both; margin-top:10px; }
.pagination a { display:inline-block; padding: 8px 16px; text-decoration:none; transition: background-color .3s; margin:2px; }
.pagination a.active { background-color: #4caf50; color: white; }
.pagination a:hover:not(.active) { background-color: #ddd;}

#bloc_annonce { background-color:#3339; border:1px solid #333;  width:98%; padding:2%; position:fixed; bottom:0; right:0; text-align:center; display:none; font-size: 0.95em; }
#ann2 { background-color: #d3d3d2; width:fit-content; margin:auto; padding:0.5%; }
#b_ok a { float:right; background-color:#5d5e5e; color:#F78000; }
#b_ok a:hover { background-color:#F78000; color:#5d5e5e}

/* pied de page */ 
footer { margin:0px; }
#footer { clear:both; background-color:#d3d3d2; width:100%; margin:0px; text-align:left; }
#bloc_info { width:40%; float:right; font-size: 0.85em; }
#bloc_adr { background-color:#5d5e5e; padding:5px; }
#bloc_adr ul { list-style-type: none; padding:0; margin:0; }
#bloc_adr img { float:left; margin-right:3px; width: 64px; }
#bloc_blanc { background-color:#fff; width:90%; height:64px }

#bloc_social { width:58%; float:left;text-align:center}
#lien_social { width:100%; margin:0; text-align:center;padding:0; margin-top:-8px;  }
#lien_social li { display: inline-block; list-style-type: none;}

#bloc_contact img { filter: grayscale(100%);}
#bloc_contact img:hover { filter: grayscale(0%); -webkit-transform:scale(1.1); transform:scale(1.1); }

/*#lien_social ul { color:red; padding:0; }*/
#bloc_liens { width:58%; float:left; text-align:center }
#lien_bloc1, #lien_bloc2 { width:40%; display:inline-block; text-align:left; background-color:#d3d3d2; vertical-align:top; }
#lien_bloc1 li:hover, #lien_bloc2 li:hover { list-style: none; }
#lien_bloc1 li:hover::before, #lien_bloc2 li:hover::before {content: "•"; color: #F78000; display: inline-block; width: 1em; margin-left: -1em}

#flexisite { clear:both; margin:0; margin-top:3px; font-size:0.7em; font-family: 'Arial', sans-serif; text-align:center; }
#flexisite img { vertical-align: middle; width:24px; }

/* Forms */

fieldset { border-radius:10px; background-color:#ddd; margin:auto; width:90%; margin-top:12px; border: 1px solid #5d5e5e }
legend { font-weight:bold; }

form#form_mail label { display: inline; width: 17rem; line-height:1.5em; }
form#form_mail label[type=radio] { background-color:#f00; }
form#form_mail textarea { width:90%; border-radius:7px; border: 1px solid #000; background-color:#FAFAFA; } 
form#form_mail input { width:90%; border-radius:7px; background-color:#FAFAFA; display:inline; border: 1px solid #000; height: 2em;}
/*form#form_mail input[type=text] { width: 60%; border-radius:10px}
form#form_mail input[type=tel] { width: 60%; border-radius:10px}
form#form_mail input[type=email] { width: 60%; border-radius:10px;}
form#form_mail input[type=submit] { width:40%; margin:auto; margin-top:15px; }*/
form#form_mail input[type=date] { width:35%; }
form#form_mail input[type=radio] { width:auto; border-color:#F78000; zoom: 1.4; vertical-align: middle; }
form#form_mail input[type=checkbox] { width:auto; zoom: 1.4; vertical-align: middle; }
form#form_mail textarea:focus, textarea:hover { color:#000; background-color:lightyellow; border: 1px solid #F78000; border-color:#F78000;} 
form#form_mail input:hover, input:hover { color:#000; background-color:lightyellow; border-color:#F78000;}

form#form_mail input[type=submit] { border-radius:7px; margin:auto; margin-top:15px; background-color:#ddd; width:35%; }
form input[type=submit]:hover, form#form_mail input[type=submit]:hover { inset; background-color:#F7800077; border-color: #F78000; }
form input { width:auto; border-radius:7px; background-color:#FAFAFA; display:inline; }
/*form input[type=submit],*/
/** ------------------------------ **/
/** pour les rollovers bas de page **/
/** ------------------------------ **/
.rollover1 { background:url("../../themes/flexisite/imgs/round_facebook.svg") 0 0 no-repeat; }
.rollover2 { background:url("../../themes/flexisite/imgs/round_tiktok.svg") 0 0 no-repeat; }
.rollover3 { background:url("../../themes/flexisite/imgs/round_twitter.svg") 0 0 no-repeat; }
.rollover4 { background:url("../../themes/flexisite/imgs/round_linkedin.svg") 0 0 no-repeat; }
.rollover5 { background:url("../../themes/flexisite/imgs/round_youtube.svg") 0 0 no-repeat; }
.rollover6 { background:url("../../themes/flexisite/imgs/round_pinterest.svg") 0 0 no-repeat; }
.rollover7 { background:url("../../themes/flexisite/imgs/round_instagram.svg") 0 0 no-repeat; }
.rollover8 { background:url("../../themes/flexisite/imgs/footer-skype.png") 0 0 no-repeat; }
.rollover9 { background:url("../../themes/flexisite/imgs/footer-yahoo.png") 0 0 no-repeat; }
.rollover10 { background:url("../../themes/flexisite/imgs/round_zalo.svg") 0 0 no-repeat; }

.rollover1, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7, .rollover8, .rollover9, .rollover10 { display:inline-block; width:30px; height:30px; filter: grayscale(100%); }

.rollover1:hover, .rollover2:hover, .rollover3:hover, .rollover4:hover, .rollover5:hover, .rollover6:hover, .rollover7:hover, .rollover8:hover, .rollover9:hover, .rollover10:hover { filter: grayscale(0%); -webkit-transform:scale(1.1); transform:scale(1.1); }

.rollover1 span , .rollover2 span ,.rollover3 span , .rollover4 span , .rollover5 span, .rollover6 span, .rollover7 span, .rollover8 span, .rollover9 span, .rollover10 span { display:none }

/** 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; }
#share-buttons img:hover { -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-filter:saturate(4); filter:saturate(4); }

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

/** flexichat **/
#flexichat { width:120px; height:32px; background-color: #d3d3d2; padding:0; position:fixed; bottom:120px; right:0; text-align:center; border-radius: 15px 0px 0 15px; overflow: hidden; display:none; }
#flexichat img { width: 32px; vertical-align: middle; }
#flexichat:hover { background-color: #5d5e5e; width:300px; height:320px; }
#flexichat_txt { width: 96%; height:230px; margin:1%; padding: 1%; background-color: #fff; text-align: left; border-radius: 15px; overflow-y:scroll;  }

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

@media screen and (max-width:822px) {
	#logo { width:120px;}
	#claim { font-size:0.8rem; }
	#bloc_info { width:90%; float:right}
	/*#bloc_adr { width:90%; float:right}*/
	#bloc_social { width:100%; float:left}
	.hidden {display:none;}
	h1 { font-size:1.3rem; clear:both }
	h2 { font-size:1.2rem; clear:both }
	h3 { font-size:1rem; }
	body { font-size:0.9em; }
	li.bouton_menu { width: 95px; }
	.footer { width:100%; vertical-align: top; padding:1% }
	#content, #bloc_100, #bloc_100, #bloc_A, #bloc_B, #bloc_AB { width:98%; margin:auto; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98% }
	.bloc_190, .bloc_290, #bloc_S, #bloc_G, #bloc_Q, #bloc_C { margin:auto; width:48%; clear:both; margin-bottom: 1%;}
	img { 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; }
	#art_cover { width:100%; height: auto; }
	.bloc_shop { width:100%; height: auto; }
	.bloc50 { width:98%; margin: 1%; padding:1%; display:inline-block; border-radius: 5px; border:1px dotted black; vertical-align:top; text-align:left; }
}

/** ------------------------------------------- **/
@media screen and (max-width: 420px) {
	#logo { width:90px;}
	#claim { font-size:0.8em; }
	h1 { font-size:1.1rem; clear:both }
	h2 { font-size:1.1rem; clear:both }
	h3 { font-size:1rem; }
	#bloc_lg img {width:24px;}	
	#bloc_titre { font-size:2em; width:50%; }
	#titre { letter-spacing:2px; margin-right:-2em ;}
	#lien_bloc1, #lien_bloc2 { width: 80%; } 
	/*fieldset { width:60%}*/
	form#form_mail input[type=date] { width: 40%; }
	.bloc_190, .bloc_290 { margin:auto; width:94%; clear:both; margin-bottom: 1%;}
	#bloc_S, #bloc_G, #bloc_Q, #bloc_C { margin:auto; width:48%; clear:both; margin-bottom: 1%;}
}

@media screen and (max-width: 359px) {
	#menu { text-align:left; margin-left:-24px; width:98%; }
	#claim { display:none; } 
	.dot { display:none; }
	.dot { color:#fff; background-color:#fff; padding:0px }
}

@media print {
	body {
	  margin: 0;
	  color: #000;
	  background-color: #fff;
	  font-size: 10pt;
	}
	#header, #footer, #bloc_annonce, #menu, #share-buttons { 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; } 
}