body {
overflow-x:hidden
}

.mt-30 {
margin-top:30px
}

.space-div {
margin-bottom:15px
}

.white-bg {
background:#FFF
}

.gris-bg {
background:#F8F8F8
}

.main-bg {
color:#58a0d7
}

.green-bg {
color:#449d44
}

.info-bg {
color:#5bc0de
}

.box-container {
height:auto;
overflow:hidden
}

.outline-btn {
font-size:15px;
padding:8px 20px;
margin:2px 10px;
color:#fff;
background-color:#589FD6;
border:1px solid #fff;
display:inline-block;
outline:0
}

.outline-btn:hover {
color:#FFF
}

.btn-circle {
padding:0;
height:40px;
width:40px;
line-height:40px;
text-align:center;
border-radius:50%;
display:inline-block
}

.btn-xs {
padding:8px 10px;
margin:0;
margin-top:10px;
display:inline-block;
font-size:12px;
border-radius:0
}

.btn-blue {
background:#FFF;
color:#589FD6;
border-color:#589FD6;
display:inline-block
}

.btn-blue:hover {
color:#FFF;
background:#589FD6
}

.toglle-nav {
position:fixed;
z-index:2;
top:100px;
right:0;
background:#58a0d7;
color:#FFF;
padding:8px 20px;
border:none;
outline:none
}

.close-nav {
position:absolute;
left:0;
top:65px;
color:#000;
border:none;
background:transparent;
font-size:25px;
color:#FFF;
outline:none;
background:#58a0d7;
padding:3px 13px
}

.padding-left {
padding-left:20px!important
}

.scroll-of {
height:100vh;
overflow:hidden!important
}

.flex-row {
display:flex
}

.flex-row > div {
display:flex;
flex:1
}

.facebook {
background:#3b5998!important
}

.twitter {
background:#55acee!important
}

.linkedin {
background:#007bb5!important
}

.ou {
display:inline-block;
margin:auto;
text-align:center;
padding:20px 50px;
font-size:18px;
font-weight:600;
position:relative;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
color:#589FD6
}

.ou:before,.ou:after {
content:'';
position:absolute;
background:#589FD6;
height:1px;
width:40px;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
transform:translateY(-50%)
}

.ou:before {
left:0
}

.ou:after {
right:0
}

.banner-top h1 {
color:#589FD6
}

.row.display-flex {
display:flex;
flex-wrap:wrap
}

.row.display-flex > [class*='col-'] {
display:flex;
flex-direction:column
}

.vacol-xs-1,.vacol-xs-2,.vacol-xs-3,.vacol-xs-4,.vacol-xs-5,.vacol-xs-6,.vacol-xs-7,.vacol-xs-8,.vacol-xs-9,.vacol-xs-10,.vacol-xs-11,.vacol-xs-12,.vacol-sm-1,.vacol-sm-2,.vacol-sm-3,.vacol-sm-4,.vacol-sm-5,.vacol-sm-6,.vacol-sm-7,.vacol-sm-8,.vacol-sm-9,.vacol-sm-10,.vacol-sm-11,.vacol-sm-12,.vacol-md-1,.vacol-md-2,.vacol-md-3,.vacol-md-4,.vacol-md-5,.vacol-md-6,.vacol-md-7,.vacol-md-8,.vacol-md-9,.vacol-md-10,.vacol-md-11,.vacol-md-12,.vacol-lg-1,.vacol-lg-2,.vacol-lg-3,.vacol-lg-4,.vacol-lg-5,.vacol-lg-6,.vacol-lg-7,.vacol-lg-8,.vacol-lg-9,.vacol-lg-10,.vacol-lg-11,.vacol-lg-12 {
position:relative;
min-height:1px;
padding-left:15px;
padding-right:15px
}

.varow-xs {
display:table;
width:100%;
table-layout:fixed
}

.vacol-xs-1,.vacol-xs-2,.vacol-xs-3,.vacol-xs-4,.vacol-xs-5,.vacol-xs-6,.vacol-xs-7,.vacol-xs-8,.vacol-xs-9,.vacol-xs-10,.vacol-xs-11,.vacol-xs-12 {
display:table-cell;
vertical-align:middle
}

.vacol-xs-12 {
width:100%
}

.vacol-xs-11 {
width:91.66666667%
}

.vacol-xs-10 {
width:83.33333333%
}

.vacol-xs-9 {
width:75%
}

.vacol-xs-8 {
width:66.66666667%
}

.vacol-xs-7 {
width:58.33333333%
}

.vacol-xs-6 {
width:50%
}

.vacol-xs-5 {
width:41.66666667%
}

.vacol-xs-4 {
width:33.33333333%
}

.vacol-xs-3 {
width:25%
}

.vacol-xs-2 {
width:16.66666667%
}

.vacol-xs-1 {
width:8.33333333%
}

@media screen and (min-width: 768px) {
.varow-sm {
display:table;
width:100%;
table-layout:fixed
}

.vacol-sm-1,.vacol-sm-2,.vacol-sm-3,.vacol-sm-4,.vacol-sm-5,.vacol-sm-6,.vacol-sm-7,.vacol-sm-8,.vacol-sm-9,.vacol-sm-10,.vacol-sm-11,.vacol-sm-12 {
display:table-cell;
vertical-align:middle
}

.vacol-sm-12 {
width:100%
}

.vacol-sm-11 {
width:91.66666667%
}

.vacol-sm-10 {
width:83.33333333%
}

.vacol-sm-9 {
width:75%
}

.vacol-sm-8 {
width:66.66666667%
}

.vacol-sm-7 {
width:58.33333333%
}

.vacol-sm-6 {
width:50%
}

.vacol-sm-5 {
width:41.66666667%
}

.vacol-sm-4 {
width:33.33333333%
}

.vacol-sm-3 {
width:25%
}

.vacol-sm-2 {
width:16.66666667%
}

.vacol-sm-1 {
width:8.33333333%
}
}

@media screen and (min-width: 992px) {
.varow-md {
display:table;
width:100%;
table-layout:fixed
}

.vacol-md-1,.vacol-md-2,.vacol-md-3,.vacol-md-4,.vacol-md-5,.vacol-md-6,.vacol-md-7,.vacol-md-8,.vacol-md-9,.vacol-md-10,.vacol-md-11,.vacol-md-12 {
display:table-cell;
vertical-align:middle
}

.vacol-md-12 {
width:100%
}

.vacol-md-11 {
width:91.66666667%
}

.vacol-md-10 {
width:83.33333333%
}

.vacol-md-9 {
width:75%
}

.vacol-md-8 {
width:66.66666667%
}

.vacol-md-7 {
width:58.33333333%
}

.vacol-md-6 {
width:50%
}

.vacol-md-5 {
width:41.66666667%
}

.vacol-md-4 {
width:33.33333333%
}

.vacol-md-3 {
width:25%
}

.vacol-md-2 {
width:16.66666667%
}

.vacol-md-1 {
width:8.33333333%
}
}

@media screen and (min-width: 1200px) {
.varow-lg {
display:table;
width:100%;
table-layout:fixed
}

.vacol-lg-1,.vacol-lg-2,.vacol-lg-3,.vacol-lg-4,.vacol-lg-5,.vacol-lg-6,.vacol-lg-7,.vacol-lg-8,.vacol-lg-9,.vacol-lg-10,.vacol-lg-11,.vacol-lg-12 {
display:table-cell;
vertical-align:middle
}

.vacol-lg-12 {
width:100%
}

.vacol-lg-11 {
width:91.66666667%
}

.vacol-lg-10 {
width:83.33333333%
}

.vacol-lg-9 {
width:75%
}

.vacol-lg-8 {
width:66.66666667%
}

.vacol-lg-7 {
width:58.33333333%
}

.vacol-lg-6 {
width:50%
}

.vacol-lg-5 {
width:41.66666667%
}

.vacol-lg-4 {
width:33.33333333%
}

.vacol-lg-3 {
width:25%
}

.vacol-lg-2 {
width:16.66666667%
}

.vacol-lg-1 {
width:8.33333333%
}
}

