body {
    font-family: "Mulish", sans-serif !important;
    background-color: #f5f5f5
}

#app {
    min-height: 50vh
}

.container-content {
    margin: 0 !important;
    padding-left: 15px;
    padding-right: 15px
}

.container {
    margin: 0 auto;
    background: white;
}

[v-cloak] {
    display: none;
}

.homepage {
    padding: 0;
}

.btn-left-drawer {
    display: none !important
}

.dropdown-content {
    margin-top: 0;
}

    .dropdown-content .q-btn__content {
        text-transform: capitalize
    }

.q-btn-content {
    color: white;
    text-transform: capitalize
}

.SubSideNavPanel {
    left: -100%;
    position: fixed;
    transition: transform .5s cubic-bezier(.5,1,.89,1);
    transform: translateX(-100%);
    left: 0;
    height: 0;
    top: 0;
    bottom: 0;
}

.card-list-page {
    background: transparent
}

.SubSideNavPanel.isActive {
    height: 100vh;
    transform: translateX(0%);
    /* position: absolute;*/
    background-color: white;
    left: 400px;
    z-index: 10000;
    display: block;
    /* top: -161px;*/
    width: 400px;
}

.img-drawer-menu {
    max-width: 100%
}

.row-subside {
    padding-top: 15px
}



.col-img-subdrawer {
    justify-content: center;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

    .col-img-subdrawer img {
        /*  height : 350px*/
    }

.row-showlist {
    width: fit-content;
    margin: 0 auto
}

    .row-showlist .card-produit {
        width: 19%;
        display: inline-block;
        margin-top: 16px;
        margin-left: 14px;
        padding-left: 5PX
    }

.card-produit {
    overflow: hidden
}

.chip-free {
    border-radius: 0 !important;
    position: absolute !important;
    top: -4px;
    left: -4px;
    padding-left: 22px !important;
}

.menu-menu .q-btn {
    border-radius: 28px;
}


.menu-menu .q-tabs__content > * {
    margin-top: 8px;
    margin-left: 8px;
}



@media (min-width: 1200px) and (max-width: 1600px) {
    .row-showlist .card-produit {
        width: 24%;
        margin-left: 10px;
    }
}


@media (min-width: 850px) and (max-width: 1200px) {
    .row-showlist .card-produit {
        width: 32%;
        margin-left: 8px;
    }
}









@media (max-width: 850px) {
    .row-showlist .card-produit {
        float: left;
        width: 47%;
    }
}

@media (max-width: 640px) {
    .row-showlist .card-produit {
        float: left;
        width: 100%;
    }
}



@media (min-width: 769px) {
    .container {
        width: 100%;
    }
}

@media (min-width: 1024px) {




    .submenu {
        max-width: 95% !important
    }
}

@media (min-width: 1370px) {
    .container {
        margin: 0 auto;
        max-width: 1370px !important;
    }

    .submenu {
        max-width: 1370px !important;
    }
}

@media (min-width: 1620px) {
    .container {
        margin: 0 auto;
        max-width: 1620px !important;
    }

    .submenu {
        max-width: 1620px !important;
    }
}

#menu {
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed !important;
    width: 100%;
    z-index: 299 !important;
    background-color: white;
    left: 0;
    right: 0;
    padding: 0
}

    #menu .btn-close-drawer .q-btn__content {
        color: white !important
    }

.q-space-menu4 {
    display: none
}

@media(max-width : 1400px) {
    .SubSideNavPanel.isActive {
        width: 500px
    }
}

@media(max-width : 1024px) {
    #menu {
        left: inherit;
        margin-left: inherit;
        transform: inherit
    }

    .SubSideNavPanel.isActive {
        width: 500px
    }
}

h1 {
    font-size: 40px !important;
    margin-bottom: 10px
}

h2 {
    font-size: 30px !important;
}

h3 {
    font-size: 24px !important;
}


/************** HOME ****************************/

.homepage .q-carousel {
    height: inherit
}

    .homepage .q-carousel img {
        max-width: 100%;
        width: 100%;
    }

    .homepage .q-carousel .q-carousel--padding, .q-carousel__slide {
        padding: 0 !important
    }

.homepage .q-carousel__navigation--bottom {
    bottom: 28px !important;
    background: white;
    width: fit-content;
    left: 50% !important;
    right: 50% !important;
    border-radius: 30px;
    height: 30px;
    border: 1px solid #E6E7E8;
}

.homepage .q-carousel__navigation-icon .q-icon {
    color: #0086D6
}

.homepage .q-carousel__navigation-icon--active .q-icon {
    color: #04235B
}



.homepage .btn-nav {
    background: #0086D6 !important;
    height: 1em !important;
    width: 1em !important;
    border-radius: 30px;
    margin: 0 7px;
    transition: width 2s ease !important;
    cursor: pointer
}

    .homepage .btn-nav.active {
        background: #04235B !important;
    }

.homepage .q-carousel__navigation .q-btn {
    margin: 6px 0 !important
}
/****Bloc catégorie****/
.img-hover-categorie {
    position: relative;
}

    .img-hover-categorie > a > img {
        width: 100%;
        max-width: 100%
    }

.elements-hover {
    position: absolute;
    bottom: 8px;
    left: 25px;
    right: 25px;
}

    .elements-hover .block_content {
        border-top: none;
    }

.element-hover {
    width: 33%;
    float: left;
    background-color: #fff;
    padding: 10px;
    display: none
}

.img-hover-categorie:hover .element-hover {
    display: block;
}

.element-hover a {
    display: flex;
    align-content: center;
    align-items: center;
    text-decoration: none
}

.element-hover img {
    border: 1px solid transparent;
    width: 65px;
    height: 67px
}

.element-hover span {
    padding: 2px 8px 3px 3px;
    color: #545454;
    line-height: 1.2;
    border-radius: 0 10px 10px 0 !important;
    font-size: 13px;
}

.img-hover-categorie:hover .elements-hover {
    display: block;
}

.element-hover:hover img {
    border: 1px solid #e4a95f;
}

.element-hover:hover span {
    background-color: #e4a95f;
}

.row-bloc-cat .img-hover-categorie:first-child .element-hover:hover img {
    border: 1px solid #b5ce87;
}

.row-bloc-cat .img-hover-categorie:first-child .element-hover:hover span {
    background-color: #b5ce87;
}


/**** vignette*****/
#bloc-actu {
    padding: 15px 35px;
}

.box-electronic .ApImage {
    position: relative;
    overflow: hidden;
    border: 1px solid #38a4d6;
    border-radius: 20px;
    text-align: center;
}

.box-electronic a {
    font-family: 'Mulish', sans-serif;
    letter-spacing: 0px;
    text-decoration: none;
    color: #000;
}

