/* -------------------------------------------------------------------------- */
/* SECTION Variables */

    :root{
        --font-size: 14px;
        --font--h6: 1.10rem;

        --color-saumon: #e4a598;
        --color-beige: #f6f2ed;
        --color-gris: #777c8c;
        --color-noir: #1f2537;
        --color-neutre: #faf8f5;
        --color-grey:#d5d6db;
        --color-vert: #6bb3a5;
        --color-vert-clair: #f0f8f6;
        --color-bleu: #61bddc;
        --color-bleu-clair: #e9f7fa;        
        --color-violet: #d37bd9;
        --color-violet-clair: #fbf2fb;
        --color-orange: #ffab40;
        --color-rose:#ed6767;
        --color-rose-clair:#fae9e9 ;
        --color-jaune: #ffc400;
        --color-jaune-clair: #fff9e5;

        --border-radius-sm: 10px;
        --border-radius: 20px;
        --border-radius-xl: 40px;

        --marge-5: 50px;
        --marge-4: 35px;
        --marge-3: 20px;
        --marge-2: 15px;
        --marge-1: 10px;
        --marge-0: 0px;
    }

    .h-1{height: var(--marge-1);}
    .h-2{height: var(--marge-2);}
    .h-3{height: var(--marge-3);}
    .h-4{height: var(--marge-4);}
    .h-5{height: var(--marge-5);}

    .w-1{width: var(--marge-1);}
    .w-2{width: var(--marge-2);}
    .w-3{width: var(--marge-3);}
    .w-4{width: var(--marge-4);}
    .w-5{width: var(--marge-5);}

    .h6 {font-size: var(--font--h6);}

