:root {
    --scaleMobile: 1;
}

.imgslide {
    max-width: 100%
}

#popup {
    width: 50%
}

@media only screen and (min-width: 981px) {
    /*A PARTIR DE 981px*/
    body::before {
        content: 'desktop';
        display: none;
    }


    ::-webkit-scrollbar-track {
        border-radius: 8px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar {
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar:vertical {
        width: 8px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 8px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #dfdfe8;
    }

    ::-webkit-scrollbar-track:hover,
    ::-webkit-scrollbar-track:active {
        background: #f9f9f9;
    }

    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
        background: #C1C1D1;
    }

    /********/
    body.fonce ::-webkit-scrollbar-track {
        border-radius: 8px;
        background-color: rgb(25, 27, 32);
    }

    body.fonce ::-webkit-scrollbar {
        background-color: #2d323d;
    }

    body.fonce ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #626876;
    }

    body.fonce ::-webkit-scrollbar-track:hover,
    body.fonce ::-webkit-scrollbar-track:active {
        background: rgb(15, 16, 19);
    }

    body.fonce ::-webkit-scrollbar-thumb:hover,
    body.fonce ::-webkit-scrollbar-thumb:active {
        background: #6b7385;
    }


}


@media only screen and (max-width: 1400px) {
    /*JUSQUA 1400px*/
    .maxw1400 {
        padding-left: 5%;
        padding-right: 5%
    }

    .imgslide {
        max-height: 100%;
    }

    .block1400 {
        display: block
    }

    .none1400 {
        display: none
    }

    .w246P1400 {
        width: 24.6%
    }

    .w90P1300 {
        width: 90% !important
    }

    .pad051400 {
        padding: 0 5px
    }

    .font121400 {
        font-size: 12px !important
    }

    #popup {
        width: 70%
    }
}

@media only screen and (max-width: 1300px) {
    /*JUSQUA 1200px*/
    .none1300 {
        display: none
    }
    .w70P1300 {
        width: 70% !important
    }
    .w100P1300 {
        width: 100% !important
    }
    .radius01300{border-radius: 0 !important;}

    .w30P1300 {
        width: 30% !important
    }

    .flex-wrap1300 {
        display: flex;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #popup {
        width: 80%
    }
}

@media only screen and (max-width: 1200px) {
    /*JUSQUA 1200px*/
    .w25P1200 {
        width: 25%
    }

    .w246P1200 {
        width: 24.6%
    }

    .w33P1200 {
        width: 33%
    }

    .none1200 {
        display: none
    }

    .w90P1200 {
        width: 90% !important
    }

    #popup {
        width: 100%
    }
}

@media only screen and (max-width: 1025px) {
    /*JUSQUA 1200px*/
    .fc-myCustomButton-button {
        display: block !important
    }

    .w25P1000 {
        width: 25%
    }

    .w50P1000 {
        width: 50%
    }

    .w30P1000 {
        width: 30%
    }

    .w90P1000 {
        width: 90% !important
    }

    .w33P1000 {
        width: 33.3%
    }

    .w75P1000 {
        width: 75%
    }
    .w100P1000 {
        width: 100% !important
    }

    .pad101000 {
        padding: 10px !important
    }

    .pad0201000 {
        padding: 0 20px !important
    }

    .w100P1000 {
        width: 100% !important
    }

    .none1000 {
        display: none
    }

    .block1000 {
        display: block
    }

    .masonry {
        -moz-column-count: 3;
        -moz-column-gap: 0;
        -moz-column-width: 33%;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -webkit-column-width: 33%;
        column-count: 3;
        column-gap: 0;
        column-width: 33%
    }

}

