/* ============================================================
   PAGE MON COMPTE — STYLES v5
   - Système COMPLET de variables d'espacement
   - Toutes les couleurs, tailles et espacements réglables en haut
   ============================================================ */


/* ============================================================
   1) VARIABLES — TOUT SE RÈGLE ICI
   ============================================================ */
:root {

    /* --- COULEURS --- */
    --mka-primary:        #2D5BFF;
    --mka-primary-dark:   #1E40D9;
    --mka-accent:         #FF6B4A;
    --mka-success:        #10B981;
    --mka-purple:         #8B5CF6;
    --mka-bg:             #FAFBFC;
    --mka-card:           #FFFFFF;
    --mka-text:           #0F172A;
    --mka-text-muted:     #2A3328;
    --mka-border:         #E2E8F0;

    /* --- LAYOUT (arrondis & ombres) --- */
    --mka-radius:         14px;
    --mka-radius-small:   10px;
    --mka-shadow:         0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .04);
    --mka-shadow-hover:   0 4px 12px rgba(15, 23, 42, .08), 0 16px 40px rgba(15, 23, 42, .08);

    /* --- ESPACEMENTS GLOBAUX --- */
    --mka-page-padding-y:        32px;   /* Padding haut de la page entière */
    --mka-page-padding-x:        20px;   /* Padding latéral de la page */
    --mka-page-padding-bottom:   64px;   /* Padding bas de la page */

    /* --- ESPACEMENTS DU LAYOUT 2 COLONNES --- */
    --mka-menu-width:            250px;  /* Largeur du menu latéral */
    --mka-menu-content-gap:      20px;   /* Entre le menu et le contenu central */
    --mka-content-padding:       28px;   /* Padding interne du bloc contenu */

    /* --- ESPACEMENTS DU BANDEAU UTILISATEUR --- */
    --mka-userheader-padding-y:  24px;   /* Padding vertical du bandeau */
    --mka-userheader-padding-x:  28px;   /* Padding horizontal du bandeau */
    --mka-userheader-margin:     24px;   /* Espace SOUS le bandeau */
    --mka-userheader-gap:        18px;   /* Entre l'avatar et les infos */

    /* --- ESPACEMENTS DU MENU LATÉRAL --- */
    --mka-menu-padding:          10px;   /* Padding interne du menu */
    --mka-menu-item-padding-y:   11px;   /* Hauteur d'un item du menu */
    --mka-menu-item-padding-x:   13px;   /* Largeur d'un item du menu */
    --mka-menu-icon-gap:         12px;   /* Entre l'icône et le texte d'un item */

    /* --- ESPACEMENTS DU DASHBOARD INTRO --- */
    --mka-intro-margin:          24px;   /* Espace SOUS l'intro (avant les cards) */
    --mka-intro-title-gap:       4px;    /* Entre le titre et le paragraphe */

    /* --- ESPACEMENTS DES CARTES STATS --- */
    --mka-cards-gap:             12px;   /* Entre les cards stats */
    --mka-cards-margin:          28px;   /* Espace SOUS le groupe de cards */
    --mka-card-padding:          16px;   /* Padding interne d'une card */
    --mka-card-icon-size:        40px;   /* Taille du carré coloré de l'icône */
    --mka-card-icon-offset:      16px;   /* Distance entre le bord et l'icône */
    --mka-card-min-width:        170px;  /* Largeur min avant retour à la ligne */

    /* --- ESPACEMENTS DES BOUTONS D'ACTION --- */
    --mka-actions-gap:           10px;   /* Entre les boutons d'action rapide */
    --mka-button-padding-y:      11px;   /* Hauteur des boutons */
    --mka-button-padding-x:      18px;   /* Largeur des boutons */

    /* --- ESPACEMENTS DES TABLEAUX --- */
    --mka-table-cell-padding-y:  14px;
    --mka-table-cell-padding-x:  16px;
    --mka-table-margin:          20px;   /* Espace SOUS les tableaux */

    /* --- ESPACEMENTS DES FORMULAIRES --- */
    --mka-form-row-margin:       14px;   /* Entre 2 lignes de formulaire */
    --mka-form-label-margin:     6px;    /* Entre le label et son input */
    --mka-form-input-padding-y:  11px;
    --mka-form-input-padding-x:  14px;

    /* --- ESPACEMENTS DE LA PAGE ADRESSES --- */
    --mka-addresses-intro-margin:   20px;   /* Espace ENTRE le texte d'intro et les 2 cards */
    --mka-addresses-gap:            20px;   /* Entre les 2 cards (Facturation/Livraison) */
    --mka-addresses-card-padding:   22px;   /* Padding interne des cards d'adresse */
    --mka-addresses-header-margin:  14px;   /* Sous le header (titre+modifier) */
    --mka-addresses-header-gap:     8px;    /* Entre le titre et le bouton "Modifier" */

    /* --- ESPACEMENTS DE LA PAGE LOGIN --- */
    --mka-login-gap:             24px;   /* Entre les blocs Connexion/Inscription */
    --mka-login-card-padding:    28px;   /* Padding interne des blocs login */
    --mka-login-title-margin:    16px;   /* Sous le titre */
    --mka-login-text-margin:     14px;   /* Entre les paragraphes */

    /* --- ESPACEMENTS DE LA PAGE LOGIN — MOBILE (≤ 545px) --- */
    --mka-login-page-padding-x-mobile:  0px;   /* Padding latéral de la page sur mobile */
    --mka-login-card-padding-mobile:    10px;  /* Padding interne des cards sur mobile */
    --mka-login-gap-mobile:             25px;  /* Entre les cards sur mobile */

    /* --- SURCHARGE DIVI — Marges latérales de la page Mon Compte (toute la page) --- */
    /* Utilisé pour réduire les marges Divi par défaut sur tablette et mobile.
       S'applique à TOUTE la page Mon Compte (connecté + déconnecté). */
    --mka-account-page-padding-tablet:  20px;  /* Padding latéral sur tablette (≤ 921px) */
    --mka-account-page-padding-mobile:  10px;  /* Padding latéral sur mobile (≤ 545px) */

    /* --- TITRE DE PAGE (h1 "Mon compte" / "Connexion") --- */
    --mka-fs-page-title:                32px;   /* Taille du titre */
    --mka-fs-page-title-mobile:         26px;   /* Taille du titre sur mobile */
    --mka-page-title-margin-bottom:     24px;   /* Espace SOUS le titre */
    --mka-page-title-color:             var(--mka-text);
    --mka-page-title-weight:            700;

    /* --- ESPACEMENTS DE LA PAGE DÉTAIL D'UNE COMMANDE (View Order) --- */
    --mka-vieworder-section-margin:    28px;   /* Entre les grandes sections (titre/tableau/adresses) */
    --mka-vieworder-title-margin:      16px;   /* Sous chaque titre h2/h3 (Détails, Adresses) */
    --mka-vieworder-addresses-gap:     20px;   /* Entre les 2 cards adresses */
    --mka-vieworder-address-padding:   22px;   /* Padding interne d'une card adresse */
    --mka-vieworder-address-header:    14px;   /* Sous le h2 dans une card adresse */

     /* --- FONT-SIZES --- */
    --mka-fs-user-name:        20px;
    --mka-fs-user-email:       15px;
    --mka-fs-user-meta:        13px;

    --mka-fs-menu:             15px;

    --mka-fs-intro-title:      22px;
    --mka-fs-intro-text:       14px;

    --mka-fs-card-label:       15px;
    --mka-fs-card-value:       20px;
    --mka-fs-card-value-small: 15px;

    --mka-fs-button:           14px;
    --mka-fs-button-small:     14px;

    --mka-fs-table-header:     12px;
    --mka-fs-table-cell:       15px;
    --mka-fs-table-link:       15px;   /* Liens dans les cellules (numéros de commande, etc.) */

    --mka-fs-form-label:       15px;
    --mka-fs-form-input:       15px;

    --mka-fs-login-title:      22px;
    --mka-fs-login-text:       15px;

    --mka-fs-address-title:    17px;
    --mka-fs-address-text:     15px;

    --mka-fs-vieworder-title:  20px;   /* Titre "Détails de la commande" */
    --mka-fs-vieworder-meta:   14px;   /* Date, statut, etc. */
}


