/**
 * NosJardinsEco Child V6 — Mon Compte WooCommerce
 * Layout stable via grid-template-areas.
 * Zéro style inline. Boutons via global-ui.css.
 *
 * Structure DOM réelle dans .woocommerce :
 *   1. .njeco-account-hero          (woocommerce_before_account_navigation)
 *   2. .woocommerce-MyAccount-navigation
 *   3. .njeco-account-bottom-nav    (woocommerce_after_account_navigation)
 *   4. .woocommerce-MyAccount-content
 *
 * Solution : grid-template-areas explicite pour placer chaque enfant
 * indépendamment de l'ordre DOM.
 */

/* ── 1. HERO — compact, premium ────────────────────────────── */
.njeco-account-hero {
    background: var(--color-white);
    border-bottom: 3px solid var(--color-green);
    padding: 20px var(--container-padding) 18px;
    margin-bottom: 0;
    /* grid-area déclaré en section 2 */
}
.njeco-account-hero .njeco-page-hero__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: var(--container-max);
    margin: 0 auto;
}
.njeco-account-hero__avatar {
    flex-shrink: 0;
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-deep) 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: var(--font-weight-bold); color: #fff; line-height: 1;
}
.njeco-account-hero__text {
    flex: 1;
    min-width: 0;
}
.njeco-account-hero .njeco-page-hero__title {
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    color: var(--color-text);
    margin-bottom: 2px;
}
.njeco-account-hero .njeco-page-hero__sub {
    font-size: 0.8rem;
    color: var(--color-text);
    opacity: 0.52;
    margin: 0;
}

/* ── 2. LAYOUT PRINCIPAL — grille explicite ─────────────────── */
/*
 * grid-template-areas résout l'ordre DOM sans toucher au PHP.
 * Chaque enfant est placé par son grid-area, pas par sa position dans le flux.
 */
.woocommerce-account .woocommerce {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding) var(--spacing-xl);
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "hero    hero"
        "nav     content"
        "bottom  bottom";
    gap: var(--spacing-md) var(--spacing-xl); /* row-gap md = espacement uniform hero→nav+content */
    align-items: start;
}

/* Placement explicite de chaque enfant */
.woocommerce-account .woocommerce > .njeco-account-hero          { grid-area: hero; /* pas de marge négative : évite le débordement et le chevauchement au scroll */ }
.woocommerce-MyAccount-navigation                                 { grid-area: nav; }
.woocommerce-MyAccount-content                                    { grid-area: content; min-width: 0; }
.woocommerce-account .woocommerce > .njeco-account-bottom-nav     { grid-area: bottom; }

/* Notices WooCommerce — pleine largeur dans la grille */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > ul.woocommerce-error,
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info {
    grid-column: 1 / -1;
}

/* ── 3. NAVIGATION LATÉRALE ─────────────────────────────────── */
.woocommerce-MyAccount-navigation {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /*
     * overflow: hidden est volontairement RETIRÉ ici.
     * Sur certains navigateurs, overflow:hidden sur un élément sticky
     * peut créer un nouveau contexte de formatage qui casse le sticky.
     * Le border-radius est préservé via clip-path sur les enfants si nécessaire.
     */
    overflow: clip; /* clip = ne crée pas de scroll context, préserve border-radius */
    position: sticky;
    /*
     * top = hauteur du header sticky (topbar + barre de navigation).
     * Valeur actuelle : 110px.
     * Si la nav descend sous le header, augmenter cette valeur.
     * Si elle est trop basse, réduire.
     */
    top: 110px;
    min-width: 0;
    /* Limiter la hauteur pour éviter de dépasser le bas de l'écran */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}
.woocommerce-MyAccount-navigation::before {
    content: 'Mon espace';
    display: block;
    padding: 10px 16px 8px;
    font-size: 0.67rem; font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--color-text); opacity: 0.36;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 4px 0; }
.woocommerce-MyAccount-navigation li a {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px;
    font-size: 0.85rem; font-weight: var(--font-weight-medium);
    color: var(--color-text); text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg); color: var(--color-green); padding-left: 22px; }
.woocommerce-MyAccount-navigation li.is-active a {
    background: #e8f5e9; color: var(--color-green-deep);
    font-weight: var(--font-weight-semibold);
    border-left: 3px solid var(--color-green);
    padding-left: 13px;
}

/* ── 4. BIENVENUE — barre slim (sans carte) ─────────────────── */
.njeco-account-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: none;
    border-radius: 0;
}
.njeco-account-welcome__text {
    font-size: 0.84rem; line-height: 1.55; color: var(--color-text); opacity: 0.62;
    margin: 0; flex: 1; min-width: 180px;
}
.njeco-account-welcome__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── 5. QUICKLINKS — grille resserrée ───────────────────────── */
.njeco-account-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: var(--spacing-md);
}
.njeco-account-quicklink {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 10px 13px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none; text-align: center;
    position: relative; overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.njeco-account-quicklink::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--color-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition-base);
}
.njeco-account-quicklink:hover { border-color: transparent; box-shadow: var(--shadow-sm); }
.njeco-account-quicklink:hover::before { transform: scaleX(1); }
.njeco-account-quicklink__icon {
    width: 36px; height: 36px;
    background: #e8f5e9; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; line-height: 1;
}
.njeco-account-quicklink__label { font-size: 0.76rem; font-weight: var(--font-weight-semibold); color: var(--color-text); line-height: 1.25; }