@media only screen and (max-width: 980px) {
    /*MAXIMUM 980px de large TABLET*/
    body::before {
        content: 'mobile';
        display: none;
    }

    .w100PTablet {
        width: 100% !important
    }

    .noneTablet {
        display: none
    }

    .lastNoneTablet {
        display: none
    }

    .inblockTablet {
        display: inline-block !important
    }

    .blockTablet {
        display: inherit !important
    }

    .noCellTablet {
        display: inherit
    }

    .disBlockTablet {
        display: inherit !important
    }

    .floatNoneTablet {
        float: none;
    }

    .centerTablet {
        text-align: center;
    }

    .w60PTablet {
        width: 60%
    }

    .w50PTablet {
        width: 50%
    }

    .w40PTablet {
        width: 40%
    }

    .w25P800 {
        width: 25%
    }

    .w30P800 {
        width: 30%
    }

    .w33P800 {
        width: 33%
    }

    .w48P800 {
        width: 48%
    }

    .w497P800 {
        width: 49.7%
    }

    .w100P800 {
        width: 100% !important
    }

    .bloc3 {
        margin-left: 1% !important;
        margin-right: 1% !important;
        width: 48%;
    }

    .maxw1200 {
        padding-left: 20px;
        padding-right: 20px;
        width: 100%
    }

    .hautoTablet {
        height: auto !important
    }

    .cellTablet {
        display: table-cell;
        vertical-align: middle;
    }

    .centerTablet {
        text-align: center;
    }

    .pad0Tablet {
        padding: 0 !important
    }

    .top20Tablet {
        margin-top: 20px
    }

    .top0Tablet {
        margin-top: 0px !important
    }

    .relativeTablet {
        position: relative
    }

    .leftTablet {
        float: left
    }

    .rightTablet {
        float: right
    }

    .cellTablet {
        display: table-cell !important
    }

    .w50Tablet {
        width: 50px !important
    }

    .w80Tablet {
        width: 80px !important
    }

    .w25PTablet {
        width: 25% !important
    }

    .w80PTablet {
        width: 80% !important
    }

    .w48PTablet {
        width: 48% !important
    }

    .left0Tablet {
        margin-left: 0 !important
    }

    .l0Tablet {
        left: 0 !important
    }

    .right0Tablet {
        margin-right: 0 !important
    }

    .m0 {
        margin: 0
    }

    .spacerTablet {
        clear: both
    }

    .bnTablet {
        border: none
    }

    .nospacerTablet {
        clear: inherit !important
    }

    .top0Tablet {
        margin-top: 0px !important
    }

    .top7Tablet {
        margin-top: 7px
    }

    .top10Tablet {
        margin-top: 10px
    }

    .top20Tablet {
        margin-top: 20px !important
    }

    .top40Tablet {
        margin-top: 40px !important
    }

    .top80Tablet {
        margin-top: 80px !important
    }

    .relativeTablet {
        position: relative
    }


    .font25Tablet {
        font-size: 25px;
        font-weight: 400
    }

    .maxw1400, .maxw1200, .maxw1000, .maxw600 {
        padding-left: 4%;
        padding-right: 4%;
    }

    .h50Tablet {
        height: 50px
    }

    .line50Tablet {
        line-height: 50px
    }

    .padL20Tablet {
        padding-left: 20px !important
    }

    .pad0Tablet {
        padding: 0 !important
    }

    .pad05Tablet {
        padding: 0 5px !important
    }

    .pad10Tablet {
        padding: 10px !important
    }

    .pad200Tablet {
        padding: 20px 0 !important
    }

    .autolrTablet {
        margin-left: auto;
        margin-right: auto
    }

    .wcalc190Tablet {
        width: calc(100% - 190px) !important
    }

    .txtRightTablet {
        text-align: right
    }

    /*****************/
    a, .liencache, .bouton, .fhover, .push, .pointer {
        -webkit-transition: 0.3s ease 0s;
        -moz-transition: 0.3s ease 0s;
        -o-transition: 0.3s ease 0s;
        -ms-transition: 0.3s ease 0s;
        transition: 0.3s ease 0s;
    }

    a:active, .liencache:active, .bouton:active, .fhover:active, .push:active, .pointer:active {
        transform: scale(0.95);
    }


    #fixedSlide {
        height: 350px;
        position: relative
    }

}

@media only screen and (max-width: 800px) {
    .w20P800 {
        width: 20% !important
    }

    .w28P800 {
        width: 38% !important
    }

    .w70P800 {
        width: 70% !important
    }

    .w80P800 {
        width: 80% !important
    }

    .w90P800 {
        width: 90% !important
    }

    .w100P800 {
        width: 100% !important
    }

    .maxw80P {
        max-width: 90% !important
    }

    .none800 {
        display: none
    }

    .block800 {
        display: block
    }

    .flex80800 {
        flex: 0 0 80px;
        -webkit-flex: 0 0 80px;
    }

    .flex70800 {
        flex: 0 0 70px;
        -webkit-flex: 0 0 70px;
    }

    .flex50800 {
        flex: 0 0 50px;
        -webkit-flex: 0 0 50px;
    }

    .flex30800 {
        flex: 0 0 30px;
        -webkit-flex: 0 0 30px;
    }

    .flex2600 {
        flex: 1 1 47%;
        -webkit-flex: 1 1 47%;
    }

    .block800 {
        display: block
    }

    .pad100800 {
        padding: 10px 0 !important
    }

    .pad010800 {
        padding: 0 10px !important
    }

    .pad020800 {
        padding: 0 20px !important
    }

    .vue {
        -webkit-transition: max-height 0.7s ease-in-out 0s;
        -moz-transition: max-height 0.7s ease-in-out 0s;
        -o-transition: max-height 0.7sease-in-out 0s;
        -ms-transition: max-height 0.7s ease-in-out 0s;
        transition: max-height 0.7s ease-in-out 0s;
    }

    .masonry {
        -moz-column-count: 3;
        -moz-column-gap: 0;
        -moz-column-width: 33%;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -webkit-column-width: 33%;
        column-count: 3;
        column-gap: 0;
        column-width: 33%
    }

}