.box-electronic .ApImage img {
    transition: all 2s;
    width: 60%;
    height: auto;
    margin: 0 auto;
}

.box-electronic .ApImage .image_description {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    padding: 0 10px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
    color: #fe4e55;
}

    .box-electronic .ApImage .image_description strong, .box-electronic .ApImage .image_description b {
        font-size: 24px;
        color: #000;
        font-weight: 600;
    }

.box-electronic .ApImage:hover img {
    transform: scale3d(1.1, 1.1, 1.1);
}




/************ FOOTER *********************/


.footer {
    margin: 0 auto;
    background-color: white;
    padding: 0 65px 0 65px;
}


    .footer hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, .1);
    }

.footer-upper {
    padding: 35px 30px;
}



.footer .title, .footer .title a {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 15px;
    background: none;
    padding: 0;
    color: #444 !important;
    cursor: auto;
    text-decoration: none
}


.footer .list a {
    color: #898989;
    line-height: 20px;
    padding: 5px 0;
    text-decoration: none;
    display: block
}

.footer .list .footer-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

.footer-disclaimer {
    font-size: 12px;
    text-align: center;
    margin-top: 60px;
    color: #898989;
}

@media(max-width : 768px) {
    .bloc_mit_footer {
        display: none
    }

    .footer-upper hr {
        display: none
    }

    .footer-upper {
        padding: 0 0 15px 0
    }
}

/***************** MENU ******************************/


#menu {
    background-color: #04235B;
    height: 85px;
}

    #menu .q-btn__content {
        color: white !important
    }

.menu-mobile {
    background-color: #04235B;
    padding-left: 30px;
    padding-bottom: 10px
}

.btn-mobile-menu {
    /* background: #006CA9 !important;*/
    padding: 5px 15px !important;
    flex-shrink: 0
}

.title-menu .q-btn__content {
    font-size: 14px;
    color: #555555;
    text-transform: none;
}

.title-submenu {
    margin-bottom: 10px
}

    .title-submenu .q-btn__content {
        font-size: 14px;
        color: #555555;
        text-transform: none;
        font-weight: 600;
    }

.subtitle-submenu .q-btn__content {
    font-size: 12px;
    color: #555555;
    text-transform: none;
    text-align: left;
}

.logo-essilor-menu {
    max-height: 45px;
    padding-right: 22px;
}

.logo-essishop-menu {
    max-width: 220px;
}

#headercat {
    position: relative;
}

.link-add-shopping a {
    display: none
}

#MitscriptAlert {
    display: none
}

.menu-desktop {
    padding-left: 20px
}

.submenu {
    position: absolute;
    top: 85px;
    z-index: 100;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-top: 1px solid #f1f1f1;
    background: white;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px 25px
}

    .submenu .q-btn {
        padding: 3px 5px;
        min-height: inherit
    }

.dropdown-content {
    display: none !important;
    position: fixed !important;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0
}

.btn-dropdown-menu i {
    display: none !important
}

.show {
    display: block !important;
}

.page-search-pad {
    padding-left: 45px;
    padding-right: 45px;
    padding-top: 25px;
    padding-bottom: 25px
}

@media(max-width : 1024) {
    .page-search-pad {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 25px;
        padding-bottom: 25px
    }
}
/*********** DRAWER **************/
.drawer-header {
    background-color: #0089c8;
    color: white;
    padding: 45px 15px 12px 15px
}

.title-drawer {
    font-size: 16px;
    color: #555555;
    font-weight: bold;
    text-decoration: none
}

.subtitle-drawer a {
    font-size: 14px;
    color: #555555;
    text-transform: none;
    text-decoration: none;
}

.f-overlay {
    align-items: center;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background: rgba(35, 35, 35, .7);
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    opacity: 1;
    padding: 30px;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity .2s, visibility 0s .2s;
    z-index: 1449;
}





.subtitle-child a {
    display: flex;
    align-self: center;
}

#drawer-left hr:nth-child(1) {
    display: none
}

#drawer-left hr {
    width: 90%;
    opacity: 0.4;
}

.btn-arrow:hover .q-focus-helper {
    background: none !important
}

.title-drawer:hover {
    color: #0089c8;
}



@media(max-wiudth : 1630px) {
    .submenu {
        width: 95%;
        padding: 20px 15px
    }
}





/********** SEARCHBAR ********************/
.bloc-searc-menu .q-field--auto-height.q-field--labeled .q-field__native {
    margin-top: -10px
}

.bloc-searc-menu {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    align-self: center;
}

    .bloc-searc-menu .q-field--filled.q-field--rounded .q-field__control {
        border-radius: 20px;
        border: 1px solid #0093d0 !important;
        padding-left: 20px !important;
        background-position: 22px 8px;
        background-repeat: no-repeat;
        font-size: 13px !important;
        width: 500px;
        background-color: white;
        height: 44px;
        min-height: 44px
    }

    .bloc-searc-menu i {
        color: #053588
    }

    .bloc-searc-menu .q-field__control {
        color: #053588
    }

    .bloc-searc-menu .q-field__label {
        color: #053588
    }

.q-field--filled .q-field__control:before {
    border: none
}

.q-field--filled .q-field__control:after {
    height: 0 !important
}

.bloc-searc-menu .q-field__label {
    top: 11px
}

.bloc-searc-menu .q-field__marginal {
    height: 43px;
}

@media(max-width : 1024px) {
    .bloc-searc-menu {
        width: 100%
    }
}
/**********FIXED HEADER***************/
.div-header-text {
    text-align: left;
    width: 100%;
    background-color: #0086D6;
    font-size: 12px
}



.center-text {
    width: 95%;
    margin: 0 auto;
}

.tel {
    color: #fff;
    padding: 4px;
}

.boutoninactifopticiens a {
    border-radius: 11px;
    background: #212356;
    font-size: .7em;
    letter-spacing: .3em;
    color: #0086d6;
    padding: 1px 6px 1px 6px;
    border: 1px solid #fff;
    max-height: 19px;
    background-color: white;
    border-color: white;
    border-radius: 11px;
    padding: 3px 10px;
    text-decoration: none;
}

.boutonactif a {
    padding: 1px 6px 1px 6px;
    border-radius: 11px;
    font-size: .7em;
    letter-spacing: .3em;
    color: #fff;
    padding: 3px 10px;
    text-decoration: none;
    border: 1px solid white;
}

/*********** Page search********************/

.page-search {
    padding: 10px 0px 0 0px;
    background-color: transparent;
    margin-bottom: 15px
}

.sub-category-item {
    border: 1px solid #e5e5e5;
    text-align: center;
    margin-bottom: 10px;
}

.title-page {
    font-size: 30px;
    font-weight: normal;
    color: #444;
}

.sub-category-item a {
    color: #444;
    text-decoration: none
}

