:root {
    --primary: #faca2d;
    --lightgrey: #f5f5f5;
    --font-ops: 'Open Sans', sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --overlay: #80808091;
    --max-width: 800px;
}
h1,h2,h3 {
    font-weight: inherit;
    font-size: inherit;
    margin:unset;
}
body {
    margin: unset;
    font-family: var(--font-system);
    background: var(--lightgrey);
}
a, a:hover, a:visited {
    color:unset;
    text-decoration: unset;
}
div,section,header,footer {
    box-sizing: border-box;
}
.ops {
    font-family: var(--font-ops);
}
header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: white;
    font-family: var(--font-ops);
}
.section1, .section2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}
.section1 {
    gap: 50px;
    padding: 50px 0;
}
.section2 {
    gap: 20px;
}
.form-input {
    border: 1px solid var(--primary);
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 8px;
    border-radius: 3px;
    min-height: 48px;
    height: fit-content;
    position: relative;
}
.form-input-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 5px 0;
    height: 48px;
}
.form-input-checkbox input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.form-input label {
    font-size: inherit;
    font-weight: 500;
    position: absolute;
    margin-top: 4px;
    color: #aaaaaa;
    transition: color 200ms, margin-top 200ms;
}
.form-input.select label,
.form-input.alt label {
    font-weight: 500;
    position: absolute;
    margin-top: -7px;
    color: var(--primary);
    font-size: 10px;
}
.form-input textarea,
.form-input select,
.form-input input {
    width: 100%;
    margin-top: 7px;
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
}
.change_pays_livraison {
    width: 30px;
    cursor: pointer;
    user-select: none;
}
#header-row {
    position: fixed;
    pointer-events: none;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    background-color: transparent;
    transition: background-color 200ms;
    z-index: 3;
}
#header-row.scroll {
    pointer-events: all;
    background-color: white;
    box-shadow: 0 2px 4px #8080802b;
}
#header-left, #header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
#top-left-port-info {
    display: none;
}
body.hasbasket #top-left-port-info {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity 500ms;
}
.var-basket-port-hint {
    color: #41ab41;
}
body.basket_error_2 .var-basket-port-hint {
    color: red;
}
@media (max-width:1120px) {
    #header-row:not(.scroll) #top-left-port-info {
        opacity: 0;
    }
}
.btn-a {
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    width: fit-content;
}
.btn-a i {
    font-size: 25px;
}
.btn-a .label {
    font-size: 12px;
    font-family: var(--font-ops);
    margin-top: 5px;
}
#header-logo {
    width: 150px;
    margin: 20px;
}
#header-menu {
    display: flex;
    margin-top: -20px;
}
#header-menu-content-wrap .menu-item {
    background: white;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    margin: 2px 0;
    cursor: pointer;
    user-select: none;
    display: flex;
    gap: 20px;
    align-items: center;
}
#header-menu-content-wrap .menu-item-img {
    width: 100px;
    height: 100px;
    background-size: contain;
    background-position: center;
}
.hover {

}
.hover:hover {
    color: #393939;
}
#header-menu-content,
#header-search-results {
    display: none;
    background: var(--lightgrey);
    width: 100%;
}
#header-search-results {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 10px;
}
.header-search-result {
    width: 100%;
    max-width: var(--max-width);
    background: white;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    display: flex;
}
.header-search-result:not(.visible) {
    display: none!important;
}
.header-search-result .sr-img {
    min-width:70px;
    width: 70px;
    height: 70px;
    background-size: contain;
    background-position: center;
    margin-right: 20px;
}
.header-search-result .sr-type {
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}
.header-search-result .sr-title {
    font-weight: 500;
}
.header-search-result .sr-text {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 5px;
}
#header-menu-content-wrap, #header-search-results-wrap {
    padding: 20px;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}
.header-menu-option {
    margin: 0 10px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    padding-top: 30px;
}
.header-menu-option:hover {
    border-bottom: 2px solid #000000;
}
.header-menu-option.selected {
    border-bottom: 2px solid var(--primary)!important;
}
#header-search {
    width: 300px;
    background: var(--lightgrey);
    height: 40px;
    border-radius: 10px;
    margin: 25px 20px 20px;
}
#header-search label {
    position: absolute;
    font-size: 10px;
    margin-top: -14px;
    margin-left: 10px;
}
#header-search input {
    width: 100%;
    height: 100%;
    border: none;
    background: unset;
    outline: none;
    font-size: inherit;
    padding: 0 10px;
    font-family: inherit;
}
#btn-basket {
    opacity: 0;
    cursor: unset;
}
body.hasbasket #btn-basket {
    color: var(--primary);
    opacity: 1;
    cursor: pointer;
}
body:not(._login) #btn-user,
body._login #btn-login {
    display: none;
}
.page {
    width: 100%;
    background: white;
    min-height: 100px;
    display: none;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}
#mobile-menu {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--overlay);
    display: none;
}
#mobile-menu-box {
    height: 100%;
    background: white;
    width: 80%;
    box-shadow: 2px 0 5px #0000002e;
    overflow-y: scroll;
}
#mobile-menu-box-content {
    width: 100%;
    padding: 20px;
}
#mobile-menu-list {
    margin-top: 20px;
}
.mobile-menu-item {
    border-bottom: 1px solid;
    border-color: lightgray;
    padding: 15px 0;
    cursor: pointer;
    user-select: none;
}
#mobile-menu-affiches {
    min-height: 100px;
}
.mobile-menu-affiche {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.mobile-menu-affiche .title {
    margin-left: 10px;
}
.mobile-menu-affiche .img {
    width: 50px;
    height: 50px;
    background-color: lightgray;
    background-size: cover;
    background-position: center;
}
#mobile-menu-logo {
    width: 150px;
}
#mobile-menu-close {
    width: 20%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    font-size: 24px;
    color: white;
}
#mini-basket-info {
    display: none;
}
#mobile-menu, #basket, #login {
    position: fixed;
    z-index: 5;
}
.overlay {
    width: 100%;
    background: var(--overlay);
    height: 100%;
}
#basket, #login {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#basket-box, #login-box {
    background: white;
    width: 500px;
    min-width: 500px;
    height: 100%;
    margin-left: auto;
}
#basket-box-content, #login-box-content {
    width: 100%;
    padding: 20px;
}
#basket-head, #login-head {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
#basket-title, #login-title, .basket-title {
    font-size: 22px;
    font-weight: 500;
}

