/* ============ ACCOUNT PAGES ============
 * Extracted from custom.css at Lot 5f (2026-04-24).
 * Desktop account pages styles : page-my-account, authentication / login form, registration,
 * identity, address, addresses, forgot-password, history, order-detail, order-return,
 * order-follow, customer-account, psgdprinfo17.
 * Loaded at priority 70 (after alter-checkout at 60, before alter-carousel at 150).
 * See docs/theme-dev/DECISION_LOG.md D-001 (split desktop Option C) and D-005 (BP routine).
 */
.page-my-account #content .links a span.link-item {
    border-radius: 8px
}

.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i, .dropdown:hover .expand-more, .page-my-account #content .links a:hover i, .search-widget form button[type=submit] .search:hover, .top-menu .sub-menu a:hover {
    color: var(--as-amaranth)
}

.page-my-account #content .links a {
    color: var(--as-grey-900);
    font-weight: 500
}

/* ---- Mon compte ---- */


.form-control{background: var(--as-grey-100);border-radius: 3px}
.form-group.row{margin-bottom: 24px;}
.login-form{margin-top: 0;}
.page-authentication #content{padding:64px 64px 32px 64px}
#authentication h1, #password h1, #registration h1, #identity h1, #address h1, #addresses h1, #history h1 {
    text-align: center;
    font-size: 31px
}
.psgdprinfo17{background: none;padding: 0}
#exportDataToPdf,#exportDataToCsv{margin-left: 0;margin-right: 0;}
.psgdprinfo17 .btn-primary{    background: var(--as-grey-900);
    color: var(--as-white);
    text-decoration: none;

    float: none;
    display: block;
    width: 100%;
    font-size: 10px;
    margin: 16px 0;
    padding: 16px;border-radius: 5px}
#authentication #wrapper, #registration #wrapper, #my-account #wrapper, #identity #wrapper, #address #wrapper, #addresses #wrapper {
    background: var(--as-grey-100)
}

.forgot-password a{
    color: var(--as-grey-900);
    border-bottom: 2px solid var(--as-amaranth);
    font-weight: 500;
    font-size: 14px;
    padding-bottom: 4px
}
/* Connexion : remplace "Afficher/Masquer" par ton SVG */
#login-form [data-action="show-password"]{
    position: relative;
    overflow: hidden;
    text-indent: -9999px;   /* cache le texte visuellement */
    white-space: nowrap;
    min-width: 2.75rem;     /* bouton plus "carré" */
    padding-left: 0;
    padding-right: 0;
}

#login-form [data-action="show-password"]::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);

    background: url("../img/eye-icon.svg") no-repeat center / contain;
    pointer-events: none;
}
.input-group .input-group-btn>.btn[data-action=show-password]{   background: var(--as-grey-300)}
.page-customer-account #content,#module-ps_emailalerts-account #content{padding: 64px;border-radius: 8px;max-width: 850px;width: 100%;margin: 0 auto;display: block}
.page-customer-account h1,#module-ps_emailalerts-account h1{text-align: center}
.page-order-detail .box{border-radius: 8px}
.page-customer-account #content .forgot-password{margin:0;padding:16px 0}
.no-account p{color:var(--as-grey-900);font-weight: 500}
.no-account a.btn-primary-a,#order-detail .btn-primary{    background: var(--as-amaranth);letter-spacing: 1px;
    border-radius: 8px;
    padding: 12px 32px;
    font-weight: 500;
    color:var(--as-white);
text-transform: uppercase;display:inline-block}
#order-detail #order-return-form .form-footer{text-align: center}
.no-account a.btn-primary-a:hover,.btn-primary:hover {background: linear-gradient(180deg, var(--as-black) 0%, var(--as-grey-700) 100%)!important;}

.forgot-password a:hover, .no-account a:hover {
    border: none
}

#submit-login, .forgotten-password .form-fields .center-email-fields button, #registration .form-footer button, #identity .form-control-submit, #address .form-control-submit {
    background: var(--as-amaranth);
    border-radius: 8px;
    padding: 12px 32px;
    font-weight: 500
}

.forgotten-password .form-fields .center-email-fields button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: inherit;
}
.forgotten-password .form-fields .center-email-fields button, .forgotten-password .form-fields .email input{height: 48px}
.forgotten-password .form-fields .email input{border-top-right-radius: 0;border-bottom-right-radius: 0}
.page-addresses .address .address-footer a {
    color: var(--as-grey-900);
}

