/* RESET */
#mainClean ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mainClean {
    order: 3;
}

.backdrop {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    width: 100vw;
    height: 100vh;
    left: 100%;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

@media (min-width: 1200px) {
    .backdrop {
        display: none;
    }

    .burger {
        display: none;
    }
}

#mainClean.open .backdrop {
    left: 0;
    opacity: 1;
}

#burger {
    width: 50px;
    margin-bottom: 15px;
}

#top-line,
#bottom-line,
#middle-line {
    transform-box: fill-box;
    transform-origin: center;
}

#mainClean.open #burger {
    #top-line {
        animation: down-rotate 0.6s ease-out both;
    }

    #bottom-line {
        animation: up-rotate 0.6s ease-out both;
    }

    #middle-line {
        animation: hide 0.6s ease-out forwards;
    }
}

@keyframes up-rotate {
    0% {
        animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
        transform: translateY(0px);
    }

    30% {
        transform-origin: center;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        transform: translateY(-10px);
    }

    100% {
        transform-origin: center;
        transform: translateY(-10px) rotate(45deg) scale(0.9);
    }
}

@keyframes down-rotate {
    0% {
        animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
        transform: translateY(0px);
    }

    30% {
        transform-origin: center;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        transform: translateY(10px);
    }

    100% {
        transform-origin: center;
        transform: translateY(10px) rotate(-45deg) scale(0.9);
    }
}

@keyframes hide {
    29% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.mobile-opener {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-opener {
        display: inline-block;
        cursor: pointer;
        width: 19px;
        height: 19px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('data:image/svg+xml,<svg fill="%23000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><path id="XMLID_222_" d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z"/></svg>');
    }
}

.mobile-closer {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-closer {
        display: inline-block;
        cursor: pointer;
        width: 26px;
        height: 26px;
        margin: 16px 0;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 -6.5 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>left-arrow</title><desc>Created with Sketch.</desc><g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="ui-gambling-website-lined-icnos-casinoshunter" transform="translate(-342.000000, -159.000000)" fill="%23252528" fill-rule="nonzero"><g id="square-filled" transform="translate(50.000000, 120.000000)"><path d="M317.108012,39.2902857 L327.649804,49.7417043 L327.708994,49.7959169 C327.889141,49.9745543 327.986143,50.2044182 328,50.4382227 L328,50.5617773 C327.986143,50.7955818 327.889141,51.0254457 327.708994,51.2040831 L327.6571,51.2479803 L317.108012,61.7097143 C316.717694,62.0967619 316.084865,62.0967619 315.694547,61.7097143 C315.30423,61.3226668 315.30423,60.6951387 315.694547,60.3080911 L324.702666,51.3738496 L292.99947,51.3746291 C292.447478,51.3746291 292,50.9308997 292,50.3835318 C292,49.8361639 292.447478,49.3924345 292.99947,49.3924345 L324.46779,49.3916551 L315.694547,40.6919089 C315.30423,40.3048613 315.30423,39.6773332 315.694547,39.2902857 C316.084865,38.9032381 316.717694,38.9032381 317.108012,39.2902857 Z M327.115357,50.382693 L316.401279,61.0089027 L327.002151,50.5002046 L327.002252,50.4963719 L326.943142,50.442585 L326.882737,50.382693 L327.115357,50.382693 Z" id="left-arrow" transform="translate(310.000000, 50.500000) scale(-1, 1) translate(-310.000000, -50.500000) "></path></g></g></g></svg>');
    }
}

/* MENU ROOT HORIZONTAL */
#mainClean ul {
    display: flex;
    gap: 11px;
    background-color: white;
}

#mainClean>ul>li.jk-menu-tool>.mobile-closer {
    display: none;
}

/* #4153 E2 : <li> des boutons du menu mobile (HTML valide), sans boîte : son
   contenu se place comme s'il était enfant direct du <ul>, comme avant. */
#mainClean ul li.jk-menu-tool {
    display: contents;
}

#mainClean ul li.jk-menu-tool:before,
#mainClean ul li.jk-menu-tool:after {
    content: none;
}

@media (max-width: 1199px) {
    #mainClean ul {
        flex-flow: wrap column;
        position: absolute;
        gap: 8px;
        right: -100%;
        height: 100vh;
        top: 100%;
        transition: right 150ms ease-in-out;
    }

    #mainClean.open>ul {
        right: 0;
        min-width: 20vw;
        padding: 30px 0;
    }
}

@media (max-width: 1023px) {
    #mainClean.open>ul {
        width: 90vw;
    }
}

#mainClean ul>li {
    position: relative;
    font-size: 18px;
    padding: 16px 0;
    text-transform: uppercase;
    color: #222;
    cursor: pointer;
}

@media (max-width: 1300px) {
    #mainClean ul>li {
        font-size: 16px;
    }
}

@media (max-width: 1199px) {
    #mainClean ul>li {
        padding: 8px 16px;
        text-align: right;
        position: initial;
    }
}

@media (max-width: 1023px) {
    #mainClean ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

#mainClean>ul>li:before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #1a1a1a;
    width: 0;
    transition: width 150ms ease-in-out;
    bottom: 8px;
    left: 0;
}