.sub-category-item .title {
    height: 36px;
    display: block;
    font-size: 12px;
    text-align: center;
}

.block-category-navigation {
    margin: 0 0 20px;
}

    .block-category-navigation .title {
        font-size: 16px;
        font-weight: bold;
        color: #444;
        padding: 12px 30px 12px 10px;
        border-bottom: 1px solid #ddd;
    }

.listbox .list {
    padding-left: 0;
    list-style: none;
}

.listbox .sublist {
    list-style: none;
    padding-left: 15px;
}

.listbox .list li {
    padding: 5px 0 5px 15px;
}

.listbox a {
    text-decoration: none
}



.listbox .list a {
    display: inline-block;
    position: relative;
    padding: 5px 0;
    font-size: 14px;
    color: #444;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

    .listbox .list a:before {
        content: "";
        position: absolute;
        top: 12px;
        left: -15px;
        width: 5px;
        height: 5px;
        background-color: #ddd;
    }

    .listbox .list a.active {
        color: #0089c8
    }

.bread-crumb {
    margin-top: 10px
}

.inner-breadcrumb {
    padding: 10px 15px;
    background-color: #f6f6f6;
}

    .inner-breadcrumb span {
        color: #777777;
    }


    .inner-breadcrumb a {
        display: inline-block;
        margin: 0 5px;
        font-size: 14px;
        line-height: 32px;
        font-weight: 600;
        text-decoration: none;
        color: #0089c8
    }

.summary-filter {
    margin-bottom: 10px
}

#drawer-filter .q-dialog__inner {
    padding: 0
}


.title-filterlist {
    font-weight: bold;
    font-size: 15px
}


/********* PRODUIT *************/

.product {
    display: flex;
    flex-flow: row nowrap;
}

    .product .picture-container {
        position: relative;
        display: table-cell;
        width: 175px;
        padding: 0 15px 30px 0;
        width: 190px;
    }

    .product .product_main_container {
        flex: 1;
        width: auto;
        display: flex;
        flex-flow: column;
        vertical-align: top;
    }

    .product .picture-link {
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 15px
    }

    .product .main_top_container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }


    .product .product_main_container .infos_container {
        width: 100%;
        max-width: 450px;
        display: table-cell;
        vertical-align: top;
    }

    .product .product_main_container a {
        color: #353535;
        text-decoration: none;
        font-size: 14px
    }

    .product .main_top_container .product_price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
    }

.product_price .price {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.3;
    color: #333333;
    white-space: nowrap;
    text-align: right
}

    .product_price .price .min-price {
        font-size: 14px;
        font-weight: inherit;
        margin-top: 5px;
        color: #33333396
    }


.main_bottom_container .q-btn {
    width: 230px;
    margin-bottom: 10px
}

.product_short_description {
    max-height: 100px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.product .main_bottom_container {
    display: flex;
    flex-direction: column;
    text-align: right;
}



/***********Détails produit ****************/

.page-detail-product {
    background: transparent;
    margin-bottom: 20px
}

.product_infos_thumbnail {
    background-color: #ffffff;
    border-radius: 0 0 3px 3px;
    display: flex;
    flex-direction: column
}

.price-details {
    font-size: 24px
}

.btn-quantity .q-field__before {
    padding-right: 0 !important
}

    .btn-quantity .q-field__before .q-btn {
        border-radius: 25px 0 0 25px !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }

.btn-quantity .q-field__after {
    padding-left: 0 !important
}

    .btn-quantity .q-field__after .q-btn {
        border-radius: 0 25px 25px 0 !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }

.btn-quantity .q-field--outlined .q-field__control {
    border-radius: 0 !important
}

.bloc-detail-product {
    margin-bottom: 20px;
    margin-left: 0 !important;
    margin-top: 0 !important
}


.bloc-description-product, .bloc-detail-product {
    background: white
}

.container-mini-img {
    height: 55px;
    width: 70px;
    position: relative;
    display: inline-block;
    margin: 11px 4px 0;
    max-width: 75px;
    text-align: center;
    cursor: pointer;
}

    .container-mini-img:hover {
        border: 1px solid rgb(216, 216, 216) !important;
    }

    .container-mini-img img {
        max-width: 100%;
        height: auto;
        max-height: 100%;
        margin: auto;
    }

.container-img {
    width: 100%;
    min-height: 250px;
    height: 350px;
    position: relative;
    text-align: center;
    cursor: pointer
}

    .container-img img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        bottom: 0;
        margin: auto;
    }



/********** BLOG **************/

.page-actu .post {
    margin: 0 0 30px;
}

.post-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    text-decoration: none
}

.post-date {
    display: block;
    margin: 0 0 15px;
    background-color: #f6f6f6;
    padding: 10px;
    font-style: italic;
    color: #444;
}

.post-body {
    margin: 0 0 20px;
    padding: 0 10px;
    line-height: 22px;
}

.post-details {
    padding: 15px
}

.year-list {
    display: block;
    color: #444;
    font-weight: bold
}

.month-list {
    padding: 3px 0 3px 0px;
    color: #444;
    font-size: 14px;
    position: relative;
    cursor: pointer;
}

    .month-list:hover {
        color: #0089C8
    }

    .month-list::marker {
        width: 5px;
        height: 5px;
        color: #DDDDDD;
    }

.tag-list {
    color: #0089C8;
    cursor: pointer
}


/**********Page panier***********/

.page-panier {
    background: inherit
}

    .page-panier .product .picture-container {
        height: 165px;
    }


    .page-panier .product .main_top_container {
        margin-bottom: 0
    }

#tooltip-shop {
    max-width: 400px !important;
    width: 400px
}

.div-popover-cart a {
    text-decoration: none;
    color: black
}




/*************** COMPARE ************************/


.compare-img img {
    max-height: 100px;
    max-width: 100%
}

.compare-page.container {
    background: transparent
}




/*************** Accueil bloc catégorie **********************/

.bloc-categorie {
    padding: 20px 85px 0 20px
}

.bloc-cat-title {
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
    font-size: 20px !important;
    font-weight: bold;
    padding: 10px 15px;
    background-color: rgba(255,255,255,0.5);
    width: fit-content;
    border-radius: 25px;
    text-transform: uppercase;
    margin-bottom: 15px
}

.bloc-cat-title-home {
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
    font-size: 20px !important;
    font-weight: bold;
    padding: 10px 15px;
    background-color: rgba(255,255,255,0.5);
    width: fit-content;
    border-radius: 25px;
    text-transform: uppercase;
    margin-bottom: 30px
}


.card-subchildren .q-item > div {
    width: 100%;
    text-align: left
}



.bloc-sous-cat {
    width: 80%;
    margin: 0 auto
}

    .bloc-sous-cat a {
        text-decoration: none
    }

.mini-cat {
    text-align: center;
    z-index: 2;
    position: relative;
}

    .mini-cat:hover {
        cursor: pointer
    }


