/* ============================================
   RESPONSIVE MOBILE - AMÉLIORATION
   ============================================ */

/* Assurer que le offcanvas fonctionne bien */
.offcanvas {
    max-width: 280px !important;
}

.offcanvas-body {
    overflow-y: auto;
}

/* Améliorer le sidebar dans l'offcanvas */
.offcanvas-body aside {
    width: 100% !important;
    min-height: auto !important;
    background: transparent !important;
}

/* Menu mobile - espacements réduits */
@media (max-width: 768px) {
    
    /* Réduire les espacements du menu mobile */
    .offcanvas-body nav {
        padding: 1rem 0.5rem;
    }
    
    .offcanvas-body nav a {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .offcanvas-body nav svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* Logo dans offcanvas */
    .offcanvas-body .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Main content sur mobile */
    main {
        /* padding: 1rem !important; */
    }
    
    /* Footer sur mobile */
    footer {
        padding: 1rem;
        font-size: 0.75rem;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    
    /* Header encore plus compact */
    header {
        padding: 0.75rem 1rem;
    }
    
    header .text-lg {
        font-size: 1rem;
    }
    
    /* Offcanvas prend plus de place */
    .offcanvas {
        max-width: 85vw !important;
    }
}

/* Fix pour le dropdown user qui peut déborder */
@media (max-width: 640px) {
    .group:hover > div[class*="absolute"] {
        right: 0;
        left: auto;
    }

    .partner_logo {
    opacity: 0.5;
    transition: 0.3s;
    max-height: 112px;
    aspect-ratio: 16 / 8;
    height: 11em;
    object-fit: contain;
}
}

/* Smooth transitions */
.offcanvas {
    transition: transform 0.3s ease-in-out;
}

/* Overlay sombre quand offcanvas ouvert */
.offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}



/* media queries mobile scroll tojo */
@media (max-width: 930px) and (min-width: 600px) {
    .w_mob_100_tojo .w_mob_100{
        width: 78% !important;
    }
}
@media (max-width: 200px) {
body .img_service {
    height: 10em !important;
}
}
@media (max-width: 320px) {
.img_service {
    height: 14em !important;
}
}
@media (max-width: 450px) {
.img_service {
    height: 20em;
}
}
@media (max-width: 350px) {
.mt_15_mob{
    margin-top: 7em !important;
}
.mt_3_mob{
    margin-top: 1em !important;
}

.flex_wrap350{
        flex-wrap: wrap !important;
}

.nav_links{
    padding: 0 1.5em !important;
}
}
@media (max-width: 600px) {
.btn_more {
    position: absolute;
    top: 20%;
    left: 9% !important;
    z-index: 999999;
}

.fs_xl {
     
        text-align: start !important;
    }
}
@media (max-width: 930px) {
.title_text_mb_new{
    font-size: 3em;
}

.g_5{
    gap: 3rem !important;
}

.video_text_side {
    padding-left: 0 !important;
}


.btn_more {
    position: absolute;
    top: 20%;
    left: 21%;
    z-index: 999999;
}

.img_lastSect{
    width:100% !important;
    height: 100%;
    margin-top: 1.5em;
}

.items_center_mb{
    align-items: center !important;
}

.img_lastSect:after {
    content: "";
   display: none;
    position: absolute;
    /* top: 1.5em; */
    left: 50%;
    bottom: -0.8em !important;
    transform: translate(-50%) !important;
    right: 0 !important;
}
.contact_form_card {
    padding: 1.8em !important;
}

.coiffure_section{
    overflow: hidden !important;
}

.play_last {
    margin-left: 1em;
}

.div_seervice_new {
    overflow:hidden !important;
}

.text_center_mb_new{
    text-align: center;
}

.justify_mob{
    justify-content: center !important;
}

.navbar_salon .grid_row{
    gap: 0 !important;
}

.w_mob_100{
    width: 100% !important;
}

.img_text_width {
    width: 70% !important;
    height: auto !important;
    object-fit: cover;
    position: absolute;
    /* background: red; */
    /* border: 3px solid black; */
        max-width: 70% !important;
        max-height: unset !important;
        /* margin-top: 2em; */
}

.pt_mob{
                padding-top: 2.5em !important;
}

.img_about{
    width: 100%;
    height: 100%;
}
}