/* ==========================================================================
   ESPACE « MON COMPTE » — SOCLE / DESIGN SYSTEM
   --------------------------------------------------------------------------
   Toujours chargé sur les pages compte (dépendance de account.css, cf.
   functions.account.php). Contient :
     0. Tokens (custom properties) — la charte du compte, réutilisable partout
     1. Layout 2 colonnes
     2. Navigation latérale
     3. Contenu : typographie de base
     4. Composants partagés (.bs-acc-*) consommés par les fichiers feature
     5. Notices WooCommerce
     6. Responsive
   Charte : Inter / ABC Prophet, vert #195C45, radius 10px, crème #FBFAF6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens — désormais GLOBAUX dans main.css (:root, chargé partout).
      Plus de redéclaration ici : les fichiers account-*.css consomment
      directement var(--bs-*).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Layout 2 colonnes (nav à gauche, contenu à droite)
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    box-sizing: border-box;
}

/* :has() pour ne cibler que le bloc compte (navigation + contenu) et pas l'autre
   div.woocommerce qui n'enveloppe que les notices (.woocommerce-message), présente
   notamment sur /mon-compte/view-subscription/. */
.woocommerce-account .site-content .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--bs-gap);
    align-items: start;
    padding: var(--bs-gap);
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--bs-font);
    color: var(--bs-ink);
}

/* La page compte partage body.page-template-template-sign avec la page
   mot-de-passe perdu, qui impose `#content > .woocommerce { max-width: 1600px }`
   (account.css, spécificité 0,1,2,1 grâce à l'ID #content).
   On surcharge avec 0,1,3,1 (les deux classes du body) — sans !important. */
body.woocommerce-account.page-template-template-sign #content > .woocommerce {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--bs-gap);
    padding-right: var(--bs-gap);
}

/* Le thème injecte parfois un .woocommerce vide juste avant : on le neutralise. */
.woocommerce-account .site-content .woocommerce:empty {
    display: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   2. Navigation latérale
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: 30px;
    background: var(--bs-cream);
    border-radius: var(--bs-radius);
    padding: 16px;
    /* Neutralise le float + width % de Storefront (woocommerce.css @media min-width:768px).
       Spécificité (0,0,2,0) > (0,0,1,0) : la grille gère la largeur de la colonne. */
    float: none;
    width: auto;
    margin-right: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link {
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--bs-radius-sm);
    font: 400 15px/20px var(--bs-font);
    color: var(--bs-ink);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Icône Font Awesome devant chaque entrée (remplace les chevrons legacy).
   Double family pour couvrir FA5 et FA6 ; poids 900 = solid. */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    content: "\f111"; /* fallback (cercle) si l'endpoint n'est pas mappé */
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f015"; }

/* home */
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before { content: "\f291"; }

/* shopping-basket */
.woocommerce-account .woocommerce-MyAccount-navigation-link--subscriptions a::before { content: "\f021"; }

/* sync */
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f3c5"; }

/* map-marker-alt */
.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\f09d"; }

/* credit-card */
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; }

/* user */
.woocommerce-account .woocommerce-MyAccount-navigation-link--my-bodycheck a::before { content: "\f004"; }

/* heart */
.woocommerce-account .woocommerce-MyAccount-navigation-link--clients-bodycheck a::before { content: "\f21e"; }

/* heartbeat */
.woocommerce-account .woocommerce-MyAccount-navigation-link--code-promo a::before { content: "\f02b"; }

/* tag */
.woocommerce-account .woocommerce-MyAccount-navigation-link--clients a::before { content: "\f0c0"; }

/* users */
.woocommerce-account .woocommerce-MyAccount-navigation-link--client-search-by-product a::before { content: "\f002"; }

/* search */
.woocommerce-account .woocommerce-MyAccount-navigation-link--shared-cart a::before { content: "\f07a"; }

/* shopping-cart */
.woocommerce-account .woocommerce-MyAccount-navigation-link--renewals a::before { content: "\f01e"; }

/* redo */
.woocommerce-account .woocommerce-MyAccount-navigation-link--contract a::before { content: "\f573"; }

/* file-signature */
.woocommerce-account .woocommerce-MyAccount-navigation-link--documents a::before { content: "\f07b"; }

/* folder */
.woocommerce-account .woocommerce-MyAccount-navigation-link--my-virtual-stock-products a::before { content: "\f1b3"; }

/* cubes */
.woocommerce-account .woocommerce-MyAccount-navigation-link--my-e-wallet a::before { content: "\f51e"; }

