/* --- Card Container --- */
.listing-card { 
    border-radius: 20px; 
    border: 1px solid #f0f0f0; 
    background: #fff; 
    overflow: hidden; 
    max-width: 400px; 
    transition: transform 0.2s ease-in-out;
}
.listing-card:hover { transform: translateY(-4px); }

/* --- Image & Carousel Wrapper --- */
.img-wrap { 
    position: relative; 
    height: 230px; 
    overflow: hidden; 
    background: #f1f5f9; 
}
.carousel, .carousel-inner, .carousel-item { height: 100%; }
.carousel-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

/* --- Navigation Controls (Ultra-visibles) --- */
.carousel-dark-round {
    width: 36px !important; 
    height: 36px !important; 
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important; 
    top: 50% !important; 
    transform: translateY(-50%);
    opacity: 0; 
    transition: all 0.3s ease; 
    margin: 0 10px;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}
.img-wrap:hover .carousel-dark-round { opacity: 1; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(1) grayscale(100%) brightness(0); /* Force les flèches en noir */
    width: 18px; 
    height: 18px;
}

/* --- Badges de l'image (Z-index 25 pour rester devant) --- */
.badge-new { 
    position: absolute; top: 15px; left: 15px; 
    background: #719a86; color: #fff; padding: 4px 14px; 
    border-radius: 12px; font-weight: 600; font-size: 0.85rem; z-index: 25; 
}

.price-pill-top { 
    position: absolute; top: 15px; right: 15px; 
    background: white; color: #1a1a1a; padding: 6px 16px; 
    border-radius: 12px; font-weight: 800; font-size: 0.95rem; 
    z-index: 25; box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}

.photo-count-pill, .photo-counter { 
    position: absolute; bottom: 15px; right: 15px; 
    background: rgba(15, 23, 42, 0.7); color: white; 
    padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; 
    z-index: 25; backdrop-filter: blur(4px);
}

/* --- Lazyload Core --- */
.lazy-wrapper { position: relative; height: 100%; width: 100%; }
.spinner-lazy { position: absolute; top: 48%; left: 48%; z-index: 1; }
img[data-lazy-src] { opacity: 0; transition: opacity 0.5s ease-in-out; }
.img-loaded { opacity: 1 !important; }

/* --- Card Body & Typography --- */
.card-body-custom { padding: 20px; }

