body{
    font-family: "Poppins",serif;
    background-color: #FBF5F5;
    font-size: 1rem;
    overflow-x: hidden;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s .6s;
}

.grecaptcha-badge{
display: none;
}

.dot {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.visible {
    opacity: 1 !important;
}


#loading-spinner {
    display: none;  /* Par défaut, il est caché */
}
.page-link.current{
background-color:  #D22D16;
color: #FBF5F5;
}
.error{
    color: red;
}
#contact_cgu-error,#alerte_cgu-error,#estim_cgu-error{
    display: block;
}


@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-ExtraBold.ttf);
  font-weight: 800;
}


@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Bold.ttf);
  font-weight: 600;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-SemiBold.ttf);
  font-weight: 500;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Italic.ttf);
 font-style: italic;
}



@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-ExtraLightItalic.ttf);
  font-style: italic;
}

.headerTop{
    width: fit-content;
    margin-left: auto;
    margin-right: 2rem;
}

.pointer{
    cursor: pointer;
}

.h2{
    font-size: 2.5rem;
    font-style: italic;
    font-weight: 300;
}

.modal{
    background-color: rgba(0,0,0,0.80);
}

.modal .modal-dialog {
    max-width:96%;
    width: 996px;
    margin-top: 4rem;
}

.modal-content{
    background-color: #FBF5F5 ;
    border-radius: 0;
}

.customselect,.search_form .form-control{
    display: block;
    width: 100%;
    padding: 0.700rem 0;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.5;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #FFF;
    color: #02152e;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-bottom: 2rem;
  padding: 10px 20px;
  border-radius: 6px;
}

.search_form .form-control::placeholder{
    color: #A3A3A3;
    font-style: italic;
    font-weight: 300;
    font-size: 1rem;
}

.dropdown-toggle::after{
    display: none!important;
}


.dropdown-menu{
    border-radius: 0;
    margin-top: -3px!important;
    border: 1px solid #E3E2DE;
    border-top: none;
    width: auto !important;
}

.orderSelect .dropdown-menu{

    margin-top: -2px!important;
}


.dropdown-menu li .dropdown-item{
    color:#02152e;
    cursor: pointer;
}


.dropdown-menu li .dropdown-item:hover{
    background-color: transparent;
}

.customselect img{
    align-self: center;
}

.minMaxText{
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: -4px;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border-radius: 0;
    color: #02152e;


}

.divRange{
width: 100%;
margin-top: -1.65rem!important;
}


#rangeSearch{
    width: 100%;
    height: 80px;
}


.none{
    display: none;
}

.form-control{
    font-size: 24px;
    border: none;
    background-color: #FFF;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    padding: 10px 20px;
}


.form-control:focus{
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
  border:none;
  border-bottom: 1px solid #02152e;
  background-color: #FFF;
}

.btn:focus ,button:focus,.custom-toggler:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;

}

.form-control::placeholder{
   font-size: 1rem;
   color:#02152e;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 1rem;
    color:#02152e;
}
::-moz-placeholder { /* Firefox 19+ */
   font-size: 1rem;
   color:#02152e;
}
:-ms-input-placeholder { /* IE 10+ */
   font-size: 1rem;
   color:#02152e;
}

.close-btn{
    width: fit-content;
    position: absolute;
    right: -1rem;
    top: -1.5rem;
    z-index: 1045;
    cursor: pointer;
    transition: 0.5s;
    margin: 0;

}

.close-btn .squareClose{
    background-color: #0E36BC;
  color: #FFF;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.5s;
  border-radius: 6px;
}


.close-btn:hover .squareClose{
    background-color: #0E36BC;
}

.squareClose2{
    background-color:#0E36BC;
    color: #FFF;
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.5s;
    border-radius:6px;
}


.close-gallery:hover .squareClose2{
    background-color: #0E36BC;
}


.alerteButton{
    color: #02152e;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    align-self: center;
}

.alerteButton:hover{
    color: #02152e;
}