/* ── 6. AIDE — compacte ─────────────────────────────────────── */
.njeco-account-help {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;
}
.njeco-account-help__icon  { font-size: 1.5rem; flex-shrink: 0; }
.njeco-account-help__body  { flex: 1; min-width: 160px; }
.njeco-account-help__title { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0 0 3px; }
.njeco-account-help__text  { font-size: 0.79rem; line-height: 1.5; color: var(--color-text); opacity: 0.58; margin: 0; }
.njeco-account-help__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── 7. MAILLAGE BAS ─────────────────────────────────────────── */
.njeco-account-bottom-nav {
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-md);
    padding-left: 0;
    padding-right: 0;
}

/* ── 8. NOTICES WOOCOMMERCE — surcharge bande couleur native ── */
/*
 * WooCommerce applique par défaut border-top coloré (or/mauve) sur
 * .woocommerce-info, .woocommerce-message, .woocommerce-error.
 * On remplace par une bordure fine uniforme cohérente avec le design.
 */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error {
    border-top: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: none;
}
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before {
    display: none !important;  /* supprime l'icône décorative WooCommerce si présente */
}

/* ── 9. TABLEAUX COMMANDES ───────────────────────────────────── */
.woocommerce-orders-table          { width: 100%; border-collapse: collapse; font-size: 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.woocommerce-orders-table th       { background: var(--color-bg); padding: 10px 14px; text-align: left; font-size: 0.74rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--color-border); }
.woocommerce-orders-table td       { padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.woocommerce-orders-table tr:last-child td { border-bottom: none; }

/* ── 9. FORMULAIRES COMPTE ───────────────────────────────────── */
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row  { margin-bottom: var(--spacing-sm); }
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label      { display: block; font-size: 0.875rem; font-weight: var(--font-weight-medium); margin-bottom: 6px; }
.woocommerce-EditAccountForm input,
.woocommerce-address-fields input,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields select     { width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 0.9rem; font-family: var(--font-body); transition: border-color var(--transition-fast); }
.woocommerce-EditAccountForm input:focus,
.woocommerce-address-fields input:focus,
.woocommerce-EditAccountForm select:focus,
.woocommerce-address-fields select:focus { outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(52,164,46,0.12); }

/* ── Fieldset "Changement de mot de passe" ───────────────────── */
.woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    background: var(--color-bg);
}
.woocommerce-EditAccountForm fieldset legend {
    /* Retire la légende de la bordure — on la repose comme label flottant */
    float: left;
    width: 100%;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--color-text);
    opacity: 0.45;
    padding: 0 0 var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    line-height: 1;
}
/* Nécessaire après float:left sur legend pour que les form-row suivent */
.woocommerce-EditAccountForm fieldset::after {
    content: '';
    display: table;
    clear: both;
}

/* ── 10. PAGE ADRESSES ───────────────────────────────────────── */
/*
 * WooCommerce sort 2 éléments .woocommerce-Address dans .woocommerce-Addresses.
 * Il ajoute aussi les classes col2-set, u-column1, u-column2
 * qui appliquent float:left + width:48% dans woocommerce.css.
 * On neutralise ces flottants et on impose notre grille.
 */
.woocommerce-Addresses,
.woocommerce-Addresses.addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    /* Neutraliser le clearfix WooCommerce */
    overflow: visible;
}
.woocommerce-Address,
.woocommerce-Address.col2-set,
.woocommerce-Address.u-column1,
.woocommerce-Address.u-column2 {
    /* Annuler le float et la largeur imposés par WooCommerce */
    float: none !important;
    width: auto !important;
    /* Carte propre */
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-width: 0;
}
.woocommerce-Address-title,
.woocommerce-Address .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3,
.woocommerce-Address .title h2,
.woocommerce-Address .title h3 {
    font-size: 0.8rem !important;   /* écrase les styles h2 du thème parent */
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.6;
}
.woocommerce-Address-title a,
.woocommerce-Address .title a {
    font-size: 0.8rem;
    color: var(--color-green);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.woocommerce-Address-title a:hover,
.woocommerce-Address .title a:hover { color: var(--color-green-deep); text-decoration: underline; }
.woocommerce-Address address {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text);
    opacity: 0.72;
    font-style: normal;
    margin: 0;
}
/* État vide : aucune adresse enregistrée */
.woocommerce-Address address p {
    font-style: italic;
    opacity: 0.55;
    margin: 0;
}

/* ── 11. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 190px 1fr;
        grid-template-areas:
            "hero    hero"
            "nav     content"
            "bottom  bottom";
    }
}

@media (max-width: 700px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "nav"
            "content"
            "bottom";
        gap: var(--spacing-sm) 0;
        padding-top: 0;
    }

    /* Navigation horizontale sur mobile */
    .woocommerce-MyAccount-navigation {
        position: static;
        margin-top: var(--spacing-sm);
        border-radius: var(--radius-md);
    }
    .woocommerce-MyAccount-navigation::before { display: none; }
    .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; padding: 0; }
    .woocommerce-MyAccount-navigation li a { padding: 9px 14px; font-size: 0.8rem; }
    .woocommerce-MyAccount-navigation li a:hover { padding-left: 14px; }
    .woocommerce-MyAccount-navigation li.is-active a {
        padding-left: 14px;
        border-left: none;
        border-bottom: 2px solid var(--color-green);
    }

    /* Contenu — row-gap gère l'espacement */
    .woocommerce-MyAccount-content { padding-top: 0; }

    /* Welcome */
    .njeco-account-welcome { flex-direction: column; align-items: flex-start; }

    /* Quicklinks */
    .njeco-account-quicklinks { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

    /* Aide */
    .njeco-account-help { padding: var(--spacing-sm); gap: var(--spacing-sm); }

    /* Adresses — empilées sur mobile */
    .woocommerce-Addresses,
    .woocommerce-Addresses.addresses { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .njeco-account-quicklinks { grid-template-columns: 1fr 1fr; }
}