/* ============================================
   SMARTPHONES MOYENS (Portrait)
   ============================================ */
@media (min-width: 375px) and (max-width: 667px) {
    #update_submit{
        width: 91.7% !important;
        right: auto !important;
    }

    .twm-mid-content .twm-jobs-category{
        margin-right: 0 !important;
        position: relative !important;
        margin-bottom: 15px !important;
    }
}

/* ============================================
TABLETTES (Paysage)
============================================ */

@media (max-width: 768px) {
    .twm-home2-banner-section {
        background-size: auto !important;
    }
    .twm-bnr-left-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center; /* pour centrer le texte */
    }
    .twm-bnr-popular-search .twm-title {
        margin-right: auto !important;
    }
    .suggestions {
        /* width: 100vw !important; */
        left: 0 !important;
        margin-left: -3% !important;
        margin-top: 0% !important;
    }
    .p-table-highlight {
        display: block !important;
        align-items: unset !important;
    }
    .p-table-btn{
        display: block;
        margin-top: -4% !important;
        position: relative !important;
    }
    .wt-admin-dashboard-msg-2 .wt-dashboard-msg-search-list-wrap {
        display: block !important;
    }
    .msg-user-info-text {
        margin-top: 8% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Affichage sticky pour écrans larges */
    #profile-tabs-wrapper {
        position: sticky;
        top: 95px; /* hauteur du header */
        z-index: 999;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        border-radius: 0.5rem;
    }

    #floating-tabs {
        display: none !important;
    }
}












/* Disposition responsive des sections sans toucher au style existant */
@media (max-width: 1600px) {
    #toggle-middle-section {
        display: none;
    }

    .map-container {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        padding: 8px;
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
        height: auto;
    }

    #left-section,
    #middle-section {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(50% - 8px);
        box-sizing: border-box;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        max-height: 400px;
        overflow-y: auto;
    }

    #right-section {
        flex: 1 1 100%;
        max-width: 100%;
        height: 500px;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    #left-section h4,
    #middle-section h4 {
        font-size: 15px;
        margin-bottom: 8px;
        padding-bottom: 4px;
        border-bottom: 1px solid #ddd;
        color: #333;
    }
}

@media (max-width: 900px) {
    .map-container {
        display: flex;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100%;
        gap: 0;
        height: auto;
    }

    #left-section {
        max-height: 285px;
    }

    #middle-section {
        max-height: 332px;
    }

    #middle-section, #left-section  {
        overflow-y: auto;
        position: relative;
    }

    #right-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 10px;
        position: relative;
    }

    #left-section,
    #middle-section,
    #right-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 10px;
    }

    /* Dropdowns visibles au-dessus du contenu */
    .twm-sidebar-ele-filter ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        width: auto;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 1360px)  {
    .wt-admin-dashboard-msg-2 .wt-dashboard-msg-search-list-wrap {
        display: block !important;
    }
}

/* Menu flottant pour mobile */
@media (max-width: 767.98px) {
    #profile-tabs-wrapper {
        display: none;
    }

    #floating-tabs {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 9999;
    }

    #floating-tabs a {
        display: block;
        padding: 0.75rem;
        text-align: center;
        color: #0d6efd;
        font-size: 1.2rem;
    }

    #floating-tabs a:hover {
        background-color: #f1f1f1;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .mission-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .rightSidebar {
        margin-top: 3rem;
    }
}

@media (max-width: 640px) {
    .btn {
        width: 100%;
        justify-content: center;
    }

    .action-button {
        flex-direction: column;
        gap: 0.5rem;
    }
}

























/* ============================================
   SMARTPHONES TRÈS PETITS (Portrait)
   ============================================ */
@media (max-width: 320px) {
    /* iPhone SE, petits Android */
}

/* ============================================
   SMARTPHONES PETITS (Portrait)
   ============================================ */
@media (min-width: 321px) and (max-width: 375px) {
    /* iPhone 6/7/8, iPhone X */
}

@media (max-width: 375px) {
    /* iPhone 6/7/8, iPhone X et plus petits */
}

@media (max-width: 414px) {
    /* iPhone 6/7/8 Plus, iPhone XS Max et plus petits */
}

/* ============================================
   SMARTPHONES LARGES (Portrait)
   ============================================ */
@media (min-width: 415px) and (max-width: 480px) {
    /* Grands smartphones */
}

@media (max-width: 480px) {
    /* Grands smartphones et plus petits */
}

/* ============================================
   SMARTPHONES (Paysage)
   ============================================ */
@media (min-width: 481px) and (max-width: 667px) {
    /* iPhone 6/7/8 en paysage */
}

@media (min-width: 375px) and (max-width: 667px) {
    /* Smartphones en paysage */
}

@media (max-width: 667px) {
    /* Smartphones en paysage et plus petits */
}

/* ============================================
   TABLETTES PETITES (Portrait)
   ============================================ */
@media (min-width: 481px) and (max-width: 575px) {
    /* Petites tablettes portrait */
}

@media (max-width: 575.98px) {
    /* Petites tablettes portrait et plus petits (Bootstrap sm) */
}

/* ============================================
   TABLETTES (Portrait)
   ============================================ */
@media (min-width: 576px) and (max-width: 767px) {
    /* Tablettes portrait (Bootstrap sm) */
}

@media (min-width: 576px) {
    /* Tablettes et plus grands (Bootstrap sm) */
}

@media (max-width: 767.98px) {
    /* Tablettes portrait et plus petits (Bootstrap md) */
}

@media (min-width: 768px) {
    /* Tablettes paysage et plus grands (Bootstrap md) */
}