/* coins */
.woocommerce-account .woocommerce-MyAccount-navigation-link--sponsorship a::before { content: "\f06b"; }

/* gift */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }

/* sign-out-alt */
.woocommerce-account .woocommerce-MyAccount-navigation-link--user-switching-switch-back a::before { content: "\f362"; }

/* exchange-alt */

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus {
    background: var(--bs-hover);
    color: var(--bs-green);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--bs-green-tint);
    color: var(--bs-green);
    font-weight: 600;
}

/* Déconnexion : détachée visuellement en bas de liste. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--bs-ink-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: var(--bs-grey);
    color: var(--bs-ink);
}

/* --------------------------------------------------------------------------
   3. Contenu — typographie de base
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content {
    position: relative;
    min-width: 0;
    font: 400 16px/24px var(--bs-font);
    color: var(--bs-ink);
    /* Neutralise le float + width % de Storefront. */
    width: auto;
    float: none;
    margin-right: 0;
}

.woocommerce-account .woocommerce-MyAccount-content p {
    margin: 0 0 18px;
}

.woocommerce-account .woocommerce-MyAccount-content p:last-child {
    margin-bottom: 0;
}

/* Titres de section internes aux pages (h2/h3) — base commune. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font: 500 22px/26px var(--bs-font-display);
    color: var(--bs-ink);
    margin: 0 0 18px;
}

/* Salutation : on met en valeur le « Bonjour … » via le <strong>. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:not(.shared_cart_p) {
    font: 500 26px/32px var(--bs-font-display);
    color: var(--bs-ink);
    margin-bottom: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type strong {
    font-weight: 500;
}

/* Le « (vous n'êtes pas … ? Déconnexion) » reste discret. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type a {
    font: 400 14px/20px var(--bs-font);
}

/* Liens courants dans le contenu */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--bs-green);
    text-decoration: underline;
    transition: color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: var(--bs-green-dark);
}

/* Bloc « suggestions » mis en avant en encart crème. */
.woocommerce-account #suggestions {
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--bs-cream);
    border-radius: var(--bs-radius);
    font: 400 15px/22px var(--bs-font);
    color: var(--bs-ink-muted);
}

/* --------------------------------------------------------------------------
   4. COMPOSANTS PARTAGÉS (.bs-acc-*)
      Briques réutilisables par les fichiers account-*.css. Les pages
      feature appliquent ces classes (ou héritent des styles génériques WC
      ci-dessous) plutôt que de redéfinir boutons/tables/cartes localement.
   -------------------------------------------------------------------------- */

/* ----- Boutons --------------------------------------------------------- */

/* Base commune à tous les boutons du compte. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.bs-acc-btn {
    display: inline-block;
    background: var(--bs-green);
    color: #FFF;
    border: 1px solid var(--bs-green);
    border-radius: 10px;
    padding: 15px 45px;
    font: 600 15px/100% var(--bs-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.bs-acc-btn:hover {
    background: var(--bs-green-dark);
    border-color: var(--bs-green-dark);
    color: #FFF;
}

/* Variante secondaire : contour, fond transparent. */
.bs-acc-btn--ghost {
    background: transparent;
    color: var(--bs-ink);
    border-color: var(--bs-ink);
}

.bs-acc-btn--ghost:hover {
    background: var(--bs-grey);
    border-color: var(--bs-ink);
    color: var(--bs-ink);
}

/* ----- Carte / encart --------------------------------------------------- */

.bs-acc-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    padding: 25px;
}

.bs-acc-card--cream {
    background: var(--bs-cream);
    border-color: transparent;
}

/* ----- Badge / pastille ------------------------------------------------- */

.bs-acc-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bs-green-tint);
    color: var(--bs-green);
    border-radius: 6px;
    font: 600 12px/1.2 var(--bs-font);
    white-space: nowrap;
}

/* ----- Champs de formulaire (inputs / select / textarea) --------------- */

.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="number"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="search"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.bs-acc-field {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    font: 400 16px/20px var(--bs-font);
    color: var(--bs-ink);
    box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.bs-acc-field:focus {
    border-color: var(--bs-green);
    outline: none;
}

/* ----- Tableaux (commandes, renouvellements, etc.) --------------------- */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.bs-acc-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    border-radius: var(--bs-radius);
    overflow: hidden;
    background: var(--bs-surface);
    font: 400 15px/20px var(--bs-font);
    color: var(--bs-ink);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th,
.bs-acc-table thead th {
    background: var(--bs-cream);
    color: var(--bs-ink);
    font: 600 14px/18px var(--bs-font);
    text-align: left;
    padding: 14px 16px;
    border: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td,
.bs-acc-table tbody td {
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--bs-border);
    vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--bs-border);
    font-weight: 600;
}

