/**
 * Modulo Account — CSS Base
 * @version 3.1.0
 */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
    --ma-primary-color:  #2c3e50;
    --ma-accent-color:   #3498db;
    --ma-bg-color:       #ffffff;
    --ma-text-color:     #333333;
    --ma-border-color:   #e8e8e8;
    --ma-border-radius:  8px;
    --ma-sidebar-width:  260px;
    --ma-tabs-height:    52px;
    --ma-sticky-offset:  32px;
}
.admin-bar { --ma-sticky-offset: 64px; }
@media (max-width: 782px) { .admin-bar { --ma-sticky-offset: 78px; } }

/* ── RESET ──────────────────────────────────────────────────── */
.ma-account-page *, .ma-login-page * { box-sizing: border-box; }
.ma-account-page ul { margin: 0; padding: 0; }

/* ── ICÔNES ─────────────────────────────────────────────────── */
.ma-icon { display: inline-flex; align-items: center; flex-shrink: 0; }

/* ── EN-TÊTE COMMUN ─────────────────────────────────────────── */
.ma-account-header__welcome strong { color: var(--ma-accent-color); }
.ma-account-header__last-visit { font-size: 12px; color: #999; margin: 4px 0 0; }

/* ── DASHBOARD — image + contenu ───────────────────────────── */
.ma-dashboard-header-img { margin-bottom: 20px; }
.ma-dashboard-header-img img { width: 100%; height: auto; border-radius: var(--ma-border-radius); }
.ma-dashboard-custom-content { margin-bottom: 20px; font-size: 14px; color: var(--ma-text-color); }

/* ── ENCARTS ────────────────────────────────────────────────── */
.ma-encart {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ma-border-radius);
    margin-bottom: 12px;
    font-size: 14px;
    border: 1px solid transparent;
}
.ma-encart--info    { background: #eaf4fb; border-color: #b8ddf5; color: #1a6fa8; }
.ma-encart--success { background: #edfaf1; border-color: #b4e8cb; color: #2d7a4f; }
.ma-encart--warning { background: #fef9e7; border-color: #f9e79f; color: #9a6f00; }
.ma-encart--current-order { background: #fff8e1; border-color: #ffe082; color: #795600; }
.ma-encart--last-order    { background: #f0f9f4; border-color: #a8d5ba; color: #276843; }

.ma-encart__title  { display: block; font-weight: 700; margin-bottom: 2px; }
.ma-encart__body   { flex: 1; }
.ma-encart__icon   { flex-shrink: 0; opacity: 0.8; }
.ma-encart__link   { font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; color: inherit; opacity: 0.8; }
.ma-encart__link:hover { opacity: 1; text-decoration: underline; }

/* ── PAGE CONNEXION ─────────────────────────────────────────── */
.ma-login-page { background: var(--ma-login-bg, #f5f7fa); min-height: 100%; }

/* Split */
.ma-login-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px;
}
.ma-login-split__col { padding: 0 36px; }
.ma-login-split__divider { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; }
.ma-login-split__divider::before, .ma-login-split__divider::after { content:''; flex:1; width:1px; background: var(--ma-border-color); }
.ma-login-split__divider span { padding: 8px 0; font-size: 12px; color: #aaa; text-transform: uppercase; }

/* Tabs */
.ma-login-tabs-wrapper { max-width: 460px; margin: 0 auto; padding: 48px 24px; }
.ma-login-tabs__nav { display: flex; border-bottom: 2px solid var(--ma-border-color); margin-bottom: 28px; }
.ma-login-tab { flex:1; padding: 12px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-size: 14px; font-weight: 500; color: #888; transition: color .15s, border-color .15s; }
.ma-login-tab:hover { color: var(--ma-accent-color); }
.ma-login-tab--active { color: var(--ma-accent-color); border-bottom-color: var(--ma-accent-color); }
.ma-login-panel[hidden] { display: none; }

/* Centered */
.ma-login-centered { max-width: 440px; margin: 0 auto; padding: 48px 24px; }
.ma-login-title { font-size: 20px; font-weight: 700; color: var(--ma-primary-color); margin: 0 0 24px; }
.ma-login-register-link { font-size: 13px; text-align: center; margin-top: 16px; color: #666; }
.ma-login-register-link a { color: var(--ma-accent-color); text-decoration: none; }

/* ── FORMULAIRES ────────────────────────────────────────────── */
.ma-form__field { margin-bottom: 16px; }
.ma-form__field label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 5px; }
.ma-form__input { width: 100%; padding: 10px 14px; border: 1px solid var(--ma-border-color); border-radius: var(--ma-border-radius); font-size: 14px; color: var(--ma-text-color); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.ma-form__input:focus { border-color: var(--ma-accent-color); box-shadow: 0 0 0 3px rgba(52,152,219,.12); }
.ma-form__input-wrapper { position: relative; }
.ma-form__input-wrapper .ma-form__input { padding-right: 42px; }
.ma-form__toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #aaa; padding: 4px; transition: color .15s; }
.ma-form__toggle-password:hover { color: var(--ma-accent-color); }
.ma-form__row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ma-form__row--between { justify-content: space-between; }
.ma-form__checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer; }
.ma-form__lost-password { font-size: 13px; color: var(--ma-accent-color); text-decoration: none; }
.ma-form__lost-password:hover { text-decoration: underline; }
.ma-form__hint { font-size: 12px; color: #888; margin-bottom: 14px; }

/* ── BOUTONS ────────────────────────────────────────────────── */
.ma-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: none; border-radius: var(--ma-border-radius); cursor: pointer; font-size: 14px; font-weight: 600; transition: background .15s, transform .1s; text-decoration: none; }
.ma-btn--primary { background: var(--ma-accent-color); color: #fff; }
.ma-btn--primary:hover { background: var(--ma-primary-color); color: #fff; }
.ma-btn--primary:active { transform: scale(.98); }
.ma-btn--full { width: 100%; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ma-login-split { grid-template-columns: 1fr; padding: 24px 16px; }
    .ma-login-split__col { padding: 0; }
    .ma-login-split__col + .ma-login-split__col { margin-top: 24px; }
    .ma-login-split__divider { flex-direction: row; padding: 16px 0; }
    .ma-login-split__divider::before, .ma-login-split__divider::after { flex:1; width:auto; height:1px; }
    .ma-login-split__divider span { padding: 0 12px; }
}

/* ── ENCART PRODUITS (promo / nouveautés) ───────────────────── */
.ma-encart-products { margin-bottom: 24px; }
.ma-encart-products__title { font-size: 15px; font-weight: 700; color: var(--ma-primary-color); margin: 0 0 14px; }
.ma-encart-products__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }

.ma-product-card { display: flex; flex-direction: column; border: 1px solid var(--ma-border-color); border-radius: var(--ma-border-radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; background: #fff; }
.ma-product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.ma-product-card__thumb { position: relative; aspect-ratio: 1; overflow: hidden; background: #f5f5f5; }
.ma-product-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-product-card__img--placeholder { width: 100%; height: 100%; background: #eee; }
.ma-product-card__badge { position: absolute; top: 7px; right: 7px; background: var(--ma-accent-color); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: .04em; }
.ma-product-card__body { padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ma-product-card__name { font-size: 12px; font-weight: 600; color: var(--ma-text-color); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ma-product-card__price { font-size: 12px; color: var(--ma-accent-color); font-weight: 700; }
.ma-product-card__price del { color: #aaa; font-weight: 400; margin-right: 3px; }

/* ── CARNET D'ADRESSES ──────────────────────────────────────── */
.ma-addresses__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.ma-addresses__title { font-size: 1.2em; font-weight: 700; margin: 0; color: var(--ma-primary-color); }

.ma-addresses__empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Grille cartes */
.ma-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.ma-address-card {
    border: 1px solid var(--ma-border-color);
    border-radius: var(--ma-border-radius);
    padding: 16px;
    background: var(--ma-bg-color);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s;
}
.ma-address-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.ma-address-card--default { border-color: var(--ma-accent-color); background: color-mix(in srgb, var(--ma-accent-color) 4%, white); }

.ma-address-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ma-accent-color);
    background: color-mix(in srgb, var(--ma-accent-color) 12%, white);
    padding: 3px 8px;
    border-radius: 20px;
    width: fit-content;
}
.ma-address-card__label {
    font-weight: 700;
    font-size: 15px;
    color: var(--ma-primary-color);
    margin: 0;
}
.ma-address-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--ma-text-color);
    flex: 1;
    line-height: 1.5;
}
.ma-address-card__phone {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #666;
}
.ma-address-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--ma-border-color);
    padding-top: 10px;
}

/* Formulaire adresse */
.ma-address-form { max-width: 640px; }
.ma-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.ma-form-row { display: flex; flex-direction: column; gap: 4px; }
.ma-form-row--full { grid-column: 1 / -1; }
.ma-form-row--checkbox { margin: 6px 0 16px; }
.ma-form-row--actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ma-form__label { font-size: 13px; font-weight: 600; color: #555; }
.ma-form__hint  { font-weight: 400; color: #999; font-size: 12px; }
.ma-form__required { color: #e74c3c; }
.ma-form__input, .ma-form__select {
    padding: 9px 12px;
    border: 1px solid var(--ma-border-color);
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.ma-form__input:focus, .ma-form__select:focus {
    outline: none;
    border-color: var(--ma-accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-accent-color) 15%, transparent);
}
.ma-form__checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ma-form__checkbox-label input { width: 16px; height: 16px; accent-color: var(--ma-accent-color); }

/* Boutons */
.ma-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1;
}
.ma-btn--primary { background: var(--ma-accent-color); color: #fff; border-color: var(--ma-accent-color); }
.ma-btn--primary:hover { filter: brightness(1.1); color: #fff; }
.ma-btn--ghost { background: transparent; color: var(--ma-text-color); border-color: var(--ma-border-color); }
.ma-btn--ghost:hover { background: #f5f5f5; }
.ma-btn--danger { background: #fdf0f0; color: #c0392b; border-color: #f5c6c6; }
.ma-btn--danger:hover { background: #c0392b; color: #fff; }
.ma-btn--sm { padding: 6px 12px; font-size: 12px; }

@media (max-width: 600px) {
    .ma-form-grid { grid-template-columns: 1fr; }
    .ma-form-row--full { grid-column: unset; }
}

/* ═══════════════════════════════════════════════════════════
   PROFIL AMÉLIORÉ
   ═══════════════════════════════════════════════════════════ */

.ma-profile {
    max-width: 680px;
}

/* Stats */
.ma-profile__stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ma-bg-color, #fff);
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: var(--ma-border-radius, 8px);
    margin-bottom: 24px;
    overflow: hidden;
}
.ma-profile__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 12px;
}
.ma-profile__stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ma-accent-color, #3498db);
    line-height: 1;
}
.ma-profile__stat-label {
    font-size: 12px;
    color: #888;
    text-align: center;
}
.ma-profile__stat-sep {
    width: 1px;
    height: 40px;
    background: var(--ma-border-color, #e8e8e8);
}

/* Sections du formulaire */
.ma-profile__section {
    background: var(--ma-bg-color, #fff);
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: var(--ma-border-radius, 8px);
    padding: 20px 24px;
    margin-bottom: 16px;
}
.ma-profile__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ma-primary-color, #2c3e50);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ma-border-color, #e8e8e8);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ma-profile__section-title svg {
    color: var(--ma-accent-color, #3498db);
    flex-shrink: 0;
}

/* Grille champs */
.ma-profile__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .ma-profile__fields { grid-template-columns: 1fr; }
}
.ma-profile__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ma-profile__field--full {
    grid-column: 1 / -1;
}
.ma-profile__field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ma-text-color, #333);
}
.ma-profile__field input {
    padding: 9px 12px;
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: calc( var(--ma-border-radius, 8px) - 2px );
    font-size: 14px;
    background: #fff;
    color: var(--ma-text-color, #333);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.ma-profile__field input:focus {
    outline: none;
    border-color: var(--ma-accent-color, #3498db);
    box-shadow: 0 0 0 3px rgba(52,152,219,.12);
}
.ma-profile__hint {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* Bouton submit */
.ma-profile__submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.ma-profile__submit button {
    padding: 10px 28px;
    background: var(--ma-accent-color, #3498db);
    color: #fff;
    border: none;
    border-radius: var(--ma-border-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.ma-profile__submit button:hover {
    opacity: .88;
}

/* ═══════════════════════════════════════════════════════════
   DRAG & DROP BLOCS DASHBOARD (admin)
   ═══════════════════════════════════════════════════════════ */

.ma-sortable-blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ma-sortable-block {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 14px;
    cursor: default;
}
.ma-sortable-block__handle {
    cursor: grab;
    font-size: 18px;
    color: #bbb;
    line-height: 1;
    user-select: none;
}
.ma-sortable-block__handle:active { cursor: grabbing; }
.ma-sortable-block.ui-sortable-helper {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    border-color: #aaa;
}
.ma-sortable-block.ui-sortable-placeholder {
    background: #f5f5f5;
    border: 2px dashed #ddd;
    visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   ENCARTS COMMANDE — design carte avec miniature
   ═══════════════════════════════════════════════════════════ */

.ma-order-encart {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ma-bg-color, #fff);
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: var(--ma-border-radius, 8px);
    text-decoration: none;
    color: var(--ma-text-color, #333);
    transition: box-shadow .18s, border-color .18s;
    margin-bottom: 12px;
}
.ma-order-encart:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    border-color: var(--ma-accent-color, #3498db);
}
.ma-order-encart--current {
    border-left: 3px solid var(--ma-order-processing, #3b82f6);
    background: linear-gradient(to right, rgba(59,130,246,.04), transparent 40%);
}
.ma-order-encart--last {
    border-left: 3px solid var(--ma-order-completed, #10b981);
    background: linear-gradient(to right, rgba(16,185,129,.04), transparent 40%);
}

/* Miniature */
.ma-order-encart__thumb {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}
.ma-order-encart__thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: calc( var(--ma-border-radius, 8px) - 2px );
    display: block;
}
.ma-order-encart__thumb-count {
    position: absolute;
    bottom: -4px;
    right: -6px;
    background: var(--ma-primary-color, #2c3e50);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    line-height: 1.6;
}

/* Infos */
.ma-order-encart__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ma-order-encart__number {
    font-weight: 700;
    font-size: 14px;
    color: var(--ma-text-color, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ma-order-encart__date {
    font-size: 12px;
    color: #999;
}

/* Droite */
.ma-order-encart__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.ma-order-encart__total {
    font-weight: 700;
    font-size: 15px;
    color: var(--ma-text-color, #333);
}
.ma-order-encart__badge {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.ma-order-encart__view {
    font-size: 12px;
    font-weight: 600;
    color: var(--ma-accent-color, #3498db);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   AVATAR — fallback initiale colorée
   ═══════════════════════════════════════════════════════════ */

.ma-avatar__initials {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   TÉLÉCHARGEMENTS EN CARTES
   ═══════════════════════════════════════════════════════════ */

.ma-downloads__empty {
    text-align: center;
    padding: 48px 24px;
    color: #aaa;
}
.ma-downloads__empty svg {
    display: block;
    margin: 0 auto 12px;
    opacity: .4;
}

.ma-downloads__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ma-download-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ma-bg-color, #fff);
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: var(--ma-border-radius, 8px);
    padding: 14px 16px;
    transition: box-shadow .18s;
}
.ma-download-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.ma-download-card__media {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}
.ma-download-card__media img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: calc( var(--ma-border-radius, 8px) - 2px );
}
.ma-download-card__icon-placeholder {
    width: 56px;
    height: 56px;
    border-radius: calc( var(--ma-border-radius, 8px) - 2px );
    background: var(--ma-border-color, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

.ma-download-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ma-download-card__product {
    font-weight: 700;
    font-size: 14px;
    color: var(--ma-text-color, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ma-download-card__file {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ma-download-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.ma-download-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #aaa;
}

.ma-download-card__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ma-accent-color, #3498db);
    color: #fff;
    border-radius: calc( var(--ma-border-radius, 8px) - 2px );
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
    white-space: nowrap;
}
.ma-download-card__btn:hover {
    opacity: .85;
    color: #fff;
}

@media (max-width: 500px) {
    .ma-download-card { flex-wrap: wrap; }
    .ma-download-card__btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   CARROUSEL ENCARTS PRODUITS — CSS scroll-snap
   ═══════════════════════════════════════════════════════════ */

.ma-encart-products {
    margin-bottom: 24px;
}

.ma-encart-products__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ma-encart-products__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ma-text-color, #333);
    margin: 0;
    letter-spacing: -.01em;
}

/* Boutons nav */
.ma-carousel-nav {
    display: flex;
    gap: 6px;
}
.ma-carousel-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ma-border-color, #e8e8e8);
    background: var(--ma-bg-color, #fff);
    color: var(--ma-text-color, #555);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0;
    line-height: 1;
}
.ma-carousel-btn:hover {
    background: var(--ma-accent-color, #3498db);
    border-color: var(--ma-accent-color, #3498db);
    color: #fff;
}
.ma-carousel-btn:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* Le carrousel */
.ma-encart-products__carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    padding-bottom: 4px;          /* espace ombre */
}
.ma-encart-products__carousel::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

/* Carte produit */
.ma-product-card {
    flex: 0 0 calc(50% - 6px);   /* 2 visibles par défaut */
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--ma-text-color, #333);
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: var(--ma-border-radius, 8px);
    overflow: hidden;
    background: var(--ma-bg-color, #fff);
    transition: box-shadow .18s, transform .18s;
    display: block;
}
.ma-product-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

/* Sur desktop : 3 cartes visibles (1/3 chacune) */
@media (min-width: 640px) {
    .ma-product-card {
        flex: 0 0 calc(33.333% - 8px);
    }
}
@media (min-width: 900px) {
    .ma-product-card {
        flex: 0 0 calc(25% - 9px);
    }
}

.ma-product-card__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}
.ma-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.ma-product-card:hover .ma-product-card__img {
    transform: scale(1.04);
}
.ma-product-card__img--placeholder {
    width: 100%;
    height: 100%;
    background: var(--ma-border-color, #e8e8e8);
}

.ma-product-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--ma-accent-color, #3498db);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: .04em;
}

.ma-product-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ma-product-card__name {
    font-size: 13px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.ma-product-card__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--ma-accent-color, #3498db);
}
.ma-product-card__price del {
    color: #aaa;
    font-weight: 400;
    margin-right: 4px;
}

/* ── Dots indicateurs carrousel ─────────────────────────── */
.ma-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
.ma-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: var(--ma-border-color, #e8e8e8);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s, width .2s;
    flex-shrink: 0;
}
.ma-carousel-dot--active {
    background: var(--ma-accent-color, #3498db);
    width: 18px;           /* pill quand actif */
    border-radius: 4px;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONNEXION — fond image, overlay, logo, split premium
   ═══════════════════════════════════════════════════════════ */

/* Variables avec fallbacks */
.ma-login-page {
    --ma-login-bg-image:    none;
    --ma-login-bg-size:     cover;
    --ma-login-bg-repeat:   no-repeat;
    --ma-login-overlay:     transparent;
    --ma-login-form-bg:     #ffffff;
    --ma-login-form-radius: var(--ma-border-radius, 8px);
    --ma-login-logo-width:  180px;
    --ma-login-split-bg:    var(--ma-primary-color, #2c3e50);
    --ma-login-split-image: none;

    position: relative;
    min-height: 100vh;
    background-color: var(--ma-login-bg, #f5f7fa);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Fond image ─────────────────────────────── */
.ma-login-page__bg {
    position: absolute;
    inset: 0;
    background-image: var(--ma-login-bg-image);
    background-size: var(--ma-login-bg-size);
    background-repeat: var(--ma-login-bg-repeat);
    background-position: center;
    z-index: 0;
}

/* ── Overlay ────────────────────────────────── */
.ma-login-page__overlay {
    position: absolute;
    inset: 0;
    background: var(--ma-login-overlay);
    z-index: 1;
}

/* Tous les enfants directs au-dessus de l'overlay */
.ma-login-page > *:not(.ma-login-page__bg):not(.ma-login-page__overlay) {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ── Logo ───────────────────────────────────── */
.ma-login-logo,
.ma-login-logo-center {
    display: block;
    margin-bottom: 24px;
}
.ma-login-logo img,
.ma-login-logo-center img {
    max-width: var(--ma-login-logo-width);
    height: auto;
    display: block;
}
.ma-login-logo-center {
    text-align: center;
}
.ma-login-logo-center img { margin: 0 auto; }

/* ── Titres ─────────────────────────────────── */
.ma-login-heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--ma-text-color, #1a1a1a);
    margin: 0 0 6px;
    text-align: center;
}
.ma-login-subheading {
    font-size: 15px;
    color: #888;
    margin: 0 0 24px;
    text-align: center;
}

/* ── Formulaire box ─────────────────────────── */
.ma-login-tabs-wrapper,
.ma-login-centered {
    background: var(--ma-login-form-bg, #fff);
    border-radius: var(--ma-login-form-radius);
    padding: 40px;
    width: 100%;
    max-width: 480px;
    margin: 32px auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
}

/* ── Mode Split ─────────────────────────────── */
.ma-login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}
.ma-login-split--login-only {
    grid-template-columns: 1fr 1fr;
}

/* Panneau gauche */
.ma-login-split__left {
    background: var(--ma-login-split-bg);
    background-image: var(--ma-login-split-image);
    background-size: cover;
    background-position: center;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ma-login-split__left::after {
    /* Légère vignette en bas pour lisibilité */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.25) 0%, transparent 60%);
    pointer-events: none;
}
.ma-login-split__logo { margin-bottom: 32px; }
.ma-login-split__logo img { max-width: var(--ma-login-logo-width); }
.ma-login-split__title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}
.ma-login-split__subtitle {
    font-size: 16px;
    opacity: .85;
    margin: 0 0 24px;
    position: relative;
    z-index: 1;
}
.ma-login-split__content {
    font-size: 15px;
    opacity: .9;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
.ma-login-split__content ul { padding-left: 20px; margin: 8px 0; }
.ma-login-split__placeholder {
    position: relative;
    z-index: 1;
}
.ma-login-split__site-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}
.ma-login-split__site-desc {
    font-size: 15px;
    opacity: .75;
}

/* Panneau droit (formulaires) */
.ma-login-split__right {
    background: var(--ma-login-form-bg, #fff);
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

/* Responsive split */
@media (max-width: 768px) {
    .ma-login-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ma-login-split__left {
        padding: 32px 24px;
        min-height: 160px;
    }
    .ma-login-split__right {
        padding: 32px 24px;
    }
    .ma-login-tabs-wrapper,
    .ma-login-centered {
        padding: 28px 20px;
        margin: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   IMAGE DE FOND FORMULAIRE
   ═══════════════════════════════════════════════════════════ */

/* Variable par défaut = none */
.ma-login-page {
    --ma-login-form-image: none;
}

/* Quand une image est définie — s'active via la variable */
.ma-login-tabs-wrapper:has(> *),
.ma-login-centered {
    /* appliqué uniquement si la variable est définie (non-none) par PHP */
}

/* Sélecteur universel : si --ma-login-form-image est fourni par PHP */
.ma-login--tabs .ma-login-tabs-wrapper,
.ma-login--centered .ma-login-centered {
    background-image: var(--ma-login-form-image);
    background-size: cover;
    background-position: center;
}

/* Quand image de fond présente : adapter les éléments internes */
.ma-login-page[style*="--ma-login-form-image: url"] .ma-login-tabs-wrapper,
.ma-login-page[style*="--ma-login-form-image: url"] .ma-login-centered {
    background-color: transparent;
}

/* Ciblage via classe JS ajoutée si image présente */
.ma-login-has-form-image .ma-login-tabs-wrapper,
.ma-login-has-form-image .ma-login-centered {
    box-shadow: 0 12px 48px rgba(0,0,0,.35);
}

/* Champs de saisie semi-transparents */
.ma-login-has-form-image .ma-form__field label,
.ma-login-has-form-image .ma-form__checkbox,
.ma-login-has-form-image .ma-form__lost-password,
.ma-login-has-form-image .ma-login-title,
.ma-login-has-form-image .ma-login-heading,
.ma-login-has-form-image .ma-login-subheading,
.ma-login-has-form-image .ma-login-tabs__nav .ma-login-tab,
.ma-login-has-form-image .ma-login-register-link {
    color: #fff;
}

.ma-login-has-form-image .ma-form__input {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
.ma-login-has-form-image .ma-form__input::placeholder {
    color: rgba(255, 255, 255, .55);
}
.ma-login-has-form-image .ma-form__input:focus {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .7);
    outline: none;
}

.ma-login-has-form-image .ma-form__toggle-password {
    color: rgba(255, 255, 255, .7);
}

/* Overlay sombre sur la box pour lisibilité */
.ma-login-has-form-image .ma-login-tabs-wrapper,
.ma-login-has-form-image .ma-login-centered {
    position: relative;
}
.ma-login-has-form-image .ma-login-tabs-wrapper::before,
.ma-login-has-form-image .ma-login-centered::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}
.ma-login-has-form-image .ma-login-tabs-wrapper > *,
.ma-login-has-form-image .ma-login-centered > * {
    position: relative;
    z-index: 1;
}

/* Onglets sur fond image */
.ma-login-has-form-image .ma-login-tab {
    color: rgba(255,255,255,.7);
    border-bottom-color: rgba(255,255,255,.2);
}
.ma-login-has-form-image .ma-login-tab--active {
    color: #fff;
    border-bottom-color: var(--ma-accent-color, #3498db);
}

/* Logo sur fond image */
.ma-login-has-form-image .ma-login-logo-center img {
    filter: brightness(0) invert(1);
    opacity: .9;
}

/* ═══════════════════════════════════════════════════════════
   MES ADRESSES — facturation + livraison en cartes
   ═══════════════════════════════════════════════════════════ */

.ma-my-addresses { max-width: 720px; }

.ma-my-addresses__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}
.ma-my-addresses__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--ma-text-color, #1a1a1a);
}
.ma-my-addresses__carnet-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ma-accent-color, #3498db);
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid currentColor;
    border-radius: var(--ma-border-radius, 8px);
    transition: background .15s, color .15s;
}
.ma-my-addresses__carnet-link:hover {
    background: var(--ma-accent-color, #3498db);
    color: #fff;
}

/* Grille 2 colonnes desktop, 1 colonne mobile */
.ma-my-addresses__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 600px) {
    .ma-my-addresses__grid { grid-template-columns: 1fr; }
}

/* Carte adresse */
.ma-addr-card {
    background: var(--ma-bg-color, #fff);
    border: 1px solid var(--ma-border-color, #e8e8e8);
    border-radius: var(--ma-border-radius, 8px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow .18s;
    position: relative;
}
.ma-addr-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

/* Liseré coloré selon le type */
.ma-addr-card--billing  { border-top: 3px solid var(--ma-primary-color, #2c3e50); }
.ma-addr-card--shipping { border-top: 3px solid var(--ma-accent-color, #3498db); }

/* Badge type */
.ma-addr-card__type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888;
}

/* Corps adresse */
.ma-addr-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-style: normal;
    flex: 1;
}
.ma-addr-card__line {
    font-size: 14px;
    color: var(--ma-text-color, #333);
    display: flex;
    align-items: center;
    gap: 5px;
}
.ma-addr-card__line--name {
    font-weight: 700;
    font-size: 15px;
}
.ma-addr-card__line--country { color: #888; font-size: 13px; }
.ma-addr-card__line--phone,
.ma-addr-card__line--email   { color: #666; font-size: 13px; margin-top: 4px; }
.ma-addr-card__icon          { color: #aaa; flex-shrink: 0; }

/* État vide */
.ma-addr-card__empty {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px 0;
}
.ma-addr-card__empty p {
    font-size: 13px;
    color: #aaa;
    margin: 0;
}

/* Footer de la carte */
.ma-addr-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Bouton modifier */
.ma-addr-card__edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ma-accent-color, #3498db);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid var(--ma-accent-color, #3498db);
    border-radius: calc( var(--ma-border-radius, 8px) - 2px );
    transition: background .15s, color .15s;
    align-self: flex-start;
}
.ma-addr-card__edit-btn:hover {
    background: var(--ma-accent-color, #3498db);
    color: #fff;
}

/* Lien vers carnet */
.ma-addr-card__carnet-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #999;
    text-decoration: none;
    transition: color .15s;
}
.ma-addr-card__carnet-link:hover { color: var(--ma-accent-color, #3498db); }

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE ÉDITION ADRESSE
   ═══════════════════════════════════════════════════════════ */

.ma-edit-address { max-width: 640px; }

/* Override styles WooCommerce dans le formulaire d'adresse */
.ma-edit-address .woocommerce-address-fields__field-wrapper .form-row {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ma-edit-address .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ma-text-color, #333);
    margin-bottom: 6px;
}
.ma-edit-address .form-row .input-text,
.ma-edit-address .form-row select,
.ma-edit-address .form-row input[type="text"],
.ma-edit-address .form-row input[type="tel"],
.ma-edit-address .form-row input[type="email"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ma-border-color, #e8e8e8) !important;
    border-radius: calc( var(--ma-border-radius, 8px) - 2px ) !important;
    font-size: 14px !important;
    background: var(--ma-bg-color, #fff) !important;
    color: var(--ma-text-color, #333) !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.ma-edit-address .form-row .input-text:focus,
.ma-edit-address .form-row input:focus,
.ma-edit-address .form-row select:focus {
    border-color: var(--ma-accent-color, #3498db) !important;
    box-shadow: 0 0 0 3px rgba(52,152,219,.12) !important;
}
.ma-edit-address .form-row abbr[title] {
    color: #e74c3c;
    text-decoration: none;
}