/* ==========================================================
   VITALIANE - MINI PANIER MOBILE / IPHONE
   VERSION PROPRE
   ==========================================================
 *
 * Objectifs :
 * - panneau adapté à Safari iPhone
 * - produits scrollables
 * - boutons toujours accessibles
 * - boutons plus bas qu'avant
 * - plus de place visible pour les produits
 * - style Vitaliane cohérent
 * ========================================================== */

@media screen and (max-width: 767px) {

    /* ------------------------------------------------------
       PANNEAU PRINCIPAL WAREHOUSE
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart #blockcart-content {
        height: 100vh !important;
        max-height: 100vh !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        /*
         * On garde une marge de sécurité pour Safari,
         * mais bien plus petite que les 165px précédents.
         */
        padding-bottom:
            calc(95px + env(safe-area-inset-bottom)) !important;
    }


    /* Safari / navigateurs modernes */

    @supports (height: 100dvh) {

        .ps-shoppingcart.side-cart #blockcart-content {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }

    }


    /* ------------------------------------------------------
       LISTE DES PRODUITS
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-products {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
    }


    /* ------------------------------------------------------
       TOTAUX + BOUTONS
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-subtotals,

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-totals,

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons {
        flex: 0 0 auto !important;
    }


    /* ------------------------------------------------------
       ZONE DES BOUTONS
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 7px !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            10px
            0
            0 !important;

        background: #ffffff !important;
    }


    /* ------------------------------------------------------
       BOUTON COMMANDER
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons
    .btn-primary {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 18px !important;

        border: 0 !important;
        border-radius: 27px !important;

        background: #2f7658 !important;
        color: #ffffff !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        text-transform: none !important;

        box-shadow:
            0 6px 16px rgba(47, 118, 88, .15) !important;
    }


    /* ------------------------------------------------------
       BOUTON PANIER
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons
    .btn-secondary {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 18px !important;

        border:
            1px solid #cfded6 !important;

        border-radius: 24px !important;

        background: #eef6f1 !important;
        color: #32664f !important;

        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: none !important;

        box-shadow: none !important;
    }


    /* ------------------------------------------------------
       HOVER
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons
    .btn-primary:hover {
        background: #28694f !important;
    }

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons
    .btn-secondary:hover {
        background: #e2efe8 !important;
    }


    /* ------------------------------------------------------
       SÉCURITÉ BAS IPHONE
       ------------------------------------------------------ */

    .ps-shoppingcart.side-cart
    #blockcart-content
    .cart-buttons
    .btn-secondary {
        margin-bottom:
            calc(8px + env(safe-area-inset-bottom)) !important;
    }

}


/* ==========================================================
   VITALIANE - ESPACE CLIENT / VOTRE COMPTE
   ==========================================================
   Tableau de bord moderne, mobile-first.
   ========================================================== */

body#my-account .page-header.v-account-header {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto 22px !important;
    padding: 22px 22px 0 !important;
    border: 0 !important;
}

body#my-account .v-account-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: #4f806a;
    font-size: 13px;
    font-weight: 700;
}

body#my-account .page-header.v-account-header .page-title {
    margin: 0 !important;
    color: #17362b !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

body#my-account .page-header.v-account-header p {
    margin: 7px 0 0 !important;
    color: #6f7c76;
    font-size: 15px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   CONTENEUR
   ---------------------------------------------------------- */

body#my-account .v-account-dashboard {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 22px 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   GRILLE
   ---------------------------------------------------------- */

body#my-account .v-account-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}


/* ----------------------------------------------------------
   CARTE
   ---------------------------------------------------------- */

body#my-account .v-account-card {
    position: relative;

    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 18px !important;
    align-items: center !important;

    gap: 13px !important;

    min-height: 112px !important;

    padding: 17px 16px !important;

    border: 1px solid #e1e9e5 !important;
    border-radius: 17px !important;

    background: #ffffff !important;

    color: inherit !important;
    text-decoration: none !important;

    box-shadow: 0 4px 15px rgba(35, 68, 55, .045) !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease !important;
}

