/**
 * My Account — direction "Reçu d'orfèvre" (validée v1.5.17).
 *
 * Layout :
 *  - Hero centré gauche : kicker Anton magenta + titre Anton avec prénom magenta
 *  - Layout 2 colonnes desktop : sidebar 240px (sticky) + content (cartes empilées)
 *  - Layout 1 colonne mobile : sidebar passe en haut
 *
 * Composants :
 *  - .myaccount-nav      : sidebar avec avatar + nav + déconnexion
 *  - .myaccount-card     : carte blanche bordée fine (réutilisée partout)
 *  - .myaccount-shortcut : chiffre Anton + label Poppins, fond rose pâle
 *  - .myaccount-orders   : ligne par commande, sans bordures lourdes
 *  - .myaccount-address  : carte adresse compacte avec label Anton
 *  - .myaccount-status   : badge sémantique (livré / en cours / expédié / annulé)
 *
 * Design tokens utilisés :
 *  --color-pink-pale, --color-primary, --color-ink*, --color-surface, --color-border
 *  --font-display (Anton), --font-body (Poppins)
 *
 * @package MacqLaBoutik
 */

/* ═══════════════════════════════════════════════════════════════
 *  Wrapper global
 * ═══════════════════════════════════════════════════════════════ */

.myaccount {
  background: var(--color-pink-pale);
  padding-block: clamp(2rem, 5vw, 4rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  min-height: 60vh;
}

/* ═══════════════════════════════════════════════════════════════
 *  Hero
 * ═══════════════════════════════════════════════════════════════ */

.myaccount__hero {
  max-width: 1100px;
  margin: 0 auto var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid rgb(216 45 119 / 0.18);
}

/* Variante non loggé : centré */
.myaccount__hero:not(.myaccount__hero--logged) {
  text-align: center;
  border-bottom: 0;
  margin-bottom: var(--space-2xl);
}

.myaccount__kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.myaccount__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.myaccount__user-name {
  color: var(--color-primary);
}

.myaccount__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: var(--space-s) auto 0;
  max-width: 50ch;
}

/* ═══════════════════════════════════════════════════════════════
 *  Layout 2 colonnes (utilisateur loggé)
 * ═══════════════════════════════════════════════════════════════ */

/*
 * FILET DE SÉCURITÉ contre le CSS natif WooCommerce.
 *
 * Woo applique nativement (via woocommerce-layout.css) :
 *   .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30%; }
 *   .woocommerce-account .woocommerce-MyAccount-content    { float: right; width: 68%; }
 *
 * Ces floats sortent notre <nav class="myaccount-nav woocommerce-MyAccount-navigation">
 * du grid `.myaccount__layout`, et écrasent la largeur 240px de la sidebar.
 * Résultat : sidebar compressée à 30%, contenu mal positionné.
 *
 * On dequeue déjà ces CSS côté PHP (cf. inc/woocommerce.php → macq_laboutik_dequeue_woo_styles),
 * mais on garde ce filet en CSS au cas où :
 *  - Un plugin tiers re-charge le CSS Woo natif
 *  - Le cache serveur sert une version pré-dequeue
 *  - Un page-builder injecte ses propres règles
 *
 * Sélecteur scopé à `.myaccount` pour ne pas affecter d'autres contextes.
 */
.myaccount .woocommerce-MyAccount-navigation,
.myaccount .woocommerce-MyAccount-content,
.myaccount-nav.woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  margin: 0;
}

.myaccount__layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-l);
  align-items: start;
}