.row-pad-xs {
margin-left:-5px;
margin-right:-5px
}

.row-pad-xs [class^="vacol-"],.row-pad-xs [class*=" vacol-"],.row-pad-xs [class^="col-"],.row-pad-xs [class*=" col-"] {
padding-left:5px;
padding-right:5px
}

.row-pad-xxs {
margin-left:-3px;
margin-right:-3px
}

.row-pad-xxs [class^="vacol-"],.row-pad-xs [class*=" vacol-"],.row-pad-xxs [class^="col-"],.row-pad-xs [class*=" col-"] {
padding-left:3px;
padding-right:3px
}

.row-pad-sm {
margin-left:-10px;
margin-right:-10px
}

.row-pad-sm [class^="vacol-"],.row-pad-sm [class*=" vacol-"],.row-pad-sm [class^="col-"],.row-pad-sm [class*=" col-"] {
padding-left:10px;
padding-right:10px
}

.row-pad-md {
margin-left:-15px;
margin-right:-15px
}

.row-pad-md [class^="vacol-"],.row-pad-md [class*=" vacol-"],.row-pad-md [class^="col-"],.row-pad-md [class*=" col-"] {
padding-left:15px;
padding-right:15px
}

.row-pad-lg {
margin-left:-20px;
margin-right:-20px
}

.row-pad-lg [class^="vacol-"],.row-pad-lg [class*=" vacol-"],.row-pad-lg [class^="col-"],.row-pad-lg [class*=" col-"] {
padding-left:20px;
padding-right:20px
}

.inviter-amis {
background:#F8F8F8
}

.inviter-amis .space-div {
margin-bottom:5px
}

.inviter-amis h1 {
font-size:31px;
color:#589FD6
}

.inviter-amis .banner-top {
height:auto;
overflow:hidden
}

.inviter-amis span {
font-weight:600;
font-size:30px
}

.inviter-amis h2 {
margin-bottom:3px;
line-height:1
}

.inviter-amis img {
height:60px;
width:60px;
display:block;
margin:auto
}

.inviter-amis .envoyez-contacts {
padding:40px 30px;
width:100%
}

.inviter-amis .envoyez-contacts .form-emails {
height:auto;
overflow:hidden;
margin-top:15px;
padding:30px 0
}

.inviter-amis .envoyez-contacts .form-emails label {
margin:0;
display:inline-block;
vertical-align:middle;
margin-top:10px;
font-size:15px
}

.inviter-amis .envoyez-contacts .form-emails input {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
border-radius:0;
height:45px
}

.inviter-amis .envoyez-contacts .form-emails button {
margin-top:10px
}

.inviter-amis .partager {
padding:40px 30px;
width:100%
}

.inviter-amis .partager h2 {
margin-bottom:20px
}

.inviter-amis .partager p {
line-height:1.6;
text-align:justify
}

.inviter-amis .partager ul {
margin-top:40px
}

.inviter-amis .partager ul li a i {
display:inline-block;
margin-right:5px;
margin-top:-5px;
vertical-align:middle
}

section.inviter-amis .banner-top .info-points h6 {
line-height:1.3;
margin-bottom:10px
}

section.inviter-amis .banner-top .info-points ul li {
margin-bottom:9px
}

section.inviter-amis .banner-top .info-points ul li a {
padding:0;
width:120px;
height:32px;
line-height:32px;
text-align:center
}

@media(max-width:767px) {
.inviter-amis .envoyez-contacts .form-emails label {
margin-bottom:10px
}
}

section.mes-parrainages {
padding:0;
background:#F8F8F8
}

section.mes-parrainages .banner-top {
margin-bottom:5px
}

section.mes-parrainages .banner-top h1 {
font-size:31px;
color:#589FD6
}

section.mes-parrainages .item {
height:auto;
overflow:hidden;
margin-bottom:5px;
background:#FFF;
padding:22px 15px
}

section.mes-parrainages .item h5 {
margin:0;
font-size:20px;
line-height:1
}

section.mes-parrainages .item span {
color:#999;
font-size:13px;
margin:0
}

section.mes-parrainages .item h2 {
margin:0;
font-size:35px;
font-weight:600;
color:#589FD6;
line-height:1;
margin-bottom:5px
}

section.mes-parrainages .item h6 {
font-size:15px;
margin:0;
color:#589FD6;
line-height:1
}

section.inviter-amis .banner-top,section.mes-reservations .banner-top {
padding-right:200px;
position:relative;
height:auto;
overflow:hidden;
padding-left:40px;
padding-top:40px;
margin-bottom:5px
}

section.mes-reservations .banner-top h1 {
margin-bottom:28px
}

section.mes-reservations .banner-top a {
margin-top:30px
}

section.inviter-amis .banner-top .info-points,section.mes-reservations .banner-top .info-points {
position:absolute;
right:0;
height:100%;
width:200px;
top:0;
color:#FFF;
text-align:center
}

section.mes-reservations .banner-top ul li {
padding-left:19px;
position:relative;
font-size:15px;
margin-bottom:8px
}

section.mes-reservations .banner-top ul li i {
position:absolute;
left:0;
top:2px;
color:#589FD6;
font-size:18px
}

section.inviter-amis .info-points > div,section.mes-reservations .banner-top .info-points > div {
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
transform:translateY(-50%)
}

section.inviter-amis .info-points > div h6,section.mes-reservations .banner-top .info-points > div h6 {
margin:0;
margin-bottom:5px;
color:#FFF;
font-size:18px
}

section.inviter-amis .info-points > div h2,section.mes-reservations .banner-top .info-points > div h2 {
margin:0;
margin-bottom:5px;
color:#FFF;
font-size:35px;
font-weight:600
}

section.mes-reservations .items {
height:auto;
overflow:hidden
}

section.mes-reservations .item {
padding:40px 15px;
height:auto;
overflow:hidden;
margin-bottom:5px
}

section.mes-reservations .item h5 {
margin:0;
font-size:20px;
line-height:1
}

section.mes-reservations .item span {
color:#999;
font-size:13px;
margin:0
}

section.mes-reservations .item span.etat {
color:#FFF;
padding:5px 7px;
background:#7dac4a;
display:inline-block;
margin-top:7px;
border-radius:2px
}

section.mes-reservations .item h2 {
margin:0;
font-size:50px;
font-weight:600;
color:#589FD6;
line-height:1;
margin-bottom:5px
}

section.mes-reservations .item h6 {
font-size:15px;
margin:0;
color:#589FD6;
line-height:1
}

@media(max-width:991px) {
section.mes-reservations .banner-top {
padding:0
}

section.mes-reservations .banner-top .info-points {
position:relative;
display:block;
width:100%;
top:auto;
clear:both;
height:220px
}
}

@media(max-width:767px) {
section.mes-reservations .item img {
display:inline-block;
margin:auto
}

section.mes-reservations .item h5 {
margin-top:14px;
margin-bottom:5px
}

section.mes-reservations .item h2 {
margin-top:8px
}
}

@media(max-width:480px) {
.center-xs {
text-align:center
}

.reservation .choix-references label {
width:145px!important
}

.reservation .choix-references .check-content {
padding:30px 0!important
}

.reservation .choix-references .check-content h5 {
font-size:13px!important
}

.reservation .choix-engagement .item label {
width:148px!important;
padding:18px 0!important;
margin-bottom:22px!important
}
}

section.espace-client {
height:auto;
padding:40px 0 0
}