.mini-cat-img img {
    max-width: 80px;
    border-radius: 50px
}

.mini-cat-title {
    padding: 10px 10px;
    color: white;
    font-weight: 600;
    font-size: 18px;
    width: fit-content;
    border-radius: 14px;
    margin: 0 auto;
    margin-top: -15px;
    z-index: 1;
    position: relative;
    text-decoration: none;
    line-height: 16px;
    display: flex;
    align-items: center;
    min-height: 52px
}



.bloc-produit-cat {
    margin-top: 30px !important;
    padding: 10px 15px 20px 15px;
}

    .bloc-produit-cat .card-produit {
        width: 290px;
    }

.bloc-produit-cat-mobile {
    margin-top: 30px !important;
    padding: 10px 15px 20px 15px;
}

.card-produit .top-card {
    height: 32px
}

.card-produit .img-card img {
    max-width: 100%;
    transition: transform .5s ease;
    position: absolute;
    top: 22px;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.img-card > div {
    height: 200px
}

.text-h4 {
    font-size: 2.125rem !important
}

.card-produit .img-card {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.first-card img {
    max-width: 100%;
    max-height: 100%;
}

.first-card > .q-card__section {
    text-align: center
}

.card-produit .cat-card {
    font-size: 12px;
    margin-top: 5px
}

.card-produit .cat-card {
    font-size: 12px;
}

.card-produit .title-card {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #04235B;
    text-wrap: auto
}



.card-produit .bottom-card {
    margin-top: 5px
}

.card-produit .price-card {
    font-size: 18px;
    min-height: 27px
}

.card-produit .ref-card {
    font-size: 10px
}



.card-produit {
    border-radius: 20px !important
}

.link-card-produit {
    text-decoration: none;
    color: inherit
}

.card-produit .link-card-produit:hover .img-card img {
    transform: scale(1.2);
}

.card-produit .link-card-produit:hover .title-card {
    text-decoration: underline
}


.sliders-home {
    width: 70%
}

.q-carousel__slide {
    background-color: transparent !important
}

.q-carousel {
    background-color: #f5f5f5 !important
}

    .q-carousel img {
        border-radius: 30px
    }

    .q-carousel .q-carousel__arrow .q-btn {
        background: #38A4D6
    }

.highlight-menu {
    background: rgba(255,255,255,0.9) !important;
    color: #38A4D6 !important;
    font-weight: bold !important;
    padding: 0.285em 0.7em !important;
    min-height: 2em !important;
}

.bloc-img {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 70px
}

    .bloc-img img {
        width: 70%
    }

.q-toolbar img {
    width: 238px;
    height: 81px;
    max-height: 60px !important;
    padding-left: 25px;
}

.q-badge--floating {
    z-index: 1
}

#item-menu-shoppingcart {
    font-size: 19px !important;
    padding-top: 9.4px;
}

    #item-menu-shoppingcart .q-badge--floating {
        top: -7px;
        right: -14px;
        font-size: 14px;
    }

.btn-jackpot i {
    font-size: 30px !important
}

#menu .fa-cart-shopping {
    font-size: 25px;
}

#menu .fa-user, #menu .fa-cogs {
    font-size: 25px !important
}

#menu .fa-user {
    padding-top: 4px;
}

#adminMenuBtn {
    padding: 0.285em
}

#MenuLoginHeaderMobile .text-label-menu {
    padding-top: 4px;
}

.btn-jackpot .q-badge--floating {
    top: 22px;
    right: -5px;
}


.slider-cat .q-carousel {
    height: inherit
}



.chipcagn .q-chip__content {
    flex-wrap: wrap;
    white-space: normal;
}

.q-carousel img {
    max-width: 100%;
    width: 100%;
}

.card-category-page .bloc-cat-title {
    font-weight: bold;
    letter-spacing: 0.5px;
    font-size: 22px !important;
    border: none
}

.card-category-page a {
    text-decoration: none
}

    .card-category-page a:hover {
        text-decoration: none
    }


.card-subchildren .title-subchildren {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
}

.card-subchildren {
    height: 148px;
    overflow: hidden;
    z-index: 1;
    border-radius: 20px !important;
    margin-top: -8px;
}

    .card-subchildren .q-list {
        position: relative
    }



    .card-subchildren .q-card__section {
        padding-bottom: 6px
    }



.icon-cat-down {
    font-size: 22px !important;
    margin-left: -5px
}


.card-subchildren .q-item--dense, .card-subchildren .q-list--dense > .q-item {
    padding: 2px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-subchildren {
    color: #43620E
}

    .link-subchildren:hover {
        text-decoration: underline !important
    }


.hide {
    display: none
}

.show {
    display: block
}



.first-card {
    height: 100%
}



.text-first-card {
    padding-top: 25px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    height: 73px;
    text-wrap: auto;
}

.first-card .q-card__actions {
    justify-content: left
}

.btn-first-card {
}

.link-menu-child {
    color: #555555;
    text-decoration: none
}

    .link-menu-child span {
        padding-top: 5px
    }

.col-btn-product-card .q-btn {
    padding: 10px 13px;
}

.span-txt-menu {
    position: relative;
    display: flex;
    flex-direction: column
}


.div-btn-menu {
    display: flex;
    flex-wrap: nowrap;
}

    .div-btn-menu.q-gutter-sm > span:nth-child(1) {
        margin-top: 6px
    }

.bloc-compare .price-compare {
    margin-top: 9px;
    line-height: 43px;
}

.input-pj .q-field__control:after, .input-pj .q-field__control:before {
    content: none !important
}

#MenuLoginHeaderMobile > .q-btn__content {
    flex-direction: column
}

.text-label-menu {
    font-size: 12px;
    text-transform: initial;
    color: white
}

.btn-jackpot > .q-btn__content, #item-menu-shoppingcart > .q-btn__content {
    flex-direction: column
}

.link-vu {
    color: black;
    text-decoration: none
}

    .link-vu:hover {
        text-decoration: underline
    }

#zoomC {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.picture-container img {
    max-width: 160px;
    max-height: 160px
}





/*#layout-filtre .q-drawer {
    width: 100% !important
}*/
#stepper-order {
    background: transparent
}

    #stepper-order .q-stepper__header {
        /*background-color: #38A4D6;*/
        color: white
    }

.q-stepper__label {
    border: 1px solid white;
    padding: 6px 15px 6px 5px;
    border-radius: 0 25px 25px 0;
    border-left: none;
}

#stepper-order .q-stepper__dot {
    background: transparent;
    border: 1px solid white;
    margin: 0;
    border-right: none;
    padding: 3px 16px 27px 26px;
    border-radius: 25px 0 0 25px;
}

    #stepper-order .q-stepper__dot span {
        color: inherit
    }