#basket-content {
    margin-top: 20px;
}
.basket-inside {

}
.basket-row {
    display: flex;
    border-bottom: 1px solid lightgrey;
    padding: 20px 0;
}
.basket-row-edit {
    background: white;
    width: 100%;
    padding-bottom: 20px;
    margin-top: -2px;
    border-bottom: 1px solid lightgrey;
}
.basket-row-edit-qte {
    display: flex;
    gap: 20px;
    align-items: center;
}
.basket-row-edit-qte .bt {
    cursor: pointer;
    user-select: none;
    width: 40px;
    min-width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: black;
    font-weight: 600;
}
.basket-title {
    width: 100%;
    margin-bottom: 20px;
}
.basket-row:first-of-type {
    border-top: 1px solid lightgray;
}
.basket-img {
    min-width: 70px;
    width: 70px;
    height: 70px;
    margin-right: 20px;
    background-size: contain;
    background-position: center;
}
.basket-mid {
    width: 100%;
}
.basket-name{}
.basket-qte {
    font-size: 12px;
}
.basket-price {
    font-weight: 500;
    min-width: 60px;
    width: 60px;
    text-align: right;
}
#basket-total {
    margin-top: 20px;
}
.basket-total-row {
    display: flex;
    justify-content: space-between;
}
.basket-total-title {
    margin-left: 90px;
}
.basket-total-value {
    font-weight: 600;
}
#basket-box-content {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 70px;
}
#basket-box-content form {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: unset;
}
#basket-box-content form .form-input {
    width: 100%;
}
#basket-continuer {
    margin-top: 20px;
}
#basket-payer {
    display: none;
}
#basket-payer,
#basket-continuer {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#basket-login {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.login-boutons {
    display: flex;
    flex-flow: wrap;
    width: 100%;
}
.login-boutons div.bouton:first-of-type {
    /*margin-left: 10px;*/
}
.login-boutons .bouton {
    /*margin-top: 20px;*/
}
.form-helper {
    color: red;
    font-size: 12px;
    width: 100%;
    text-align: left;
}
#basket-hint-cr {
    display: none;
    border: 1px solid var(--primary);
    border-radius: 10px;
    flex-direction: column;
    padding: 10px;
    color: var(--primary);
}
#basket-hint-cr .bouton {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#basket-hint-cr .title {
    font-weight: 500;
    text-align: center;
}
#basket-hint-cr p {
    margin: 15px 0;
    text-align: center;
}
.center-bouton {
    display: flex;
    width: 100%;
    justify-content: center;
}
#basket.loading #basket-load-before-payment {
    display: flex;
    width: 100%;
    justify-content: center;
}
.basket-step2-remind {
    width: 100%;
    text-align: left;
}
.basket-step2-remind .title {
    font-size: 16px;
    font-weight: 500;
    width: fit-content;
}
#basket-step-1, #basket-step-2 {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-top:40px;
    width: 100%;
}
.bouton.rouge:not(.disabled),
#basket-cancel {
    background-color: #b90000;
}
#basket-select-payment-method {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}
.mw, .mwc {
    max-width: var(--max-width);
}
.mwc {
    text-align: center;
}
.page-name {
    font-size: 20px;
    font-weight: 500;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 10px;
}
.page-subname {
    max-width: var(--max-width);
    text-align: center;
}
.page-new {
    text-transform: uppercase;
    background-color: #51b251;
    font-weight: 600;
    color: white;
    padding: 5px 20px;
    border-radius: 5px;
}
#categorie-title {
    margin-top: 60px;
}
.categorie-articles {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1500px) {
    .categorie-articles {
        width: 90vw;
    }
}
.categorie-article {
    margin: 10px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.categorie-article-format {
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}
.categorie-article .flag_new {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #51b251;
    font-size: 10px;
    font-weight: 600;
    padding: 5px;
    border-radius: 3px;
    color: white;
}
.categorie-article-info {
    margin-top: 15px;
    padding-top: 5px;
    border-top: 2px solid var(--primary);
}
.categorie-article:hover .categorie-article-info {
    border-top-color: #000;
}
.categorie-article-img {
    width: 200px;
    height: 200px;
    margin-bottom: 5px;
    background-size: contain;
    background-position: center;
}
.categorie-article-prix {
    font-weight: 500;
}
.article-image {
    height: 600px;
    width: 100%;
    background: #626262;
    transition: height 500ms;
    overflow: hidden;
}
.article-image img {
    width: 100vw;
}
.article-image-spinner {
    display: none;
    width: 100%;
    height: 0;
}
.article-image.loading .article-image-spinner {
    display: block;
}
.article-image.loading img {
    opacity: 0;
}
.article-image-spinner-over {
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffffbd;
    z-index: 1;
    position: absolute;
    backdrop-filter: blur(1px);
}
#article[type="4"] #article-image {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
#article[type="4"] #article-image img {
    width: unset;
    height: 100%;
}
#article img.article_fiche_article_vignette {
    margin-top: 20px;
    max-width: 250px;
}
#article-images-vignettes {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.article-image-vignette {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--lightgrey);
}
.article-image-vignette.selected {
    border-color: var(--primary);
}
#article[show_same_support="false"] #article-same-support,
#article[show_same_theme="false"] #article-same-theme {
    display: none;
}
#article-props {
    cursor: pointer;
}
#article-props, #article-isbn {
    color: gray;
}
#article-props i {
    color: var(--primary);
    margin-left: 10px;
}
#article-props-plus {
    display: none;
}
#article-props-plus img {
    display: none;
}
#article-props-plus.show {
    display: block;
    width: 100%;
    background-color: var(--lightgrey);
    background-image: url(/img/formats_2025-2.png);
    height: 550px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: derouler linear 200ms;
}
@media (max-width:500px) {
    #article-props-plus.show {
        display: block;
        width: 100%;
        background-color: var(--lightgrey);
        height: auto;
        animation: unset;
    }
    #article-props-plus.show img {
        display: block;
        max-width: 100%;
    }
}
@keyframes derouler {
    0% {
        height: 0;
    }
    100% {
        height: 550px;
    }
}
@media (max-width: 460px) {
    .categorie-articles {
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }
    .categorie-articles a {
        width: 100%;
    }
    .categorie-article {
        display: flex;
        align-items: center;
        margin: unset;
        width: 100%;
        text-align: left;
        padding: 20px;
        background: white;
    }
    .categorie-article-img {
        border: unset;
        min-width: 200px;
    }
}
.article-image-boutons {
    height: 40px;
    background: #e9e9e9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-image-bouton {
    padding:10px;
    cursor: pointer;
    user-select: none;
}
@media (max-width: 500px) {
    .login-boutons {
        flex-direction: column;
    }
    .login-boutons .bouton {
        margin-left:unset!important;
    }
    .article-image {
        height: 200px;
    }
    .article-image-bouton {
        font-size: 12px;
    }
}
.article-image-bouton i {
    margin-right: 10px;
}
body[user-type="2"] #article-promo,
body[user-type="2"] .section-port,
body[user-type="0"] .article-revendeur-only,
body[user-type="1"] .article-revendeur-only {
    display: none!important;
}
body[user-type="2"] .hint-prix-ttc {
    font-size: 12px;
    margin-top: -18px;
}
body[user-type="2"] .info-prix-revendeur {
    color: #51b251;
    text-align: center;
    width: 100%;
    background-color: var(--lightgrey);
    padding: 30px 0;
    cursor: pointer;
    user-select: none;
}
body[user-type="2"] .info-prix-revendeur .esvp {
    font-size: 12px;
}
#article-promo-in {
    background: #51b251;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    width: var(--max-width);
    color: white;
    text-align: center;
}
#article-promo-in .page-name {
    margin: unset;
    border-bottom-color: white;
}
#article-promo-in i {
    font-size: 32px;
}
.article-prix {
    font-size: 20px;
    font-weight: 500;
}
.article-port-1 {
    margin-top: 10px;
}
.article-port-2 i {
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
.article-port-3 {
    width: 100%;
    background: var(--lightgrey);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    overflow: hidden;
    transition: height 500ms, margin 500ms;
}
.article-port-3 .select {
    background-color: white;
    margin-bottom: 20px;
}
.article-port-3.open {
    height: 880px;
    margin: 20px 0;
}
.zone-frais-port {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: white;
    width: 100%;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 3px 2px #0000000a;
}
.article-port-3-content {
    padding: 10px 0;
}
.article-port-3 td, .article-port-3 th {
    text-align: right;
    padding: 0 11px;
}
.article-port-3 td {
    padding-top: 10px;
    border-top: 1px solid #c8c8c8;
    padding-bottom: 5px;
}
.article-port-3 td:first-of-type,
.article-port-3 th:first-of-type {
    text-align: left;
}
.article-port-3-liste-pays {
    font-size: 10px;
    max-width: 300px;
}
#article-theme-nom {
    text-transform: uppercase;
    font-size: 14px;
}
.bouton {
    user-select: none;
    background: var(--primary);
    color: black;
    padding: 10px 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    cursor: pointer;
    line-height: 1em;
    text-align: center;
}
.bouton.grey {
    background-color: var(--lightgrey);
    color: black;
}
body.basket_error .bouton#basket-continuer,
body.basket_error .bouton#basket-payer,
.bouton.disabled {
    background-color: var(--lightgrey);
}
button.bouton {
    font-size: inherit;
    font-family: inherit;
    border: unset;
    outline: unset;
}
.bouton.view-panier {
    display: none;
    background-color: grey;
}
body.hasbasket .bouton.view-panier {
    display: flex;
}
.basket-or {
    width: 100%;
    border-bottom: 2px solid var(--lightgrey);
    display: flex;
    justify-content: center;
    position: relative;
    margin: 30px 0;
}
.basket-or-or {
    background: white;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    margin-top: -6px;
    padding: 0 10px;
}
.form-input-cp-ville {
    display: flex;
    width: 100%;
}
.form-input-cp {
    width: 110px!important;
    margin-right: 10px;
    min-width: 110px!important;
}
.form-input-ville {
    width: 100%;
}
@media (max-width: 900px) {
    :root {
        --max-width: 90vw;
    }
    @media (max-width:750px) {
        #btn-login, #btn-user, #btn-basket {
            display: none;
        }
        #header-menu {
            display: none;
        }
        #header-search {
            width: 90%;
        }
        .overlay {
            display: none;
        }
        #basket-box, #login-box {
            width: 100%;
            min-width: 100%;
        }
    }
}
body.hasbasket #mini-basket-info {
    display: block;
    position: fixed;
    z-index: 4;
    top: 73px;
    right: 20px;
    width: 143px;
    background: var(--lightgrey);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
}
body.hasbasket #mini-basket-info-arrow {
    width: 20px;
    height: 20px;
    z-index: 4;
    background: var(--lightgrey);
    border-radius: 4px;
    transform: rotate(45deg);
    right: 98px;
    position: fixed;
    top: 64px;
}
.mini-basket-info-row {
    display: flex;
    justify-content: space-between;
}
.mini-basket-info-row .row-title {}
.mini-basket-info-row .row-value {}
@media (max-width: 1024px) {
    .mini-basket-info {
        display: none!important;
    }
}
#basket-vider {
    width: fit-content;
    color: red;
    cursor: pointer;
    user-select: none;
    margin-top: 10px;
}
#basket-vider:hover {
    text-decoration: underline;
}
#basket.frozen #basket-vider {
    opacity: 0.1;
}
#basket.frozen #basket-vider:hover {
    text-decoration: none;
}
#basket-mobile {
    display: none;
}
#basket-mobile i.main {
    font-size: 32px;
    color: var(--primary);
    margin-right: 20px;
}
#basket-mobile-content {
    font-size: 16px;
    font-weight: 600;
}
#basket-login form {

}
#basket .login-boutons {
    flex-direction: column;
    align-items: center;
}
@media (max-width: 750px) {
    body.hasbasket #basket-mobile {
        display: flex;
        align-items: center;
        background-color: white;
        position: fixed;
        z-index: 3;
        bottom: 0;
        width: 100%;
        padding: 30px 15px;
        height: 40px;
        border-top: 1px solid lightgrey;
        box-shadow: 0 0px 10px #0000003d;
    }
    #basket-mobile-bouton {
        position: fixed;
        bottom: 30px;
        right: 15px;
        background: var(--primary);
        border-radius: 20px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        line-height: 1;
        color: black;
        cursor: pointer;
        user-select: none;
    }
}
#basket-box-content .login form {
    width: unset;
    display: flex;
}
.login {
    border: 1px solid var(--primary);
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}
.login-select-mode {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg, var(--primary), white);
}
.login-mode {
    padding: 10px;
    text-align: center;
    width: 50%;
    cursor: pointer;
    user-select: none;
}
.login-select-mode[login="false"] .sm2,
.login-select-mode[login="true"] .sm1 {
    background-color: white;
    border-radius: 10px;
    font-weight: 500;
}
.login-select-mode[login="false"] .sm1,
.login-select-mode[login="true"] .sm2 {
    background-color: var(--primary);
    color: white;
    font-size: 14px;
}
.login-select-mode[login="true"] .sm2 {
    border-radius: 0 10px;
}
.login-select-mode[login="false"] .sm1 {
    border-radius: 10px 0;
}
.login-form {
    margin: unset;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#basket-siret-search,
.login-hint, .login-error, .login-forgot-password, .login-recovery-sent {
    font-size: 14px;
    margin: 5px 0;
    text-align: left;
    width: 100%;
}
.login-forgot-password {
    color: blue;
    cursor: pointer;
    user-select: none;
}
.login-recovery-sent {
    color: green;
}
.login-hint {
    color: var(--primary);
}
.login-error:empty, .login-recovery-sent:empty {
    display: none;
}
.login-error {
    color: red;
}
.login-error i, .login-hint i, .login-forgot-password i, .login-recovery-sent i {
    width: 20px;
}
.login-spinner {
    height: 299px;
    display: none;
    align-items: center;
    justify-content: center;
}
.login.load .login-select-mode,
.login.load form {
    display: none!important;
}
.login.load .login-spinner {
    display: flex;
}
.login-form .bouton {
    margin-top: 20px;
}
.login-form .form-input {
    width: 100%;
}
body.basket-open {
    overflow:hidden;
}
body:not(._login) .if-login {
    display: none;
}
body._login .if-logout {
    display: none;
}
body.input-focus #basket-mobile,
body.basket-open #basket-mobile {
    display: none;
}
.toast {
    width: 300px;
    height: 100px;
    position: fixed;
    z-index: 4;
    top: 20px;
    left: 20px;
    background: #fffffff0;
    box-shadow: 0 2px 6px #00000021;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.toast .left {
    margin-right: 20px;
}
.toast .left i {
    font-size: 40px;
    color: #60da60;
}
.toast .right {
    width: 100%;
}
.toast .title {
    font-weight: 500;
    margin-bottom: 3px;
}
.toast .text {
    line-height: 1;
}
@media (max-width: 750px) {
    .toast {
        left: unset;
        right: 20px;
    }
    @media (max-width: 500px) {
        .toast {
            width: calc(100% - 40px);
        }
    }
}
#dialog {
    display: none;
}
body.dialog #dialog {
    display: block;
}
#dialog-bg, #dialog-wr {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#dialog-bg {
    background: linear-gradient(180deg,white,#73737352);
    backdrop-filter: blur(2px);
    z-index: 10;
}
#dialog-wr {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    padding:15%;
    pointer-events: none;
}
#dialog-box {
    pointer-events: all;
    max-width: 600px;
    background: white;
    box-shadow: 0 3px 5px #00000021;
    border-radius: 4px;
    z-index: 12;
    padding:30px;
}
#dialog-title {
    font-family: var(--font-ops);
    font-size: 18px;
    font-weight: 600;
}
#dialog-text {}
#dialog-bottom {}
#dialog-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}
#dialog-form-password .form-input {
    margin-bottom: 20px;
}
#dialog .login-forgot-password {
    width: fit-content;
}
#liste_pays {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 60vh;
    overflow-y: scroll;
    width:500px;
    max-width:80vw;
}
#liste_pays .list_item {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    user-select: none;
}
#liste_pays .list_item.filtered {
    display: none;
}