/* !SECTION CLOSE - Variables */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* SECTION Général */

    html{scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden;}
    body{background-color:var(--color-beige); min-height:100vh; height:100vh; font-size: var(--font-size); font-family: 'Fira Sans', sans-serif;}

    /* NOTE couleurs */ 
    .bcolor-saumon{background-color: var(--color-saumon);}
    .bcolor-rose{background-color: var(--color-rose);}
    .bcolor-rose-clair{background-color: var(--color-rose-clair);}
    .bcolor-jaune{background-color: var(--color-jaune);}
    .bcolor-jaune-clair{background-color: var(--color-jaune-clair);}
    .bcolor-beige{background-color: var(--color-beige);}
    .bcolor-gris{background-color: var(--color-gris);}
    .bcolor-noir{background-color: var(--color-noir);}
    .bcolor-vert{background-color: var(--color-vert);}
    .bcolor-orange{background-color: var(--color-orange);}
    .bcolor-neutre{background-color: var(--color-neutre);}
    .bcolor-grey{background-color: var(--color-grey);}
    .no-bcolor{background-color: unset ;}

    .color-saumon{color: var(--color-saumon);}
    .color-rose{color: var(--color-rose);}
    .color-rose-clair{color: var(--color-rose-clair);}
    .color-jaune{color: var(--color-jaune);}
    .color-jaune-clair{color: var(--color-jaune-clair);}
    .color-beige{color: var(--color-beige);}
    .color-gris{color: var(--color-gris);}
    .color-noir{color: var(--color-noir);}
    .color-vert{color: var(--color-vert);}
    .color-orange{color: var(--color-orange);}
    .color-neutre{color: var(--color-neutre);}
    .color-grey{color: var(--color-grey);}

    a:hover{color: #1a92a7;}

    /* NOTE border */
    .rounded{border-radius: var(--border-radius) !important;}
    .rounded-top {border-top-left-radius: var(--border-radius) !important;border-top-right-radius: var(--border-radius) !important;}
    .rounded-bottom {border-bottom-left-radius: var(--border-radius) !important;border-bottom-right-radius: var(--border-radius) !important;}
    .rounded-right {border-top-right-radius: var(--border-radius) !important;border-bottom-right-radius: var(--border-radius) !important;}
    .rounded-left {border-top-left-radius: var(--border-radius) !important;border-bottom-left-radius: var(--border-radius) !important;}
    
    .rounded-sm{border-radius: var(--border-radius-sm) !important;}
    .rounded-sm-top {border-top-left-radius: var(--border-radius-sm) !important;border-top-right-radius: var(--border-radius-sm) !important;}
    .rounded-sm-bottom {border-bottom-left-radius: var(--border-radius-sm) !important;border-bottom-right-radius: var(--border-radius-sm) !important;}
    .rounded-sm-right {border-top-right-radius: var(--border-radius-sm) !important;border-bottom-right-radius: var(--border-radius-sm) !important;}
    .rounded-sm-left {border-top-left-radius: var(--border-radius-sm) !important;border-bottom-left-radius: var(--border-radius-sm) !important;}

    .rounded-xl{border-radius: var(--border-radius-xl) !important;}
    .rounded-xl-top {border-top-left-radius: var(--border-radius-xl) !important;border-top-right-radius: var(--border-radius-xl) !important;}
    .rounded-xl-bottom {border-bottom-left-radius: var(--border-radius-xl) !important;border-bottom-right-radius: var(--border-radius-xl) !important;}
    .rounded-xl-right {border-top-right-radius: var(--border-radius-xl) !important;border-bottom-right-radius: var(--border-radius-xl) !important;}
    .rounded-xl-left {border-top-left-radius: var(--border-radius-xl) !important;border-bottom-left-radius: var(--border-radius-xl) !important;}

    .badge-primary {background-color:#dc3545;}
    .notif_all_lu.badge-primary.badge-pill {background-color:var(--color-vert);}
    .modal-content {border-radius:var(--border-radius);}
    .modal-open {overflow: unset;}
    
    @media(max-width: 1160px){
        .border-responsive-0  { border:0px; }

        .border-top-sm-0 { border-top: 0px solid #dee2e6!important; }
        .border-right-sm-0 { border-right: 0px solid #dee2e6!important; }
        .border-left-sm-0 { border-left: 0px solid #dee2e6!important; }
        .border-bottom-sm-0 { border-bottom: 0px solid #dee2e6!important; }
        
        .border-top-sm-1 { border-top: 1px solid #dee2e6!important; }
        .border-right-sm-1 { border-right: 1px solid #dee2e6!important; }
        .border-left-sm-1 { border-left: 1px solid #dee2e6!important; }
        .border-bottom-sm-1 { border-bottom: 1px solid #dee2e6!important; }
    }

    /* NOTE divers */ 
    .zindex-0{z-index: 0;}
    .zindex-1{z-index: 10;}
    .zindex-2{z-index: 20;}
    .zindex-3{z-index: 30;}
    .zindex-4{z-index: 40;}
    .zindex-5{z-index: 50;}

    /* NOTE sizing */
    /* .col-xs-0, .col-sm-0, .col-md-0, .col-lg-0, .col-xl-0 {display: none !important;}  */
    .row{margin-right: 0; margin-left: 0;}
    .w-max{width: max-content !important;}
    .h-max{height: max-content !important;}
    .mw-75{max-width: 75%;} .mw-50{max-width: 50%;} .mw-25{max-width: 25%;}
    .mh-75{max-height: 75%;} .mh-50{max-height: 50%;} .mh-25{max-height: 25%;}

    /* NOTE spacing */
    .t-0{top: 0px !important;} .t-max{top: 100% !important;} 
    .l-0{left: 0px !important;} .l-max{left: 100% !important;} 
    .b-0{bottom: 0px !important;} .b-max{bottom: 100% !important;} 
    .r-0{right: 0px !important;} .r-max{right: 100% !important;} 

    .no-border{border:0px;}
    .no-border-strict{border:0px !important;}
    .no-rounded{border-radius: 0 !important;}

    .no-list-style{list-style: none;}

    .pointer{cursor: pointer;}

    /* NOTE background helpers */
    .center-background{background-position: center;background-size: contain;background-repeat: no-repeat;} 
    .table-odd-gray tr:nth-child(odd){background-color:#f7f7f7}


    /* NOTE typo helpers */
    .bi.font-weight-bold::before{font-weight: bold !important;}
    .text-ellipsis{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .child-p-0 *{padding: 0;} .child-m-0 *{margin: 0;}

    /* NOTE Bloc arrondis */
    .chevronBtn { font-size: 25px; width: 40px; height: 40px; display: flex; border-radius: 20px; justify-content: center; cursor: pointer;}
    .roundedNumber { border-radius: 27px; height: 27px; width: 27px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 17px; }
    .roundedIcon { border-radius: 20px; height: 42px; width: 55px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 17px; }
    .rondPlein { width: 25px; height: 25px; border-radius: 25px; }
    .rondBorder { width: 25px; height: 25px; border-radius: 25px; border: 6px solid }

    @media(max-width: 575px){
        .col-xs-0{display: none !important;}
        .no-rounded-xs{border-radius: 0 !important;}
        .border-responsive-0  { border:0px; }
    }

    @media(max-width: 767px){
        .col-sm-0{display: none !important;}
        .no-rounded-sm{border-radius: 0 !important;}
    }

    @media(max-width: 991px){
        .col-md-0{display: none !important;}
        .no-rounded-md{border-radius: 0 !important;}
    }

    @media(max-width: 1199px){
        .col-lg-0{display: none !important;}
        .no-rounded-lg{border-radius: 0 !important;}
    }

    @media(max-width: 1399px){
        .col-xl-0{display: none !important;}
        .no-rounded-xl{border-radius: 0 !important;}
    }

    .line-clamp{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; }
    .line-clamp[data-vlimit]{-webkit-line-clamp: attr(data-vlimit); }

/* !SECTION CLOSE - Général */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* SECTION Select2 */

    /* NOTE select2 */ 
    .select2{max-width: 100%; overflow: hidden;}
    .select2 *{max-width: 100%;}
    .select2-container--default .select2-selection--single .select2-selection__clear{margin-right: unset;}
    .select2-dropdown {overflow: hidden; border: unset; background-color: var(--color-beige); border-bottom: 2px solid var(--color-saumon);}
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: var(--color-saumon);}
    .select2-container--default .select2-results__option--selected {background-color: var(--color-grey); color: black;}

    .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--color-gris) !important; opacity: .65;}
    .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__placeholder{ color: var(--color-beige); }
    .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b{border-top-color: var(--color-beige);}

    .select2-container--default .select2-search--dropdown .select2-search__field {border: unset;box-shadow: 0px 0px 4px 0px var(--color-saumon);margin: 5px auto}

    .custom-select2~.select2 .select2-selection__arrow {height: 100% !important;}
    .custom-select2~.select2 .select2-selection__clear {margin: 5px;}
    .custom-select2~.select2 .select2-selection {min-height: 70px;display: flex;align-items: center;border-radius: var(--border-radius);padding: 10px; background-color: var(--color-beige); border: unset; border-bottom: 2px solid var(--color-saumon);}
    .custom-select2~.select2 .select2.select2-container--open{border-bottom-right-radius: 0;border-bottom-left-radius: 0;}
    .custom-select2.select2-dropdown:not(.select2-dropdown--above) {border-bottom-left-radius: var(--border-radius-sm);border-bottom-right-radius: var(--border-radius-sm);}
    /* .custom-select2.select2-dropdown.select2-dropdown--above {border-top-left-radius: var(--border-radius-sm);border-top-right-radius: var(--border-radius-sm);} */
    .custom-select2~.select2 .select2-selection__choice{padding: 0; background-color: unset; border: unset;}
    .custom-select2~.select2 .select2-selection__choice__display{padding-right: 0}
    .custom-select2~.select2 .select2-selection__choice:not(:last-child):after{content:",";}
    .custom-select2~.select2 .select2-selection__choice__remove{display: none;}

    .custom-select2~.select2 .select2-selection__rendered{padding: 0px 5px;}

/* !SECTION CLOSE - Select2 */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* SECTION menus et header */

    /* #menu-haut{height: 80px;} */
    #menu-haut{height: 160px;}
    #menu-haut #logo-site{height: 70px;}
    #menu-haut img, #menu-haut .material-icons{max-height: 90%;}
    #menu-haut-reseaux{border-right: 2px solid var(--color-gris);}
    #menu-haut-reseaux > a{height:25px;}
    #menu-gauche-boutique img{width: 25px;}
    #menu-gauche-collapsible button.card-header:after{content:"+"}
    #menu-gauche-collapsible button.card-header[aria-expanded="true"]:after{content:"-"}
    #trigger-menu{font-size: 30px; display: none;}
    #logo-accueil{height: 80px;}

    /* notifications */
    .notif_lu{top: 0; right: 0;} 
    .alert-notif{top: 0; right: -10px; height: 10px; width: 10px;}

/* !SECTION CLOSE - menus et header */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* SECTION Formulaires */

    .custom-control-input:checked ~ .custom-control-label::before {color: var(--white);border-color: var(--color-vert);background-color: var(--color-vert);}
    .custom-control-label::before {border: #adb5bd solid 4px; top: -6px; transform: translate(0%, 50%);}
    .custom-radio .custom-control-input:checked ~ .custom-control-label::after {background-image: unset;}
    .btn-rond { border-radius: 50px !important;}

    /* NOTE retirer contour focus */
    body button:focus, body .btn:focus, body input:focus, body a:focus{box-shadow: none; outline: none;} 

/* !SECTION CLOSE - Formulaires */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* SECTION Tutoriel */

html body .tuto-actif {outline: 3px solid #e0004e; display: block !important; pointer-events: none;}
    html body .tuto-actif.row, html body .tuto-actif.d-flex {display: flex !important;}
html body .tuto-parent-actif, html body .tuto-actif .collapse{display: block !important;}

/* !SECTION CLOSE - Tutoriel */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* SECTION Responsive menu et header */

    /* jusqu'à */ 
    @media(max-width: 575px){}
    @media(max-width: 767px){
        #menu-haut{height: 80px;}
        #logo-accueil{height: 40px;}
        #menu-gauche{max-height: calc(100% - 130px);position: fixed;background-color: var(--white);overflow-y: auto;transition: height .5s linear;width: 100%}
        #menu-gauche:not(.actif){height:0 !important;}
        #trigger-menu{display: block;}
    }
    @media(max-width: 991px){}
    @media(max-width: 1199px){}
    @media(max-width: 1399px){}

    /* à partir de */ 
    @media(min-width: 576px){}

    @media(min-width: 768px){
        #wrap-page{width: 66.666667% !important; max-width: 66.666667% !important; flex: 0 0 66.666667% !important;}
    }

    @media(min-width: 992px){}

    @media(min-width: 1200px){
        #wrap-page{width: 75% !important; max-width: 75% !important; flex: 0 0 75% !important;}
    }

    @media(min-width: 1400px){
        #wrap-page{width: 83.333333% !important; max-width: 83.333333% !important; flex: 0 0 83.333333% !important;}
    }
   

/* !SECTION CLOSE - Responsive menu et header */
/* -------------------------------------------------------------------------- */

/* NOTE Mediaquery à c/c */ 
/* jusqu'à */ 
@media(max-width: 575px){}
@media(max-width: 767px){} 
@media(max-width: 991px){} 
@media(max-width: 1199px){}
@media(max-width: 1399px){} 

/* à partir de */ 
@media(min-width: 576px){}
@media(min-width: 768px){} 
@media(min-width: 992px){} 
@media(min-width: 1200px){}
@media(min-width: 1400px){} 


/* -------------------------------------------------------------------------- */
/* SECTION header matière */

/* NOTE Onglet matière */
.headMatiere{ width: max-content; display: block; background-color: #6096ba; padding: 24px 8px 0px 30px; color: white; position: relative; overflow: visible;
    margin: 0 -3em 0 0; border-radius: 15px 0px 0px 0px; }
       .headMatiere svg { position: absolute; left: 100%; top: 0px; fill: #6096ba; width: 75px; height: 54px; }
       .headMatiere h4{ width: max-content; margin: 0px; }
   .headMatiereEspace{ height: 38px; background-color: #6096ba; border-radius: 0px 15px 0px 0px;} 

   @media(max-width: 767px){ .headMatiere{ width: 100%;  border-radius: 15px 15px 0px 0px;}}

/* !SECTION CLOSE - header matière */
/* -------------------------------------------------------------------------- */