.page-content {
width:100%;
padding-right:300px;
position:relative;
overflow:hidden;
min-height:770px
}

.page-content .page-title {
padding:17px 30px;
margin-bottom:5px
}

.page-content .page-title h3 {
margin:11px 0 0;
line-height:1;
color:#282828;
font-weight:500;
font-size:17px
}

.page-content .page-title p {
font-size:14px
}

.page-content .page-navbar h2 {
font-weight:600;
font-size:30px;
color:#58a1d9;
margin:0;
line-height:1
}

.page-content .page-navbar.on {
z-index:99;
width:100%;
position:fixed;
-webkit-transform:translateX(-380px);
-ms-transform:translateX(-380px);
transform:translateX(-380px);
-webkit-transform:translateX(-380px) tranlateZ(0);
-ms-transform:translateX(-380px) tranlateZ(0);
transform:translateX(-380px) tranlateZ(0);
-webkit-transform:translate3d(-380px,0,0);
transform:translate3d(-380px,0,0);
transition:all .6s
}

.page-content .page-title a {
margin:0
}

.page-content .content {
height:100%;
max-height:100%
}

.page-content .page-navbar {
width:295px;
position:absolute;
right:0;
top:0;
height:100%
}

.page-content .page-navbar ul li {
margin-bottom:5px
}

.page-content .page-navbar .info-pero {
padding:60px 0 0
}

.page-content .page-navbar .info-pero .btn-modifier {
position:absolute;
top:14px;
right:16px
}

.page-content .page-navbar .info-pero img {
height:170px;
width:170px
}

.page-content .page-navbar .info-pero h3 {
font-weight:400
}

.page-content .page-navbar ul.social-media {
margin-top:20px
}

.page-content .page-navbar ul.social-media li {
margin:0
}

.page-content .page-navbar ul.social-media li a {
margin:0
}

.page-content .page-navbar ul.social-media li a i {
font-size:17px
}

.page-content .page-navbar .code-parrainage {
padding:30px 0 0
}

.page-content .page-navbar .code-parrainage h3 {
line-height:1;
margin:0;
margin-bottom:14px;
font-weight:500
}

.page-content .page-navbar .points {
padding:20px 0 0
}

.page-content .page-navbar .points h3 {
margin:0;
line-height:1;
margin-bottom:7px;
font-weight:500
}

.espace-menu ul {
margin-top:20px
}

.espace-menu ul li {
background:#589FD6
}

.espace-menu ul li a {
color:#FFF;
display:block;
padding:12px 0
}

@media(max-width:991px) {
.page-content .page-title a {
margin-top:8px
}

.seances .item .date {
width:130px;
margin:auto
}
}

@media(max-width:767px) {
.page-content .page-navbar {
width:380px;
height:100%;
background:#fff;
padding:35px 45px;
position:fixed;
top:0;
right:-380px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0);
-webkit-transform:translateX(0) translateZ(0);
transform:translateX(0) translateZ(0);
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:all .3s cubic-bezier(0.32,1.25,0.375,1.15);
transition:all .3s cubic-bezier(0.32,1.25,0.375,1.15);
z-index:10000;
transition:all .6s
}

.page-content .page-navbar .info-pero .btn-modifier {
top:55px
}
}

.seances .item img {
display:block;
margin:auto;
height:90px;
width:90px;
margin-top:12px;
margin-bottom:10px
}

.seances .item {
background:#FFF;
padding:30px 15px;
margin-bottom:5px;
position:relative
}

.seances .item .etat-demande {
position:absolute;
top:9px;
right:13px;
height:30px;
line-height:30px;
width:110px;
font-size:15px;
text-align:right
}

.seances .item .date {
border:2px solid #58a0d7
}

.seances .item .date span {
display:block;
color:#FFF;
text-align:center;
height:50%;
padding:18px 0;
line-height:1
}

.seances .item .date span.sp-date {
background:#58a0d7;
position:relative
}

.seances .item .date span.sp-date:after {
content:"";
position:absolute;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
border-top:10px solid transparent;
border-bottom:10px solid #FFF;
border-left:7px solid transparent;
border-right:7px solid transparent
}

.seances .item h3 {
color:#2d3035;
font-size:19px;
margin:0;
margin-bottom:5px;
font-weight:600;
line-height:1
}

.seances .item span.nom {
color:#757779
}

.seances .item .date span.heure {
color:#58a0d7
}

.seances .item ul + ul {
margin-top:10px
}

.seances .item ul li h3 {
font-size:21px
}

.seances .item ul li h3 i {
font-size:18px
}

.seances .item ul li h6 {
line-height:1;
margin:0;
margin-bottom:5px;
margin-top:5px;
color:#57a1d8;
font-size:20px;
margin-top:10px;
font-weight:600
}

.seances .item ul li span {
color:#2d3035;
font-size:14px
}

.seances .item ul li span i {
color:#57a1d8;
margin-right:5px;
font-size:17px
}

.seances .item .evoluer a {
margin:0;
padding:8px 18px
}

.seances .item .evoluer a i {
margin-right:5px
}

.seances .item .evoluer span {
display:block;
margin-top:15px;
color:#7ac73b;
font-size:14px
}

.seances .item .evoluer span i {
font-size:16px;
margin-right:5px
}

.seances .item .note i {
font-size:19px;
color:#57a1d8
}

.seances .item .note span {
display:block;
color:#7ac73b;
font-size:14px
}

.seances .item .note span i {
font-size:16px;
margin-right:5px;
color:#7ac73b
}

@media(max-width:1024px) {
.page-content .page-navbar {
right:-380px
}

.page-content {
padding-right:0
}
}

@media(max-width:761px) {
.seances .item h3 {
margin-top:10px
}

.seances .item ul li a {
margin-top:10px
}
}

.reservation {
padding:20px 0
}

.reservation h2 {
line-height:1;
margin-bottom:30px;
color:#212121;
font-size:20px
}

.reservation p {
margin-bottom:25px
}

.reservation .reservation-reguliere-aside p {
margin-bottom:15px;
font-family:"Montserrat",Arial,sans-serif;
font-size:13px
}

#account-overview-container p {
margin-bottom:0;
font-size:14px
}

.reservation .choix-references label {
width:160px;
height:56px;
border-radius:8px
}

.reservation .choix-references .ui-button .ui-icon {
display:none
}

.reservation .choix-references .check-content {
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
transform:translateY(-50%);
padding:30px 15px
}

.reservation .choix-references .check-content h5 {
margin:0;
line-height:1.4;
font-size:15px;
color:#656565
}

.reservation .choix-references .item:hover .check-content h5 {
color:#58a0d7;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
transition:all 200ms ease
}

.reservation .choix-engagement .item {
position:relative
}

.reservation .choix-engagement .item > span {
position:absolute;
top:-10px;
left:0;
right:0;
margin:0 auto;
font-size:11px;
background:#ffa000;
color:#fff;
display:block;
z-index:99;
height:18px;
width:104px;
text-align:center;
line-height:18px;
border-radius:17%
}

.reservation .choix-engagement .item label {
text-align:center;
padding:18px 8px;
width:160px;
border-radius:8px
}

.reservation .choix-engagement .ui-checkboxradio-label .ui-icon-background {
display:none;
margin-top:0
}

.reservation .choix-engagement h5 {
font-size:15px;
margin:0;
display:inline-block;
color:#b7b7b7;
font-weight:600
}

.reservation .choix-engagement h6 {
margin:0;
font-size:14px;
color:#b7b7b7
}

.reservation .creneaux-horraire label {
text-align:center;
width:100%;
width:350px;
max-width:100%;
padding:5px 7px;
border-radius:6px;
border-width:1px
}

.reservation .creneaux-horraire h2 {
margin-bottom:15px
}