.q-stepper__tab .q-stepper__dot, .q-stepper__tab .q-stepper__label {
    background: white !important;
    color: #0086d6 !important;
    border-color: transparent !important
}

.q-stepper__tab--active .q-stepper__dot, .q-stepper__tab--active .q-stepper__label {
    background: transparent !important;
    color: white !important;
}

#stepper-order .q-stepper__tab--done .q-stepper__dot, .q-stepper__tab--done .q-stepper__label {
    color: white !important;
    background: #003068 !important;
    border-color: #003068
}

#stepper-order .q-stepper__tab--active .q-stepper__dot, #stepper-order .q-stepper__tab--active .q-stepper__label {
    color: white !important;
    background: #003068 !important;
    border-color: #003068 !important;
    font-weight: bold
}



#stepper-order .q-stepper__dot .q-icon {
    margin-top: 2px;
}

#stepper-order .q-stepper__dot i {
    font-size: 22px
}



.q-stepper--horizontal .q-stepper__line:after, .q-stepper--horizontal .q-stepper__line:before {
    background: #0086d6 !important;
}

.q-stepper--horizontal .q-stepper__dot:after, .q-stepper--horizontal .q-stepper__label:after {
    margin-left: 0px !important
}

.q-stepper--horizontal .q-stepper__dot:before {
    margin-right: 0 !important
}

.bg-custom-indicator {
    background: #006CA9 !important;
}

.text-custom-indicator {
    color: #006CA9 !important;
}

.btn-mobile-menu {
    width: 166px !important;
}

.img-drawer {
    max-height: 100px;
    max-width: 100%
}

.subtitle-drawer:hover a, .subtitle-child:hover span {
    color: #0089c8;
    padding-left: 15px;
}

.subtitle-first-child:hover .self-center {
    color: #0089c8;
}

#drawer-left .first-list {
    margin-top: 100px
}

#drawer-left .drawer-header {
    position: fixed;
    width: 100%;
    z-index: 1;
}

.subtitle-drawer .icon-subtile-drawer {
    display: none
}

.subtitle-drawer:hover .icon-subtile-drawer {
    display: block
}

.price-details {
    font-size: 30px;
    color: #38a4d6
}

.title-compare {
    line-height: 15px !important
}

.bloc-name {
    height: 42px
}

.compare-img {
    height: 125px
}

.bloc-compare {
    font-size: 14px;
    font-weight: 500
}



.q-loading-bar--top {
    display: none !important
}

.q-chip-frais {
    flex-wrap: wrap !important;
    height: inherit !important
}

    .q-chip-frais .q-chip__content {
        white-space: normal;
    }

#item-menu-shoppingcart .q-focus-helper, .btn-jackpot .q-focus-helper {
    height: 86% !important
}
/***ANIMATION*/




*, *:before, *:after {
    position: relative;
    box-sizing: border-box;
}

:root {
    --color-heart: #9E9E9E;
    --easing: cubic-bezier(.7,0,.3,1);
    --duration: .5s;
}


.text-btn-like {
    font-size: 12px;
    margin-left: 2px;
    padding-top: 10px;
    color: #9E9E9E;
    line-height: 1.715em;
}



.like-btn-detail .text-btn-like {
    font-size: 14px;
    margin-left: 2px;
    padding-top: 10px;
    color: #9e9e9e;
    font-weight: 500;
}

.like-button {
    display: flex;
    border-radius: 5px;
    font-size: 38px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: none;
    z-index: 2;
    -webkit-transition: -webkit-transform var(--duration) var(--easing);
    transition: -webkit-transform var(--duration) var(--easing);
    transition: transform var(--duration) var(--easing);
    transition: transform var(--duration) var(--easing), -webkit-transform var(--duration) var(--easing);
    cursor: pointer;
    padding-right: 12px;
    margin: 0 auto
}

    .like-button.like {
        transition: none
    }

.like-btn-detail {
    font-size: 42px;
    margin-top: 5px
}

.like-button-card {
    font-size: 30px;
    border: 1px solid #757575;
    border-radius: 24px;
    padding: 2px 5px;
}

/* .like-button-card .particles {
        display: none
    }*/

.like-button:hover {
    background: rgba(0,0,0,0.05)
}

.like-button:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -webkit-transition: inherit;
    transition: inherit;
}

.like-button:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
}

.like-button:active:before {
    -webkit-animation: depress-shadow var(--duration) var(--easing) both;
    animation: depress-shadow var(--duration) var(--easing) both;
}

.like-button:focus:after {
    -webkit-animation: depress var(--duration) var(--easing) both;
    animation: depress var(--duration) var(--easing) both;
}

@-webkit-keyframes depress {
    from, to {
        -webkit-transform: none;
        transform: none;
    }

    50% {
        -webkit-transform: translateY(5%) scale(0.9);
        transform: translateY(5%) scale(0.9);
    }
}

@keyframes depress {
    from, to {
        -webkit-transform: none;
        transform: none;
    }

    50% {
        -webkit-transform: translateY(5%) scale(0.9);
        transform: translateY(5%) scale(0.9);
    }
}

@-webkit-keyframes depress-shadow {
    from, to {
        -webkit-transform: none;
        transform: none;
    }

    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

@keyframes depress-shadow {
    from, to {
        -webkit-transform: none;
        transform: none;
    }

    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

.like-wrapper {
    display: grid;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    z-index: 1;
}

    .like-wrapper > * {
        margin: auto;
        grid-area: 1 / 1;
    }

.heart {
    width: .5em;
    height: .5em;
    display: block;
    -webkit-transform-origin: center 80%;
    transform-origin: center 80%;
}

    .heart > path {
        stroke: var(--color-heart);
        stroke-width: 2;
        fill: transparent;
        -webkit-transition: fill var(--duration) var(--easing);
        transition: fill var(--duration) var(--easing);
    }

/*.like-button:focus .heart > path {
    fill: #0089c8;
    stroke: #0089c8
}
*/
.like-button:focus .heart {
    -webkit-animation: heart-bounce var(--duration) var(--easing);
    animation: heart-bounce var(--duration) var(--easing);
}

.like-button-like .heart > path {
    fill: #0089c8;
    stroke: #0089c8
}

@-webkit-keyframes heart-bounce {
    40% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }

    0%, 80%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heart-bounce {
    40% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }

    0%, 80%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/* Added wrapper to prevent layout jank with resizing particles */
.particles {
    width: 1px;
    height: 1px;
}

.particle {
    position: absolute;
    top: 0;
    left: 0;
    height: .1em;
    width: .1em;
    border-radius: .05em;
    background-color: var(--color);
    --percentage: calc( var(--i) / var(--total-particles) );
    --Θ: calc( var(--percentage) * 1turn );
    -webkit-transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0) scaleY(0);
    transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0) scaleY(0);
    -webkit-transition: all var(--duration) var(--easing);
    transition: all var(--duration) var(--easing);
}



