/* CSS Document */
/*@import url('https://fonts.googleapis.com/css?family=Josefin Sans:100,300,400,500,700,900');*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;300;400;600;700&display=swap');


body, html, a, ul, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none; text-decoration:none;}
a, button, a img, a:hover, button:hover, a:hover > img{transition : all 0.2s linear;}
body{ font:14px/22px 'Josefin Sans', sans-serif; font-weight:300;color:#575656;}
a{ text-decoration:none;color:#575656;}img{ border:0px;}
body, html{ height:100%; float: left; width: 100%; display: block; position: relative; background: #ece8e5;}

a[data-txt], span[data-txt]{position: relative; display: inline-block;}
a[data-txt]:hover::after, span[data-txt]:hover::after  {  content: attr(data-txt); text-align: center; position: absolute;  left: 0;  top: 14px;  min-width: 100px;
  border: 1px #c69d81 solid;  border-radius: 5px;  background-color: #ffffff;  padding: 5px;  color: #575656;  font-size: 14px;	z-index: 1;}

@media print{body{ font:12px/18px 'Josefin Sans', sans-serif; font-weight:300;color:#575656; }}
/*Bouton pour remonter en haut de la page :*/


div#first{ width:100%; float:left; text-align:center;}
div#first div#second{ width:1200px; margin:auto; text-align:left; position:relative;}