.reservation .creneaux-horraire label .input {
display:block;
text-align:right;
float:right
}

.reservation .creneaux-horraire label input {
display:inline-block;
width:100px;
margin-right:0
}

.reservation .creneaux-horraire .ui-icon-background {
margin-top:4px;
display:none
}

.reservation .creneaux-horraire h5 {
font-size:16px;
margin:0;
display:inline-block;
color:#b7b7b7;
margin-top:4px;
vertical-align:middle
}

.reservation .creneaux-horraire ul li {
margin-bottom:8px;
width:12.35%;
float:left;
margin-right:5px
}

@media(max-width:480px) {
.reservation .creneaux-horraire ul li {
width:100%;
float:right
}

.reservation .creneaux-horraire label {
width:100%!important
}
}

.reservation .finaliser-reservation textarea,.reservation .finaliser-reservation input {
color:#000;
border-color:#cecdcd;
border-radius:0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none
}

.reservation .finaliser-reservation textarea:focus,.reservation .finaliser-reservation input:focus {
border-color:#66afe9;
outline:0;
-webkit-box-shadow:inset 0 1px 1px #00000013 0 0 8px #66afe999;
box-shadow:inset 0 1px 1px #00000013 0 0 8px #66afe999
}

.reservation .finaliser-reservation textarea {
height:118px;
resize:none;
padding-top:15px
}

.reservation .finaliser-reservation input {
height:50px
}

.reservation .votre-reservation .panel-default {
border-radius:0
}

.reservation .votre-reservation .panel-heading {
background:#053548;
color:#FFF;
font-size:21px;
padding-top:20px;
padding-bottom:20px;
font-weight:600;
border-radius:0
}

.reservation .votre-reservation .panel-body h3 {
margin-top:0;
line-height:1;
margin-bottom:30px;
font-size:18px
}

.reservation .votre-reservation .panel-body ul li {
margin-bottom:8px;
border-bottom:1px solid #e6e6e6;
padding-bottom:15px;
padding-top:10px
}

.reservation .votre-reservation .panel-body ul li input {
margin-top:8px;
border-radius:0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none
}

.reservation .votre-reservation .panel-body ul li i {
margin-right:5px
}

.reservation .votre-reservation .panel-body span {
display:block;
font-size:25px;
color:#146530;
margin-top:15px;
margin-bottom:7px
}

.update-reservation {
padding:35px 15px;
height:auto;
overflow:hidden
}

.update-reservation .profil {
margin-top:-15px
}

.update-reservation .profil img {
display:inline-block
}

.update-reservation .profil h3 {
line-height:1;
margin:10px 0
}

.update-reservation .profil i {
font-size:18px;
color:#faa823
}

.profil ul li {
margin-bottom:5px;
color:#121212;
font-size:14px
}

.update-reservation .techicien select {
max-width:60%;
margin-top:10px;
margin-bottom:17px
}

.info-technicien ul {
margin-bottom:20px;
margin-top:10px
}

.info-technicien ul li {
margin-bottom:7px;
color:#555;
font-size:14px
}

.info-technicien ul li span {
color:#121212;
font-weight:600
}

.info-technicien .outline-btn {
margin-bottom:20px
}

@media(max-width:480px) {
.update-reservation {
padding:35px 10px
}

.update-reservation .techicien select {
width:100%;
max-width:100%
}

.panel-body {
padding:25px 10px 10px
}
}

.ui-checkboxradio-label .ui-icon-background {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
border-radius:50%
}

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button {
border-color:#656565;
background:#FFF;
border-radius:0
}

.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus {
border-color:#57a1d8;
color:#57a1d8;
background:#FFF;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
transition:all 200ms ease
}

.ui-button.ui-state-disabled:hover,.ui-button:hover,.ui-button:focus {
border-color:#57a1d8;
background:#FFF;
color:#57a1d8;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
transition:all 200ms ease;
outline:none
}

.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon {
background:none
}

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active {
border-color:#57a1d8!important;
background:#57a1d8!important;
color:#FFF!important;
outline:none;
background:none;
border-width:2px
}

.ui-icon-check {
border-color:#FFF!important;
background:#FFF
}

.ui-icon-check:after,.ui-icon-check:before {
background:#FFF!important
}

.ui-state-active h6,.ui-widget-content .ui-state-active h6,.ui-widget-header .ui-state-active h5,a.ui-button:active h6,.ui-button:active h6,.ui-state-active h5,.ui-widget-content .ui-state-active h5,.ui-widget-header .ui-state-active h5,a.ui-button:active h5,.ui-button:active h5 {
color:#FFF!important
}

.ui-checkboxradio-label .ui-icon-background {
width:30px;
height:30px;
position:relative;
border:1px solid #cecdcd
}

.ui-checkboxradio-label .ui-icon-background:before {
content:'';
position:absolute;
left:15px;
top:7px;
width:2px;
height:15px;
background:#cecdcd;
transform:rotate(220deg)
}

.ui-checkboxradio-label .ui-icon-background:after {
content:'';
position:absolute;
left:8px;
top:12px;
width:2px;
height:8px;
background:#cecdcd;
transform:rotate(-39deg)
}

.ui-checkboxradio-label .ui-icon-background {
margin-top:20px
}

.ui-button .ui-icon {
background:none;
position:relative
}

.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon {
border-color:#57a1d8
}

.ui-checkboxradio-label:hover .ui-icon-background:after,.ui-button:focus .ui-checkboxradio-label:focus .ui-icon-background:after,.ui-checkboxradio-label:hover .ui-icon-background:before,.ui-button:focus .ui-checkboxradio-label:focus .ui-icon-background:before {
background:#57a1d8;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
transition:all 200ms ease
}

section.espace-client .ui-checkboxradio-icon-space {
display:none
}

section.espace-client .reservation {
padding:0 0 30px
}

section.espace-client .finaliser-reservation {
margin-top:70px
}

section.espace-client .finaliser-reservation p {
text-align:justify;
margin-bottom:15px
}

section.espace-client .panel-heading {
background:#58a1d9;
color:#FFF;
border-radius:0
}

section.espace-client .panel-heading:focus {
color:#FFF
}

section.espace-client .panel {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none
}

section.fiche-technicien .technicien-image {
padding:40px 0
}

section.fiche-technicien .technicien-image img {
max-width:100%;
height:150px;
width:150px;
display:block;
margin:auto
}

section.fiche-technicien .technicien-image h6 {
line-height:1;
margin:15px 0 6px;
font-size:21px;
color:#000
}

section.fiche-technicien .technicien-image span {
display:inline-block;
font-size:14px;
color:#2b2929
}

section.fiche-technicien .technicien-information {
padding:40px 0
}

section.fiche-technicien .technicien-information h3 {
font-size:25px;
margin:5px 0 15px
}

section.fiche-technicien .technicien-information i {
display:inline-block;
margin-top:5px;
color:#faa823
}

section.fiche-technicien .technicien-information ul li {
margin-bottom:8px
}

section.fiche-technicien .technicien-information ul li i {
color:#645555;
margin-right:3px
}

section.fiche-technicien .technicien-information ul li address {
margin-bottom:0;
color:#645555
}

section.fiche-technicien .technicien-information h4 {
font-size:37px;
line-height:1px;
margin:45px 0 15px;
color:#58a1d9;
font-weight:600
}

section.fiche-technicien .technicien-information h4 + span {
color:#58a1d9
}

section.fiche-technicien .evaluations {
padding-bottom:30px;
height:auto;
overflow:hidden
}

section.fiche-technicien .evaluations h2 {
line-height:1;
margin:23px 0
}

section.fiche-technicien .evaluations .item {
position:relative;
height:auto;
overflow:hidden;
padding:31px 20px;
margin-bottom:5px
}