/* ============================================================
   2) RESET DU CONTENEUR
   ============================================================ */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--mka-page-padding-y) var(--mka-page-padding-x) var(--mka-page-padding-bottom);
    color: var(--mka-text);
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { display: none; }


/* ============================================================
   3) BANDEAU UTILISATEUR
   ============================================================ */
.mka-user-header {
    display: flex;
    align-items: center;
    gap: var(--mka-userheader-gap);
    padding: var(--mka-userheader-padding-y) var(--mka-userheader-padding-x);
    margin-bottom: var(--mka-userheader-margin);
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: var(--mka-radius);
    box-shadow: var(--mka-shadow);
    position: relative;
    overflow: hidden;
}

.mka-user-header::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60%; height: 100%;
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--mka-primary) 10%, transparent) 0%,
        color-mix(in srgb, var(--mka-primary) 5%, transparent) 40%,
        transparent 100%
    );
    pointer-events: none;
}

.mka-avatar-wrap {
    position: relative;
    width: 64px; height: 64px;
    flex-shrink: 0;
}

.mka-avatar-wrap img.mka-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mka-card);
    box-shadow: 0 0 0 2px var(--mka-primary);
    position: relative;
    z-index: 2;
}

.mka-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mka-primary), var(--mka-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    border-radius: 50%;
    z-index: 1;
}

.mka-user-info { position: relative; z-index: 1; }

.mka-user-name {
    margin: 0 0 4px;
    font-size: var(--mka-fs-user-name);
    font-weight: 700;
    color: var(--mka-text);
    line-height: 1.2;
}

.mka-user-email {
    margin: 0 0 2px;
    font-size: var(--mka-fs-user-email);
    color: var(--mka-text-muted);
}

.mka-user-meta {
    margin: 0;
    font-size: var(--mka-fs-user-meta);
    color: var(--mka-text-muted);
    opacity: .8;
}


