/* ==========================================================================
   Mon compte / Espace client
   Habillage visuel de la page WooCommerce "Mon compte" (page-mon-compte.php
   + shortcode [woocommerce_my_account]) — repris de
   claude-design-reference/espace client/Espace client.dc.html.
   Cible uniquement les classes natives WooCommerce (connexion, inscription,
   navigation de compte, commandes, adresses, détails du compte,
   téléchargements, messages) : aucune fonctionnalité n'est recréée ici.
   ========================================================================== */

/* --------------------------------------------------------------------
   Conteneur de page (page-mon-compte.php)
   -------------------------------------------------------------------- */
.mon-compte {
    background-color: var(--universim-black);
    padding: clamp(28px, 5vh, 64px) clamp(18px, 4vw, 64px) clamp(56px, 9vh, 110px);
}

.mon-compte__container {
    max-width: 1440px;
    margin: 0 auto;
}

.mon-compte__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(18px, 2.6vh, 28px);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.36);
}

.mon-compte__breadcrumb a {
    color: rgba(255, 255, 255, 0.36);
    transition: color var(--universim-transition);
}

.mon-compte__breadcrumb a:hover,
.mon-compte__breadcrumb a:focus-visible {
    color: var(--universim-gold);
}

.mon-compte__breadcrumb [aria-current="page"] {
    color: rgba(255, 255, 255, 0.62);
}

/* --------------------------------------------------------------------
   Grille nav + contenu — uniquement quand la sidebar de compte existe
   réellement (utilisateur connecté). L'état déconnecté (formulaire de
   connexion/inscription) partage le même conteneur .woocommerce mais
   n'a pas de navigation : le body ne porte alors pas .logged-in, donc
   aucune grille n'est appliquée et .woocommerce reste un simple bloc.
   -------------------------------------------------------------------- */
.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    gap: clamp(22px, 3.4vw, 56px);
    align-items: start;
}

/* --------------------------------------------------------------------
   Navigation de compte (myaccount/navigation.php, non surchargé)
   -------------------------------------------------------------------- */
/* Spécificité (.woocommerce-account + classe) volontaire : neutralise
   woocommerce-layout.css, qui flotte nav/contenu en 30%/68% avec la même
   paire de sélecteurs (.woocommerce-account .woocommerce-MyAccount-*) —
   une spécificité plus faible ici serait perdue face à cette règle native
   malgré un chargement plus tardif. float:none + width:auto laissent la
   grille (.woocommerce-account.logged-in .woocommerce) dimensionner
   réellement les deux colonnes.
   grid-column/grid-row explicites : sans ça, le placement automatique de
   ces deux éléments précis (nav <nav> + <div> suivant) inverse leurs
   colonnes dans Chrome (vérifié dans le navigateur — nav hérite de la
   largeur de la 2ᵉ colonne et le contenu de la 1ʳᵉ, sans lien avec
   float/position). Fixer la position lève l'ambiguïté. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 100px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    grid-column: 2;
    grid-row: 1;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.woocommerce-MyAccount-navigation-link {
    position: relative;
}

.woocommerce-MyAccount-navigation-link a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px 13px 20px;
    border-radius: 3px;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.35s ease, background-color 0.35s ease;
}

.woocommerce-MyAccount-navigation-link a::before {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.34);
    transition: color 0.35s ease;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before { content: '\25C7'; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: '\25A4'; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: '\2193'; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: '\25CE'; }
.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: '\25C8'; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: '\233E'; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: '\23FB'; }

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus-visible {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.022);
}

.woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--universim-gold);
    background-color: rgba(255, 255, 255, 0.045);
    font-weight: 500;
}

.woocommerce-MyAccount-navigation-link.is-active a::before {
    color: var(--universim-gold);
}

/* Filet doré vertical à gauche de l'item actif (desktop uniquement). */
.woocommerce-MyAccount-navigation-link.is-active a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-color: var(--universim-gold);
}

/* "Se déconnecter" (toujours le dernier item, cf. wc_get_account_menu_items)
   séparé par un filet, discret, sans icône colorée même actif. */
.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    color: rgba(255, 255, 255, 0.42);
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before {
    color: var(--universim-gold);
}

/* Masqué par défaut (desktop) : Assets/JS/mon-compte-nav.js insère ce
   bouton dans le DOM à toutes les largeurs, seule la règle mobile
   ci-dessous (@media max-width:900px) le rend visible. Sans ce reset de
   base, il s'afficherait sans habillage sur desktop. */