body#my-account .v-account-card:hover {
    transform: translateY(-2px);

    border-color: #c8ddd2 !important;
    background: #fbfdfc !important;

    box-shadow: 0 8px 22px rgba(35, 68, 55, .08) !important;
}


/* Carte commandes légèrement mise en avant */

body#my-account .v-account-card-featured {
    border-color: #cfe3d8 !important;
    background: #f7fbf8 !important;
}


/* ----------------------------------------------------------
   ICÔNES
   ---------------------------------------------------------- */

body#my-account .v-account-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 50px !important;
    height: 50px !important;

    border-radius: 15px !important;

    background: #eaf4ee !important;
    color: #2f7658 !important;

    font-size: 21px !important;
}

body#my-account .v-account-card-featured .v-account-icon {
    background: #dceee4 !important;
}


/* ----------------------------------------------------------
   TEXTE
   ---------------------------------------------------------- */

body#my-account .v-account-card-copy {
    display: block !important;
    min-width: 0 !important;
}

body#my-account .v-account-card-copy strong,
body#my-account .v-account-card-copy small {
    display: block !important;
}

body#my-account .v-account-card-copy strong {
    color: #1d352b !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body#my-account .v-account-card-copy small {
    margin-top: 4px !important;
    color: #77827d !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body#my-account .v-account-arrow {
    color: #91a39a !important;
    font-size: 19px !important;
}


/* ----------------------------------------------------------
   LIENS AJOUTÉS PAR LES MODULES
   wishlist, alertes, etc.
   ---------------------------------------------------------- */

body#my-account .v-account-extra-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;

    width: 100% !important;

    margin-top: 14px !important;
}

body#my-account .v-account-extra-links:empty {
    display: none !important;
}

body#my-account .v-account-extra-links > a,
body#my-account .v-account-extra-links .link-item,
body#my-account .v-account-extra-links [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
}

body#my-account .v-account-extra-links > a,
body#my-account .v-account-extra-links a {
    display: flex !important;
    align-items: center !important;

    min-height: 64px !important;

    padding: 13px 15px !important;

    border: 1px solid #e1e9e5 !important;
    border-radius: 15px !important;

    background: #fff !important;

    color: #263d33 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

body#my-account .v-account-extra-links a i {
    margin-right: 9px !important;
    color: #2f7658 !important;
}


/* ----------------------------------------------------------
   DÉCONNEXION
   ---------------------------------------------------------- */

body#my-account .v-account-logout-wrap {
    display: flex !important;
    justify-content: center !important;

    margin-top: 24px !important;
}

body#my-account .v-account-logout {
    display: inline-flex !important;
    align-items: center !important;

    gap: 8px !important;

    min-height: 42px !important;

    padding: 0 15px !important;

    border-radius: 21px !important;

    background: #f4f6f5 !important;
    color: #66736d !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

body#my-account .v-account-logout:hover {
    background: #ecefed !important;
    color: #45544d !important;
}


/* ----------------------------------------------------------
   ON ÉVITE LE VIEUX FOOTER COMPTE SUR CETTE PAGE
   ---------------------------------------------------------- */