.unCheck ,.dropdown-menu  .unCheck,
.check,.dropdown-menu .selected .unCheck{
    border: 1px solid #02152e;
    padding: 0.34rem 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: sub;
    transition: 0.5s;
    border-radius: 4px;
    margin-right: 6px;
    margin-left: 12px;
    vertical-align: sub;
    transition: 0.5s;
}


.unCheck #feCheck2,.dropdown-menu  .unCheck #feCheck2{
    fill: #FBF5F5;
    transition: 0.5s;
}

.check #feCheck2,.dropdown-menu .selected .unCheck #feCheck2{
    fill: #0E36BC;
    transition: 0.5s;
}

.contact_cgu,.checkbox{
    cursor: pointer;
    font-size: 0.875rem;
}


.contact_cgu a{
    color: #02152e;
    text-decoration: underline;
}

a{
    text-decoration: none;
}

.blue{
    color: #0E36BC;
}

.backBlue{
    background-color: #0E36BC;
    border-radius: 12px;
}

.divBackBlue{
    width: fit-content;
}

.backLogo{
    position: absolute;
    transform: rotate(-25deg);
    width: 42.85rem;
    height: 42.85rem;
    top: -24.5rem;
    left: -21rem;
    z-index: 1;
}

.navbar-expand-lg .navbar-nav .nav-link {
     padding-right: 0; 
     padding-left: 0; 
}
header .logo{
    z-index: 2;
    position: relative;
    padding: 0 30px;
    width: 340px;
    height: auto;
    margin-top: 60px;
}

header .logoFixed{
    z-index:2;
    position:relative;
    padding: 2rem;
    width: 12.2rem;
    height: auto;
}

header{
    position: absolute;
    top: 0;
    z-index: 1000;
    height:10rem ;
    width: 100%;
    background-color: transparent;
}

header .align-self-end{
    width: fit-content;
}

.custom-toggler.navbar-toggler {
    border-color: #FBF5F5;
    z-index: 150;
}

.custom-toggler{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 3rem;
    height: 3rem;
}

.custom-toggler .navbar-toggler-icon {
    margin-top: 2px;
    margin-bottom: 2px;
    width: 80%;
    height: 2px;
    background: #FBF5F5;
    align-self: center;
    border-radius: 0.8rem;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.navbar-toggler.open span:nth-child(2) {
    background: transparent;
}

.navbar-toggler.open span:nth-child(3) {
    -moz-transform: translateY(-6px) rotate(-225deg);
    -webkit-transform: translateY(-6px) rotate(-225deg);
    transform: translateY(-6px) rotate(-225deg);
}

.navbar-toggler.open span:nth-child(1) {
    -moz-transform: translateY(6px) rotate(225deg);
    -webkit-transform: translateY(6px) rotate(225deg);
    transform: translateY(6px) rotate(225deg);
}

.lienTel{
    line-height: 1.2;
    background-color: #CD4F04;
    padding: 4px 8px;
    border-radius: 4px;
    color: #FFF;
}

.lienTel:hover{
 color: #FFF;
}

.radiantTop{
    /*background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);*/
    /*background-color: rgba(1,21,46,0.9);*/
    background-color:#0E36BC;
    box-shadow:3px 3px 8px rgba(0,0,0,0.2);
}

.square-border{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-right: 6px;
}

.square-blue{
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: center;
 width: 30px;
 height: 30px;
 transition:  0.3s;
 background-color: #FBF5F5;
 border-radius: 4px;
}

.square-blue:hover{
    background-color: #FBF5F5;
}

.square-border svg,
.square-blue svg {
  margin: auto;
  height: 24px;
  width: 16px;
}

.square-border svg path {
    fill:#FFF;
}

.square-blue svg path {
    fill:#0E36BC;
}

.nav-item a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s; /* transition pour le déplacement vertical */
    line-height: 1;
}

.nav-item a::before {
    content: "";
    position: absolute;
    bottom: -2px; /* position initiale du trait (2px sous le lien) */
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* largeur initiale de 0 */
    height: 2px; /* hauteur du trait */
    background-color: #CD4F04;
    transition: width 0.3s; /* transition pour le changement de largeur */
}

.nav-item a:hover {
    transform: translateY(-0.5rem); /* déplace le lien de 2rem vers le haut lors du survol */
    color: #FBF5F5;
}