#discologues {
    padding-top: 30px;
    --d-width:95vw;
    --d-height: calc( var(--d-width) /2 );
    padding-bottom: unset;
}
.discogame-arrow {
    height: 100%;
    width: 20px;
    font-size: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    transition: opacity 200ms, color 200ms;
    color: black;
}
.discogame-arrow:hover {
    color: var(--primary);
}
#discomods {
    display: flex;
    gap: 20px;
    margin-top: 50px;
}
.discomod {
    width: 100px;
    height: 100px;
    border: 1px solid var(--lightgrey);
    border-radius: 4px;
    transition: transform 200ms;
    overflow: hidden;
    padding: 10px;
}
.discomod img {
    width: 100%;
    height: 100%;
}
.discomod:not(.selected):hover {
    cursor: pointer;
    user-select: none;
    transform: scale(1.02);
    border: 1px solid black;
}
.discomod.selected {
    border: 1px solid var(--primary);
}
@media (min-width: 1000px) {
    .discogame-arrow {
        display: flex;
    }
    #discologues {
        --d-width:90vw;
    }
    @media (min-width: 1500px) {
        #discologues {
            --d-width:70vw;
        }
        @media (min-width:2000px) {
            #discologues {
                --d-width:60vw;
            }
        }
    }
}
#discologue-game {
    display: flex;
    align-items: center;
    background-color: white;
    opacity: 0;
    width: 100%;
    justify-content: space-evenly;
}
#discogame-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#discologue {
    width: var(--d-width);
    height: var(--d-height);
    position: relative;
}
#discologue img {
    width: 100%;
    height: 100%;
    user-select: none;
}
#discologue .front {
    width: var(--d-width);
    height: var(--d-height);
    background-size: cover;
    z-index: 2;
    position: absolute;
    pointer-events: none;
}
#discologue .back {
    height: var(--d-height);
    display: flex;
    z-index: 1;
    position: absolute;
}
#discologue .back .side {
    height: var(--d-height);
    width: var(--d-height);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
    cursor: grab;
    user-select: none;
}
#discologue .back .disque {
    height: 90%;
    width: 90%;
    background-size: cover;
    border-radius: 100%;
    border: 1px solid var(--lightgrey);
    box-shadow: 0 0 10px #00000036;
    overflow: hidden;
    user-select: none;
}
#discoleg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    gap: 10px;
    font-family: var(--font-ops);
}
.discoleg-side {
    width: 50%;
    gap: 20px;
    opacity: 0;
    transition: opacity 200ms;
}
.discoleg-side.left {
    text-align: right;
}
#discoleg .word {
    font-weight: 600;
    font-size: 20px;
}
#discoleg .definition {
    font-style: italic;
}
#discologue-game-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -70px;
    z-index: 2;
    opacity: 0;
    transition: opacity 200ms;
}
#discologue-game-bar {
    background: var(--primary);
    width: 120px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#discologue-game-bar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: font-size 100ms;
    color: white;
    outline: none;
    user-select: none;
    height: 100%;
    width: 50%;
    font-size: 20px;
}
#discologue-game .fa-compress-alt {
    display: none;
}
#discologue-game.is-fullscreen .fa-expand-alt {
    display: none;
}
#discologue-game.is-fullscreen .fa-compress-alt {
    display: block;
}
#discologue-game-bar .btn:hover {
    font-size: 25px;
}
#discologue-game-bar-label {
    height: 20px;
    margin-top: 10px;
    color: #6b6b87;
    font-size: 14px;
}
@media (max-width: 600px) {
    #discologue-game-b {
        margin-top: -40px;
    }
}
@media (max-height:900px) {
    #discologue-game.is-fullscreen #discologues {
        --d-width:80vw;
    }
    #discologue-game.is-fullscreen #discologue-game-b {
        position: fixed;
        bottom: 10px;
        left: 10px;
        z-index: 3;
    }
    #discologue-game.is-fullscreen #discologue-game-bar-label {
        display: none;
    }
    #discologue-game.is-fullscreen #discoleg {
        position: fixed;
        bottom: 10px;
        color: white;
        background: #00000066;
        width: 50%;
        border-radius: 10px;
        padding: 5px;
        gap: 25px;
    }
    #discologue-game.is-fullscreen #discomods {
        position: fixed;
        bottom: 10px;
        right: 10px;
        margin-top: unset;
        gap: 10px;
    }
    #discologue-game.is-fullscreen .discomod {
        width: 60px;
        height: 60px;
        background-color: white;
        transition: opacity 100ms;
    }
    #discologue-game.is-fullscreen .discomod:not(.selected) {
        opacity: 0.8;
    }
}
#discologue-fullscreen {
    margin-top: 20px;
}
#discoload {
    width: 100%;
    background: white;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}
