/*
 * ************
 * V1
 * ************
 */

blockquote.note{
    font-size:11px;
    line-height:16px;
    color:#51A026;
    border:1px solid #ccc;
    padding:4.5px;
    margin-bottom:9px;
    border-radius:5px;
}

hr{
    border:1px #ccc solid;
    border-bottom:1px #51A026 solid;
}

.img-services{
    width: 100%;
}

.formValidation{
    background: #FBF9EE url('../../img/warning.png') no-repeat 5px;
    border:#FCEFA1 1px solid;
    padding:5px;
    padding-left:25px;
    max-width: 400px;
}

.contact-container .formValidation {
    align-self: flex-start;
}
.formValidation.success{
    background: #F4F9F0 url('../../img/success.png') no-repeat 5px;
    border:#E4F1D6 1px solid;
    padding:5px;
    padding-left:25px;
    max-width: 400px;
}

#news-frame{
    margin-bottom:18px;
    text-align:center;
}
#news-frame > img{
    max-width:600px;
}
#news-attachment{
    float:right;
    margin:0 0 18px 18px;
}
#news-attachment > a{
    color:#51A026;
}
#news-description{
    text-align:justify;
}

.cadreSociete{
    border:1px solid #ccc;
    margin:10px;
    padding:10px;
    background:#eee;
    width:550px;
}

/*
 * ************
 * V2
 * ************
 */
body{
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 100%;
    line-height: 24px;
}

#page.legacy {
    max-width: 1280px !important;
    width: 100%!important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 10px 10px 10px;
}

.content {
    /* 100 % - footer - padding footer - menu header - top */
    min-height: calc(100vh - 220px - 48px - 54.5px - 40px);
}

/*
 * ************
 * V2
 * ************
 */

.container{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    gap: 24px;
    padding: 0 16px;
}

/*
 * ************
 * COMPONENT TAG
 * ************
 */

.tag-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.tag.is-small {
    font-size: 10px;
    font-weight: 700;
}

.tag-icon {
    width: 12px;
    height: 12px;
}

.tag.is-stock {
    background: #F8EBD1;
    color: #C38000;
}

.tag.is-low-price {
    background: #F8DDD9;
    color: #F44336;
}

.tag.is-top {
    background: #D6DBF7;
    color: #6661B4;
}

.tag.is-innovation {
    background: #E2F4FC;
    color: #088CC4;
}

.tag.is-new {
    background: #00A63E;
    color: #FFFFFF;
}

.tag.is-best {
    background: #C49208;
    color: #FFFFFF;
}

/*
 * ************
 * COMPONENT NORME
 * ************
 */

.norme-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.norme {
    display: flex;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid #DDDDDD;
}

a.norme:hover {
    background: #F5F5F5;
}

.norme-icon {
    width: 24px;
    height: 24px;
}

/*
 * ************
 * COMPONENT MENU
 * ************
 */

.navbar {
    display: grid;
    margin-bottom: 24px;
}

.navbar-top {
    background: #39434F;
    border-bottom: 4px solid #51a026;
}

.nav-bottom-item {
    text-wrap: nowrap;
}

.navbar-top-inner {
    display: flex;
    justify-content: space-between;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 16px;
}

.navbar-top-text {
    color: #fff;
}

.navbar-top-text:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.navbar-top-right {
    display: flex;
    gap: 16px;
}

.navbar-sub-container {
    display: grid;
    gap: 24px;
    position: sticky;
    top: 0;
    background: #fff;
    margin-top: 16px;
    border-bottom: 1px solid rgba(81, 160, 38, 0.3);
    padding: 0 16px 16px 16px;
}

.navbar-mid {
    display: flex;
    align-items: center;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    gap: 24px;
}

.navbar-mid-logo {
    width: 11rem;
}

.navbar-mid-search-form {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #F2F4F7;
    padding: 12px 20px;
    border-radius: 50px;
    flex: 1 1 0;
    margin-bottom: 0;
}

