@import url(https://fonts.googleapis.com/css?family=Outfit:100,200,300,regular,500,600,700,800,900);


.font_outfit{
  font-family: "Outfit" !important;
 }

 .gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    width: 100%;
    border-radius: 2.5em;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    position: relative;
}
/* Pour que le JS ne casse pas le responsive */
.gallery {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr !important;
    }
}

.kv-fileinput-error.file-error-message{
  color: #ff6060 !important;
}

/* desc  */
.desc_ne p{
  padding: 1em;
  border: 1px solid #E2E8F0;
  border-radius: 0.8em;
  margin-top: 1em;
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr;           /* une seule colonne */
        grid-template-rows: auto auto;        /* main en haut, side en bas */
        height: auto;
        gap: 12px;
    }

    .main {
        height: 320px;           /* un peu plus haut sur mobile, tu peux ajuster */
    }

    .side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* mieux que fixe */
        grid-template-rows: none;   /* important : on laisse les lignes se créer naturellement */
        height: auto;               /* crucial pour le responsive */
        gap: 8px;
        padding: 0;
    }

    .side img {
        height: 100%;
        aspect-ratio: 1 / 1;        /* miniatures carrées, plus propres */
    }

    /* On force le reset des styles dynamiques JS sur mobile */
    .side {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
        grid-template-rows: repeat(auto-fit, minmax(80px, 1fr)) !important;
    }
}

/* Optionnel mais recommandé : petit ajustement pour très petits écrans */
@media (max-width: 480px) {
    .main {
        height: 280px;
    }
    
    .side {
        grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
    }
}
.div_aspet {
    height: 25em;
}

/* grande image */
.main {
    height: 100%;
    min-height: 100%;
    position: relative;
}

.main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Side avec grille dynamique */
.side {
    display: grid;
    gap: 10px;
    height: 100%;
    min-height: 100%;
}

/* Adaptation dynamique selon nombre de miniatures */
.side:has(> img:nth-child(1):only-child) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.side:has(> img:nth-child(2):nth-last-child(1)) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

.side:has(> img:nth-child(3)) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* global */
.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    min-height: 100%;
}

.gallery img:hover {
    opacity: 0.95;
}

.absolute_p {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 1.5em;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    padding: 1em;
    border-radius: 0.8em;
    border: none;
    outline: none;
    cursor: pointer;
}

.nav_pop_detail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: black;
    border: none;
    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.1s;
    z-index: 2;
}

.nav_pop_detail:hover {
    scale: 1.02;
    opacity: 0.95;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* ===== MODAL CAROUSEL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000f1 !important;
    z-index: 99999;
}

.modal-content-carousel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: none !important;
}

.modal-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.modal-main img {
    max-width: 90%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.5em;
}

.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    cursor: pointer;
}

.modal-prev {
    left: 20px;
}

.modal-next {
    right: 20px;
}

.modal-thumbs {
  display: flex;
  gap: 10px;
  padding: 11px;
  overflow-x: auto;
  justify-content: flex-start;
  background: #ffffff2e;
  width: auto;
  margin: auto;
  border-radius: 1em;
  scroll-behavior: smooth;
}

.modal-thumbs img {
    min-width: 70px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    border-radius: 8px;
    transition: 0.2s;
}

.modal-thumbs img.active {
    opacity: 1;
    border: 2px solid white;
}

.title_modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: auto;
    color: white;
}

.closes {
    background: #0000004f;
    width: 2em;
    height: 2em;
    min-height: 2em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
    font-weight: 800;
    cursor: pointer;
    z-index: 999;
    color: white;
    border: 0.5px solid #ffffff26;
}

  @media (max-width: 400px) {
    .white-bx-shadow .ul_grid_tojo_new{
      grid-template-columns: 1fr !important;

    }
  }
  @media (max-width: 768px) {
    .gallery {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      height: auto;
    }

  
    .ul_grid_tojo_new{
      grid-template-columns: 1fr 1fr 1fr !important;

    }

    .main {
      height: 250px;
    }

    .side {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: none;
      height: 80px;
    }

    .side img {
      height: 100%;
    }

    .modal-thumbs {

  width: 250px !important; /* 🔥 3 images visibles */

}
  }

/* grid 4   */
.ul_grid_tojo_new{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1em;
  margin-top: 1em;
}