#discopage, #discobuy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#discobuy {
    width: 100%;
}
#discopage {
    width: var(--max-width);
}
.section-port {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#discobuy-items {
    padding: 20px 0;
    background: var(--lightgrey);
    width: 100%;
    overflow: hidden;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#discologues.buy #discobuy {
    display: none;
}
#discologues.buy #discobuy-items {
    display: flex;
}
#discobuy-items .item {
    width: var(--max-width);
    background: white;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}
#discobuy-items .item .img {
    min-width: 70px;
    height: 70px;
}
#discobuy-items .item .mid {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
#discobuy-items .item .name {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 20px;
}
#discobuy-items .item .bouton {
    margin-top: 20px;
}
#discobuy-items .item .right {
    width: fit-content;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}
body:not(.hasbasket) #discopanier {
    display: none;
}
#categorie-head {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}
#page-categorie {
    opacity: 1;
    transition: opacity 200ms;
}
#categorie-head .section2 {
    width: var(--max-width);
}
.categorie-arrow {
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 100ms;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.categorie-arrow:hover {
    opacity: 1;
}
#page-categorie:not(.smart) .categorie-arrow {
    display: none;
}
.article-port-3-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.article-port-3-content .info-port {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.article-port-3-content .info-port p {
    margin: unset;
    font-size: 12px;
}
.article-port-3-content .lib-zone {
    font-weight: 600;
}
.article-port-3-content .item-port {
    width: 340px;
    text-align: left;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}
@media (min-width: 600px) {
    .article-port-3-content .item-port {
        width: 500px;
    }
}
.article-port-3-content .item-port .ipl {
    min-width: 70px;
    width: 70px;
}
.article-port-3-content .item-port .ipl img {
    width: 50px;
}
.article-port-3-content .item-port .ipr {
    width: 100%;
}
.article-port-3-content .item-port .top {
    display: flex;
    gap: 10px;
}
.article-port-3-content .item-port .top .lib {
    font-weight: 600;
}
.article-port-3-content .item-port .sub {}
.info-franco {
    background: #51b251;
    border-radius: 25px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}
.article-port-3-content .logos-transporteurs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.article-port-3-content .logos-transporteurs img {
    max-height: 30px;
}
@media (max-width: 1600px) {
    .categorie-arrow {
        display: none;
    }
    #categorie-head .section2 {
        width: 100%;
    }
}
#article ::-webkit-scrollbar {
    height: 10px;
    border-radius: 10px;
}
#article ::-webkit-scrollbar-track {
    background: #666666;
}
#article ::-webkit-scrollbar-thumb {
    background: #999999;
    border-radius: 10px;
}
#article ::-webkit-scrollbar-thumb:hover {
    background: #fafafa;
}
.page-texte .section1 {
    gap: 10px;
    width: var(--max-width);
    padding: 25px 0;
    align-items: flex-start;
    text-align: justify;
}
.page-texte .section1 p {
    margin: unset;
}
.page-texte .section1 li {
    text-align: left;
}
.page-texte h3.page-name {
    font-size: 16px;
    margin-top: 10px;
}
#home-page {
    width: 100%;
}
#home-page .home-info-port {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#home-page .home-info-port .info-franco-sub {

}
#home-page .section1 img {
    max-width: 80vw;
}
.home-fw,
#home-slider {
    height: 300px;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.home-fw {
    background-color: gray;
    background-image: url("/img/new_2022_2.jpg");
}
#home-slider {
    height: 400px;
    background-color: #355b7f;
    background-image: url("/img/home_220517_p.webp");
}
@media (max-width: 500px) {
    #home-slider {
        height: 300px;
    }
}
#home-slider img {
    transform: translateY(0);
    width: 100%;
}
#home-slider.animate img {
    transition: transform 120s linear;
    /*transform: translateY(-100%);*/
}
#home-menu-mobile {
    background: white;
    width: 90vw;
    margin-top: -50px;
    z-index: 2;
    border-radius: 10px;
    box-shadow: 0 2px 5px #0000001a;
    display: none;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
    text-align: center;
}
#home-menu-mobile .page-name {
    margin-bottom: 20px;
}
#home-menu-mobile .item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
#home-menu-mobile .item.border {
    border-bottom: 1px solid var(--lightgrey);
}
@media (max-width:750px) {
    #home-menu-mobile {
        display: flex;
    }
    #home .desktop {
        display: none;
    }
}
footer {
    width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
}
#footer-content {
    width: var(--max-width);
    padding-top: 20px;
    opacity: 0.8;
    display: flex;
    justify-content: space-between;
}
#footer-left {
    display: flex;
    flex-direction: column;
}
#footer-left img {
    max-width: 80vw;
}
#footer-content i {
    width: 20px;
    margin-right: 5px;
}
.social-links {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
.social-links img.social {
    width: 40px;
}
#footer-left img, .social-links {
    margin-bottom: 20px;
}
@media (max-width: 800px) {
    .social-links {
        justify-content: flex-start;
    }
    #footer-left {
        margin-top: 20px;
    }
    #footer-content {
        flex-direction: column-reverse;
        padding-bottom: 90px;
    }
}
#page-user-online {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#user .form-input {
    max-width: 400px;
}
#user-head {
    padding-top: 20px;
    width: 100%;
    /*background: var(--primary);*/
    background-color: #010f35;
    background-image: url('/img/bandeau_terre_opaque.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#user-head-cont {
    max-width: var(--max-width);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#user-head-cont .bouton {
    background: white;
    color: black;
}
#user-head-cont h1 {
    font-weight: 500;
    font-size: 22px;
    color: white;
}
#user-head-nav {
    width: 100%;
    max-width: var(--max-width);
    display: flex;
    gap: 20px;
    color: white;
    font-weight: 500;
    margin-top: 40px;
    line-height: 1;
}
@media (max-width:750px) {
    #user-head-nav {
        display: none;
    }
}
#user-head-nav div {
    cursor: pointer;
    user-select: none;
    min-height: 30px;
}
#user-head-nav div:hover {
    border-bottom: 2px solid white;
}
.user-section {
    width: 100%;
    max-width: var(--max-width);
    margin-top: 30px;
}
.user-section .bouton {
    width: fit-content;
}
.user-section h1 {
    font-weight: 500;
    width: 100%;
    border-bottom: 1px solid var(--primary);
}
#user-orders {}
#user-orders-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}
#user-orders-pagination:empty {
    display: none;
}
.user-orders-pagination {
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    color: var(--primary);
    border-radius: 3px;
    transition: background-color 100ms, border-color 100ms, color 100ms;
}
.user-orders-pagination.off {
    color: var(--lightgrey);
    border-color: var(--lightgrey);
}
.user-orders-pagination.current {
    color: white;
    background-color: var(--primary);
}
.user-orders-pagination.oc {
    cursor: pointer;
}
.user-orders-pagination.oc:hover {
    border-color: black;
    color: white;
    background-color: black;
}
#user.edit-adresse .user-adresse-button {
    visibility: hidden;
}
#user-orders,
#user-adresses {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}
.user-order,
.user-adresse {
    flex-direction: column;
    border: 1px solid var(--lightgrey);
    border-radius: 10px;
    display: flex;
}
.user-adresse {

}
.user-order {
    cursor: pointer;
    overflow: hidden;
}
.user-order .bottom,
.user-order .top {
    display: flex;
    align-items: center;
    padding: 10px;
}
.user-order .top {
    justify-content: space-between;
}
.user-order .bottom {
    background: var(--primary);
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
    gap: 10px;
}
.user-order .bottom.success {
    background: #51b551;
    color: white;
}
.user-order .bottom.warning {
    background: #a61b4a;
    color: white;
}
.user-order .left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.user-order .right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-order .prix {
    font-family: var(--font-ops);
}
.user-order .pm {
    width: 30px;
}
.user-order .date {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
.user-order .mode_expedition {
    background: grey;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 20px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}
.user-order .mode_expedition.laposte {
    background: #ffc928;
}
.user-order .mode_expedition.mondial {
    background: #cd064a;
}
.user-adresse-pays {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    margin-top: 5px;
}
.user-adresse-top {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
}
.user-adresse.editing {
    border-color: var(--primary);
}
.user-adresse.editing h1 {
    margin: 0 0 20px 0;
    border: unset;
    font-size: 18px;
}
#user.edit-adresse .user-adresse:not(.editing) {
    opacity: 0.5;
}
.user-adresse.editing .user-adresse-top {
    display: none;
}
.user-adresse-bottom {
    padding: 20px;
}
.user-edit-adresse-ville {
    display: flex;
}
.user-edit-adresse-ville .form-input {
    width: 270px;
}
.user-edit-adresse-ville .form-input:first-of-type {
    width: 120px;
    margin-right: 10px;
}
.user-adresse-default {
    background: var(--primary);
    font-size: 12px;
    padding: 5px 20px;
    border-radius: 20px;
    text-align: center;
    margin-top: 10px;
    color: black;
    width: fit-content;
}
.user-edit-adresse-form {
    display: flex;
    gap: 20px;
    flex-flow: wrap;
}
.user-edit-adresse-boutons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-flow: wrap;
}
.user-adresse-default i {
    margin-right: 10px;
}
.user-adresse-nom {
    font-weight: 500;
}
.row-checkbox {
    margin: 10px 0;
    display: flex;
    align-items: center;
}
.row-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
#user-email-warning i {
    margin-right: 20px;
}
#user-email-warning {
    display: flex;
    align-items: center;
    color: red;
}
#rgpd-confirm-before-delete {
    display: none;
    background: #b90800;
    width: 100%;
    margin-top: 50px;
    margin-bottom: -50px;
    justify-content: center;
}
#rgpd-cbd {
    width: 100%;
    max-width: var(--max-width);
    color: white;
    margin: 50px 0;
}
#rgpd-cbd h1 {
    font-size: 18px;
    font-family: inherit;
    margin: unset;
    padding: unset;
}
#rgpd-cbd .bouton {
    color: red;
    background-color: white;
    width: fit-content;
    margin-top: 40px;
}
#user form {
    margin:unset;
}
#user-coords-loading {
    width: 100%;
    max-width: 400px;
    display: none;
}
#user-section-coords.loading #user-coords-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}
#user-section-coords.loading form,
#user-section-password.loading form {
    display: none;
}
#user-edit-email {
    margin-top: 20px;
}
#user_edit_email,
#user_edit_password {
    width: var(--max-width);
    text-align: center;
}
#user_edit_email .form-input,
#user_edit_password .form-input {
    width: 300px;
}
#user_edit_email_spinner,
#user_edit_password_spinner {
    display: none;
}
#user_edit_email.loading #user_edit_email_f,
#user_edit_password.loading #user_edit_password_f {
    display: none;
}
#user_edit_email.loading #user_edit_email_spinner,
#user_edit_password.loading #user_edit_password_spinner {
    display: block;
}
#basket-bottom {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#basket-bottom .basket-title {
    margin: unset;
}
#basket-user-mode {
    background: var(--lightgrey);
    width: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}