.mon-compte-nav__toggle {
    display: none;
}

@media (max-width: 900px) {
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Colonne ET ligne explicites : sans la remise à "auto" de grid-row
       (posé à 1 pour les deux au niveau desktop, plus haut), la navigation
       et le contenu restaient superposés dans la même cellule de grille
       une fois passés en une seule colonne — c'est ce qui faisait passer
       le titre de section ("Mes commandes"...) sous les onglets au lieu
       de s'afficher après. */
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        grid-column: 1;
        grid-row: auto;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        position: static;
        top: auto;
        margin-bottom: 24px;
    }

    /* --------------------------------------------------------------
       Bouton "section actuelle" (ajouté par Assets/JS/mon-compte-nav.js).
       Cible uniquement .mon-compte-nav--enhanced (classe posée par le
       script une fois le bouton inséré) : sans JS, la liste reste une
       vraie navigation verticale toujours utilisable (repli), jamais la
       barre horizontale à défilement d'avant — qui débordait et pouvait
       recouvrir le titre.
       -------------------------------------------------------------- */
    .mon-compte-nav__toggle {
        display: none;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 6px;
        cursor: pointer;
        font-family: Outfit, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--universim-gold);
        text-align: left;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .mon-compte-nav__toggle:hover,
    .mon-compte-nav__toggle:focus-visible {
        border-color: rgba(255, 201, 60, 0.4);
    }

    .mon-compte-nav__toggle-arrow {
        flex: 0 0 auto;
        color: rgba(255, 255, 255, 0.45);
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .woocommerce-MyAccount-navigation.mon-compte-nav--enhanced.is-open .mon-compte-nav__toggle-arrow {
        transform: rotate(180deg);
        color: var(--universim-gold);
    }

    .woocommerce-MyAccount-navigation.mon-compte-nav--enhanced .mon-compte-nav__toggle {
        display: flex;
    }

    /* Liste repliée sous le bouton, dans le flux normal de la page (pas
       de popover en position absolue) : son ouverture pousse simplement
       le titre/contenu vers le bas, sans jamais les recouvrir. */
    .woocommerce-MyAccount-navigation.mon-compte-nav--enhanced ul {
        display: none;
        margin-top: 8px;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.015);
    }

    .woocommerce-MyAccount-navigation.mon-compte-nav--enhanced.is-open ul {
        display: flex;
    }

    .woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 8px;
        padding-top: 10px;
    }
}

/* --------------------------------------------------------------------
   En-tête de section (injecté par universim_account_content_header(),
   hook woocommerce_account_content) + contenu
   -------------------------------------------------------------------- */
.woocommerce-MyAccount-content {
    min-width: 0;
}

.mc-content-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(12px, 2vw, 32px);
    padding-bottom: clamp(18px, 2.6vh, 28px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin-bottom: clamp(26px, 4vh, 44px);
}

.mc-content-header__text {
    min-width: 0;
}

.mc-content-header__kicker {
    font-family: Outfit, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
    margin-bottom: 10px;
}

.mc-content-header__title {
    margin: 0;
    font-family: Outfit, sans-serif;
    font-weight: 200;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--universim-white);
}

.mc-content-header__intro {
    margin: 0 0 4px auto;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.46);
    max-width: 46ch;
}

@media (max-width: 640px) {
    .mc-content-header__intro {
        margin-left: 0;
        max-width: none;
    }
}

/* --------------------------------------------------------------------
   Messages WooCommerce (wc_print_notices — succès/erreur/info)
   -------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    list-style: none;
    margin: 0 0 clamp(20px, 3vh, 28px);
    padding: 16px 20px;
    border-radius: 3px;
    border: 1px solid;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

/* Icône native WooCommerce (police "WooCommerce", ::before positionné en
   absolute par WooCommerce lui-même) : sans le padding-left généreux du
   style WooCommerce d'origine (retiré ci-dessus au profit d'un padding
   uniforme), elle se superposait au début du texte. Hors charte (bleu
   WooCommerce) et non nécessaire à la lisibilité : retirée proprement,
   le texte garde sa vraie marge via le padding uniforme ci-dessus. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    content: none;
}

.woocommerce-message {
    background-color: rgba(127, 209, 160, 0.08);
    border-color: rgba(127, 209, 160, 0.35);
    color: #cdeedc;
}

.woocommerce-error {
    background-color: rgba(224, 106, 106, 0.08);
    border-color: rgba(224, 106, 106, 0.35);
    color: #f3c7c7;
}

.woocommerce-error li {
    list-style: none;
}

.woocommerce-info {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72);
}

/* Liens simples dans le texte d'un message (ex. "Confirmer et se
   déconnecter", "Renvoyer" — sans classe .button/.wc-forward). */