body#my-account .my-account-page-content-wrapper,
body#my-account .my-account-side-links {
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media screen and (max-width: 991px) {

    body#my-account .v-account-grid,
    body#my-account .v-account-extra-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    body#my-account .page-header.v-account-header {
        margin-bottom: 16px !important;
        padding: 18px 16px 0 !important;
    }

    body#my-account .page-header.v-account-header .page-title {
        font-size: 28px !important;
    }

    body#my-account .page-header.v-account-header p {
        font-size: 14px !important;
    }

    body#my-account .v-account-dashboard {
        padding:
            0
            16px
            34px !important;
    }

    body#my-account .v-account-grid,
    body#my-account .v-account-extra-links {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    body#my-account .v-account-card {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            16px !important;

        gap: 11px !important;

        min-height: 82px !important;

        padding:
            12px
            12px !important;

        border-radius:
            15px !important;

        box-shadow:
            none !important;
    }

    body#my-account .v-account-icon {
        width: 46px !important;
        height: 46px !important;

        border-radius: 13px !important;

        font-size: 19px !important;
    }

    body#my-account .v-account-card-copy strong {
        font-size: 16px !important;
    }

    body#my-account .v-account-card-copy small {
        margin-top: 2px !important;

        font-size: 11px !important;
    }

    body#my-account .v-account-arrow {
        font-size: 18px !important;
    }

    body#my-account .v-account-logout-wrap {
        margin-top: 18px !important;
    }

}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media screen and (max-width: 390px) {

    body#my-account .v-account-dashboard {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body#my-account .page-header.v-account-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}


/* ==========================================================
   VITALIANE - ESPACE CLIENT V2
   CORRECTION MOBILE FORTE
   ==========================================================
   Warehouse applique encore ses styles historiques aux liens
   du compte sur smartphone. On neutralise ces règles ici.
   ========================================================== */

@media screen and (max-width: 767px) {

    /* ------------------------------------------------------
       PAGE / WRAPPERS
       ------------------------------------------------------ */

    body#my-account #wrapper,
    body#my-account #wrapper > .container,
    body#my-account #wrapper .container,
    body#my-account #content-wrapper,
    body#my-account #content {
        width: 100% !important;
        max-width: none !important;
    }

    body#my-account #wrapper > .container,
    body#my-account #wrapper .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ------------------------------------------------------
       EN-TÊTE
       ------------------------------------------------------ */

    body#my-account .page-header.v-account-header {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 18px 16px 14px !important;

        border: 0 !important;
    }

    body#my-account .v-account-eyebrow {
        margin-bottom: 4px !important;

        color: #547b68 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body#my-account .page-header.v-account-header .page-title {
        margin: 0 !important;

        color: #17362b !important;

        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    body#my-account .page-header.v-account-header p {
        margin: 8px 0 0 !important;

        color: #6f7c76 !important;

        font-size: 14px !important;
        line-height: 1.45 !important;
    }


    /* ------------------------------------------------------
       DASHBOARD
       ------------------------------------------------------ */

    body#my-account .v-account-dashboard {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 8px 16px 32px !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }


    /* ------------------------------------------------------
       GRILLE
       ------------------------------------------------------ */

    body#my-account .v-account-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 10px !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ------------------------------------------------------
       CARTE
       ------------------------------------------------------ */

    body#my-account .v-account-grid > a.v-account-card {
        display: grid !important;

        grid-template-columns:
            46px
            minmax(0, 1fr)
            18px !important;

        align-items: center !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 82px !important;

        margin: 0 !important;
        padding: 12px 13px !important;

        border: 1px solid #dfe8e3 !important;
        border-radius: 15px !important;

        background: #ffffff !important;

        color: inherit !important;

        text-align: left !important;
        text-decoration: none !important;

        box-shadow: none !important;

        float: none !important;
        clear: both !important;
    }

    body#my-account .v-account-grid > a.v-account-card.v-account-card-featured {
        border-color: #cce1d6 !important;
        background: #f5faf7 !important;
    }


    /* ------------------------------------------------------
       ICÔNE
       ------------------------------------------------------ */

    body#my-account .v-account-grid > a.v-account-card .v-account-icon {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;

        margin: 0 !important;

        border-radius: 13px !important;

        background: #eaf4ee !important;
        color: #2f7658 !important;

        font-size: 19px !important;

        float: none !important;
    }


    /* ------------------------------------------------------
       TEXTE
       ------------------------------------------------------ */

    body#my-account .v-account-grid > a.v-account-card .v-account-card-copy {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }

    body#my-account .v-account-grid > a.v-account-card .v-account-card-copy strong {
        display: block !important;

        margin: 0 !important;

        color: #1d352b !important;

        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    body#my-account .v-account-grid > a.v-account-card .v-account-card-copy small {
        display: block !important;

        margin: 3px 0 0 !important;

        color: #77827d !important;

        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
    }


    /* ------------------------------------------------------
       FLÈCHE
       ------------------------------------------------------ */

    body#my-account .v-account-grid > a.v-account-card .v-account-arrow {
        display: block !important;

        margin: 0 !important;

        color: #8ca096 !important;

        font-size: 19px !important;

        text-align: right !important;
    }


    /* ------------------------------------------------------
       LIENS MODULES : WISHLIST / ALERTES
       ------------------------------------------------------ */

    body#my-account .v-account-extra-links {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 10px !important;

        width: 100% !important;

        margin: 10px 0 0 !important;
        padding: 0 !important;
    }

    body#my-account .v-account-extra-links > *,
    body#my-account .v-account-extra-links [class*="col-"] {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }

    body#my-account .v-account-extra-links a {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-height: 60px !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        border: 1px solid #dfe8e3 !important;
        border-radius: 15px !important;

        background: #ffffff !important;
        color: #263d33 !important;

        font-size: 15px !important;
        font-weight: 700 !important;

        text-decoration: none !important;
    }

    body#my-account .v-account-extra-links a i {
        width: 28px !important;

        margin-right: 10px !important;

        color: #2f7658 !important;

        font-size: 19px !important;

        text-align: center !important;
    }


    /* ------------------------------------------------------
       DÉCONNEXION
       ------------------------------------------------------ */

    body#my-account .v-account-logout-wrap {
        display: flex !important;

        justify-content: center !important;

        width: 100% !important;

        margin: 18px 0 0 !important;
    }

    body#my-account .v-account-logout {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        min-height: 44px !important;

        padding: 0 16px !important;

        border-radius: 22px !important;

        background: #f1f4f2 !important;
        color: #5f7068 !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        text-decoration: none !important;
    }

}