.basket-user-mode {
    width: 100%;
    background: white;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
body[user-type="0"] .basket-user-mode[mode="0"],
body[user-type="1"] .basket-user-mode[mode="1"],
body[user-type="2"] .basket-user-mode[mode="2"] {
    background-color: var(--primary);
    color: white;
    font-weight: 500;
}
#basket-siret-search {
    display: flex;
    gap: 10px;
    align-items: center;
    color: blue;
    cursor: pointer;
    user-select: none;
}
#basket-chorus-facturation {
    display: none;
    width: 100%;
    flex-direction: column;
}
#basket-anomalie,
#basket-info-pays {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
    background-color: var(--lightgrey);
    border-radius: 10px;
    padding: 20px;
}
#basket-anomalie {
    flex-direction: row;
    margin-top: 40px;
}
body:not(.basket_error) #basket-anomalie {
    display: none;
}
#basket-info-pays-text:empty {
    display: none;
}
#basket-delivery-mode {
    display: none;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    width: 100%;
    background: var(--lightgrey);
    border-radius: 10px;
}
.basket-delivery-mode {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    user-select: none;
}
#basket.at_home .basket-delivery-mode[mode="colissimo"],
#basket.relay .basket-delivery-mode[mode="mr"] {
    background-color: var(--primary);
    font-weight: 600;
}
.basket-delivery-mode .img {
    min-width: 40px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.basket-delivery-mode .name {
    width: 100%;
}
.basket-delivery-mode .price {
    white-space: nowrap;
}
#dialog .bouton[callback="mr_btn_valider"] {
    background: #ce0c4b;
    margin-top: 20px;
}
#basket-mondial-relay {
    width: 100%;
    height: 100px;
    background: #ce0c4b;
    border-radius: 10px;
    display: none;
    padding: 10px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