@media screen and (max-width: 600px) {
    .ad-det-slider-hdr {
        position: relative;
        padding: 1em !important;
        display: grid;
        grid-template-columns: auto !important;
        gap: 0.5em;
    }
}

 .round-top {
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
  }

  .round-bottom {
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
  }
  /* description */
  .h4_flex {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #b1b1b1;
    padding: 0.5em 0;
  }

  .d_flex_flex {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    list-style-type: none;
    padding-left: 0;
  }

  .li_new {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background: #EFF6FF;
    padding: 0.5em 1.5em;
    border-radius: 1em;
  }
.justiefy_betwe{
  justify-content: space-between;
  flex-wrap: wrap;
}
 

.list-with-dot li:before{
     display: none;
   }
   .list-with-dot li {
    position: relative;
    color: #757577;
    padding-left: 0;
    display: flex;
    gap: 1em;
}

.icon-hdd {
    border-bottom: 0;
    margin-bottom: 0.8em;
    padding-bottom: 0;
    padding-left: 35px;
    position: relative;
}


/* new style */



.sub_bottom{
    bottom: 0;
    font-size: 0.5em;
}

.action_div_tj{
    padding-bottom: 0.5em;
    border-bottom: 1px solid #a3a3a3;
    margin-bottom: 1em;
}

.btn_tojo_new{
    padding: 0.8em;
    background: #4B8FCC;
    border-radius: 0.8em;
    color: white;
    border: none;
    cursor: pointer;
}
.btn_tojo_new_out{
        padding: 0.8em;
    background: none;
    border-radius: 0.8em;
    color: black;
    border: 1px solid #718096 !important;
    cursor: pointer;
}

.border_radius_1{
    border-radius:1em;
}

.bg_clair{
    background: #F8FAFC;
    padding: 0.3em 0.5em;  display: flex;
    justify-content: center;
    border-radius: 2em;flex: 1;
    margin-top: 0.2em;
    width: 100%;
}

.flex1_row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.flex2_row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}


/* user détails */

.pdp-user-details {
    width: 3.5em;
    border-radius: 50%;
    margin-top: 0;
    margin-bottom: 0;
    object-fit:cover;
    height: 3.5em;
}

.member_type{
    background: #F0FDF4;
    padding: 0.3em;
    width: max-content;
    color: #166534;
}

.d-flex-col{
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    margin-top: 1em;
}

.gap_1{
    gap: 1em;
}

 #message-flash-button{
      background: linear-gradient(90deg, #EA580C, #F97316) !important;
      border-radius: 1em;
  }

  .d_col{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5em;
  }

  /* similar */

  .d_flex_flex_tojo {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    margin-bottom: 1em;
  }
  
.swiper {
  width: 100%;
}

.swiper-slide {
  height: auto;
}
  .title_suggestions {
    bottom: 0;
    background: #337ab7;
    /* width: 130px; */
    /* height: 96px; */
    text-align: start;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em;
  }

  .card_tjo {
    /* background: red; */
    display: block;
    border-radius: 1em;
    /* width: 100%; */
    /* height: 100%; */
    overflow: hidden;
  }

  .tj-bd-desc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1em;
  }

  .swiper-slide a {
    text-decoration: none;
    color: initial;
  }

  .meubléStyle {
    background: #4ADE80;
    color: black;
    padding: 0.3em 0.8em;
    border-radius: 2em;
  }

  .size_font_2 {
    font-size: 1.5em;
    font-weight: 600;
  }

  .img_aspet_t {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 14;
  }

  .swiper{
    height: max-content;
  }
  .swiper-slide{
    height: max-content;
  }

  .navtj
 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: black;
    border: none;
    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.1s;
    z-index: 2;
}

.nexttj{
  right: 0;
}

.swiper-button-next, .swiper-button-prev {

    color: black;
    /* font-size: 0.8em; */
    background: white;
    width: 2em;
    height: 2em;
    padding: 3em;
    border-radius: 50%;
    zoom: 0.4;
    transform-origin: center;
}


.white-bx-shadows{
  background: white;
  padding: 1em;
  border-radius: 1em;
}

.suggestion_image_no_pic_basic1 {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: auto;
    border: 0;
    margin-top: 0;
    border-radius: 50%;
}

p+p {
    margin-top: 0;
}

/* searchorad */

.btn_post_new{
          padding: 0.5em 2em;
          border-radius: 3em;
          border: none;
          background: #4B8FCC;
          color: white;
  }

  .search-or-add{
      display: flex;
      justify-content: center;
      margin-top: 0.8em;
  }

  .form-control{
      border-radius: 3em;
      margin-top:1em;

  }

  .li_new_loyer .div strong:nth-child(2) {
      color: rgb(16, 15, 15); /* exemple */
  }