/* 
    Created on : 16 févr. 2026, 16:08:26
    Author     : Pixad / Taskey
*/


    a.btn-action-reservation {background-color:#F1C40F; border:1px solid #F1C40F; padding:8px 40px;}
    #header {position: relative; z-index: 10;}
    
    .site-content:has(#PDetailHebergement) {position: relative; top: 0px;}
    .site-content:has(#PDetailHebergement) h1 { padding: 15px 0px 10px 15px; margin:0px; }
   
    
    .house-heading__pictures {overflow: hidden; border-radius: 7px; position: relative; margin: 0 0 0rem;background-color: #003c3c; max-height: calc(70vh - 30px);
                              
    }
    .house-heading__pictures .owl-carousel .owl-stage {padding: 0px!important;}
    
    
    @keyframes shadow-pulse{  0% { box-shadow: 0 0 0 0px rgba(255,255,255, 0.6); } 100% { box-shadow: 0 0 0 35px rgba(255,255,255, 0); }}
    .house-heading__pictures  .btn-pulse i:first-child { background-color: #FFF; height: 50px;  width: 50px; border-radius: 50%; padding: 11px 18px;}
    .house-heading__pictures .btn-pulse i:first-child { animation: shadow-pulse 1s infinite; }

    
    .owl-carousel-topslide .owl-item img.CenterImg {}
    .owl-carousel-topslide .owl-item img.OptimisedImg { width: 100%; max-height: 620px;}
    @media (max-width: 480px){
        #CarouselBien {padding:0px 0px 15px 0px!important;}
        #CarouselBien .col-md-12 {padding-left: 0px;  padding-right: 0px;}
        #CarouselBien .house-heading__pictures { height: 65vh; }
        
        .owl-carousel-topslide .owl-item img { display: block; width: auto; height:100%; }
        .owl-carousel-topslide .owl-item img.CenterImg { position:relative; width:480px; }
        .BlockInfoReservation {margin-bottom: 30px;}
    }
    

    @media (min-width: 900px){
  
        .owl-carousel-topslide .owl-item img.CenterImg { position:relative;top:calc(50vh - 100vh)}
    }

    @media (min-width: 1440px){
       
        .owl-carousel-topslide .owl-item img.CenterImg { position:relative;top:calc(60vh - 100vh)}
    }
    
    #FullDescription, .BlockInfoReservation{transition: all 1s ease-out;}
    #FullDescription .content {text-align: justify;}
    #FullDescription p {line-height: 2.6rem;}
    
    
    @media (max-width: 480px){
         #FullDescription .content h2, #FullDescription .content h3 {text-align: left;}
    }
    
     .HeaderInfo {
        display:flex; flex-direction:row; align-items: flex-end; flex: 1; justify-content: space-between; background-color: transparent; border: 0px solid #FFF; border-radius: 15px;
    }
    
    #CarouselBien .HeaderInfo {
        display:flex; flex-direction:row; align-items: flex-end; flex: 1; justify-content: space-between; background-color: transparent; border: 0px solid #FFF; border-radius: 15px;
    
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0;
    padding: 30px 60px 30px 30px;
    background-image: linear-gradient(to top, #131e29, transparent);
    
    /*
    background: radial-gradient(ellipse at left bottom, rgb(19 30 41 / 90%) 15%, transparent 70%);;
    */
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    
    
    }
    #CarouselBien .HeaderInfo h1 {
        color: #FFFF;
        font-weight: 900;
        text-transform: uppercase;
        line-height: .85;
        letter-spacing: 0.2rem;
        font-size: 65px;
    }
    #CarouselBien .HeaderInfo span.subtitle {margin-left: 15px; color: #c9a377; font-weight: 400; font-size: 13px; }
    
    #CarouselBien .HeaderInfo .tsk-header-info {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px; }
    #CarouselBien .HeaderInfo .tsk-header-info .btn-fav {top: 0px; left: 46px;}
    #CarouselBien .HeaderInfo .tsk-header-info .IconDescription {margin: 15px 0 0 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; color: #CCC; width:100%;}
    #CarouselBien .HeaderInfo .tsk-header-info .IconDescription div  { border-right: 0px; min-width: 5vw; width:auto; }
    #CarouselBien .HeaderInfo .tsk-header-info .IconDescription i  { color: #f8f8f8; opacity:0.5; }
    #CarouselBien .HeaderInfo .tsk-header-info .IconDescription span  { color: #fff; font-weight: normal; }
    
    .HeaderInfo span.btnResaBien a.btn-action-resa {
        /*
        color: #003c3b;
        background-color: #fff;
        border: 0px solid #fff;
        */
        border-radius: 25px;
        font-weight: 400;
        font-weight: 400;
        font-size: 2.0rem;
        padding: 10px 40px;
        transition: all 0.5s ease-in-out;
    }
    
    .HeaderInfo span.btnResaBien a.btn-action-resa:hover {
        background-color: #fff;
        color: #222;
        border: 0px;
    }
    
    @media(max-width:500px){
        .house-heading__pictures {border-radius: 0px;}
        #CarouselBien .HeaderInfo {width:100%; bottom:15px; flex-direction:column;row-gap: 10px;  padding: 0px; justify-content: flex-start; align-items: center; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
        #CarouselBien .HeaderInfo .btn {width: auto; margin-bottom: 15px;}
        #CarouselBien .HeaderInfo h1 {font-size: 40px;}
        #CarouselBien .HeaderInfo .tsk-header-info {width: 100%; justify-content: center; align-items: flex-start; gap: 10px;}
        #CarouselBien .HeaderInfo .tsk-header-info .IconDescription {justify-content: space-between;}
        #CarouselBien .HeaderInfo .tsk-header-info .btn-fav {top: -30px; left: 15px;}
        
        #CarouselBien .HeaderInfo .tsk-header-info .IconDescription div {padding:5px;}
        
    }
    
    .HeaderInfo span.btnResaBien { min-width:267px;} 
    
    @media(max-width: 500px){
        .HeaderInfo span.btnResaBien { width: 100%;} 
        
        #FullDescription h3 { font-size: 2.1rem;}
    }

  .row .column img {border-radius: 0px;}
    
.container.infoHeader {}
.container.infoHeader .header {}

@media (max-width:500px){  
    #footer .fpart-second .row {margin-bottom: 50px;}
     
}

/* indicateur de scroll*/
/*
#PDetailHebergement .btn-fav {top:0px;}
#PDetailHebergement .btn-fav a {top:0px; left:38px; border-radius: 0px; }
*/
/*
@media(max-width:500px){
    #PDetailHebergement .btn-fav {top:0px!important; width: 100vw!important;}
    #PDetailHebergement .btn-fav a {top:0px!important; left: 0px!important; border-radius: 0px; }
}
*/

#BlockListeBien #ListeBien .BlockScrollBien {height: auto!important;}


/* Styles du preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Cache le carousel pendant le chargement */
#PDetailHebergement .owl-carousel {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#PDetailHebergement .owl-carousel.owl-loaded {
    opacity: 1;
}


/* Ajoutez ces styles CSS */
#PDetailHebergement .owl-carousel-topslide .owl-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#PDetailHebergement .owl-carousel-topslide {
    min-height: inherit; /* ou la hauteur souhaitée */
}


#PDetailHebergement h2, #FullDescription h2 { font-size:3.2rem; font-weight: 500; line-height: 3.5rem; margin: 4rem 0; }
#PDetailHebergement h3, #FullDescription h3{ font-size:3.2rem; font-weight: 500; line-height: 3.5rem; }
#PDetailHebergement h4, #FullDescription h4 { font-size:2.5rem; font-weight: 500; line-height: 2.5rem; margin:25px 0; }
#PDetailHebergement h4:after, #FullDescription h4:after  { display: block; opacity: 1; content: ""; height: 2px; width: 47px; background-color: #c9a377; margin: 0 15px 0 0px; position: relative;    top: 0; left: 0px; transition: transform 0.3s ease-out;}


#PDetailHebergement .content .row:nth-child(1) p em { font-size: 4rem; font-weight:500; line-height:3.8rem;}
#FullDescription .content .row:nth-child(1) p em { font-size: 4rem; font-weight:500; line-height:3.8rem;}

@media(max-width:500px){
    #FullDescription .content .row:nth-child(1) p em { font-size: 3.5rem; font-weight:500; line-height:3rem;}
    #PDetailHebergement h4, #FullDescription h4 {font-size: 2.5rem; line-height: 2.5rem; margin: 25px 0;}
    #PDetailHebergement h3 { font-size:3.2rem; font-weight: 500; line-height: 3.5rem; }
}
 
#PDetailHebergement .reservation-desactive {background-color: #222; color:#FFF; font-size:14px; padding: 10px; border-radius: 7px;}