section.fiche-technicien .evaluations .item img {
width:90px;
height:90px;
display:block;
margin:auto
}

section.fiche-technicien .evaluations .item h4 {
font-size:17px
}

section.fiche-technicien .evaluations .vote,section.fiche-technicien .evaluations .date {
position:absolute
}

section.fiche-technicien .evaluations .vote {
top:0;
right:10px
}

section.fiche-technicien .evaluations .vote i {
color:#faa823
}

section.fiche-technicien .evaluations .date {
bottom:0;
right:10px
}

section.fiche-technicien .evaluations .description {
padding:30px 0;
position:relative
}

section.cadeaux {
height:auto;
overflow:hidden;
background:#F8F8F8;
padding:0 0 40px
}

section.cadeaux .item {
background:#FFF;
margin-bottom:5px;
position:relative;
padding:50px 0
}

section.cadeaux .item .vote {
position:absolute;
top:27px;
right:23px
}

section.cadeaux .item h3 {
font-size:35px;
line-height:1px;
margin:0 0 25px
}

section.cadeaux h2 {
font-size:30px;
line-height:1;
margin:30px 0;
font-weight:600
}

section.cadeaux .list-cadeaux .cadeau {
background:#FFF;
padding:25px 20px 38px;
margin-bottom:10px;
border:1px solid #F5F5F5
}

section.cadeaux .list-cadeaux .cadeau a.outline-btn {
font-size:13px;
padding:12px 10px;
margin:0;
color:#FFF;
margin-top:10px
}

section.cadeaux .list-cadeaux .cadeau:hover {
border-color:#ccc;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
transition:all 200ms ease
}

section.cadeaux .list-cadeaux .cadeau img {
width:140px;
height:140px;
display:block;
margin:auto
}

section.cadeaux .list-cadeaux .cadeau a {
color:#645555
}

section.cadeaux .list-cadeaux .cadeau h5 {
line-height:1;
margin:20px 0;
color:#121212;
font-weight:600
}

section.cadeaux .list-cadeaux .cadeau h6 {
line-height:1px;
margin:20px 0;
font-size:15px
}

section.cadeaux .list-cadeaux .cadeau span {
display:block
}

section.cadeaux .list-cadeaux .cadeau span.etat {
font-size:14.5px;
color:#589FD6
}

section.cadeaux .list-cadeaux .cadeau h3 {
font-size:40px;
line-height:1px;
margin:20px 0
}

section.cadeaux .list-cadeaux .cadeau ul li {
font-size:14.5px;
margin-bottom:5px
}

section.formulaire-client .box-container {
padding:40px 20px 80px
}

section.formulaire-client input[type="text"],section.formulaire-client input[type="email"],section.formulaire-client select,section.formulaire-client input[type="password"] {
border-radius:0;
outline:none;
box-shadow:none;
height:50px
}

section.formulaire-client span {
font-size:13px;
margin-left:5px
}

section.formulaire-client button {
margin-top:20px
}

section.temoignages .item img {
display:inline-block
}

section.temoignages .item h5 {
font-size:18px;
font-weight:600;
color:#121212;
margin-top:7px;
margin-bottom:15px
}

.row.display-flex {
display:flex;
flex-wrap:wrap
}

.row.display-flex > [class*='col-'] {
display:flex;
flex-direction:column
}

.dropify-wrapper:after {
content:'Changer votre photo';
position:absolute;
bottom:0;
width:100%;
background:#000000b3;
left:0;
padding:7px 0;
color:#FFF
}

.dropify-message p {
font-size:14px
}

.keywords {
margin-bottom:25px
}

.keywords li {
background:#79b5e2;
color:#FFF;
padding:5px 7px;
font-size:13px;
border-radius:2px
}

.panel-title a:focus,.panel-title a:hover {
color:#FFF
}

.temoignages-modale h3 {
margin-bottom:4px;
font-size:17px
}

.temoignages-modale textarea {
border-radius:0;
box-shadow:none;
resize:none;
min-height:130px
}

div.stars {
display:inline-block
}

input.star {
display:none
}

label.star {
font:normal normal normal 14px/1 FontAwesome;
float:right;
padding:2px;
color:#cecece;
transition:all .2s;
font-size:17px
}

input.star:checked ~ label.star:before {
content:'\f005';
color:#f4cc3f;
transition:all .25s
}

input.star-5:checked ~ label.star:before {
color:#F62
}

input.star-1:checked ~ label.star:before {
color:#FE7;
text-shadow:0 0 20px #952
}

label.star:hover {
transform:rotate(-15deg) scale(1.3);
cursor:pointer
}

label.star:before {
content:'\f006';
font-family:FontAwesome
}

@media(min-width:761px) {
.modal-dialog {
margin-top:130px
}
}

.panel-title a {
position:relative
}

.panel:last-child .panel-heading.active {
border-radius:0;
transition:border-radius linear 0s
}

.panel-heading a:before {
position:absolute;
font-family:'FontAwesome';
right:5px;
top:2px;
font-size:24px;
transition:all .5s;
transform:scale(1)
}

.panel-heading.active a:before {
content:' ';
transition:all .5s;
transform:scale(0)
}

#bs-collapse .panel-heading a:after {
content:' ';
font-size:24px;
position:absolute;
font-family:'FontAwesome';
right:5px;
top:5px;
transform:scale(0);
transition:all .5s
}

#bs-collapse .panel-heading.active a:after {
content:'\f106';
transform:scale(1);
transition:all .5s
}

.ui-selectmenu-button.ui-button {
width:118px;
border-radius:5px;
font-size:12px;
text-align:center
}

.input {
display:none
}

.btn-sm {
display:inline-block;
width:auto;
padding:10px 40px;
margin-top:20px
}

.step-number {
background:#58a0d7;
border-radius:50%;
width:35px;
height:35px;
display:inline-block;
line-height:35px;
text-align:center;
color:#FFF;
margin-right:6px
}

@media(max-width:480px) {
.service-bg {
padding:0 0 60px
}

.reservation {
padding:20px 0
}
}

.affix {
top:10px;
z-index:9
}

.affix + .container {
padding-top:70px
}

#account-overview-container.affix {
position:fixed;
top:50px
}

.affix-top {
position:static
}

.affix-bottom {
position:absolute;
bottom:auto!important
}

.res-recap .title {
font-size:15px
}

.espace-client .page-content {
min-height:915px!important
}

.rr-caution {
margin-top:-14px
}

.ui-menu .ui-menu-item-wrapper {
font-size:12px
}

#map-client {
height:300px;
width:100%;
margin-bottom:20px;
margin-top:10px
}

.map-p {
text-align:center;
width:100%;
font-family:"Montserrat",Arial,sans-serif;
font-size:13px;
line-height:1.2
}

.reservation .creneaux-horraire label:focus {
outline:none
}

#ui-datepicker-div {
z-index:99999!important
}

.reservation-faq .panel-default {
border:none
}

.reservation-faq .panel-default >.panel-heading {
background:transparent
}

.reservation-faq .panel-default >.panel-heading a:before {
content:'\f0da';
position:absolute;
font-family:'FontAwesome';
left:-9px;
top:9px;
transform:translateY(-50%);
font-size:16px
}

.reservation-faq .panel-default >.panel-heading .panel-title {
color:#000;
font-family:"Montserrat",Arial,sans-serif;
font-size:12px
}

.reservation-faq .panel-default >.panel-heading .panel-title a:focus,.panel-title a:hover {
color:#000
}

.user_container_social a {
text-decoration:none;
display:block;
width:100%;
height:46px;
border:medium none;
padding-left:60px;
font-family:"Raleway",sans-serif;
font-size:16px;
font-weight:100;
position:relative;
margin-bottom:15px;
color:#fff
}