.like-button-like:focus .particle {
    -webkit-animation: particles-out calc(var(--duration) * 1.2) var(--easing) forwards;
    animation: particles-out calc(var(--duration) * 1.2) var(--easing) forwards;
}


.like-button-like .particles {
    display: none
}




@-webkit-keyframes particles-out {
    50% {
        height: .3em;
    }

    50%, 60% {
        height: .3em;
        -webkit-transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0.8em) scale(1);
        transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0.8em) scale(1);
    }

    60% {
        height: .2em;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(1em) scale(0);
        transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(1em) scale(0);
    }
}

@keyframes particles-out {
    50% {
        height: .3em;
    }

    50%, 60% {
        height: .3em;
        -webkit-transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0.8em) scale(1);
        transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0.8em) scale(1);
    }

    60% {
        height: .2em;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(1em) scale(0);
        transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(1em) scale(0);
    }
}

.ripple {
    height: 1em;
    width: 1em;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

    .ripple:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0.4em solid var(--color-heart);
        border-radius: inherit;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

.like-button:focus .ripple:before {
    -webkit-animation: ripple-out var(--duration) var(--easing);
    animation: ripple-out var(--duration) var(--easing);
}

@-webkit-keyframes ripple-out {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        -webkit-transform: scale(5);
        transform: scale(5);
    }
}

@keyframes ripple-out {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        -webkit-transform: scale(5);
        transform: scale(5);
    }
}



.section-iframe {
    text-align: center
}

    .section-iframe iframe {
        border: none
    }



.card-produit {
    height: 375px;
    width: 290px
}


.scroll-area-card {
    height: 405px !important;
    width: 100%;
    padding-left: 10px;
    padding-top: 15px
}

.scroll-area-min-img {
    width: 100%;
    height: 100px !important
}

.scroll-area-menu {
    width: 100%;
    height: 34px !important
}

    .scroll-area-menu .q-scrollarea__bar, .scroll-area-menu .q-scrollarea__thumb {
        display: none
    }

#drawer-right a {
    padding-top: 12px;
}

#drawer-left .title-drawer .q-item {
    padding: 12px 16px;
}

.q-carousel .q-carousel__arrow .q-btn {
    background: white;
    color: rgba(0, 0, 0, 0.5);
    /* padding: 15px 10px; */
    border-radius: 5px;
    height: 6rem;
    /* font-size: 15px; */
    width: 3rem;
}

.q-carousel__prev-arrow--horizontal {
    left: 0 !important;
}

    .q-carousel__prev-arrow--horizontal .q-btn {
        border-radius: 0 4px 4px 0 !important
    }

.q-carousel__next-arrow--horizontal {
    right: 0 !important
}

    .q-carousel__next-arrow--horizontal .q-btn {
        border-radius: 4px 0 0 4px !important
    }

.q-carousel__arrow .q-icon {
    font-size: 50px !important
}

.scroll-area-card .q-gutter-md > * {
    margin-left: 17px !important;
    margin-top: 17px !important
}


@media(max-width : 1300px) {
    .span-txt-menu .q-btn {
        font-size: 16px !important
    }

    #item-menu-shoppingcart {
        font-size: 17px !important
    }

    .bloc-searc-menu {
        max-width: 380px;
    }




    .product .product_main_container .infos_container {
        max-width: 324px;
    }


    #headercat {
        position: relative;
        margin-top: 57px;
    }



    #menu .fa-user, #menu .fa-cogs {
        font-size: 18px !important
    }

    #menu .fa-cart-shopping {
        font-size: 22px
    }
}

@media(max-width : 1024px) {
    .menu-desktop {
        display: none !important
    }

    .menu-desktop {
        display: none !important
    }


    #menu {
        position: relative !important;
    }

    #headercat {
        margin-top: 0 !important
    }
}



@media(max-width : 1024px) {

    .bloc-detail-product.q-col-gutter-lg > *, .bloc-detail-product.q-col-gutter-x-lg > * {
        padding-left: 0 !important;
        padding-top: 0
    }

    .bloc-detail-product .col-right-product {
        margin-top: 15px
    }



    .bloc-produit-cat .card-produit {
        width: 315px;
    }

    .bloc-cat-title, .bloc-cat-title-home {
        font-size: 16px !important
    }

    .bloc-sous-cat .mini-cat-img img {
        max-width: 80px !important;
        max-height: 80px !important;
    }


    .bloc-sous-cat .mini-cat-title {
        min-height: 45px;
        padding: 3px 7px;
        font-size: 15px
    }


    .bloc-img img, .sliders-home {
        width: 88%;
    }

    .container-img {
        height: 150px
    }


    .btn-jackpot i {
        font-size: 35px !important;
    }

    .btn-jackpot .q-badge--floating {
        top: 27px;
        right: -11px;
    }

    #menu .fa-cart-shopping {
        font-size: 28px;
    }

    .div-btn-menu {
        height: 57px
    }

    #menu .fa-user, #menu .fa-cogs {
        font-size: 25px !important;
    }

    #menu .fa-user {
        padding-top: 0
    }

    #item-menu-shoppingcart .q-badge--floating {
        top: -8px;
        right: -12px;
    }

    .card-category-page {
        height: inherit
    }

    .lastview {
        display: none
    }



    .product .picture-container {
        width: 135px;
    }

    .product .main_top_container {
        flex-direction: column
    }

    .card-category-page .bloc-cat-title {
        margin: inherit;
        font-size: 14px !important;
        margin-bottom: inherit;
        background: white;
        /*border-bottom: 1px solid rgba(0,0,0,.12);*/
        letter-spacing: 0;
        border-radius: 0;
        width: 100%;
        text-align: left;
    }

    .list-cat-expansion {
        background: white;
    }

        .list-cat-expansion a {
            color: black
        }

    .text-label-menu {
        display: none
    }

    .q-space-menu3 {
        display: none
    }

    .bloc-searc-menu {
        max-width: 400px;
    }


    #headercat {
        margin-top: -1px !important;
    }

    .menu-mobile {
        padding-left: 15px;
    }

    .highlight-menu {
        padding: 0.285em 0.7em !important;
        min-height: 2em !important;
    }


    .btn-mobile-menu {
        width: 55px !important
    }

    .picture-container img {
        max-width: 110px;
        max-height: 160px;
    }
}

@media(max-width : 768px) {
    .q-toolbar img {
        max-height: 35px !important;
        padding-left: 0px;
    }


    .bloc-img img, .sliders-home {
        width: 100%
    }

    .bloc-img img {
        width: 95%
    }

    .sliders-home .q-carousel__control {
        display: none
    }



    .div-btn-menu {
        height: 57px
    }



    .compareprod {
        display: none !important
    }


    .bloc-categorie {
        padding: 20px 15px !important;
    }
}