.woocommerce-message a:not(.button):not(.wc-forward),
.woocommerce-error a:not(.button):not(.wc-forward),
.woocommerce-info a:not(.button):not(.wc-forward) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-message a:not(.button):not(.wc-forward):hover,
.woocommerce-error a:not(.button):not(.wc-forward):hover,
.woocommerce-info a:not(.button):not(.wc-forward):hover {
    color: var(--universim-gold);
}

.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button,
.woocommerce-message a.wc-forward,
.woocommerce-info a.wc-forward {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 60, 0.34);
    background-color: rgba(255, 201, 60, 0.05);
    color: var(--universim-gold);
    font-family: Outfit, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--universim-transition), color var(--universim-transition);
}

.woocommerce-message a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-message a.wc-forward:hover,
.woocommerce-info a.wc-forward:hover {
    background-color: var(--universim-gold);
    color: var(--universim-black);
}

/* --------------------------------------------------------------------
   Tableau de bord (woocommerce/myaccount/dashboard.php, surchargé)
   -------------------------------------------------------------------- */
.mc-dashboard {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 4vh, 44px);
}

.mc-dashboard__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(14px, 2vw, 28px);
    padding-bottom: clamp(22px, 3.4vh, 34px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mc-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-stat__label {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}

.mc-stat__value {
    font-family: Outfit, sans-serif;
    font-size: clamp(19px, 1.8vw, 26px);
    font-weight: 300;
    line-height: 1.25;
    color: var(--universim-white);
}

.mc-stat__note {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.4);
}

.mc-dashboard__shortcuts {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* 4 colonnes = les 4 <span> enfants dans leur ordre naturel (icône, titre,
   texte, flèche) : pas besoin de leur assigner un grid-column un par un,
   ni d'un conteneur flex intermédiaire pour regrouper icône+titre. */
.mc-shortcut {
    cursor: pointer;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding: clamp(20px, 3vh, 26px) clamp(4px, 1vw, 14px);
    display: grid;
    grid-template-columns: 34px minmax(0, 0.85fr) minmax(0, 1.15fr) 28px;
    align-items: center;
    gap: clamp(10px, 2vw, 28px);
    text-align: left;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.4s ease;
}

.mc-shortcut:hover,
.mc-shortcut:focus-visible {
    background-color: rgba(255, 255, 255, 0.028);
}

.mc-shortcut__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: inline-grid;
    place-items: center;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: border-color 0.4s ease, color 0.4s ease;
}

.mc-shortcut__title {
    font-family: Outfit, sans-serif;
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--universim-white);
}

.mc-shortcut__text {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.46);
}

.mc-shortcut__arrow {
    font-family: Outfit, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    text-align: right;
    transition: color 0.4s ease, transform 0.4s ease;
}

.mc-shortcut:hover .mc-shortcut__icon {
    border-color: rgba(255, 201, 60, 0.5);
    color: var(--universim-gold);
}

.mc-shortcut:hover .mc-shortcut__arrow {
    color: var(--universim-gold);
    transform: translateX(4px);
}

/* Icône sur 2 lignes (titre + texte empilés à sa droite), flèche masquée
   (plus la place de lui réserver une colonne dédiée). */
@media (max-width: 640px) {
    .mc-shortcut {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: 4px;
    }

    .mc-shortcut__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
    }

    .mc-shortcut__title {
        grid-column: 2;
        grid-row: 1;
    }

    .mc-shortcut__text {
        grid-column: 2;
        grid-row: 2;
    }

    .mc-shortcut__arrow {
        display: none;
    }
}

/* --------------------------------------------------------------------
   Commandes (myaccount/orders.php, non surchargé) — table native
   (shop_table_responsive + data-title) restylée en lignes, transformée
   en cartes empilées sous 600px via le mécanisme déjà fourni par
   WooCommerce (data-title -> ::before).
   -------------------------------------------------------------------- */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-orders-table__header {
    padding: 0 clamp(4px, 1vw, 14px) 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    text-align: left;
    font-weight: 400;
}

