/* CSS portail FlexiSite Default v.2 */
/*  orange : fcc477 fcad48 | rouge/rose : f37a7a ef4e4b | #fcc477;*/

/*html { scroll-behavior: smooth; scrollbar-color:#f37a7a #fcc477 ;
scrollbar-width: thin;}

html::-webkit-scrollbar {
	width: 0.5rem;
	background-color: #f37a7a; 
  }
html::-webkit-scrollbar-thumb { background: #fcc477; }*/

body {
	background-color:#ffffff;
	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.7em; font-family: "Josefin Sans", sans-serif; color:#f37a7a; margin-bottom;:0}
h2 {font-size:1.3em; color:#F78000; text-shadow: -0.5px 0.5px 1px #5d5e5e; }
h3 {font-size:1.2em; color:#333; text-shadow: -0.7px 0.7px 1px #5d5e5e; position: relative; padding-left: 1.5em; }
h3::before {
	content: "";
	position: absolute;
	left: 0em;
	top: 0.1em; /* ajustement vertical */
	width: 1em;
	height: 1em;
	background-color: orange; box-shadow: -0.9px 0.7px 1px #5d5e5e;
  }

A { text-decoration: none; padding: 1px;} 
A:link { color:#f37a7a}
A:visited {color:#f37a7a;} 
A:active {color:#f37a7a;} 
A:hover { background-color:#fcc477; border-radius: 5px; color:#000  } 

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:#f37a7a; }
.item {  width: 8rem; display: inline-block;}
.zoom:hover { -webkit-transform:scale(1.2); transform:scale(1.2); background-color: white; }
.zoom:hover.a { background-color: white; }
.mobile {display:none;}

.icon { width: 24px; vertical-align: middle;}

/*  entete  */ 
#header { background-color:#ffffff; width:100%; margin:0px; }
#logo { width:10%; position:fixed; left:0; top:0; margin:0; }
#claim { font-size:1.5em; font-family: "Josefin Sans", sans-serif; margin:0; }

#bloc_titre { text-align:left; margin:0; font-size:3em; font-family: 'Josefin Sans', sans-serif; font-weight: bold; padding:0px;  letter-spacing:3px; position: fixed; background-color: #fcc477; top: 0; left: 0; border-bottom-right-radius: 20px;}
#titre { margin:0; }

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

#menu { text-align:center; width:100%; margin:0}
#menu ul {padding:0; margin:0; }
#menu li { display: inline-block; padding:3px; padding:5px; margin:0; border: 1px solid #000; border-radius: 5px;}

/*#about_menu { width:100%; margin:0; padding:0; text-align:left; }
.dot { color:#ddd; background-color:#ffffff; padding:0px }*/
	
#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 { clear:both; width:98%; margin:auto; padding:1%; display:inline-block; text-align:left; display: flex; flex-direction: row;flex-wrap: wrap; }

#col_3 { display:none; }
#col_1b { flex: 1 1 0; max-width: calc(100% - 280px); margin:auto; text-align:left; order: 1; }

#col_2 { width:270px; padding:5px; margin:0; text-align:center; margin-bottom:5px; border-left:1px #333 solid;flex: 0 0 260px; order: 2;}
#col_1 { margin:0; padding:0; margin-right:1%; white-space:normal;  }

.full-width-block { flex: 0 0 100%; min-height: 260px; }

/*#col_1 img { border:1px #333 solid; border-radius:5px; }float:right;max-width:1020px;*/
#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; }

.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 #f37a7a; 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; }
.img50d { width:50%; float:right; border-radius: 10%; margin-left:2%;}

#search_bar { text-align:right;flex: 0 0 100%; align-items: stretch; }
#search_bar img { border:0px; margin:0 }
#search_bar_d { border: 1px solid #f44336; border-radius: 5px; float: right; flex: 1; height: 35px;}
#search_bar_g { float: left; flex: 1;}

.custom-select { height: 35px; /* Ajuste la hauteur de la balise <select> */ padding: 0.5em; /* Ajuste le padding pour augmenter la hauteur */ box-sizing: border-box; /* Inclut le padding et la bordure dans la hauteur totale */ -webkit-appearance: none; /* Supprime les styles par défaut sur WebKit */ -moz-appearance: none; /* Supprime les styles par défaut sur Firefox */ appearance: none; /* Supprime les styles par défaut sur les autres navigateurs */
	padding: 0px 0; }

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

.bloc_shop { width:65% }
.photo_art { width:33%; float:left; margin-right:1%; margin-bottom: 1%; border: 1px solid #333;}

.bloc_shop1 { clear:both; max-height:64px; font-size:1em;  width:2000px; }
.photo_art1 { width:64px; margin-right:3px; float:left; }

.bloc_shop2 { width:24%; padding:0.2%; margin:0.2%; font-size:0.9em; float:left; }
.bloc_photo2 { overflow:hidden; border:#000 1px solid; }
.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 #000;background-color:#ddd; text-align:center; border-radius:7px; width: fit-content; padding: 1%;  }
.bloc_button:hover { background-color: #fcc477; color: #000 }

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

.line_art { margin:0; height:0px; width: 100%; border-top: 0px dotted #000; clear:both;}

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

#line_photo { width: 100%; vertical-align:top; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
#line_photo img {vertical-align:middle; height: 100%;}
#line_photo img:hover:not(.active) {width: 100%;}

#khuyen_mai { width: 100%; vertical-align:top; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px;}

.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: #f37a7a; 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}


/* --- account administration --- */
#bloc_account img { width:32px; vertical-align:middle; }
.bloc_account { border: 1px solid #f37a7a; border-radius: 10px; background-color: #FFF0E0; padding:1%; margin: 1%;}
#bloc_orders img { width:50px; }

#product ul, #quot ul, #list ul, #message ul { list-style-type: none; display:bloc; padding: 0;}
#avatar { float:right; width:110px; height:110px; border:1px solid #F78000; border-radius:100%; overflow:hidden; text-align:center; display:table-cell; vertical-align:top; margin-right: 1%; }

#tracking { margin:0;}
#tracking li { width:15em;border-radius:10px;margin:0.5%;padding: 0.5%;border:1px solid black;}
#tracking li { zoom:1.4; }
#track_tab { text-align: left }
#track_tab tr { vertical-align:top ; }
.round_green { background-color: green; width: 1em; height:1em; border-radius:50% ; border:1px solid black; float:right;}
.round_red { background-color: red; width: 1em; height:1em; border-radius:50% ; border:1px solid black; float:right;}

/* pied de page */ 
footer { margin:0px; }
#footer { clear:both; background-color:#ffffff; width:100%; margin:0px; text-align:left; }

#bloc_info { width:40%; float:right; font-size: 0.85em; }
#bloc_adr { background-color: #f37a7a; 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:#ffffff; width:90%; height:64px }
#bloc_blanc h2 { margin:0 }

#bloc_social { width:60%; float:left;text-align:center}
#lien_social { width:100%; margin:0; text-align:center; padding:0; }
#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:59%; float:left; text-align:center;  }
#lien_bloc1, #lien_bloc2 { width:42%; display:inline-block; text-align:left; background-color:#fcc477; vertical-align:top; padding: 1%; color:#000}
#lien_bloc1 a, #lien_bloc2 a { color:#000; }
#lien_bloc1 li, #lien_bloc2 li { list-style: circle; margin-left: 1em }

#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: 0.5em; }

#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 */
#poll {clear:both;  padding:0; text-align:center; flex: none; display: block;all: revert; }

/*.poll { display: flex; align-items: left; margin: 1%; flex-wrap: wrap; background-color:#eee; width:100%; border-bottom:1px solid #F78000; text-align:left; }*/
.poll { display: flex; align-items: left; margin: 1%; flex-wrap: wrap; background-color:#eee; border-bottom:1px solid #F78000; text-align:left; }

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

form label { display: inline; width: 17rem; line-height:1.5em; }
form label[type=radio] { background-color:#f00; }
form textarea { width:90%; border-radius:7px; border: 1px solid #f37a7a; background-color:#FAFAFA; } 
form 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 input { width:90%; border-radius:12px; background-color:#FAFAFA; display:inline; border:1px solid #f37a7a; height:30px; vertical-align: middle; }
/*form input { width:auto; border-radius:7px; background-color:#FAFAFA; display:inline; }*/

form input[type=date] { width:35%; }
form input[type=radio] { width:auto; border-color:#fcc477; zoom: 1.4; vertical-align: middle; }
form input[type=checkbox] { width:auto; zoom: 1.4; vertical-align: middle; }
form textarea:focus, textarea:hover { color:#000; background-color:lightyellow; border: 1px solid #F78000; border-color:#F78000;} 
form input:hover, input:hover { color:#000; background-color:lightyellow; border-color:#F78000;}

form input[type=submit] { border-radius:7px; margin:auto; margin-top:15px; width:35%; border: 1px solid #F78000; background-color:#f37a7a; }
form input[type=submit]:hover, form#form_mail input[type=submit]:hover { inset; background-color:#fcc477; border-color: #F78000; }

select { border:1px solid #F78000; padding:5px; border-radius:5px; margin:0; display: inline-block; background-color: white; }
select:hover, SELECT:focus { background-color: #fcc477; color:#000 }
option { background-color: #ffffff; color:#000; }
option:hover, option:focus { background-color: #fcc477; color:#000 }

/* TABLEAU */ 
table { width: 100%; border-collapse: collapse;}
table img { width: 60px; min-width: 60px; margin:auto; }
th, td { border: 1px solid #ddd; padding: 6px; text-align: center; }
th, .td_1 { background-color: #FAFAFA;  text-align: center; vertical-align: top; font-size: 0.5em; font-weight: bold; }
tr:nth-child(even) { background-color: #f9f9f9; }
tr:hover { background-color: #ddd; }

thead th { position: sticky; top: 0; background-color: #FAFAFA; z-index: 2; }
tbody td:first-child { position: sticky; left: 0; background-color: #FAFAFA; z-index: 1; } 
tbody th:first-child { position: sticky; left: 0; background-color: #FAFAFA; z-index: 3; }

/*form input[type=submit],*/
/** ------------------------------ **/
/** pour les rollovers bas de page **/
/** ------------------------------ **/
.rollover1 { background:url("../../themes/giatot/imgs/round_facebook.svg") 0 0 no-repeat; }
.rollover2 { background:url("../../themes/giatot/imgs/round_tiktok.svg") 0 0 no-repeat; }
.rollover3 { background:url("../../themes/giatot/imgs/round_twitter.svg") 0 0 no-repeat; }
.rollover4 { background:url("../../themes/giatot/imgs/round_linkedin.svg") 0 0 no-repeat; }
.rollover5 { background:url("../../themes/giatot/imgs/round_youtube.svg") 0 0 no-repeat; }
.rollover6 { background:url("../../themes/giatot/imgs/round_pinterest.svg") 0 0 no-repeat; }
.rollover7 { background:url("../../themes/giatot/imgs/round_instagram.svg") 0 0 no-repeat; }
.rollover8 { background:url("../../themes/giatot/imgs/footer-skype.png") 0 0 no-repeat; }
.rollover9 { background:url("../../themes/giatot/imgs/footer-yahoo.png") 0 0 no-repeat; }
.rollover10 { background:url("../../themes/giatot/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(0%); }

.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; font-size:0.9em; float: right; }
#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:#FAFAFA;font-size: 0.8em; }
#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_art textarea { width: 99%; }
#com_art input[type=submit] { margin-top:1% }
#com_show { min-width:300px; max-width:800px;margin:10px }
.com_line { margin-left:4px; color:#f44336; 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: #ffffff; 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:1.2rem; }
	/*#bloc_info { width:90%; float:right}
	#bloc_adr { width:90%; float:right}*/
	.photo_art { width:48%; }
	#bloc_social { width:100%; }
	#lien_bloc1, #lien_bloc2 { width:35%; }
	.hidden {display:none;}
	
	h1 { font-size:1.3rem; clear:both }
	h2 { font-size:1.2rem; }
	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_A, #bloc_B, #bloc_AB  { width:98%; margin:auto; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98%; flex: 1 1 0; max-width: 100%; }
	.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: 430px) {
	#logo { width:90px;}
	#claim { font-size:1em; }
	.mobile {display:block;}
	h1 { font-size:1.1rem; clear:both }
	h2 { font-size:1.1rem; }
	h3 { font-size:1rem; }
	#bloc_lg img {width:24px;}	
	#bloc_titre { font-size:1.8em; }
	#titre { letter-spacing:2px; }
	#menu { text-align:center; margin-top: 1%; }
	.bloc_button { line-height: 2em;}
	#bloc_info { width: 100%; }
	#bloc_liens, #lien_bloc1, #lien_bloc2 { width: calc(100% - 1.5em); }
	#bloc_info h2 { font-size:1em;}
	.photo_art { width:100%; clear:both; margin-right:0 }
	/*#bloc_adr img { float:left; margin-right:1px; width: 64px; }
	#bloc_blanc ul {  background-color:#ffffff; width: calc(100% - 64px); height:64px; text-align: right; }
	fieldset { width:60%}*/
	form#form_mail input[type=date] { width: 40%; }
	select { width: 100%; }
	.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%;}
	#search_bar_d { width: 100%; text-align: center; }
}

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

@media print {
	body {
	  margin: 0;
	  color: #000;
	  background-color: #ffffff;
	  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; } 
}