.nav-item a:hover::before {
    width: 3rem; /* largeur du trait à 2rem lors du survol */
}

.topHome{
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: transparent;
    z-index: 2;
    min-height: 750px;
}

.topBien{
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: transparent;
    z-index: 2;
}

.mt-50vh{
    margin-top: 70vh;
}

.mt-100vh{
    margin-top: 100vh;
}

.topHome::before,.topBien::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* #000000 avec une opacité de 40% */
    z-index: 2;
}

.topHome #carouselHeader .carousel-item,.topHome #carouselHeader,.topHome #carouselHeader .carousel-inner {
    height: 100vh;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    background-size: cover;
    background-position: center;
    min-height: 750px;
}

.topBien #carouselHeader .carousel-item,.topBien #carouselHeader,.topBien #carouselHeader .carousel-inner {
    height: 100vh;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    background-size: cover;
    background-position: center;
}

.ico, .svg-container {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #0E36BC;
    border-radius: 6px;
    display: flex;
    justify-content: center;
}

.ico svg:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    z-index: 2;
}

.ico div svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(25deg);
    z-index: 2;
}

.svg-container {
    border: 1px solid #02152e;
    width: 75px;
    height: 75px;
    transform: rotate(-25deg);
    overflow: hidden; /* Important pour cacher le carré blanc avant le hover */
}

.svg-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #FBF5F5;
    transform: translate(-50%, -50%) rotate(-25deg); /* Position centrale avec rotation */
    opacity: 1;
    transition: width 0.2s, height 0.2s, opacity 0.2s, transform 0.2s;
    z-index: 1;
    cursor: pointer;
}

.icoHover:hover .svg-container::before {
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg); /* Position centrale sans rotation */
}

.bleuTag{
    color: #FBF5F5;
    background-color: #0E36BC;
    padding: 0.5rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    width: fit-content;
    border-radius: 6px;
}

.blackPrice{
    color: #FFF;
    background-color: #CD4F04;
    padding: 0.5rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    width: fit-content;
    border-radius: 6px;
}

.titleHome{
    margin-top: 15rem;
    margin-bottom: 4rem;
    z-index: 2;
    position: relative;
    color: #FBF5F5;
}

.title{
    font-style: italic
}

.rotateBordered{
    transform: rotate(-25deg);
    width: 16rem;
    height: 16rem;
    border: 3px solid #FBF5F5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 2rem;
    z-index: 2;
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Arrière-plan initialement transparent */
    /*backdrop-filter: blur(10px);*/

}

.rotateBordered span {
    transform: rotate(25deg); /* Inclinaison inverse pour redresser le texte */
    display: block; /* Afin de s'assurer que la transformation s'applique correctement */
}

.rotateBordered::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FBF5F5;
    opacity: 0;
    z-index: -1;
    transform-origin: center; 
    transform: rotate(0deg) scale(1);
    transition: 0.3s; 
}

.rotateBordered::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent; /* Aucun fond au départ pour le pseudo-élément */
    z-index: -1;
    transform-origin: center; 
    transform: rotate(0deg) scale(1);
}

.rotateBordered:not(:hover)::before {
    animation: hideBackground 0.4s forwards;
}

@keyframes hideBackground {
    0% {
        transform: rotate(0deg) scale(1);
        background-color: #FBF5F5; 
        opacity: 0.9;
    }
    25% {
        transform: rotate(22.5deg) scale(0.75);
        background-color: #FBF5F5; 
        opacity: 0.75;
    }
    50% {
        transform: rotate(45deg) scale(0.5);
        background-color: #FBF5F5; 
        opacity: 0.5;
    }
    75% {
        transform: rotate(67.5deg) scale(0.25);
        background-color: #FBF5F5; 
        opacity: 0.25;
    }
    100% {
        transform: rotate(90deg) scale(0);
        background-color: #FBF5F5; 
        opacity: 0;
    }
}
@keyframes showBackground {
    0% {
        transform: rotate(-90deg) scale(0);
        background-color: #FBF5F5; 
        opacity: 0;
    }
    25% {
        transform: rotate(-67.5deg) scale(0.25);
        background-color: #FBF5F5; 
        opacity: 0.25;
    }
    50% {
        transform: rotate(-45deg) scale(0.5);
        background-color: #FBF5F5; 
        opacity: 0.5;
    }
    75% {
        transform: rotate(-22.5deg) scale(0.75);
        background-color: #FBF5F5; 
        opacity: 0.75;
    }
    100% {
        transform: rotate(0deg) scale(1);
        background-color: #FBF5F5; 
        opacity: 0.9;
    }
}