@media only screen and (max-width: 650px) {
    /*MAXIMUM 450px de large MOBILE*/
    body.scale {
        transform: scale(var(--scaleMobile));
        position: fixed;
        left: 0;
        top: 0;
        overflow: hidden;
        transform-origin: top left;
        width: calc(100% / var(--scaleMobile));
        height: calc(100% / var(--scaleMobile)); /* Corrige la largeur pour éviter les débordements */
    }
    .ui-widget.ui-widget-content{
        height: calc(100vh - 160px) !important;
        overflow-y: scroll;
        font-size: 16px !important;
    }
    .ui-autocomplete .ui-menu-item-wrapper {
        padding: 15px 0 !important;
    }
    li.ui-autocomplete-separator{
        padding-left: 0 !important;
    }
    .ui-autocomplete-item-pro{
        padding: 0 !important;
    }

    .ui-menu {
        overflow: auto;
        max-height: calc(100vh - 100px);
    }
    .ui-autocomplete{
        box-shadow: none !important;
    }

    #chat_gpt, #param {
        max-width: 100vw !important;
    }

    #contenu {
        padding: 0
    }

    .fc .fc-axis {
        padding: 0 !important;
        font-size: 12px !important
    }

    .fc-event {
        padding: 2px !important
    }

    .fc-time-grid .fc-slats td {
        height: 30px !important; /* Augmente la hauteur de chaque créneau */
    }

    .center600 {
        text-align: center !important;
    }

    .txtRight600 {
        text-align: right
    }

    .hauto600 {
        height: auto
    }

    .h50600 {
        height: 50px
    }

    .h60600 {
        height: 60px
    }

    .h25vh600 {
        height: 25vh;
        height: calc(var(--vh, 1vh) * 25);
    }

    .padL10600 {
        padding-left: 10px
    }

    .font16600 {
        font-size: 16px !important
    }

    .font14600 {
        font-size: 14px !important
    }

    .font10600 {
        font-size: 10px !important
    }

    .font11600 {
        font-size: 11px !important
    }

    .font12600 {
        font-size: 12px !important
    }

    .font22600 {
        font-size: 22px !important
    }

    .w38P600 {
        width: 38%
    }

    .w40P600 {
        width: 40%
    }

    .w48P600 {
        width: 48%
    }

    .w50P600 {
        width: 50%
    }

    .w60P600 {
        width: 60%
    }

    .w70P600 {
        width: 70%
    }

    .w90P600 {
        width: 90%
    }

    .w98P600 {
        width: 98%
    }

    .gap2P600 {
        gap: 2%;
    }

    .w100P600 {
        width: 100% !important
    }

    .w100P600-30 {
        width: calc(100% - 30px) !important
    }

    .flex40600 {
        flex: 0 0 40px;
        -webkit-flex: 0 0 40px;
    }

    .flex80600 {
        flex: 0 0 80px;
        -webkit-flex: 0 0 80px;
    }

    .flex70600 {
        flex: 0 0 70px;
        -webkit-flex: 0 0 70px;
    }

    .flex50600 {
        flex: 0 0 50px;
        -webkit-flex: 0 0 50px;
    }

    .flex60600 {
        flex: 0 0 60px;
        -webkit-flex: 0 0 60px;
    }

    .flex30600 {
        flex: 0 0 30px;
        -webkit-flex: 0 0 30px;
    }

    .flex100600 {
        flex: 0 0 100px;
        -webkit-flex: 0 0 100px;
    }

    .flex120600 {
        flex: 0 0 120px;
        -webkit-flex: 0 0 120px;
    }

    .flex130600 {
        flex: 0 0 130px;
        -webkit-flex: 0 0 130px;
    }

    .flexauto600 {
        flex: auto;
        -webkit-flex: auto;
    }

    .maxwauto600 {
        max-width: 100% !important
    }

    .block600 {
        display: block
    }

    .flex-wrap600 {
        display: flex;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .inblock600 {
        display: inline-block
    }

    .txtLeft600 {
        text-align: left
    }

    .top20600 {
        margin-top: 20px
    }

    .left10600 {
        margin-left: 10px
    }

    .left20600 {
        margin-left: 20px
    }

    .top10600 {
        margin-top: 10px
    }

    .top5600 {
        margin-top: 5px
    }

    .top30600 {
        margin-top: 30px
    }

    .bottom30600 {
        margin-bottom: 30px
    }

    .autolor600 {
        margin-left: auto;
        margin-right: auto
    }

    .line35600 {
        line-height: 35px
    }

    .line50600 {
        line-height: 50px
    }

    .line60600 {
        line-height: 60px
    }

    .h35600 {
        height: 35px
    }

    .bb600 {
        border-bottom: 1px solid #ccc
    }

    .pad0600 {
        padding: 0 !important
    }

    .pad5600 {
        padding: 5px !important
    }

    .pad05600 {
        padding: 0 5px !important
    }

    .pad10600 {
        padding: 10px !important
    }

    .pad20600 {
        padding: 20px !important
    }

    .pad100600 {
        padding: 10px 0 !important
    }

    .pad200600 {
        padding: 20px 0 !important
    }

    .pad2010600 {
        padding: 20px 10px !important
    }

    .pad010600 {
        padding: 0 10px !important
    }

    .pad50600 {
        padding: 5px 0 !important
    }

    .autolr600 {
        margin-left: auto;
        margin-right: auto
    }

    .top50600 {
        margin-top: 50px
    }

    .b0600 {
        bottom: 0
    }

    .r0600 {
        right: 0
    }

    .fc-button-group button {
        margin-left: 5px !important;
    }


    .fc-button {
        height: 35px !important;
        line-height: 35px !important;
        padding: 0 10px !important;
    }

    .fc-selDate-button {
        padding: 0 !important
    }

    #apercu {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #apercu.ouvert {
        z-index: 999;
        visibility: visible;
    }

    .apercu {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    .divpop .vue.active, .vue, .vue.active {
        max-height: 100vh;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        max-height: calc(var(--vh, 1vh) * 100);
    }

    .mh66vh {
        max-height: 72vh;
        max-height: calc(var(--vh, 1vh) * 72);
    }

    .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
        background: rgba(51, 51, 51, 0.3) !important;
    }

    audio {
        width: 200px !important;
    }

    .swc-toolbar, .fc-header-toolbar {
        height: 40px !important;
    }

    .fc-view-container {
        height: calc(100% - 40px) !important;
    }

    .masonry {
        -moz-column-count: 2;
        -moz-column-gap: 0;
        -moz-column-width: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 0;
        -webkit-column-width: 50%;
        column-count: 2;
        column-gap: 0;
        column-width: 50%
    }
}