@media (max-width: 880px) {
  .myaccount__layout {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

.myaccount__sidebar {
  position: sticky;
  top: calc(var(--macq-header-height, 88px) + var(--space-m));
}

@media (max-width: 880px) {
  .myaccount__sidebar {
    position: static;
  }
}

.myaccount__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  /* min-width: 0 indispensable en grid sinon le contenu peut déborder */
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Sidebar — navigation
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-nav {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.myaccount-nav__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
}

.myaccount-nav__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%; /* préservé : c'est un cercle, pas un rectangle arrondi */
  background: var(--color-primary);
  color: var(--color-primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.myaccount-nav__user {
  min-width: 0;
}

.myaccount-nav__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myaccount-nav__email {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--color-ink-mute);
  margin: 0.125rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Liste des liens — surcharge le markup natif Woo .woocommerce-MyAccount-navigation */
.myaccount-nav__list,
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.myaccount-nav__item,
.woocommerce-MyAccount-navigation li {
  position: relative;
}

.myaccount-nav__link,
.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 1.125rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  /*
   * Pas de wrap : le texte tient sur une ligne. Si le label est trop long
   * pour la sidebar 240px, on tronque proprement avec ellipsis. Évite les
   * libellés "Tableau de bord" qui cassent en 3 lignes quand la nav est
   * mal-largeur.
   */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-left-color var(--dur-fast) var(--ease-out);
}

/* Le span du libellé doit accepter de rétrécir pour que l'ellipsis fonctionne */
.myaccount-nav__link > span,
.woocommerce-MyAccount-navigation li a {
  min-width: 0;
}

.myaccount-nav__link:hover,
.myaccount-nav__link:focus-visible,
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
  background: var(--color-pink-pale);
  color: var(--color-primary);
  outline: 0;
}

.myaccount-nav__item.is-active .myaccount-nav__link,
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
  background: rgb(216 45 119 / 0.08);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Icônes dans la nav — taille fixe, couleur synchro avec le texte */
.myaccount-nav__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-ink-mute);
  transition: color var(--dur-fast) var(--ease-out);
}

.myaccount-nav__link:hover .myaccount-nav__icon,
.myaccount-nav__link:focus-visible .myaccount-nav__icon,
.myaccount-nav__item.is-active .myaccount-nav__icon {
  color: var(--color-primary);
}

/* Footer sidebar : déconnexion séparée visuellement */
.myaccount-nav__foot {
  border-top: 1px solid var(--color-border);
  padding: 0.625rem 0;
}

.myaccount-nav__logout {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 1.125rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-ink-mute);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-fast) var(--ease-out);
}

.myaccount-nav__logout:hover,
.myaccount-nav__logout:focus-visible {
  color: var(--color-primary);
  outline: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Content — cartes
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: clamp(1.25rem, 3vw, 1.5rem);
}

.myaccount-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.myaccount-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.myaccount-card__link {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.myaccount-card__link:hover,
.myaccount-card__link:focus-visible {
  color: var(--color-primary-hover);
  outline: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Greeting (texte d'intro dashboard)
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-greeting {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}

.myaccount-greeting strong {
  color: var(--color-primary);
  font-weight: 500;
}

.myaccount-greeting a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgb(216 45 119 / 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.myaccount-greeting a:hover,
.myaccount-greeting a:focus-visible {
  text-decoration-color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
 *  Shortcuts (chiffres clés)
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.625rem;
  margin-top: var(--space-m);
}

.myaccount-shortcut {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--color-pink-pale);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.myaccount-shortcut:hover,
.myaccount-shortcut:focus-visible {
  background: rgb(216 45 119 / 0.1);
  transform: translateY(-1px);
  outline: 0;
}

.myaccount-shortcut__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--color-primary);
}

.myaccount-shortcut__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ═══════════════════════════════════════════════════════════════
 *  Orders (liste de commandes)
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-orders {
  display: flex;
  flex-direction: column;
}

.myaccount-orders__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1.125rem;
  align-items: center;
  padding: 0.875rem 0;
  border-top: 1px solid var(--color-border);
}

.myaccount-orders__row:first-child {
  border-top: 0;
}

.myaccount-orders__num {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.myaccount-orders__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.myaccount-orders__product {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myaccount-orders__date {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--color-ink-mute);
}

.myaccount-orders__amount {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
}

.myaccount-orders__empty {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink-mute);
  text-align: center;
  padding: var(--space-l) 0;
  margin: 0;
}

/* Mobile : on stack le row en 2 lignes pour éviter l'écrasement */
@media (max-width: 560px) {
  .myaccount-orders__row {
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
  }
  .myaccount-orders__num {
    grid-column: 1;
    grid-row: 1;
  }
  .myaccount-orders__info {
    grid-column: 1;
    grid-row: 2;
  }
  .myaccount-orders__status {
    grid-column: 2;
    grid-row: 1;
  }
  .myaccount-orders__amount {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  Status badges
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-status {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

/* Mappings statuts WooCommerce → couleurs sémantiques :
 *  - completed       → ok (gris discret)
 *  - processing      → pending (magenta)
 *  - on-hold         → pending (magenta)
 *  - shipped         → expédié (encre)
 *  - cancelled/failed → cancelled (rouge fond pâle)
 */
.myaccount-status--ok,
.myaccount-status--completed {
  background: rgb(28 28 28 / 0.06);
  color: var(--color-ink);
}

.myaccount-status--pending,
.myaccount-status--processing,
.myaccount-status--on-hold {
  background: rgb(216 45 119 / 0.12);
  color: var(--color-primary);
}

.myaccount-status--shipped {
  background: var(--color-ink);
  color: var(--color-surface);
}

.myaccount-status--cancelled,
.myaccount-status--failed,
.myaccount-status--refunded {
  background: rgb(180 30 30 / 0.08);
  color: #b41e1e;
}

/* ═══════════════════════════════════════════════════════════════
 *  Addresses
 * ═══════════════════════════════════════════════════════════════ */

.myaccount-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.875rem;
  margin-top: var(--space-m);
}

.myaccount-address {
  padding: 1rem 1.125rem;
  background: var(--color-pink-pale);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.myaccount-address__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.myaccount-address__body {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0;
}

.myaccount-address__body em {
  font-style: italic;
  color: var(--color-ink-mute);
}

.myaccount-address__edit {
  align-self: flex-start;
  margin-top: 0.375rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 1px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-bottom-color var(--dur-fast) var(--ease-out);
}

.myaccount-address__edit:hover,
.myaccount-address__edit:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  outline: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Form login (utilisateur non loggé)
 *
 *  Direction "Champs typographiés" :
 *  - Inputs border-bottom only (pas de rectangle bordé)
 *  - Hover : la ligne s'assombrit
 *  - Focus : la ligne devient magenta + léger fond rose translucide
 *  - Labels en kicker uppercase letter-spacing tight
 *
 *  Markup : notre form-login.php utilise .myaccount-login-grid +
 *  .myaccount-login-card + .myaccount-login-form__*. On garde aussi
 *  des sélecteurs sur les classes natives Woo pour matcher tout markup
 *  injecté par des plugins via les hooks woocommerce_login_form_*.
 * ═══════════════════════════════════════════════════════════════ */

.myaccount__login-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* Grid 2 colonnes (login + register) → 1 colonne sur mobile */
.myaccount-login-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-m);
  align-items: start;
}

/* Modifier : inscription désactivée → la carte login se centre et reste
 * cappée à une largeur de lecture confortable. */
.myaccount-login-grid--single {
  grid-template-columns: minmax(280px, 480px);
  justify-content: center;
}

/* Carte (login OU register) */
.myaccount-login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: clamp(1.5rem, 3vw, 1.875rem);
}

.myaccount-login-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-m);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-border);
}