.woocommerce-orders-table__row td,
.woocommerce-orders-table__row th {
    padding: clamp(16px, 2.4vh, 22px) clamp(4px, 1vw, 14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-weight: 400;
    text-align: left;
    transition: background-color 0.4s ease;
}

.woocommerce-orders-table__row:hover td,
.woocommerce-orders-table__row:hover th {
    background-color: rgba(255, 255, 255, 0.022);
}

.woocommerce-orders-table__cell-order-number a {
    font-family: Outfit, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--universim-white);
}

.woocommerce-orders-table__cell-order-date {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.5);
}

.woocommerce-orders-table__cell-order-total {
    font-family: Outfit, sans-serif;
    font-size: 15px;
    color: var(--universim-white);
}

.woocommerce-orders-table__cell-order-status {
    font-size: 12.5px;
}

.woocommerce-orders-table__cell-order-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    vertical-align: middle;
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: #7fd1a0; }
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before { background-color: #7fd1a0; }
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { color: var(--universim-gold); }
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before { background-color: var(--universim-gold); }
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: rgba(255, 255, 255, 0.6); }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: #e08a8a; }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before { background-color: #e08a8a; }

.woocommerce-orders-table__cell-order-actions a {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 60, 0.34);
    background-color: rgba(255, 201, 60, 0.05);
    color: var(--universim-gold);
    font-family: Outfit, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    margin: 3px 6px 3px 0;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.woocommerce-orders-table__cell-order-actions a:hover,
.woocommerce-orders-table__cell-order-actions a:focus-visible {
    background-color: var(--universim-gold);
    color: var(--universim-black);
}

.woocommerce-pagination {
    display: flex;
    gap: 12px;
    margin-top: clamp(18px, 2.6vh, 26px);
}

.woocommerce-pagination a {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    font-family: Outfit, sans-serif;
    font-size: 13px;
    text-decoration: none;
    transition: border-color var(--universim-transition), color var(--universim-transition);
}

.woocommerce-pagination a:hover {
    border-color: var(--universim-gold);
    color: var(--universim-gold);
}

/* En dessous de 600px, WooCommerce empile déjà chaque <td> en ligne
   "label: valeur" (shop_table_responsive) : on l'habille en carte. */
@media (max-width: 600px) {
    .woocommerce-orders-table thead {
        display: none;
    }

    .woocommerce-orders-table,
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tr {
        display: block;
        width: 100%;
    }

    .woocommerce-orders-table__row {
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

    .woocommerce-orders-table__row td,
    .woocommerce-orders-table__row th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-align: right;
    }

    .woocommerce-orders-table__row td:last-child,
    .woocommerce-orders-table__row th:last-child {
        border-bottom: 0;
    }

    .woocommerce-orders-table__row td::before,
    .woocommerce-orders-table__row th::before {
        content: attr(data-title);
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.34);
        text-align: left;
    }

    .woocommerce-orders-table__cell-order-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* --------------------------------------------------------------------
   Détail d'une commande (myaccount/view-order.php, non surchargé)
   -------------------------------------------------------------------- */
.woocommerce-order .order-number,
.woocommerce-order .order-date,
.woocommerce-order .order-status {
    color: var(--universim-gold);
    font-weight: 500;
}

.woocommerce-order-details,
.woocommerce-customer-details {
    margin-top: clamp(26px, 4vh, 40px);
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-OrderUpdates h2 {
    font-family: Outfit, sans-serif;
    font-weight: 300;
    font-size: clamp(19px, 1.8vw, 24px);
    color: var(--universim-white);
    margin: 0 0 18px;
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    color: rgba(255, 255, 255, 0.78);
}

.woocommerce-table--order-details thead th {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
    font-weight: 400;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    color: var(--universim-white);
}

.woocommerce-table--order-details .product-name a {
    color: var(--universim-white);
}

.woocommerce-customer-details address {
    font-style: normal;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.74);
}

.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(18px, 3vw, 40px);
}

.woocommerce-OrderUpdates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.woocommerce-OrderUpdate-inner {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
}

.woocommerce-OrderUpdate-meta {
    margin: 0 0 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.4);
}

.woocommerce-OrderUpdate-description p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.woocommerce-order .woocommerce-button,
a.order-again {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 60, 0.34);
    background-color: rgba(255, 201, 60, 0.05);
    color: var(--universim-gold);
    font-family: Outfit, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--universim-transition), color var(--universim-transition);
}