@media(max-width : 580px) {

    .page-panier .text-h6 {
        font-size: 1rem;
    }



    .q-toolbar img {
        max-height: 40px !important;
    }

    .div-btn-menu .btn-jackpot i {
        font-size: 22px !important;
        padding-top: 9px
    }


    .div-btn-menu .fa-cart-shopping {
        font-size: 20px !important
    }

    #menu .fa-user, #menu .fa-cogs {
        font-size: 20px !important;
    }

    #menu .fa-cart-shopping {
        padding-top: 6px;
    }
}

@media (max-width: 1400px) {
    .card-produit .price-card {
        font-size: 18px
    }
}

@media (max-width: 1024px) {
    .card-produit .price-card {
        font-size: 16px
    }
}



/************* CAGNOTTE *********************/

.head-cagnotte {
    background-image: linear-gradient(to right, #08568e, #0088c7, #08568e);
    color: white;
    margin-top: 20px;
}

.bloc-head-cagnotte {
    background-repeat: no-repeat;
    background-position: top left;
    min-height: 230px;
    padding: 55px 40px;
}

    .bloc-head-cagnotte.bloc-01 {
        background-image: none;
    }

    .bloc-head-cagnotte > .titre_big_1 {
        font-size: 40px;
        font-weight: 300;
        line-height: 1.2em;
    }

    .bloc-head-cagnotte > .titre_big_2, .bloc-head-cagnotte > .titre_big_3 {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .bloc-head-cagnotte.bloc-02 {
        padding: 55px 15px 55px 40px;
    }

    .bloc-head-cagnotte > .titre_big_3 {
        font-size: 24px;
        text-transform: uppercase;
    }

    .bloc-head-cagnotte.bloc-02 span {
        font-size: 26px;
        font-weight: bold;
    }

    .bloc-head-cagnotte.bloc-03 {
        padding: 55px 0px 55px 40px;
    }

    .bloc-head-cagnotte > .titre_big_3 {
        font-size: 24px;
        text-transform: uppercase;
    }

    .bloc-head-cagnotte img {
        display: inline-block;
        width: 40px;
        margin-top: -15px;
        margin-left: 15px;
    }

.cagnotte-liens .liens {
    text-align: center;
    margin: 30px;
}

    .cagnotte-liens .liens a {
        background-color: white;
        border-radius: 20px;
        text-align: center;
        padding: 5px 15px;
        color: black;
        display: inline-block;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: bold;
        margin-right: 15px;
        cursor: pointer
    }

        .cagnotte-liens .liens a:hover, .cagnotte-liens .liens a:active, .cagnotte-liens .liens a:focus, .cagnotte-liens .liens .active {
            background-color: #0088c7;
            color: white;
            text-decoration: none;
        }


.bloc-principe {
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: top 20px left -2px;
    padding: 30px 30px 30px 45px;
    min-height: 300px;
    text-align: left;
    margin-top: 30px;
    color: #777777
}

.page-cagnotte {
    background-color: white
}


.bloc-principe h3 {
    color: #0088c7;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 30px;
    letter-spacing: 3px;
    font-weight: 500;
    font-size: 18px;
    margin: 0;
    line-height: 1.2em;
    margin-bottom: 15px;
}


.page-cagnotte h2 {
    color: #0088c7;
    font-weight: 200;
    margin-bottom: 30px;
    font-size: 30px;
}

.mentions {
    font-size: 10px;
}

.bloc-avantages {
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: top 20px left -2px;
    padding: 30px 30px 30px 45px;
    min-height: 590px;
    margin-top: 30px;
}

    .bloc-avantages.bloc-01 h2, .bloc-avantages.bloc-01 h3 {
        color: #b5ce87;
        border-color: #b5ce87;
        margin-bottom: 30px;
        line-height: 1.1em
    }

    .bloc-avantages.bloc-02 h2, .bloc-avantages.bloc-02 h3 {
        color: #e4a95f;
        border-color: #e4a95f;
        margin-bottom: 30px;
        line-height: 1.1em
    }

    .bloc-avantages h3 {
        font-size: 18px !important;
        font-weight: bold;
    }

.cadrant {
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 30px;
    height: 260px;
    position: relative;
    background-position: center;
}

    .cadrant img {
        max-width: 40%;
        position: absolute;
        bottom: -5px;
        left: 40%;
        transform-origin: 81% 50%;
        display: inline;
        margin-left: -24.3%;
    }

.page-cagnotte tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .05);
}

.page-cagnotte table thead {
    background-color: rgba(0, 0, 0, .1);
}

.card-panier-fixed {
    position: sticky !important;
    top: 80px;
}

p {
    margin: 0 0 5px !important;
}

.stepper-panier .q-panel-parent, .stepper-panier .scroll {
    overflow: inherit
}

.chip-attribute {
    display: none !important
}

.btn-quantity .q-field__marginal, .btn-quantity .q-field--dense .q-field__control {
    height: 35px !important;
    font-size: 14px;
    padding: 0 4px;
    font-weight: bold
}

.btn-quantity .q-field__inner {
    width: 60px !important
}

.btn-quantity button {
    background: transparent;
    border: none;
    cursor: pointer
}

.btn-quantity .q-field--outlined .q-field__control:before {
    border: none
}

.btn-quantity .q-field {
    border: 1px solid #1976d2;
    border-radius: 5px;
    padding: 0 2px;
    width: 105px
}

.btn-quantity .q-field__native {
    color: #1976d2 !important
}

.btn-quantity .q-field__input, .btn-quantity .q-field__native {
    text-align: center;
}

.btn-quantity .fa-minus, .btn-quantity .fa-plus {
    color: #1976d2
}

.new-div-product {
    width: 50%;
    margin-top: 30px
}

.bloc-actu-home {
    color: #04235B
}

.actu-category-home {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 600;
}

.actu-title-home {
    font-size: 18px;
    font-weight: bold
}

.link-home-title-cat {
    color: inherit;
    text-decoration: none
}

    .link-home-title-cat:hover h1 {
        font-size: 22px !important;
    }


.div-img-first-card {
    height: 215px;
}

.carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    width: 100%;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: 405px;
}

    .carousel-wrapper::-webkit-scrollbar {
        display: none;
    }

.carousel-content {
    display: flex;
    user-select: none;
}

.carousel-wrapper .card-produit {
    margin-left: 16px
}

    .carousel-wrapper .card-produit * {
        pointer-events: auto;
    }

.carousel-wrapper {
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}

.carousel-wrapper {
    scroll-behavior: smooth;
}

    .carousel-wrapper, .carousel-content, .carousel-wrapper .card-produit {
        user-select: none;
    }

