.listContainer {
    display: flex;
    flex-direction: column;
}

/* Strcuture Global de la page*/
#blocAnn{order:1}
#blocFaq{order:6}
#blocTxt{order:5}
#blocforAI{order:4}
#blocAvis{order:7}
#blocServ{order:8}

noscript {display:none}

.centerul {    width: fit-content;
    margin: 0 auto;}


/* Ordre au sein du blocAnn */
#blocSponso{order:0}
#blocList{order:1}
#blocPagin{order:2}
#bloc300{order:3}

[data-bs-theme=dark] .show-more-button {
    background: #1e242d
}

[data-bs-theme=dark] .filterclass {
    background-color: rgba(var(--bs-light-rgb))
}

[data-bs-theme=dark] .btn-outline-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fff;
    --bs-gradient: none;

}
[data-bs-theme=dark] .btn-outline-dark:hover {color:#CCC}


.error-message { color: red; font-size: 0.9em; margin-top: 5px; }
.success-message { color: green; font-size: 0.9em; margin-top: 5px; }
.slider-section {
    margin-top: 20px;
    padding: 5px;     
       
}
.rayon-value {
    font-weight: bold;
    color: var(--bs-primary);
}

.p-3 {
    padding: 1.3rem;
}

.mb-2-5 {
    margin-bottom: 0.75rem !important
}

.swal2-confirm,.swal2-deny {margin-right: 10px;}

.card-badge {
    top: 10px;
    border-top-right-radius: .0px;
    border-bottom-right-radius: 0px;
    padding: 2px 8px;
    font-size: 0.719rem !important;
}

.card-badge+.card-badge {
    top: 40px;
}

.accordion-item {
    border: none !important
}

.accordion-button::after {
    height: 30px;
    width: 30px;
    border: 0
}

.accordion-button:hover::after {
    background-color: rgb(255 255 255);
    border-color: transparent;
    background-image: var(--bs-accordion-btn-icon)
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button {
    padding-left: 0rem
}


.expl h2 {
    font-size: 25px
}
.expl h3 {
    font-size: 20px
}
.expl h4 {
    font-size: 16px
}

.expl p {
    font-size: 15px
}

.expl a {
    color: #E42620;
    text-decoration: underline
}

.expl a:hover {
    color: #b41712
}

.filterclass {
    height: 30px !important;
    transition: 0s;
}

.divfilter {
    max-height: 263px
}

.filtbloc {margin-bottom: 1px !important}
.filtbloc:hover {
    opacity: .9;
    cursor: pointer
}

.filtbloc:hover .whitebloc {
    text-decoration: line-through;
}

.filtbloc:hover em {
    color: var(--bs-primary);
}

.show-more.visible {
    max-height: 6800px;
}

.show-more {
    max-height: 221px;
    overflow: hidden;
    position: relative;
    transition: max-height 1s;
}

.show-more.visible .show-more-button,
.show-more.visible:after {
    opacity: 0;
    visibility: hidden;
}

.show-more-button,
.show-more:after {
    position: absolute;
    left: 0;
    display: block;
}

.show-more-button {
    width: 100%;
    bottom: 0;
    /* margin-left: 50%; */
    /* transform: translateX(-50.5%); */
    z-index: 10;
    /* text-align: center; */
    opacity: 1;
    background: #FFF;
    display: block;
    visibility: visible;
    padding: 5px;
}

/* RATING */
.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center
}

.rating>input {
    display: none
}

.rating>label {
    position: relative;
    width: 1em;
    font-size: 25px;
    font-weight: 600;
    color: #fbbc04;
    cursor: pointer
}

.rating>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
    opacity: 1 !important
}

.rating>input:checked~label:before {
    opacity: 1
}

.rating:hover>input:checked~label:before {
    opacity: 0.4
}
.lh-20 {line-height: 20px !important;}
.lh-25 {line-height: 25px !important;}

.tracking-tight {letter-spacing: -0.025em;}