/* ============================================================
   3-bis) TITRE DE PAGE (h1 "Mon compte" / "Connexion")
   ============================================================
   On style le H1 natif rendu par le thème (Divi : .entry-title.main_title).
   Le texte est modifié côté PHP via le filtre "the_title" (voir class-account.php).
   On ne cache pas le titre, on ne le réinjecte pas — on le restyle in-place.
   C'est l'approche WordPress / SEO la plus propre.

   Le padding latéral du titre suit les MÊMES variables que le conteneur
   des cards (.woocommerce), pour garantir un alignement parfait à tous
   les breakpoints. Si tu changes le padding du conteneur, le titre suit.
   ============================================================ */
.woocommerce-account .entry-title.main_title {
    font-size: var(--mka-fs-page-title) !important;
    font-weight: var(--mka-page-title-weight) !important;
    color: var(--mka-page-title-color) !important;
    margin: 0 auto var(--mka-page-title-margin-bottom) !important;
    padding: 0 var(--mka-page-padding-x) !important;
    line-height: 1.2 !important;
    text-align: left !important;
    border: none !important;
    max-width: 1200px;
}


/* ============================================================
   4) LAYOUT 2 COLONNES
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: var(--mka-menu-width) !important;
    float: none !important;
    margin-right: var(--mka-menu-content-gap);
    display: inline-block;
    vertical-align: top;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: calc(100% - var(--mka-menu-width) - var(--mka-menu-content-gap) - 10px) !important;
    float: none !important;
    display: inline-block;
    vertical-align: top;
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: var(--mka-radius);
    padding: var(--mka-content-padding);
    box-shadow: var(--mka-shadow);
}


/* ============================================================
   5) MENU LATÉRAL
   ============================================================ */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: var(--mka-menu-padding);
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: var(--mka-radius);
    box-shadow: var(--mka-shadow);
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    border: none !important;
    list-style: none;
    background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: var(--mka-menu-icon-gap);
    padding: var(--mka-menu-item-padding-y) var(--mka-menu-item-padding-x);
    border-radius: 9px;
    color: var(--mka-text) !important;
    font-size: var(--mka-fs-menu);
    font-weight: 500;
    text-decoration: none !important;
    transition: all .2s ease;
    border: none !important;
    background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: color-mix(in srgb, var(--mka-primary) 8%, transparent) !important;
    color: var(--mka-primary) !important;
    transform: translateX(2px);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--mka-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mka-primary) 30%, transparent);
}


/* ============================================================
   6) ICÔNES DU MENU
   ============================================================ */
.woocommerce-MyAccount-navigation ul li a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    flex-shrink: 0;
    transition: filter .2s ease;
}

.woocommerce-MyAccount-navigation ul li.is-active a::before {
    filter: brightness(0) invert(1);
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9'/%3E%3Crect x='14' y='3' width='7' height='5'/%3E%3Crect x='14' y='12' width='7' height='9'/%3E%3Crect x='3' y='16' width='7' height='5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--rewards a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
}

/* Onglet « Rétractation » (plugin wc-retractation, endpoint "retractation").
   Icône flèche retour (undo) évoquant « se rétracter / revenir en arrière ».
   Si le plugin de rétractation n'est pas actif, cette règle ne cible rien. */
.woocommerce-MyAccount-navigation-link--retractation a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E");
}


/* ============================================================
   7) DASHBOARD : intro + cards + actions
   ============================================================ */
.mka-dashboard-intro h3 {
    margin: 0 0 var(--mka-intro-title-gap);
    font-size: var(--mka-fs-intro-title);
    font-weight: 700;
    color: var(--mka-text);
}

.mka-dashboard-intro p {
    margin: 0 0 var(--mka-intro-margin);
    color: var(--mka-text-muted);
    font-size: var(--mka-fs-intro-text);
    line-height: 1.6;
}

.mka-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mka-card-min-width), 1fr));
    gap: var(--mka-cards-gap);
    margin-bottom: var(--mka-cards-margin);
    align-items: stretch;
}

.mka-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--mka-card-padding);
    padding-left: calc(var(--mka-card-icon-offset) + var(--mka-card-icon-size) + 12px);
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: 12px;
    transition: all .25s ease;
    min-height: 72px;
}

.mka-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mka-shadow-hover);
    border-color: color-mix(in srgb, var(--mka-primary) 30%, var(--mka-border));
}