.rotateBordered:hover::before{
    animation: showBackground 0.2s forwards;
}
.rotateBordered:hover{
    color: #0E36BC;
}

.triangle-div {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25.69rem;
    height:15rem;
    overflow: hidden;
}

.square-carousel{
 width:78.125rem;
 height: 78.125rem;
 position: absolute;
 transform: rotate(-23.11deg);
 background-color: #FBF5F5;
 top: -67.377rem;
 left: -8rem;
 z-index: -1;
 overflow: hidden;
}

.triangle-div::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #0E36BC;*/
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    z-index: 2;
}

.triangle-div svg {
    /* Unicode pour la flèche vers le bas, vous pouvez également utiliser une icône ou une image */
    cursor: pointer;
    position: absolute;
    bottom: 5%; /* position initiale */
    left: 80%;
    animation: moveUpDown 1s infinite alternate; /* animation de montée et descente */
    z-index: 2;
}

@keyframes moveUpDown {
    0% {
        bottom:5%;
    }
    100% {
        bottom: calc(5% + 1rem);
    }
}


.white{
    color: #FBF5F5;
}

.whiteSquare{
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    background-color: #FBF5F5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.5s;
}

.whiteSquare:hover{
    /*background-color: #02152e;*/
}


.font-weight-normal{
    font-weight: 400!important;
}

.font-weight-bold{
    font-weight: 600!important;
}

.font-weight-extra-bold{
    font-weight: 700!important;
}

.font-weight-semi-bold{
    font-weight: 500!important;
}


.font-weight-light{
    font-weight: 300!important;
}

.w87{
    font-size: 0.875rem;
}

.w100{
    font-size: 1rem;
}

.w125{
    font-size: 1.25rem;
}

.w1125{
    font-size: 1.125rem;
}

.w200{
    font-size: 2rem;
}

.w250{
    font-size: 2.5rem;
}

.mt13{
    margin-top: 0.57rem;
}
.mb-10{
    margin-bottom: 5rem;
}

.pt-20{
    padding-top: 22rem;
}

.pe-6{
    padding-left: 10rem
}

.ps-6{
    padding-right: 10rem
}

.btn-return{
    position: absolute;
    left: 2rem;
    top: 90%;
    transform: rotate(90deg);
    z-index: 2;
    animation: moveLeftRight 1s infinite alternate; /* animation de montée et descente */
    cursor: pointer;
}

@keyframes moveLeftRight {
    0% {
        left: 2rem;
    }
    100% {
        left: 3rem;
    }
}


footer a:hover{
    color: #0E36BC;
}

.btn {
    font-size: 1.25rem;
    height: fit-content;
    border: 1px solid #0E36BC;
    background-color: #0E36BC !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    text-align: center;
    border-radius: 6px;
    position: relative;
    background-color: transparent;
    overflow: hidden;
    transition: 0.3s;
    z-index: 2;
    color: #FFF;
}

.btn::before {
     content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #0E36BC;
    transform: translate(-50%, -50%) rotate(90deg); /* Position centrale avec rotation de -25deg */
    opacity: 0;
    transition:  0.5s;
    z-index: -1;
    cursor: pointer;
}

.btn:hover {
    color: #FBF5F5;
}

.btn #loupe,
.btn:hover #loupe{
    fill: #FBF5F5;
} 

.btn:hover::before {
    width: 20rem;
    height: 20rem;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
 }

.btn-white{
    font-size: 1.25rem;
  height: fit-content;
  width: fit-content;
  color: #0E36BC !important;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  z-index: 2;
  background-color: #FFF;
  border-radius: 6px;
  text-transform: uppercase;
}