.rating-point .h3 {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    letter-spacing: -0.5px;
}

.form-control, .form-select {height:47px}


.csm-mobile-trigger,.csm-trigger {
    cursor: pointer;
    position: absolute
}

.compare-slide-menu {
    position: fixed;
    top: 0;
    transition: .4s ease-in-out;
    height: 100vh;
    background-color: #fff;
    right: -320px;
    width: 320px;
    padding: 0;
    z-index: 1010;
    box-shadow: 0 0 25px rgba(0,0,0,.1)
}

.csm-content {
    overflow-y: scroll;
    height: 100%;
    width: 340px
}

.compare-slide-menu.active {
    right: 0
}

.csm-content .h4,.csm-trigger {
    background-color: #66676b;
    color: #fff;
    text-align: center;
}

.compare-button:hover,.like-icon:hover {
    z-index: 110
}

.compare-button .tip-content:after,.like-icon .tip-content:after {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: -4px;
    font-size: 17px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    transform: translate(0,-50%)
}

.compare-button:hover .tip-content:after,.like-icon:hover .tip-content:after {
    opacity: 1
}

.csm-trigger{top:80%;position:fixed;left:-40px;width:105px;background-color:#E42620;color:#fff;border-radius:0;border-top-left-radius:6px;border-top-right-radius:6px;line-height:24px!important;height:25px;padding:0;font-size:12px;transform:rotate(90deg)}
.csm-trigger:before{content:"";font-family:""}
.csm-mobile-trigger{display:block;right:20px;top:5px}
.csm-properties{padding:20px 20px 0}


.compare-slide-menu.active .csm-trigger:before {
    transform: rotate(180deg)
}

.csm-mobile-trigger {
    font-size: 25px;
    right: 20px;
    top: 5px;
    color: #fff;
    z-index: 100;
    padding: 5px 0 5px 5px    
}



.csm-properties {
    padding: 20px 20px 0
}
.csm-properties p {font-size:14px}

.csm-content .h4 {
    font-size: 17px;
    display: block;
    margin: 0;
    padding: 15px;
    font-weight: 300;
    position: relative;
    width: 100%
}

.csm-content .h4:before {
    background: linear-gradient(to top,transparent 20%,rgba(255,255,255,.08));
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 10;
    display: block
}

.csm-buttons a.button.reset:before,.csm-content .compact .listing-img-container:after {
    display: none
}

.csm-content .listing-item.compact {
    padding: 0;
    height: 180px
}

.csm-content .compact .listing-img-content .listing-compact-title {
    padding: 12px 20px;
    font-size: 16px;
    line-height: 22px;
    background: rgba(74,74,76,.5);
    transition: .3s
}

.csm-content .compact .listing-img-content span {
    color: #fff
}

.csm-content .compact .listing-img-content .listing-compact-title i {
    font-size: 13px;
    padding: 0;
    margin: 0;
    opacity: .8
}

.csm-content .listing-badges span {
    color: #fff;
    padding: 0 7px;
    top: 15px;
    line-height: 24px;
    right: 15px;
    font-size: 12px;
    background: rgba(74,74,76,.62)
}

.csm-content .compact .listing-img-container:before {
    opacity: .7!important
}

.csm-buttons {
    padding: 0 30px 30px
}

.csm-buttons a.button {
    padding: 6px 14px;
    font-size: 14px
}

.csm-buttons a.button.reset,.csm-buttons a.button.reset:hover {
    background-color: #ffeaea;
    color: #d53232
}
.crop-text-1 {
    -webkit-line-clamp: 1;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
  }



@media (max-width: 992px) {
    .csm-content .compact .listing-img-container:before,.csm-content .compact:hover .listing-img-container:before {
        opacity:0!important
    }


    .csm-mobile-trigger {
        display: block
    }

    .compare-slide-menu {
        width: 100%;
        right: -100%
    }

    .csm-content {
        width: 100%
    }





}

#compare-list {
    list-style: none;
    margin-bottom: 20px
}