.page-authentication #content {
    border-radius: 8px
}
.page-customer-account #content .no-account{padding: 16px 0 0 0 }

/* ---- Mot de passe oublié ---- */

#password.page-customer-account #content, .page-registration #content, #identity .page-content, #address .page-content, #addresses .page-content {
    border-radius: 8px;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: block
}

.forgotten-password .form-fields label.required {
    width: 185px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center
}

#back-to-login, .page-footer a,.back-to-buy,#order-detail #order-infos li a {
    margin-bottom: 32px;
    display: block;
    color: var(--as-grey-900);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 12px;font-weight: 500;
    text-decoration-color:  var(--as-amaranth);
}

#order-follow .order-return a,#order-follow .table-bordered a,#order-slip .table-bordered a {color:var(--as-grey-900);text-decoration: underline;text-underline-offset: 2px;text-underline-color: var(--as-amaranth)}
#order-follow .table thead th{color:var(--as-grey-900)}
.page-footer .account-link span{font-weight: 500;}
#back-to-login:hover, .page-footer a:hover,#order-detail #order-infos li a:hover{text-decoration: none}
#order-infos li a{margin-top: 16px}
.back-to-buy:hover{color:var(--as-grey-900);}
/* ---- Historique commande ---- */
#history #main .page-content h6,#order-follow #main .page-content h6,#order-follow .order-return,#order-slip h6{color:var(--as-grey-900);font-weight: 400}

#history .orders .order a h3,#history .orders i{color:var(--as-grey-900)}
/* ---- Créer compte ---- */
#registration .register-form > p, #identity .form-footer, #identity .form-footer, #address .form-footer {
    text-align: center
}

#registration .register-form > p > a, .addresses-footer a {
    color: var(--as-grey-900);
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid var(--as-amaranth)
}

#identity .page-content {
    padding: 32px
}

.page-registration #content {
    margin-bottom: 64px;
    display: block;
    padding: 32px
}

#registration .form-control, #identity .form-control, #address .form-control {
    border-radius: 3px;
    border: none;
    background: var(--as-grey-100)
}

#registration .form-control:focus, #identity .form-control:focus, #address .form-control:focus {
    border: 2px solid var(--as-amaranth)
}

#addresses .address {
    border-radius: 8px
}

.addresses-footer a {
    padding-bottom: 8px
}

/* ============ ACCOUNT PAGES — MOBILE ============
 * Appended at Lot 5f-mobile-account-checkout (2026-04-24).
 * Extracted from custom.css @media max-width 991.98px block (PAGES ACCOUNTS MOBILE).
 * Responsive overrides for authentication, password, registration, identity, address,
 * addresses, history, order-detail, my-account, contact, forgotten-password.
 * See DECISION_LOG.md D-009 (no nested block-comment delimiters in mobile append headers).
 */
@media (max-width: 991.98px) {
    #authentication h1, #password h1, #registration h1, #identity h1, #address h1, #addresses h1, #history h1 {
        font-size: 18px
    }

    #authentication #wrapper, #registration #wrapper, #my-account #wrapper, #identity #wrapper, #address #wrapper, #addresses #wrapper,#history #wrapper,#order-detail #wrapper,#order-follow #wrapper,#order-slip #wrapper,#module-psgdpr-gdpr #wrapper {
        padding-top: 0
    }

    #authentication .login-form .form-footer {
        text-align: center;
        margin-top: 16px
    }
    .login-form hr{margin: 16px 0;}

    .page-customer-account #content .no-account {
        padding: 25px 0
    }
    .page-authentication #content{padding:  16px}
    #authentication .form-group, #identity .form-group {
        margin-bottom: 0
    }

    #authentication .login-form {
        margin-top: 0
    }

    #authentication .page-header {
        margin-bottom: 16px;padding-top:16px;
    }
    .forgotten-password .form-fields .email{padding: 0 0 8px 0}
    .forgotten-password .form-fields .center-email-fields{margin-bottom: 0}
    .forgotten-password .form-fields .center-email-fields button{margin:0;border-radius:8px;padding: 16px 32px;height: inherit;display: inline-block;margin: 0 auto}
    .forgotten-password .form-fields .email{padding: 0 0 16px 0}
    .page-customer-account #content{padding: 32px 16px}
    #password #back-to-login{margin-top: 32px}
    #password #wrapper{padding: 0}
    #contact .contact-form{padding-top: 32px}

    #my-account h1 {
        text-align: center
    }

    #my-account .page-footer a {
        text-align: center
    }

    #identity .form-control-submit {
        margin-top: 32px
    }

    #addresses .page-content {
        margin-bottom: 32px
    }

    #identity label[for="field-newsletter"], #customer-form > div > div:nth-child(8) .form-control-comment {
        margin: 0;
        padding: 0
    }

    #identity .page-content {
        margin-bottom: 32px
    }

    #contact #content{margin-top: 0}
    #contact .contact-form h3{font-size: 18px}

    #wrapper .breadcrumb{padding-top: 16px}
    .page-customer-account .page-footer{padding-top: 16px}
}