.btn-white::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color:#FBF5F5;
    transform: translate(-50%, -50%) rotate(90deg); /* Position centrale avec rotation de -25deg */
    opacity: 0;
    transition:  0.5s;
    z-index: -1;
    cursor: pointer;
}

.btn-white:hover {
    color:  #0E36BC;
}



.btn-white:hover::before {
    width: 20rem;
    height: 20rem;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.btn-gallerie{
    font-size: 1.25rem;
    height: fit-content;
    border: 1px solid #FBF5F5;
    color: #FBF5F5;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    text-align: center;
    border-radius: 0;
    position: absolute;
    background-color: transparent;
    overflow: hidden;
    transition:  0.3s;
    z-index: 2;
    bottom: 2rem;
    left: 3rem;
    border-radius: 6px;
}

.btn-gallerie::before {
    content: "";
    position: absolute;
    width: 0;
    height: 15rem; /* Le rendre assez grand pour couvrir tout le bouton lorsqu'il est incliné */
    background-color: #02152e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); /* Inclinaison vers la gauche */
    z-index: -1;
    transition: width 0.3s;
}


.btn-gallerie:hover::before {
    width: 30rem; /* Assurer une large couverture */
}

.w-60{
    width: 28.0625rem;
    max-width: 100%;
    margin: auto;
}

.w-1{
    font-size: 1rem;
}

.w-150{
    font-size: 1.5rem;
    font-weight: 400;
}

.carouselBien{
    padding:10rem 2rem 3rem;
    margin-top: 100vh;
    position: relative;
}

.homeAgence,.share{
    padding:6rem 2rem 3rem;
    position: relative;
}

.carouselBien{
padding: 5rem 1rem 3rem;
}

.homeContact{
    padding:5rem 2rem 3rem;
    position: relative;
}

.share{
    padding-top: 10rem;
    position: relative; 
}

.section_biens,.section_detail{
    padding-left:3rem;
    padding-right:3rem;
}

#carouselBien{
    position: relative;
}

#carouselBien .carousel-item{
    height: fit-content;
}

#carouselBien .carousel-item .row{
    display: flex;
}

#carouselBien .carousel-item .row .ficheBien {
    margin-left: auto;
    margin-right: auto;
}

#carouselBien .carousel-control {
   position: absolute;
   bottom: 11.5rem;
   width: 100%;

}

.carousel-control-prev, .carousel .carousel-control-next {
    position: absolute;
    opacity: 1;
    width: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
}

.carousel-control-prev{
    left: -0.5rem;
}

.carousel-control-next{
    right: -0.5rem;
    transform: rotate(-180deg);
}

.carousel-control-prev-icon,.carousel-control-next-icon {
    background-image: none;
    width: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative; 
}

.carousel-control-prev-icon svg, .carousel-control-next-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.1s;
    width: 100%;
    height: 100%;
}

/* Configuration initiale pour le SVG noir */
.carousel-control-prev-icon svg:last-child {
    transform: translateX(100%); /* Position de départ à droite pour prev */
    z-index: 2;
}

.carousel-control-next-icon svg:last-child {
    transform: translateX(100%); /* Position de départ à droite pour next */
    z-index: 2;
}

/* Lors du survol, déplacez les SVGs */
.carousel-control-prev:hover .carousel-control-prev-icon svg:first-child {
    transform: translateX(-100%);
}

.carousel-control-prev:hover .carousel-control-prev-icon svg:last-child {
    transform: translateX(0);
}

.carousel-control-next:hover .carousel-control-next-icon svg:first-child {
    transform: translateX(-100%);
}

.carousel-control-next:hover .carousel-control-next-icon svg:last-child {
    transform: translateX(0);
}




.agenceSquare{
   width: 65rem;
   height: 65rem;
   position: absolute;
   transform: rotate(-19deg);
   background-color: #FBF5F5;
   top: 15%;
   left: 40%;
   z-index: -1;
   overflow: hidden;
}

.bien_img{
    position: relative;
    overflow: hidden;
}