@media (max-width: 991.98px) {
    /* Tablettes paysage et plus petits (Bootstrap lg) */
}

/* ============================================
   PETITS ORDINATEURS PORTABLES
   ============================================ */
@media (min-width: 992px) and (max-width: 1023px) {
    /* Petits laptops */
}

@media (min-width: 992px) {
    /* Petits laptops et plus grands (Bootstrap lg) */
}

@media (max-width: 1023px) {
    /* Petits laptops et plus petits */
}

/* ============================================
   ORDINATEURS PORTABLES STANDARDS
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Laptops standards */
}

@media (min-width: 1024px) {
    /* Laptops standards et plus grands */
}

@media (max-width: 1199.98px) {
    /* Laptops standards et plus petits (Bootstrap xl) */
}

/* ============================================
   GRANDS ORDINATEURS PORTABLES
   ============================================ */
@media (min-width: 1200px) and (max-width: 1365px) {
    /* Grands laptops */
}

@media (min-width: 1200px) {
    /* Grands laptops et plus grands (Bootstrap xl) */
}

@media (max-width: 1365px) {
    /* Grands laptops et plus petits */
}

/* ============================================
   ÉCRANS MOYENS
   ============================================ */
@media (min-width: 1366px) and (max-width: 1439px) {
    /* Écrans moyens */
}

@media (min-width: 1366px) {
    /* Écrans moyens et plus grands */
}

@media (max-width: 1439px) {
    /* Écrans moyens et plus petits */
}

/* ============================================
   GRANDS ÉCRANS
   ============================================ */
@media (min-width: 1440px) and (max-width: 1599px) {
    /* Grands écrans */
}

@media (min-width: 1440px) {
    /* Grands écrans et plus grands */
}

@media (max-width: 1599px) {
    /* Grands écrans et plus petits */
}

/* ============================================
   TRÈS GRANDS ÉCRANS
   ============================================ */
@media (min-width: 1600px) and (max-width: 1919px) {
    /* Très grands écrans */
}

@media (min-width: 1600px) {
    /* Très grands écrans et plus grands */
}

@media (max-width: 1919px) {
    /* Très grands écrans et plus petits */
}

/* ============================================
   ÉCRANS ULTRA LARGES
   ============================================ */
@media (min-width: 1920px) {
    /* Écrans ultra larges (Full HD et plus) */
}

@media (min-width: 2560px) {
    /* Écrans 4K et plus */
}

/* ============================================
   ORIENTATION
   ============================================ */
@media (orientation: portrait) {
    /* Mode portrait */
}

@media (orientation: landscape) {
    /* Mode paysage */
}

/* ============================================
   HAUTEUR D'ÉCRAN
   ============================================ */
@media (max-height: 500px) {
    /* Écrans très bas */
}

@media (max-height: 600px) {
    /* Écrans bas */
}

@media (max-height: 700px) {
    /* Écrans moyens en hauteur */
}

@media (max-height: 800px) {
    /* Écrans hauts */
}

@media (min-height: 800px) {
    /* Écrans très hauts */
}

/* ============================================
   RATIO D'ASPECT
   ============================================ */
@media (aspect-ratio: 16/9) {
    /* Ratio 16:9 */
}

@media (aspect-ratio: 4/3) {
    /* Ratio 4:3 */
}

@media (min-aspect-ratio: 16/9) {
    /* Ratio large */
}

@media (max-aspect-ratio: 4/3) {
    /* Ratio étroit */
}

/* ============================================
   DENSITÉ DE PIXELS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Écrans Retina / haute densité */
}

@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi) {
    /* Écrans très haute densité */
}

/* ============================================
   MODE SOMBRE (PREFERS COLOR SCHEME)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Mode sombre activé */
}

@media (prefers-color-scheme: light) {
    /* Mode clair activé */
}

/* ============================================
   RÉDUCTION DE MOUVEMENT (ACCESSIBILITÉ)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* Réduction des animations */
}

/* ============================================
   CONTRASTE ÉLEVÉ
   ============================================ */
@media (prefers-contrast: high) {
    /* Contraste élevé activé */
}

/* ============================================
   IMPRESSION
   ============================================ */
@media print {
    /* Styles pour l'impression */
}

@media print and (max-width: 8.5in) {
    /* Impression format A4 */
}

/* ============================================
   APPAREILS SPÉCIFIQUES
   ============================================ */

/* iPhone SE (1ère génération) */
@media only screen
    and (device-width: 320px)
    and (device-height: 568px)
    and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 6/7/8 */
@media only screen
    and (device-width: 375px)
    and (device-height: 667px)
    and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 6/7/8 Plus */
@media only screen
    and (device-width: 414px)
    and (device-height: 736px)
    and (-webkit-device-pixel-ratio: 3) {
}

/* iPhone X/XS */
@media only screen
    and (device-width: 375px)
    and (device-height: 812px)
    and (-webkit-device-pixel-ratio: 3) {
}

/* iPhone XR */
@media only screen
    and (device-width: 414px)
    and (device-height: 896px)
    and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone XS Max */
@media only screen
    and (device-width: 414px)
    and (device-height: 896px)
    and (-webkit-device-pixel-ratio: 3) {
}

/* iPad */
@media only screen
    and (device-width: 768px)
    and (device-height: 1024px) {
}

/* iPad Pro */
@media only screen
    and (device-width: 1024px)
    and (device-height: 1366px) {
}

/* ============================================
   COMBINAISONS COMPLEXES
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Tablettes en paysage */
}

@media screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
    /* Smartphones en portrait */
}

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
    /* Smartphones en paysage */
}