.woocommerce-order .woocommerce-button:hover,
a.order-again:hover {
    background-color: var(--universim-gold);
    color: var(--universim-black);
}

/* --------------------------------------------------------------------
   Téléchargements (myaccount/downloads.php, non surchargé)
   -------------------------------------------------------------------- */
.woocommerce-MyAccount-downloads-file a {
    color: var(--universim-gold);
}

/* État vide (téléchargements ou commandes) : rendu via
   wc_print_notice(..., 'notice') -> .woocommerce-info commun, sans
   distinction possible entre les deux en CSS pur — icône neutre plutôt
   qu'un pictogramme "téléchargement" qui n'aurait pas de sens partout.
   Centré, sans reproduire l'animation décorative de la maquette (halos/
   lignes lumineuses volontairement limités sur ce site). */
.woocommerce-MyAccount-content > .woocommerce-info {
    flex-direction: column;
    text-align: center;
    padding: clamp(48px, 9vh, 90px) clamp(20px, 4vw, 48px);
    gap: 14px;
}

.woocommerce-MyAccount-content > .woocommerce-info::before {
    content: 'i';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Outfit, sans-serif;
    font-style: italic;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 4px;
}

.woocommerce-MyAccount-content > .woocommerce-info a.button {
    order: 0;
    margin: 6px 0 0;
}

/* --------------------------------------------------------------------
   Adresses (myaccount/my-address.php, non surchargé)
   -------------------------------------------------------------------- */
.woocommerce-MyAccount-content > p:first-child {
    margin: 0 0 clamp(22px, 3.4vh, 32px);
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.46);
}

.woocommerce-Addresses,
.u-columns.addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(18px, 3vw, 40px);
}

/* my-address.php porte aussi .col2-set (utile ailleurs pour un clearfix
   flottant) : son ::before/::after (content:" "; display:table) compte
   comme 2 items de grille supplémentaires, décalant les 2 vraies cartes
   d'une colonne vers la droite (constaté dans Chrome : 3 colonnes créées
   pour seulement 2 cartes réelles, la 1ʳᵉ occupée par le ::before vide).
   content:none les retire complètement de l'arbre de boîtes. */
.woocommerce-account .woocommerce .woocommerce-Addresses::before,
.woocommerce-account .woocommerce .woocommerce-Addresses::after,
.woocommerce-account .woocommerce .u-columns.addresses::before,
.woocommerce-account .woocommerce .u-columns.addresses::after {
    content: none;
    display: none;
}

/* Chaque carte porte aussi .col-1/.col-2 (template my-address.php) :
   woocommerce-layout.css cible .woocommerce .col2-set .col-1/.col-2 avec
   float + width:48% (3 classes), plus spécifique que .woocommerce-Address
   seul (1 classe) malgré un chargement plus tardif — même cause que la
   navigation plus haut. Spécificité égale ici pour neutraliser. */
.woocommerce .col2-set .woocommerce-Address {
    float: none;
    width: auto;
}

.woocommerce-Address {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vh, 22px);
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.woocommerce-Address-title h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: Outfit, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.woocommerce-Address-title h2::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--universim-gold);
    flex: 0 0 auto;
}

.woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.74);
}

.woocommerce-Address-title .edit {
    align-self: flex-start;
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 60, 0.34);
    background-color: rgba(255, 201, 60, 0.05);
    color: var(--universim-gold);
    font-family: Outfit, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.woocommerce-Address-title .edit:hover,
.woocommerce-Address-title .edit:focus-visible {
    background-color: var(--universim-gold);
    color: var(--universim-black);
}

/* --------------------------------------------------------------------
   Formulaires (édition d'adresse, détails du compte, connexion,
   inscription, mot de passe oublié / réinitialisation) — mêmes classes
   .woocommerce-form-row / .woocommerce-Input sur tous ces écrans.
   -------------------------------------------------------------------- */
.woocommerce-EditAccountForm,
.woocommerce-address-fields,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-lost-password {
    max-width: 780px;
}

/* Deux conventions de marquage coexistent chez WooCommerce pour les
   mêmes champs : les formulaires écrits à la main (form-edit-account.php,
   form-login.php) utilisent "woocommerce-form-row"/"woocommerce-Input" ;
   ceux générés par woocommerce_form_field() (form-edit-address.php,
   notamment) n'utilisent que "form-row"/"input-text". D'où le doublon de
   sélecteurs sur tout ce bloc plutôt qu'une seule classe.
   Bloc, pas flex : .form-row-first/.form-row-last (Prénom/Nom côte à
   côte) reposent sur le float:left/right; width:47% natif de
   woocommerce-layout.css — display:flex l'annulerait (float calcule à
   "none" dans un conteneur flex) et casserait cette mise en colonnes. */