.navbar-mid-search-form-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.navbar-mid-link-user-container {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.navbar-mid-link-connect-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-mid-link-user {
    display: grid;
    gap: 8px;
}

.navbar-mid-link-user-firstname {
    font-weight: 600;
    font-size: 16px;
    line-height: 12px;
}

.navbar-mid-link-user-society {
    font-weight: 400;
    text-transform: uppercase;
    color: #4D4D4D;
    font-size: 12px;
    line-height: 12px;
}

.navbar-mid-search-form-input {
    border: none;
    background: none;
    font-size: 16px;
    height: 100%;
    width: 100%;
}

.navbar-mid-search-form-input::placeholder {
    color: #353535;
}

.navbar-mid-search-form-input:focus-visible {
    outline: none;
}

.navbar-mid-search-form:focus-within {
    outline: 1px solid #353535;
}

.navbar-mid-link {
    position: relative;
    padding: 8px;
}

.navbar-mid-link:hover {
    background: #F5F5F5;
    border-radius: 8px;
}

.navbar-mid-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar-mid-link svg {
    width: 2rem;
    height: 2rem;
}

.navbar-mid-link-count {
    position: absolute;
    top: -0px;
    right: 2px;
    background: #C81E1D;
    padding: 6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;

    &.hidden {
        display: none;
    }
}

.navbar-bottom-inner {
    display: flex;
    justify-content: center;
    gap: 6px 32px;
    align-items: center;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}

.nav-bottom-item:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/*
 * ************
 * PAGE CATALOGUE
 * ************
 */

.catalogue-layout {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
}

.catalogue-item {
    margin: 0;
    cursor: pointer;
    outline: #ddd 1px solid;
    line-height: 18px;
    border-radius: 8px;
    overflow: hidden;
}

.catalogue-item:hover {
    outline: #39434f 1px solid;
}

.catalogue-item:hover .catalogue-item-text{
    color:#39434f;
    background: #FFF;
}

.catalogue-item-image  {
    height: 210px !important;
    overflow: hidden;
}

.catalogue-item-image > img {
    object-fit: cover;
    width: 100%;
}

.catalogue-item-text {
    padding: 12px;
    display: grid;
    gap: 8px;
}

.catalogue-item-text-titre {
    font-size: 17px;
    font-weight: 700;
}

.catalogue-item-text-description {
    font-size: 14px;
    font-weight: 400;
}

/*
 * ************
 * PAGE RUBRIQUE
 * ************
 */

.title-section-container {
    margin: 24px 0;
}

.title-section-title-container {
    display: flex;
    gap: 24px;
}

.title-section-image {
    height: 128px;
    width: 128px;
    border-radius: 16px;
    background: rgb(178,183,185);
    background: radial-gradient(circle, rgba(178,183,185,1) 0%, rgba(60,65,68,1) 100%);
    overflow: hidden;
}

.title-section-text-container {
    margin-top: 16px;
    display: flex;
    align-content: baseline;
    flex-direction: column;
    gap: 8px;
}

.title-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #39434F;
    margin-bottom: 0;
    line-height: initial;
}

.title-section-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: #39434F;
}

.rubrique-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-wrap: wrap;
    gap: 16px;
}

.rubrique-item{
    display: flex;
    color: #39434F;
    border: #ddd 1px solid;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
}

.rubrique-item:hover{
    border: #39434f 1px solid;
}

.rubrique-item-title{
    margin: 0;
    font-weight: 700;
    font-size: 14px;
}

.rubrique-item-image{
    height: 96px;
    width: 96px;
    border-radius: 8px;
    border: 1px solid rgba(204, 204, 204, .5);
    aspect-ratio: 1/1;
}

.norme-layout {
    display: grid;
    gap: 24px;
}

.other-container {
    display: grid;
    gap: 24px;
}

.other-layout {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
}

.other-item {
    margin: 0;
    cursor: pointer;
    outline: #ddd 1px solid;
    line-height: 18px;
    border-radius: 8px;
    overflow: hidden;
}

.other-item:hover {
    outline: #39434f 1px solid;
}

.other-item:hover .other-item-text{
    color:#39434f;
    background: #FFF;
}

.other-item-image  {
    height: 128px !important;
    overflow: hidden;
}

.other-item-image > img {
    object-fit: cover;
    width: 100%;
}

.other-item-text-titre {
    font-size: 17px;
    font-weight: 700;
}

.other-item-text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
}

/*
 * ************
 * COMPONENT PRODUCT
 * ************
 */

.product-item {
    padding: 24px;
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 24px;
    border-radius: 4px;
    border: 1px solid #DDDDDD;
    align-items: flex-start;
    box-shadow: 0 0 24px 0 #0000001A;

}

.product-item:hover {
    outline: #39434f 1px solid;
}

.product-single-image-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-item-img {
    overflow: hidden;
    width: 128px;
    height: 128px;
    border: 1px solid #DDD;
    border-radius: 4px;
    flex: 1 0 auto;
}

.product-item-img > img {
    object-fit: cover;
    width: 128px;
    height: auto;
}

.product-item-details {
    display: grid;
    gap: 12px;
}

.product-item-details-informations {
    display: flex;
    justify-content: space-between;
}

.product-item-details-reference {
    font-size: 12px;
    font-weight: 400;
    color: #39434F;
}