.myaccount-login-card__help {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-ink-mute);
  line-height: 1.5;
  margin: 0 0 var(--space-m);
}

.myaccount-login-card__help--note {
  /* Variante : remplace le champ password quand Woo génère le mdp côté serveur */
  margin-top: 0.5rem;
  font-style: normal;
}

/* ─── Formulaire (rows, labels, inputs) ─── */

.myaccount-login-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}

.myaccount-login-form__label,
.myaccount-login-form .woocommerce-form__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  /* annule le margin-bottom natif Woo */
  margin: 0;
}

.myaccount-login-form__required {
  color: var(--color-primary);
  margin-left: 0.125rem;
}

/*
 * Input : border-bottom only (signature visuelle de cette page).
 *
 * On cible aussi les sélecteurs Woo natifs (.woocommerce-Input, etc.)
 * pour que les plugins qui injectent leurs propres champs via les hooks
 * woocommerce_login_form / woocommerce_register_form héritent du même style.
 *
 * `border-radius: 0` est explicite parce que certains thèmes parents ou
 * plugins forcent un border-radius par défaut sur tous les inputs.
 */
.myaccount-login-form__input,
.myaccount-login-form .woocommerce-Input,
.myaccount-login-form input[type="text"],
.myaccount-login-form input[type="email"],
.myaccount-login-form input[type="password"],
.myaccount-login-form input[type="tel"] {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  transition:
    border-bottom-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.myaccount-login-form__input:hover,
.myaccount-login-form .woocommerce-Input:hover,
.myaccount-login-form input[type="text"]:hover,
.myaccount-login-form input[type="email"]:hover,
.myaccount-login-form input[type="password"]:hover,
.myaccount-login-form input[type="tel"]:hover {
  border-bottom-color: var(--color-ink-soft);
}

.myaccount-login-form__input:focus,
.myaccount-login-form .woocommerce-Input:focus,
.myaccount-login-form input[type="text"]:focus,
.myaccount-login-form input[type="email"]:focus,
.myaccount-login-form input[type="password"]:focus,
.myaccount-login-form input[type="tel"]:focus {
  outline: 0;
  border-bottom-color: var(--color-primary);
  background: rgb(216 45 119 / 0.03);
}

/* Style du placeholder (cohérent avec le label kicker) */
.myaccount-login-form__input::placeholder,
.myaccount-login-form .woocommerce-Input::placeholder {
  color: var(--color-ink-mute);
  opacity: 1; /* Firefox baisse l'opacité par défaut, on rétablit */
}

/* ─── Actions (bouton + remember + nonce) ─── */

.myaccount-login-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: var(--space-m);
  flex-wrap: wrap;
}