@media only screen and (max-width: 450px) {
    /*MAXIMUM 450px de large MOBILE*/
    #bloc_affinage {
        position: fixed;
        z-index: 1000;
        height: calc(100% - 50px);
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #fff
    }

    .cellMobile {
        display: table-cell !important;
        vertical-align: middle !important;
    }

    .centerMobile {
        text-align: center !important;
    }

    .noneMobile {
        display: none !important
    }

    .none600 {
        display: none !important
    }

    .blockMobile {
        display: inherit !important
    }

    .noCellMobile {
        display: inherit !important
    }

    .lastNoneTablet {
        display: inherit !important
    }

    .disBlockMobile {
        display: inherit !important
    }

    .floatNoneMobile {
        float: none !important;
    }

    .centerMobile {
        text-align: center !important;
    }

    .w50PMobile {
        width: 50% !important
    }

    .w100PMobile, .w500, .w550 {
        width: calc(100vw / var(--scaleMobile)) !important;
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .pad010Mobile {
        padding: 0 10px !important
    }

    .pad100Mobile {
        padding: 10px 0 !important
    }

    .pad0Mobile {
        padding: 0 !important
    }

    .hautoMobile {
        height: auto !important
    }

    .w50Mobile {
        width: 50px !important
    }

    .w150Mobile {
        width: 150px !important
    }

    .top10Mobile {
        margin-top: 10px
    }

    .autolrMobile {
        margin-left: auto;
        margin-right: auto
    }

    .h100Mobile {
        height: 100px
    }

    .w100Mobile {
        width: 100px
    }

    .pad20Mobile {
        padding: 20px !important
    }

    .pad10Mobile {
        padding: 10px !important
    }

    .t0Mobile {
        top: 0 !important
    }

    .txtLeftMobile {
        text-align: left !important
    }

    .bnMobile {
        border: none
    }

    /******************/
    #navigation, #panier {
        width: 80% !important
    }

    #corp.active {
        width: 100%;
        left: 80% !important;
        overflow: hidden !important;
        position: fixed
    }

    #corp.activepanier {
        left: -80% !important
    }

    #headernoir {
        width: calc(100% - 100px) !important
    }

    #btpanier {
        width: 50px !important
    }

    #divsearch.w350 {
        width: calc(100vw - 100px) !important
    }


    .imgInter {
        height: 150px !important
    }

    .beforetri05:before {
        background-image: none;
    }

    .txtSlide {
        padding: 20px 0 40px
    }

    #fixedSlide {
        height: auto
    }

    .divpop {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    #popContent {
        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2)
    }
}

@media only screen and (max-height: 600px) {
    .none500h {
        display: none
    }
}