/* latin */
@font-face {
    font-family: 'Satisfy';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/satisfy/v17/rP2Hp2yn6lkG50LoCZOIHQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html{
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif!important;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 100%;
    background-color: #fafafa;
    zoom: 100%;
}

:root{
    --couleurdefault: #0087cb;
    --couleurfonce: #0e2a47;
    --lien: "https://communication-visuelle.tracamatrix.com/";
}

footer{
    height: 50px;
}

.hover:hover{
    color: var(--couleurdefault);
    cursor: pointer;
    transition: 400ms;
}

.white{
    color: white;
}

.black{
    color: black;
}

.hover{
    transition: 400ms;
}
.center{
    text-align: center;
}
.ligne{
    text-decoration: underline;
    text-decoration-color: var(--couleurdefault);
    transition: 400ms;
}
.red{
    color: red;
}

.orange{
    color: #ff7300;
}

.vert{
    color: green;
}

.vert-sup {
    background: linear-gradient(60deg,#66bb6a,#43a047);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
}

input, select, textarea,button{
    font-family: 'Montserrat', sans-serif!important;
}
.relative{
    position: relative;
}
.width100{
    width: 100%;
}
.width50{
    width: 50%;
}
.width90{
    width: 90%;
}
.width94{
    width: 94%;
}
.width33{
    width: 33%;
}

.left{
    text-align: left;
}

.info {
    color: white;
    border-radius: 100px;
    display: flex;
    align-items: center;
    font-size: 22px;
    justify-content: center;
    margin-right: 20px;
}
.info-red {
    background: url(https://www.tracamatrix.com/images/icons/times-solid.svg) no-repeat #ff0000db center;
    box-shadow: rgb(255 0 0 / 65%) 0 0 8px 0;
    background-size: 58%;
    height: 40px;
    width: 40px;
    min-width: 41px;
    max-width: 41px;
    max-height: 40px;
    min-height: 40px;
}
.rouge-pas-ok {
    min-height: 100px;
    background: #FFF;
    width: 80%;
    border-radius: 15px;
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 1% 0 1% 0;
    max-width: 800px;
    border: 2px solid #ff0000ba;
    box-shadow: 0 0 4px 1px #ff000080;
}
.vert-valide{
    border: 2px solid #04b600ba;
    box-shadow: 0 0 4px 1px #04b60080;
}
.info-vert{
    background: url(https://www.tracamatrix.com/images/icons/ok.svg) no-repeat rgb(0 161 4 / 84%) center;
    box-shadow: rgb(40 175 43 / 65%) 0 0 8px 0;
    background-size: 58%;
    height: 40px;
    min-width: 40px;
    width: 40px;
}

.info-assos {
    background: url(https://communication-visuelle.tracamatrix.com/images/icons/menu/compress/compress.webp)no-repeat rgb(0 255 6 / 61%) center;
    box-shadow: rgb(40 175 43 / 65%) 0 0 8px 0;
    background-size: 80%;
    height: 50px;
    min-width: 50px;
    width: 50px;
}

.chemin a, .chemin label {
    padding: 0 6px;
}

.chemin{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 96%;
    /* padding: 0px 20px 15px 20px;*/
}

a{
    color: black;
    text-decoration: none;
}
.bold{
    font-weight: bold;
}
p,h1,h2,h3{
    margin: 0;
    padding: 0;
}
.t-box-p {
    display: none;
}
.fa-bars {
    background: url("https://www.tracamatrix.com/images/icons/bars-solid.svg") no-repeat;
    height: 30px;
    width: 30px;
    color: #fff;
    transition: 400ms;
    display: block;
    cursor: pointer;
}
.fa-bars:hover {
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/bars-solid-hover.svg") no-repeat;
    height: 30px;
    width: 30px;
    transition: 400ms;
    display: block;
    color: var(--couleurdefault);
}
.fa-bars2 {
    background: url("https://www.tracamatrix.com/images/icons/times-solid.svg") no-repeat;
    height: 25px;
    width: 25px;
    color: #fff;
    transition: 400ms;
    display: block;
    margin: 0 10px 0 10px;
}
.fa-bars2:hover {
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/times-solid-blue.svg") no-repeat;
    height: 25px;
    width: 25px;
    color: #fff;
    transition: 400ms;
    cursor: pointer;
}
.t-box-p {
    display: none;
}
.t-box-m {
    display: none;
    transition: 600ms;
}
.label-p-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}
.t-box-m:checked ~ .submenum {
    right: 0;
    transition: 600ms;
    width: 100%;
}

@keyframes imgAnim {
    0% {
        opacity: 0;
        width: 15px;
        height: 15px;
    }

    50%{
        width: 45px;
        height: 45px;
    }

    100% {
        opacity: 1;
        width: 15px;
        height: 15px;
    }
}

@keyframes imgAnim2 {
    0% {
        opacity: 1;
        width: 15px;
        height: 15px;
    }

    50%{
        width: 30px;
        height: 30px;
    }

    100% {
        opacity: 0;
        width: 0;
        height: 0;
    }
}

.checked:checked ~ .checkbox{
    transition: 800ms;
    box-shadow: inset -20px 0 0 var(--couleurdefault);
    background-size: 90%;
}

.checked:checked ~ .checkbox img{
    animation: imgAnim 1 1s;
    opacity: 1;
}

.checkbox img{
    animation: imgAnim2 1 1s;
    opacity: 0;
    position: absolute;
}

.checkbox{
    box-shadow: inset -0px 0 0 #4e4e4e;
    cursor: pointer;
    background: #4e4e4e;
    height: 18px;
    max-height: 18px;
    width: 20px;
    max-width: 20px;
    border-radius: 100px;
    transition: 800ms;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.t-box-m:checked ~ label {
    color: var(--couleurdefault);
    transition: 600ms;
}
.t-box-m ~ label {
    transition: 600ms;
    padding: 21px 0;
    font-size: 13px;
}
.t-box-m:hover ~ label {
    color: var(--couleurdefault);
    transition: 600ms;
    cursor: pointer;
}
.t-box-p:checked ~ .submenup {
    left: 0;
    transition: 600ms;
    width: 100%;
}
.t-box-p:checked ~ label .fa-bars{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/times-solid.svg") no-repeat;
    height: 30px;
    width: 30px;
    color: #fff;
    transition: 400ms;
    display: block;
}
.t-box-p:checked ~ label .fa-bars:hover{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/times-solid-blue.svg") no-repeat;
    height: 30px;
    width: 30px;
    color: #fff;
    transition: 400ms;
}

nav#menunavigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-height: 420px;
    overflow-y: auto;
    min-height: 200px;
}


nav#menunavigation::-webkit-scrollbar {
    width: 6px;
}

nav#menunavigation::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

nav#menunavigation::-webkit-scrollbar-thumb {
    background-color: #f3f3f3;
    border-radius: 20px;
    border: none;
    transition: 400ms;
}

nav#menunavigation::-webkit-scrollbar-thumb:hover {
    background-color: #b4b4b4;
    transition: 400ms;
}

.titre-tracabac{
    font-family: 'Satisfy', cursive;
    font-size: 40px;
    transform: rotate(353deg);
}

.scan::-webkit-scrollbar {
    width: 6px;
}

.scan::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.scan::-webkit-scrollbar-thumb {
    background-color: #f3f3f3;
    border-radius: 20px;
    border: none;
    transition: 400ms;
}

.scan::-webkit-scrollbar-thumb:hover {
    background-color: #b4b4b4;
    transition: 400ms;
}

.menu-titre{
    text-align: center;
    margin-top: -20px;
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    height: 74px;
}

.menu-titre div{
    width: 33%;
}

.menu-titre div a:hover img{
    transform: scale(1.15);
    transition: 600ms;
}

.menu-titre div a img{
    transition: 600ms;
}

.menu-bloc{
    width: 110px;
    height: 110px;
    min-width: 110px;
    /* border: 1px solid #919191; */
    margin: 10px;
    border-radius: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #2f2f2f;
    box-shadow: #000000a6 0 7px 13px -2px;
    transition: 500ms;
    cursor: pointer;
    flex-direction: column;
    font-size: 15px;
    padding: 5px;
}

.menu-bloc:hover{
    cursor: pointer;
    transform: scale(1.1);
    background: #1e1e1e;
    color: white;
    transition: 500ms;
}


.background-subp {
    display: flex;
    width: 98%;
    background: linear-gradient(61deg,var(--couleurfonce),var(--couleurdefault));
    color: black;
    max-width: 500px;
    height: 98%;
    max-height: 550px;
    border-radius: 15px;
    animation: .70s divmenup 1;
    padding: 0;
    box-shadow: #000000a6 0 7px 13px -2px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.submenup {
    /*height: 130vw; */
    display: flex;
    position: fixed;
    list-style-type: none;
    animation: .40s opacity 1;
    top: 60px;
    bottom: 60px;
    padding: 0;
    z-index: 0;
    margin: 0;
    left: -410px;
    background-color: #292a2cba;
    width: 400px;
    min-width: 300px;
    min-height: 300px;
    transition: 600ms;
    height: 96%;
    justify-content: center;
    align-items: center;
}
.submenum {
    display: flex;
    position: fixed;
    list-style-type: none;
    animation: .40s opacity 1;
    top: 60px;
    padding: 0;
    z-index: 0;
    margin: 0;
    right: -410px;
    background-color: #292a2cba;
    width: 400px;
    min-width: 300px;
    min-height: 300px;
    transition: 600ms;
    height: 100%;
    justify-content: flex-end;
    text-align: end;
}
.menu{
    background: #1c1c1c;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 60px;
    position: fixed;
    z-index: 999;
    box-shadow: #000000c7 0px 0px 7px 0px;
}
.menu-gauche{
    width: 33%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
}
.menu-centre{
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    flex-direction: column;
}
.menu-droit{
    width: 33%;
    display: flex;
    justify-content: end;
    align-items: center;
    color: white;
    padding-right: 20px;
}
.corp-de-page{
    display: flex;
    width: 100%;
    padding-top: 60px;
}
.zone-scan{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.zone-scan label{
    text-align: center;
    margin: 10px;
}

div#qr-reader {
    box-shadow: #000000c7 0px 0px 7px 0px;
    border: 0px #000 solid!important;
    background-color: #292a2c;
    border-radius: 15px;
}

div#qr-reader__dashboard_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div#qr-reader__dashboard_section_csr {
    display: flex!important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#qr-reader__dashboard_section_csr span {
    margin-bottom: 15px;
    color: white;
}

