@charset "utf-8";
/* CSS Document */

/* Déclaration des variables */
:root {
	--pale-red:#ffb4bf;
    --very-soft-orange:#f9e4b7;
    --black:#000000;
    --white:#ffffff;
    --site-soft-pink:#fd6c9e;
    --soft-orange:#e2bc74;
    
	--vert:#4caf50;
	--bleu:#2196f3;
	--rouge:#f44336;
	--orange:#ff9800;
	--dark-grey:#616161;
	--grey:#9e9e9e;
	--light-grey:#f7f7f7;
	--very-light-grey:#f1f1f1;
	--rose-pal:#fbe4e6;
    --padding:16px;
    --width:px;
}


/*************************/
/****    A TRIER      ****/
/*************************/

.grand-ecran { height:100vh; }
/*
.grand-ecran img { min-width:100vw; min-height:100vh; }
*/

select, input, textarea { scroll-margin-top:calc(95px + 45px); }

/* Zoom Animation */
.animate { -webkit-animation:animatezoom 0.6s; animation:animatezoom 0.6s; }
@-webkit-keyframes animatezoom { from {-webkit-transform:scale(0);} to {-webkit-transform:scale(1);} }
@keyframes animatezoom { from {transform:scale(0);} to {transform:scale(1);} }

.fix-center { position:fixed; top:50%; left:50%; text-align:center; transform:translate(-50%, -50%); z-index:2; /*fix-center*/ }
.fix-bottom { position:fixed; left:0; bottom:0; width:100%; }

.bg-text-center {
    position:fixed; top:50%; left:50%; width:300px; padding:20px; border:10px solid var(--very-light-grey); 
    background-color:rgb(0,0,0); background-color:rgba(0,0,0, 0.4); 
    color:white; font-weight:bold; font-size:25px; text-align:center; 
    transform:translate(-50%, -50%); z-index:2; /*bg-text-center*/
}

.middle { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; }
#div_redirect { position:relative; background-color:#fff; width:100%; height:100%; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.2em; color:#666; text-align:center; }

/* Protection anti-spam */
.remarque_form { display:none; }

picture { }


/*************************/
/****  FIN A TRIER    ****/
/*************************/



/*************************/
/****       BOX       ****/
/*************************/

/* Box spacer */
.spacer { clear:both; }

/* Empeche les elements de sortir du cadre */
.clearfix { overflow: auto; }
.clearfix::after { content:""; clear:both; display:table; }

/* Box standards */
.box_10  	{ width:10%; } /* OK */
.box_25  	{ width:25%; padding-right:var(--padding); } /* OK */
.box_33  	{ width:33%; padding-right:var(--padding); } /* OK */
.box_50  	{ width:50%; padding-right:var(--padding); } /* OK */
.box_75  	{ width:75%; } /* OK */
.box_90  	{ width:90%; } /* OK */
.box_100 	{ width:100%;} /* OK */
.box-left 	{ word-wrap:break-word; float:left; }
.box_right 	{ word-wrap:break-word; float:right; }
.box_25:last-child, .box_33:last-child, .box_50:last-child { padding-right:0; } /* OK */

/* Box alert */
.alert 			{ background-color:var(--rouge); padding:20px; margin:15px 0; color:white; }
.success 		{ background-color:var(--vert); } /* Green */
.info 			{ background-color:var(--bleu); } /* Blue */
.warning 		{ background-color:var(--orange); } /* Orange */
.danger 		{ background-color:var(--rouge); } /* Red */
.other 			{ background-color:var(--light-grey); color:black; } /* Gray */
.div_alert 		{ margin:0 0 10px 0; color:var(--rouge); }