.availability-pill { 
    background: #fef3e7; color: #d97706; padding: 5px 12px; 
    border-radius: 8px; font-size: 0.8rem; font-weight: 700; 
    display: inline-flex; align-items: center; margin-bottom: 12px;
}
.availability-now { background: #ecfdf5; color: #059669; }

.main-title { font-weight: 800; font-size: 1.15rem; color: #1e293b; margin-bottom: 4px; }
.location-text { color: #64748b; font-size: 0.92rem; margin-bottom: 15px; display: flex; align-items: center; gap: 6px; }

.separator { border: none; border-top: 1px solid #f1f5f9; margin: 15px 0; }

/* --- Info Line (Chambres/SdB) --- */
.info-line-detail { 
    display: flex; align-items: center; gap: 12px; 
    color: #475569; font-size: 0.88rem; font-weight: 600; margin-bottom: 15px; 
}
.info-line-detail i { color: #94a3b8; }

/* --- Meta Blocks (DPE / Bail) --- */
.meta-row-custom { display: flex; gap: 10px; margin-bottom: 20px; }
.meta-item { 
    flex: 1; background: #f8fafc; border-radius: 10px; 
    border: 1px solid #f1f5f9; padding: 10px 12px; 
    display: flex; align-items: center; justify-content: space-between; 
    font-size: 0.85rem; font-weight: 600; color: #334155;
}
.dpe-pill { 
    color: #fff; padding: 2px 8px; border-radius: 4px; 
    font-weight: 800; font-size: 0.75rem; 
}

.compat-box { 
    background: #f0fdf4; color: #166534; padding: 12px; 
    border-radius: 10px; font-weight: 700; font-size: 0.85rem; 
    display: flex; align-items: center; margin-bottom: 15px;
}

/* --- Buttons Action --- */
.btn-voir { 
    display: block; /* Force le lien à se comporter comme un bloc pour prendre le width: 100% */
    text-align: center; /* Centre le texte à l'intérieur du lien */
    text-decoration: none; /* Enlève le soulignement par défaut des liens */
    background: #7a8ec7; color: white; border: none; width: 100%; 
    padding: 12px; border-radius: 12px; font-weight: 700; 
    margin-bottom: 10px; transition: background 0.2s;
}
.btn-voir:hover { background: #6375ac; color: white; }

.btn-fav { 
    display: flex; /* Permet d'utiliser align-items et justify-content */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #f1f3f9; color: #475569; border: 1px solid #e2e8f0; 
    padding: 10px; border-radius: 10px; flex: 1; font-weight: 600; font-size: 0.85rem;
}

.btn-postuler { 
    display: flex; /* Idem pour centrer l'icône et le texte */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #719a86; color: white; border: none; 
    padding: 10px; border-radius: 10px; flex: 1; 
    font-weight: 700; transition: opacity 0.2s;
}
.btn-postuler:hover { opacity: 0.9; color: white; }


/* On cible la zone des miniatures pour la faire remonter */
.thumb-overlap-zone {
    position: relative;
    z-index: 10;
    margin-top: -65px; /* Fait remonter les miniatures sur l'image */
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#swiper_secondary {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 5px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Correction pour l'image principale pour qu'elle soit bien arrondie */
#swiper_primary {
    border-radius: 24px !important;
    overflow: hidden;
}

/* Style de la miniature active pour ton framework */
#swiper_secondary .swiper-slide-thumb-active img {
    border: 2px solid #6c7ae0 !important; /* Couleur lavande */
}

/* On s'assure que les flèches sont bien au-dessus */
.swiper-button-next, .swiper-button-prev {
    z-index: 11;
}

/* Conteneur des onglets */
#roomTabs {
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    white-space: nowrap;
    overflow-x: auto; /* Active le scroll horizontal */
    scrollbar-width: none; /* Cache la scrollbar sur Firefox */
}

#roomTabs::-webkit-scrollbar {
    display: none; /* Cache la scrollbar sur Chrome/Safari */
}

/* Optionnel : Un léger dégradé à droite pour indiquer qu'il y a une suite */
.section-card {
    position: relative;
}

/* Style des boutons pour qu'ils soient plus compacts */
.nav-pills-livn .nav-link {
    border-radius: 20px;
    margin-right: 8px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #666;
}

.nav-pills-livn .nav-link.active {
    background-color: var(--bs-primary); /* ou ta couleur */
    border-color: var(--bs-primary);
}


@media (max-width: 768px) {
    .ficheBadges-scroll {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .ficheBadges-scroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .ficheBadges-scroll a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


.toast{
		display: none;
	}


select.chosen-select{
  width:400px;
  padding: 8px 16px;
  option{
    font-size:14px;
    padding:8px 8px 8px 28px;
    position:relative;
    color:#000;
    
    
    &:before{
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0px;
        border:1px solid #ccc;
        border-radius: 2px;
        z-index: 1;
      }
    
    &:checked{

        &:after{
          content: attr(title);
          color:black;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          padding: 8px 8px 8px 28px;
          border: none;
        }


        &:before{
          border-color: blue;
          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMC42MSA4LjQ4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNlODhmYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFzc2V0IDg8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJfMSIgZGF0YS1uYW1lPSIxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9Ii0wLjAzIiB5PSI1LjAxIiB3aWR0aD0iNSIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljk3IDAuMDEpIHJvdGF0ZSg0NSkiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjUuMzYiIHk9Ii0wLjc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC44NiAtMy4yNikgcm90YXRlKDQ1KSIvPjwvZz48L2c+PC9zdmc+);
          background-size: 10px;
          background-repeat: no-repeat;
          background-position: center;
        }

      }
    
  }
}

.user-toggle {
    display: flex;
    justify-content: space-between;
    gap: 0.15rem;
    flex-wrap: nowrap;
}

.user-toggle a {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0.4rem;
    border-radius: 30px;
    border: 1px solid #ced4da;
    text-decoration: none;
    font-weight: 500;
    color: #495057;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    font-size: 0.65rem;
    transition: all 0.2s;
    min-width: 60px;
}

.user-toggle a.active.proprio {
    background-color: #007E85;
    color: #fff;
    border-color: #007E85;
}

.user-toggle a.active.locataire {
    background-color: #F5945D;
    color: #fff;
    border-color: #F5945D;
}

/* Global n’a pas de couleur spécifique */
.user-toggle a.active.global {
    background-color: #e9ecef;
    color: #495057;
    border-color: #ced4da;
}

.user-toggle a:hover {
    background-color: #e9ecef;
    color: #000;
}

.user-toggle i {
    font-size: 1rem;
}

/* Texte disparaît sur très petit écran */
@media (max-width: 360px) {
    .user-toggle span {
        display: none;
    }
}
/* Design Maé*/

.bg-locataire-1
{
	background-color: #FBE8D5;
}
.bg-locataire-2
{
	background-color: #F5945D;
}
.bg-proprio-1
{
	background-color: #E3F5F5;
}
.bg-proprio-2
{
	background-color: #007E85;
}


/* PRINCIPAL */

/* --------- BOUTON PRINCIPAL (Bootstrap .btn-primary) --------- */
/* --------- BOUTON PRINCIPAL (Bootstrap .btn-primary) --------- */
.btn-primary {
  border-radius: 10px;
  background: var(--Bleu-marine, #011D2D) !important;
  color: var(--Neutral-Clair-1, #FAFAFA) !important;
  line-height: normal;
  border: none;
  transition: all 0.2s ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--Beige-clair, #FAF7F4) !important;
  color: var(--Bleu-marine, #011D2D) !important;
}

.btn-primary.active {
  background: var(--Beige-clair, #FAF7F4) !important;
  color: var(--Bleu-marine, #011D2D) !important;
}


/* --------- BOUTON SECONDAIRE (Bootstrap .btn-secondary) --------- */
.btn-secondary {
  border-radius: 10px;
  border: 1px solid rgba(1, 29, 45, 0.30);
  background: transparent !important;
  color: var(--Bleu-marine, #011D2D) !important;
  line-height: normal;
  transition: all 0.2s ease-in-out;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--Bleu-marine, #011D2D) !important;
  color: var(--Neutral-Clair-1, #FAFAFA) !important;
}



/* --------- CHECKBOX (Bootstrap .form-check-input[type="checkbox"]) --------- */
.form-check-input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 3.5px;
  border: 1px solid rgba(1,29,45,0.2);
  cursor: pointer;
}
.form-check-input[type="checkbox"]:checked {
  background-color: #011D2D;
  border-color: #011D2D;
}
.form-check-label {
  margin-left: 10px;
  color: #011D2D;
  font-family: Urbanist, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* --------- RADIO (Bootstrap .form-check-input[type="radio"]) --------- */
.form-check-input[type="radio"] {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(1,29,45,0.2);
  cursor: pointer;
  position: relative;
}
.form-check-input[type="radio"]:checked {
  background-color: #fff;
  border-color: #011D2D;
}
.form-check-input[type="radio"]:checked::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #011D2D;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*FIN PRINCIPAL */


/* BLOG */
/* --------- Bouton principal Blog --------- */
.btn-blog {
  border-radius: 10px;
  background: var(--Jaune-moutarde, #F7B441);
  color: var(--Neutral-Clair-1, #FAFAFA);
  font-weight: 700;
  line-height: normal;
  text-align: center;
  border: none;
  transition: all 0.3s ease;
}
.btn-blog:hover,
.btn-blog:focus {
  background: var(--Beige-clair, #FAF7F4);
  color: var(--Bleu-marine, #011D2D);
  text-decoration: none;
}

/* --------- Bouton secondaire custom --------- */
.btn-blog-secondary {
  border-radius: 10px;
  border: 1px solid rgba(1, 29, 45, 0.30);

  background: transparent;
  color: var(--Bleu-marine, #011D2D);
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  transition: all 0.3s ease;
}
.btn-blog-secondary:hover,
.btn-blog-secondary:focus {
  background: var(--Bleu-marine, #011D2D);
  color: var(--Neutral-Clair-1, #FAFAFA);
  text-decoration: none;
}

/* --------- Tags --------- */
.tag-blog {
  display: inline-flex;
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 5px;
  background: var(--Jaune-moutarde, #F7B441);

  color: var(--Blanc, #FCFCFC);
  font-family: Urbanist, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

/* FIN BLOG*/

/* -------------------------------
   Propriétaire
---------------------------------*/

/* Bouton principal propriétaire */
/* Bouton principal propriétaire */
.btn-proprietaire {
    border-radius: 10px;
    background: var(--Bleu-canard, #007E85);
    border: none;
    color: var(--Neutral-Clair-1, #FAFAFA);
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-right: 0.5rem;
}

/* Hover propriétaire */
.btn-proprietaire:hover {
    background: var(--Beige-clair, #FAF7F4);
    color: var(--Bleu-marine, #011D2D);
}

/* Actif propriétaire */
.nav-tabs .btn-proprietaire.active,
.nav-tabs .btn-proprietaire:active {
    background: var(--Bleu-canard, #007E85);
    color: var(--Neutral-Clair-1, #FAFAFA);
    box-shadow: none;
    border: none;
}

/* Inactif propriétaire */
.nav-tabs .btn-proprietaire:not(.active) {
    background: transparent;
    color: var(--Bleu-marine, #011D2D);
    border: 1px solid rgba(1, 29, 45, 0.30);
}

/* Hover inactif propriétaire */
.nav-tabs .btn-proprietaire:not(.active):hover {
    background: var(--Bleu-canard, #007E85);
    color: var(--Neutral-Clair-1, #FAFAFA);
}


/* Bouton secondaire */
.btn-proprietaire-secondaire {
  border-radius: 10px;
  border: 1px solid rgba(1, 29, 45, 0.30);
  background: transparent;

  color: var(--Bleu-marine, #011D2D);
  
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-proprietaire-secondaire:hover {
  background: var(--Bleu-marine, #011D2D);
  color: var(--Neutral-Clair-1, #FAFAFA);
}

/* -------------------------------
   LIBELLÉS (Checkbox + Radio style)
---------------------------------*/



/* Global libellé (texte + icône) */
.form-check-label-proprietaire {
  display: inline-flex;
  align-items: center;
  gap: 15px;

  color: #011D2D;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

/* Carré "non coché" */
.label-proprietaire-checkbox .box {
  width: 20px;
  height: 20px;
  border-radius: 3.5px;
  border: 1px solid rgba(1, 29, 45, 0.2);
  display: inline-block;
  transition: all 0.2s;
}

/* Carré "coché" */
.form-check-input-proprietaire:checked + .box {
  background: var(--Bleu-canard, #007E85);
  border: none;
}

/* Rond "non coché" */
.label-proprietaire-radio .circle {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(1, 29, 45, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}

/* Rond "coché" */
.form-check-input-proprietaire:checked + .circle::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--Bleu-canard, #007E85);
  display: block;
}

/* Exemple spécial couleur différente */
.form-check-input-proprietaire:checked + .circle.orange::after {
  background: #F5945D;
}


/*fin propriétaire*/

/* locataire */

/* -------------------------------
   BOUTONS LOCATAIRE
---------------------------------*/
/* Bouton principal locataire */
.btn-locataire {
    border-radius: 10px;
    background: var(--Orange-corail, #F5945D);
    border: none;
    color: var(--Neutral-Clair-1, #FAFAFA);
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-right: 0.5rem;
}

/* Hover locataire */
.btn-locataire:hover {
    background: var(--Beige-clair, #FAF7F4);
    color: var(--Bleu-marine, #011D2D);
}

/* Actif locataire */
.nav-tabs .btn-locataire.active,
.nav-tabs .btn-locataire:active {
    background: var(--Orange-corail, #F5945D);
    color: var(--Neutral-Clair-1, #FAFAFA);
    box-shadow: none;
    border: none;
}

/* Inactif locataire */
.nav-tabs .btn-locataire:not(.active) {
    background: transparent;
    color: var(--Bleu-marine, #011D2D);
    border: 1px solid rgba(1, 29, 45, 0.30);
}

/* Hover inactif locataire */
.nav-tabs .btn-locataire:not(.active):hover {
    background: var(--Orange-corail, #F5945D);
    color: var(--Neutral-Clair-1, #FAFAFA);
}

/* Bouton secondaire (commun avec propriétaire) */
.btn-locataire-secondaire {
  border-radius: 10px;
  border: 1px solid rgba(1, 29, 45, 0.30);
  background: transparent;

  color: var(--Bleu-marine, #011D2D);
 
  line-height: normal;

  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-locataire-secondaire:hover {
  background: var(--Bleu-marine, #011D2D);
  color: var(--Neutral-Clair-1, #FAFAFA);
}


/* -------------------------------
   LIBELLÉS LOCATAIRE (Checkbox + Radio)
---------------------------------*/

/* Global label style */
.label-locataire-checkbox,
.label-locataire-radio {
  display: inline-flex;
  align-items: center;
  gap: 15px;

  color: #011D2D;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

/* Carré "non coché" */
.label-locataire-checkbox .box {
  width: 20px;
  height: 20px;
  border-radius: 3.5px;
  border: 1px solid rgba(1, 29, 45, 0.2);
}

/* Carré "coché" version locataire */
.label-locataire-checkbox .box.checked {
  background: var(--Orange-corail, #F5945D);
  border: none;
}


/* Rond "non coché" */
.label-locataire-radio .circle {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(1, 29, 45, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rond "coché" version locataire */
.label-locataire-radio .circle.checked::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--Orange-corail, #F5945D);
}


/* -------------------------------
   TAGS LOCATAIRE
---------------------------------*/

.tag-locataire {
  display: inline-flex;
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 5px;
  background: var(--Orange-corail, #F5945D);

  color: var(--Blanc, #FCFCFC);
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}


/* fin locataire */