.exclu,.compro{
    position: absolute;
    top: -38rem;
    left: -22rem;
    background-color: #0E36BC;
    width: 42.875rem;
    height: 42.875rem;
    transform: rotate(-20.6deg);
    box-shadow: 6px 4px 8px 0px #000026;
    z-index: 4;
}

.compro{
background-color: rgba(0, 0, 0, 0.6);

    }

.exclu span,.compro span{
    z-index: 2;
    position: absolute;
    bottom: 0.5rem;
    left: 16rem;
    text-align: center;
    line-height: 1;
    font-size: 1.25rem;
    font-weight: bold;
    color: #FBF5F5;

}

.compro span{
font-size: 1.125rem;
    }




.hover-content {
    display: flex;
    background-color: rgba(14,54,188, 0.8);
    color: #FBF5F5;
    visibility: hidden;
    padding: 3rem;
    transition: opacity 0.5s; /* Ajout de la transition ici */
    opacity: 0; /* Défini à 0 pour qu'il soit initialement invisible */
    border-radius: 12px;
}

.hover-content .text-section{
    transform: translateY(2rem);
    margin: auto;
    transition: 0.5s;
}

.bien_img img {
    transition: filter 0.5s; /* Ajout de la transition pour l'effet de flou */
}
.ficheBien:hover .hover-content {

  visibility: visible;
  opacity: 1; /* Lors du survol, il devient complètement visible */
  transition: 0.5s;
}

.ficheBien:hover .hover-content .text-section{
     transform: translateY(0);
}

.ficheBien:hover .prix{
    background-color: #0E36BC;
}

.loader-listing img{
    margin-top:10rem;
    width: 100px;
    height: 100px;
}

.short_desc{
    border-bottom:1px solid #FBF5F5 ;
}

.short_desc .col-8{
    color: #02152e;
}

.ref{
    font-size: 0.75rem;
}

.icon-section{
    font-size: 0.875rem;
    color:#02152e;
}

.icon-section ul{
    width: fit-content;
    margin-left: auto;
}

.icon-section svg path {
    fill:#02152e;
}

.prix {
  color: #FBF5F5;
  padding: 0.5rem 0;
  width: 60%;
  text-align: center;
  background-color: #CD4F04;
  margin: 0 auto;
  transition: 0.5s;
  border-radius: 6px;
}

footer {
    margin-top: 4rem;
    width: 100%;
    height: 300px;
    position: relative;
}

.moveUp{
    position: absolute;
    cursor: pointer;
    left: 2rem;
    top: 50%;
    animation: moveUpDown2 1s infinite alternate;
    z-index: 99999;
}

@keyframes moveUpDown2 {
    0% {
        top: 50%;
    }
    100% {
        top: calc(50% + 1rem);
    }
}

.triangle-left,
.triangle-right {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.triangle-left {
    left: 0;
    background-color: #FBF5F5;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.triangle-right {
    /*background-color: #FFF;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
}

footer .logoFooter{
    width: 340px;
    margin-left: auto;
    margin-top: 40px;
    margin-right: auto;
}

.white {
    color: #FBF5F5;
    margin-bottom: 1rem; 
    text-decoration: none;
    margin-right: 1rem; 
}

.logo_3clics {

    height: auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.square-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%; /* Cette ligne assure que .square-image reste carré */
}

.background-image {
    padding-bottom: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.3s, filter 0.3s;
}

.background-image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #0E36BC;
    transform: translate(-50%, -50%) rotate(25deg); /* Position centrale avec rotation de -25deg */
    opacity: 0;
    transition: width 0.2s, height 0.2s, opacity 0.2s, transform 0.2s;
    z-index: 1;
    cursor: pointer;
}


.square-image:hover .background-image::before {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    transform: translate(-50%, -50%) rotate(0deg); /* Position centrale sans rotation */
}

.zoom-icon {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: top 0.3s, opacity 0.3s;
    z-index: 2;
}

.zoom-icon img {
    width: 40px;
    height: 40px;
}

.square-image:hover .zoom-icon {
   top: 50%;
   opacity: 1;
   cursor: pointer;
}


#galleryModal {
    animation: zoomIn 0.5s;
}


.gallery-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999999;
}