.user_container_social a i {
position:absolute;
left:0;
width:60px;
height:46px;
top:0;
line-height:46px!important;
font-size:27px
}

.user_container_social a div {
padding-top:12px
}

.btn_face {
background-color:#3B5998
}

.btn_face i {
background:#355089 none repeat scroll 0 0;
border-right:1px solid #2D4474
}

.user_container_social a div {
padding-top:12px;
font-size:14px;
padding-right:10px;
padding-left:10px
}

.btn_google {
background:#dd4b39
}

.btn_google i {
background:#c53c2b
}

.user_container_social a i {
text-align:center
}

.chat-thread::-webkit-scrollbar {
width:10px
}

.chat-thread::-webkit-scrollbar-track {
border-radius:10px;
background-color:#1993931a
}

.chat-thread::-webkit-scrollbar-thumb {
border-radius:10px;
background-color:#19939333
}

.chat-thread {
margin:24px auto 0;
padding:0 20px 0 0;
list-style:none;
overflow-y:scroll;
overflow-x:hidden
}

.chat-thread li {
position:relative;
clear:both;
display:inline-block;
padding:16px 40px 16px 25px;
margin:0 0 20px;
font-size:14px;
border-radius:10px;
background-color:#19939333
}

.chat-thread li:before {
position:absolute;
top:0;
width:50px;
height:50px;
border-radius:50px;
content:''
}

.chat-thread li:after {
position:absolute;
top:15px;
content:'';
width:0;
height:0;
border-top:15px solid #19939333
}

.chat-thread li.client {
animation:show-chat-odd .15s 1 ease-in;
-moz-animation:show-chat-odd .15s 1 ease-in;
-webkit-animation:show-chat-odd .15s 1 ease-in;
float:right;
margin-right:80px;
color:#645555
}

.chat-thread li.client .date {
font-size:9px;
position:absolute;
bottom:-14px;
left:10px
}

.chat-thread li.client:before {
right:-80px;
background-size:50px;
background-repeat:no-repeat
}

.chat-thread li.client:after {
border-right:15px solid transparent;
right:-15px
}

.chat-thread li.admin {
animation:show-chat-even .15s 1 ease-in;
-moz-animation:show-chat-even .15s 1 ease-in;
-webkit-animation:show-chat-even .15s 1 ease-in;
float:left;
margin-left:80px;
color:#645555
}

.chat-thread li.admin .date {
font-size:9px;
position:absolute;
bottom:-14px;
right:10px
}

.chat-thread li.admin:before {
left:-80px;
background-image:url(../img/ticket-icon-admin.png);
background-size:50px;
background-repeat:no-repeat
}

.chat-thread li.admin:after {
border-left:15px solid transparent;
left:-15px
}

.chat-window {
position:fixed;
bottom:18px
}

.chat-window-message {
width:100%;
height:48px;
font:32px/48px 'Noto Sans',sans-serif;
background:none;
color:#0AD5C1;
border:0;
border-bottom:1px solid #19939333;
outline:none
}

@media all and (max-width: 767px) {
.chat-thread {
width:100%;
height:260px
}

.chat-window {
left:5%;
width:90%
}
}

@media all and (min-width: 768px) {
.chat-thread {
width:100%;
height:350px
}

.chat-window {
left:25%;
width:50%
}
}

@keyframes show-chat-even {
0% {
margin-left:-480px
}

100% {
margin-left:0
}
}

@-moz-keyframes show-chat-even {
0% {
margin-left:-480px
}

100% {
margin-left:0
}
}

@-webkit-keyframes show-chat-even {
0% {
margin-left:-480px
}

100% {
margin-left:0
}
}

@keyframes show-chat-odd {
0% {
margin-right:-480px
}

100% {
margin-right:0
}
}

@-moz-keyframes show-chat-odd {
0% {
margin-right:-480px
}

100% {
margin-right:0
}
}

@-webkit-keyframes show-chat-odd {
0% {
margin-right:-480px
}

100% {
margin-right:0
}
}


.choix-references .item:hover .check-content h5{
    color: #58a0d7;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    transition: all 200ms ease;
  }
  .choix-engagement .item{
    position: relative;
  }
  .choix-engagement .item > span{
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgb(16, 54, 85);
    color: #fff;
    display: block;
    z-index: 99;
    height: 18px;
    width: 104px;
    text-align: center;
    line-height: 19px;
    border-radius: 20px;
    font-size: .65rem;
  }
  
  .choix-engagement .item label{
   /*width: 199px;*/
   text-align: center;
   padding: 18px 8px;
   width: 160px;
   border-radius: 8px;
   box-shadow: none !important;
   background: #f9f9f9;
   border: 1px solid #e4e4e4;
   background: #f9f9f9;
  }
  .choix-engagement .ui-checkboxradio-label .ui-icon-background{
    display: none;
  }
  .choix-engagement .ui-checkboxradio-label .ui-icon-background{
    margin-top: 0px;
  }
  .choix-engagement h5{
    font-size: 15px;
    margin: 0;
    display: inline-block;
    color: #b7b7b7;
    font-weight: 600;
  }
  .choix-engagement h6{
    margin: 0px;
    font-size: 13px;
    color:  #b7b7b7;
    padding-top: 8px;
  }
  .creneaux-horraire label{
    text-align: center;
    width: 100%;
    width: 350px;
    max-width: 100%;
    padding: 5px 7px;
    border-radius: 6px;
    border-width:1px;
  }
  .creneaux-horraire h2{
    margin-bottom: 15px;
  }
  .creneaux-horraire .ui-state-active,
  .creneaux-horraire .ui-widget-content .ui-state-active, 
  .creneaux-horraire .ui-widget-header .ui-state-active, 
  .creneaux-horraire a.ui-button:active,
  .creneaux-horraire .ui-button:active{
  
  }
  .creneaux-horraire label .input{
    display: block;
    text-align: right;
    float: right;
  }
  .creneaux-horraire label input{
    display: inline-block;
    width: 100px;
    margin-right: 0px;
  }
  .creneaux-horraire .ui-icon-background{
    margin-top: 4px;
    display:none;
  }
  .creneaux-horraire h5{
    font-size: 16px;
    margin: 0;
    display: inline-block;
    color: #b7b7b7;
    margin-top: 4px;
    vertical-align: middle;
  }
  .creneaux-horraire ul li{
    margin-bottom: 8px;
    width: 13.35%;
    float: left;
    margin-right: 5px;
  }
  @media(max-width:480px){
     .creneaux-horraire ul li{
        width: 100%;
        float:right;
    }
  .creneaux-horraire label {
    width: 100% !important;
  }
  }

/* Styles pour l'affichage en défilement horizontal */

/* Section principale */
#techniciens-section {
  border-radius: 8px;
  margin: 20px 0;
}

#techniciens-section h2 {
  color: #2c3e50;
  font-size: 24px;
  text-align: center;
  margin-bottom: 0px;
  font-weight: 600;
}

.previous-sessions-note {
  color: #7f8c8d;
  text-align: center;
  font-size: 12px;
  margin-bottom: 20px;
  margin-top: 0;
  font-style: italic;
}

/* Conteneur avec défilement horizontal */
#techniciens-scroll-container {
  overflow-x: auto;
  padding: 10px 0;
  margin: 0 -20px;
  padding: 10px 20px;
  -webkit-overflow-scrolling: touch; /* Pour un défilement fluide sur iOS */
  scrollbar-width: thin; /* Pour Firefox */
  scrollbar-color: #333 #f0f0f0; /* Pour Firefox */
}

/* Personnalisation de la scrollbar pour Chrome, Edge, Safari */
#techniciens-scroll-container::-webkit-scrollbar {
  height: 8px;
}

#techniciens-scroll-container::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
}

