/* 
    Created on : 13 juil. 2023, 09:07:54
    Author     : Pixad
*/
:root {
    --width-img-temoignage:40px;
    --height-img-temoignage:40px;
    --bg-img-temoignage: #5d4e35;
}

#STemoignage span.Titre {text-align: center; display: block; margin-top: 30px; color:#ffffff; font-weight: 700; font-size:3.5rem; line-height: 3.7rem; text-shadow: 0px 1px 6px rgba(0, 0, 0, 1);}
#PageDetailHebergement #STemoignage span.Titre {text-align: center; display: block; margin-top: 30px; color:#222; font-weight: 600; font-size:3.5rem; line-height: 3.7rem; text-shadow: none;}


#STemoignage  .swiper-container {max-height:500px; margin-top: 50px;}
#STemoignage  .swiper-slide {
    will-change: transform;  border-style: solid;  border-width: 0;  transition-duration: .5s;
    transition-property: border,background,transform;  overflow: hidden;    background-color: transparent;
    padding: 15px;
    border-width: 0px 0px 0px 0px;
    border-radius: 0px;
    transition: all 0.8s ease-in-out;
    height: auto;
    
}


#STemoignage  .swiper-slide .card-testimony {
    transition: all .3s ease;
    text-align: left;
    filter: blur(0px);
    opacity: 0.5;
    transition: 0.2s all ease-in-out;
}



#STemoignage .card-testimony {  border: 1px solid #eee;  border-radius: 7px; padding: 15px; }
#STemoignage .card { position: relative; display: flex;    flex-direction: column;   min-width: 0;  word-wrap: break-word; background-color: #fff; background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125); border-radius: 7px; font-size:12px; }

#STemoignage .card-body { flex: 1 1 auto; min-height: 1px; padding: 0.85rem; }
#STemoignage .swiper-slide .card-testimony .content { font-size: 12px; color: #343a40; }

#STemoignage .card-body #InfoClient { display: flex!important; flex-direction: row; gap: 8px; justify-content: flex-start; align-items: center; }
#STemoignage .card-body #InfoClient .blockVisuel {border-radius: 50%!important; width: var(--width-img-temoignage); height: var(--height-img-temoignage); overflow:hidden; display:flex; justify-content:center; align-items: center;}
#STemoignage .card-body #InfoClient img.img-rounded { width: var(--width-img-temoignage); height: var(--height-img-temoignage);}
#STemoignage .card-body #InfoClient .blockVisuel .VisueClientNoImg {background-color: var(--bg-img-temoignage); border-radius: 50%!important; width: var(--width-img-temoignage); height: var(--height-img-temoignage);  overflow:hidden; display:flex; justify-content:center; align-items: center;}
#STemoignage .card-body #InfoClient .blockVisuel .VisueClientNoImg span { color:#FFF; font-size:2.4rem; }

#STemoignage .card-body #InfoClient #element { display: flex; flex-direction: column; position: relative;}
#STemoignage .card-body #InfoClient #element span { display: block;}

@media(max-width:500px){
    #STemoignage span.Titre { font-size:2.8rem; line-height: 3.0rem;}
   #STemoignage .swiper-slide .card-testimony .content {font-size: 1.2rem;}
}


#STemoignage .align-items-center { align-items: center!important; }
#STemoignage .d-flex { display: flex!important; }
#STemoignage .swiper-slide .card-testimony .company-name, #STemoignage .swiper-slide .card-testimony .name-client { color: #191919; font-size:12px;}
#STemoignage .swiper-slide .card-testimony .img-client {height: 76px; width: 76px; min-height: 76px; min-width: 76px; border-radius: 50%; overflow: hidden;}
#STemoignage .swiper-slide img {display: block; width: 100%; height: 100%;-o-object-fit: cover; object-fit: cover;}
#STemoignage .swiper-slide .card-testimony .name-client {  font-size: 15px;}
#STemoignage .swiper-slide .card-testimony .company-name {
    font-size: 12px;
    font-weight: 600;
}

#STemoignage .swiper-slide.swiper-slide-active .card-testimony {
    position: relative;
    transform: scale(1.1); 
    filter: blur(0px);
    margin: 15px; 
    opacity: 1;
}




#STemoignage .card-body #InfoClient .rating-box { position:relative;vertical-align: middle;font-size: 1.0em;font-family: FontAwesome;display:inline-block; color: #F68127;}
#STemoignage .card-body #InfoClient .rating-box:before{  content: "\f006 \f006 \f006 \f006 \f006";   }
#STemoignage .card-body #InfoClient .rating-box .rating {  position: absolute;  left:0;  top:0; white-space:nowrap; overflow:hidden;  color: #F68127; }
#STemoignage .card-body #InfoClient .rating-box .rating:before {  content: "\f005 \f005 \f005 \f005 \f005"; }



/* Dans la page de reservation */
#BlockRecapReservation #STemoignage .swiper-container::before {  content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: -webkit-linear-gradient( bottom , #F5F5F5, rgba(255,255,255,0));
    background: linear-gradient(to top, #F5F5F5, rgba(255,255,255,0));
}
    