/* Variante : bouton seul aligné à droite (carte register) */
.myaccount-login-form__actions--end {
  justify-content: flex-end;
}

.myaccount-login-form__remember,
.myaccount-login-form .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  margin: 0;
}

.myaccount-login-form__checkbox,
.myaccount-login-form .woocommerce-form__input-checkbox {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Bouton submit : rose magenta plein, hover en outline */
.myaccount-login-form__submit,
.myaccount-login-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1.375rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-ink);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.myaccount-login-form__submit:hover,
.myaccount-login-form__submit:focus-visible,
.myaccount-login-form button[type="submit"]:hover,
.myaccount-login-form button[type="submit"]:focus-visible {
  background: transparent;
  color: var(--color-primary);
  outline: 0;
}

/* ─── Lost password link (sous le bouton de login) ─── */

.myaccount-login-form__lost-password {
  margin: 0.875rem 0 0;
  text-align: right;
}

.myaccount-login-form__lost-password a,
.myaccount-login-form .woocommerce-LostPassword a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-bottom-color var(--dur-fast) var(--ease-out);
}

.myaccount-login-form__lost-password a:hover,
.myaccount-login-form__lost-password a:focus-visible,
.myaccount-login-form .woocommerce-LostPassword a:hover,
.myaccount-login-form .woocommerce-LostPassword a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  outline: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Notices Woo (succès, erreurs, infos)
 * ═══════════════════════════════════════════════════════════════ */

.woocommerce-notices-wrapper:not(:empty) {
  max-width: 1100px;
  margin: 0 auto var(--space-m);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid;
  background: var(--color-surface);
  margin-bottom: 0.5rem;
  list-style: none;
}

.woocommerce-message {
  border-left-color: #2a8d56;
  color: #1d6a3e;
}

.woocommerce-info {
  border-left-color: var(--color-primary);
  color: var(--color-ink);
}

.woocommerce-error {
  border-left-color: #b41e1e;
  color: #791313;
}

/* ═══════════════════════════════════════════════════════════════
 *  Tables natives Woo (commandes liste, détail commande, downloads)
 *  Override sobre — alignement avec le design "Reçu d'orfèvre"
 * ═══════════════════════════════════════════════════════════════ */

.myaccount__content table.shop_table,
.myaccount__content .woocommerce-orders-table,
.myaccount__content .woocommerce-MyAccount-downloads {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.myaccount__content table.shop_table th,
.myaccount__content .woocommerce-orders-table th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  padding: 0.625rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.myaccount__content table.shop_table td,
.myaccount__content .woocommerce-orders-table td {
  padding: 0.875rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.myaccount__content table.shop_table tr:last-child td,
.myaccount__content .woocommerce-orders-table tr:last-child td {
  border-bottom: 0;
}

.myaccount__content .woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

.myaccount__content .woocommerce-button {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.myaccount__content .woocommerce-button:hover,
.myaccount__content .woocommerce-button:focus-visible {
  background: var(--color-ink);
  color: var(--color-surface);
  outline: 0;
}

.myaccount__content .woocommerce-button + .woocommerce-button {
  margin-left: 0.375rem;
}

/* Pagination Woo (orders) */
.myaccount__content .woocommerce-pagination {
  margin-top: var(--space-m);
  text-align: center;
}

.myaccount__content .woocommerce-pagination ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.myaccount__content .woocommerce-pagination li a,
.myaccount__content .woocommerce-pagination li span {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-ink);
  text-decoration: none;
  border: 1px solid var(--color-border);
}

.myaccount__content .woocommerce-pagination li .current {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
 *  Edit account form (détails du compte) + edit address form
 * ═══════════════════════════════════════════════════════════════ */

.myaccount__content .woocommerce-EditAccountForm fieldset,
.myaccount__content fieldset {
  border: 0;
  padding: 0;
  margin: var(--space-m) 0 0;
}

.myaccount__content fieldset legend {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-s);
  padding: 0;
}

.myaccount__content textarea.woocommerce-Input {
  min-height: 100px;
  resize: vertical;
}