#compare-list li {
    display: flex;
    line-height: 21px;
    background-color: #f8f8f8;
    border-radius: 4px;
    transition: .3s
}

#compare-list li:nth-child(odd) {
    background-color: #fff
}

#compare-list li.compare-list-properties div {
    border: none;
    padding: 0 10px;
    border-radius: 4px;
    overflow: hidden
}

#compare-list li.compare-list-properties div img {
    border-radius: 4px
}

body #compare-list li .clp-title {
    padding: 20px 15px 15px;
    display: inline-block;
    width: 100%;
    border-left: 1px solid transparent
}

#compare-list li.compare-list-properties div.clp-img {
    padding: 0;
    position: relative;
    z-index: 10
}



#breadcrumbs,.back-to-listings {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

body #compare-list li div:last-child .clp-title {
    border-right: 1px solid transparent
}

#compare-list li .clp-title .h4 {
    margin: 3px 0 6px
}

#compare-list li div:first-child {
    border-left: 1px solid transparent;
    color: #333;
    text-align: right;
    text-transform: uppercase;
    font-size: 13px
}

#compare-list li:last-child {
    border-radius: 0 0 4px 4px
}

#compare-list li div.blank-div {
    background-color: #fff;
    border: none
}

#compare-list li div {
    flex: 1;
    border-right: 1px solid transparent;
    padding: 15px 25px;
    color: #777;
    text-align: center
}

#compare-list li {
    border-bottom: 1px solid transparent
}

#compare-list li,#compare-list li div,#compare-list li div:first-child,body #compare-list li .clp-title,body #compare-list li div:last-child .clp-title {
    border-color: transparent
}

#compare-list .available,#compare-list .not-available {
    width: 100%;
    text-align: center;
    display: inline-block
}

#compare-list .available:before,#compare-list .not-available:before {
    content: "\f00c";
    color: #2ab160;
    font-size: 18px;
    display: inline-block
}

#compare-list .not-available:before {
    content: "\e801";
    color: #d43e3e
}

@media (max-width: 992px) {
    .compare-list-container {
        overflow-x:scroll
    }

    #compare-list {
        min-width: 900px;
        zoom:.8}


}
.crop-text-2 {
    -webkit-line-clamp: 2;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }


.compare-slide-menu{box-shadow:none;width:335px;right:-335px;z-index: 9990;border-left: 1px solid #ededed;}
.csm-buttons{padding:5px 20px 30px}

.sponsoa {background: #fff8f8;}
[data-bs-theme=dark]  .sponsoa {background: #5d4f4f;}

#rebours {
    background-color: #E42620;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin:0 50px;
    font-size: 11px;
    font-weight: 700;    
    line-height: 14px;
    height: 24px;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;    
    font-family: "Poppins", sans-serif;
}

#toggle,#toggle2{color:#E42620;text-decoration: underline;font-weight: bold;font-size: 14px;}
.text-mobile, .text-tablet, .text-desktop {
  display: none;
}
@media (max-width: 768px) {
  .text-mobile { display: inline-block; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .text-tablet { display: inline-block; }
}
@media (min-width: 1025px) {
  .text-desktop { display: inline-block; }
}

    /* Style de base pour le bouton */
    .wiggle-button {
      /* Animation appliquée au texte du bouton */
      animation: wiggle-pause 2s ease-in-out infinite;
    }

    /* Keyframes : wiggle (0 → –10 → +10 → 0), puis pause */
    @keyframes wiggle-pause {
      /* 0% → départ sans rotation */
      0% {
        transform: rotate(0deg);
      }
      /* 5% → première bascule à gauche */
      5% {
        transform: rotate(-5deg);
      }
      /* 10% → bascule à droite */
      10% {
        transform: rotate(5deg);
      }
      /* 15% → retour à gauche */
      15% {
        transform: rotate(-5deg);
      }
      /* 20% → retour à droite */
      20% {
        transform: rotate(5deg);
      }
      /* 25% → on revient à la position neutre */
      25% {
        transform: rotate(0deg);
      }
      /* De 25% à 100% on reste immobile (pause) */
      100% {
        transform: rotate(0deg);
      }
    }



.object-fit-cover {
    width: -webkit-fill-available;
}

.list-group-item {
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.list-group-item:active {
    background-color: #d1d1d1; /* Changement de couleur au clic */
    transform: scale(0.95); /* Légère réduction pour effet de pression */
}

.list-group-item:hover {
    background-color: #e0e0e0; /* Effet au survol (optionnel) */
}

.flexmycol {justify-content: left;height:auto}


/* MOTEUR MOBVILE */
.loaderun {
    position: absolute;
    top: 30%;
    right: 18%;
    z-index: 2000;   
    display: none;
}

.form-group label {
    position: relative;
    top: inherit;
    left: inherit;
    
}

.select2-container--bootstrap-5 .select2-selection--single {
    height: 47px !important;
    border-radius: 0.5rem!important;;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{
    padding-top: 5px!important;    
}
.select2-container--bootstrap-5 .select2-selection{
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color2) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color:var(--bs-heading-color)!important;    
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection{
    background-color: var(--bs-body-bg) !important;
}

.form-control:focus, .form-select:focus {border-color:var(--bs-border-color);}

#loaderann {display:none}

.select2-dropdown {z-index: 9991 !important;}
#result-container {line-height: 18px;}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5l6 6 6-6'/%3e%3c/svg%3e");
}

.select2-selection__rendered:not(:has(.select2-selection__placeholder)) {
  font-weight: bold!important;color:var(--bs-body-color) !important;
}


/* ------------------------------------------------------------
   1) On cible l’input de recherche dans le dropdown Select2
      (classe .select2-search__field) lorsqu’il est au focus. 
------------------------------------------------------------ */
.select2-container .select2-dropdown .select2-search__field:focus {
  outline: none !important;               /* supprime l’outline natif (qui fait souvent 2px) */
  box-shadow: 0 0 0 1px #E42620 !important; /* remplace par un « halo » de 1px bleuté */
}

/* ------------------------------------------------------------
   2) Éventuellement, si tu as un thème « Bootstrap » ou un autre
   surcouche qui rajoute un border/box-shadow non désiré,  
   tu peux forcer le style général du champ :
------------------------------------------------------------ */
.select2-container .select2-dropdown .select2-search__field {
  border: 1px solid #ccc;  /* donne-lui une bordure neutre quand il n’est pas focus */
  box-shadow: none;        /* pas d’ombre par défaut */
}

/* ------------------------------------------------------------
   3) Si tu veux être certain·e de bien écraser TOUTES les variantes
   (et si tu as plusieurs thèmes de Select2), tu peux aussi insister 
   sur le focus de cette façon : 
------------------------------------------------------------ */
.select2-container .select2-dropdown .select2-search__field:focus,
.select2-container .select2-dropdown .select2-search__field:active {
  outline: none !important;
  box-shadow: none !important; /* pas d’ombre */
}





/* ========== 1) Désactiver l’outline/box‐shadow de focus pour Select2 ========== */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  outline: none !important;
  box-shadow: none !important;
  border-color: #ccc; /* mettre la couleur de bordure de base, pas de bleu */
}

/* Cas où le plugin ajoute un focus directement sur l’élément */
.select2-container .select2-selection--single:focus,
.select2-container .select2-selection--multiple:focus,
.select2-container .select2-selection--single:active,
.select2-container .select2-selection--multiple:active {
  outline: none !important;
 box-shadow: 0 0 0 1px #E42620 !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #E42620 !important;
    box-shadow:none !important;
}

/* Si tu veux aussi retirer le contour autour du dropdown ouvert */
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
  outline: none !important;
 box-shadow: 0 0 0 1px #E42620 !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
  
    border-color: #E42620 !important;
}

/* ========== 2) Neutraliser le “tap highlight” sur mobile (traitement iOS/Chrome) ========== */
.select2-container,
.select2-container * {
  -webkit-tap-highlight-color: transparent; /* iOS Safari */
  -webkit-focus-ring-color: transparent;    /* Android Chrome */
}

/* Optionnel : si tu veux cible spécifiquement le <select> avant que Select2 ne le remplace */
select:focus {
  outline: none;
  box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection {
font-size:15px!important
}

/* 1) Police normale par défaut */
#rechvoiture select {
    font-weight: normal;
}

/* 2) Quand l’option value="" n’est plus cochée, afficher en gras */
#rechvoiture select:not(:has(option[value=""]:checked)) {
    font-weight: bold;color:var(--bs-body-color)
}

/* (Optionnel) Pour rendre l’option “-- Par défaut --” grisée */
#rechvoiture select option[value=""] {
    color: #888;
}