/* ==========================================================
   TRÈS PETITS MOBILES
   ========================================================== */

@media screen and (max-width: 390px) {

    body#my-account .page-header.v-account-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body#my-account .v-account-dashboard {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body#my-account .v-account-grid > a.v-account-card {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            16px !important;

        gap: 10px !important;

        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    body#my-account .v-account-grid > a.v-account-card .v-account-icon {
        width: 42px !important;
        height: 42px !important;

        font-size: 18px !important;
    }

}


/* ==========================================================
   VITALIANE - ESPACE CLIENT V3
   SOUS-PAGES DU COMPTE
   ==========================================================
   Supprime le vieux menu latéral Warehouse des pages :
   informations, adresses, commandes, avoirs, réductions, etc.
   ========================================================== */

body.customer-account:not(#my-account) .v-customer-subpage-header,
body#identity .v-customer-subpage-header,
body#addresses .v-customer-subpage-header,
body#address .v-customer-subpage-header,
body#history .v-customer-subpage-header,
body#order-slip .v-customer-subpage-header,
body#discount .v-customer-subpage-header,
body#order-follow .v-customer-subpage-header {
    width: calc(100% - 40px) !important;
    max-width: 860px !important;

    margin: 28px auto 14px !important;
    padding: 0 !important;

    border: 0 !important;
}

.v-customer-subpage-header .v-account-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    margin-bottom: 14px !important;

    color: #4e7765 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.v-customer-subpage-header .v-account-back i {
    font-size: 18px !important;
}