.product-item-title {
    font-size: 15px;
    font-weight: 700;
}

.product-item-title::first-letter {
    text-transform: uppercase;
}

/*
 * ************
 * PAGE CATEGORIE
 * ************
 */

.categorie-product-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.title-section-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    width: max-content;
}

.title-section-back > svg {
    width: 10px;
    height: 10px;
}

/*
 * ************
 * PAGE FAVORIS
 * ************
 */

.favoris-product-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/*
 * ************
 * PAGE CONNEXION
 * ************
 */

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 24px 0 #0000001A;
    max-width: 400px;
    margin: auto;
}

.login-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-email,
.login-password,
.input {
    background: #F2F4F7;
    padding: 12px 20px;
    border-radius: 8px;
}

.login-submit,
.button-submit {
    padding: 8px;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    cursor: pointer;
}

.login-submit:hover,
.button-submit:hover{
    background-color: #F5F5F5;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*
 * ************
 * PAGE TELECHARGEMENTS
 * ************
 */

.file-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-item {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px;
    transition: background-color 0.3s ease;
    gap: 4px;
}

.file-item:hover {
    background-color: #f9f9f9;
}

.file-item-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.file-item-title {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.navbar-mobile {
    display: none;
}

.navbar-mid-inner-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-single {
    color: #39434F;
    gap: 12px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    border: 1px solid #DDDDDD;
    align-items: flex-start;
    box-shadow: 0 0 24px 0 #0000001A;
}

.product-single-inner {
    display: grid;
    gap: 32px;
    grid-template-columns: 28rem 1fr;
}

.product-single-image-container img {
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    border: 1px solid rgba(204, 204, 204, .5);
    max-height: 600px;
}

.zoom-container {
    overflow: hidden;
    position: relative;
}

#zoom-image {
    transition: transform 0.2s ease, transform-origin 0.2s ease;
}

.product-single-content {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.product-single-reference {
    font-size: 14px;
    line-height: 12px;
    color: #888888;
    font-weight: 400;
}

.product-single-title {
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
    color: #39434F;
    margin-bottom: 0px;
}

.product-item-description-title,
.product-item-related-title {
    font-size: 20px;
    font-weight: 700;
    color: #39434F;
    margin-bottom: 8px;
}

.product-item-price {
    font-size: 24px;
    font-weight: 700;
}

.product-item-info {
    display: grid;
    gap: 24px;
}

.product-item-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.favorite-product {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;

    svg {
        width: 28px;
        height: 28px;
    }

    &:hover {
        background-color: #F5F5F5;
    }

    &.hidden {
        display: none;
    }
}

/*
 * ************
 * PAGE MON COMPTE
 * ************
 */

.account-form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.account-form-inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.account-action-container {
    display: grid;
    gap: 32px;
}

.account-action {
    padding: 0 32px 32px;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.account-action-button {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 4px 8px;
}

.account-action-button svg {
    width: 16px;
    height: 16px;
}

.button-submit {
    padding: 8px 42px;
}

/*
 * ************
 * PAGE CONTACT
 * ************
 */

.contact-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    justify-content: space-between;
}

.contact-container  form dl {
    display: grid;
    gap: 16px;
}

.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
}

.contact-aside-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-aside-item svg {
    width: 14px;
    height: 14px;
}

#formContact textarea {
    width: 80%;
}

.newsletter-input-container {
    display: flex;
    align-items: center;
    gap: 16px;
}
.newsletter-input-container input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

.product-item-add-button {
    background: #39434F;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    padding: 12px 40px;

    &:hover {
        background: #566171;
        color: #fff;
    }
}

.product-item-related-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.product-single-info-container {
    display: grid;
    gap: 24px;
}

.breadcrumb-container {
    display: flex;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-item-link {
    color: #b1b1b1;
}

/*
 * ************
 * PANIER
 * ************
 */

.cart-table {
    width:100%;
    margin:18px auto;
    border:1px solid #51A026;
}
.cart-table th, .cart-table td{
    padding:8px;
    vertical-align:top;
}
.cart-table > thead{
    color:#FFF;
    background:#51A026;
}
.cart-table a{
    text-decoration:none;
}
.cart-table a:hover{
    text-decoration:underline;
}
#cart-toolbar{
    overflow:hidden;
}
#cart-toolbar > ul > li > ul{
    list-style-type:none;
}
#cart-toolbar > ul > li > ul > li{
    margin-bottom:9px;
}
#cart-order-action{
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}
#cart-order-action > li{
    border-radius:5px;
    border:1px solid #ccc;
    text-align:center;
    background: #E4F1D6;
}
.cart-order-action-title{
    background:#51A026;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    padding:9px 0;
    border-bottom: 1px solid #fdfdfd;
}
.cart-order-action-desc{
    background: #E4F1D6;
    padding: 10px;
}
.cart-order-action-desc p{
    text-align:left;
    margin: 0 10px 10px
}