@media screen and (max-width: 900px) {div#first div#second{ width:100%; margin:auto; text-align:left;}div#first div#second img{ max-width:100%;}}
@media screen and (min-width: 901px) {div#first div#second{ width:900px; margin:auto; text-align:left;}}
@media screen and (min-width: 1200px) {div#first div#second{ width:1200px; margin:auto; text-align:left;}}
@media screen and (min-width: 1400px) {div#first div#second{ width:1400px; margin:auto; text-align:left;}}
@media screen and (min-width: 1600px) {div#first div#second{ width:1600px; margin:auto; text-align:left;}}

.header{}
.footer{}
.footer2{ position: fixed; bottom: 0px; left: 0px; z-index: 2; float: left;width: 100%; background: #a7a7a7; color:#cdcdcd; height: 40px; font-size:20px; line-height: 40px;}

/* FORMULAIRE */

form.design1{ display:inline-block; padding:0px; margin:0px;}
form.design1 input[type=text], form.design1 input[type=password], form.design1 input[type=email], form.design1 input[type=time]{ color: #575656; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 26px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 5px 0px 0px; }
form.design1 select{ color: #575656; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 26px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 0px 0px 0px; }
form.design1 textarea{ color: #575656; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 78px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 5px 0px 0px; }
form.design1 input:focus{ border: 1px solid #c69d81;}
form.design1 input::placeholder { color: #575656; font:16px/26px 'Josefin Sans', sans-serif; font-weight: 100;}
form.design1 button{ background: none; border:1px solid #c69d81; padding: 5px; height: 30px;font:16px/20px 'Josefin Sans', sans-serif; margin: 5px 0px 0px 0px; color:#575656;  }
form.design1 button:hover{ background: #c69d81; color: #ffffff;}
textarea.design1{width: calc(100% - 47px);width: -webkit-calc(100% - 47px); margin: 20px 20px 5px 0px; display: inline-block;font: 16px/20px 'Josefin Sans', sans-serif; height: 60px; padding: 0px 10px 0px 10px; border: 1px solid #cccccc; border-radius: 5px; background: #ffffff; color:#a9a9a9; -webkit-appearance: none;-moz-appearance: none;	appearance: none;}
form.design1 label, form.design1 div.checkbox{margin: 0px 0px 10px 0px; display: block;transition : all 0.2s linear; padding: 2px; float: left; width: calc(100% - 4px);}
form.design1 label textarea{width: calc(100% - 4px); height: 150px;}
form.design1 label:hover, form.design1 div.checkbox:hover{background: #c69d81 !important; color:#ffffff;}



form.design2{ display:inline-block; float:left; padding:0px; margin:0px;}
form.design2 input[type=text], form.design1 input[type=password], form.design1 input[type=email], form.design2 input[type=time]{ color: #575656; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 26px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 5px 0px 0px;width: calc(100% - 4px); }
form.design2 select{ color: #575656; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 26px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 0px 0px 0px; }
form.design2 textarea{ color: #575656; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 78px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 5px 0px 0px; }
form.design2 input:focus{ border: 1px solid #c69d81;}
form.design2 input::placeholder { color: #575656; font:16px/26px 'Josefin Sans', sans-serif; font-weight: 100;}
form.design2 button{ background: none; border:1px solid #c69d81; padding: 5px; height: 30px;font:16px/20px 'Josefin Sans', sans-serif; margin: 5px 0px 0px 0px; color:#575656;  }
form.design2 button:hover{ background: #c69d81; color: #ffffff;}
form.design2 label, form.design1 div.checkbox{margin: 0px 0px 10px 0px; display: block;transition : all 0.2s linear; padding: 2px; float: left; width: calc(100% - 4px);}
form.design2 label textarea{width: calc(100% - 4px);}
form.design2 label:hover, form.design2 div.checkbox:hover{background: #c69d81 !important; color:#ffffff;}
form.design2 div.checkbox{margin: 0px 0px 10px 0px; display: block;transition : all 0.2s linear; padding: 2px; float: left; width: calc(100% - 4px);}


.icone{width:18px; height:18px; border:1px solid #FFFFFF; display:inline-block; padding:5px; margin:5px 5px 0px 0px; float:left;}
.icone img{max-width:18px; max-height:18px;}

/*
form.design2{ width:94%; padding:2%; background:#faf8f7; border:4px solid #faf8f7; border-radius:5px; float:left;}
form.design2 input{ color: #FFFFFF; background: #f17d4c; font-weight: 500; padding: 5px; width: 200px; height: 46px;font:16px/46px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 0px 0px 0px; }
form.design2 input::placeholder { color: #f0f0ed; font:16px/46px 'Josefin Sans', sans-serif; font-weight: 100;}

form.design3{ width:100%; float:left;}
form.design3 .bloc_form{width:94%; padding:2%; background:#faf8f7; border:4px solid #faf8f7; border-radius:5px; float:left; margin: 0px 0px 10px 0px;}
form.design3 input[type='text'], form.design3 input[type='email'], form.design3 input[type='number'], form.design3 input[type='password'], form.design3 select{ color: #FFFFFF; background: #f17d4c; font-weight: 500; padding: 5px; width: 200px; height: 46px;font:16px/46px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 0px 0px 0px; }
form.design3 textarea{ color: #FFFFFF; background: #f17d4c; font-weight: 500; padding: 5px; width: calc(100% - 20px); height: 100px;font:16px/20px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 0px 0px 0px; }
form.design3 input::placeholder { color: #f0f0ed; font:16px/46px 'Josefin Sans', sans-serif; font-weight: 100;}
form.design3 textarea::placeholder { color: #f0f0ed; font:16px/20px 'Josefin Sans', sans-serif; font-weight: 100;}*/

.bloc_form{padding:10px; background:#ffffff; border:1px solid #c69d81; display: inline-block; border-radius:5px; float:none;; margin: 10px;}
.bloc_form_100{padding:10px; background:#ffffff; border:1px solid #c69d81; display: inline-block; border-radius:5px; width: calc(100% - 45px); float:none;; margin: 10px; height: calc(100% - 30px);}
.bloc_form_100_2{padding:10px; background:#ffffff; border:1px solid #c69d81; display: inline-block; border-radius:5px; width: calc(100% - 45px); float:none;; margin: 10px;}
.bloc_form_50_2{padding:10px; background:#ffffff; border:1px solid #c69d81; display: inline-block; border-radius:5px; width: calc(50% - 45px); float:none;; margin: 10px;}
 

/* Flexbox */

@media screen and (max-width: 900px) {
	.flexbox_on{float: left; width: 100%;}
	.flexbox_on .flex_case50{float: left; width:calc(100% - 10px); max-width: calc(100% - 10px); padding: 5px; }
 .flexbox_on .flex_case25{ flex: 1;  width:calc(100% / 2 - 13px); max-width: calc(100% / 2 - 13px); padding: 5px; display: inline-block; position: relative;}
}
@media screen and (min-width: 900px) {
.flexbox_on{width: 100%;display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-directiobn: row; float: none; min-height: 100%; }
 .flexbox_on .flex_case50{ flex: 1;  width:calc(100% / 2 - 13px); max-width: calc(100% / 2 - 13px); padding: 5px; display: inline-block; position: relative;}
 .flexbox_on .flex_case25{ flex: 1;  width:calc(100% / 4 - 13px); max-width: calc(100% / 4 - 13px); padding: 5px; display: inline-block; position: relative;}
 .flexbox_on .flex_case100{ flex: 1;  width:calc(100% - 10px); max-width: calc(100% - 10px); padding: 5px; display: inline-block; position: relative;}
	.flexbox_on .flex_case50 .case_table{display:table;height:100%;}
	.flexbox_on .flex_case50 .case_table .vertical_align{display:table-cell;vertical-align:middle}
	.case_table{display:table;height:100%; width: 100%;}
	.case_table .vertical_align{display:table-cell;vertical-align:middle; text-align: center;}
}

.col_left{width: 300px;  display: inline-block; background: #FFFFFF;  min-height: 100%; margin-bottom: 50px; }
.col_right{width: calc(100% - 300px); flex: 1; display: inline-block; min-height: 100%; margin-bottom: 50px; }

.logo{float: left; margin-top: 60px; text-align: center; background: #FFFFFF; width: calc(100% - 20px); padding: 10px; box-shadow: 0px 0px 10px #cecece }.logo.fixe{width: 100%;}
.logo img{ max-width: calc(100% - 20px);}
.titre_content{ width: 100% !important;padding: 0px; min-height: 159px; position: relative; display: block;}
.le_titre{min-height: 159px; position: relative;}

.menu{ width: 100%; float: left; margin-top: 60px;}
.menu ul{ width: 200px; margin-left: 100px;}
.menu ul li{}
.menu ul li a{font: 16px/60px 'Josefin Sans', sans-serif; height: 60px; display: block; background: left bottom no-repeat;}
.menu ul li a:hover, .menu ul li a.on{ background: url("../charte/menu-ligne.jpg") left bottom no-repeat;}

/* FIL d'arianne*/
div.fil{float:left;width:calc(100% - 20px);font:14px/60px "Josefin Sans", sans-serif; margin:0px 0px 0px 0px; padding: 0px 0px 0px 20px; background: #c69d81; color:#FFFFFF; }
div.fil a{width:100%;text-decoration:none;font:14px/60px "Josefin Sans", sans-serif;color:#575656; margin: 0px 20px 0px 0px; font-weight: 100;  color:#FFFFFF;}
div.fil a.on{ font-weight: 700;}
div.fil a:hover{color:#cccccc;}

/*Infobulle*/


/* Gestion affichage des coordonnées */
.get_coord{ position: relative; float: left;}
.get_coord .coord{border-radius: 5px; position: absolute; top: 0px; left: 15px; z-index: 1; padding: 5px; min-width: 200px; background: #FFFFFF; border:1px solid #c69d81; display: none;}
.get_coord:hover > .coord{display: block;}

/* Puce */
.carre1, .carre2, .carre3, .carre4, .carre5, .carre_on, .carre_off{ display: inline-block; width: 16px; height: 16px; border-radius: 5px;}
.carre1{ background-color: #06AFE1 ;}
.carre2{ background-color: #eeca00 ;}
.carre3{ background-color: #F66500 ;}
.carre4{ background-color: #77FF00 ;}
.carre5{ background-color: #FF0000 ;}
.carre_on{ background-color: #b9ff3f ;}
.carre_off{ background-color: #bfbfbf ;}
/*
.carre1[data-txt],.carre2[data-txt], .carre3[data-txt], .carre4[data-txt], .carre5[data-txt], .carre_on[data-txt], .carre1[data-txt]{position: relative; display: block;}
.carre1[data-txt]:hover::after, .carre2[data-txt]:hover::after, .carre3[data-txt]:hover::after, .carre4[data-txt]:hover::after, .carre5[data-txt]:hover::after, .carre_on[data-txt]:hover::after, .carre_off[data-txt]:hover::after {  content: attr(data-txt); text-align: center; position: absolute;  left: 0;  top: 14px;  min-width: 100px;
  border: 1px #c69d81 solid;  border-radius: 5px;  background-color: #ffffff;  padding: 5px;  color: #575656;  font-size: 14px;	z-index: 1;}
*/

ul.onglet{width: 98%; padding: 0 1% 1px 1%; border-bottom: 1px solid #c69d81; float: left;}
ul.onglet li{ width: auto; margin: 0px 10px 0px 0px; height: 40px; float: left;}
ul.onglet li a{ display: block; padding: 0px 10px 0px 10px; height: 40px; text-align: center; background: #BBBBBB; border: 1px solid #616161; border-bottom: 0px;font: 12px/40px 'Josefin Sans'; border-top-left-radius: 5px;  border-top-right-radius: 5px; }
ul.onglet li a:hover{ border: 1px solid #e61038; border-bottom: 0px;}
ul.onglet li a.on{ background: #c69d81;color:#FFFFFF; border: 1px solid #c69d81; border-bottom: 0px;}

@media screen and (max-width: 760px) {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%; position:relative;}
	.div40{ float:left; width:100%;}
	.div40_2{ float:left; width:98%; padding:1%;}
.div30{ float:left; width:100%;}
.div30_2{  width:98%; padding:1%; margin:20px 0px 0px 0px; display:inline-table;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div30_4{  width:98%; padding:1%; float:left;}
	.div60{ float:left; width:100%;}
.div60_2{ float:left; width:98%; padding:1%;}
.div25{ float:left; width:100%;}
.div25_2{ float:left; width:98%; padding:1%;}
.div20{ float:left; width:50%; float: left;}
.div80{ display:inline-table; width:100%; float: left;}
.div80_2{ display:inline-table; width:98%; padding: 1%; float: left;}
.div20_2{ float:left; width:48%; padding:1%;}}
@media screen and (min-width: 761px) {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%; position:relative;}
	.div40{ float:left; width:100%;}
	.div40_2{ float:left; width:98%; padding:1%;}
.div30{ float:left; width:100%;}
.div30_2{  width:98%; padding:1%; display:inline-table;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div30_4{  width:98%; padding:1%; float:left;}
	.div60{ float:left; width:100%;}
.div60_2{ float:left; width:98%; padding:1%;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div80{ display:inline-table; width:80%; float: left;}
.div80_2{ display:inline-table; width:78%; padding: 1%; float: left;}
.div20{ display:inline-table; width:20%; float: left;}
.div20_2{ display:inline-table; width:15%; padding:1%;}}
@media screen and (min-width: 901px) {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
	.div60{ float:left; width:60%;}
.div50{ float:left; width:50%; position:relative;}
.div50_2{ float:left; width:48%; padding:1%; position:relative;}
	.div40{ float:left; width:40%;}
	.div40_2{ float:left; width:38%; padding:1%;}
.div30{ float:left; width:33%;}
.div30_2{  width:31%; padding:1%; float:left; max-width:31%; overflow:hidden}
.div30_2 a img{ max-width:100%; overflow:hidden;}
.div30_3{ float:left; width:31%; padding:0% 0% 0% 2%;}
.div30_4{  width:31%; padding:1%; float:left;}
.div60_2{ float:left; width:64%; padding:1%;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ display:inline-table; width:20%; float: left;}
.div80{ display:inline-table; width:80%; float: left;}
.div80_2{ display:inline-table; width:78%; padding: 1%; float: left;}
.div20_2{ display:inline-table; width:18%; padding:1%;}
}
@media print {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
	.div60{ float:left; width:60%;}
.div50{ float:left; width:50%; position:relative;}
.div50_2{ float:left; width:48%; padding:1%; position:relative;}
	.div40{ float:left; width:40%;}
	.div40_2{ float:left; width:38%; padding:1%;}
.div30{ float:left; width:33%;}
.div30_2{  width:31%; padding:1%; float:left; max-width:31%; overflow:hidden}
.div30_2 a img{ max-width:100%; overflow:hidden;}
.div30_3{ float:left; width:31%; padding:0% 0% 0% 2%;}
.div30_4{  width:31%; padding:1%; float:left;}
.div60_2{ float:left; width:64%; padding:1%;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ display:inline-table; width:20%; float: left;}
.div80{ display:inline-table; width:80%; float: left;}
.div80_2{ display:inline-table; width:78%; padding: 1%; float: left;}
.div20_2{ display:inline-table; width:18%; padding:1%;}
}
.div100_3{ float:left; width:96%; margin:1%; padding:1%;}

/*###########*/
/*Tailles TXT*/
.small2{ font-size:12px; line-height: 16px;}
.small{ font-size:14px; line-height: 16px;}.small2{ font-size:14px; line-height: 20px;}.small3{ font-size:14px; line-height: 30px;}
.medium2{ font-size:16px; line-height: 20px;}.medium2_2{ font-size:16px; line-height: 25px;}
.large{ font-size:18px;  line-height: 22px;}
.xlarge{ font-size:20px; line-height: 22px;}
.xxlarge{ font-size:22px;  line-height: 28px;}
.xxlarge2{ font-size:22px;  line-height: 22px;}
.xxxlarge{ font-size:25px;  line-height: 32px;}
.x4large{ font-size:30px; line-height: 40px;}
.x5large{ font-size:40px; line-height: 50px;}
.x6large{ font-size:50px; line-height: 60px;}

@media screen and (max-width: 900px) {
.x4large{ font-size:26px; line-height: 35px;}
.x5large{ font-size:28px; line-height: 35px;}
.x6large{ font-size:30px; line-height: 35px;}
}
/*Couleur police*/
.txtblanc{ color:#ffffff !important;} .txtnoir{ color:#000000;} .txtombre{text-shadow: 2px 2px 4px #000000; color: #FFFFFF;}.txtgris{color:#c1c1c0 !important;}
.txtup{ text-transform: uppercase;}
.txtvert{color:rgba(23,179,8,1.00) !important;}
.txtviolet{color:#c69d81 !important;}

.bgnoir{ background: #000000; color:#FFFFFF !important;}
.bgblanc{background: #FFFFFF;}
.bgviolet{background:#c69d81; color:#ffffff !important;}
.bg_vert{background: #c69d81 !important;}

/*Align police*/
.txtcenter{ text-align:center;}.txtleft{ text-align:left !important;}.txtright{ text-align:right;}.txtjustify{ text-align:justify;}
/*.vertical_align{position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%); }*/
.w100{ font-weight:100;}.w300{ font-weight:300;}.w400{ font-weight:400;}.w600{ font-weight:600;}.w700{ font-weight:700;}

/*  MEssage */
.erreur{ padding:5px; border:1px solid #ee0000; background:#f14c4c; display: inline-block; color:#ffffff;}
.bloc_centre{ display: inline-block; position: relative;}

/*Pour les images*/
.img_gris{filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);}

/* Titres */
h1{ font:30px/50px 'Josefin Sans', sans-serif; font-weight:300; color:#c69d81; width:auto; display: inline-block; padding:0px; margin:0px; text-align: left;}

/* LEs boutons*/
a.btn1{ background: #c69d81 !important; border:1px solid #c69d81; padding: 5px; height: 46px; display: inline-block; font:16px/46px 'Josefin Sans', sans-serif; margin: 5px 0px 0px 0px; color:#ffffff !important; cursor: pointer;  }
a.btn1:hover{ background: #ffffff !important; color: #c69d81 !important;}
button.btn1{ background: #c69d81 !important; border:1px solid #c69d81; padding: 5px; height: 56px !important; display: inline-block; font:16px/46px 'Josefin Sans', sans-serif !important; margin: 5px 0px 0px 0px; color:#ffffff !important; cursor: pointer;  }
button.btn1:hover{ background: #ffffff !important; color: #c69d81 !important;}

a.btn2{ background: #FFFFFF !important; border:1px solid #c69d81; padding: 5px; height: 46px; display: inline-block; font:16px/46px 'Josefin Sans', sans-serif; margin: 5px 0px 0px 0px; color:#c69d81 !important; cursor: pointer;  }
a.btn2:hover{ background: #c69d81 !important; color: #ffffff !important;}
button.btn2{ background: #FFFFFF !important; border:1px solid #c69d81; padding: 5px; height: 56px; display: inline-block; font:16px/16px 'Josefin Sans', sans-serif; margin: 5px 0px 0px 0px; color:#c69d81 !important; cursor: pointer;  }
button.btn2:hover{ background: #c69d81 !important; color: #ffffff !important;}

a.btnretour{ background: #FFFFFF !important; padding: 5px; height: 46px; display: inline-block; font:16px/46px 'Josefin Sans', sans-serif; margin: 5px 0px 0px 0px; color:#c69d81 !important; border: 1px solid #c69d81;  }
a.btnretour::before{content: url("/charte/fleche-gauche-v.png"); margin: 13px 10px 0px 0px;}
a.btnretour:hover{  color: #c69d81 !important;}

.btn_simple{text-decoration: underline;}

/*################*/
/*### Dépôt de fichier  ###*/
/*################*/
.zone_fichier{ width:94%; padding:2%; background:#f7f8fa; border:4px solid rgba(43,43,43,1.00); border-radius:5px; float:left;}
.zone_fichier.hover{ width:94%; padding:2%; background:#e9e6e3; border:4px solid #d1e931; border-radius:5px;}
.zone_fichier ul li.unfichier{ background:#f3e7e3; border:1px solid #e55321; float:left; width:96%; margin:1%; padding:1%; height:auto;cursor:move;}
.zone_fichier ul li.highlight{background:#f2f2f2;border:1px dashed #212326; display:block; float:left; width:96%; margin:1%; padding:1%; height:100px;}

/*################*/
/*### message ###*/
/*################*/
.message{ position: fixed; background-color: rgba(0,0,0,0.80); top: 0px; left: 0px; z-index: 999; width: 100%; height: 100%; display: none;}
.message .message_content{background:#e55321; border-radius:5px; padding: 10px; color:#FFFFFF; position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);}
.message .message_content.ok{ background-color: rgba(100,214,0,1.00) !important;}
.message .message_content.notok{ background-color:rgba(207,0,3,1.00) !important;}


.help, .pop, .form_fenetre, .form_media{ position: fixed; background-color: rgba(0,0,0,0.80); top: 0px; left: 0px; z-index: 999999; width: 100%; height: 100%; max-height:100%; display: none;}
.form_media{z-index: 1000 !important;}

.form_fenetre_grande_largeure{ position: fixed; background-color: rgba(255,255,255,10); top: 0px; left: 0px; z-index: 998; width: 100%; height: 100%; max-height:100%; display: none;overflow-y: scroll;}

.form_media{z-index: 1000000 !important;}

.help .help_content, .pop .pop_content, .form_fenetre .form_fenetre_content, .form_media .form_media_content{background:#FFFFFF; border-radius:5px; color:#000000; position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);overflow-y: scroll; max-height: 100%; width: 100%; max-width:780px; }

ul.design, ul.design li{width:calc(100% - 20px);width:-webkit-calc(100% - 20px); float:left; list-style-image: url(../charte/puce.jpg) !important; padding: 2px 0px 2px 20px;}
ul.design li{width:calc(100% - 20px); width:-webkit-calc(100% - 20px); float:left; list-style-image: url(../charte/puce.jpg) !important; padding: 2px 0px 2px 20px;}
ul.design2, ul.design2 li{width:100%; float:left; list-style-image: url(../charte/puce.jpg) !important; padding: 2px 0px 2px 20px; margin: 0px;}

/* Design tableau */
table.design1{ width: 100%; float: left; margin: 0px; padding: 0px;  border: 0px;}
table.design1 tr:nth-child(2n+1){ background: #faf8f7;}
table.design1 tr:nth-child(2n){ background: #e6e2e0;}
table.design1 tr td{ padding: 4px;}
table.design1 thead{ background:#F66500; color:#FFFFFF;}
table.design1 thead a{ background:#F66500; color:#FFFFFF;}

table.design1 thead tr:nth-child(1) td:nth-child(1), table.design1 thead tr:nth-child(2) td:nth-child(1){ background:#FFFFFF; color:#000000;}
table.design1 thead tr{ background:#F66500 !important; color:#FFFFFF; text-align:center !important; font-weight:700; height: 30px;}
table.design1 thead tr:nth-child(3), table.design1 thead tr:nth-child(4){background:#242424 !important;}

table.design1 tbody td:nth-child(2n+1){}

table.design2{ width: 100%; float: left; margin: 0px; padding: 0px;  border: 0px;}
table.design2 tr:nth-child(2n+1){ background: #ffffff;}
table.design2 tr:nth-child(2n){ background: #e6e2e0;}
table.design2 tr td{ padding: 4px;}

/* Design galerie */
.galerie{ display: inline-block; height: 250px; position: relative; margin: 0px 5px 0px 0px;}
.galerie img.laphoto{ height: 250px; }
.galerie .galerie_action{ width: 100%; height: 100%; background-color:rgba(255,255,255,0.83); position: absolute; top: 0px; left: 0px; opacity: 0;transition : all 0.2s linear; }
.galerie:hover > .galerie_action{ opacity: 1;}


.ui-datepicker{ z-index:99999999 !important;}

ul.design_icone{ float: right;padding: 5px; height: 44px;}
ul.design_icone li{ float: left;}
ul.design_icone li a{ float: left; font: 12px/14px 'Josefin Sans', sans-serif; font-weight: 100; color:#616161; padding: 0px 0px 0px 15px; text-align: center; }
ul.design_icone li a img{display: inline-block; max-height: 35px !important; filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);}
ul.design_icone li a:hover, ul.design_icone li a.on{ color:#c69d81;}
ul.design_icone li a:hover>img, ul.design_icone li a.on img{filter: grayscale(0%);    -webkit-filter: grayscale(0%);    -moz-filter: grayscale(0%);    -ms-filter: grayscale(0%);    -o-filter: grayscale(0%);}

/* */
#tab_move{border: 2px solid #000000;}
#tab_move div.highlight{background:#f2f2f2;border:1px dashed #212326; width:100%; float:left; height:30px;} /* Pour le tableau en tri draggable*/

.case_liste{width: calc(100% - 20px); padding: 10px; border-bottom: 1px solid #c69d81; float: left;}
.case_liste a{display: inline-block;}
.case_liste .titre{font-weight: 600; color:#c69d81;}

.case_case{border: 1px solid #c69d81; background: #FFFFFF; padding: 5px; margin: 0px 5px 0px 0px;}
.case_case a{display: inline-block;}

.couleur0{}
.couleur1{ opacity: 0.8; background: rgba(225,225,225,1.00);}

.case_choix{ float: left; width: 100%; cursor: pointer; display: block;}
.case_choix:nth-child(2n+1){ background: #ffffff;}
.case_choix:nth-child(2n){ background: #e6e2e0;}
.case_choix.on{ background-color: #77FF00 ;}

.bloc_active, .bloc_vendu, .bloc_archive{ position: relative;}
.bloc_active.on::after, .bloc_vendu.on::after, .bloc_archive.on::after{content: url("../charte/success.png"); position: absolute; top: 10px; right: 10px;}
.bloc_active.off::after, .bloc_vendu.off::after, .bloc_archive.off::after{content: url("../charte/warning.png"); position: absolute; top: 10px; right: 10px;}
.bloc_active.wait::after, .bloc_vendu.wait::after, .bloc_archive.wait::after{content: url("../charte/wait.png"); position: absolute; top: 10px; right: 10px;}

.alert{border: 1px solid #FF0000; background: #ffa9a9;}
.warning{border: 1px solid #ff9600; background: #ffdaa5;}
.valide{border: 1px solid #66ff00; background: #c9ffa5;}

/*################*/
/*### tableau listing  ###*/
/*################*/
div#tab_move div.tab:nth-child(2n+1){ background:#e6e6e6;}
div#tab_move div.tab{ padding:5px 0px 5px 0px;font:16px/30px 'Convergence', sans-serif; cursor:move; color:#515848; width: 150px; height: 150px; float: left; margin: 2px; padding: 5px;}
div#tab_move div.tab img{ max-height: 150px; max-width: 150px;}
div#tab_move div.highlight{background:#f2f2f2;border:1px dashed #212326;  width: 150px; height: 150px; float: left; margin: 2px; padding: 5px;} /* Pour le tableau en tri draggable*/

table#tab_move_piece tr.tab:nth-child(2n+1){ background:#e6e6e6;}
table#tab_move_piece tr.tab{ padding:5px 0px 5px 0px;font:16px/30px 'Convergence', sans-serif; cursor:move; color:#515848; width: 100%;}
table#tab_move_piece tr.highlight{background:#f2f2f2;border:1px dashed #212326; width: 100%;} /* Pour le tableau en tri draggable*/

/* Système onglet dans formulaire */
.onglet_form{display: none;}
.onglet_form_1{display: block;}


@media screen and (min-width: 900px) 
{
	.row{width: 100%;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row !important; float: none;  display: inline-block; position: relative;}
 	.row .case1{ flex: 1;display: inline-block; position: relative; }.row .case2{ flex: 2;display: inline-block; position: relative; }.row .case3{ flex: 3; display: inline-block; position: relative;}.row .case4{ flex: 4; display: inline-block; position: relative;}.row .case5{ flex: 5; }.row .case6{ flex: 6; max-width: 50%;}.row .case7{ flex: 7; }.row .case8{ flex: 8; }.row .case9{ flex: 9; }.row .case10{ flex: 10; }.row .case11{ flex: 11; }.row .case12{ flex: 12; }
	
	.column{width: 100%; max-width: 100% !important; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction:column ; float: none; min-height: 100%; height: 100%; }
	.column.column100{height: 100%;}
 	.column .case1{ flex: 1; flex-direction: column;}.column .case2{ flex: 2;flex-direction: column; }.column .case3{ flex: 3;flex-direction: column; }.column .case4{ flex: 4;flex-direction: column; }.column .case5{ flex: 5;flex-direction: column; }.column .case6{ flex: 6; flex-direction: column; max-width: 100% !important;  }.column .case7{ flex: 7; flex-direction: column;}.column .case8{ flex: 8; flex-direction: column;}.column .case9{ flex: 9;flex-direction: column; }.column .case10{ flex: 10;flex-direction: column; }.column .case11{ flex: 11; flex-direction: column;}.column .case12{ flex: 12; flex-direction: column;}
	
	.row > div, .column > div{position: relative;}	
}
.padding10{padding: 10px;}
.row.padding10{width: calc( 100% - 20px) !important;}
	.case_table{display:table !important;height:100%; width: 100%;}
	.case_table .vertical_align{display:table-cell;vertical-align:middle; width: 100%;}

/* NEW DESIGN 2022*/

.btn_croix{height: 100%; color:#ffffff; font-weight: 900; background:rgba(219,35,38,1.00); padding: 0px 20px 0px 20px; display: block;}
.btn_plus{height: 30px; border-radius:30px; color:#ffffff; font-weight: 900; background:#c69d81; padding: 0px; display: block;font:16px/30px 'Josefin Sans', sans-serif; font-weight:700; text-align:center;}

a.btn3, button.btn3{ background: #e2ad5a !important; border-radius: 5px; border:1px solid #e2ad5a; width: calc(100% - 10px); padding: 5px; border-radius: 0px; display: inline-block; font:16px/46px 'Josefin Sans', sans-serif; margin: 0px; color:#ffffff !important; cursor: pointer; text-align: center;}
a.btn3:hover, a.btn3.on, button.btn3:hover{ background: #ffffff !important; color: #e2ad5a !important; border:1px solid #e2ad5a;}


.bg_fleche2{clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 90% 50%); height: 100%; width: 100%;}
.bg_fleche3{clip-path: polygon(0% 0%, 50% 90%, 100% 0%, 100% 100%, 0% 100%); height: 100%; width: 100%; min-height:100px;}
.bg_gris{background: rgba(231,231,231,1.00);}
.bg_gris2{background: rgba(221,221,221,1);}


/* FORMULAIRE 
*
*   >>> NEW 2022
*/
form.design3{ display:inline-block; padding:0px; margin:0px; width: calc(100% - 20px); padding:10px;}
form.design3 input[type=text], form.design3 input[type=password], form.design3 input[type=email], form.design3 input[type=time], form.design3 input[type=number],form.design3  textarea{ 
	color: #37474f; background: #f5f5f5; border: 1px solid #cfd8dc; font-weight: 500; width: calc(100% - 20px); height: 14px; font:14px/14px 'Josefin Sans', sans-serif; padding: 12px 10px; appearance:none; border-radius: 5px;}
form.design3 select{ color: #37474f; background: #f5f5f5; border: 1px solid #cccccc; font-weight: 500; width: 200px; height: 26px;font:16px/26px 'Josefin Sans', sans-serif; border: 0px; margin: 5px 0px 0px 0px; }
form.design3 textarea{ height: 56px; }
form.design3 input:focus{ border: 1px solid #d79840;}
form.design3 input::placeholder { color:rgba(154,154,154,1.00); font:12px/14px 'Josefin Sans', sans-serif; font-weight: 100;}
/* --------  */
/* --------  */

.ChoixImage{ padding:5px;}
.ChoixImage.on{ background: #d79840; }
.ChoixImage img{ height: 120px;}

/* Listing des pages */
.ListingPage{ width: 100%; padding: 10px 0px 10px 0px;}
.ListingPage .UnePage{width: 20px; height: 20px; display: inline-block; border-radius: 22px; text-align: center; line-height: 20px; font-weight: 900; font:12px/20px 'Roboto',sans-serif; border: 1px solid #c69d81; margin: 5px;} 
.ListingPage .UnePage:hover, .ListingPage .UnePage.on{background: #c69d81; color:#FFFFFF;}