#techniciens-scroll-container::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}

#techniciens-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #2980b9;
}

/* Zone de contenu qui sera scrollable */
.techniciens-scroll {
  display: flex;
  gap: 20px;
  padding: 10px 5px;
}

/* Styles pour les cartes de techniciens */
.technicien-item {
  flex: 0 0 140px; /* Largeur fixe, ne pas rétrécir */
  max-width: 140px;
}

.technicien-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid transparent;
}

.technicien-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.technicien-image {
  height: 0;
  padding-bottom: 100%; /* Rend l'élément parfaitement carré */
  overflow: hidden;
  position: relative;
  background-position: center 30%; /* Focus sur le visage */
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.5s ease;
}

.technicien-card:hover .technicien-image {
  background-size: 110% auto; /* Zoom sur l'image au survol */
}

.technicien-info {
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.technicien-info h3 {
  margin: 0 0 0px 0;
  color: #2c3e50;
  font-size: 13px !important;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.technicien-stars {
  color: #f1c40f;
  margin-bottom: 12px;
}

.technicien-info p {
  margin: 0px 0;
  color: #7f8c8d;
  font-size: 12px;
}

.technicien-info p i {
  margin-right: 2px;
}

.technicien-select {
  margin-top: auto;
  display: block;
  cursor: pointer;
  background-color: #333;
  color: white;
  padding: 10px;
  font-size: 11px;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 15px;
}

.technicien-select:hover {
  background-color: #2980b9;
}

.technicien-select input[type="radio"] {
  display: none;
}

/* Styles pour les états sélectionnés */
.technicien-card.selected {
  border: 2px solid #3498db;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-8px);
}

.technicien-card.selected .technicien-select {
  background-color: #3498db;
}

.technicien-card.selected .technicien-select:hover {
  background-color: #3498db;
}

/* Ajout d'un badge ou d'un indicateur */
.technicien-card.selected::before {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Textes alternatifs pour l'état sélectionné/non sélectionné */
.selected-text {
  display: none;
}

.technicien-card.selected .select-text {
  display: none;
}

.technicien-card.selected .selected-text {
  display: inline;
}

/* Style pour message d'absence de technicien */
#techniciens-carousel p:only-child {
  text-align: center;
  font-size: 16px;
  color: #7f8c8d;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  width: 100%;
}

/* Media queries pour responsivité */
@media (max-width: 768px) {
  #techniciens-section h2 {
    font-size: 18px;
  }
  
  .previous-sessions-note {
    font-size: 14px;
  }
  
  .technicien-item {
    flex: 0 0 200px; /* Un peu plus petit sur mobile */
    max-width: 200px;
  }
}

/* Astuce pour encourager le scroll avec un indicateur visuel */
#techniciens-scroll-container::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(249, 249, 249, 0.9));
  pointer-events: none; /* Pour permettre le scroll même par dessus */
}

/* Style élégant pour l'option d'affectation automatique */
.option-affectation-auto {
  margin: 25px auto 15px;
  padding: 0;
  max-width: 80%;
  position: relative;
  transition: all 0.3s ease;
}

.affectation-auto-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500;
  color: #6c757d;
  font-size: 15px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  padding: 12px 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.affectation-auto-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  color: #3498db;
  border-color: #d0e6f7;
}

/* Style personnalisé pour le bouton radio */
.affectation-auto-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Créer un indicateur personnalisé */
.affectation-auto-label .custom-radio {
  position: relative;
  display: inline-block;
  height: 18px !important;
  width: 18px !important;
  margin-right: 10px;
  border: 2px solid #ced4da;
  border-radius: 50%;
  transition: all 0.25s ease;
}

/* Indicateur lorsque coché */
.affectation-auto-label input:checked ~ .custom-radio {
  border-color: #3498db;
  background-color: white;
}

.affectation-auto-label .custom-radio:after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3498db;
}

.affectation-auto-label input:checked ~ .custom-radio:after {
  display: block;
}

/* Style pour l'option sélectionnée */
.option-affectation-auto.selected .affectation-auto-label {
  color: #3498db;
  border-color: #3498db;
  background-color: #f0f9ff;
  box-shadow: 0 2px 10px rgba(52, 152, 219, 0.15);
}

/* Ajouter une icône avant le texte */
.affectation-auto-label::before {
  content: "✦";
  margin-right: 10px;
  color: #3498db;
  font-size: 14px;
}

/* Style pour la version mobile */
@media (max-width: 480px) {
  .option-affectation-auto {  
    max-width: 100%;
  }
  
  .affectation-auto-label {
      font-size: 14px;
      padding: 10px 18px;
  }
}

/* Animation subtile lorsque sélectionné */
.option-affectation-auto.selected {
  animation: pulse 1.5s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}


/* Styles pour les techniciens non disponibles */
.technicien-unavailable {
  opacity: 0.7;
  filter: grayscale(0.8);
  pointer-events: none; /* Désactiver les interactions */
  position: relative;
}

.technicien-unavailable::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(220, 220, 220, 0.4);
  border-radius: 8px;
  z-index: 1;
}

.technicien-unavailable:hover {
  transform: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.technicien-unavailable .technicien-image {
  background-size: cover !important;
}

.technicien-unavailable:hover .technicien-image {
  background-size: cover !important;
}

.technicien-select.disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.7;
  
  font-size: 10px !important;
}

.technicien-select.disabled:hover {
  background-color: #bdc3c7;
}

/* Style pour le message d'alerte */
.alert {
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.alert-info i {
  margin-right: 5px;
}

/* Amélioration de l'effet visuel pour distinguer disponible/non disponible */
.technicien-card {
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer; /* Curseur pointeur pour indiquer que toute la carte est cliquable */
}

/* Animation pour attirer l'attention sur le message */
@keyframes fadeInAlert {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#techniciens-info-message {
  animation: fadeInAlert 0.5s ease-out;
}

/* Réduire la taille des photos de 40% */
.technicien-image {
  height: 0;
  padding-bottom: 100%; /* Réduit de 40% par rapport à 100% */
  overflow: hidden;
  position: relative;
  background-position: center 20%; /* Ajusté pour mieux cadrer le visage */
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.5s ease;
}

/* Styles pour les flèches de défilement */
.scroll-arrow {
  position: absolute;
  top: 60%;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transition: all 0.3s ease;
}

.scroll-arrow:hover {
  background-color: #333;
  color: white;
}

.scroll-left {
  left: -50px;
}

.scroll-right {
  right: -50px;
}

.scroll-arrow.hidden {
  opacity: 0.3;
  pointer-events: none;
}

/* Masquer les flèches sur mobile */
@media (max-width: 768px) {
  .scroll-arrow {
    display: none;
  }
}

/* Style pour l'option d'un seul technicien (affichage centré) */
#techniciens-carousel:only-child .technicien-item {
  margin: 0 auto;
}

/* Styles pour le formulaire de réservation amélioré */

/* Conteneur de progression */
.form-progress-container {
  margin: 30px 0;
}

.form-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
}

.form-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.form-progress-line {
  flex-grow: 1;
  height: 2px;
  background-color: #e0e0e0;
  margin: 0 10px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 14px;
  color: #666;
  transition: all 0.3s ease;
}

.form-progress-step.active .step-number {
  background-color: #58a0d7;
  color: white;
}

.form-progress-step.active .step-label {
  color: #58a0d7;
  font-weight: bold;
}

.form-progress-step.completed .step-number {
  background-color: #4CAF50;
  color: white;
}

.form-progress-step.completed .step-number:after {
  content: "✓";
}

.form-progress-step.completed + .form-progress-line {
  background-color: #4CAF50;
}

/* Étapes du formulaire */
.form-step {
  padding: 20px 0;
  transition: all 0.3s ease;
}

