/*
===========================================================
 DCOMPT — DESKTOP READABILITY V2
 Desktop >= 981px UNIQUEMENT
 Aucun style mobile dans ce fichier.
===========================================================
*/

@media (min-width: 981px) {

    /*
    =======================================================
    1. TYPOGRAPHIE GENERALE
    =======================================================
    */

    .content {
        font-size: 14px !important;
        line-height: 1.48 !important;
    }

    .content h1 {
        font-size: clamp(30px, 2.25vw, 38px) !important;
        line-height: 1.08 !important;
        font-weight: 850 !important;
        letter-spacing: -.035em !important;
        color: #101828 !important;
    }

    .content h2 {
        font-size: 20px !important;
        line-height: 1.18 !important;
        font-weight: 820 !important;
        color: #101828 !important;
    }

    .content h3 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        color: #17231d !important;
    }

    .content p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .content .muted,
    .content small,
    .content .helper,
    .content .hint {
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: #66756d !important;
    }

    .content .eyebrow {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        letter-spacing: .11em !important;
        font-weight: 900 !important;
    }


    /*
    =======================================================
    2. NE PLUS COUPER LES TEXTES
    =======================================================
    */

    .content h1,
    .content h2,
    .content h3,
    .content p,
    .content strong,
    .content label,
    .content .muted,
    .content .helper,
    .content .hint {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .panel,
    .premium-hero-panel,
    .premium-notification,
    .metric,
    .stat-card,
    .premium-stat {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /*
    =======================================================
    3. SIDEBAR
    =======================================================
    */

    .layout {
        grid-template-columns:
            274px minmax(0, 1fr) !important;
    }

    .sidebar {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .sidebar .brand span {
        font-size: 18px !important;
        line-height: 1.15 !important;
        font-weight: 850 !important;
    }

    .sidebar .user-box strong {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .sidebar .user-box span {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .sidebar .portfolio-mini span {
        font-size: 10px !important;
    }

    .sidebar .portfolio-mini strong {
        font-size: 11.5px !important;
    }

    .sidebar .nav-section {
        font-size: 9px !important;
        margin-top: 14px !important;
    }

    .sidebar .nav button {
        min-height: 43px !important;
        height: auto !important;

        padding:
            7px 9px !important;

        font-size: 12px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .sidebar .nav-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;

        font-size: 17px !important;
    }


    /*
    =======================================================
    4. TOPBAR ADAPTATIVE
    =======================================================
    */

    .topbar {
        min-height: 72px !important;

        padding:
            11px 22px !important;

        flex-wrap: wrap !important;

        row-gap: 9px !important;
    }

    .topbar-left {
        flex: 1 1 280px !important;
        min-width: 240px !important;
    }

    .topbar-right {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        flex-wrap: wrap !important;

        justify-content: flex-end !important;
    }

    .topbar .search-box {
        flex: 1 1 290px !important;

        width: auto !important;
        max-width: 440px !important;

        min-height: 44px !important;
    }

    .topbar .search-box input {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .topbar .search-box input::placeholder {
        font-size: 12.5px !important;
    }

    .topbar-title {
        font-size: 10.5px !important;
    }


    /*
    =======================================================
    5. BUSINESS SWITCHER
    =======================================================
    */

    .topbar .business-switcher {
        min-width: 230px !important;
        max-width: 330px !important;

        min-height: 44px !important;

        grid-template-columns:
            auto
            minmax(110px, 1fr)
            auto !important;
    }

    .business-switcher-label {
        font-size: 9px !important;
    }

    .business-switcher select {
        font-size: 12px !important;
    }

    .business-count {
        font-size: 10px !important;
    }

    .mini-language-switch button {
        font-size: 10px !important;
    }


    /*
    =======================================================
    6. TITRE DES PAGES
    =======================================================
    */

    .page-title {
        padding:
            21px 26px 18px !important;

        height: auto !important;

        min-height: 0 !important;
    }

    .page-title h1 {
        font-size: clamp(28px, 2.1vw, 36px) !important;
    }

    .page-title p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }


    /*
    =======================================================
    7. PANNEAUX
    =======================================================
    */

    .panel {
        height: auto !important;
    }

    .panel-head {
        align-items: flex-start !important;

        flex-wrap: wrap !important;

        gap: 12px !important;
    }

    .panel-head > * {
        min-width: 0 !important;
    }


    /*
    =======================================================
    8. CENTRE DE NOTIFICATIONS
    =======================================================
    */

    .premium-hero-panel {
        min-height: 0 !important;
        height: auto !important;

        padding:
            26px 24px !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;
    }

    .premium-hero-panel h2 {
        font-size: 21px !important;
    }

    .premium-hero-panel p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .premium-hero-panel button {
        min-height: 41px !important;

        padding:
            0 14px !important;

        font-size: 11.5px !important;
    }


    .premium-notification {
        min-height: 92px !important;
        height: auto !important;

        padding:
            17px 18px !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;
    }

    .premium-notification > div:first-child {
        min-width: 0 !important;
    }

    .premium-notification strong {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
    }

    .premium-notification p {
        margin-top: 6px !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .premium-notification .toolbar {
        flex-wrap: wrap !important;

        justify-content: flex-end !important;

        min-width: 0 !important;
    }

    .premium-notification .toolbar button {
        min-height: 38px !important;

        padding:
            0 12px !important;

        font-size: 10.5px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /*
    =======================================================
    9. BOUTONS
    =======================================================
    */

    .content button {
        font-size: 12px;
        line-height: 1.25;
    }

    .content .primary,
    .content .ghost,
    .content .danger {
        min-height: 42px !important;
    }


    /*
    =======================================================
    10. FORMULAIRES
    =======================================================
    */

    .content label {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .content input,
    .content select,
    .content textarea {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }


    /*
    =======================================================
    11. KPI
    =======================================================
    */

    .metric span,
    .stat-card span,
    .premium-stat span {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .metric strong,
    .stat-card strong,
    .premium-stat strong {
        font-size: 23px !important;
        line-height: 1.12 !important;
    }

    .metric small,
    .stat-card small,
    .premium-stat small {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }


    /*
    =======================================================
    12. TABLEAUX
    On préfère le défilement horizontal au zoom arrière.
    =======================================================
    */

    .table-wrap {
        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;
    }

    .table-wrap table {
        min-width: 820px;
    }

    th {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    td {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }


    /*
    =======================================================
    13. GRILLES
    =======================================================
    */

    .grid-2,
    .grid-3,
    .metrics,
    .form-grid {
        min-width: 0 !important;
        max-width: 100% !important;
    }

}


/*
===========================================================
 PETITS DESKTOPS / LAPTOPS
 Toujours Desktop : 981 → 1180 px
===========================================================
*/

@media
(min-width: 981px)
and
(max-width: 1180px) {

    .layout {
        grid-template-columns:
            245px minmax(0, 1fr) !important;
    }

    .sidebar .nav button {
        font-size: 11.5px !important;
    }

    .topbar {
        padding:
            10px 16px !important;
    }

    .topbar-title {
        display: none !important;
    }

    .topbar-left {
        flex:
            1 1 100% !important;
    }

    .topbar .search-box {
        max-width:
            none !important;
    }

    .topbar-right {
        flex:
            1 1 100% !important;

        justify-content:
            flex-start !important;
    }

    .premium-hero-panel {
        grid-template-columns:
            1fr !important;
    }

    .premium-hero-panel .toolbar {
        justify-content:
            flex-start !important;
    }

    .premium-notification {
        grid-template-columns:
            1fr !important;
    }

    .premium-notification .toolbar {
        justify-content:
            flex-start !important;
    }

}


/*
===========================================================
 DESKTOPS MOYENS
 1181 → 1380
===========================================================
*/

@media
(min-width: 1181px)
and
(max-width: 1380px) {

    .layout {
        grid-template-columns:
            255px minmax(0, 1fr) !important;
    }

    .topbar .search-box {
        max-width:
            370px !important;
    }

    .topbar .business-switcher {
        min-width:
            220px !important;
    }

}