.v-customer-subpage-header .page-title {
    margin: 0 !important;

    color: #17362b !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}


/* ----------------------------------------------------------
   CONTENU PRINCIPAL
   ---------------------------------------------------------- */

body.customer-account:not(#my-account) .v-customer-subpage,
body#identity .v-customer-subpage,
body#addresses .v-customer-subpage,
body#address .v-customer-subpage,
body#history .v-customer-subpage,
body#order-slip .v-customer-subpage,
body#discount .v-customer-subpage,
body#order-follow .v-customer-subpage {
    width: calc(100% - 40px) !important;
    max-width: 860px !important;

    margin: 0 auto 45px !important;
    padding: 22px 24px !important;

    border: 1px solid #e2eae6 !important;
    border-radius: 18px !important;

    background: #fff !important;

    box-shadow: 0 5px 20px rgba(35, 68, 55, .045) !important;
}


/* ----------------------------------------------------------
   FORMULAIRES CLIENT
   ---------------------------------------------------------- */

.v-customer-subpage .form-group {
    margin-bottom: 18px !important;
}

.v-customer-subpage .form-control-label,
.v-customer-subpage label {
    color: #243a31 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}

.v-customer-subpage input.form-control,
.v-customer-subpage select.form-control,
.v-customer-subpage textarea.form-control {
    min-height: 52px !important;

    padding: 0 15px !important;

    border: 1px solid #cfdbd5 !important;
    border-radius: 12px !important;

    background: #fff !important;

    font-size: 16px !important;

    box-shadow: none !important;
}

.v-customer-subpage textarea.form-control {
    height: auto !important;
    min-height: 105px !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.v-customer-subpage input.form-control:focus,
.v-customer-subpage select.form-control:focus,
.v-customer-subpage textarea.form-control:focus {
    border-color: #6fa48a !important;

    box-shadow: 0 0 0 3px rgba(47,118,88,.09) !important;
}


/* Boutons */

.v-customer-subpage .btn-primary {
    min-height: 50px !important;

    padding: 0 24px !important;

    border: 0 !important;
    border-radius: 25px !important;

    background: #2f7658 !important;
    color: #fff !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    text-transform: none !important;

    box-shadow: 0 6px 16px rgba(47,118,88,.14) !important;
}


/* ----------------------------------------------------------
   PAGE INFORMATIONS : largeur et oeil mot de passe
   ---------------------------------------------------------- */

body#identity .v-customer-subpage form,
body#identity .v-customer-subpage .form-fields {
    width: 100% !important;
    max-width: 680px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

body#identity .v-customer-subpage .input-group {
    width: 100% !important;
}

body#identity .v-customer-subpage .input-group .form-control {
    border-radius: 12px 0 0 12px !important;
}

body#identity .v-customer-subpage .input-group-btn,
body#identity .v-customer-subpage .input-group-addon {
    width: 52px !important;
}

body#identity .v-customer-subpage .input-group-btn .btn,
body#identity .v-customer-subpage .input-group-addon {
    min-width: 52px !important;
    min-height: 52px !important;

    border: 1px solid #cfdbd5 !important;
    border-left: 0 !important;
    border-radius: 0 12px 12px 0 !important;

    background: #e7f2eb !important;
    color: #32684f !important;
}


/* ----------------------------------------------------------
   ADRESSES : cartes plus propres
   ---------------------------------------------------------- */

body#addresses .v-customer-subpage > .row {
    margin-left: -7px !important;
    margin-right: -7px !important;
}

body#addresses .v-customer-subpage > .row > [class*="col-"] {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

body#addresses .address {
    height: 100% !important;

    border: 1px solid #dfe8e3 !important;
    border-radius: 15px !important;

    background: #fff !important;

    overflow: hidden !important;
}

body#addresses .addresses-footer {
    margin-top: 18px !important;
}

body#addresses .addresses-footer a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    min-height: 46px !important;

    padding: 0 18px !important;

    border-radius: 23px !important;

    background: #eaf4ee !important;
    color: #2f7658 !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    body.customer-account:not(#my-account) .v-customer-subpage-header,
    body#identity .v-customer-subpage-header,
    body#addresses .v-customer-subpage-header,
    body#address .v-customer-subpage-header,
    body#history .v-customer-subpage-header,
    body#order-slip .v-customer-subpage-header,
    body#discount .v-customer-subpage-header,
    body#order-follow .v-customer-subpage-header {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 16px 16px 12px !important;
    }

    .v-customer-subpage-header .v-account-back {
        margin-bottom: 10px !important;

        font-size: 13px !important;
    }

    .v-customer-subpage-header .page-title {
        font-size: 26px !important;
    }

    body.customer-account:not(#my-account) .v-customer-subpage,
    body#identity .v-customer-subpage,
    body#addresses .v-customer-subpage,
    body#address .v-customer-subpage,
    body#history .v-customer-subpage,
    body#order-slip .v-customer-subpage,
    body#discount .v-customer-subpage,
    body#order-follow .v-customer-subpage {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 30px !important;
        padding: 16px !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }

    .v-customer-subpage .form-group {
        margin-bottom: 16px !important;
    }

    .v-customer-subpage input.form-control,
    .v-customer-subpage select.form-control {
        min-height: 52px !important;

        font-size: 16px !important;
    }

    .v-customer-subpage .btn-primary {
        width: 100% !important;

        min-height: 54px !important;

        border-radius: 27px !important;

        font-size: 17px !important;
    }

    body#addresses .v-customer-subpage > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body#addresses .v-customer-subpage > .row > [class*="col-"] {
        width: 100% !important;

        padding: 0 !important;

        margin-bottom: 10px !important;
    }

}