#rechvoiture .form-select {border: var(--bs-border-width) solid var(--bs-border-color2);box-shadow: none; }  

@media (max-width: 767px) {

    #rechvoiture {
    /* doit avoir une hauteur > viewport pour que le "sticky" fonctionne */
    /*height: 100vh;*/   /* exemple : hauteur suffisante pour scroller */
    position: relative; /* parfois utile pour le contexte */
    }

    #leBouton {
    position: sticky;
    bottom: 0;
    /* largeur, hauteur, styles divers… */
    background-color: var(--bs-light) !important;
    padding: 1rem;
    border-top: 1px solid #ddd;
    min-height:180px;
    }
    span.field-error {
        font-size: 11px;
    }    
}


/* FAQ */
     details {
      background: var(--bs-body-bg);
      border-radius: 8px;
      margin-bottom: 1rem;
      padding: 1rem 1rem 0.8rem 1rem;
     
    }

    details[open] {
      border-color: var(--bs-light);

    }

    summary {
      font-weight: 500;
   font-size: 1rem;   
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
    }

    /* Supprime le contour bleu au clic */
    summary:focus {
      outline: none;
    }

    summary::-webkit-details-marker {
      display: none; /* supprime la flèche par défaut */
    }

    .icon {
      transition: transform 0.3s ease;
    }

    details[open] .icon::before {
      content: "\f068"; /* Font Awesome fa-minus */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
    }

    details:not([open]) .icon::before {
      content: "\f067"; /* Font Awesome fa-plus */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
    }

    details p {
      margin: 0.35rem 0 0.5rem 0;  
      font-size: .95rem;    
    }






/* MEDIA QUERIES */
@media (min-width: 576px) {
    .p-sm-4 {
        padding: 1.15rem !important;
    }

}
@media (min-width: 768px) {
    .p-md-3 {
        padding: 0.85rem !important;
    }
   /* .annlisting {min-height:198px;max-height: 198px;}*/
   .flexmycol {justify-content:center;height:25vh}
    .fs-sm-14 {
        font-size: 14px !important
    }   
    
}
@media (min-width: 992px) {
    .p-lg-4 {
        padding: 1.15rem !important;
    }
    .flexmycol {justify-content:center;height:190px}
 
}
@media (min-width: 1200px) {
    .accordion-button {
        padding-left: 0.7rem
    }
    .annlisting {min-height:230px;max-height: 230px;}
    .annlisting img {max-height: 230px;}
}

@media (min-width: 1400px) {
    .accordion-button {
        padding-left: 0.7rem
    }
    .annlisting img {width: -webkit-fill-available;}
}






@media (max-width: 768px) {
    .fs-xs-11 {
        font-size: 11px !important
    }
    .mh-270 {min-height:240px;max-height: 240px;}
    .greybloc-xs {
        background-color:#FFF
    }

}

@media (max-width: 1199px) {
    .js-sidebar-filters-mobile {
        overflow-y: auto;
        overflow-x: clip;
    }
   .annlisting img {width: -webkit-fill-available;}
   
}