.mka-stat-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--mka-card-icon-offset);
    transform: translateY(-50%);
    width: var(--mka-card-icon-size);
    height: var(--mka-card-icon-size);
    border-radius: 9px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.mka-stat--orders::before {
    background-color: color-mix(in srgb, var(--mka-primary) 10%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D5BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.mka-stat--spent::before {
    background-color: color-mix(in srgb, var(--mka-success) 12%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7c-1.5-1.9-3.7-3-6-3-4.4 0-8 3.6-8 8s3.6 8 8 8c2.3 0 4.5-1.1 6-3'/%3E%3Cline x1='3' y1='10' x2='13' y2='10'/%3E%3Cline x1='3' y1='14' x2='13' y2='14'/%3E%3C/svg%3E");
}

.mka-stat--downloads::before {
    background-color: color-mix(in srgb, var(--mka-accent) 12%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.mka-stat--last::before {
    background-color: color-mix(in srgb, var(--mka-purple) 12%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B5CF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.mka-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mka-stat-label {
    font-size: var(--mka-fs-card-label);
    color: var(--mka-text-muted);
    font-weight: 500;
    margin-bottom: 2px;
    line-height: 1.3;
    word-wrap: break-word;
}

.mka-stat-value {
    font-size: var(--mka-fs-card-value);
    font-weight: 700;
    color: var(--mka-text);
    line-height: 1.2;
    word-wrap: break-word;
}

.mka-stat-value--small {
    font-size: var(--mka-fs-card-value-small);
}


/* ============================================================
   8) BOUTONS D'ACTION RAPIDE
   ============================================================ */
.mka-quick-actions {
    display: flex;
    gap: var(--mka-actions-gap);
    flex-wrap: wrap;
    margin-bottom: 0;
}

.mka-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--mka-button-padding-y) var(--mka-button-padding-x);
    background: var(--mka-primary) !important;
    color: #fff !important;
    border-radius: var(--mka-radius-small);
    font-weight: 600;
    font-size: var(--mka-fs-button);
    text-decoration: none !important;
    transition: all .2s ease;
    border: none !important;
}

.mka-action-btn:hover {
    background: var(--mka-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mka-primary) 30%, transparent);
}

.mka-action-btn--secondary {
    background: transparent !important;
    color: var(--mka-text) !important;
    border: 1px solid var(--mka-border) !important;
}

.mka-action-btn--secondary:hover {
    background: color-mix(in srgb, var(--mka-primary) 5%, transparent) !important;
    border-color: var(--mka-primary) !important;
    color: var(--mka-primary) !important;
}


/* ============================================================
   9) SURCHARGE DIVI — boutons WooCommerce
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account #customer_login button.button,
.woocommerce-account #customer_login input[type="submit"],
.woocommerce-account #customer_login button[type="submit"] {
    background: var(--mka-primary) !important;
    background-color: var(--mka-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--mka-radius-small) !important;
    padding: var(--mka-button-padding-y) var(--mka-button-padding-x) !important;
    font-size: var(--mka-fs-button) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all .2s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.button::after,
.woocommerce-account .woocommerce-MyAccount-content button.button::after,
.woocommerce-account .woocommerce-MyAccount-content .button::after,
.woocommerce-account .woocommerce-MyAccount-content input.button::after,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]::after,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]::after,
.woocommerce-account #customer_login button.button::after,
.woocommerce-account #customer_login input[type="submit"]::after,
.woocommerce-account #customer_login button[type="submit"]::after {
    display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account #customer_login button.button:hover,
.woocommerce-account #customer_login input[type="submit"]:hover,
.woocommerce-account #customer_login button[type="submit"]:hover {
    background: var(--mka-primary-dark) !important;
    background-color: var(--mka-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mka-primary) 30%, transparent) !important;
}

/* Petits boutons dans les tableaux */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button {
    padding: 7px 14px !important;
    font-size: var(--mka-fs-button-small) !important;
    background: transparent !important;
    color: var(--mka-primary) !important;
    border: 1px solid var(--mka-border) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button:hover {
    background: var(--mka-primary) !important;
    color: #fff !important;
    border-color: var(--mka-primary) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.delete {
    color: #DC2626 !important;
    border-color: color-mix(in srgb, #DC2626 30%, var(--mka-border)) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.delete:hover {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
}

/* Forcer fond transparent des conteneurs Divi */
.woocommerce-account #main-content,
.woocommerce-account #main-content .container,
.woocommerce-account .et_pb_section,
.woocommerce-account #left-area,
.woocommerce-account .et_pb_post_content {
    background: transparent !important;
}


/* ============================================================
   9-bis) ONGLET ADRESSES
   ============================================================ */

/* Texte d'intro WooCommerce ("Les adresses suivantes seront utilisées...") */
.woocommerce-account .woocommerce-MyAccount-content .myaccount_address,
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    margin: 0 0 var(--mka-addresses-intro-margin) !important;
    font-size: var(--mka-fs-intro-text);
    color: var(--mka-text-muted);
    line-height: 1.6;
}

/* Layout 2 colonnes pour Facturation + Livraison */
.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set.addresses,
.woocommerce-account .woocommerce-MyAccount-content .addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--mka-addresses-gap) !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set.addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set.addresses::after {
    display: none !important;
}

/* Chaque carte d'adresse */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content .u-column1.col-1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2.col-2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: var(--mka-addresses-card-padding) !important;
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: var(--mka-radius);
    box-shadow: var(--mka-shadow);
}

/* Header de la carte : titre + lien "Modifier" alignés à gauche */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--mka-addresses-header-gap) !important;
    margin-bottom: var(--mka-addresses-header-margin) !important;
    padding-bottom: var(--mka-addresses-header-margin) !important;
    border-bottom: 1px solid var(--mka-border);
    text-align: left !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mka-fs-address-title) !important;
    font-weight: 700 !important;
    color: var(--mka-text) !important;
    line-height: 1.2 !important;
    text-align: left !important;
    width: 100% !important;
    border: none !important;
}.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a {
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 7px 14px !important;
    background: transparent !important;
    color: var(--mka-primary) !important;
    border: 1px solid var(--mka-border) !important;
    border-radius: var(--mka-radius-small) !important;
    font-size: var(--mka-fs-button-small) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: left !important;
    float: none !important;
    margin: 0 !important;
    transition: all .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D5BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    transition: filter .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a:hover {
    background: var(--mka-primary) !important;
    color: #fff !important;
    border-color: var(--mka-primary) !important;
    text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover::before {
    filter: brightness(0) invert(1);
}

/* Contenu de l'adresse */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    margin: 0 !important;
    padding: 0 !important;
    font-style: normal !important;
    font-size: var(--mka-fs-address-text) !important;
    line-height: 1.7 !important;
    color: var(--mka-text) !important;
    text-align: left !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address:empty::before {
    content: 'Aucune adresse enregistrée pour le moment.';
    color: var(--mka-text-muted);
    font-size: var(--mka-fs-address-text);
}

/* Page d'édition d'une adresse spécifique */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields h3 {
    margin: 0 0 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mka-text) !important;
}


/* ============================================================
   10) PAGE DE CONNEXION / INSCRIPTION
   ============================================================ */
.woocommerce-account #customer_login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mka-login-gap);
    max-width: 900px;
    margin: 0 auto;
}

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
    display: none !important;
}