#basket-mondial-relay .left {
    min-width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#basket-mondial-relay .right {
    color: white;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#map_mondial_relay {
    height: 60vh;
}
#adresse_point_relais {
    line-height: 1;
}
#changer_point_relais {
    font-size: 12px;
}
#basket.require_login .basket-if-can-cr {
    display: none;
}
#basket.started #basket-step-1 {
    display: flex;
}
#basket.started #basket-continuer,
#basket.started #basket-bottom {
    display: none;
}
#basket-step-1 .boutons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#basket-contact {
    display: flex!important;
}
#basket-contact-email-bloc {
    display: none;
}

/* .step1 : after login/cr select */
#basket.step1 #basket-login {
    display: none;
}
#basket.cr #basket-hint-cr {
    display: flex;
}
#basket.cr #basket-contact-email-bloc {
    display: block;
}
#basket.cr .if-not-cr {
    display: none;
}
#basket.step1.fac #basket-adresse-facturation,
#basket.step1.at_home #basket-adresse-livraison {
    display: flex;
}
#basket.step1.select_delivery #basket-delivery-mode {
    display: flex;
}
#basket.step1.relay #basket-adresse-facturation,
#basket.step1.relay #basket-mondial-relay {
    display: flex;
}
body[user-type="1"] #basket #basket-adresse-facturation,
body[user-type="1"] #basket.fac #basket-adresse-facturation {
    display: none!important;
}
#basket.step1 #basket-payer {
    display: flex;
}
body[user-type="1"] #basket.step1 #basket-pro,
body[user-type="1"] #basket.step1 #basket-chorus-facturation,
body[user-type="2"] #basket.step1 #basket-chorus-facturation,
body[user-type="2"] #basket.step1 #basket-pro {
    display: flex;
}
body[user-type="1"] #basket-adresse-livraison .form-input-checkbox {
    display: none;
}
/* .step2 : after filling form / before payment */
#basket-cb-element {
    display: flex;
    border: 2px solid var(--primary);
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 10px;
    flex-direction: column;
    gap: 10px;
}
#basket-cb-logo {
    width: 40px;
}
#basket-cb-embed {
    border: unset;
    width: 330px;
    height: 290px;
}
#basket-cb-cards {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
#basket-cb-cards img {
    height: 18px;
}
#basket-cb-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
#basket-paypal-element {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
#basket-paypal-embed {
    width: 160px;
    height: 50px;
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 200ms;
}
#basket-paypal-embed:hover {
    opacity: 1;
}
#basket-step-2 .basket-or {
    margin:unset;
}
#basket-load-before-payment {
    display: none;
}
#basket-payment-form {
    display: none;
}
#basket.step2 #basket-step-1 {
    display: none;
}
#basket.step2 #basket-step-2 {
    display: flex;
}
/* loading */
#basket.loading #basket-step-1,
#basket.loading #basket-step-2 {
    display: none;
}
#basket.loading #basket-load-before-payment {
    display: flex;
}
body[user-type="2"] #basket-bottom {
    display: none!important;
}
#post-payment-top {
    display: flex;
    gap: 30px;
    align-items: center;
}
@media (max-width: 700px) {
    #post-payment-top {
        flex-direction: column;
    }
    #post-payment-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}
