/******  MOBILES AND TABLETS ******/
@media (max-width: 1024px) {
    body {
        padding-top: 65px;
    }

    body header {
        height: 64px;
    }

    header#header > .row > .header-mobile-menu {
        display: flex;
    }

    .header-right {
        margin-left: auto !important;
    }

    .header-right .menu-item .icon-wrapper-compte span {
        display: none;
    }

    .header-menu {
        position: fixed;
        width: 100%;
        bottom: 0;
        background: var(--color-secondary-darkest);
        justify-content: space-between;
        z-index: 99999;
        padding: 5px;
        height: 72px !important;
    }

    main#main-page-wrapper{
        padding-bottom: 72px;
    }
    /*#footer-mobile {
        position: fixed;
        width: 100%;
        bottom: 0;
        height: 24px;
        justify-content: space-between;
        z-index: 99999;
        background-color: var( --color-primary-light );
        margin: 0 !important;
    }*/

    .header-menu .menu-item {
        color: var( --color-primary-lightest );
    }

    .header-menu .menu-item img {
        filter: invert(100%) sepia(87%) saturate(0%) hue-rotate(147deg) brightness(112%) contrast(101%);
    }

    header svg.icon-calendar g path {
        stroke: var( --color-primary-lightest ) !important;
    }

    header svg.icon-bin path{
        fill: var( --color-primary-lightest ) !important;
    }

    header svg.icon-analytics path{
        fill: var( --color-primary-lightest ) !important;
    }

    header svg.icon-map path{
        fill: var( --color-primary-lightest ) !important;
    }

    header svg.icon-alert g path{
        fill: var( --color-primary-lightest ) !important;
    }

    .menu-mobile {
        background: transparent;
        border: 0;
        margin: 1rem 0;
    }

    .to-top {
        top: 57px;
        left: 14px;
    }

    .header-logo {
        top: 32px;
        height: 64px;
        width: 64px;
        padding: 0;
    }

    .header-logo a img {
        width: 100%;
        height: 100%;
    }

    #flash-messages {
        margin: 12px 12px 0 12px;
    }

    .titre-home:before {
        left: 23px;
    }

    .guide .btn-outline-danger {
        margin-left: auto;
    }

    .table-tickets thead tr {
        font-size: 14px;
        line-height: 13.75px;
    }

    .table-tickets th {
        padding: 5px;
        font-weight: 300;
    }

    .table-tickets td {
        font-size: 14px;
    }

    .table-tickets td button {
        padding: 6px 14px;
        margin: 0 4px;
    }

    .collecte-guide {
        padding: 2.5px 7.5px;
        display: block;
        margin: 0px auto 4px;
        width: fit-content;
    }

    .label-switch-pesee {
        margin-top: -30px;
    }

    footer {
        position: relative;
        margin-bottom: 85px;
        margin-top: 1rem;
    }

    footer .link-support, footer .link-footer, footer .pipe-separator {
        display: none;
    }

    header .header-mobile-menu {
        display: block;
    }

    .donnees .nav-tabs .nav-link {
        font-size: 16px;
    }
}

/* Mobile only */
@media (max-width: 768px) {
    h1.titre-fond-gris {
        white-space: nowrap; /* Empêche les retours à la ligne */
        font-size: clamp(16px, 5vw, 24px); /* Adaptation dynamique */
    }

    .sous-titre-standard {
        align-items: flex-start; /* Alignés à gauche */
    }

    .sous-titre-standard .switches {
        gap: 10px; /* Espacement vertical entre les switchs */
    }
}

@media (max-width: 320px) {

}

@media (max-width: 890px) and (min-width: 400px) {

}

@media (max-width: 768px) and (orientation: landscape) {

}

/******  MOBILES & TABLETTES PORTRAIT ******/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .font-xs-8 {
        font-size: .5rem
    }

    .font-xs-9 {
        font-size: .5625rem
    }

    .font-xs-10 {
        font-size: .625rem
    }

    .font-xs-11 {
        font-size: .6875rem
    }

    .font-xs-12 {
        font-size: .75rem
    }

    .font-xs-13 {
        font-size: .8125rem
    }

    .font-xs-14 {
        font-size: .875rem
    }

    .font-xs-15 {
        font-size: .9375rem
    }

    .font-xs-16 {
        font-size: 1rem
    }

    .font-xs-17 {
        font-size: 1.063rem
    }

    .font-xs-18 {
        font-size: 1.125rem
    }

    .font-xs-19 {
        font-size: 1.1875rem
    }

    .font-xs-20 {
        font-size: 1.25rem
    }

    .font-xs-21 {
        font-size: 1.3125rem
    }

    .font-xs-22 {
        font-size: 1.375rem
    }

    .font-xs-23 {
        font-size: 1.438rem
    }

    .font-xs-24 {
        font-size: 1.5rem
    }

    .font-xs-25 {
        font-size: 1.563rem
    }

    .font-xs-26 {
        font-size: 1.625rem
    }

    .font-xs-27 {
        font-size: 1.688rem
    }

    .font-xs-28 {
        font-size: 1.75rem
    }

    .font-xs-30 {
        font-size: 1.875rem
    }


}

/******  TABLETTES ONLY******/
@media (min-width: 768px) and (max-width: 1024px) {

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .font-sm-8 {
        font-size: .5rem
    }

    .font-sm-9 {
        font-size: .5625rem
    }

    .font-sm-10 {
        font-size: .625rem
    }

    .font-sm-11 {
        font-size: .6875rem
    }

    .font-sm-12 {
        font-size: .75rem
    }

    .font-sm-13 {
        font-size: .8125rem
    }

    .font-sm-14 {
        font-size: .875rem
    }

    .font-sm-15 {
        font-size: .9375rem
    }

    .font-sm-16 {
        font-size: 1rem
    }

    .font-sm-17 {
        font-size: 1.063rem
    }

    .font-sm-18 {
        font-size: 1.125rem
    }

    .font-sm-19 {
        font-size: 1.1875rem
    }

    .font-sm-20 {
        font-size: 1.25rem
    }

    .font-sm-21 {
        font-size: 1.3125rem
    }

    .font-sm-22 {
        font-size: 1.375rem
    }

    .font-sm-23 {
        font-size: 1.438rem
    }

    .font-sm-24 {
        font-size: 1.5rem
    }

    .font-sm-25 {
        font-size: 1.563rem
    }


}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {


}

@media (min-width: 768px) {
    body {
        padding-bottom: 80px;
    }

    .label-switch-pesee {
        margin-bottom: -30px;
    }
}

@media (min-width: 1024px) {
    header#header .header-logo a img{
        height: 84px;
    }

    header#header .header-logo{
        height: 84px;
    }
}

@media (min-width: 1440px) {

}

/******  HACK IOS ******/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 890px)
and (-webkit-min-device-pixel-ratio: 2) {

}

@media only screen
and (min-device-width: 390px)
and (max-device-width: 890px) {

}

/******  HACK safari ******/
_::-webkit-full-page-media, _:future, :root .focus-element .radio-square {
    pointer-events: none;
}

_::-webkit-full-page-media, _:future, :root .focus-element .radio-square::before {
    pointer-events: none
}