.gallery-content {
    margin: auto;
    display: block;
    max-width: 80%;
    height: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.close-gallery {
    position: absolute;
    top:-1rem;
    right: 3rem;
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    width: 45px;
    height: 45px;
    top: 50%;
    transition: 0.6s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
}

.prev {
    left: 3rem;
    text-align: center;
    
}

.next {
    right: 3rem;
    text-align: center;
    opacity: 1; 
}

.liste-ico .blue{
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
}

.conseiller{
    z-index: 2;
    position: absolute;
    right: 0;
    width: 30%;
    top: 70vh;
    transform: translateY(-6.875rem);
    background-color:  #FBF5F5;
    border-radius: 12px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    color: #FFF;
}
.conseiller img {
  border: 3px solid #FFF;
  /*width: 80px;*/
  height: 110px;
  padding: 0;
  border-radius: 6px;
}
.conseiller div:first-child a {
    color: #FFF;
}

.conseiller h3{
    font-size: 1.125rem;
    font-style: italic;
}

.icoDiag {
    position: relative;
}

.icoDiag span{
    position: absolute;
    left: 50px;
    top: 50px;
    transform: translate(-15%,-50%);
    color: #FBF5F5;
    font-size: 50px;
    font-weight: 700;
    line-height: 75px;
     -webkit-text-stroke: 1px #02152e; /* pour les navigateurs basés sur Webkit comme Chrome et Safari */
    text-stroke: 1px #02152e; /* pour les autres navigateurs */

}



.dpe{
    height: 14rem;
    width: auto;
    margin-bottom: 1rem;
}

.conso{
    position: absolute;
    font-weight: bold;
}

.emi{
    position: absolute;
    font-weight: bold;
}

.emi2{
    position: absolute;
    font-weight: bold;
}

.headerTop.mobile{
    display: none!important;
}   


.btn_mob ,.ico-contact{
 display: none;
}



@media (max-width: 1250px){

    header .logo{

        width:17rem;

    }

    .navbar-expand-lg .navbar-nav .nav-link{
        font-size: 1rem;
    }

    .home .d-flex.flex-column.pe-5.pt-4.nav{
        padding-right: 1rem!important;
    }

    .home .d-flex.flex-column.pe-5.pt-4.nav .nav-item.me-4{
        margin-right:0!important;
    }

}

@media (max-width: 991px){
    header .logo {
    width: 12rem;
}


.backLogo{
    top: -13.8353rem;
    left: -11.8588rem;
    width: 24.1976rem;
    height: 24.1976rem;
}

.homeContact .col-lg-8.p-5{
    padding: 0!important;
}


    .titleHome h1{
        font-size: 1.5rem;
    }

    footer .logoFooter {
    width: auto;
    margin-left: auto; 
    margin-top: 0; 
    margin-bottom: 2rem;
    margin-right: auto;
}

    .triangle-div svg {
    /* Unicode pour la flèche vers le bas, vous pouvez également utiliser une icône ou une image */
    cursor: pointer;
    position: absolute;
    bottom: -15%; /* position initiale */
    left: 80%;
    animation: moveUpDown 1s infinite alternate; /* animation de montée et descente */
    z-index: 2;
    height: 30px;
}

@keyframes moveUpDown {
    0% {
        bottom:-15%;
    }
    100% {
        bottom: calc(-15% + 0.5rem);
    }
}

    .white {

        margin-right: 0rem;
    }

    .headerTop.mobile .me-4{
        margin-right: 1rem!important;
    }

    .mp-0{
       padding: 0!important;
       margin: 0!important;
   }

.home{
    height: 10rem;
}

.headerTop {
    display: none!important;
}

.headerTop.mobile{
    display: block!important;
}    

.navbar-toggler{
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.nav{
    padding: 0!important;
    margin: 0!important;
    width: 100%;
    position: absolute;
    top: 0;
}

.nav .navbar {
   padding: 0!important;
   margin: 0!important;
   background-color: #02152e;
   width: 100%;
}

.nav .navbar ul{
    padding-top: 4rem;
}

.nav .navbar li{
    align-self: end;
    margin: 0 1rem 0 0!important;
}

.titleHome {
    margin-top: 14rem;
    margin-bottom: 1rem;
}

.topHome .d-flex{
    flex-direction: column;
}

.rotateBordered {
    align-self: center;
    width: 8rem;
    height: 8rem;
    font-size: 1.3rem!important;

}

.moveUp svg #Arrow-up-anim path{
    fill: #FBF5F5;
}

footer {

    height: 18rem;

}

.triangle-left{
    display: none;
}

.triangle-right {
    position: relative;
    clip-path: none;
    justify-content: flex-start;
}

footer .logo {
    width: 80%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: block;
}

.title{
    text-align: center;
}

.homeAgence .pe-5 , .share .pe-5{
    padding-right: 0!important;
}

.share{
    padding-bottom: 5rem;
}

.homeAgence, .homeContact {
    padding: 5rem 1rem 3rem;
    position: relative;
}

.homeContact .d-flex.justify-content-between.align-items-center{
    flex-direction: column;
}

.checkbox_regular{
    margin-bottom: 2rem;
}

#carouselBien  .carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
}

.carousel-inner .carousel-item .row > div:nth-child(2),.carousel-inner .carousel-item .row > div:nth-child(3) {
    display: none;
}

.pt-20 {
    padding-top: 14rem;
}

.section_biens .d-flex.justify-content-between{
    flex-direction: column;
}

.section_biens .d-flex.justify-content-between .btn{
    margin-left: 0!important;
    margin-bottom: 2rem;
}

.moveUp{
    left: 1rem;
    top: -5%;
    animation: moveUpDown2 1s infinite alternate;
    z-index: 2;
}

@keyframes moveUpDown2 {
    0% {
        top: -5%;
    }
    100% {
        top: calc(-5% + 0.8rem);
    }
}

.btn_mob {
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 5;
    right: 15px;
    bottom: 15px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #0E36BC;
    border:none;
}
.btn_mob svg {
    margin: auto;
    width: 26px;
    height: auto;
    align-self: center;
}

.modal-content{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.search_form.p-5{
    padding: 1rem!important;
}

.search_form .row{
    --bs-gutter-x: 0;
}

.search_form .alerteButton {
    text-align: center;
    margin-top: 2rem;
}

.search_form .btn{
    margin: auto!important;
}

.search_form .form--submit{
    flex-direction: column-reverse;
}

.conseiller {
    position: relative;
    width:100%;
    top: 0;
    margin-top: 12rem;
}

.section_biens, .section_detail {
    padding-left: 1rem;
    padding-right: 1rem;
}

.blackPrice,.bleuTag{
    width: 100%;
    margin-bottom: 1rem;
    margin-left: 0!important;
}


@media screen and (min-aspect-ratio: 1/1) {
   .gallery-content {
     width:auto;
    height: 100%;
  
    max-width:100%;


}
}


@media screen and (max-aspect-ratio: 1/1) {
     .gallery-content {
     width:100%;
    height: auto;
    max-width:100%;
}
}

.close-gallery {
    position: absolute;
    top: -1rem;
    right: 0;
    cursor: pointer;
}

.ico-contact{
    display: block;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    cursor: pointer;
    z-index: 50;
}

.ico-contact svg path{
    fill: #0E36BC;
}

.modal-body .p-5{
    padding: 1rem!important;
}

.modal-body .mb-5{
    margin-bottom: 1rem!important;
}

.modal-body .d-flex.justify-content-between.align-items-center{
    flex-direction: column;
}

.modal .modal-dialog {
    max-width: 96%;
    width: 996px;
    margin-top: 4rem;
}

.topHome,.topHome #carouselHeader .carousel-item,.topHome #carouselHeader,.topHome #carouselHeader .carousel-inner{
    height: 60rem;
    
}

.carouselBien {
   margin-top: 60rem;
}

.home .d-flex.flex-column.pe-5.pt-4.nav {
    padding-right: 0!important;
}

.home .d-flex.flex-column.pe-5.pt-4.nav .nav-item.me-4 {
    margin-right: 1rem!important;
}

.headerTop {
    margin-left: auto;
    margin-right: 0;
}

}