#post-payment-animation {}
#post-payment-text {}
.nowrap {
    white-space: nowrap;
}
#commande .section2 {
    gap: 30px;
}
#page-commande-online p {
    margin:unset;
}
#commande .section1, #page-commande-online {
    width: 100%;
}
#commande-drag-drop-section,
.commande-0,.commande-1,.commande-2 {
    width: 100%;
    display: flex;
}
#commande-chorus-select {
    flex-direction: column;
    width: var(--max-width);
    align-items: center;
    gap: 10px;
}
#commande[enable_drag_drop="0"] #commande-header .page-name {
    /*display: none;*/
}
#commande-loading {
    display: flex;
    justify-content: center;
}
#commande.loaded #commande-loading,
#commande-loaded {
    width: 100%;
    /*display: none;*/
}
#commande.loaded #commande-loaded {
    display: flex;
}
#commande-file-drop {
    flex-direction: column;
    background: var(--lightgrey);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px;
    color: grey;
    gap: 20px;
    box-sizing: border-box;
    cursor: pointer;
}
#commande-file-drop i {
    font-size: 60px;
}
#commande-input-file {
    display: none;
}
#commande .info-cgv-pro {
    color: gray;
    font-size: 12px;
    text-align: center;
    max-width: 80vw;
    width: 500px;
}
.commande-details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lightgrey);
    padding: 20px 0;
}
.commande-table {
    text-align: left;
    width: var(--max-width);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: var(--font-ops);
}
.commande-ligne {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    cursor: pointer;
    background: white;
    border-radius: 10px;
    padding: 10px;
}
.commande-ligne .multiple {
    white-space: nowrap;
    background: var(--lightgrey);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 14px;
}
.commande-ligne .img {
    width: 100px;
    min-width: 100px;
    height: 100px;
    background-color: var(--lightgrey);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.commande-file .img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    opacity: 0.7;
}
.commande-colis .img {
    background-color: unset;
}
.commande-file {
    cursor: unset;
}
.commande-file-icons i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    color: red;
}
#commande-totaux {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    width: 250px;
    background: var(--lightgrey);
    box-shadow: 0 4px 3px #00000017;
    font-family: var(--font-ops);
}
#commande-totaux .row {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
#commande-totaux .remise,
#commande .fa-check-circle.green {
    color: #51b551;
}
#commande-totaux[type="0"] .total,
#commande-totaux[type="1"] .ht,
#commande-totaux[type="2"] .ht {
    font-size: 20px;
    font-weight: 500;
}
#commande-totaux[type="0"] .total {
    margin-bottom: 5px;
}
#commande-totaux[type="1"] .ht,
#commande-totaux[type="2"] .ht {
    margin-top: 5px;
}
#commande-remise {
    font-family: var(--font-ops);
    background-color: #48bb48;
    padding: 10px 30px;
    border-radius: 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#commande-remise:empty {
    display: none;
}
#commande-paiement {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}
#commande-paiement i {
    color: #48bb48;
}
#commande-paiement img {
    width: 30px;
}
#commande-paiement:empty {
    display: none;
}
#commande-transport .adresse-wrap {
    text-align: left;
    width: var(--max-width);
    background-image: url("/img/fond_poste.jpg");
    height: calc(var(--max-width) / 1.9);
    border: 1px solid var(--lightgrey);
    padding: 50px 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0 4px 3px #00000017;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