div#qr-shaded-region {
    border-radius: 15px;
}

div#qr-reader__scan_region video {
    border-radius: 15px;
}

a#qr-reader__dashboard_section_swaplink {
    display: none;
}

.scan{
    margin-top: 5px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/barcode.svg") no-repeat center;
    background-color: #292a2c;
    color: white;
    box-shadow: #000000c7 0px 0px 7px 0px;
    border: 0px #000 solid;
    width: 90%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: 400ms;
    border-radius: 15px;
    padding: 153px 0 26px 0px;
    background-position-y: 41px;
    max-width: 1000px;
    font-size: 20px;
    min-width: 300px;
}

.scan-2{
    background: url('https://communication-visuelle.tracamatrix.com/images/icons/download.svg') no-repeat center;
    background-color: #292a2c;
    background-size: 90px;
    background-position-y: 35px;
    transition: 500ms;
}

.scan-2:hover{
    background-position-y: 25px;
    transition: 500ms;
}

.img-producteur{
    height: 150px;
    border-radius: 100px;
    width: 150px;
    margin: 10px 0;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(0 0 0 / 40%);
}

.unbloc-resultat {
    width: 46%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    /* background: #1e1e1e; */
    margin: 2%;
    padding: 10px;
    border-radius: 15px;
    background: #fff;
    box-shadow: #999999 0 7px 13px -2px;
    min-width: 300px;
    max-width: 650px;
}