/* Spécificité alignée sur ".woocommerce form .form-row" (woocommerce.css :
   padding:3px; margin:0 0 6px) pour appliquer réellement notre propre
   rythme vertical. */
.woocommerce-account .woocommerce .woocommerce-form-row,
.woocommerce-account .woocommerce .form-row {
    padding: 0;
    margin: 0 0 clamp(16px, 2.4vh, 22px);
}

/* Sous 640px, Prénom/Nom (et les autres paires form-row-first/last, ex.
   adresse) passent l'un sous l'autre plutôt que de rester à 47% flottés
   — le float natif ne les empêche pas de déborder/se resserrer
   exagérément sur un petit écran. */
@media (max-width: 640px) {
    .woocommerce-account .woocommerce .woocommerce-form-row-first,
    .woocommerce-account .woocommerce .woocommerce-form-row-last,
    .woocommerce-account .woocommerce .form-row-first,
    .woocommerce-account .woocommerce .form-row-last {
        float: none;
        width: 100%;
    }
}

.woocommerce-form-row label,
.form-row label {
    display: block;
    margin-bottom: 9px;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.62);
}

.woocommerce-form-row .required,
.form-row .required {
    color: var(--universim-gold);
    text-decoration: none;
}

.woocommerce-form-row .screen-reader-text,
.form-row .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Spécificité (.woocommerce-account .woocommerce .form-row ...) délibérée :
   woocommerce-general.css cible ".woocommerce form .form-row .input-text,
   .woocommerce form .form-row select" (3 classes + 1 élément) pour le
   fond blanc/bordure par défaut — plus spécifique que ".input-text" seul
   malgré un chargement plus tardif ici, même cause que les bugs de mise
   en page précédents sur cette page. */
.woocommerce-account .woocommerce .form-row .woocommerce-Input,
.woocommerce-account .woocommerce .form-row .input-text,
.woocommerce-account .woocommerce .form-row select,
.woocommerce-account .woocommerce .form-row textarea {
    width: 100%;
    background-color: var(--universim-field-bg);
    border: 1px solid var(--universim-field-border);
    border-radius: 3px;
    padding: 14px 16px;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 300;
    font-size: 14.5px;
    color: var(--universim-white);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.woocommerce-account .woocommerce .form-row .woocommerce-Input:focus,
.woocommerce-account .woocommerce .form-row .input-text:focus,
.woocommerce-account .woocommerce .form-row select:focus,
.woocommerce-account .woocommerce .form-row textarea:focus {
    outline: none;
    border-color: rgba(255, 201, 60, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.09);
}

/* Sélecteurs natifs (ex. "État", non enrichis par Select2) : le chevron
   de woocommerce.css est un SVG noir codé en dur — invisible sur fond
   sombre. Remplacé par la même flèche dorée que les autres <select> du
   site (cf. style.css, .site-nav__dropdown). */
.woocommerce-account .woocommerce .form-row select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F5B301' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}

.woocommerce-MyAccount-content h2 {
    margin: 0 0 clamp(18px, 2.6vh, 26px);
    font-family: Outfit, sans-serif;
    font-weight: 300;
    font-size: clamp(19px, 1.8vw, 24px);
    color: var(--universim-white);
}

/* Sélecteur Pays/région (form-edit-address.php) : select natif remplacé
   par Select2 (wc-country-select), sa propre structure DOM à restyler
   séparément — le <select> caché ci-dessus n'est plus affiché. */
.select2-container--default .select2-selection--single {
    height: auto;
    background-color: var(--universim-field-bg);
    border: 1px solid var(--universim-field-border);
    border-radius: 3px;
    padding: 14px 16px;
}

.select2-container--default .select2-selection__rendered {
    padding: 0;
    padding-right: 20px;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--universim-white);
}

.select2-container--default .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.24);
}

.select2-container--default .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 10px;
}

.select2-container--default .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent rgba(255, 255, 255, 0.4) transparent;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(255, 201, 60, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.09);
}

.select2-dropdown {
    background-color: #101010;
    border: 1px solid var(--universim-field-border);
    border-radius: 3px;
    overflow: hidden;
}