#commande-transport .adresse {
    min-width: 50%;
    font-family: var(--font-ops);
}
#commande-transport .adresse .nom {
    font-weight: 500;
}
#commande-transport .relais {
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#commande-transport .relais-in {
    border: 1px solid #ce0d4c17;
    border-radius: 10px;
    font-family: var(--font-ops);
    width: var(--max-width);
    padding: 20px;
    background-color: white;
    display: flex;
    gap: 40px;
}
#commande-transport .relais .left {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#commande-transport .relais .right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#commande-transport .info-relais .titre,
#commande-transport .adresse-relais .nom {
    font-size: 20px;
    font-weight: 600;
    color: #cd064a;
    margin-bottom: 5px;
}
#commande-transport .info-relais .horaires {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#commande-transport .info-relais .horaire {

}
#commande-transport .info-relais .horaire.horaire-today {
    color: #cd064a;
}
#commande-transport .info-relais .horaire .day {
    display: flex;
    align-items: center;
    gap: 10px;
}
#commande-transport .info-relais .horaire .today {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
}
#commande-transport .info-relais .horaire .hours {}
#commande-transport .relais .bouton {
    background-color: #cd064a;
}
@media (max-width: 800px) {
    #commande-transport .adresse-wrap {
        height: calc(var(--max-width) / 1.7);
    }
    #commande-transport .adresse {
        min-width: 60%;
        padding-top: 20px;
    }
    .commande-ligne {
        font-size: 14px;
    }
    .commande-ligne .img {
        width: 50px;
        min-width: 50px;
        height: 50px;
        background-color: var(--lightgrey);
    }
    #commande-transport .relais-in {
        border: unset;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    #commande-transport .relais .left img {
        height: 50px;
    }
}
.commande-ligne .label {
    width: 100%;
}
#page_revendeurs .section2 {
    width: var(--max-width);
}
#pr_spinner {
    display: none;
}
#page_revendeurs table {
    border: 1px solid var(--primary);
    padding: 10px;
    border-radius: 10px;
}
#page_revendeurs table td {
    width: 130px;
    text-align: center;
}
#page_revendeurs p {
    margin: unset;
    text-align: center;
}
#page_revendeurs .recherche-en-cours {
    display: none;
    font-size: 12px;
}
#page_revendeurs .not-found {
    display: none;
    font-size: 12px;
    color: red;
}
#page_revendeurs .resultat-recherche {
    display: none;
}
#page_revendeurs .resultat-recherche .adresse {
    text-align: center;
}
#page_revendeurs .resultat-recherche .confirmer {
    margin-top: 20px;
}

#page_revendeurs.searching .recherche-en-cours {
    display: block;
}

#page_revendeurs.found .resultat-recherche {
    display: block;
}

#page_revendeurs.not-found .not-found {
    display: block;
}
#page_revendeurs.submit #pr_spinner {
    display: block;
}
#page_revendeurs.submit .section2.show-if-login {
    display: none;
}
#page_revendeurs .section2.show-if-revendeur {
    flex-direction: row;
    justify-content: center;
    color: #41ab41;
}
#contact h1 {
    margin-bottom: 20px;
}
#contact button {
    margin-top: 20px;
}
#contact-spinner {
    width: 100%;
    text-align: center;
}
body._login .hide-if-login {
    display: none;
}
body:not(._login) .show-if-login {
    display: none;
}
body[user-type="2"] .hide-if-revendeur {
    display: none;
}
body[user-type="0"] .show-if-revendeur,
body[user-type="1"] .show-if-revendeur {
    display: none;
}
img.puzzle_vivant_img {
    width: 100%;
    max-width: 800px;
}
.puzzle_vivant_video {
    transition: height 1s;
    height: 500px;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.puzzle_vivant_video video {
    width: 100%;
    pointer-events: none;
}
#finder {
    width: 300px;
    background-color: var(--lightgrey);
    border-radius: 5px;
    margin-left: 10px;
}
/** Maj 2024 **/
#art2024 {
    padding-top: 30px;
}
#art2024 .section1 {
    max-width: 600px;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}
#art2024 .price {
    font-weight: bold;
    font-size: 30px;
}
#art2024 .view-panier {
    text-decoration: underline;
    cursor: pointer;
}
#art2024 .view-panier:hover {
    opacity: 0.7;
}