.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: var(--mka-login-card-padding) !important;
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: var(--mka-radius);
    box-shadow: var(--mka-shadow);
}

.woocommerce-account #customer_login .col-1 > h2,
.woocommerce-account #customer_login .col-2 > h2 {
    margin: 0 0 var(--mka-login-title-margin) !important;
    padding: 0 !important;
    font-size: var(--mka-fs-login-title) !important;
    font-weight: 700 !important;
    color: var(--mka-text) !important;
    line-height: 1.2 !important;
    border: none !important;
}

.woocommerce-account #customer_login p:not(.form-row) {
    font-size: var(--mka-fs-login-text) !important;
    color: var(--mka-text-muted) !important;
    line-height: 1.5 !important;
    margin: 0 0 var(--mka-login-text-margin) !important;
}

.woocommerce-account #customer_login a {
    color: var(--mka-primary) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.woocommerce-account #customer_login a:hover {
    text-decoration: underline !important;
}

.woocommerce-account #customer_login .form-row {
    margin-bottom: var(--mka-form-row-margin) !important;
    padding: 0 !important;
}

.woocommerce-account #customer_login .form-row label {
    display: block !important;
    font-weight: 600 !important;
    font-size: var(--mka-fs-form-label) !important;
    color: var(--mka-text) !important;
    margin-bottom: var(--mka-form-label-margin) !important;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    font-size: var(--mka-fs-form-label) !important;
    color: var(--mka-text) !important;
    margin-bottom: var(--mka-form-row-margin) !important;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
}

.woocommerce-account #customer_login .lost_password {
    margin-top: 10px !important;
    font-size: var(--mka-fs-login-text) !important;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text {
    font-size: 12px !important;
    color: var(--mka-text-muted) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--mka-form-row-margin) !important;
}

.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"],
.woocommerce-account #customer_login input.input-text {
    width: 100% !important;
    max-width: 100% !important;
}