/* ==========================================================
   VITALIANE - PAGE CONNEXION V1
   ==========================================================
   Moderne, compacte, cohérente avec le checkout et l'espace
   client. Aucun gros cadre Warehouse.
   ========================================================== */

body#authentication #content-wrapper,
body#authentication #content {
    width: 100% !important;
    max-width: none !important;
}

body#authentication .page-header {
    width: calc(100% - 40px) !important;
    max-width: 760px !important;

    margin: 30px auto 14px !important;
    padding: 0 !important;

    border: 0 !important;
}

body#authentication .page-header .page-title {
    margin: 0 !important;

    color: #17362b !important;

    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

body#authentication .v-login-page {
    width: calc(100% - 40px) !important;
    max-width: 760px !important;

    margin: 0 auto 48px !important;
}

body#authentication .v-login-intro {
    margin-bottom: 16px !important;
}

body#authentication .v-login-kicker {
    display: inline-block !important;

    margin-bottom: 4px !important;

    color: #4f806a !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

body#authentication .v-login-intro h2 {
    margin: 0 !important;

    color: #1d352b !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body#authentication .v-login-intro p {
    margin: 6px 0 0 !important;

    color: #6f7c76 !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
}


/* ----------------------------------------------------------
   BLOC PRINCIPAL
   ---------------------------------------------------------- */

body#authentication .v-login-box {
    width: 100% !important;

    padding: 24px !important;

    border: 1px solid #e1e9e5 !important;
    border-radius: 18px !important;

    background: #fff !important;

    box-shadow: 0 6px 22px rgba(35, 68, 55, .05) !important;
}

body#authentication .v-login-form,
body#authentication .v-login-native-form,
body#authentication .v-login-fields {
    width: 100% !important;
}


/* ----------------------------------------------------------
   FORMULAIRE
   ---------------------------------------------------------- */

body#authentication .v-login-native-form .form-group.row {
    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        17px !important;
}

body#authentication .v-login-native-form .form-group.row > [class*="col-"] {
    display: block !important;

    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body#authentication .v-login-native-form .form-control-label {
    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        7px !important;

    padding: 0 !important;

    color: #243a31 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: left !important;
}

body#authentication .v-login-native-form input.form-control {
    width: 100% !important;

    min-height: 54px !important;

    padding:
        0
        15px !important;

    border: 1px solid #cfdbd5 !important;
    border-radius: 13px !important;

    background: #fff !important;

    color: #20342b !important;

    font-size: 16px !important;

    box-shadow: none !important;
}

body#authentication .v-login-native-form input.form-control:focus {
    border-color: #6fa48a !important;

    box-shadow:
        0 0 0 3px rgba(47, 118, 88, .09) !important;
}


/* ----------------------------------------------------------
   MOT DE PASSE : OEIL DANS LE CHAMP
   ---------------------------------------------------------- */

body#authentication .v-login-native-form .input-group {
    position: relative !important;

    display: block !important;

    width: 100% !important;
}

body#authentication .v-login-native-form .input-group input.form-control {
    width: 100% !important;

    padding-right: 60px !important;

    border-radius: 13px !important;
}

body#authentication .v-login-native-form .input-group-btn,
body#authentication .v-login-native-form .input-group-append,
body#authentication .v-login-native-form .input-group-addon {
    position: absolute !important;

    top: 50% !important;
    right: 6px !important;

    transform: translateY(-50%) !important;

    z-index: 5 !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;
}

body#authentication .v-login-native-form button[data-action="show-password"],
body#authentication .v-login-native-form .input-group-btn button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: #eaf4ee !important;
    color: #32684f !important;

    box-shadow: none !important;
}


/* ----------------------------------------------------------
   MOT DE PASSE OUBLIÉ
   ---------------------------------------------------------- */

