body { font-family:'Arial', sans-serif; font-size:14px; color:#949494; background:#fff;}
*, a, img, a:active, a:focus { outline:0 none;}
a, a:hover { text-decoration:none;}
a { color:#a561af;}

.frontend { background-image:url(../images/fonds/fond-2.webp); background-position: 50% 50%; background-repeat: no-repeat; background-size:cover; background-attachment: fixed; }
#top { background:#fff;}
/*#box-logo {left: 50%; margin: 0 0 0 -40px; position: absolute; width: 80px;}*/
#box-logo {left: 50%; margin: 0 0 0 -115px; position: absolute; width: 230px;}
#menu-principal ul li a { padding:12px 17px 15px 35px; border-top:5px solid #fff; color:#6D071A; font-size:12px; text-transform:uppercase;}
#menu-principal ul li a:hover { color:#203f85;; border-top:5px solid #203f85;}
a.iaccueil { background:url(../images/site/icones/i_acceuil.png) 5px 40% no-repeat;}
a.iaccueil:hover { background:url(../images/site/icones/i_acceuil_hover.png) 5px 40% no-repeat;}
a.ireservation { background:url(../images/site/icones/i_reservation.png) 5px 40% no-repeat;}
a.ireservation:hover { background:url(../images/site/icones/i_reservation_hover.png) 5px 40% no-repeat;}
a.icontact { background:url(../images/site/icones/i_contact.png) 5px 40% no-repeat;}
a.icontact:hover { background:url(../images/site/icones/i_contact_hover.png) 5px 40% no-repeat;}
/*Home*/
#reservationdefault { padding:25px;}

#mainpage { margin:25px 0; }
.pagereservation { background:#fff;}

/* FLEX BOX */
.dflex, .flex { display: flex;}
.flex-row { flex-direction: row;}
.flex-col { flex-direction: column;}
.flex-wrap { flex-wrap: wrap;}
.justify-content-start { justify-content: flex-start;}
.justify-content-end { justify-content: flex-end;}
.justify-content-end { justify-content: flex-end;}
.justify-content-center { justify-content: center;}
.justify-content-between { justify-content: space-between;}
.justify-content-around { justify-content: space-around;}
.justify-content-evenly { justify-content: space-evenly;}
.align-items-start { align-items: flex-start;}
.align-items-end { align-items: flex-end;}
.align-items-center { align-items: center;}
.align-items-stretch { align-items: stretch;}
.align-items-baseline { align-items: baseline;}
.align-content-start { align-content: flex-start;}
.align-content-end { align-content: flex-end;}
.align-content-center { align-content: center;}
.align-content-stretch { align-content: stretch;}
.align-content-between { align-content: space-between;}
.align-content-around { align-content: space-around;}

.bouton { border-radius:4px; padding:6px 22px; transition:background-color 0.6s ease 0.2s, text-color: 0.6s ease 0.2s; border-color:0.6s ease 0.2s;} 
.btn-violet { color:#fff; background: #9b57a5; background: linear-gradient( #a05caa, #803e8a); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 86, 21, 96, 0.9), 0 -1px 0 rgba( 86, 21, 96, 0.4); border:1px solid transparent;}
.btn-violet:hover, .btn-vide:hover { color:#fff; background: #183c87; background: linear-gradient( #25438a, #092d77); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 9, 45, 119, 0.9), 0 -1px 0 rgba( 9, 45, 119, 0.4); border:1px solid transparent;}
.btn-vide { color:#fff; background: none; box-shadow: 0 0 5px rgba( 86, 21, 96, 0.9), 0 -1px 0 rgba( 86, 21, 96, 0.4); border:1px solid #fff;}
.btn-bleu { color:#fff; background: #183c87; background: linear-gradient( #25438a, #092d77); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 9, 45, 119, 0.9), 0 -1px 0 rgba( 9, 45, 119, 0.4); border:1px solid transparent;}
.btn-bleu:hover { color:#fff; background: #9b57a5; background: linear-gradient( #a05caa, #803e8a); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 86, 21, 96, 0.9), 0 -1px 0 rgba( 86, 21, 96, 0.4); border:1px solid transparent;}
.btn-videviolet { color:#985da1; background: none; box-shadow: 0 0 5px rgba( 86, 21, 96, 0.9), 0 -1px 0 rgba( 86, 21, 96, 0.4); border:1px solid #985da1;}
.btn-videviolet:hover { color:#fff; background: #183c87; background: linear-gradient( #25438a, #092d77); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 9, 45, 119, 0.9), 0 -1px 0 rgba( 9, 45, 119, 0.4); border:1px solid transparent;}

.btn-gris { color:#2d4a8c; background: #9b57a5; background: linear-gradient( #ececec, #d0d0d0); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 223, 223, 223, 0.9), 0 -1px 0 rgba( 223, 223, 223, 0.4); border:1px solid transparent; }
.btn-gris:hover { color:#fff; background: #183c87; background: linear-gradient( #25438a, #092d77); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 9, 45, 119, 0.9), 0 -1px 0 rgba( 9, 45, 119, 0.4); border:1px solid transparent;}
#btncreercompte { text-transform:uppercase; font-family:'Arial', sans-serif; padding:10px 24px; margin:20px 0; display:inline-block;}
.grandbtn { font-size:20px; text-transform:uppercase; padding:8px 65px; margin:20px 0; display:inline-block;}
.btn-suivant, .btn-precedent, .btn-resa { font-family:'Arial', sans-serif; font-size:11px; text-transform:uppercase; color:#fff; background: #3f62b4; background: linear-gradient( #5275c7, #3758a4); border:1px solid #233d88; padding:8px 22px;}
.btn-suivant:hover, .btn-precedent:hover, .btn-resa:hover { color:#fff; background: #213f85; background: linear-gradient( #2c4c98, #1b377a);}
.btn-suivant:disabled, .btn-precedent:disabled, .btn-resa:disabled { background:#949494; background: linear-gradient( #aaaaaa, #868484); border:1px solid #949494;}
.faright { margin-left:10px;}
.faleft { margin-right:10px;}
.boutonright { float:right;}
.boutonleft { float:left;}
/*Secondmenu*/
#datedujour { font-family:'Arial', sans-serif; background: rgba(0, 0, 0, 0) url(../images/site/date_bg.png) no-repeat scroll 0 0; display: block; float: left; height: 63px; margin: -7px 0 0; padding: 20px 15px 15px;  width: 101px;}
#djour { float:left; width:55%; color:#6D071A; font-size:26px; }
#dmy { color:#203f85; float:left; width:45%; padding:6px 0 0 2px;}
span.dmois, span.dan { display:block; font-size:12px; line-height:12px; text-transform:uppercase;}
#usernavigation { float:right; padding-top:6px;}
ul#usermenu { background:#fff;}
#secondmenu ul li a { padding:12px 17px 15px 35px; border-top:5px solid #fff; color:#6D071A; font-size:12px; text-transform:uppercase; font-family:'Arial', sans-serif;}
#secondmenu ul li a:hover { color:#203f85; border-top:5px solid #203f85;}
a.iprofil { background:url(../images/site/icones/i_profil.png) 5px 40% no-repeat;}
a.iprofil:hover { background:url(../images/site/icones/i_profil_hover.png) 5px 40% no-repeat;}
a.ihistorique { background:url(../images/site/icones/i_historique.png) 5px 40% no-repeat;}
a.ihistorique:hover { background:url(../images/site/icones/i_historique_hover.png) 5px 40% no-repeat;}
a.ideconnexion { background:url(../images/site/icones/i_deconnexion.png) 5px 40% no-repeat;}
a.ideconnexion:hover { background:url(../images/site/icones/i_deconnexion_hover.png) 5px 40% no-repeat;}
a.iconnexion { background:url(../images/site/icones/i_connexion.png) 5px 40% no-repeat;}
a.iconnexion:hover { background:url(../images/site/icones/i_connexion_hover.png) 5px 40% no-repeat;}
.mb-2 { margin-bottom: 10px;}
.mb-3 { margin-bottom: 15px;}
/*RESERVATION*/
#reservation {}
.etape-reservation { margin:25px 0;}
#resumetitre { padding:15px 0; color:#fff;}
#iresume { width:316px; margin:0 auto;}
.i_resume { font-family:'Arial', sans-serif; font-size:11px; padding:0 0 0 50px; background:url(../images/reservation/iresume.png) 0 50% no-repeat; text-transform:uppercase; color:#e2e2e2;}
.i_resume span { font-size:21px; color:#ffffff;}
#resumetitre h1 { font-family:'Arial', sans-serif;text-align:center; font-size:14px; text-transform:uppercase;}
#titreetape { padding:25px 0;}
.titreetapesalon_bg { background:url(../images/reservation/titreetapebg.png) 0 0 no-repeat;}
.titreetapeprestation_bg { background:url(../images/reservation/prestationtitre_bg.png) 0 0 no-repeat;}
.titreetapeoptions_bg { background:url(../images/reservation/optiontitre_bg.png) 0 0 no-repeat;}
.titreetapedate_bg { background:url(../images/reservation/datetitre_bg.png) 0 0 no-repeat;}
.titreetapeemployes_bg { background:url(../images/reservation/titreemployes_bg.png) 0 0 no-repeat;}
#i_etape_salon { width:370px; margin:0 auto 25px;}
#i_etape_date { width:400px; margin:0 auto;}
.ietapeposition { font-family:'Arial', sans-serif; padding:0 0 0 50px; background:url(../images/reservation/i_vousetesici.png) 0 50% no-repeat; text-transform:uppercase; color:#fff;}
.ietapeposition p { color:##6D071A; font-size:11px; margin-bottom:3px; line-height:12px;}
.ietapeposition span { color:#203f85; font-size:21px;}
.indicateur { width:960px; height:34px; margin:15px 0;}
#indicateur_home { background:url(../images/reservation/indicateur_home.png) 0 0 no-repeat;}
#indicateur_prestation { background:url(../images/reservation/indicateur_prestation.png) 0 0 no-repeat;}
#indicateur_option { background:url(../images/reservation/indicateur_option.png) 0 0 no-repeat;}
#indicateur_date { background:url(../images/reservation/indicateur_date.png) 0 0 no-repeat;}
#indicateur_employes { background:url(../images/reservation/indicateur_employes.png) 0 0 no-repeat;}
#resume { padding-left:20px}
#r_etablissement, #r_prestation, #r_option, #r_date, #r_total, #box-promo { max-width:320px; margin:0 auto 15px;}
#r_total { font-size: 22px; color: #6D071A;}
.resume h3 { color:##6D071A; font-size: 20px;}
.box-adresse {border-left:3px solid #203f85; padding:0 0 0 25px; margin-bottom:15px;}
#descprestation div { margin-top: 10px;}
ul.liopt { list-style: none; margin: 0; padding: 0;}

.r { float:left;}
.rtitre { font-family:'Arial', sans-serif; font-size:11px; color:#d5d5d5; text-transform:uppercase;}
.rtitre.active { color:#6D071A;}
.totitre { font-size:14px; color:#203f85;} 
p.rmin { margin:0; color:#949494; text-transform:uppercase;}
.mainresa { margin:30px 0;}
#choix_etablissement {}
.choixdate { max-width:350px; margin:0 auto;}
#choixcgu { max-width:400px; margin:0 auto;}
h2.ctitle { font-family:'Arial', sans-serif; font-size:18px; color:#6D071A; text-transform:uppercase; margin:15px 0 30px;}
h3.soustitre { font-size: 16px; text-decoration: underline; text-align:center;}
.choixetablissement { margin:15px auto; padding:20px; border:1px solid #d5d5d5; border-radius:4px; background:#fff; width:302px; cursor:pointer;}
/*.choixetablissement:hover, .choixetablissement.selected { background:#203f85;}*/
.choixetablissement h3 { font-family:'Arial', sans-serif; font-size:18px; color:#6D071A; text-align:center; text-transform:uppercase; margin:20px 0 0;}
.choixetablissement h3:hover, .choixetablissement:hover h3, .choixetablissement.selected h3 { color:#333;}
.choixetablissement .vignette { position:relative; overflow:hidden;}
.affinfo { padding: 15px;}
.affinfo .salontitre { color:#6D071A; font-size:16px; font-weight:bold;}
.affinfo .saloncontact { color:#fff;}
.infosalon {z-index: 2; position: absolute; width: 100%; height: 0px; bottom: 0; left: 0; text-align: center; transition: height 0.4s ease 0.5s; background:rgba(24, 24, 24, 0.7);}
.choixetablissement:hover .infosalon, .choixetablissement.selected .infosalon { height: 100%;}
.imgsalon img { border:7px solid #fff; border-radius:50%; border-collapse:collapse; opacity:1;}


.popetablissement { width:313px; position:absolute; top: 10px; right:30px;}
.popetablissement .head { width:313px; height:107px; background:url(../images/reservation/popetablissementbg.png) 0 0 no-repeat; padding:50px 20px 20px;}
.popetablissement .body { position:relative; background:#fff; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; padding:60px 20px 20px; }
ul.infoetab { list-style:none; padding:0; margin:0;}
ul.infoetab li { line-height: 22px; font-size:14px; }
.etabvignette { top:-50px; position:absolute;}
#descriptionprestation { margin:40px 0 0;}
.descprestation_bg { background:#fff; border:1px solid #d5d5d5;}
#desc_presta { padding:15px;}
#tarifpresta { width:307px; height:49px; padding:10px 0 0; margin:-5px auto 0; font-size:14px; background:url(../images/reservation/tarifpresta_bg.png) 0 0 no-repeat; color:#fff;text-transform:uppercase; font-weight:bold;}
#prix_presta { float:left; width:50%; padding:10px 0 8px 55px;}
#duree_presta { float:left; width:50%; padding:10px 0 8px 35px;}
#r_total_choix { color:#203f85; font-size:16px; font-weight:bold;}
.choixemploye { margin:15px auto; padding:10px; border:1px solid #d5d5d5; border-radius:4px; background:#fff; width:190px; cursor:pointer;}
.choixemploye:hover, .choixemploye.selected { background:#203f85;}
.choixemploye .vignette { position:relative;}
.choixemploye .vignette img { width:100%;}
.choixemploye .vignette .iinfo { right:7px; top:7px;}
.choixemploye h3 { font-size:11px; color:#6D071A; text-align:center; text-transform:uppercase; margin:12px 0 0;}
.choixemploye h3:hover, .choixemploye:hover h3, .choixemploye.selected h3 { color:#fff;} 

#catpresta, #programme { max-width: 350px; margin:0 auto 25px;}
#presta { max-width: 750px; margin:0 auto 25px;}
ul#listoptions { list-style: none; padding: 0; max-width:400px; margin:0 auto;}
ul#listoptions li {  margin-bottom: 15px;}
#heurepresta { max-width: 350px; margin: 0 auto 25px;}
#heurepresta select { max-width: 150px; margin: 0 auto;}
ul.choixul { max-width:400px; margin:0 auto; list-style: none; padding: 0;}
li.choixli { margin-bottom: 15px;}

.iinfo { position:absolute; top:15px; right:15px; width:16px; height:16px; display:block; background:url(../images/reservation/iinfo.png) 0 0 no-repeat;}
.popupresa { z-index:999999; width:300px; position:absolute; top: 10px; right:30px; color:#333; background:#009491; padding:10px;}
.choixsoin span { line-height:30px; font-weight: 400;}
.choixsoin { margin-bottom: 10px;}

.descsoin { color: #333; padding: 5px; margin: 5px 0 0; font-size: 12px; background: rgb(222,172,54); background: linear-gradient(0deg, rgba(222,172,54,1) 0%, rgba(229,179,61,1) 25%, rgba(245,195,77,1) 50%, rgba(229,179,61,1) 75%, rgba(222,172,54,1) 100%); border-bottom: 2px solid #333;}

.choix-box { margin-bottom:20px;}
.choixtitre { font-family:'Arial', sans-serif; max-width:320px; text-align:center; color:#203f85; font-size:18px; margin:10px auto 15px;}
#choixservice, #choixtheme { max-width:200px; margin:10px auto;}
#choixprestation { margin:10px 0;}
ul#uloptions { list-style:none; color:#6D071A; margin:0; padding:0;}
ul#uloptions li { font-family:'Arial', sans-serif;  margin:0 0 20px;}
span.nomoption { font-size:12px;}
span.prixoption { color:#203f85; font-weight:bold;}
#res_dateselection { max-width:350px; margin: 0 auto 15px;}
.descOption { color:#333; font-size:12px; padding: 8px; border-radius: 5px; background: rgb(222,172,54); background: linear-gradient(0deg, rgba(222,172,54,1) 0%, rgba(229,179,61,1) 25%, rgba(245,195,77,1) 50%, rgba(229,179,61,1) 75%, rgba(222,172,54,1) 100%); border: 1px solid #333; box-shadow: #cee #cee 1px 2px;}
.ihelp { width:22px; height:22px; display:inline-block; background:url(../images/reservation/ihelp.png) 0 0 no-repeat; vertical-align:middle; margin-left:20px; cursor:pointer; position:relative;}
.help { width:277px; padding:8px 0 0; background:url(../images/reservation/popdescoption_top.png) 0 0 no-repeat; position:absolute; left:-125px; top:25px; display:none; z-index:99;}
.margejaune { padding-left:44px; background:#f5a82c url(../images/reservation/ii.png) 18px 50% no-repeat;}
.descoption { font-family:'Arial', sans-serif;/*OK*/ color:#949494; font-size:11px; }
.help .content { background:#fff; border-right:1px solid #d5d5d5;  border-bottom:1px solid #d5d5d5; padding:10px;}
#choixheure { width:100px;}
#bloc-connexion {}
h1.connexiontitre { font-family:'Arial', sans-serif; font-size:21px; text-align:center; color:#fff; text-transform:uppercase;}
#bloc-connexion .content { color:#fff; text-align:center;}
#box-formconnexion { margin:30px 0 0;}
#box-connexion, #box-inscription { background:#fff; padding:15px;}
.formaddon { min-width:40px;}
#sidentifier, #sincrire { margin-bottom:25px; color:#6D071A;}
.i_sidentifier { font-size:12px; padding:0 0 0 48px; background:url(../images/reservation/isidentifier.png) 0 50% no-repeat;}
.i_sidentifier span { font-family:'Arial', sans-serif; font-size:21px; color:#203f85; text-transform:uppercase;}
.i_sincrire { font-size:14px; padding:0 0 0 48px; background:url(../images/reservation/icreercompte.png) 0 50% no-repeat;}
.i_sincrire span { font-family:'Arial', sans-serif; font-size:21px; color:#203f85; text-transform:uppercase;}
.ckfleft { width:31px; float:left;}
.ckminilabel { font-size:10px; line-height:12px; color:#6D071A;}
.resetpassword { font-size:12px; text-align:right; color:#6D071A;}
#box-ou { min-height:292px; width:65px; background:url(../images/reservation/iou.png) 50% 50% no-repeat;}
.etablissementhistorique { margin-bottom:35px;}
.etablissementhistorique h2.ctitle { margin-bottom:20px;}
.resamessage { font-family:'Arial', sans-serif;/*OK*/ color:#949494; font-size:14px;}
.resamessage .content { /*background:#fff; border-top:1px solid #d5d5d5; border-right:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; padding:10px;*/}
.resamessage .content p { margin:0;}
.margeattention { padding-left:50px;}
.msgerror {color:#fff;  background:url(../images/reservation/error_bg.png) 0 50% no-repeat;}
.msgnotice {color:#fff;  background:url(../images/reservation/notice_bg.png) 0 50% no-repeat;}
.msgwarning {color:#fff;  background:#02af0e url(../images/reservation/warning_bg.png) 0 50% no-repeat;}
.msgsuccess, .bg-success {color:#fff;  background:url(../images/reservation/success_bg.png) 0 50% no-repeat;}
.msgerror, .msgnotice, .msgsuccess, .msgwarning, .bg-success { color:#fff; padding:12px 11px 12px 65px;margin-bottom:1.5em; border: 1px solid #d5d5d5; font-size:13px; line-height:1em;}
.resamessage .mnotice {color:#fff;  background:url(../images/reservation/error_bg.png) 0 50% no-repeat;}
.resamessage .merror {color:#fff;  background:url(../images/reservation/notice_bg.png) 0 50% no-repeat;}
.resamessage .msuccess {color:#fff;  background:url(../images/reservation/success_bg.png) 0 50% no-repeat;}
.msg-error { color:#f00;}

.etape-reservation { /*display: none;*/}

/*Promo*/
#box-promo { padding: 10px; border: 1px solid #203f85; border-radius: 5px; text-align: center;}
#box-promo h3 { color: #203f85; font-size: 20px; font-weight: bold; margin: 0 0 10px; animation-name: 'ZoomZim'; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite;}
.infopromo { font-size: 16px;}
.infopromo span.reduction { font-size: 42px; font-weight: bold; color:#6D071A; }
@keyframes ZoomZim {
    0% { transform: scale(1.1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.5); }
}

/*Confirmation*/
#reservationconfirmation { padding:25px; text-align:center;}
h1.bloctitre { font-family:'Arial', sans-serif; font-size:21px; color:#203f85; text-transform:uppercase; }
#reservationconfirmation h3 { font-family:'Arial', sans-serif; font-size:21px; color:#a662b0; text-transform:uppercase; margin:25px 0 10px;}
#reservationconfirmation p { font-size:20px;}
ul.lisimple { margin:0; padding:0; list-style:none;}
h3.prixtotal { font-family:'Arial', sans-serif; font-size:24px; text-transform:uppercase; margin:25px 0 10px;}
.violet { color:#a662b0;}
.bleu { color:#203f85;}

/*Widget*/
span.lettre { display:inline-block; margin:1px; font-size:18px; color:#fff; padding:3px 3px; background:#496bbb; line-height:18px;}
#newsflash { background:#fff; padding:15px; margin:10px 0;}
.newstitre { color:#203f85; font-size:20px; text-transform:uppercase;}
.newscontent { font-size:15px; color:#111; text-align:center;}

.form-control.error { border:1px solid #ec7063;}

#r_option_choix p { margin:0;}

#choixtheme { width:200px;}

.box-white { background:#fff; padding:20px;}


.loading { background:url(../images/reservation/loader.gif) 50% 50% no-repeat;}
.ajax_output { /*min-height:80px;*/}
/*FOoter*/
#footer { background:#1c1c1c; padding:8px 0; color:#fff;}
#footer a { color:#fff;}
#box-technology {}
#box-technology .text { text-transform:uppercase; padding-left:20px;}
#box-footer { text-align:center; padding:10px 0 0;}
#box-footer p { margin: 0;}
#box-visiteurs { text-align:right; padding:10px 0 0;}
#box-visiteurs .titre { text-transform:uppercase;}
.mx-3 { margin:0 15px;}
.my-3 { margin:15px 0;}
.mt-2 { margin-top:10px;}

.form-group div.error { display:none;}
/*Slider Forfait*/
#sliderforfait {  margin:0 50px 25px;}
.box-slider { background:rgba(0,0,0,0.8);}
.sliderimg img { width: 100%; height: auto;}
.slidertxt { padding:20px;}
.boxpopup { max-width: 998px;}
.box { padding: 15px; margin-bottom: 15px; border: 1px solid #e91701;}
.box p { margin-bottom: 0;}
.bg-noir { background: #111;}
.txt-rouge { color:#e91701;}