.cart-go-back-button {
    width: max-content;
}

.carte-table-container{
    overflow: scroll;
}

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

.layout-footer{
    padding: 48px 24px;
    background-color: #39434f;
    border-top: 4px solid #51a026;
    color: #fff;
    font-size: 14px;
}

.layout-footer a {
    font-size: 14px;
    color: #fff;
    padding-bottom: 3px;
}

.layout-footer-container {
    max-width: 1380px;
    display: grid;
    gap: 24px;
    margin-left: auto;
    margin-right: auto;
}

.layout-footer-menu {
    width: 100%;
    display: grid;
    gap: 24px;
}

.layout-footer-links {
    display: flex;
    gap: 16px;
}

.layout-footer-wixiweb {
    display: flex;
    gap: 4px;
    align-items: center;
}

.layout-footer-wixiweb-img {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADsklEQVRIia2Uf0zUdRjHX8/3uLvvHQJQcE12p0O1rMoicjgaDRsZum5p7tqaZFqOatZMGba2aqz6x8VYq1b/gW3JqpqkENhG85raJAWSLVdJGh7i/QgSCrjk7vv0n4ECXtbz5/N5v5/X8zz77JHnnu76HOEnmyXN7zUUdoEo/2NIzcbeQwa6FCRD0RFFDwjS7D4//E1tcFXiPwNe3/BDJcir1lDk9rQ8z0rLMgKCbgDcIB0q2uq8ZDS/dGDZH9cFaCw7a464Jwct0Ud2fnnLYYDaWjVyjv9SaGnSL8hjQIHAEaA1Dfsn29oKwikDABoeOPMuSsZThxZtnknUUN6/yFLLL6oBoBjoVKTFEqu56uvFP18T0FQcWm4z9JjDmcxfHyy4OJdhX0mf55LaKwyMgKKrgT5UWkSt1kDngqNyxScRAIC2wgvHgYa1PfM/SGFyAFrv7M+x2RzlCH4V1qEMK7rfhq3FmeUJrgpK4jLgyLLYMwpVpT/mFaUKmBrfekMuK918UEXWgfoBRaTpMuDYkqFMM2EMopTe3Z/Tcz0QRaW34PeHUeNlRe9AeVumCvo8fzYKOrY4mvH8vyl8ArVne8YeR3QX4FHhfTPNesc3kDU8TRjJGL8vkhW/OJiv7lQKh2/S9HB2fHskK94fyYqfCWfHt4e86prTNOaYPDVhT2xKBTDuSBwdtyfC445EQFFbKh7UiFerLR5MScvk/Wr8NaJG/MWUigNoxsCNmh6K67xfb01J7z63QtNDQ+o+90rqkNzuTzW3a/fVHauhN3TfNoP+Xs3tHtK87tQg6mtbrb62sBadsE/LL2jbpL72pPoObrvK421frt72iPoOvjk1b8xICH3XgSs2wegp/7S8GXsSd/RjXJE3dOmead3KwJpeXLEyXJEtevOeOkUFppyKqzq6q+41RFfK9zVrAbSwbiGWniYtbSGW5cFKfgU0cbKmeur90Xvql5BMdqA0S2/NjpknAHAMNuKMluuKnT4AnJEnMGMd0rXjgvRUn8SMlWLG1lO8q0EDgX++aOboAK5oH2a0cPYVAXK8PoQr2sG8oS0AmJFKXOEPL793vnUax4USXNEiYu5mLdts6poXnHD2M8xoNo7z6+dcEYBWVDyKSD0im1Ddz8TEfAkG49M0fn8uiUQ7MAIkgCzgIWlvH702oKrIzm9WCJUhhMOyr/vZGXUbizOZmPwCcOKyr5G9naNz1b3C7N2tG72qlfklc+pAtHb2lc9u3GoW6FbHR3qNaWeLvwHCbZV0UvLv1wAAAABJRU5ErkJggg=="), pointer;

    &:hover {
        filter: contrast(100%) brightness(1);
    }
}

.layout-footer-wixiweb-link {
    width: 76px;
}

.layout-footer-copyright {
    display: flex;
    justify-content: space-between;
}

/*
 * ************
 * PAGE DECOUVRIR
 * ************
 */

.discover-container {
    border: 1px solid #ddd;
    border-radius: 8px;
}