body#authentication .v-login-forgot {
    margin:
        -3px
        0
        16px !important;

    text-align: right !important;
}

body#authentication .v-login-forgot a {
    color: #587166 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

body#authentication .v-login-forgot a:hover {
    text-decoration: underline !important;
}


/* ----------------------------------------------------------
   BOUTON CONNEXION
   ---------------------------------------------------------- */

body#authentication .v-login-footer {
    width: 100% !important;
}

body#authentication .v-login-submit {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    width: 100% !important;
    min-height: 56px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 28px !important;

    background: #2f7658 !important;
    color: #fff !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    text-transform: none !important;

    box-shadow: 0 7px 18px rgba(47,118,88,.15) !important;
}

body#authentication .v-login-submit:hover {
    background: #28694f !important;
}


/* ----------------------------------------------------------
   SÉPARATEUR SOCIAL
   ---------------------------------------------------------- */

body#authentication .v-login-social-separator {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin:
        20px
        0
        14px !important;

    color: #8a9590 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

body#authentication .v-login-social-separator::before,
body#authentication .v-login-social-separator::after {
    content: "" !important;

    flex: 1 1 auto !important;

    height: 1px !important;

    background: #e4eae7 !important;
}


/* ----------------------------------------------------------
   BOUTONS FACEBOOK / GOOGLE
   ---------------------------------------------------------- */

body#authentication .v-login-social {
    width: 100% !important;
}

body#authentication .v-login-social .row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
}

body#authentication .v-login-social [class*="col-"] {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body#authentication .v-login-social a,
body#authentication .v-login-social button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;
    min-height: 50px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    border: 1px solid #dce4e0 !important;
    border-radius: 13px !important;

    background: #fff !important;

    color: #2c3b35 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow: none !important;
}

body#authentication .v-login-social a[class*="facebook"],
body#authentication .v-login-social .btn-facebook {
    border-color: #d7e0ef !important;
    background: #f7f9fc !important;
    color: #345387 !important;
}

body#authentication .v-login-social a[class*="google"],
body#authentication .v-login-social .btn-google {
    background: #fff !important;
}


/* ----------------------------------------------------------
   CRÉER UN COMPTE
   ---------------------------------------------------------- */

body#authentication .v-login-register {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 14px !important;

    margin-top: 20px !important;
    padding: 15px !important;

    border-radius: 14px !important;

    background: #eef6f1 !important;
}

body#authentication .v-login-register strong,
body#authentication .v-login-register span {
    display: block !important;
}

body#authentication .v-login-register strong {
    color: #23483a !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}

body#authentication .v-login-register span {
    margin-top: 2px !important;

    color: #75837c !important;

    font-size: 11px !important;
}

body#authentication .v-login-register a {
    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    flex: 0 0 auto !important;

    min-height: 40px !important;

    padding: 0 13px !important;

    border-radius: 20px !important;

    background: #dcece3 !important;
    color: #245f49 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    text-decoration: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    body#authentication .page-header {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 18px 16px 10px !important;
    }

    body#authentication .page-header .page-title {
        font-size: 27px !important;
    }

    body#authentication .v-login-page {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 34px !important;
        padding: 0 16px !important;
    }

    body#authentication .v-login-intro {
        margin-bottom: 14px !important;
    }

    body#authentication .v-login-intro h2 {
        font-size: 21px !important;
    }

    body#authentication .v-login-box {
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }

    body#authentication .v-login-native-form .form-group.row {
        margin-bottom: 15px !important;
    }

    body#authentication .v-login-native-form input.form-control {
        min-height: 54px !important;

        font-size: 16px !important;
    }

    body#authentication .v-login-social .row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 9px !important;
    }

    body#authentication .v-login-social a,
    body#authentication .v-login-social button {
        min-height: 50px !important;

        padding: 0 7px !important;

        font-size: 12px !important;
    }

    body#authentication .v-login-register {
        padding: 13px !important;
    }

}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media screen and (max-width: 360px) {

    body#authentication .v-login-social .row {
        grid-template-columns: 1fr !important;
    }

    body#authentication .v-login-register {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body#authentication .v-login-register a {
        width: 100% !important;

        justify-content: center !important;
    }

}