/* ============ ACCOUNT DASHBOARD (Refonte V1 — LOT-1a) ============
 * Unified "Mon Compte" hub assembled in customer/my-account.tpl :
 * greeting head + "Mes services AlterSmoke" (module tiles via
 * displayCustomerAccount) + "Gérer mon compte" (native PS links).
 * Reuses the production dark header/footer (chrome untouched); the body is a
 * light dashboard. Tokens: alter-tokens.css. Design ref: compte/v1-final.
 * Mapping — surface=grey-100, ink=grey-900, line=grey-200, mute=grey-300,
 * red=amaranth, gradient-card=as-gradient-card.
 */

/* Widen the my-account content area (the 850px cap is for narrow form pages). */
#my-account #content,
.page-my-account #content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px var(--as-spacing-lg, 32px) 24px;
    background: transparent;
    border-radius: 0;
}

.alter-account-dashboard {
    font-family: var(--as-font-family, sans-serif);
    color: var(--as-grey-900, #0f0f0f);
}

/* ── Greeting head (PageHead) ───────────────────────────────────────────── */
.aad-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--as-spacing-lg, 32px);
    margin-bottom: 40px;
}

.aad-head__kicker {
    display: block;
    color: var(--as-amaranth, #e62249);
    font-size: 13px;
    font-weight: var(--as-fw-medium, 500);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Body id is #my-account; beat the legacy "#my-account h1{text-align:center}"
 * and ".page-customer-account h1" rules with an id-scoped, left-aligned override. */
#my-account .aad-head__title,
.aad-head__title {
    margin: 0;
    font-size: 36px;
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--as-grey-900, #0f0f0f);
    text-align: left;
}

.aad-head__subtitle {
    margin: 10px 0 0;
    color: var(--as-grey-500, #353535);
    font-size: 15px;
    line-height: 1.5;
    max-width: 540px;
}

.aad-head__rule {
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 18px;
    background: var(--as-amaranth, #e62249);
}

.aad-head__actions {
    flex-shrink: 0;
}

.aad-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--as-radius-small, 3px);
    padding: 11px 20px;
    font-size: 13px;
    font-weight: var(--as-fw-medium, 500);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--as-transition-base, 180ms ease), color var(--as-transition-base, 180ms ease);
}

.aad-btn .material-icons {
    font-size: 18px;
}

.aad-btn--ghost {
    background: transparent;
    color: var(--as-grey-900, #0f0f0f);
    border: 1px solid var(--as-grey-900, #0f0f0f);
}

.aad-btn--ghost:hover {
    background: var(--as-grey-900, #0f0f0f);
    color: var(--as-white, #fff);
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.aad-section {
    margin-bottom: 40px;
}

.aad-section__title {
    font-size: 18px;
    font-weight: var(--as-fw-medium, 500);
    color: var(--as-grey-900, #0f0f0f);
    text-align: left;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--as-grey-200, #dde1e3);
}

/* ── "Mes services" — module tiles (displayCustomerAccount) ─────────────── */
/* The module tiles ship Bootstrap col-* classes; reset them and lay the
 * services out as a responsive card grid. */
.aad-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--as-spacing-md, 16px);
    margin: 0;
}

.aad-services > a,
.aad-services > section {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* The LOT-1d subscription suggestion (col-lg-12) spans the full row and keeps
 * its own card styling (customer_account_suggestion.css). */
.aad-services > .asm-suggestion {
    grid-column: 1 / -1;
}

/* Card-ify each module tile's inner .link-item. */
.alter-account-dashboard .aad-services > a {
    display: block;
    text-decoration: none;
    /* height:auto lets the grid (align-items:stretch) size each anchor to the
     * row's tallest tile; the inner .link-item (height:100%) then fills it, so
     * service cards stay equal-height per row even when one tile is richer
     * (e.g. the loyalty tile: status pill + balance + note). */
    height: auto;
}

.alter-account-dashboard .aad-services > a .link-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 4px;
    padding: 20px 22px;
    background: var(--as-white, #fff);
    border: 1px solid var(--as-grey-200, #dde1e3);
    border-radius: var(--as-radius-main, 8px);
    color: var(--as-grey-900, #0f0f0f);
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.35;
    transition: border-color var(--as-transition-base, 180ms ease), box-shadow var(--as-transition-base, 180ms ease);
}

.alter-account-dashboard .aad-services > a:hover .link-item {
    border-color: var(--as-amaranth, #e62249);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, .06));
}

.alter-account-dashboard .aad-services > a .link-item > .material-icons {
    font-size: 26px;
    color: var(--as-amaranth, #e62249);
    margin-bottom: 6px;
}

/* Lot J follow-up (a) — de-duplicate the services-grid icon. Both psgdpr
 * ("Mes données personnelles") and sogecommerce ("Mes moyens de paiement")
 * ship the same `account_box` Material glyph, so the two tiles look identical.
 * sogecommerce fetches its tpl by absolute path (smarty->fetch on
 * _PS_MODULE_DIR_), so a theme template override would not apply — swap the
 * glyph via CSS on its stable id instead, keeping the third-party module
 * untouched. psgdpr keeps account_box; payment gets credit_card (\e870).
 * color (amaranth) + margin-bottom are inherited from the rule above. */
.alter-account-dashboard .aad-services > a#sogecommerce-wallet-link .link-item > .material-icons {
    font-size: 0; /* collapse the original "account_box" ligature text */
}
.alter-account-dashboard .aad-services > a#sogecommerce-wallet-link .link-item > .material-icons::before {
    content: "\e870"; /* credit_card */
    /* match the sibling service-tile icons: the classic parent theme renders
     * them via `#content .links a span.link-item i { font-size: 2.6rem }`, which
     * outweighs our 26px rule above (id beats classes), so the live size is
     * 2.6rem (≈41.6px). Re-apply it here since font-size:0 zeroed the box. */
    font-size: 2.6rem;
}

/* Loyalty tile gets a touch more presence (primary "service"). */
.alter-account-dashboard .aad-services > a#loyalty-link .link-item {
    background: var(--as-grey-100, #ededf3);
}

/* Unread badges (reviews / questions) + "Non lié" warning pill. */
.aad-services .agr-unread-badge,
.aad-services .atq-unread-badge {
    display: inline-block;
    margin-left: 6px;
    color: var(--as-amaranth, #e62249);
    font-weight: var(--as-fw-semibold, 600);
}

.aad-services .badge-warning.al-account-tile__badge {
    display: inline-block;
    margin-left: 6px;
    background: var(--as-warning-bg, #fef3c7);
    color: var(--as-warning, #d97706);
    font-size: 11px;
    font-weight: var(--as-fw-semibold, 600);
    padding: 2px 8px;
    border-radius: var(--as-badge-radius-pill, 999px);
}

/* Loyalty tile membership status pill (Lot J — Claude mockup `.acct-pill`).
 * Replaces the old full-width green status tile (alterloyalty_link, neutralised):
 * the loyalty link tile now carries its status as a small dotted pill. Colours
 * mirror the mockup status pills (active = soft green, soon = papaya/amber). */
.alter-account-dashboard .al-account-tile__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--as-badge-radius-pill, 999px);
    font-size: 11px;
    font-weight: var(--as-fw-semibold, 600);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}

.alter-account-dashboard .al-account-tile__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.alter-account-dashboard .al-account-tile__status--active {
    background: #ddf3e4;
    color: #0f7a3f;
}

.alter-account-dashboard .al-account-tile__status--active .al-account-tile__status-dot {
    background: #1fab5c;
}

.alter-account-dashboard .al-account-tile__status--soon {
    background: var(--as-papaya, #fff1d6);
    color: #7a5400;
}

.alter-account-dashboard .al-account-tile__status--soon .al-account-tile__status-dot {
    background: #f5b100;
}

/* ── "Gérer mon compte" — native PS link tiles, grouped ─────────────────── */
.aad-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--as-spacing-lg, 32px);
}

.aad-nav__head {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--as-grey-200, #dde1e3);
}

.aad-nav__group-title {
    display: block;
    font-size: 16px;
    font-weight: var(--as-fw-medium, 500);
    color: var(--as-grey-900, #0f0f0f);
}

.aad-nav__group-sub {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--as-grey-300, #777);
}

.alter-account-dashboard a.aad-tile {
    display: flex;
    align-items: center;
    gap: var(--as-spacing-md, 16px);
    padding: 16px 18px;
    margin-bottom: 10px;
    background: var(--as-white, #fff);
    border: 1px solid var(--as-grey-200, #dde1e3);
    border-radius: var(--as-radius-main, 8px);
    text-decoration: none;
    color: var(--as-grey-900, #0f0f0f);
    transition: border-color var(--as-transition-base, 180ms ease), box-shadow var(--as-transition-base, 180ms ease);
}

.alter-account-dashboard a.aad-tile:hover {
    border-color: var(--as-amaranth, #e62249);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, .06));
}

.aad-tile__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--as-radius-small, 3px);
    background: var(--as-grey-100, #ededf3);
    display: grid;
    place-items: center;
}

.aad-tile__icon .material-icons {
    font-size: 22px;
    color: var(--as-grey-900, #0f0f0f);
}

.aad-tile:hover .aad-tile__icon .material-icons {
    color: var(--as-amaranth, #e62249);
}

.aad-tile__body {
    flex: 1;
    min-width: 0;
}

.aad-tile__label {
    display: block;
    font-size: 15px;
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.3;
}

.aad-tile__chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--as-grey-300, #777);
}

/* ── Legal footnote ─────────────────────────────────────────────────────── */
.aad-legal {
    margin: 8px 0 0;
    text-align: center;
    color: var(--as-grey-300, #777);
    font-size: 13px;
}

/* ── Focus visibility (a11y) ────────────────────────────────────────────── */
.alter-account-dashboard a.aad-tile:focus-visible,
.alter-account-dashboard .aad-services > a:focus-visible,
.aad-btn:focus-visible {
    outline: var(--as-focus-ring, 2px solid #e62249);
    outline-offset: var(--as-focus-offset, 2px);
}

/* ============ ACCOUNT DASHBOARD — MOBILE ============ */
@media (max-width: 991.98px) {
    #my-account #content,
    .page-my-account #content {
        padding: 24px var(--as-spacing-md, 16px) 16px;
    }

    .aad-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--as-spacing-md, 16px);
        margin-bottom: 28px;
    }

    .aad-head__title {
        font-size: 26px;
    }

    .aad-head__actions {
        width: 100%;
    }

    .aad-btn--ghost {
        width: 100%;
        justify-content: center;
    }

    .aad-nav {
        grid-template-columns: 1fr;
        gap: var(--as-spacing-md-plus, 24px);
    }

    .aad-services {
        grid-template-columns: 1fr;
    }
}

/* ============ ACCOUNT SUB-PAGES (Refonte V1 — Lot J harmonisation) ============
 * Native PrestaShop account sub-screens (identity, history, order-detail,
 * order-slip, order-follow, order-return, addresses, address, discount) brought
 * up to the dashboard's editorial language (.aad-* / LOT-1a). Each refonte
 * sub-template suppresses the native centered page-header h1 and opens with the
 * shared .aad-head (kicker + hero title + rule + "← Mon compte" ghost link),
 * then lays its content into white .aap-card blocks on a transparent #content.
 * Legacy account-page rules above are id-scoped (#identity ..), so the overrides
 * here are id-scoped too where they need to win. Tokens: alter-tokens.css.
 */

/* Page root — typographic baseline (mirrors .alter-account-dashboard). */
.alter-account-page {
    font-family: var(--as-font-family, sans-serif);
    color: var(--as-grey-900, #0f0f0f);
}

/* Transparent, widened content area (the legacy 850px white-card cap is the old
 * form-page look; the refonte goes transparent + white cards like the
 * dashboard). 2-id selector beats ".page-customer-account #content". */
#identity #content,
#history #content,
#order-detail #content,
#order-slip #content,
#order-follow #content,
#order-return #content,
#addresses #content,
#address #content,
#discount #content {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 40px var(--as-spacing-lg, 32px) 24px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Hero title — beat the legacy "#identity h1{font-size:31px;text-align:center}"
 * group so .aad-head__title matches the dashboard hero. */
#identity .aad-head__title,
#history .aad-head__title,
#order-detail .aad-head__title,
#order-slip .aad-head__title,
#order-follow .aad-head__title,
#order-return .aad-head__title,
#addresses .aad-head__title,
#address .aad-head__title,
#discount .aad-head__title {
    margin: 0;
    font-size: 36px;
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.1;
    letter-spacing: .01em;
    text-align: left;
    color: var(--as-grey-900, #0f0f0f);
}

/* White content card (mirrors the dashboard service/nav tiles). */
.aap-card {
    background: var(--as-white, #fff);
    border: 1px solid var(--as-grey-200, #dde1e3);
    border-radius: var(--as-radius-main, 8px);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, .06));
    padding: var(--as-spacing-lg, 32px);
}

.aap-section {
    margin-bottom: var(--as-spacing-lg, 32px);
}

/* Optional card sub-heading + intro line (used by list/detail pages). */
.aap-card__title {
    margin: 0 0 var(--as-spacing-md, 16px);
    font-size: 17px;
    font-weight: var(--as-fw-medium, 500);
    color: var(--as-grey-900, #0f0f0f);
}

.aap-card__lead {
    margin: 0 0 var(--as-spacing-md-plus, 24px);
    color: var(--as-grey-500, #353535);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Identity / address form inside a card ──────────────────────────────── */
/* Left-align + rule off the legacy centered footer (id-scoped to beat
 * "#identity .form-footer{text-align:center}"). */
#identity .aap-card--form .form-footer,
#address .aap-card--form .form-footer {
    text-align: left;
    margin-top: var(--as-spacing-md-plus, 24px);
    padding-top: var(--as-spacing-md-plus, 24px);
    border-top: 1px solid var(--as-grey-200, #dde1e3);
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #identity #content,
    #history #content,
    #order-detail #content,
    #order-slip #content,
    #order-follow #content,
    #order-return #content,
    #addresses #content,
    #address #content,
    #discount #content {
        padding: 24px var(--as-spacing-md, 16px) 16px;
    }

    #identity .aad-head__title,
    #history .aad-head__title,
    #order-detail .aad-head__title,
    #order-slip .aad-head__title,
    #order-follow .aad-head__title,
    #order-return .aad-head__title,
    #addresses .aad-head__title,
    #address .aad-head__title,
    #discount .aad-head__title {
        font-size: 26px;
    }

    .aap-card {
        padding: var(--as-spacing-md, 16px);
    }
}

/* ── Orders : history list + order detail (Lot J-2) ─────────────────────── */

/* Tighter padding when a card wraps a full-bleed table. */
.aap-card--table {
    padding: var(--as-spacing-sm, 8px) var(--as-spacing-md-plus, 24px) var(--as-spacing-md, 16px);
}

/* order-detail .box sections → cards (beats ".page-order-detail .box", equal
 * specificity, declared later). */
.alter-account-page .box {
    background: var(--as-white, #fff);
    border: 1px solid var(--as-grey-200, #dde1e3);
    border-radius: var(--as-radius-main, 8px);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, .06));
    padding: var(--as-spacing-md-plus, 24px);
    margin-bottom: var(--as-spacing-md, 16px);
}

.alter-account-page .box h3,
.alter-account-page .box h4 {
    margin: 0 0 var(--as-spacing-md, 16px);
    font-size: 16px;
    font-weight: var(--as-fw-medium, 500);
    color: var(--as-grey-900, #0f0f0f);
}

.alter-account-page #order-infos .box:first-child strong {
    font-size: 16px;
    font-weight: var(--as-fw-medium, 500);
    color: var(--as-grey-900, #0f0f0f);
}

.alter-account-page .box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.alter-account-page .box ul li {
    padding: 4px 0;
    color: var(--as-grey-500, #353535);
    font-size: 14px;
}

.alter-account-page .box ul li strong {
    color: var(--as-grey-900, #0f0f0f);
    font-weight: var(--as-fw-medium, 500);
    margin-right: 6px;
}

.alter-account-page .addresses address {
    font-style: normal;
    color: var(--as-grey-500, #353535);
    line-height: 1.6;
    font-size: 14px;
}

/* Tables (orders list, status timeline, carriers) — clean & borderless. */
.alter-account-page .table {
    margin-bottom: 0;
    border: none;
    background: transparent;
}

.alter-account-page .table thead th {
    border: none;
    border-bottom: 2px solid var(--as-grey-200, #dde1e3);
    padding: 0 12px 12px;
    color: var(--as-grey-300, #777);
    font-size: 12px;
    font-weight: var(--as-fw-semibold, 600);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: transparent;
}

.alter-account-page .table tbody td,
.alter-account-page .table tbody th {
    border: none;
    border-bottom: 1px solid var(--as-grey-200, #dde1e3);
    padding: 14px 12px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--as-grey-900, #0f0f0f);
}

/* kill the bootstrap zebra — clean white rows + hover instead. */
.alter-account-page .table.table-striped tbody tr:nth-of-type(odd) > * {
    background: transparent;
}

.alter-account-page .table tbody tr:last-child td,
.alter-account-page .table tbody tr:last-child th {
    border-bottom: none;
}

.alter-account-page .table tbody tr {
    transition: background var(--as-transition-fast, 120ms ease);
}

.alter-account-page .table tbody tr:hover > * {
    background: var(--as-grey-100, #ededf3);
}

.alter-account-page .table tbody th[scope="row"] {
    font-weight: var(--as-fw-semibold, 600);
}

/* Order-state pill — keep the PS state colour (inline background), only refine
 * the pill shape + typography. */
.alter-account-page .label-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--as-badge-radius-pill, 999px);
    font-size: 12px;
    font-weight: var(--as-fw-semibold, 600);
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Action links (Details / Reorder). */
.alter-account-page .order-actions a,
.alter-account-page .reorder-link,
.alter-account-page .view-order-details-link {
    display: inline-block;
    color: var(--as-grey-900, #0f0f0f);
    font-weight: var(--as-fw-medium, 500);
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth, #e62249);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.alter-account-page .order-actions a + a {
    margin-left: 12px;
}

.alter-account-page .order-actions a:hover,
.alter-account-page .reorder-link:hover,
.alter-account-page .view-order-details-link:hover {
    text-decoration: none;
    color: var(--as-amaranth, #e62249);
}

.alter-account-page .table .material-icons {
    color: var(--as-grey-500, #353535);
    font-size: 20px;
    vertical-align: middle;
}

.alter-account-page .table a:hover .material-icons {
    color: var(--as-amaranth, #e62249);
}

/* Reorder button (order-detail header box). */
.alter-account-page .box .button-primary {
    display: inline-block;
    background: var(--as-amaranth, #e62249);
    color: var(--as-white, #fff);
    border-radius: var(--as-radius-main, 8px);
    padding: 10px 22px;
    font-weight: var(--as-fw-medium, 500);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    text-decoration: none;
}

.alter-account-page .box .button-primary:hover {
    background: var(--as-amaranth-hover, #c71d40);
    color: var(--as-white, #fff);
}

/* Mobile order cards (history .orders, hidden on desktop). */
.alter-account-page .orders .order {
    border-bottom: 1px solid var(--as-grey-200, #dde1e3);
    padding: var(--as-spacing-md, 16px) 0;
}

.alter-account-page .orders .order:last-child {
    border-bottom: none;
}

.alter-account-page .orders .order h3 {
    font-size: 16px;
    margin: 0 0 4px;
    color: var(--as-grey-900, #0f0f0f);
}

.alter-account-page .orders .order .date,
.alter-account-page .orders .order .total {
    font-size: 14px;
    color: var(--as-grey-500, #353535);
}

.alter-account-page .orders .order .status {
    margin-top: 6px;
}

/* ── Addresses : list + form (Lot J-3) ──────────────────────────────────── */

/* Responsive card grid (replaces the legacy bootstrap col-lg-6 columns). */
.aap-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--as-spacing-md, 16px);
}

/* Address card (.address article from block-address.tpl). */
.alter-account-page .address {
    background: var(--as-white, #fff);
    border: 1px solid var(--as-grey-200, #dde1e3);
    border-radius: var(--as-radius-main, 8px);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, .06));
    padding: var(--as-spacing-md-plus, 24px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.alter-account-page .address .address-body {
    flex: 1;
}

.alter-account-page .address h4 {
    margin: 0 0 var(--as-spacing-sm, 8px);
    font-size: 16px;
    font-weight: var(--as-fw-semibold, 600);
    color: var(--as-grey-900, #0f0f0f);
}

.alter-account-page .address address {
    font-style: normal;
    color: var(--as-grey-500, #353535);
    line-height: 1.6;
    font-size: 14px;
    margin: 0;
}

.alter-account-page .address .address-footer {
    display: flex;
    gap: var(--as-spacing-md-plus, 24px);
    margin-top: var(--as-spacing-md, 16px);
    padding-top: var(--as-spacing-md, 16px);
    border-top: 1px solid var(--as-grey-200, #dde1e3);
}

.alter-account-page .address .address-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--as-grey-900, #0f0f0f);
    font-weight: var(--as-fw-medium, 500);
    font-size: 14px;
    text-decoration: none;
}

.alter-account-page .address .address-footer a:hover {
    color: var(--as-amaranth, #e62249);
}

.alter-account-page .address .address-footer .material-icons {
    font-size: 18px;
}

/* "Create new address" CTA. */
.aap-addresses-footer {
    margin-top: var(--as-spacing-md-plus, 24px);
}

/* Solid (primary) button variant — alongside the dashboard .aad-btn--ghost.
 * Anchor-scoped so it beats the legacy ".addresses-footer a" underline rule. */
.aap-addresses-footer a.aad-btn--solid,
a.aad-btn--solid {
    background: var(--as-amaranth, #e62249);
    color: var(--as-white, #fff);
    border: 1px solid var(--as-amaranth, #e62249);
    text-decoration: none;
}

.aap-addresses-footer a.aad-btn--solid:hover,
a.aad-btn--solid:hover {
    background: var(--as-amaranth-hover, #c71d40);
    border-color: var(--as-amaranth-hover, #c71d40);
    color: var(--as-white, #fff);
}

/* ── Avoirs + bons d'achat + retours (Lot J-4) ──────────────────────────── */

/* Mobile stacked lists (credit-slips / cart-rules / order-returns, hidden on
 * desktop). Shared .aap-mobile-list hook. */
.alter-account-page .aap-mobile-list > div {
    border-bottom: 1px solid var(--as-grey-200, #dde1e3);
    padding: var(--as-spacing-md, 16px) 0;
}

.alter-account-page .aap-mobile-list > div:last-child {
    border-bottom: none;
}

.alter-account-page .aap-mobile-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alter-account-page .aap-mobile-list li {
    padding: 3px 0;
    font-size: 14px;
    color: var(--as-grey-900, #0f0f0f);
}

.alter-account-page .aap-mobile-list li strong {
    display: inline-block;
    min-width: 130px;
    color: var(--as-grey-500, #353535);
    font-weight: var(--as-fw-medium, 500);
}

/* Return detail uses native .card / .card-block blocks → cards. */
.alter-account-page .card {
    background: var(--as-white, #fff);
    border: 1px solid var(--as-grey-200, #dde1e3);
    border-radius: var(--as-radius-main, 8px);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, .06));
    margin-bottom: var(--as-spacing-md, 16px);
}

.alter-account-page .card .card-block {
    padding: var(--as-spacing-md-plus, 24px);
}

.alter-account-page .card .card-title {
    margin: 0 0 var(--as-spacing-md, 16px);
    font-size: 16px;
    font-weight: var(--as-fw-medium, 500);
    color: var(--as-grey-900, #0f0f0f);
}

.alter-account-page .card p {
    color: var(--as-grey-500, #353535);
    line-height: 1.6;
}

.alter-account-page .card p strong {
    color: var(--as-grey-900, #0f0f0f);
    font-weight: var(--as-fw-medium, 500);
}

.alter-account-page .card a {
    color: var(--as-grey-900, #0f0f0f);
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth, #e62249);
    text-underline-offset: 2px;
}

.alter-account-page .card a:hover {
    color: var(--as-amaranth, #e62249);
}

/* Empty-state / info notices — soft neutral notice (replaces the loud site-wide
 * green ".alert-info" bar for account empty states: "no orders", "no vouchers",
 * "no credit slips", "no returns"…). Scoped to .alert-info only so form
 * success/error alerts (.alert-success / .alert-danger) keep their semantics. */
.alter-account-page .alert-info,
.alter-account-page [data-alert="info"] {
    background: var(--as-grey-100, #ededf3);
    color: var(--as-grey-500, #353535);
    border: none;
    border-left: 3px solid var(--as-amaranth, #e62249);
    border-radius: var(--as-radius-small, 3px);
    padding: 14px 18px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none;
}

.alter-account-page .alert-info a,
.alter-account-page [data-alert="info"] a {
    color: var(--as-grey-900, #0f0f0f);
    font-weight: var(--as-fw-medium, 500);
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth, #e62249);
    text-underline-offset: 2px;
}