#mainClean ul>li:last-child>a:after,
#mainClean ul>li:last-child>span:after {
    content: unset;
}

#mainClean ul>li:hover:before {
    width: 100%;
}

#mainClean ul>li>a,
#mainClean ul>li>span {
    color: #1a1a1a;
    position: relative;
}

#mainClean>ul>li>a:after,
#mainClean>ul>li>span:after {
    content: "";
    position: absolute;
    height: 100%;
    background-color: gray;
    width: 1px;
    right: -8px;
}

@media (max-width: 1199px) {

    #mainClean>ul>li>a:after,
    #mainClean>ul>li>span:after {
        content: unset;
    }
}

/* SOUS-MENU NIVEAU 1 VERTICAL */
#mainClean ul>li>ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-flow: wrap column;
    background-color: rgba(255, 255, 255, .8);
    padding: 16px 0;
    gap: 0;
    display: none;
    z-index: 1000;
}

@media (max-width: 1199px) {
    #mainClean ul>li>ul {
        left: unset;
        right: 100%;
        top: 0;
    }
}

@media (max-width: 1023px) {
    #mainClean ul>li>ul {
        left: 100%;
        right: unset;
        top: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, .95);
    }

    #mainClean ul>li>ul.subopen {
        left: 0;
        display: flex;
    }
}

#mainClean>ul>li:last-child>ul {
    right: 0;
    left: unset;
}

@media (max-width: 1199px) {
    #mainClean ul>li:last-child>ul {
        right: 100%;
    }
}

@media (min-width: 1024px) {
    #mainClean ul>li:hover>ul {
        display: flex;
    }
}

/* COLONNE GAUCHE (niveau 2) */
#mainClean ul>li>ul>li {
    text-transform: initial;
    color: #777;
    padding: 4px 16px;
    white-space: nowrap;
    cursor: default;
    position: unset;
}

@media (max-width: 1023px) {
    #mainClean ul>li>ul>li {
        padding: 8px 0 !important;
    }
}


/* Premier lien du menu (E-Shop), juste après le <li> des boutons. */
#mainClean>ul>li.jk-menu-tool+li a {
    color: #e77419;
}

#mainClean>ul>li>ul.has_child>li {
    font-weight: bold;
    color: #111;
    padding: 8px 16px;
    text-transform: uppercase;
}

#mainClean>ul>li>ul>li>a {
    position: relative;
}

#mainClean>ul>li>ul>li>a:before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #1a1a1a;
    width: 0;
    transition: width 150ms ease-in-out;
    bottom: 0px;
    left: 0;
}

#mainClean>ul>li>ul>li>a:hover:before {
    width: 100%;
}

#mainClean ul>li>ul>li:after {
    content: unset;
}

/* VOLET DROIT (niveau 3) */
#mainClean>ul>li>ul>li>ul {
    position: absolute;
    top: 0;
    left: 100%;
    height: fit-content;
    min-height: 100%;
    background-color: rgba(255, 255, 255, .8);
    border-left: 1px solid #ccc;
    padding-left: 16px;
    padding-right: 16px;
    width: fit-content;
}

@media (max-width: 1023px) {
    #mainClean>ul>li>ul>li>ul {
        left: 100%;
        right: unset;
        top: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, .95);
    }

    #mainClean ul>li>ul.subopen {
        left: 0;
        display: flex;
        padding: 0 16px;
    }
}

@media (max-width: 1199px) {
    #mainClean>ul>li>ul>li>ul {
        left: unset;
        right: 100%;
        top: 0;
        border-left: unset;
        border-right: 1px solid #ccc;
    }
}

@media (min-width: 1024px) {
    #mainClean ul>li>ul>li:hover>ul {
        display: block;
    }
}

/* ÉLÉMENTS NIVEAU 3 */
#mainClean ul>li>ul>li>ul>li>a {
    font-weight: normal;
    padding: 6px 4px;
    border-bottom: 1px solid #ccc;
    min-width: 250px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

#mainClean ul>li>ul>li>ul>li>a {
    cursor: pointer;
    width: 100%;
    display: block;
}

#mainClean ul>li>ul>li>ul>li:hover {
    background: #f0f0f0;
}


.top-contact-wrapper .top-contact .eboutique .text {
    transition: opacity 0.5s;
    opacity: 0;
    color: #e77419;
    position: absolute;
    top: 50%;
    left: 0%;
    margin-left: 0 !important;
    margin-top: 0 !important;
    display: block;
    text-align: center;
    z-index: 3;
    width: 100%;
    font-size: 18px;
    transform: translateY(-50%);
}

.top-contact-wrapper .top-contact .eboutique .bg {
    background-color: #f5f5f5 !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    transition: width 0.5s;
    height: 100%;
    width: 0%;
}

.top-contact-wrapper .top-contact .eboutique:hover .text {
    opacity: 1;
}

.top-contact-wrapper .top-contact .eboutique:hover .bg {
    width: 100%;
}

.top-contact-wrapper .top-contact .eboutique {
    position: relative;
    background-color: #e77419 !important;
    color: #fff !important;
}

#search-block-form {
    padding-top: 0px;
    min-width: 260px;
    right: 433px !important;
    position: absolute;
    top: -50px;
    display: block;
    text-align: left;
}