.select2-search--dropdown {
    background-color: #101010;
    padding: 8px;
}

.select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--universim-field-border);
    border-radius: 3px;
    padding: 8px 10px;
    color: var(--universim-white);
    font-family: Poppins, system-ui, sans-serif;
}

.select2-results__option {
    padding: 10px 14px;
    font-family: Poppins, system-ui, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(255, 201, 60, 0.12);
    color: var(--universim-gold);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--universim-white);
}

.select2-results__group {
    color: rgba(255, 255, 255, 0.4);
}

.woocommerce-form-row span[id$="_description"] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.3);
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-form-login fieldset {
    border: 0;
    margin: clamp(10px, 2vh, 18px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
}

.woocommerce-EditAccountForm legend {
    padding: 0;
    font-family: Outfit, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.woocommerce-EditAccountForm .clear {
    display: none;
}

/* Spécificité (.woocommerce-account .woocommerce button.button) délibérée :
   woocommerce.css stylise déjà tout button.button (gris/texte foncé) via
   ".woocommerce :where(...) button.button" — le :where() neutralise sa
   partie contextuelle mais ".woocommerce button.button" reste à 2 classes
   + 1 élément, que ".woocommerce-form button[type=submit]" seul ne bat
   pas. Un seul sélecteur couvre tous les boutons d'envoi (compte,
   adresse, connexion, inscription, mot de passe) : tous portent .button,
   même quand leur formulaire n'a pas de classe commune. */
.woocommerce-account .woocommerce button.button {
    cursor: pointer;
    padding: 15px 34px;
    border-radius: 999px;
    border: 0;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-family: Outfit, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 14px 36px -18px rgba(245, 179, 1, 0.6);
    transition: box-shadow var(--universim-transition), transform var(--universim-transition), background-color var(--universim-transition);
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce button.button:focus-visible {
    background-color: var(--universim-gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 18px 44px -18px rgba(245, 179, 1, 0.75);
}

.woocommerce-EditAccountForm > p:last-of-type {
    padding-top: clamp(18px, 2.6vh, 26px);
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.woocommerce-LostPassword {
    margin-top: 14px;
    font-size: 13px;
}

.woocommerce-LostPassword a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: underline;
}

.woocommerce-LostPassword a:hover {
    color: var(--universim-gold);
}

/* --------------------------------------------------------------------
   Connexion / Inscription (myaccount/form-login.php, non surchargé) —
   état déconnecté de la page.
   -------------------------------------------------------------------- */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 780px;
}

/* Une seule colonne explicite (pas d'auto-fit, dont le seuil de repli
   dépendrait de la largeur du gap) sous 640px, 2 au-dessus — même valeur
   que le point où .u-column2 change de colonne juste en dessous. */
#customer_login.col2-set {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

@media (min-width: 641px) {
    #customer_login.col2-set {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* float:none + width:auto + grid-column explicite : même double bug que
   la navigation "Mon compte" (woocommerce-layout.css flotte .col-1/.col-2
   en 48%/48% avec une spécificité que .u-column1/2 seuls ne peuvent pas
   battre, et le placement automatique de ces 2 enfants dans Chrome les
   inverse sans ça — vérifié dans le navigateur pour les deux cas). */
#customer_login .u-column1,
#customer_login .u-column2 {
    float: none;
    width: auto;
    min-width: 0;
    grid-column: 1;
}

#customer_login .u-column2 {
    padding-top: clamp(24px, 4vw, 0px);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

@media (min-width: 641px) {
    #customer_login .u-column2 {
        grid-column: 2;
        padding-top: 0;
        padding-left: clamp(32px, 5vw, 64px);
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.09);
    }
}

/* Le <h2> "Login"/"Register" est un frère du <form>, pas un descendant
   (cf. myaccount/form-login.php) : sélecteur porté par le conteneur
   .woocommerce déconnecté, pas par les classes de formulaire. */
.woocommerce-account:not(.logged-in) .woocommerce h2 {
    margin: 0 0 clamp(18px, 2.6vh, 26px);
    font-family: Outfit, sans-serif;
    font-weight: 200;
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: -0.02em;
    color: var(--universim-white);
}

/* --------------------------------------------------------------------
   Global : la Boutique reste toujours atteignable même sans commande.
   -------------------------------------------------------------------- */
.woocommerce-MyAccount-content a.wc-forward {
    color: var(--universim-gold);
}