.scan-2:focus-visible{
    background-position-y: 25px;
    transition: 500ms;
}

.scan-area{
    width: 100%;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scan:hover {
    box-shadow: var(--couleurdefault) 0px 0px 7px 0px;
    transition: 400ms;
}
.scan:focus-visible {
    box-shadow: var(--couleurdefault) 0px 0px 7px 0px;
    outline: 0 solid #1c5f00;
    transition: 400ms;
}
/** acc **/

.page-acc{
    margin-top: 29px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 230px;
    min-width: 330px;
    height: 400px;
}

.page-acc2{
    margin-top: 29px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 230px;
    min-width: 330px;
}

.contenue-acc {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: #000000b0 1px 1px 7px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-width: 310px;
    min-height: 400px;
}


/***** bloc scan *****/
.cuisine-info p{
    margin-top: 5px;
}
#result-scanne{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 11px;
    flex-direction: column;
}
.scan-resultat{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
}

.flex-row{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
}

.flex-colum{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.flex-row-menu{
    width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: row;flex-wrap: nowrap;align-content: stretch;
}

.flex-colum-menu{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 12px;
    color: white;
}

.flex-colum-left-top{
    margin: 0 0 0 40px;
    /* width: 30%; */
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.bloc-cuisine {
    background: #292a2c;
    color: white;
    box-shadow: #000000c7 0px 0px 7px 0px;
    padding: 20px;
    border-radius: 15px;
    min-width: 300px;
    margin: 12px;
}
.cuisine-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 20px;
}
.cuisine-text{
    padding-left: 5px;
}
.loog-cuisine {
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-radius: 100px;
    box-shadow: #000000c7 0px 0px 7px 0px;
}
.bloc-info {
    background: white;
    color: black;
    box-shadow: #999999 0 7px 13px -2px;
    padding: 20px;
    border-radius: 15px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 164px;
    margin: 12px;
    transition: 600ms;
}

.bloc-info-2:hover{
    color: var(--couleurdefault);
    transition: 600ms;
    box-shadow: var(--couleurdefault) 0 7px 13px -2px;
    cursor: pointer;
}

.bloc-info a {
    color: black;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 600ms;
}

.flex-space{
    width: 100%;
    display: flex;
    margin-top: 30px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bloc-info-img {
    background: linear-gradient(60deg,#26c6da,#00acc1);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(0 188 212 / 40%);
    border-radius: 100px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 600ms;
    margin-bottom: 5px;
}
.bloc-info-img:hover {
    transform: scale(1.05);
    transition: 600ms;
}
.bloc-info:hover .bloc-info-img {
    transform: scale(1.05);
    transition: 600ms;
}
.bloc-info-bac {
    margin-top: -20px;
    border-radius: 100px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 600ms;
    margin-bottom: 5px;
}
.bloc-info-bac:hover {
    transform: scale(1.05);
    transition: 600ms;
}
.bleu-rose {
    background: linear-gradient(60deg,#008eff,#ff00cf)!important;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%)!important;
}
.orange-rouge {
    background: linear-gradient(60deg,#ff9b00,#ff0000)!important;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%)!important;
}
.vert-bleu {
    background: linear-gradient(60deg,#1ff5a8,#094487)!important;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%)!important;
}
.e027ff {
    background: linear-gradient(60deg,#e027ff,#6c1088);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(242 52 255 / 40%);
}

.ff4d{
    background: linear-gradient(60deg,#44ff4d,#109815)!important;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%)!important;
}

.border-none{
    border: 0 solid!important;
}

.f1b7 {
    background: linear-gradient(60deg,#66bb6a,#43a047);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
}
.ff4444{
    background: linear-gradient(60deg,#ff4444,#ff0000)!important;
    box-shadow: rgb(255 0 0 / 65%) 0 0 8px 0!important;
}

.jaune-jaune{
    background: linear-gradient(60deg,#f3be00,#fffc00)!important;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(0 0 0 / 40%)!important;
}

.alergene {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.bloc-situation {
    background: #292a2c;
    color: white;
    box-shadow: #000000c7 0px 0px 7px 0px;
    padding: 20px;
    border-radius: 15px;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 10px;
}
.bloc-allergene {
    background: #292a2c;
    color: white;
    box-shadow: #000000c7 0px 0px 7px 0px;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 300px;
    margin: 10px;
}
.situation{
    min-width: 300px;
    max-width: 400px;
    margin: 10px;
}
.souvenir{
    margin: 10px 0 0 0;
    width: 96%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*** oModal ***/
.mySlides{
    transition: 600ms;
}
.oModal{
    display: flex;
    position: fixed;
    background: #00000036;
    width: 100%;
    height: 100%;
    z-index: 99;
    top: 1px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 600ms;
}
.contenue-Modal {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: #000000b0 1px 1px 7px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 310px;
}
.oModal-titre{
    padding: 0 0 10px 0;
    border-bottom: 1px solid #b8b7b7;
}

.fermer-modal{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 10%;
    color: white;
}

.oModal2 {
    position: fixed;
    z-index: 9999;
    text-align: center;
    top: 0;
    height: auto;
    right: 0;
    left: 0;
    padding: 0;
    /* padding-bottom: 2%; */
    width: 100%;
    bottom: 0;
    color: black;
    opacity: 0;
    background: #000000b8;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.omodal2div {
    max-height: 600px;
    background-color: white;
    border: black 0px solid;
    box-shadow: 0px 0px 4px 1px #00000054;
    border-radius: 15px;
    max-width: 90%;
    padding: 1%;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.oModal2:target {
    opacity: 1;
    pointer-events: auto;
    animation: 1 divmenub 0.4s;
}

.oModal2 img {
    max-height: 600px;
    width: auto;
    min-height: 450px;
    border-radius: 15px;
    transition: 600ms;
    max-width: 100%;
    height: auto;
}

.oModal2 img:hover {
    transform: scale(1.2);
    transition: 600ms;
}

.oModal2:target > div {
    height: auto;
    margin: 0;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.petit-bouton:hover{
    background: var(--couleurdefault);
    transform: scale(1.06);
    cursor: pointer;
    transition: 400ms;
}
.petit-bouton{
    width: 110px;
    height: 110px;
    /* border: 1px solid #919191; */
    margin: 5px;
    border-radius: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1e1e1e;
    color: white;
    box-shadow: #00000057 0px 0px 4px 0px;
    transition: 400ms;
    cursor: pointer;
}
.petit-bouton label,.petit-bouton a{
    color: white;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.petit-bouton p{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#page4-co{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.bloc-choix-4{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    width: 100%;
    max-width: 400px;
}

.form-btn{
    border-radius: 15px;
    /* background: #1e1e1e; */
    margin: 30px;
    box-shadow: #999999 0 7px 13px -2px;
    padding: 10px;
}

.oModalPage {
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 256px;
    min-width: 330px;
}

.oModalPagePlus {
    min-height: 200px;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    justify-content: flex-start;
    padding:0;
}
.retour{
    position: absolute;
    top: -52px;
    transition: 600ms;
    width: 40px!important;
    border-radius: 100px!important;
    background: url("https://communication-visuelle.tracamatrix.com/public/images/icon/fleche-g.svg") no-repeat center!important;
    background-size: 80%!important;
}
.retour:hover{
    background-position-x: 5px;
}
.btn-vide, button{
    border: 2px solid var(--couleurdefault);
    border-radius: 15px;
    /* padding: 11px; */
    min-width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: #9a8e8e 3px 3px 1px 0px;
    background: #fff;
    font-weight: bold;
    transition: 400ms;
}
.btn-vide:focus, button:focus {
    transform: scale(1.1);
    transition: 400ms;
    background: #4e4e4e;
    color: white;
    cursor: pointer;
    outline: 0px #000;
}
.btn-vide-fin{
    background: #fff;
    font-size: 20px;
    width: 300px;
    margin-top: 20px;
}

.form-scan{
    margin-top: 20px;
    width: 58%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div#oPage1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
div#oPage2 {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}
.invisible{
    display: none;
}

.select-vide{
    border: 0px solid;
    border-radius: 15px;
    padding: 0 5px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: #999999 0 7px 13px -2px;
    font-weight: bold;
    transition: 400ms;
    width: 300px;
    font-size: 16px;
    text-align: center;
    margin-top: 10px
}

.btn-vide:hover, button:hover {
    transform: scale(1.1);
    transition: 400ms;
    background: #4e4e4e;
    color: white;
    cursor: pointer;
}
.font-estampille{
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.btn-plein{
    width: 116px;
    height: 33px;
    background: var(--couleurdefault);
    border: none;
    border-radius: 15px;
    color: white;
    margin: -4px 5px 15px;
    font-weight: 200;
    box-shadow: #9a8e8e 3px 3px 1px 0px;
    transition: 400ms;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.btn-droit:hover {
    background: #1e1e1e!important;
    /* margin-left: 10px; */
    transform: translateX(10px);
    transition: 400ms;
}
.btn-plein:hover {
    background: #1e1e1e!important;
    /* margin-left: 10px; */
    transition: 400ms;
}
.gris-bloquer{
    cursor: no-drop;
    background: #4e4e4e;
}
.choix-oModal {
    text-decoration: none;
}
.choix-oModal li{
    text-decoration: none;
    list-style-type: none;
    margin-top: 10px;
}
#collecte:checked ~ #col{
    transform: scale(1.1);
    transition: 400ms;
    background: #4e4e4e;
    color: white;
    cursor: pointer;
}
#Livraisons:checked ~ #liv{
    transform: scale(1.1);
    transition: 400ms;
    background: #4e4e4e;
    color: white;
    cursor: pointer;
}
.btn-gauche:hover {
    background: #1e1e1e;
    /* margin-left: 10px; */
    transform: translateX(-10px);
    transition: 400ms;
}
.btn-display{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.btn-display2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 96%;
}
input:invalid {
    border-bottom: red solid 1px;
}

.fond-connec {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    background: url(https://communication-visuelle.tracamatrix.com/public/images/fond/new-fond.svg) no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 1px 8px 0 #6f6f6f;
}

.btn-connec {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background:  var(--couleurfonce);
    font-family: "Montserrat", sans-serif;
    box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: none;
    color: white;
    font-weight: 400;
    cursor: pointer;
}

.btn-connec:after {
    content: " ";
    width: 0;
    height: 100%;
    background: var(--couleurdefault);
    position: absolute;
    transition: all 0.4s ease-in-out;
    right: 0;
}

.btn-connec:hover::after {
    right: auto;
    left: 0;
    width: 100%;
}

.btn-connec span {
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: 18px 20px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.15em;
    z-index: 20;
    transition: all 0.3s ease-in-out;
}

.btn-connec:hover span {
    color: #fff;
    animation: scaleUp 0.3s ease-in-out;
}

/*** animation ***/

@keyframes scaleUp {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes divmenub {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes animation1 {
    0% {
        opacity: 0;
        margin-top: -20px;
    }
    30% {
        opacity: 0;
    }
    100% {
        margin-top: 0;
        opacity: 1;
    }
}

@keyframes animation3 {
    0% {
        opacity: 0;
        margin-left: -20px;
    }
    30% {
        opacity: 0;
    }
    100% {
        margin-left: 0;
        opacity: 1;
    }
}

@keyframes divmenuretour {
    0% {
        height: 25px;
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

.opacity{
    animation: divmenub 400ms 1;
}

.animation1{
    animation: animation1 250ms 1;
}

.animation2{
    animation: animation1 250ms 1;
}

.animation3{
    animation: animation3 500ms 1;
}


.lds-dual-ring.hidden {
    display: none;
    animation: 1s divmenub 1;
}
.lds-dual-ring p {
    color: white;
    text-align: center;
    top: 93PX;
    position: absolute;
    /* left: 47%; */
    width: 100%;
    margin: 16% auto;
}
.overlay {
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .8);
    z-index: 999;
    opacity: 1;
    transition: all 0.5s;
}
/*Spinner Styles*/
/*.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}*/
.p-l-5px{
    padding: 0px 0px 0px 5px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 15% auto;
    border-radius: 50%;
    border: 6px solid;
    border-color: #f00 white #003080 #ffffff;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.input-form{
    border: 0px solid #000;
    outline: 0px #000;
    border-bottom: 1px var(--couleurdefault) solid;
    width: 100%;
    padding-bottom: 5px;
}
.text-form{
    margin: 0 10px;
}
.form-alignement{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 15px 0 15px;
}

.form-alignement-colum{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 15px;
}

.croix{
    width: 609px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: white;
}

.bloc-co{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.bloc-choix{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    height: 240px;
    width: 100%;
}
.bloc-choix .btn-connec{;
    margin: 10px 0;
}

.input-actif{
    position: absolute;
    left: 0;
    top: 0;
    transition: 400ms;
    cursor: inherit;
}

.input-form:focus ~ .input-actif,
.input-form:valid ~ .input-actif{
    transition: 400ms;
    left: 10px;
    top: -18px;
    font-size: 13px;
    font-weight: 800;
    color: var(--couleurdefault);
}

.flex-colum-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.input-form:focus,
.input-form:valid{
    border-color: var(--couleurdefault);
    background: none;
}
/*** Back office ***/
.fond-back{
    position: absolute;
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: center;
    height: 300px;
    background: url(https://communication-visuelle.tracamatrix.com/public/images/fond/fond-back.svg) repeat 0 -80px;
}

.carte-cuisine{
    color: white;
    background: linear-gradient(60deg,var(--couleurfonce),var(--couleurdefault));
    padding: 20px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: #000000 0 0 5px 0;
    position: absolute;
    bottom: -60px;
    min-height: 100px;
    flex-direction: row;
    flex-wrap: wrap;
}

.img-carte{
    height: 100%;
    width: 140px;
    min-width: 140px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.texte-carte{
    padding: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.page-back{
    margin-top: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.menu-back {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.menu-back p{
    margin: 10px;
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.menu-back p::before{
    content: '';
    display: block;
    width: 100%;
    float: left;
    height: 2px;
}

.menu-back p::after{
    content: '';
    display: block;
    width: 0;
    float: left;
    height: 2px;
    background-color: var(--couleurfonce);
    transition: width .3s;
    margin-top: 5px;
}

.menu-back p:hover::after {
    width: 100%;
    background-color: var(--couleurdefault);
    cursor: pointer;
    color: var(--couleurdefault);
    transition: width .3s, color .6s;
}

.menu-clic::after {
    width: 100%!important;
    background-color: var(--couleurdefault)!important;
    cursor: pointer!important;
    color: var(--couleurdefault)!important;
    transition: width .3s, color .6s!important;
}

.menu-clic{
    color: var(--couleurdefault);
    transition: 600ms;
}

.menu-back p:hover {
    cursor: pointer;
    color: var(--couleurdefault);
    transition: 600ms;
}

.page-back-contenue {
    width: 100%;
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.back-contenue {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bloc-back {
    width: 90%;
    max-width: 1100px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.nothing-back{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 150px;
}

.nothing-back-2{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 150px;
}

.nothing-back img{
    background: linear-gradient(60deg,#44ff4d,#109815);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    border-radius: 100px;
    padding: 10px;
    /* height: 60px; */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 600ms;
    margin-bottom: 6px;
}

.btn-fermer:hover{
    transform: scale(1.08);
    transition: 400ms;
    cursor: pointer;
}

.btn-fermer{
    border-radius: 100px;
    background: linear-gradient(60deg,#ff4444,#ff0000)!important;
    box-shadow: rgb(255 0 0 / 65%) 0 0 8px 0!important;
    width: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 400ms;
}

.tableau-back {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border: 1px solid #77777747;
    border-radius: 15px;
    padding: 0 20px;
}

.liste-bac{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    margin-top: 10px;
    border-radius: 15px;
    box-shadow: #999999 0 7px 13px -2px;
    max-height: 400px;
    overflow-y: scroll;
}

.erreur {
    border: 1px solid red !important;
}

.liste-bac::-webkit-scrollbar {
    width: 3px;
}

.liste-bac::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.liste-bac::-webkit-scrollbar-thumb {
    background-color: var(--couleurdefault);
    border-radius: 20px;
    border: none;
}

.haut-tab{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}

.haut-tab p{
    width: 33.3%;
    padding: 0 5px 10px 5px;
    text-align: center;
}

.bas-tab p, .bas-tab span{
    width: 33.3%;
    padding: 2.5px 5px 2.5px 5px;
    border-bottom: 1px solid #9a9a9a4d;
    text-align: center;
}

.bas-tab{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    transition: 400ms;
}

/*** bac ***/

.calendrier-bac{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.les-infos-calendrier {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 30px;
}

.calendrier-titre{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.bac-titre-date {
    width: 127px;
}

.bloc-bac-info{
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 600px;
    align-items: center;
}

.rond-cal {
    width: 12px;
    height: 12px;
    min-height: 12px;
    min-width: 12px;
    border: 2px solid var(--couleurdefault);
    border-radius: 100px;
    padding: 4px;
    border-spacing: 2px;
    margin-bottom: 8px;
    margin-top: 8px;
}

.petit-rond-cal {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 100px;
}

.bar-cal {
    min-height: 30px;
    width: 2px;
    background: var(--couleurdefault);
    border-radius: 100px;
    height: 100%;
}

.cal-rond-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.bloc-info-cal {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.infos-text-bac:hover {
    background: linear-gradient(60deg,var(--couleurfonce),var(--couleurdefault))!important;
    color: white!important;
}

.rond-cal:hover .infos-text-bac {
    background: linear-gradient(60deg,var(--couleurfonce),var(--couleurdefault))!important;
}

.back-bleu{
    background: var(--couleurdefault);
}

.back-gris{
    background: #dadada5c;
}

.infos-text-bac {
    margin-top: 11px;
    margin-left: 8px;
    margin-bottom: 11px;
    border-radius: 15px;
    background: #dadada5c;
    padding: 10px;
    box-shadow: #999999 0 7px 13px -2px;
    min-width: 300px;
    /* height: 20px; */
    max-width: 300px;
}

.cal-titre{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cal-titre-gauche{
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.cal-titre-droite{
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.plus-info-cal{
    display: flex;
    margin: 10px 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/** Mon compte **/
.liste-info{
    color: black;
    box-shadow: #999999 0 7px 13px -2px;
    padding: 20px;
    border-radius: 15px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 164px;
    margin: 12px;
    transition: 600ms;
    max-width: 300px;
}

.titre-info{
    margin-bottom: 20px;
}

.width33.liste-info-ligne {
    border-bottom: 1px solid #d3d3d3;
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.liste-tab{
    max-height: 380px;
    overflow-y: scroll;
}

.liste-tab::-webkit-scrollbar {
    width: 3px;
}

.liste-tab::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.liste-tab::-webkit-scrollbar-thumb {
    background-color: var(--couleurdefault);
    border-radius: 20px;
    border: none;
}

.width33.liste-info-ligne img {
    margin-right: 5px;
}

.zone-txt{
    position: absolute;
    top: -173px;
    width: 327px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: -1;
}

.zone-drop:invalid{
    border: 4px dashed var(--couleurdefault);
}

.zone-drop{
    margin-top: 40px;
    border: 4px dashed var(--couleurdefault);
    border-radius: 5px;
    background: #fff0;
    padding: 10px;
    box-shadow: 0 3px 10px 0 #0000003d;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align-last: center;
    transition: 400ms;
    z-index: 99;
}

.zone-drop:hover {
    background: var(--couleurdefault);
    transition: 400ms;
    cursor: pointer;
    scale: 1.05;
}

.zone-drop:valid {
    background: var(--couleurdefault);
    transition: 400ms;
    cursor: pointer;
    scale: 1.05;
}

.prepacommande{
    box-shadow: #000000a6 0 7px 13px -2px;
    min-height: 300px;
    min-width: 250px;
    border-radius: 15px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 10px;
}

.contPrepa{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.vert-prepa{
    background: linear-gradient(60deg,#005704,#00e50a);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    color: white;
}

.backrose {
    background: linear-gradient(60deg,#fd99ff,#9f0084);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(241 133 239);
    color: white;
}


/*** mobile ***/
@media (max-width: 1090px) {
    .flex-colum-left-top{
        margin: 0;
    }
}

@media (max-width: 800px) {
    .bac-titre-date h2{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .bac-titre-date{
        width: 106px;
    }
    .t1,.t2,.t3,.t4{
        display: none;
    }
    .titre-tableau{
        width: 50%;
    }
}

@media (max-width: 700px) {
    .liste-info{
        min-width: 300px!important;
    }
}

@media (max-width: 660px) {
    .liste-bac{
        padding: 5px;
        margin-left: -2.5px;
    }
    .bloc-back{
        padding: 0;
        /*width: auto;*/
    }
    .bloc-back .bold{
        margin-left: 10px;
    }
}

.oModalPage::-webkit-scrollbar {
    width: 3px;
}

.oModalPage::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.oModalPage::-webkit-scrollbar-thumb {
    background-color: var(--couleurdefault);
    border-radius: 20px;
    border: none;
}

.liste-info-lieu::-webkit-scrollbar {
    width: 3px;
}

.liste-info-lieu::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.liste-info-lieu::-webkit-scrollbar-thumb {
    background-color: var(--couleurdefault);
    border-radius: 20px;
    border: none;
}

.liste-info-lieu {
    max-height: 408px;
    overflow-y: scroll;
    margin-top: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

@media (max-width: 600px) {
    .form-alignement {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 15px 0 15px;
    }

    .scan{
        font-size: 14px;
    }

    p{
        font-size: 13px;
    }

    h3{
        font-size: 14px;
    }

    h2{
        font-size: 16px;
    }

    h1 {
        font-size: 18px;
    }

    .titre-tracabac{
        font-size: 30px;
    }

    .bloc-info {
        min-width: 236px;
        height: 140px;
    }

    .pas-de-modif{
        height: auto;
    }

    .img-producteur{
        width: 125px;
        height: 125px;
    }

    .bloc-info-2 {
        min-width: 130px;
        height: 140px;
        min-height: 140px;
    }

    .bloc-back {
        margin-top: 20px;
    }

    .btn-vide{
        font-size: 13px;
        height: 40px;
    }

    .flex-colum {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .oModalPage {
        max-height: 555px;
        overflow-y: scroll;
        margin-top: 10px;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .select-vide{
        font-size: 15px;
        min-height: 40px;
    }

    .contenue-acc {
        background: #fff;
        padding: 15px 5px;
        border-radius: 15px;
        box-shadow: #000000b0 1px 1px 7px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 310px;
    }

    .page-back {
        margin-top: 345px;
    }

    .fond-back{
        height: 265px;
    }

    .bloc-info {
        text-align: center;
    }

    .bloc-info p{
        margin-top: 5px;
    }

    .situation {
        min-width: 0;
        max-width: 400px;
        margin: 10px;
    }

    .bloc-info-img{
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px
    }
}

@media (max-width: 560px) {
    .contenue-Modal{
        max-width: 323px;
    }
    .menu-bloc {
        width: 100px;
        height: 100px;
        min-width: 85px;
        font-size: 12px;
    }
}

.omodalPageModifier{
    max-height: 400px;
    justify-content: flex-start;
}

/*MENU*/

.trash{
    display: block;
    width: 20px;
    height: 20px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/back/trash.svg");
    background-size: 20px;
    cursor: pointer;
    transition: 350ms;
}

.trash:hover {
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/back/trash.webp") center;
    background-size: 20px;
    transition: 350ms;
}

.livraison-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/livraison/livraison-2.svg");
    background-size: 40px;
    transition: 350ms;
}

.menu-bloc:hover .livraison-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/livraison/livraison.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.alert-svg{
    width: 40px;
    height: 40px;
    transition: 350ms;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/attention/1140-error.svg");
    background-size: 40px;
}

.menu-bloc:hover .alert-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/attention/1140-error.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.location-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/location/location.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .location-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/location/location.webp") center;
    transition: 350ms;
    background-size: 40px;
}


.stat-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/stats/stat.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .stat-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/stats/stat.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.valid{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/valid/valid.svg") no-repeat center;
    transition: 350ms;
    background-size: 40px;
    border-radius: 100px;
    padding: 35px;
    cursor: pointer;
}

.valid:hover{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/valid/valid.gif") no-repeat center #fff;
    transition: 350ms;
    background-size: 40px;
    transform: scale(1.2);
}

.droit-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/droit/droit.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .droit-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/droit/droit.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.sav-svg{
    width: 40px;
    height: 40px;
    transition: 350ms;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/sav/sav.svg");
    background-size: 40px;
}

.menu-bloc:hover .sav-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/sav/sav.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.lavage-svg{
    width: 40px;
    height: 40px;
    transition: 350ms;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/wash/lavage.svg");
    background-size: 40px;
}

.menu-bloc:hover .lavage-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/wash/lavage.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.assos-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/compress/compress.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .assos-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/compress/compress.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.fournisseur-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/fournisseur/fournisseur.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .fournisseur-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/fournisseur/fournisseur.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.commande-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/commande/commande.svg");
    transition: 350ms;
    background-size: 40px;
}

.sac-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/sac/sac.svg");
    transition: 350ms;
    background-size: 40px;
}

.varieter-svg{
    width: 60px;
    height: 60px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/variete/melon.svg") center no-repeat;
    transition: 350ms;
    background-size: 60px;
}

.menu-bloc:hover .commande-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/commande/commande.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .sac-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/sac/sac.gif") center;
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .ceui-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/ceuillette/ceuillette.webp") center;
    transition: 500ms;
    background-size: 55px;
}

.ceui-svg{
    width: 55px;
    height: 55px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/ceuillette/ceuillette.svg");
    transition: 500ms;
    background-size: 55px;
}

.menu-bloc:hover .d2-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/scan2d/2d.webp") center;
    transition: 500ms;
    background-size: 55px;
}

.d2-svg{
    width: 55px;
    height: 55px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/scan2d/2d.svg");
    transition: 500ms;
    background-size: 55px;
}

.print-svg{
    width: 55px;
    height: 55px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/printer.svg");
    transition: 500ms;
    background-size: 55px;
}

.docvide-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/scan/docvide.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .docvide-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/scan/docvide.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.docplein-svg{
    width: 40px;
    height: 40px;
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/scan/docplein.svg");
    transition: 350ms;
    background-size: 40px;
}

.menu-bloc:hover .docplein-svg{
    background: url("https://communication-visuelle.tracamatrix.com/images/icons/menu/scan/docplein.webp") center;
    transition: 350ms;
    background-size: 40px;
}

.liste-info-prepa{
    max-height: 190px;
    overflow: auto;
    box-shadow: #000000b0 1px 1px 7px 0;
    border-radius: 15px;
    text-align: left;
    width: 100%;
    padding: 10px 0;
    overflow-x: hidden;
}

.liste-info-prepa p {
    min-width: 186px;
    padding: 0px 10px;
}

.liste-info-prepa::-webkit-scrollbar {
    width: 3px;
}

.liste-info-prepa::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.liste-info-prepa::-webkit-scrollbar-thumb {
    background-color: var(--couleurdefault);
    border-radius: 20px;
    border: none;
}

.boutoncommande{
    background: none;
    border: 1px solid var(--couleurdefault);
    border-radius: 40px;
    padding: 5px;
}

.btn-retour{
    position: absolute;
    background: white;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    font-weight: bold;
    font-size: 17px;
    top: -30px;
    left: -29px;
    transition: 400ms;
    transform: perspective(10px);
}

.btn-retour:hover{
    background: var(--couleurdefault);
    color: white;
    transition: 400ms;
    cursor: pointer;
}

.flex-row-sup {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    transition: 400ms;
    align-items: center;
    justify-content: space-between;
}

.animawait{
    color: #0e2a46;
    animation: pulse 1.5s infinite ease-in-out;
}

.animawait-1{
    animation-delay: -0.3s;
}

.animawait-2{
    animation-delay: -0.1s;
}

.animawait-3{
    animation-delay: 0.1s;
}

@keyframes pulse {
    0% {
        /*transform: scale(0.8);*/
        color: rgba(179, 212, 252, 0.01);
        /*box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);*/
    }

    50% {
        /*transform: scale(1.2);*/
        color: #6793fb;
        /*box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);*/
    }

    100% {
        /* transform: scale(0.8);*/
        color: rgba(179, 212, 252, 0.01);
        /*box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);*/
    }
}

.chapitre{
    height: 3px;
    width: 100px;
    background: var(--couleurdefault);
    border-radius: 60px;
    margin-bottom: 10px;
}

.etiquette{
    border-radius: 15px;
    box-shadow: #999999 0px 5px 13px 0px;
    padding: 4px;
}

.eti-but:hover, .eti-but:focus, .eti-but:active {
    background: var(--couleurdefault);
    transition: 500ms;
    color: white;
    cursor: pointer;
}

.bas-tab{
    transition: 500ms;
}

.tabeti{
    width: 33.3%; min-width: 450px; margin: 10px;    max-width: 500px;
}

@media (max-width: 1576px) {
    .flex-space .tabeti:nth-child(1) {
        order: 1;
    }

    .flex-space .tabeti:nth-child(2) {
        order: 3;
    }

    .flex-space .tabeti:nth-child(3) {
        order: 2;
    }
}

.liste-bac::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.liste-bac::-webkit-scrollbar-track {
    background: #19191900;
    border-radius: 0 100px 100px 0;
}

.liste-bac::-webkit-scrollbar-thumb {
    background-color: var(--couleurdefault);
    border-radius: 20px;
    border: none;
}

@media (max-width: 830px) {
    #resultAllo .haut-tab {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 14px;
        width: 100%;
    }

    #resultAllo .bas-tab {
        display: flex;
        font-size: 13px;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        transition: 400ms;
    }

    #resultAllo .bas-tab p {
        max-width: 100px;
        min-width: 90px;
    }

    #resultAllo .haut-tab p {
        max-width: 100px;
        min-width: 90px;
        margin-left: 0;
    }
}

.divflexspace{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 94%;
    margin-top: 20px;
}