/* Box notes */
.note 			{ margin:24px 0; padding:16px 32px; }
.note.danger 	{ background-color:#ffdddd; border-left:6px solid var(--rouge); }
.note.success 	{ background-color:#ddffdd; border-left:6px solid var(--vert); }
.note.info 		{ background-color:#e7f3fe; border-left:6px solid var(--bleu); }
.note.warning 	{ background-color:#ffffcc; border-left:6px solid #ffeb3b; }

/* Box observations */
.observations { padding:5px; background-color:var(--very-light-grey); color:var(--site-soft-pink); font-style:italic; }

/* Box hide */
.box_hide { padding:15px; overflow:auto; }
.box_hide:after { content:""; display:table; clear:both; }

/* Box photo */
.box_photo {
	padding:5px;
	max-width:150px; 
	text-align:center;
	border:1px solid #ddd;
	border-radius:4px;
}
.box_photo img.photo {
	max-width:100%;
	height:auto;
}

/* Box message */
#message { position:absolute; left:70px; top:30px; }

/* Box snackbar */
#snackbar { position:fixed; left:50%; bottom:30px; padding:var(--padding); width:400px; margin-left:-200px; background-color:#333; color:#fff; text-align:center; border-radius:2px; visibility:hidden; z-index:500; /*snackbar*/ }
#snackbar.show { visibility:visible; -webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s; animation:fadein 0.5s, fadeout 0.5s 2.5s; }
@-webkit-keyframes fadein { from {bottom:0; opacity:0;} to {bottom:30px; opacity:1; } }
@keyframes fadein { from {bottom:0; opacity:0;} to {bottom:30px; opacity:1;} }
@-webkit-keyframes fadeout { from {bottom:30px; opacity:1;} to {bottom:0; opacity:0;} }
@keyframes fadeout { from {bottom:30px; opacity:1;} to {bottom:0; opacity:0;} }

/* Box resolution */
#resolution { background-color:#00ffff; padding:3px; font-size:smaller; text-align:center; }

/* Box drop zone */
.drag_container {
	display:grid;
}
.drag_box {
	background-color:#fff;
	margin-bottom:10px;
	border:3px solid #ccc;
	border-radius:.5em;
	cursor:move;
}
.drag_box:last-child { margin-bottom:0; }
.drag_box.over { border:3px dotted #666; }

/* Box The Modal (background) */
.modal { position:fixed; left:0; top:0; width:100%; height:100%; padding-top:60px; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); overflow:hidden; /*auto*/ display:none; z-index:1000; /*modal*/ }
.modal-content { background-color:#fefefe; max-width:500px; margin:5% auto 15% auto; border:1px solid #888; }
.modal-container { width:100%; }

/* Box tooltip */
.tooltip { position:relative; display:inline-block; border-bottom:1px dotted black; }
.tooltip .tooltiptext { width:120px; background-color:black; color:#fff; text-align:center; padding:5px 0; border-radius:6px; visibility:hidden; position:absolute; z-index:1; /*tooltip tooltiptext*/ }
.tooltip:hover .tooltiptext { visibility:visible; }

/* En conflit avec magnific-popup <figure> */
.figure { display:flex; flex-flow:column; max-width:220px; border:thin #c0c0c0 solid; padding:5px; margin:auto; }
.figure img { max-width:220px; max-height:150px; }
.figure figcaption { background-color:#222; color:#fff; font:italic smaller sans-serif; padding:3px; text-align:center; }

/* Box progress */
progress, meter { vertical-align:baseline; display:inline-block; }
.progress_bar_container { position:fixed; background:#ccc; /*top:48px;*/ width:100%; height:3px; margin:0; padding:0; z-index:900; /*progress_bar_container*/ }
.progress_bar_page { background:var(--site-soft-pink); width:0%; height:3px; margin:0; padding:0; }

/* Box attente */
#box_hide_page { position:fixed; left:0; top:0; /* pour IE */ _position:absolute; top:expression(body.scrollTop + 0 + "px"); width:100%; height:100%; z-index:90; /*box_hide_page*/ }
#box_hide_page_loading { width:auto; height:auto; z-index:91; /*box_hide_page_loading*/ }
.tb_attente { width:100%; height:100%; border:0; margin:0; padding:0; }
.tr_attente { border:0 solid #ccc; text-align:center; vertical-align:middle; }
.td_attente { background-color:var(--very-light-grey); border:0 solid #cccccc; text-align:center; vertical-align:middle; }

/* Pas en place */
.flexbox { display:flex; flex-wrap:wrap; width:var(--width); }
.flexbox > * { flex:0 0 33.3333%; column-gap:40px; }

/* Box flex */
.box_ligne { display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; justify-content:flex-start; border:1px solid #ccc; }
.box_ligne:last-child {  }
.box_ligne:nth-child(odd) 	{ background-color:var(--very-grey); }
.box_ligne:nth-child(even) 	{ background-color:var(--very-light-grey); }
.box_column { padding:15px; }
.flex-container { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:start; width:100%; }
.row { margin:10px -var(--padding); }
.row:after { content:""; display:table; clear:both; }
.row, .row > .column { padding:8px; } 
.column { width:33.3333%; }
@media screen and (max-width: 800px) { .column { width:50%; } }
@media screen and (max-width: 600px) { .column { width:100%; } }

/* Box iframe */
.resp-iframe { position:relative; width:100%; height:150px; border:1px solid #ccc; }

/* Box table */
.responsive-table { margin:5px 0; width:100%; overflow-x:auto; }

/* Box formulaire */
.formulaire { }

/* Box log (front seulement) */
#cadre_log { position:fixed; top:75px; left:20px; padding:5px; background-color:white; width:175px; text-align:center; border:1px solid var(--grey); z-index:500; }
#cadre_log:hover { cursor:move; }
#cadre_log_texte, #cadre_log_btn { padding:5px; font-size:smaller; text-align:left; border-top:1px solid var(--grey); }
#cadre_log_btn a { text-decoration:none; width:100%; }
#cadre_log_btn a:hover { background-color:#ccc; }
#cadre_log_btn a:after { content:""; clear:both; display:table; }

/* Box modifier (front seulement) */
.box_modif { text-align:right; z-index:10; font-size:x-small; }

/* Box flex portfolio (front seulement) */
.portfolio { margin:0 auto; padding:10px; max-width:360px; min-height:360px; background-color:var(--very-light-grey); text-align:center; }
.portfolio h4 { font-weight:bold; text-align:center; margin:10px; border-bottom:1px solid #ccc; }
.portfolio img { max-width:100%; height:250px; object-fit:contain; }
@media screen and (max-width: 600px) {
    .portfolio { width:100%; height:auto; }
    .portfolio img { width:100%; height:auto; }
}


/*************************/
/****    NAVIGATION   ****/
/*************************/

/* Navigation */
.navigation { display:inline; float:left; }
.navigation:after { /*content:""; display:table; clear:both;*/ }
nav label { color:#999; font-size:small; }

/* Pagination */
.pagination { display:inline; float:right; }
.pagination:after { /*content:""; display:table; clear:both;*/ }

/* Tabulation */
.tab { background-color:var(--very-light-grey); border:0px solid #ccc; }
.tab button { padding:14px 16px; background-color:inherit; border:none; outline:none; cursor:pointer; transition:0.3s; float:left; }
.tab button:hover:not(.inactive) { background-color:#ddd; }
.tab button.active { background-color:var(--site-soft-pink); color:white; }
.tab:after { content:""; display:table; clear:both; }
.tabcontent { display:none; padding:6px 12px; border:0px solid #ccc; border-top:none; } 
.tabcontent.defaultOpen { display:block; } 
.tabcontent:after { content:""; display:table; clear:both; }

/* Breadcrumbs */
ul.breadcrumb { padding:8px 16px; list-style:none; background-color:var(--very-light-grey); }
ul.breadcrumb li { display:inline; }
ul.breadcrumb li+li:before { padding:8px; color:black; content:"/\00a0"; }


/*************************/
/****    FORMULAIRE   ****/
/*************************/

/* Class formulaire */
label.container { padding-top:2px; }
label.desc { width:35%; padding-top:16px; padding-right:10px; /*text-align:right;*/ float:left; }
.form_chp { padding-top:2px; width:65%; float:right; }
.form_chp > div > strong { display:block; }
.champs { display:block; padding-top:14px; }
.champs_observations { color:#666; font-style:italic; }

/* Class champs */
.max_input, .max_select, .max_textarea { width:100%; }
.mini_input { max-width:30%; font-size:small; }
.mini_select { width:auto; font-size:small; }
.mini_textarea { max-width:65%; font-size:small; }
.min_bouton { font-size:xx-small; }
.no_css { background-color:transparent; border:none; } 
.no_css:hover { text-decoration:none; } 
.box_50 .mini_input, .mini_select, .mini_textarea { max-width:100%; }

/* Custom checkbox */
.container.checkbox { display:inline-block; position:relative; padding-left:25px; margin-bottom:12px; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.container.checkbox input { position:absolute; opacity:0; cursor:pointer; height:0; width:0; }
.checkmark { position:absolute; top:0; left:0; height:18px; width:18px; background-color:#ccc; }
.container.checkbox:hover input ~ .checkmark { background-color:#ccc; }
.container.checkbox input:checked ~ .checkmark { background-color:var(--site-soft-pink); }
.checkmark:after { content:""; position:absolute; display:none; }
.container.checkbox input:checked ~ .checkmark:after { display:block; }
.container.checkbox .checkmark:after { left:5px; top:1px; width:5px; height:10px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }

.label { padding:8px; color:white; }
.input { display:block; width:100%; border:none; border-bottom:1px solid #ccc; }
.select { width:100%; border:none; border-bottom:1px solid #ccc; }
.textarea { width:100%; border:none; border-bottom:1px solid #ccc; }
.check, .radio { position:relative; top:6px; width:24px; height:24px; }

/*************************/
/****     BOUTONS     ****/
/*************************/

/* Boutons */
.btn, .button { 
	display:inline-block; padding:8px 16px; background-color:inherit; vertical-align:middle; 
	/*margin:3px 1px;*/
	color:inherit; text-decoration:none; text-align:center; white-space:nowrap; 
	border:none; outline:none; transition-duration:1s; 
    -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
    cursor:pointer; overflow:hidden; 
}
.btn.active { background-color:#666; color:white; }
.button.active { background-color:var(--pale-red); color:white; }
.btn.disabled:hover, .btn:disabled:hover { box-shadow:none; }
.btn:hover:not(.inactive) { box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); }
.button:hover:not(.inactive) { background-color:var(--pale-red)!important; color:var(--white)!important; }
.inactive:not(.no_print), .disabled, .btn:disabled, .btn.inactive, .button:disabled { opacity:0.3; cursor:not-allowed; }
.inactive, .disabled *, :disabled * { pointer-events:none; }

/* Bouton The Modal */
.closebtn { color:#000; background-color:transparent; border:none; transition-duration:1s; cursor:pointer; }
.closebtn:hover { color:var(--site-soft-pink); }

/* Bouton Backtop */
#backtop { 
	display:none; position:fixed; top:auto; bottom:20px; left:auto; right:20px; background-color:var(--site-soft-pink); width:36px; height:36px; 
    outline:none; color:#fff; font-size:14px; text-align:center; line-height:36px; border-radius:2px; 
    transition:all .3s linear; opacity:1; cursor:pointer; overflow:hidden; z-index:999; /*backtop*/ 
}
#backtop:hover { background-color:#ccc; /*backtop:hover*/ }
#backtop.mcOut { opacity:0 }

/* Bouton clignotant */
.clignotant { font-weight:bold; text-shadow:0 1px 0 white; border-radius:3px; border: 1px solid #666; box-shadow:0px 0px 10px var(--rouge); -webkit-animation-name:clignote; -webkit-animation-duration:1s; -webkit-animation-iteration-count:infinite; }
@-webkit-keyframes clignote { 0% { box-shadow:0px 0px 10px var(--bleu); } 50% { box-shadow:0px 0px 0px var(--bleu); } 100% { box-shadow:0px 0px 10px var(--bleu); } }

/* Bouton login (front seulement) */
#loginbtn { position:fixed; top:70px; left:20px; z-index:999; /*loginbtn*/ }

/* Bouton Booking (front seulement) */
#bookbtn { position:fixed; top:70px; right:20px; width:50px; transition-duration:1s; z-index:999; /*bookbtn*/ }
#bookbtn:hover { cursor:pointer; }
#bookbtn:hover #bookbtn-mois { background-color:#000; }
#bookbtn:hover #bookbtn-jour { background-color:#ccc; }
#bookbtn-mois { background-color:var(--site-soft-pink); color:#fff; text-align:center; border-top-left-radius:4px; border-top-right-radius:4px; transition-duration:1s; }
#bookbtn-jour { background-color:#f3f3f3; color:#68717a; text-align:center; padding:10px 0; border-bottom-right-radius:6px 2px; border-bottom-left-radius:3px 4px; transition-duration:1s; }


/*************************/
/****    STANDARD     ****/
/*************************/

/* Margin */
.margin 		{ margin:var(--padding)!important; }
.margin-top 	{ margin-top:var(--padding)!important; }
.margin-bottom 	{ margin-bottom:var(--padding)!important; }
.margin-left 	{ margin-left:var(--padding)!important; }
.margin-right 	{ margin-right:var(--padding)!important; }

/* Padding */
.padding 		{ padding:8px 16px!important; }
.padding-small 	{ padding:4px 8px!important; }
.padding-rs		{ padding:6px 12px!important; }
.padding-meduim	{ padding:8px 16px!important; }
.padding-large 	{ padding:12px 24px!important; }
.padding-16 	{ padding:16px 0!important; }
.padding-24 	{ padding:24px 0!important; }
.padding-32 	{ padding:32px 0!important; }
.padding-48 	{ padding:48px 0!important; }
.padding-64 	{ padding:64px 0!important; }
.padding-left 	{ padding-left:12px!important; }
.padding-right 	{ padding-right:12px!important; }

/* Espacement */
.height 		{ margin-bottom:5px; padding:0; background-color:transparent; clear:both; }
.height_10 		{ margin-bottom:5px; padding-top:5px; background-color:transparent; clear:both; }
.height_20 		{ margin-bottom:10px; padding-top:10px; background-color:transparent; clear:both; }
.height_30 		{ margin-bottom:15px; padding-top:15px; background-color:transparent; clear:both; }
.height_60 		{ margin-bottom:30px; padding-top:30px; background-color:transparent; clear:both; }

/* Bordure */
.border-0 { border:0!important; }
.border { border:1px solid #ccc!important; }
.border-top { border-top:1px solid #ccc!important; }
.border-bottom { border-bottom:1px solid #ccc!important; }
.border-left { border-left:1px solid #ccc!important; }
.border-right { border-right:1px solid #ccc!important; }


/*************************/
/****      TEXTE      ****/
/*************************/

/* Couleurs */
.black,.hover-black:hover{color:#fff!important; background-color:#000!important}
.amber,.hover-amber:hover{color:#000!important; background-color:#ffc107!important}
.aqua,.hover-aqua:hover{color:#000!important; background-color:#00ffff!important}
.blue,.hover-blue:hover{color:#fff!important; background-color:var(--bleu)!important}
.light-blue,.hover-light-blue:hover{color:#000!important; background-color:#87CEEB!important}
.brown,.hover-brown:hover{color:#fff!important;background-color:#795548!important}
.cyan,.hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.blue-grey,.hover-blue-grey:hover,.blue-gray,.hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.green,.hover-green:hover{color:#fff!important;background-color:var(--vert)!important}
.light-green,.hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.indigo,.hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.khaki,.hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.lime,.hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.orange,.hover-orange:hover{color:#000!important;background-color:var(--orange)!important}
.deep-orange,.hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.pink,.hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.purple,.hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.deep-purple,.hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.red,.hover-red:hover{color:#fff!important;background-color:var(--rouge)!important}
.sand,.hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.teal,.hover-teal:hover{color:#fff!important;background-color:#009688!important}
.yellow,.hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.white,.hover-white:hover{color:#000!important;background-color:#fff!important}
.black,.hover-black:hover{color:#fff!important;background-color:#000!important}
.grey,.hover-grey:hover,.gray,.hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#000!important;background-color:var(--light-grey)!important}
.dark-grey,.hover-dark-grey:hover,.dark-gray,.hover-dark-gray:hover{color:#fff!important;background-color:var(--dark-grey)!important}
.pale-red,.hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.pale-green,.hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.pale-yellow,.hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.pale-blue,.hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.text-amber,.hover-text-amber:hover{color:#ffc107!important}
.text-aqua,.hover-text-aqua:hover{color:#00ffff!important}
.text-blue,.hover-text-blue:hover{color:var(--bleu)!important}
.text-light-blue,.hover-text-light-blue:hover{color:#87CEEB!important}
.text-brown,.hover-text-brown:hover{color:#795548!important}
.text-cyan,.hover-text-cyan:hover{color:#00bcd4!important}
.text-blue-grey,.hover-text-blue-grey:hover,.text-blue-gray,.hover-text-blue-gray:hover{color:#607d8b!important}
.text-green,.hover-text-green:hover{color:var(--vert)!important}
.text-light-green,.hover-text-light-green:hover{color:#8bc34a!important}
.text-indigo,.hover-text-indigo:hover{color:#3f51b5!important}
.text-khaki,.hover-text-khaki:hover{color:#b4aa50!important}
.text-lime,.hover-text-lime:hover{color:#cddc39!important}
.text-orange,.hover-text-orange:hover{color:var(--orange)!important}
.text-deep-orange,.hover-text-deep-orange:hover{color:#ff5722!important}
.text-pink,.hover-text-pink:hover{color:#e91e63!important}
.text-purple,.hover-text-purple:hover{color:#9c27b0!important}
.text-deep-purple,.hover-text-deep-purple:hover{color:#673ab7!important}
.text-red,.hover-text-red:hover{color:var(--rouge)!important}
.text-sand,.hover-text-sand:hover{color:#fdf5e6!important}
.text-teal,.hover-text-teal:hover{color:#009688!important}
.text-yellow,.hover-text-yellow:hover{color:#d2be0e!important}
.text-white,.hover-text-white:hover{color:#fff!important}
.text-black,.hover-text-black:hover{color:#000!important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575!important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:var(--light-grey)!important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:var(--dark-grey)!important}
.border-amber,.hover-border-amber:hover{border-color:#ffc107!important}
.border-aqua,.hover-border-aqua:hover{border-color:#00ffff!important}
.border-blue,.hover-border-blue:hover{border-color:var(--bleu)!important}
.border-light-blue,.hover-border-light-blue:hover{border-color:#87CEEB!important}
.border-brown,.hover-border-brown:hover{border-color:#795548!important}
.border-cyan,.hover-border-cyan:hover{border-color:#00bcd4!important}
.border-blue-grey,.hover-border-blue-grey:hover,.border-blue-gray,.hover-border-blue-gray:hover{border-color:#607d8b!important}
.border-green,.hover-border-green:hover{border-color:var(--vert)!important}
.border-light-green,.hover-border-light-green:hover{border-color:#8bc34a!important}
.border-indigo,.hover-border-indigo:hover{border-color:#3f51b5!important}
.border-khaki,.hover-border-khaki:hover{border-color:#f0e68c!important}
.border-lime,.hover-border-lime:hover{border-color:#cddc39!important}
.border-orange,.hover-border-orange:hover{border-color:var(--orange)!important}
.border-deep-orange,.hover-border-deep-orange:hover{border-color:#ff5722!important}
.border-pink,.hover-border-pink:hover{border-color:#e91e63!important}
.border-purple,.hover-border-purple:hover{border-color:#9c27b0!important}
.border-deep-purple,.hover-border-deep-purple:hover{border-color:#673ab7!important}
.border-red,.hover-border-red:hover{border-color:var(--rouge)!important}
.border-sand,.hover-border-sand:hover{border-color:#fdf5e6!important}
.border-teal,.hover-border-teal:hover{border-color:#009688!important}
.border-yellow,.hover-border-yellow:hover{border-color:#ffeb3b!important}
.border-white,.hover-border-white:hover{border-color:#fff!important}
.border-black,.hover-border-black:hover{border-color:#000!important}
.border-grey,.hover-border-grey:hover,.border-gray,.hover-border-gray:hover{border-color:#9e9e9e!important}
.border-light-grey,.hover-border-light-grey:hover,.border-light-gray,.hover-border-light-gray:hover{border-color:var(--very-light-grey)!important}
.border-dark-grey,.hover-border-dark-grey:hover,.border-dark-gray,.hover-border-dark-gray:hover{border-color:var(--dark-grey)!important}
.border-very-pale-red,.hover-border-very-pale-red:hover{border-color:#ffe7e7!important}
.border-pale-green,.hover-border-pale-green:hover{border-color:#e7ffe7!important}
.border-pale-yellow,.hover-border-pale-yellow:hover{border-color:#ffffcc!important}.border-pale-blue,.hover-border-pale-blue:hover{border-color:#e7ffff!important}

/* Titre */
span.section-titre { display:inline-block; margin-top:5px; padding:8px 16px; background-color:var(--site-soft-pink); color:white; font-size:small; text-align:center; text-decoration:none; white-space:nowrap; border:none; }

/* Texte */
.tiny 			{ font-size:xx-small!important; }
.xsmall 		{ font-size:x-small!important; }
.small, small 	{ font-size:small!important; }
.medium 		{ font-size:medium!important; }
.large 			{ font-size:large!important; }
.xlarge 		{ font-size:x-large!important; }
.xxlarge 		{ font-size:xx-large!important; }
.xxxlarge 		{ font-size:48px!important; }
.jumbo 			{ font-size:64px!important; }
.text 			{ display:inline-block; }

/* Alignement */
.left 			{ text-align:left!important; }
.right 			{ text-align:right!important; }
.justify 		{ text-align:justify!important; }
.center 		{ text-align:center!important; }
.legende 		{ text-align:right; }

/* Shadow */
.text-shadow 	{ text-shadow:1px 1px 1px #000; }

/* Zoom */
.zoom 			{ transition:transform .2s; margin:0 auto; }
.zoom:hover 	{ transform:scale(1.5); }

/* Citations */
blockquote { background:url(images/quote-right.gif) no-repeat right bottom; color:grey; font-style:italic; text-align:justify; text-indent:-25px; padding-right:25px; padding-left:25px; }
blockquote:first-letter { background:url(images/quote-left.gif) no-repeat left top; font-size:1.4em; padding-left:25px; }
code, kbd, pre, samp { font-family:monospace,monospace; font-size:1em; }
.code, .codespan { font-family:Consolas,"courier new"; font-size:1.6em; }
.code { background-color:#fff; width:auto; word-wrap:break-word; padding:8px 12px; border-left:4px solid var(--site-soft-pink); }
.codespan { background-color:var(--very-light-grey); padding-left:4px; padding-right:4px; color:crimson; font-size:1.1em%; }
@media (max-width:600px) { blockquote { padding-left:0; margin-right:12px; } }

/* Opacité */
.opacity,.hover-opacity:hover { opacity:0.60; }
.opacity-off,.hover-opacity-off:hover { opacity:1; }
.opacity-max { opacity:0.25; }
.opacity-min { opacity:0.75; }

/* Commandes */
.cde_en_cours 					{ color:#3366cc; }
.cde_erreur 					{ color:var(--rouge); }
.cde_annulee 					{ color:#ff3300; }
.cde_refusee 					{ color:#ff00ff; }
.cde_non_reglee 				{ color:#9900cc; }
.cde_reglee 					{ color:#3366cc; }
.cde_avoir 						{ color:#660000; }
.cde_supprimee 					{ color:#ff3300; }
.cde_vad 						{ color:#3366cc; }
.cde_cb 						{ color:#3366cc; }
.cde_chq 						{ color:#9900cc; }
.cde_vrt 						{ color:#9900cc; }
.cde_esp 						{ color:#9900cc; }
.cde_front 						{ color:#3366cc; }
.cde_admin 						{ color:#9900cc; }

/* Etats de commande */
.etat_devis_en_cours 			{ color:#45aa0f; }
.etat_devis_refuse				{ color:#65eb1b; }
.etat_commande_non_finalisee	{ color:#0f93ab; }
.etat_commande_non_reglee		{ color:#0f93ab; }
.etat_cde_erreur_paiement		{ color:#0f93ab; }
.etat_devis_accepte_non_regle	{ color:#1bcceb; }
.etat_devis_accepte_acompte		{ color:#1bcceb; }
.etat_devis_accepte_regle		{ color:#1bcceb; }
.etat_commande_acompte			{ color:#0f45aa; }
.etat_commande_attente_reassort	{ color:#0f45aa; }
.etat_commande_realisation		{ color:#0f45aa; }
.etat_commande_finalisation		{ color:#0f45aa; }
.etat_commande_livraison		{ color:#3366cc; }
.etat_commande_livree			{ color:#3366cc; }
.etat_commande_reglee			{ color:#1b63eb; }
.etat_facture_non_reglee 		{ color:#1b63eb; }
.etat_facture_acompte 			{ color:#1b63eb; }
.etat_facture_reglee 			{ color:#1b63eb; }
.etat_facture_reclamation		{ color:#9a0fab; }
.etat_facture_retour			{ color:#9a0fab; }
.etat_facture_remboursement		{ color:#9a0fab; }
.etat_facture_avoir 			{ color:#9900cc; }

/* Formations */
.formation_encours 				{ color:#3366cc; }
.formation_annulee 				{ color:#ff3300; }
.formation_cloturee 			{ color:#cc00ff; }
.formation_terminee 			{ color:#6666ff; }
.formation_modele, 
.formation_sansdate, 
.formation_horsligne 			{ color:#999; }

/* Produits */
.produit_enstock, 
.produit_horsligne, 
.produit_enattente 				{ color:#660000; }
.produit_enstock 				{ color:#669900; }

/* Recherche */
span.search { color:#999; }


/*************************/
/****      TABLE      ****/
/*************************/

/* Table */
.table,.table-all { border-collapse:collapse; border-spacing:0; width:100%; display:table; }
.table td,.table th,.table-all td,.table-all th { padding:8px 8px; display:table-cell; text-align:left; vertical-align:top; }
.table th:first-child,.table td:first-child,.table-all th:first-child,.table-all td:first-child { padding-left:var(--padding); }
.table-all { border:1px solid #ccc; }
.table-all tr:nth-child(odd) { background-color:#fff; }.table-all tr:nth-child(even) { background-color:var(--very-light-grey); }

.tr_hide { display:none; }


/*************************/
/****      PHOTO      ****/
/*************************/

/* Photo */
.image { max-width:100%; height:auto; }
.photo_max { width:100%; height:auto; }
.photo_border { border:1px solid #ddd; border-radius:4px; padding:5px; }


/*************************/
/****     DISPLAY     ****/
/*************************/

/* Position */
.display-container { position:relative; }
.display-container:hover .display-hover { display:block; }
.display-container:hover span.display-hover { display:inline-block; }
.display-hover { display:none; }
.display-position { position:absolute; }
.display-bottomleft { position:absolute; left:0; bottom:0; }
.display-bottommiddle { position:absolute; left:50%; bottom:0; transform:translate(-50%,0%); -ms-transform:translate(-50%,0%); }
.display-bottomright { position:absolute; right:0; bottom:0; }
.display-middle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); }
.display-left { position:absolute; top:50%; left:0%; transform:translate(0%,-50%); -ms-transform:translate(-0%,-50%); }
.display-right { position:absolute; top:50%; right:0%; transform:translate(0%,-50%); -ms-transform:translate(0%,-50%); }
.display-topleft { position:absolute; left:0; top:0; }
.display-topmiddle { position:absolute; left:50%; top:0; transform:translate(-50%,0%); -ms-transform:translate(-50%,0%); }
.display-topright { position:absolute; right:0; top:0; }
.top, .bottom { position:fixed; width:100%; z-index:22; /*.top,.bottom*/ } /* z-index > logo */ 
.top { top:0; } 
.bottom { bottom:0; }

/* Display */
[hidden], template { display:none; }
.hide { display:none!important; }
.show { display:block!important; }
.show-block, .show { display:block!important; }
.show-inline-block { display:inline-block!important; }






/*************************/
/****     GENERAL     ****/
/*************************/

/* Insdispensables standard */
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*, *:before, *:after { }
html { scroll-behavior:smooth; }
body, main { margin:0; padding:0; }
body, select, input, option, textarea, .textarea, th, td, div, p, span, b, strong, em, i, li, a { }

/* Sections standard */
header, menu, nav, aside, main, section:not(.lightpick), article, details, figure, figcaption, footer { width:100%; display:block; }
main { max-width:2000px; margin-top:43px; }

details { border:1px solid #aaa; border-radius:4px; padding:.5em .5em 0; }
details[open] { padding:.5em; }
details[open] summary { border-bottom:1px solid #aaa; margin-bottom:.5em; }
summary { display:list-item; }
details summary { font-weight:bold; margin:-.5em -.5em 0; padding:.5em; display:list-item; }

/* Titre standard */
h1, h2 { position:-webkit-sticky; position:sticky; top:43px; /*50*/ margin:40px 0; padding:15px 0; background-color:#fff; letter-spacing:5px; /*border-bottom:1px #ddd solid;*/ z-index:2; /*h1,h2*/ }

/* Formulaire  */
form { margin:0; padding:0; } 
fieldset { margin:0 2px; padding:.35em .625em .75em; border:1px solid #c0c0c0; }
legend { display:table; max-width:100%; color:inherit; white-space:normal; padding:0; }
textarea { overflow:auto; }
button, input { overflow:visible; }
button, input, select, textarea, optgroup { /*margin:5px 0;*/ font:inherit; vertical-align:middle; }
button, select { text-transform:none; }
button, [type=button], [type=reset], [type=submit ] { -webkit-appearance:button; }
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { padding:0; border-style:none; }
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline:1px dotted ButtonText; }
[type=checkbox] { padding:0; }
[type=radio] { margin-top:-3px; /*HF*/ }
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { height:auto; }
[type=search] { width:50%; -webkit-appearance:textfield; outline-offset:-2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance:none; }
::-webkit-file-upload-button { font:inherit; -webkit-appearance:button; }

input, select, textarea { padding:8px; border:1px solid #ccc; background-size:15px 10px; background-repeat:no-repeat; }
input[type=text] { background-position:10px 11px; }
textarea { background-position:10px 13px; line-height:1.5em; }

input[type=text], textarea { width:100%; }
input[type=number] { -moz-appearance:textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input:focus, select:focus, select:focus, textarea:focus { background-color:#e5f1fb; border-color:#0078d7; outline:0; }

/* Table standard */
table { display:table; width:100%; border-collapse:collapse; }
th, td { border:1px solid #ddd; padding:8px; }
th, td, td select, td input { font-size:small; }
tr:not(.normal):nth-child(4n+1) { background-color:var(--light-grey); }
tr:nth-child(even) { background-color:var(--light-grey); }
tr:not(.no_print):hover { background-color:#ddd; }
th { background-color:var(--site-soft-pink); color:white; text-align:center; font-weight:normal; }
th, td { vertical-align:middle; }

/* Liste standard */
ul { list-style-type:none; }
li:before { content:'- '; }

/* Text standard */
b, strong { font-weight:bolder; }
em, i { font-variant:inherit; }

/* Ligne standard */
hr { width:100%; height:1px; border:0; border-bottom:1px solid #ccc; clear:both; }

/* Paragraphe image */
p img { max-width:100%; height:auto; }

/* Image standard */
img { margin:0; padding:0; vertical-align:middle; border-style:none; }

/* Media standard */
audio, canvas, video { display:inline-block; }
audio:not([controls]) { display:none; height:0; }

/* Lien standard */
a { background-color:transparent; color:inherit; }
a:active,a:hover { outline-width:0; }
abbr[title] { border-bottom:none; text-decoration:underline; text-decoration:underline dotted; }
a img { vertical-align:middle; }
a bar_item div {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}


/*************************/
/****      SITE       ****/
/*************************/

/* Background */
.transparent, { background-color:transparent!important; }
.parallax { min-height:500px; background-attachment:fixed; background-position:center; background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover; }

/* Logo */
.nav-img { display:inline-block; float:left; padding-top:6px; }
.nav-img:first-child { padding-left:10px; padding-right:10px; }
.logo {position:absolute;top:75px;left:-25%;animation-name:anim_logo;animation-duration:4s;animation-fill-mode:forwards;z-index:2;/*logo*/}
@keyframes anim_logo { from{left:-25%;transform:scale(1.75);opacity:0;} to{left:5%;transform:scale(1);opacity:1;} }

/* Accroche */
.accroche { background-color:#fff; color:#666; padding:12px; transition-duration:1s; float:right; }
.accroche_logo {position:absolute;top:230px;right:-25%;color:#fff;text-shadow:1px 1px black;animation-name:anim_accroche;animation-duration:4s;animation-fill-mode:forwards;z-index:2;/*accroche_logo*/}
@keyframes anim_accroche { from{right:-500px;} to{right:75%;} }

/* Navigation */
#nav_normal { }
#nav_mobile { margin-top:46px; } /* 43+3 */
.bar { position:fixed; width:100%; /*min-height:50px;*/ overflow:hidden; z-index:900; /*bar*/ } /*A voir... display:flex;*/
.center .bar { width:auto; display:inline-block; }
.sidebar { position:fixed!important; height:100%; width:200px; background-color:#fff; overflow:auto; z-index:901; /*sidebar*/ }
.dropdown-click, .dropdown-hover { position:relative; display:inline-block; cursor:pointer; }
.dropdown-hover:hover .dropdown-content { display:block; }
.dropdown-hover:first-child, .dropdown-click:hover { background-color:#ccc; color:#000; }
.dropdown-hover:hover > .button:first-child, .dropdown-click:hover > .button:first-child { background-color:#ccc; color:#000; }
.dropdown-content { position:absolute; background-color:#fff; min-width:160px; color:#000; margin:0; padding:0; display:none; cursor:auto; z-index:902; /*.dropdown-content*/ }
.bar-block .dropdown-hover, .bar-block .dropdown-click { width:100%; }
.bar-block .dropdown-hover .dropdown-content, .bar-block .dropdown-click .dropdown-content { min-width:100%; }
.bar-block .dropdown-hover .button,.bar-block .dropdown-click .button { width:100%; text-align:left; padding:8px 16px; }
.bar .bar-item { width:auto; padding:8px 16px; border:none; outline:0; display:block; float:left; }
.bar .dropdown-hover, .bar .dropdown-click { position:static; float:left; }
.bar .button { white-space:normal; }
.bar-block .bar-item { width:100%; text-align:left; white-space:normal; border:none; outline:0; display:block; float:none; }
.bar-block.center .bar-item { text-align:center; }
.block { display:block; width:100%; }

.card-1, .card-2 { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); }
.card-4, .hover-shadow:hover { box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); }

/* Forme */
.square { background-color:#555; height:50px; width:50px; }
.circle { background-color:#555; height:50px; width:50px; border-radius:50%; }
.triangle-right { width:0; height:0; border-top:25px solid transparent; border-left:50px solid #555; border-bottom:25px solid transparent; }
.triangle-left { width:0; height:0; border-top:25px solid transparent; border-right:50px solid #555; border-bottom:25px solid transparent; }
.triangle-down { width:0; height:0; border-left:25px solid transparent; border-right:25px solid transparent; border-top:50px solid #555; }
.triangle-up { width:0; height:0; border-left:25px solid transparent; border-right:25px solid transparent; border-bottom:50px solid #555; }

/* Popup */
.overlay { position:fixed; background-color:rgba(0,0,0,0.5); height:100%; top:0; left:0; right:0; bottom:0; width:100%; display:none; z-index:950; /*overlay*/ }
.white-popup { position:relative; background:#fff; padding:40px; width:auto; max-width:200px; margin:20px auto; text-align:center; }

/* Box div */
.content, .auto { margin-left:auto; margin-right:auto; }
.content { }
.auto { max-width:1140px; }
.container { max-width:var(--width); margin:0 auto; /*padding-top:75px;*/ }
.container img { margin:0 auto; padding:0; }
.section, .code { margin-top:var(--padding)!important; margin-bottom:var(--padding)!important; }

.cadre_encart { background-color:var(--very-light-grey); border:3px solid #ccc; border-radius:10px; }
.div_colonne_1 {  }
.div_colonne_2 { -webkit-columns:2; -moz-columns:2; columns:2; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px; }
.div_colonne_3 { -webkit-columns:3; -moz-columns:3; columns:3; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px; }
.div_colonne_4 { -webkit-columns:4; -moz-columns:4; columns:4; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px; }
[class*="div_colonne_"] div { width:100%; margin-top:var(--padding); -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; display:table; }
[class*="div_colonne_"] div:first-child { margin-top:0; }
[class*="div_colonne_"] em { color:grey; }
[class*="div_colonne_"] img { width:100%; height:auto; }
[class*="div_colonne_"] ul, [class*="div_colonne_"] ol li { padding:0; }


/*************************/
/****   IMPRESSION    ****/
/*************************/

/* Impression (seulement) */
.print { visibility:hidden; display:none; }


/*************************/
/****     MOBILE      ****/
/*************************/

/* Mobile */
.mobile { visibility:hidden; display:none; }
.hide-mobile { visibility:visible; display:inline; }
.small_screen_mobile { display:none; }

/* Marges */
.margin_mobile_5 { display:none; }
.margin_mobile_10 { display:none; }
.margin_mobile_20 { display:none; }

/* Supports */
@supports (-webkit-overflow-scrolling:touch) { 
	.parallax { background-attachment:scroll; } /* Fix bug background-size:cover; sur iOS */ 
}

/* Responsive */
@media (max-width:1200px) {
	.auto { max-width:95%; } /*max-1200px*/
}
@media (max-width:1200px) and (min-width:999px){
	/*.accroche { display:none !important; }*/
}
@media (max-width:1000px){
    .container { padding:0 var(--padding); }
}
@media (max-width:1100px) {
    .accroche { display:none !important; }
}
@media (min-width:1000px){ 
	.hide-large { display:none!important; } /*max-1000px*/
	.sidebar.collapse { display:block!important; } /*max-1000px*/
	
    .modal-content { /*width:900px;*/ } /*max-1000px*/
}
@media (max-width:999px){
	.hide-medium { display:none!important; } /*max-999px*/
	.auto { max-width:100%; } /*max-999px*/
	.main { margin-left:0!important; margin-right:0!important; } /*max-999px*/
	.sidebar.collapse { display:none; } /*max-999px*/
	
	.accroche { /*float:left;*/ } /*max-999px*/
}
@media (max-width:900px){
	img { max-width:100%; height:auto; } /*max-900px*/
    p, .box_100, .box_50, [class*="div_colonne_"] { padding:0 var(--padding)!important; } /*max-900px*/
	
	.padding-left { padding-left:0px!important; } /*max-900px*/
	.padding-right { padding-right:0px!important; } /*max-900px*/
	.legende { text-align:center; } /*max-900px*/
	.my_slides, .cycle-slideshow { background-color:var(--white); overflow:hidden; } /*height:375px;*/ /*max-900px*/
	.my_slides img, .cycle-slideshow img { width:auto; object-fit:cover; } /*height:375px;*/ /*max-900px*/
	[class*="div_colonne_"] { -webkit-columns:1; -moz-columns:1; columns:1; } /*max-900px*/
    
    .modal-content { /*width:500px;*/ } /*max-900px*/
	.modal { padding-top:50px; } /*max-900px*/
}
@media (max-width:600px) {
	.cycle-slideshow img { width:100%; } /*min-height:400px;*/ /* Garde la proportion correcte pour les mobiles */
    .hide-big { display:none!important; } /*max-600px*/
	.hide-small { display:none!important; } /*max-600px*/
    
    .bar-item.mobile,.dropdown-hover.mobile,.dropdown-click.mobile { text-align:center; } /*max-600px*/
	.dropdown-hover.mobile .dropdown-content, .dropdown-click.mobile .dropdown-content { position:relative; } /*max-600px*/	
	.dropdown-hover.mobile,.dropdown-hover.mobile .btn,.dropdown-hover.mobile .button,.dropdown-click.mobile,.dropdown-click.mobile .btn,.dropdown-click.mobile .button { width:100%; } /*max-600px*/
	
    [type=search] { width:100%; margin-bottom:5px; }
	.mobile { display:block!important; visibility:visible!important; width:100%!important; } /*max-600px*/
	.hide-mobile { display:none!important; visibility:hidden; } /*max-600px*/
	
	.logo_mobile { text-align:center; padding-top:10px; } /*max-600px*/
	.box_50 { width:100%; padding-bottom:var(--padding); } /*max-600px*/
	
    .modal-content { margin:0 10px; width:auto!important; } /*max-600px*/
	.modal { padding-top:30px; } /*max-600px*/
    
    .mini_input { max-width:100%; }
}