/* CSS portail Vietnam Service 02/05/2022 */
/* couleur de 2019 living coral : #FA7268 */
/* couleur de 2018 ultra violet : #5F4B8B */
/* #6ee165 vert complémentaire */

html { scroll-behavior: smooth; }

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

h1 {font-size:1.3em; font-family: 'Comfortaa', cursive; text-align:center; }
h2 {font-size:1.1em; }
h3 {font-size:1em;color:#852cff; }

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

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

.photo { border:1px solid #5d5e5e; }
b, strong { color:#852cff; }
.return { clear:both }
.center { margin:auto; text-align:center; }
.mini { font-size:0.7em }
.big { font-size:1.7em; color:#852cff; }
.zoom:hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
.icon { width:24px; vertical-align: middle;}
.circle { border:2px solid #852cff; border-radius: 15px 50px 30px; padding:2%; background-color: #ddd; color:#f03f88; font-size: 1em;}

.bouton { font-size:1.1em; text-align:center; margin:auto;}
.bouton:hover { border:1px solid #852cff; background-color: #ddd; }
.display { display:none; }
hr { border-top:1px solid #852cff; }
.bloc_table { width: 100%; overflow: hidden; overflow-x: scroll;}
table { border-collapse:collapse; border-radius: 10px; margin: auto; overflow: hidden; border:1px solid black; table-layout: auto; width: 100%; }
tr,td,th { border:1px solid #852cff; }
th { text-align:center; color:#852cff }
.tab_line { background-color: #f03f88; color:#ddd }
.tab_line th { color:#ddd }

.cadre { border-radius:7px; background-color:#ddd; border: 1px dotted #852cff; padding:4px; margin:0; margin:10px; }

/* Calendar */
.cal_sunday { background-color:#f03f88; padding: 3px; }
.cal_jour { border:3px solid #852cff; border-radius:40%; padding: 3px; }

/* entete  background-image: linear-gradient(#333,#FAFAFA, #fff); */ 
#header { width:100%; margin:0px;}
#claim {font-size:1.5em; font-family: 'Comfortaa-Bold', sans-serif; float:left; margin:1%}
#logo { width:120px; float:left; margin:1%; } 
#bloc_titre { margin-top:55px;  width:100%; height:1px; }

#bloc_TR { text-align:right; float:right; margin:0.5%; height:32px; font-size:0.7em;}
#bloc_TR li { display:inline-block; list-style-type:none; text-align:center; }
#bloc_TR ul { padding:0; margin:0; }

/*#bloc_TR img { width:32px; margin-right:2px}*background-color:#852cff;/
/* -- bloc account --
#bloc_account { text-align:center; float:right; margin:0.5%; height:32px; } */

#menu { text-align:left; margin:0px; width:100%;  }
#menu ul { display:bloc; margin:1%; padding:0; }
#menu li { display:inline-block; padding:3px; border: 1px solid #ddd;}
#menu li:hover { background-color: #ddd; border: 1px solid #852cff; }

/*  content  */
main { margin:0; padding:0%; }
#content { clear:both; width:100%; text-align:center; margin:0; padding:0%; }
#bloc { clear:both; width:100%; text-align:center; margin:0; vertical-align:top; padding:0%; }

/* --- Page d'accueil - Home page -----------------------------------------*/
#bloc_project { width:41%; background-image: url(../../themes/services/imgs/bloc_project.jpg); background-repeat:no-repeat; background-size: auto 100%; background-position: left; border-radius: 25px; border: solid 1px #852cff; animation: righttoleft 2s; animation-iteration-count:1; float:left }

#bloc_provider { width:41%; background-image: url(../../themes/services/imgs/bloc_provider.jpg); background-repeat:no-repeat; background-size: auto 100%; background-position: right; border-radius: 25px; border: solid 1px #852cff; animation: lefttoright 5s; animation-iteration-count:1; float: left; }

#bloc_provider p, #bloc_project p { line-height:1.2em; font-size:1.2em; color:#000; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

/*#bloc_project { width:40%; background-image: url(../../themes/services/imgs/bloc_project.jpg); background-repeat:no-repeat; background-size:cover; border-radius: 25px; border: solid 1px #852cff; animation: righttoleft 3s; animation-iteration-count:2; position: relative; }

#bloc_provider { width:40%; background-image: url(../../themes/services/imgs/bloc_provider.jpg); background-repeat:no-repeat; background-size:cover; border-radius: 25px; border: solid 1px #852cff; animation: lefttoright 3s; animation-iteration-count:2; position: absolute;margin-left: 50%;}*/

	@keyframes righttoleft {
		0% { margin-left: -100%; opacity:0;}
		40% {  opacity:1; }
		100% {  opacity:1;}
	  }
	@keyframes lefttoright {
		0% { margin-left: -100%; opacity:0; }
		40% {  margin-left: -100%; opacity:0; }
		50% {  margin-left: -100%; opacity:0; }
		101% { margin-left: 7%; opacity:1; }
	  }
	@-webkit-keyframes righttoleft { 
		0% { margin-left: -100%; opacity:0;}
		40% {  opacity:1; }
		100% {  opacity:1;}
	}
	@-webkit-keyframes lefttoright { 
		0% { margin-left: -100%; opacity:0; }
		40% {  margin-left: -100%; opacity:0; }
		50% {  margin-left: -100%; opacity:0; }
		101% { margin-left: 7%; opacity:1; }
	}

/* ---------------------------------------------------------------*/

#bloc_100 { clear:both; width:98%; margin:auto; padding:0%; display:inline-block; text-align:justify; vertical-align:top; }

/*#bloc_A, #bloc_B, #bloc_AB { background-color: rgba(245, 245, 245, 0.7); width:45%; margin: 0.2%; padding:0.5%; display:inline-block; border-radius: 5px; border:1px dotted black; vertical-align:top; text-align:left; }*/

#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; }
#bloc_AB { width:91.8%; }

#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:270px; white-space:normal; }
#col_1 { max-width:1020px; margin:auto; text-align:left; }

/*#col_1 img { border:1px #333 solid; border-radius:0px; }
.bloc_290 { background-color:rgba(245, 245, 245,0.7); width:290px; margin:0.3%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted black; vertical-align:top; text-align:left; height:175px; }
.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_tellus { width:24.5%; }
#bloc_wefind { width:24.5%; }
#bloc_deal { width:24.5%; }

.bloc_vignettes { margin:3%; padding:1%; text-align:center; list-style-type:none;}
.bloc_vignettes h3 { color:#fff; background-color: #852cff; line-height:1.2em; padding:2px; border-radius: 10px; }
.bloc_vignettes ul { list-style-type:none; margin:0; padding:0; }

.bloc_0 { clear:both; width:auto; margin:auto; text-align:center; font-size:1.1em}

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

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

.bloc_photo {width:33%; float:left; overflow: hidden; }
.bloc_shop { width:65%;float:right; }
.photo_art { width:33% }
.bloc_shop2 { width:23%; padding:0%; margin:1%; font-size:0.9em; line-height: 1; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 9px 0px; }
.bloc_shop2 h2 { margin:0; color: #852cff; }
.bloc_photo2 { width:100%; height:auto; overflow:hidden; position: relative; text-align:center;}
.photo_art2 { height:auto; }
.bloc_text2 { padding:5px }
.rate_art { height:16px; width:80px; position:absolute; margin:3px; }

.bloc_button, .button1 { padding:3px; margin:3px; background-color:#ddd; border-radius:7px; border:1px solid #852cff; text-align:center; }

.bloc_button2 { border:1px solid #ddd; padding:3px; }
.bloc_button:hover, .bloc_button2:hover { border: 1px solid #852cff; }

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

.pagination { margin:auto; text-align:center; clear:both; margin-top:10px;  width: 100%;}
.pagination a { display: inline-block; padding: 4px 8px; 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; color:#FAFAFA }
/*#ann2 { background-color: #d3d3d2; width:fit-content; margin:auto; padding:0.5%; }*/

#b_ok a { float:right; background-color:#ddd; }
#b_ok a:hover { color:#852cff; background-color: #d6b9ff; border: 1px solid #852cff;}

/* --- account administration --- */
#bloc_account img { width:32px; vertical-align:middle; }
.bloc_account { border: 1px solid #852cff; border-radius: 10px; text-align: left; }

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

#tracking { margin:0;}
#tracking li { width:15em;border-radius:10px;margin:0.5%;padding: 0.5%;border:1px solid black;}
#tracking li { zoom }
#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 { clear:both; width:100%; margin-top:1%; text-align:left; border-top:1px solid #852cff }

#newsletter { width:96%; border: 1px solid #852cff; margin:1%; border-radius:5px; padding:0.5%; text-align:center; background-image:radial-gradient(ellipse at bottom left,#d6b9ff,#FAFAFA);}

#bloc_adr { background-image:radial-gradient(ellipse at bottom left,#852cff,#d6b9ff); width:32%; padding:5px; float:left; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
#bloc_blanc { background-color:#fff; width:90%; margin-right: 1%; float:right; border-radius: 15px; }
#bloc_adr ul { list-style-type: none; padding:0; margin:0; }
#lien_social { width:100%; text-align:center; }
#lien_social li { display: inline-block;list-style-type:none; margin-top:5px;}

#bloc_lien { width:66%; float:right; text-align:center; }
#lien_bloc1, #lien_bloc2 { width:40%; display:inline-block; text-align:left; vertical-align:top;}

#mentions { clear:both; margin:1%; text-align: center; font-family: 'Comfortaa', cursive; font-size:0.8em; }	
#mentions img { vertical-align: middle; height:32px; }

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

/* --- formulaires --- */
form { text-align: left;}
fieldset { border-radius:7px; margin:auto; width:90%; margin-top:1px; background-image:radial-gradient(ellipse at top left,#f2e9ff,#f2e9ff,#f2e9ff); border:1px solid #852cff; }
legend { font-weight: bold; }
form label { display: inline; width: 15rem; }

form input[type=submit] { border-radius:7px; background-color:#ddd; width:auto; margin:0.5%; color:#000 }
form input[type=submit]:hover { color:#852cff; background-color: #ddd; }

form textarea { width: 90%; border-radius:7px; background-color:#FAFAFA; border: 1px solid gray; }

form input { width: 90%; border-radius:7px; background-color:#FAFAFA; display:inline; border: 1px solid gray; }
form input[type=date] { width:35%; }
form input[type="radio"] { width:auto; }
form input[type="radio"]:checked+label{ font-weight: bold; color:#852cff } 
form input[type="radio"]:hover+label { color:#852cff } 
form input[type=checkbox] { width:auto; }
form input[type="file"]:hover { color:#852cff; }
form select { border-radius:7px; color: #000; border: 1px solid grey;}

form#newsletter input { width:auto; border-radius:10px; height:24px; }

form#search_form input { width: calc(100% - 260px); float: left; border-radius:20px; margin:1%; max-width:fit-content ; height:22px; margin:auto; }
form#search_form button[type=submit] { float: left; border-radius:16px; width:27px; height:27px; border: 1px solid gray; background:url("../../themes/services/imgs/icon_search.svg") 0 0 no-repeat; background-color:#FAFAFA;}

/*form#search_form button[type=submit]:hover { filter: invert(18%) sepia(82%) saturate(4823%) hue-rotate(262deg) brightness(103%) contrast(101%);}*/

form input:hover, input:hover,form select:hover, form option:hover,form textarea:focus, textarea:hover , form#search_form button[type=submit]:hover { color:#000; background-color:#ddd; border: 1px solid #852cff;}

.tab_col_1 { border:1px solid; width:15%;}

/** ------------------------------ **/
/** pour les rollovers bas de page **/
/** ------------------------------ **/
.rollover1 { background:url("../../themes/services/imgs/round_facebook.svg") 0 0 no-repeat; }
.rollover3 { background:url("../../themes/services/imgs/round_twitter.svg") 0 0 no-repeat; }
.rollover4 { background:url("../../themes/services/imgs/round_linkedin.svg") 0 0 no-repeat; }
.rollover5 { background:url("../../themes/services/imgs/round_youtube.svg") 0 0 no-repeat; }
.rollover6 { background:url("../../themes/services/imgs/round_pinterest.svg") 0 0 no-repeat; }
.rollover7 { background:url("../../themes/services/imgs/round_instagram.svg") 0 0 no-repeat; }
.rollover8 { background:url("../../themes/services/imgs/footer-skype.png") 0 0 no-repeat; }
.rollover9 { background:url("../../themes/services/imgs/footer-yahoo.png") 0 0 no-repeat; }
.rollover2 { background:url("../../themes/services/imgs/round_zalo.svg") 0 0 no-repeat; }

.rollover1, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7 { display:inline-block; width:30px; height:30px; opacity: 0.75; }

.rollover1:hover, .rollover2:hover, .rollover3:hover, .rollover4:hover, .rollover5:hover, .rollover6:hover, .rollover7:hover { opacity: 1;  background-color: rgba(245, 245, 245, 0)  }

.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:left; margin:1%; }
#share-buttons img { width:32px; padding:2px; border:0; }
#share-buttons a { background-color: #fff }
#share-buttons:hover img { cursor: pointer; }

/** comment box **/
#com_art { min-width:300px; max-width:600px;padding:0 }
#com_art fieldset { padding:5px; background-color:#fff; }
#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:#852cff; font-weight: bold; }
#com_text { border-bottom:1px dotted black; padding:2px; margin:2px; }
































































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

@media screen and (max-width: 650px) {
	#logo { width:120px; margin:0px;}
	#claim { font-size:1.4em; }
	/*.hidden {display:none;}   */
	.no_mobile {display:none;}
	.return_mobile { clear:both; max-width: 98%; margin: auto; text-align: center; }
	.return_mobile img { clear:both; margin: auto;}
	.return_mobile ::after { clear:both; max-width: 98%; margin: auto; text-align: center; }

	h1 { font-size:1.2rem; clear:both; line-height:1.2em; margin:auto; }
	/*h2 { font-size:1.1rem; clear:both }*/
	h3 { font-size:1rem; }
	body { font-size:0.9em; }
	#menu { clear:both; width:100%; margin: 1%;}
	li.bouton_menu { width: 95px; }
	#content, #bloc_100, #bloc_A, #bloc_B, #bloc_AB { width:99%; margin:0.5%; padding:0 }
	#col_2 { display:none; }
	#col_1b { margin:0; width:100% }
	#bloc_provider, #bloc_project { text-align:center }
	.bloc_shop2 { width:31%; margin:1% }
	
	/*	.bloc_shop1 { width:32%; height:420px; }.bloc_photo2 { height:calc(0% - 0%); }
	.bloc_shop1 h2 { clear:both; }
	.bloc_shop3 { height:270px; width:48%; padding:0px; margin:3px; font-size:0.9em; }
	.bloc_shop3 h2 { margin:0; font-size:0.9em;}
	.photo_art1, .photo_art2, .photo_art3 { float:none; clear:both; margin:auto; width:100% }*/
	.footer { width:100%; vertical-align:top; padding:0 }
	#bloc_adr, #bloc_lien, #lien_bloc1, #lien_bloc2 { width:96%; }
	#bloc_social { width:99%; float:left}
	.bloc_photo { width: 100%; } 
}

@media screen and (max-width: 1024px) {
	/*.bloc_shop2 { width:23%; margin:1% }
	.bloc_photo2 { height:190px; }*/
}

/** ------------------------------------------- **/
@media screen and (max-width: 430px) {
	.bloc_shop2 { width:48%; margin:1%; }
	#logo { width:90px;}
	#claim { font-size:1.4em; }
	#bloc_TR img {width:24px;}	
	/*#bloc_titre { font-size:2em; }
	#titre { letter-spacing:2px; margin-right:-2em ;}*/
	#lien_bloc1, #lien_bloc2 { width: 80%; } 
	/*fieldset { width:60%}
	form#form_mail input[type=date] { width: 40%; }*/
}

/*@media screen and (min-width: 400px) {
	#claim { font-size:1.7em;   }
	#bloc_1, #bloc_2, #bloc_3, #bloc_4, #bloc_5, #bloc_6, #bloc_7 { margin: 4%;padding:2%; }
	.bloc_shop1, .bloc_shop2 { width:49%; margin:0; padding: 0; overflow: hidden;}
	.bloc_shop2 { width:49%; height: calc(100%); }
	.bloc_photo2 { height: calc(50%); }
}*/

@media print {
	body {
	  width: 100%;
	  margin: 0;
	  color: #000;
	  background-color: #fff;
	  text-shadow: none ;
	  font-size: 10pt;
	}
	#header, #footer, #bloc_annonce, #share-buttons { display:none; }
	.noprint { display:none; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98% }
	.photo_art {width: 39%;}
	
	#print-footer { display:block ;position: absolute; width:100%; bottom: 0cm; font-size:7pt; } 
}