.discover-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.discover-tab a {
    display: block;
    padding: 12px 24px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    border-bottom: 2px solid #ddd;
}

.discover-tab.active a,
.discover-tab a:hover {
    border-bottom: 2px solid #51A026;
    color: #000;
}

.discover-tab a:hover {
    background-color: #f1f1f1;
}

.discover-content {
    padding: 24px;
    background-color: #ffffff;
    border-radius: 0 0 4px 4px;
}

.cart-delivery-mode-dialog {}
    .cart-delivery-mode-dialog > *:not(:first-child) {
        margin-top: 20px;
    }

    .cart-delivery-mode-dialog .input {
        border: solid 2px #459e00;
        background-color: #F4F9F0;
    }

    .cart-delivery-mode-dialog-input-label {
        color: #39434F;
        display: block;
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 10px;
    }
    .cart-delivery-mode-dialog-delivery-mode-input-container > *:not(:first-child) {
        margin-top: 8px;
    }
    .cart-delivery-mode-dialog-delivery-mode-input-container > * {
        display: block;
        cursor: pointer;
    }
    .cart-delivery-mode-dialog-delivery-mode-input-container > * > *:not(:first-child) {
        margin-left: 8px;
    }

.cart-row-btn {
    border-radius: 4px;
    color: #51A026;
    cursor: pointer;
    padding: 1px;
}

.cart-row-btn:hover, .cart-row-btn:focus-visible, .cart-row-btn:active {
    color: #327e04;
}

    .cart-row-btn > svg {
        color: currentColor;
        fill: currentColor;
        height: 24px;
        width: 24px;
    }

    .cart-row-btn:not([data-content]) > svg[data-edit-comment] {
        display: none;
    }
    .cart-row-btn[data-content] > svg[data-add-comment] {
        display: none;
    }

/* Large screens */
@media (max-width: 1024px) {
    .catalogue-layout {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rubrique-layout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .other-layout {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .categorie-product-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Middle screens */
@media (max-width: 768px) {
    .navbar-mid-link-user-container {
        display: flex;
    }

    .navbar-mid-logo {
        width: 9rem;
    }

    .catalogue-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rubrique-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .other-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .title-section-text-container {
        gap: 0;
    }

    .title-section-title {
        font-size: 24px;
    }

    .title-section-subtitle {
        font-size: 18px;
    }

    .title-section-image {
        display: none;
    }

    .title-section-back {
        font-size: 14px;
    }

    .title-section-back > svg {
        width: 10px;
        height: 10px;
    }

    .title-section-text-container {
        margin-top: 8px;
    }

    .product-item {
        grid-template-columns: auto;
    }

    .navbar-top-inner {
        font-size: 14px;
    }

    .container {
        gap: 16px;
    }

    .navbar-mid.navbar-mobile {
        display: grid;
        gap: 8px;
    }

    .navbar-mobile {
        display: block;
    }

    .navbar-desktop {
        display: none;
    }

    .navbar-sub-container {
        gap: 12px;
        padding-bottom: 4px;
    }

    .navbar-bottom {
        overflow: hidden;
    }

    .navbar-bottom-inner {
        flex-wrap: nowrap;
        justify-content: start;
        overflow: auto;
        padding-bottom: 8px;
    }

    .product-single {
        flex-direction: column;
        padding: 32px 24px;
        margin-top: 16px;
    }

    .product-single-inner {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .product-single-content {
        order: 1;
    }

    .product-single-image-container {
        order: 2;
    }

    .product-item-related-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .layout-footer-links {
        flex-direction: column;
    }

    .layout-footer-copyright {
        flex-direction: column;
        gap: 16px;
    }

    .breadcrumb-container {
        font-size: 10px;
    }

    .ui-dialog {
        width: 100% !important;
    }

    #cart-order-action{
        grid-template-columns: repeat(1, 1fr);
    }

    .cart-order-action-commande {
        order: 1;
    }

    .cart-order-action-achat {
        order: 2;
    }

    .cart-order-action-devis {
        order: 3;
    }

    .discover-tabs {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .discover-content-mobile-none {
        display: none;
    }

    .contact-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    #formContact textarea {
        width: 100%;
    }
}

/* Small screens */
@media (max-width: 540px) {
    .navbar-mid-logo {
        width: 7rem;
    }

    .catalogue-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .rubrique-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .other-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .title-section-title {
        font-size: 18px;
    }

    .title-section-subtitle {
        font-size: 14px;
    }

    .product-item-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .account-action .title-section-subtitle {
        font-size: 18px;
    }
}


/* Small screens */
@media (max-width: 380px) {
    .other-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .product-item-details-informations {
        flex-direction: column;
        gap: 4px;
    }
}