.card-card-list {
    background: transparent !important
}

.card-category-page .bloc-cat-title {
    color: white
}

.dialog-dec thead tr {
    background: #f6f6f6
}

.dialog-dec thead label {
    background: white
}

.btn-mobile-menu {
    width: 123px !important;
    margin-top: 8px;
}

.txt-mob {
    display: none
}

@media(max-width : 1024px) {
    .bloc-head-cagnotte {
        background-image: none !important;
        border-bottom: 1px solid white;
        a padding: 25px !important;
        min-height: 160px
    }

    .card-panier-fixed {
        position: relative !important;
        top: 0
    }
}

.item-icon {
    z-index: 10; /* au-dessus des liens */
    position: relative;
}

#drawer-left img {
    max-width: 97%
}

.nav-arrows {
    width: 106% !important;
    left: -43px !important;
}

.card-category-page {
    height: 420px
}

.slider-cat-desk {
    display: block
}

.slider-cat-mob {
    display: none
}

@media(max-width : 1024px) {
    .dropdown-content {
        position: fixed;
        background-color: white !important;
        padding: 5px 10px !important;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) !important;
        z-index: 1 !important;
    }

    .card-category-page {
        height: inherit
    }

    .txt-mob {
        display: block
    }
}

@media(max-width : 768px) {
    .q-toolbar img {
        width: inherit
    }

    .slider-cat-desk {
        display: none
    }

    .slider-cat-mob {
        display: block
    }

    .menu-mobile {
        padding-left: 0
    }

    .btn-mobile-menu {
        width: 50px !important
    }

    .btn-logo-global {
        padding-left: 0 !important
    }

    .page-search-pad {
        padding: 15px
    }

    #app > div.row.q-col-gutter-lg.q-pa-md.bloc-detail-product > div.col-lg-8.col-md-9.col-12.col-right-product > div > div > div.new-div-product > div.q-card.q-card--flat.no-shadow > div:nth-child(2) > button > span.q-btn__content.text-center.col.items-center.q-anchor--skip.justify-center.row {
        text-align: left !important
    }

    .new-div-product {
        width: 100%
    }

    .nav-arrows {
        width: 100% !important;
        left: 0px !important;
    }
}



.scroll-x {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* inertie sur mobile */
    cursor: grab;
}

    .scroll-x::-webkit-scrollbar {
        display: none; /* optionnel */
    }

    .scroll-x > * {
        flex: 0 0 auto; /* éviter que les enfants se compressent */
    }



@media(max-width : 580px) {
    .btn-jackpot .q-badge {
        display: none
    }

    .btn-mobile-menu {
        padding-left: 0 !important;
    }

    .card-produit {
        height: 375px;
        width: 268px;
    }

    .row-showlist .card-produit {
        margin-left: 0 !important
    }

    .nav-arrows {
        top: 46% !important
    }

    .card-category-page {
        padding: 0
    }

    .card-card-list > div {
        padding: 0
    }

    .card-category-page {
        padding: 0 !important
    }

    .product .picture-container {
        width: 90px;
    }

    .picture-container img {
        max-width: 100%;
        max-height: 160px;
    }

    .row-showlist.list-search {
        margin-left: 0
    }


    .bloc-categorie {
        padding: 20px 0px !important;
    }

    .carousel-wrapper .card-produit {
        margin-right: 0px !important;
    }

    #slider-top {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .nav-arrows {
        width: 98% !important;
        left: 3px !important;
    }
}

@media(max-width : 365px) {

        #app > div.row.q-col-gutter-lg.q-pa-md.bloc-detail-product > div.col-lg-8.col-md-9.col-12.col-right-product > div > div > div.new-div-product > div.product_infos_thumbnail > div:nth-child(3) > div > div:nth-child(2) {
            margin-left: 0 !important;
            margin-top: 10px
        }
    }

/* ---- Onglet Tuto sur fiche produit ---- */
.esh-product-tuto-item { padding: 12px 0; }
.esh-product-tuto-img { border-radius: 8px; overflow: hidden; background: #f5f5f5; position: relative; }
.esh-product-tuto-img img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover; }
.esh-product-tuto-img-yt { aspect-ratio: 16/9; }
.esh-product-tuto-img-yt img { position: relative; z-index: 0; height: 100%; object-fit: cover; border-radius: 0; }
.esh-product-tuto-yt-overlay { display: none; }
.esh-product-tuto-title { font-size: 1rem !important; font-weight: 700; color: #212121; margin-bottom: 6px; line-height: 1.35; }
.esh-product-tuto-excerpt { font-size: 0.85rem; color: #757575; line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.esh-product-tuto-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #fff; background: #04235B; text-decoration: none; padding: 7px 16px; border-radius: 6px; transition: background 0.2s, gap 0.2s; }
.esh-product-tuto-link:hover { background: #0a3a7e; gap: 10px; color: #fff; text-decoration: none; }

/* Product tab — allow sticky inside tab panel */
.q-tab-panels:has(.esh-product-tuto-detail),
.q-tab-panel:has(.esh-product-tuto-detail),
.q-panel:has(.esh-product-tuto-detail) { overflow: visible !important; }

/* Product tab — single tuto detail mode */
.esh-product-tuto-detail-title { font-weight: 700; color: #04235B; margin-bottom: 4px; }
.esh-product-tuto-detail-video { border-radius: 10px; overflow: hidden; }
.esh-product-tuto-detail-video .esh-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; }
.esh-product-tuto-detail-video .esh-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.esh-product-tuto-detail-cover { border-radius: 10px; overflow: hidden; }
.esh-product-tuto-detail-cover img { width: 100%; height: auto; display: block; border-radius: 10px; }
.esh-product-tuto-detail .esh-tuto-html-content { font-size: 0.92rem; line-height: 1.7; color: #424242; }
.esh-product-tuto-detail .esh-tuto-html-content img { max-width: 100%; height: auto !important; }
.esh-product-tuto-detail .esh-tuto-html-content * { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; }

/* Product tab — sidebar produits liés */
.esh-product-tuto-sidebar { background: #f8f9fa; border-radius: 10px; border: 1px solid #e8e8e8; overflow: hidden; position: sticky; top: 100px; }
.esh-product-tuto-sidebar-header { display: flex; align-items: center; font-weight: 700; font-size: 0.9rem; color: #04235B; padding: 14px 16px; border-bottom: 1px solid #e8e8e8; }
.esh-product-tuto-sidebar-body { padding: 8px 0; }
.esh-product-tuto-sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; text-decoration: none; color: #424242; font-size: 0.85rem; transition: background 0.15s; }
.esh-product-tuto-sidebar-link:hover { background: #eef1f5; text-decoration: none; color: #04235B; }
.esh-product-tuto-sidebar-link-info { display: flex; align-items: center; gap: 4px; }