@media screen and (min-width: 1441px) {
    div.body-content {
        position: relative;
    }
}


@media screen and (max-width: 1440px) {

    div.conteneur-principal {
        flex-direction: column;
        position: relative;
    }

    .page-content h2 {
        margin-top: 0px;
    }

    div.body-content,
    div.sidebar {
        width: 100% !important;
    }

    div.sidebar {
        background: #ffffff;
        padding-bottom: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }

        div.sidebar h2 {
            display: none;
        }
}

@media screen and (max-width: 1200px) {

    .stack-horizontal-responsive .stack-horizontal {
        flex-flow: wrap;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 1023px) {

    .header {
        height: 50px !important
    }

        .header h1 {
            font-size: 1.3rem;
        }

        .header .conteneur-titre-pes .col-titre {
            flex: 0 0 250px;
            padding: 0 1rem;
        }

        .header .conteneur-titre-pes .titre {
            font-size: 1.15rem;
            line-height: 1rem;
        }

        .header .conteneur-titre-pes .col-info-nom {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

    .body-content .page-content {
        padding: 1.5rem;
    }

    div.sidebar {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    div.conteneur-gris {
        margin-left: 0rem;
        margin-right: 0rem;
    }
}

@media screen and (min-width: 601px) and (max-width: 1023px) {
    #main-menu {
        max-width: 250px;
    }
}

@media screen and (max-width: 991px) {
    .piv--blanc .contenu-fixe {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

@media screen and (max-width: 899px) {

    div.conteneur-gris {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
    .main {
        flex-direction: column !important;
        row-gap: 0px !important;
    }

        .main .navmenu {
            width: 100%;
        }

    #main-menu {
        width: auto !important;
        max-width: 100%;
    }

        #main-menu.collapsed {
            width: 100% !important;
            height: 0px;
            overflow: hidden;
            padding: 0;
        }

            #main-menu.collapsed .fluent-nav-text {
                display: block;
            }
}

@media screen and (max-width: 899px) {

    .titre-mobile h1 {
        font-size: 1.3rem;
    }

    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    .conteneur-titre-pes .col-info {
        max-width: 35vw;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: -50px;
        left: unset;
        right: 0px;
        width: 50px;
        height: 49px;
        border: none;
        border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
    }

    label.navmenu-icon:before {
        content: "";
        position: absolute;
        width: 1px;
        background-color: #449C90;
        height: 49px
    }

    .navmenu-icon svg {
        width: 30px !important;
        margin-left: 10px;
        margin-top: 10px;
    }

    #navmenu-toggle:hover {
        background-color: var(--btn-menu-fill-hover);
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }


    .header .conteneur-titre-pes {
        width: 100%;
        padding-right: 50px;
    }

        .header .conteneur-titre-pes .titre {
            font-size: 1rem;
        }

    /*
        .header .conteneur-titre-pes .col-info {
            max-width: 50vw;
        }
            */

    fluent-button.btn-pes::part(control), 
    fluent-anchor.btn-pes::part(control), 
    fluent-button.btn-neutral::part(control), 
    fluent-anchor.btn-neutral::part(control), 
    .tableau-pes table.fluent-data-grid 
    .fluent-data-grid-row fluent-button::part(control) {
        white-space: break-spaces;
    }
}

@media screen and (max-width: 767px) {

    .titre-mobile {
        display: block;
    }

    .titre-mobile .conteneur-titre-pes .titre {
        font-size: 1rem;
        line-height: 1.2rem;
    }

    .header .conteneur-titre-pes .col-titre {
        border-right: 0;
    }

    .header .conteneur-titre-pes .col-titre:after {
        display: none;
    }

    .conteneur-titre-pes .col-info {
        max-width: 50vw;
    }

    .main .navmenu.nav-registre {
        top: -50px;
    }

    div.sidebar,
    .body-content .page-content,
    .header .conteneur-titre-pes .col-info {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .header .conteneur-titre-pes > :nth-child(2) {
        border-left: 0px;
    }

    .page-content h2, .sidebar h2 {
        font-size: 1.9rem;
    }

    .page-content h3 {
        font-size: 1.4rem;
    }

    .fluent-wizard .fluent-wizard-content {
        margin-right: 0px !important;
        margin-left: 0px !important
    }

    .resultats-recherche .card-resultat .border-end {
        border-right: 0px !important;
    }
}

@media screen and (min-width: 575px) {
    div.sidebar {
        min-width: 350px;
    }
}

@media screen and (max-width: 575px) {
    .border-end-sm-0 {
        border: 0px !important
    }
}

@media screen and (max-width: 467px) {

    .conteneur-titre-pes .titre svg {
        width: 20px;
        flex: 0 0 20px;
    }

    .titre-mobile .conteneur-titre-pes {
        column-gap: 0.75rem;
    }
}

@media screen and (max-width: 420px) {

        .titre-mobile .conteneur-titre-pes .col-info {
            max-width: 120px;
        }
}


@media screen and (max-width: 359px) {
    :root {
        --type-ramp-base-font-size: 14px !important;
        --type-ramp-base-line-height: 20px !important;
    }

    .titre-mobile .conteneur-titre-pes .col-info {
        max-width: 135px;
    }

    .conteneur-titre-pes .col-info-ccv {
        min-width: 0;
    }
}