@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;
     }
 }

 #signal-modal {

     background: #0000000d !important;

 }

#comments-zone {
    /* background: white; */
    padding: 1.2em;
    border-radius: 0.3em;
    margin-top: 1em;
}
.comment-view-list {
    margin-top: 0;
    margin-bottom: 0;
    background: white;
    padding: 0.8em;
    border-radius: 0.3em;
    padding-bottom: 0.5em;
}


 /* 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-wrapper {
        position: relative;
        width: 100%;
        height: auto !important ;
    }
 .swiper-slide {
     height: auto;
 }

 .video_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
@media (max-width: 576px) {
  .video_grid {
    grid-template-columns: 1fr;
    justify-items: center;   
  }

  .video-preview {
    width: 100%;
    max-width: 300px; 
  }
}
.video-preview {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    position: relative;
}
.video-preview video {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

 .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 */
 }