/* ----- Pagination ------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination ul {
    border: 0;
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination ul li {
    border: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination ul li a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination ul li span {
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-sm);
    padding: 8px 14px;
    color: var(--bs-ink);
    background: var(--bs-surface);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination ul li span.current,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination ul li a:hover {
    background: var(--bs-green);
    border-color: var(--bs-green);
    color: #FFF;
}

/* ----- Modales Bootstrap (contrats, bons d'achat, …) -------------------
   Scopé body.woocommerce-account (et non au contenu) pour rester valide si
   Bootstrap déplace la modale en fin de <body>. */

body.woocommerce-account .modal-content {
    border: 0;
    border-radius: var(--bs-radius);
    font-family: var(--bs-font);
    color: var(--bs-ink);
    overflow: hidden;
}

body.woocommerce-account .modal-header {
    border-bottom: 1px solid var(--bs-border);
    padding: 20px 25px;
}

body.woocommerce-account .modal-title {
    font: 500 20px/24px var(--bs-font-display);
    color: var(--bs-ink);
}

body.woocommerce-account .modal-body {
    padding: 25px;
    font: 400 15px/22px var(--bs-font);
    color: var(--bs-ink);
}

body.woocommerce-account .modal-footer {
    border-top: 1px solid var(--bs-border);
    padding: 16px 25px;
    gap: 10px;
}

body.woocommerce-account .modal-footer .btn {
    border: 1px solid transparent;
    border-radius: var(--bs-radius);
    padding: 12px 28px;
    font: 500 15px/17px var(--bs-font);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .modal-footer .btn-primary {
    background: var(--bs-green);
    border-color: var(--bs-green);
    color: #FFF;
}

body.woocommerce-account .modal-footer .btn-primary:hover {
    background: var(--bs-green-dark);
    border-color: var(--bs-green-dark);
}

body.woocommerce-account .modal-footer .btn-secondary {
    background: transparent;
    border-color: var(--bs-ink);
    color: var(--bs-ink);
}

body.woocommerce-account .modal-footer .btn-secondary:hover {
    background: var(--bs-grey);
}

/* --------------------------------------------------------------------------
   5. Notices WooCommerce (succès / erreur / info)
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    border-radius: var(--bs-radius);
    border: 0;
    border-left: 4px solid var(--bs-green);
    background: var(--bs-green-tint);
    color: var(--bs-green);
    font: 400 15px/22px var(--bs-font);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    border-left-color: var(--bs-error);
    background: var(--bs-error-bg);
    color: var(--bs-error);
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .woocommerce-account .site-content .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }

    /* Même spécificité boostée que l'override max-width pour battre le padding 15px. */
    body.woocommerce-account.page-template-template-sign #content > .woocommerce {
        padding-left: 30px;
        padding-right: 30px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        position: static;
        top: auto;
        max-width: 100%;
        overflow: auto;
    }

    /* Nav en bandeau horizontal scrollable au-dessus du contenu. */
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation-link a {
        white-space: nowrap;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 767px) {
    .woocommerce-account .site-content .woocommerce:has(.woocommerce-MyAccount-navigation) {
        padding: 20px 10px;
        gap: 20px;
    }

    body.woocommerce-account.page-template-template-sign #content > .woocommerce {
        padding-left: 10px;
        padding-right: 10px;
    }

    .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
        font-size: 22px;
        line-height: 26px;
    }

    .woocommerce-account .woocommerce-MyAccount-content .button,
    .woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
    .woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
    .bs-acc-btn {
        width: 100%;
    }

    /* Tableaux : passage en cartes empilées (le markup WC ajoute data-title). */
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
        display: none;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--bs-border);
        border-radius: var(--bs-radius);
        overflow: hidden;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        border-top: 0;
        border-bottom: 1px solid var(--bs-border);
        text-align: right;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        text-align: left;
        color: var(--bs-ink-muted);
    }
}

/* --------------------------------------------------------------------------
   Boutons d'actions des commandes — espacement
   Liste « Commandes » (cellule Actions) + page détail view-order (ligne Actions).
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot th.order-actions--heading + td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}