/* ============================================================
   11) TABLEAUX
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-downloads,
.woocommerce-account .woocommerce-MyAccount-paymentMethods,
.woocommerce-account .account-payment-methods-table {
    border: 1px solid var(--mka-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: var(--mka-card) !important;
    margin: 0 0 var(--mka-table-margin) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead tr {
    background: color-mix(in srgb, var(--mka-primary) 4%, transparent) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    background: transparent !important;
    color: var(--mka-text) !important;
    font-weight: 600 !important;
    font-size: var(--mka-fs-table-header) !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    padding: var(--mka-table-cell-padding-y) var(--mka-table-cell-padding-x) !important;
    border: none !important;
    border-bottom: 1px solid var(--mka-border) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    padding: var(--mka-table-cell-padding-y) var(--mka-table-cell-padding-x) !important;
    border: none !important;
    border-bottom: 1px solid var(--mka-border) !important;
    background: transparent !important;
    font-size: var(--mka-fs-table-cell) !important;
    color: var(--mka-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
    border-bottom: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td {
    background: color-mix(in srgb, var(--mka-primary) 3%, transparent) !important;
}

/* Force la taille de police sur toute la table des commandes
   pour neutraliser la règle WooCommerce ".woocommerce table.my_account_orders { font-size: 0.85em }"
   qui se cascade en em dans tous les enfants. */
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders,
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders th,
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders td {
    font-size: var(--mka-fs-table-cell) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders thead th {
    font-size: var(--mka-fs-table-header) !important;
}

/* Alignement centre de toutes les colonnes (en-tetes ET cellules), pour rester
   coherent avec les boutons d'action desormais centres. */
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders th,
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders td {
    text-align: center;
    vertical-align: middle;
}

/* Liens à l'intérieur des cellules (numéro de commande, etc.) */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a:not(.button):not(.woocommerce-button),
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders td a:not(.button):not(.woocommerce-button) {
    font-size: var(--mka-fs-table-link) !important;
    color: var(--mka-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a:not(.button):not(.woocommerce-button):hover,
.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders td a:not(.button):not(.woocommerce-button):hover {
    color: var(--mka-primary-dark) !important;
    text-decoration: underline !important;
}


/* ============================================================
   12) FORMULAIRES
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content .form-row,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
    margin-bottom: var(--mka-form-row-margin);
}

.woocommerce-account .woocommerce-MyAccount-content .form-row label,
.woocommerce-account .woocommerce-MyAccount-content label {
    display: block !important;
    font-weight: 600 !important;
    font-size: var(--mka-fs-form-label) !important;
    color: var(--mka-text) !important;
    margin-bottom: var(--mka-form-label-margin) !important;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"],
.woocommerce-account #customer_login input.input-text {
    width: 100% !important;
    padding: var(--mka-form-input-padding-y) var(--mka-form-input-padding-x) !important;
    border: 1px solid var(--mka-border) !important;
    border-radius: var(--mka-radius-small) !important;
    font-size: var(--mka-fs-form-input) !important;
    background: var(--mka-card) !important;
    color: var(--mka-text) !important;
    transition: all .2s ease;
    box-shadow: none !important;
    line-height: 1.5 !important;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="number"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account #customer_login input[type="text"]:focus,
.woocommerce-account #customer_login input[type="email"]:focus,
.woocommerce-account #customer_login input[type="password"]:focus,
.woocommerce-account #customer_login input.input-text:focus {
    border-color: var(--mka-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mka-primary) 15%, transparent) !important;
    outline: none !important;
}


/* ============================================================
   13) MESSAGES & NOTIFICATIONS
   ============================================================ */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice,
.woocommerce-account .woocommerce-NoticeGroup {
    padding: 14px 18px !important;
    border-radius: var(--mka-radius-small) !important;
    border: none !important;
    margin-bottom: var(--mka-form-row-margin) !important;
    font-size: 14px !important;
    background-image: none !important;
}

.woocommerce-account .woocommerce-message {
    background: color-mix(in srgb, var(--mka-success) 10%, transparent) !important;
    color: #065F46 !important;
    border-left: 3px solid var(--mka-success) !important;
}

.woocommerce-account .woocommerce-info {
    background: color-mix(in srgb, var(--mka-primary) 8%, transparent) !important;
    color: var(--mka-primary-dark) !important;
    border-left: 3px solid var(--mka-primary) !important;
}

.woocommerce-account .woocommerce-error {
    background: color-mix(in srgb, #EF4444 10%, transparent) !important;
    color: #991B1B !important;
    border-left: 3px solid #EF4444 !important;
}


/* ============================================================
   13-bis) PAGE DÉTAIL D'UNE COMMANDE (View Order)
   ============================================================ */

/* Bandeau d'info en haut de la page (numéro, date, statut) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
    margin-bottom: var(--mka-vieworder-section-margin) !important;
}

/* Titre principal "Détails de la commande" + sous-titres */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
    margin: 0 0 var(--mka-vieworder-title-margin) !important;
    padding: 0 !important;
    font-size: var(--mka-fs-vieworder-title) !important;
    font-weight: 700 !important;
    color: var(--mka-text) !important;
    line-height: 1.2 !important;
    border: none !important;
}

/* Paragraphes d'info (date, méthode de paiement, etc.) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details > p,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details > p {
    font-size: var(--mka-fs-vieworder-meta) !important;
    color: var(--mka-text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 0 var(--mka-vieworder-title-margin) !important;
}

/* Tableau récapitulatif de la commande (produits, sous-total, total) */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details,
.woocommerce-account .woocommerce-MyAccount-content table.order_details {
    border: 1px solid var(--mka-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: var(--mka-card) !important;
    margin: 0 0 var(--mka-vieworder-section-margin) !important;
    font-size: var(--mka-fs-table-cell) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details th {
    font-size: var(--mka-fs-table-cell) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
.woocommerce-account .woocommerce-MyAccount-content table.order_details td {
    font-size: var(--mka-fs-table-cell) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details thead th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details thead th {
    background: color-mix(in srgb, var(--mka-primary) 4%, transparent) !important;
    font-weight: 600 !important;
    font-size: var(--mka-fs-table-header) !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    padding: var(--mka-table-cell-padding-y) var(--mka-table-cell-padding-x) !important;
    border: none !important;
    border-bottom: 1px solid var(--mka-border) !important;
    color: var(--mka-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
.woocommerce-account .woocommerce-MyAccount-content table.order_details td {
    padding: var(--mka-table-cell-padding-y) var(--mka-table-cell-padding-x) !important;
    border: none !important;
    border-bottom: 1px solid var(--mka-border) !important;
    background: transparent !important;
    color: var(--mka-text) !important;
}

/* Footer du tableau (sous-total, total) */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot th {
    text-align: right;
    padding: var(--mka-table-cell-padding-y) var(--mka-table-cell-padding-x) !important;
    background: color-mix(in srgb, var(--mka-primary) 2%, transparent) !important;
    font-weight: 600 !important;
    border: none !important;
    border-top: 1px solid var(--mka-border) !important;
    color: var(--mka-text) !important;
    font-size: var(--mka-fs-table-cell) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot td,
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot td {
    text-align: right;
    padding: var(--mka-table-cell-padding-y) var(--mka-table-cell-padding-x) !important;
    background: color-mix(in srgb, var(--mka-primary) 2%, transparent) !important;
    border: none !important;
    border-top: 1px solid var(--mka-border) !important;
    color: var(--mka-text) !important;
    font-size: var(--mka-fs-table-cell) !important;
}

/* Dernière ligne du footer (Total final) - mise en valeur */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--mka-primary) !important;
}

/* Liens dans le tableau récap (nom du produit) */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details td a:not(.button):not(.woocommerce-button),
.woocommerce-account .woocommerce-MyAccount-content table.order_details td a:not(.button):not(.woocommerce-button) {
    font-size: var(--mka-fs-table-link) !important;
    color: var(--mka-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details td a:not(.button):not(.woocommerce-button):hover,
.woocommerce-account .woocommerce-MyAccount-content table.order_details td a:not(.button):not(.woocommerce-button):hover {
    color: var(--mka-primary-dark) !important;
    text-decoration: underline !important;
}

/* SECTION ADRESSES — Layout 2 colonnes en grid */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns,
.woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses,
.woocommerce-account .woocommerce-MyAccount-content section.col2-set.addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--mka-vieworder-addresses-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Suppression des float legacy + reset des ::before/::after */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::after,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses::after {
    display: none !important;
}

/* Chaque card adresse (facturation / livraison) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .col-1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .col-2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column--billing-address,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column--shipping-address {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: var(--mka-vieworder-address-padding) !important;
    background: var(--mka-card);
    border: 1px solid var(--mka-border);
    border-radius: var(--mka-radius);
    box-shadow: var(--mka-shadow);
}

/* Titre dans la card adresse */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column--billing-address .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column--shipping-address .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details h3 {
    margin: 0 0 var(--mka-vieworder-address-header) !important;
    padding: 0 0 var(--mka-vieworder-address-header) !important;
    font-size: var(--mka-fs-address-title) !important;
    font-weight: 700 !important;
    color: var(--mka-text) !important;
    line-height: 1.2 !important;
    border-bottom: 1px solid var(--mka-border) !important;
    text-align: left !important;
}

/* Contenu de l'adresse */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
    margin: 0 !important;
    padding: 0 !important;
    font-style: normal !important;
    font-size: var(--mka-fs-address-text) !important;
    line-height: 1.7 !important;
    color: var(--mka-text) !important;
    text-align: left !important;
    border: none !important;
}

/* Téléphone et email sous l'adresse */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--email {
    margin: 8px 0 0 !important;
    font-size: var(--mka-fs-address-text) !important;
    color: var(--mka-text-muted) !important;
}

/* Notes de la commande (si présentes) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-overview {
    margin-bottom: var(--mka-vieworder-section-margin) !important;
    padding: 18px 22px !important;
    background: color-mix(in srgb, var(--mka-primary) 4%, transparent) !important;
    border: 1px solid var(--mka-border) !important;
    border-radius: var(--mka-radius) !important;
    list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-overview li {
    margin: 0 !important;
    padding: 4px 0 !important;
    font-size: var(--mka-fs-vieworder-meta) !important;
    color: var(--mka-text) !important;
    border: none !important;
}


/* ============================================================
   14) RESPONSIVE
   ============================================================
   Breakpoints du projet :
   - Tablette : ≤ 921px
   - Mobile   : ≤ 545px
   ============================================================ */

/* === TABLETTE (≤ 921px) ===================================== */
@media (max-width: 921px) {

    /* Layout 2 colonnes → 1 colonne (menu + contenu empilés) */
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        margin-right: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 16px; }

    /* Bandeau utilisateur en colonne, centré */
    .mka-user-header {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
    }

    /* On masque le dégradé bleu décoratif sur tablette et mobile :
       avec le bandeau en colonne centrée, le rendu n'est pas terrible. */
    .mka-user-header::before {
        display: none;
    }

    /* Cards stats : 2 colonnes au lieu de 4 */
    .mka-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Page Connexion / Inscription : 1 colonne */
    .woocommerce-account #customer_login {
        grid-template-columns: 1fr;
    }

    /* Cards adresses (page Adresses) : 1 colonne */
    .woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set.addresses,
    .woocommerce-account .woocommerce-MyAccount-content .addresses {
        grid-template-columns: 1fr;
    }

    /* Cards adresses (page Détail commande) : 1 colonne */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns,
    .woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses,
    .woocommerce-account .woocommerce-MyAccount-content section.col2-set.addresses {
        grid-template-columns: 1fr;
    }

    /* Surcharge des marges Divi sur TOUTE la page Mon Compte (connecté + déconnecté).
       Divi enroule le contenu dans
       #main-content > .container > #content-area > #left-area > article > .entry-content
       avec des paddings par défaut qu'on ne peut pas modifier dans le builder.
       Pour ajuster, modifie --mka-account-page-padding-tablet en haut du fichier. */
    .woocommerce-account #main-content,
    .woocommerce-account #main-content > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce-account #main-content #content-area,
    .woocommerce-account #main-content #left-area,
    .woocommerce-account #main-content article {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce-account #main-content article .entry-content {
        padding-left: var(--mka-account-page-padding-tablet) !important;
        padding-right: var(--mka-account-page-padding-tablet) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Titre de page : même padding que le conteneur des cards pour alignement */
    .woocommerce-account .entry-title.main_title {
        padding-left: calc( var(--mka-account-page-padding-tablet) + var(--mka-page-padding-x) ) !important;
        padding-right: calc( var(--mka-account-page-padding-tablet) + var(--mka-page-padding-x) ) !important;
    }
}


/* === MOBILE (≤ 545px) ====================================== */
@media (max-width: 545px) {

    /* Cards stats : 1 colonne */
    .mka-stats-grid { grid-template-columns: 1fr; }

    /* Padding interne du contenu réduit */
    .woocommerce-account .woocommerce-MyAccount-content { padding: 18px; }

    /* Boutons quick-actions full-width */
    .mka-quick-actions { flex-direction: column; }
    .mka-action-btn { width: 100%; justify-content: center; }

    /* Titre de page : taille réduite sur mobile */
    .woocommerce-account .entry-title.main_title {
        font-size: var(--mka-fs-page-title-mobile) !important;
    }

    /* Padding interne du conteneur WooCommerce : on réduit aussi à 0
       pour que la marge globale soit pilotée uniquement par
       --mka-account-page-padding-mobile via .entry-content. */
    .woocommerce-account .woocommerce {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Espacement réduit entre les 2 cards Connexion / Inscription */
    .woocommerce-account #customer_login {
        gap: var(--mka-login-gap-mobile);
    }

    /* Padding interne réduit des cards Connexion / Inscription */
    .woocommerce-account #customer_login .col-1,
    .woocommerce-account #customer_login .col-2 {
        padding: var(--mka-login-card-padding-mobile) !important;
    }

    /* Surcharge des marges Divi sur TOUTE la page Mon Compte sur mobile.
       POUR AJUSTER L'ESPACE : modifie uniquement --mka-account-page-padding-mobile
       en haut du fichier. */
    .woocommerce-account #main-content article .entry-content {
        padding-left: var(--mka-account-page-padding-mobile) !important;
        padding-right: var(--mka-account-page-padding-mobile) !important;
    }

    /* Titre de page : même padding que le conteneur des cards pour alignement.
       Note : sur mobile, .woocommerce a son padding latéral remis à 0 (voir plus haut),
       donc le titre n'a besoin que de --mka-account-page-padding-mobile. */
    .woocommerce-account .entry-title.main_title {
        padding-left: var(--mka-account-page-padding-mobile) !important;
        padding-right: var(--mka-account-page-padding-mobile) !important;
    }
}

/* ============================================================
   PAGINATION DE "MES COMMANDES"
   ============================================================
   WooCommerce affiche une pagination SANS numéros (template
   myaccount/orders.php) : deux boutons Precedent / Suivant, rendus
   uniquement s'il y a plus d'une page. Non stylee, elle passe
   facilement inapercue sous le tableau -> on la met en valeur.

   Le nombre de commandes par page est defini cote PHP
   (MKA_Account::orders_per_page, filtre woocommerce_my_account_my_orders_query).
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination {
    /* !important : Divi masque .woocommerce-pagination (display:none) car il
       gere les paginations a sa facon sur les archives produits. On la
       reaffiche ici, uniquement dans l'espace compte. */
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 22px 0 4px;
    padding: 0;
    border: 0;
}

/* Le bouton "Suivant" est toujours pousse a droite, meme quand
   "Precedent" est absent (page 1). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--next {
    margin-left: auto;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--mka-border);
    border-radius: 999px;
    background: var(--mka-card);
    color: var(--mka-text);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button:hover {
    background: var(--mka-bg);
    border-color: var(--mka-primary);
    color: var(--mka-primary);
    transform: translateY(-1px);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button:focus-visible {
    outline: 2px solid var(--mka-primary);
    outline-offset: 2px;
}

/* Chevrons (pseudo-elements) pour indiquer le sens */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--previous::before {
    content: "\2039";
    font-size: 1.25em;
    line-height: 1;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--next::after {
    content: "\203A";
    font-size: 1.25em;
    line-height: 1;
}

@media (max-width: 545px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button {
        padding: 9px 16px;
        font-size: .85rem;
    }
}

/* ============================================================
   BOUTONS D'ACTION DANS "MES COMMANDES" (empiles en colonne)
   ============================================================
   La derniere cellule (Voir, Facture, Retractation) empile ses boutons.

   IMPORTANT : on NE met PAS display:flex sur le <td> lui-meme. Un td en
   flex n'est plus une "table-cell" : il cesse de s'etirer a la hauteur de
   la ligne, et le trait de separation (porte par la cellule) remonte sur
   les lignes qui ont moins de boutons -> desalignement des separateurs.
   On garde donc le td en cellule normale (vertical-align:middle herite de
   la regle generale) et on empile les boutons via des blocs fit-content
   centres par marges auto. La cellule reprend ainsi toute la hauteur de la
   ligne et les traits se realignent. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
    text-align: center;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .button {
    display: block;
    width: fit-content;    /* taille au contenu (bloc), pour un vrai centrage */
    min-width: 130px;      /* largeur mini pour homogeneiser les libelles courts */
    margin: 0 auto;        /* centrage horizontal */
    text-align: center;
    white-space: nowrap;
}

/* Espace entre boutons uniquement (aucune marge en haut/bas de la pile,
   pour que vertical-align:middle centre proprement le groupe). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > a + a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > a + .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .button + a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .button + .button {
    margin-top: 8px;
}

/* Sur mobile, la cellule passe deja en pleine largeur (mode responsive
   WooCommerce). */
@media (max-width: 545px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > a,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .woocommerce-button,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .button {
        min-width: 140px;
    }
}