/* Style pour les boutons de navigation */
.form-navigation {
  margin-top: 30px;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.prev-btn {
  margin-right: 15px;
}

.next-btn, .submit-btn {
  min-width: 150px;
}

/* Indicateur de chargement */
.loading-indicator {
  display: inline-block;
  margin-top: 10px;
  color: #58a0d7;
}

/* Résumé de la réservation */
.reservation-summary {
  margin-top: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
  padding: 15px;
}

.summary-item {
  margin-bottom: 10px;
  color: #666;
}

.summary-item i {
  margin-right: 10px;
  color: #58a0d7;
}

.summary-item:last-child {
  margin-bottom: 0;
}

/* Animation d'apparition des étapes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-step {
  animation: fadeIn 0.5s ease-out;
}

/* Style pour l'input email en focus */
#email-input:focus {
  border-color: #58a0d7;
  box-shadow: 0 0 0 0.2rem rgba(88, 160, 215, 0.25);
}

/* Responsive styles */
@media (max-width: 768px) {
  .form-progress {
    max-width: 100%;
  }
  
  .step-label {
    font-size: 12px;
  }
  
  .form-navigation {
    display: flex;
    justify-content: space-between;
  }
  
  .prev-btn, .next-btn, .submit-btn {
    min-width: 0;
    padding: 8px 15px;
  }
}

/* Animation pour clignotement sur entrée invalide */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.invalid-input {
  border-color: #dc3545 !important;
  animation: shake 0.5s ease-in-out;
}

/* Style des alertes amélioré */
.alert {
  border-radius: 5px;
  font-size: 14px;
  padding: 12px 15px;
}

.alert-info {
  background-color: #e3f2fd;
  border-color: #90caf9;
  color: #1565c0;
}

.alert-warning {
  background-color: #fff3e0;
  border-color: #ffcc80;
  color: #ef6c00;
}

/* Amélioration du datepicker */
.res-datepicker-wrapper, .res-timepicker-wrapper {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 15px;
  margin-bottom: 20px;
  padding-top: 7px;
}
.res-datepicker-wrapper h3, .res-timepicker-wrapper h3 {
  font-size: 18px !important;
  margin-top: 5px !important;
  font-family: 'Montserrat' !important;
  font-weight: 600 !important;
}

/* Améliorations visuelles pour le formulaire de réservation */

/* ===== TITRES ===== */
.service-content-wrap h3 {
  font-size: 22px;
  font-weight: 600;
  color: #183b56;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
  text-align: center;
}

.service-content-wrap h3:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #58a0d7;
  transform: translateX(-50%);
  border-radius: 2px;
}

.res-datepicker-wrapper h3,
.res-timepicker-wrapper h3 {
  font-size: 18px;
  color: #183b56;
  margin-bottom: 18px;
  font-weight: 500;
  text-align: left;
  padding-bottom: 8px;
  position: relative;
}

.res-datepicker-wrapper h3:after,
.res-timepicker-wrapper h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #58a0d7;
  border-radius: 2px;
}

/* ===== BOUTONS ===== */
.form-navigation {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 35px;
  padding-top: 20px;
}

.next-btn, .prev-btn, .submit-btn {
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: none;
}

.next-btn {
  background: linear-gradient(135deg, #5ba0d8 0%, #3f88c5 100%);
  color: white;
}

.next-btn:hover {
  background: linear-gradient(135deg, #3f88c5 0%, #2d6fa6 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(63, 136, 197, 0.2);
}

.prev-btn {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.prev-btn:hover {
  background: #e9ecef;
  color: #212529;
}

.submit-btn {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: white;
  padding: 12px 35px;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.2);
}

.form-navigation .next-btn i, 
.form-navigation .prev-btn i, 
.form-navigation .submit-btn i {
  margin-left: 5px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.form-navigation .prev-btn i {
  margin-left: 0;
  margin-right: 5px;
}

.form-navigation .next-btn:hover i {
  transform: translateX(3px);
}

.form-navigation .prev-btn:hover i {
  transform: translateX(-3px);
}

.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ===== INPUTS ===== */
.form-control {
  height: 45px;
  border-radius: 8px;
  padding: 12px 18px;
  border: 1px solid #e0e6ed;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  background-color: #fefeff;
}

.form-control:focus {
  border-color: #58a0d7;
  background-color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(88, 160, 215, 0.15);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
  padding-top: 15px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

/* Animation pour les champs pré-remplis */
.prefilled {
  background-color: #f0f9ff !important;
  border-color: #58a0d7 !important;
  animation: pulse-light 1.5s ease-in-out;
}

@keyframes pulse-light {
  0% { background-color: #f0f9ff; }
  50% { background-color: #dff1ff; }
  100% { background-color: #f0f9ff; }
}

/* ===== DATEPICKER & TIMEPICKER ===== */
.res-datepicker-wrapper, 
.res-timepicker-wrapper {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
  padding: 22px;
  margin-bottom: 25px;
  border: 1px solid #f0f0f0;
  padding-top: 7px;
}

.datepicker table tr td.active, 
.datepicker table tr td.active:hover, 
.datepicker table tr td.active.disabled, 
.datepicker table tr td.active.disabled:hover {
  background-color: #58a0d7 !important;
  background-image: none !important;
}

.datepicker table tr td.today, 
.datepicker table tr td.today:hover, 
.datepicker table tr td.today.disabled, 
.datepicker table tr td.today.disabled:hover {
  background-color: #ffdb99 !important;
  background-image: none !important;
}

.res-timepicker ul li {
  transition: all 0.3s ease;
}

.res-timepicker ul li label {
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.res-timepicker ul li label.ui-state-active {
  background-color: #58a0d7 !important;
  border-color: #58a0d7 !important;
  box-shadow: 0 3px 8px rgba(88, 160, 215, 0.3);
}

/* ===== RÉSUMÉ DE RÉSERVATION ===== */
.box_style_1.expose {
  border-radius: 12px;
  border: none;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  padding: 25px;
}

.reservation-summary {
  margin-top: 25px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 18px;
  border-left: 3px solid #58a0d7;
}

.summary-item {
  margin-bottom: 12px;
  color: #495057;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.summary-item i {
  margin-right: 10px;
  color: #58a0d7;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.summary-item:last-child {
  margin-bottom: 0;
}

/* ===== BARRE DE PROGRESSION ===== */
.form-progress {
  padding: 10px 0;
}

.form-progress-step .step-number {
  width: 45px;
  height: 45px;
  font-size: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid #e0e0e0;
  background-color: white;
}

.form-progress-step.active .step-number {
  background: linear-gradient(135deg, #5ba0d8 0%, #3f88c5 100%);
  border-color: transparent;
  box-shadow: 0 5px 15px rgba(63, 136, 197, 0.25);
}

.form-progress-step.completed .step-number {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  border-color: transparent;
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.25);
}

/* ===== TECHNICIENS CAROUSEL ===== */
.technicien-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
}

.technicien-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.technicien-card.selected {
  border-color: #58a0d7;
  box-shadow: 0 8px 25px rgba(88, 160, 215, 0.2);
}

.technicien-select {
  background: linear-gradient(135deg, #5ba0d8 0%, #3f88c5 100%);
  border-radius: 30px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .service-content-wrap h3 {
    font-size: 20px;
  }
  
  .res-datepicker-wrapper, 
  .res-timepicker-wrapper {
    padding: 15px;
  }
  
  .form-control {
    height: 45px;
    font-size: 14px;
  }
  
  .next-btn, .prev-btn, .submit-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
  
  .form-progress-step .step-number {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .form-progress-step .step-label {
    font-size: 12px;
  }
}

.res-datepicker .datepicker tbody td {
  font-size: 14px;
  font-weight: 500;

}