/* =============================================================================
   woocommerce-myaccount.css (Core, agnostique) — template "Mon compte" WooCommerce
   -----------------------------------------------------------------------------
   RÈGLES : 100 % Design Tokens (--nt-*) · 0 style inline · 0 valeur magique ·
   0 hex/rgb en dur · cible exclusivement les classes natives WooCommerce
   (body.woocommerce-account, .woocommerce-MyAccount-*, .woocommerce-orders-table__*,
   .woocommerce-Button/a.button) — aucune classe ni contenu propre à une marque.
   Réutilisable tel quel par tout projet dupliquant ce Framework (cf. docs/core-vs-project.md) :
   seule la couche Project (brand/tokens.css) doit changer pour rebrander cet écran.
   Couvre : connexion, message de bienvenue, navigation compte, tableau des
   commandes (statuts colorés, montant dominant, actions Voir/Payer/Annuler),
   boutons du compte. Extrait de css/08-shop.css (25/07) où il avait été écrit
   par erreur au niveau Project alors qu'il ne contient aucun couplage de marque.
   ============================================================================= */

/* -------- Connexion -------- */
/* 29/07 : sélecteur enfant-direct (.woocommerce > h2) -> descendant (.woocommerce h2).
   Activer l'inscription a introduit le wrapper natif #customer_login.col2-set, qui imbrique
   désormais le <h2> "Se connecter" un niveau plus profond (.woocommerce > col2-set >
   u-column1 > h2) — l'ancien sélecteur ne matchait plus, régression détectée avant
   déploiement. Un sélecteur descendant reste strictement un sur-ensemble (rien de perdu),
   couvre aussi le nouveau <h2>"S'inscrire". */
body.woocommerce-account .woocommerce h2 {
  font-family: var(--nt-font-heading);
  font-weight: var(--nt-weight-semibold);
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--nt-text-strong);
  margin: 0 0 var(--nt-space-md);
}
body.woocommerce-account .nk-account-welcome {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-lg);
  color: var(--nt-text-muted);
  margin: 0 0 var(--nt-space-lg);
}
/* D022 (audit 27/07) — Kadence (woocommerce-account.min.css) encadre .woocommerce-form-login
   d'une bordure bleu-gris + coins arrondis par défaut, hors charte (ni sur /lost-password/, qui
   n'a pas cet élément). On neutralise à la source, sans !important (notre fichier charge après). */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
  max-width: 420px;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
/* Inscription (29/07, activée sur demande fondateur) : même hiérarchie de titre
   que "Se connecter" (h2 déjà stylé plus haut, règle .woocommerce h2 générique). */
body.woocommerce-account .woocommerce-form-row label {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nt-text-faint);
  display: block;
  margin-bottom: var(--nt-space-xs);
}
/* Champ "trait" (29/07, v2 éditoriale) : la version "boîte" (fond + bordure pleine)
   jugée trop "formulaire back-office" par le fondateur sur capture réelle. Remplacée
   par un simple soulignement — même famille que les formulaires Apple ID/Aesop. Règle
   UNIQUE pour tous les formulaires du compte (connexion, inscription, informations,
   mot de passe, adresse) : plus de déclinaison par écran, cf. philosophie déjà énoncée
   dans ce fichier. Remplace les 2 blocs dupliqués (.woocommerce-form-login seul +
   les 3 autres formulaires) par un seul jeu de règles. */
body.woocommerce-account .input-text {
  width: 100%;
  min-height: 40px;
  padding: 8px 0;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-base);
  color: var(--nt-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--nt-line);
  border-radius: 0;
}
body.woocommerce-account .input-text:focus {
  border-bottom-color: var(--nt-gold);
  outline: none;
}
body.woocommerce-account .woocommerce-form-login__rememberme {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  margin-bottom: var(--nt-space-sm);
}
/* D024 (audit 27/07) — checkbox native non stylée (appearance/accent-color:auto),
   rupture de charte. accent-color suffit (support natif large, 0 reset custom requis). */
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
  accent-color: var(--nt-gold);
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}
body.woocommerce-account .woocommerce-LostPassword a {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-gold);
}

/* -------- Navigation "Mon compte" (29/07, v2 éditoriale) -------- */
/* V1 avait un filet vertical + trait plein sur l'item actif : jugé "encore très
   plugin" par le fondateur sur capture réelle. V2 : plus d'espace, plus aucun
   filet structurel, l'état actif se lit uniquement par la couleur/le poids du
   texte (pas de bordure, pas de fond) — repère discret façon menu éditorial. */
/* Filet vertical + soulignement persistants (29/07, confirmé sur capture réelle) :
   même cause que les 2 autres cas déjà rencontrés cette session (spécificité
   Kadence côté ul.border-inline-start ET côté "link-style-standard" pour le
   soulignement) — les règles simples ci-dessous ne suffisaient pas à elles
   seules. !important défensif, cohérent avec les 2 précédents déjà documentés
   dans ce fichier (item nav actif, titre de carte). */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  border-inline-start: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--nt-space-2xs) 0;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-base);
  color: var(--nt-text-muted);
  border: none;
  text-decoration: none !important;
  transition: color var(--nt-transition);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  margin-top: var(--nt-space-xs);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--nt-text-strong);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--nt-gold);
  font-weight: 500;
  /* Confirmé par mesure JS live (29/07) : un filet 5px persiste malgré la règle
     générique li a{border:none} ci-dessus — source non isolée dans un fichier
     statique (probablement une option Customizer Kadence, couleur #c9a878 = le
     brand gold documenté mais pas notre token --nt-gold recalibré). !important
     défensif, comme pour .nk-ui-card__title (framework.css, même contexte). */
  border-inline-start: none !important;
}
/* Bloc Support éditorial (29/07, v2 — remplace le simple lien) : même langage
   graphique que le reste (filet --nt-line, 0 radius, pas de fond marqué — juste
   un séparateur au-dessus, cohérent avec la nav qui vit juste au-dessus). */
body.woocommerce-account .nk-account-support {
  margin-top: var(--nt-space-lg);
  padding-top: var(--nt-space-md);
  border-top: 1px solid var(--nt-line);
}
body.woocommerce-account .nk-account-support__title {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-lg);
  font-weight: 400;
  color: var(--nt-text-strong);
  margin: 0 0 6px;
}
body.woocommerce-account .nk-account-support__body {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  line-height: var(--nt-leading-relaxed);
  color: var(--nt-text-muted);
  margin: 0 0 var(--nt-space-xs);
}
body.woocommerce-account .nk-account-support__link {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-gold);
  text-decoration: none;
}
body.woocommerce-account .nk-account-support__link:hover {
  color: var(--nt-gold-dark);
  text-decoration: underline;
}

/* -------- Commandes : tableau desktop retiré (29/07) -------- */
/* L'ancien tableau (>=720px, statuts colorés/montant dominant, ~200 lignes de CSS)
   n'a plus de cible : le template nooktails-child/woocommerce/myaccount/orders.php
   ne rend plus <table class="account-orders-table">, remplacé par la fiche éditoriale
   .nk-orders-editorial (règles plus bas dans ce fichier). Bloc retiré pour éviter la
   dette de CSS mort — même logique de statut colorée reprise sur le nouveau balisage.
   Le mécanisme mobile natif Kadence (<720px, empilement label:valeur) documenté ici
   n'est plus pertinent non plus : la fiche éditoriale gère son propre responsive
   (media query dans le bloc .nk-orders-editorial). */

/* -------- Contrat bouton unique du compte (29/07, unifié) -------- */
/* Un seul jeu de règles pour TOUS les boutons/CTA de Mon Compte (connexion,
   inscription, Voir/Payer/Annuler, Enregistrer les modifications, Ajouter un
   moyen de paiement...). Avant : .woocommerce-form-login__submit avait son
   propre padding (12px 26px) différent de .woocommerce-Button/a.button
   (10px 22px) — même famille de bouton, deux paddings différents, repéré lors
   du polish (point 3). Fusionnés ici. */
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account a.button {
  min-height: 48px;
  padding: 12px 26px;
  background: transparent;
  color: var(--nt-gold);
  border: 1px solid var(--nt-gold);
  border-radius: 0;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background var(--nt-transition), color var(--nt-transition), border-color var(--nt-transition);
}
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account a.button:hover {
  background: var(--nt-gold);
  color: var(--nt-bg);
}
body.woocommerce-account .woocommerce-form-login__submit:active,
body.woocommerce-account .woocommerce-Button:active,
body.woocommerce-account a.button:active {
  background: var(--nt-gold-dark);
  border-color: var(--nt-gold-dark);
  color: var(--nt-bg);
}
body.woocommerce-account .woocommerce-form-login__submit:focus-visible,
body.woocommerce-account .woocommerce-Button:focus-visible,
body.woocommerce-account a.button:focus-visible {
  background: var(--nt-gold);
  color: var(--nt-bg);
  outline: 2px solid var(--nt-text-strong);
  outline-offset: 2px;
}
/* Colonne Actions du tableau de commandes — Voir/Payer/Annuler différenciés.
   Les 3 boutons partagent la classe "button" (contrat gold-outline ci-dessus,
   pour "Voir") : "Payer" est l'action prioritaire d'une commande impayée →
   plein ; "Annuler" est une action destructive secondaire → discret, jamais
   mis en avant visuellement. */
body.woocommerce-account a.button.pay {
  background: var(--nt-gold);
  color: var(--nt-bg);
}
body.woocommerce-account a.button.pay:hover {
  background: var(--nt-gold-dark);
  border-color: var(--nt-gold-dark);
}
body.woocommerce-account a.button.cancel {
  background: none;
  border-color: transparent;
  color: var(--nt-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.woocommerce-account a.button.cancel:hover {
  background: none;
  color: var(--nt-alert);
}

/* -------- Notices (succès/erreur/info) -------- */
/* 28/07 (signalé fondateur, audit Mon Compte) : body.woocommerce-account porte
   .woocommerce-page mais jamais .woocommerce nu — la règle notices de 08-shop.css,
   scopée body.woocommerce X, ne s'applique donc jamais ici. Toute notice (mot de passe
   oublié envoyé, adresse enregistrée, erreur de connexion...) retombait sur le violet/
   bleu/rouge WooCommerce par défaut. Même contrat exact que 08-shop.css (mêmes
   !important, déjà justifiés par un bug de focus natif reproductible sur device réel),
   simplement étendu à ce contexte. */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-notice {
  background: var(--nt-surface-1);
  color: var(--nt-text);
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-inline-start: 1px solid var(--nt-gold) !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: 0 !important;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
}
body.woocommerce-account .woocommerce-message:focus,
body.woocommerce-account .woocommerce-info:focus,
body.woocommerce-account .woocommerce-notice:focus,
body.woocommerce-account .woocommerce-message:focus-visible,
body.woocommerce-account .woocommerce-info:focus-visible,
body.woocommerce-account .woocommerce-notice:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before {
  color: var(--nt-gold);
}
body.woocommerce-account .woocommerce-error {
  background: var(--nt-surface-1);
  color: var(--nt-text);
  border: 0;
  border-inline-start: 1px solid var(--nt-alert);
  border-radius: 0;
  box-shadow: none;
}

/* -------- Formulaires du compte (mot de passe oublié, informations, adresses) -------- */
/* 29/07 : ancien bloc dupliqué (boîte pleine, répété pour 4 contextes de formulaire)
   retiré — couvert par la règle unique .input-text plus haut (v2 éditoriale, trait
   plutôt que boîte). Ne reste ici que l'accessibilité clavier, qui s'applique déjà
   partout via ce même sélecteur générique. */
/* Focus clavier visible sur TOUS les champs du compte (trou d'accessibilité identifié
   à l'audit : seuls les boutons avaient un anneau de focus, pas les champs). */
body.woocommerce-account .input-text:focus-visible {
  outline: 2px solid var(--nt-gold);
  outline-offset: 1px;
}

/* -------- Select2 (Pays / État — formulaire d'adresse) -------- */
/* 28/07 : listes déroulantes non stylées (grep exhaustif confirmé 0 règle existante),
   repli sur le défaut Kadence (hauteur 42px, bordure bleu-gris). Même contrat que les
   champs texte ci-dessus, adapté aux 3 sous-éléments propres à select2. */
body.woocommerce-account .select2-container--default .select2-selection--single {
  min-height: 44px;
  display: flex;
  align-items: center;
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line);
  border-radius: 0;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--nt-text);
  font-family: var(--nt-font-ui);
  line-height: normal;
  padding-inline-start: 14px;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}
body.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--nt-gold);
}
body.woocommerce-account .select2-dropdown {
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-gold);
  border-radius: 0;
  font-family: var(--nt-font-ui);
}
body.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--nt-gold);
  color: var(--nt-bg);
}

/* -------- Filet or de signature sous le H1 -------- */
/* 28/07 (audit P3) : présent sur les archives boutique/catégorie, absent sur Mon Compte
   (gabarit page simple, pas archive) — même signature DA, juste répliquée ici. */
body.woocommerce-account .entry-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: var(--nt-space-sm);
  background: var(--nt-gold);
}

/* -------- Jauge de force du mot de passe -------- */
/* 28/07 (audit P2, pré-lancement) : d'abord ciblé #pass-strength-result (ID générique du
   password-strength-meter.min.js core WordPress, utilisé sur wp-admin/wp-login) — vérifié en
   direct : l'élément réel du formulaire Mon Compte est `#password_strength.woocommerce-password-strength`,
   l'implémentation propre à WooCommerce, ID et classe différents. Corrigé après test live
   (jauge encore aux couleurs stock jaune/orange WooCommerce malgré le premier déploiement).
   Recolorée aux 4 tons sémantiques déjà en usage sur les notices (--nt-alert/--nt-warning/
   --nt-info/--nt-success). Classes ajoutées par le script lui-même (.short/.bad/.good/.strong),
   jamais modifiées ici, juste stylées. */
body.woocommerce-account .woocommerce-password-strength {
  margin-top: var(--nt-space-xs);
  padding: 6px 10px;
  border: 1px solid var(--nt-line);
  border-radius: 0;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-xs);
  background: var(--nt-surface-1);
  color: var(--nt-text-muted);
}
body.woocommerce-account .woocommerce-password-strength.short {
  border-color: var(--nt-alert);
  color: var(--nt-alert-text);
  background: color-mix(in srgb, var(--nt-alert) 12%, var(--nt-surface-1));
}
body.woocommerce-account .woocommerce-password-strength.bad {
  border-color: var(--nt-warning);
  color: var(--nt-text-strong);
  background: color-mix(in srgb, var(--nt-warning) 12%, var(--nt-surface-1));
}
body.woocommerce-account .woocommerce-password-strength.good {
  border-color: var(--nt-info);
  color: var(--nt-text-strong);
  background: color-mix(in srgb, var(--nt-info) 12%, var(--nt-surface-1));
}
body.woocommerce-account .woocommerce-password-strength.strong {
  border-color: var(--nt-success);
  color: var(--nt-text-strong);
  background: color-mix(in srgb, var(--nt-success) 12%, var(--nt-surface-1));
}

/* -------- Layout natif connexion/inscription (29/07) -------- */
/* WooCommerce fournit déjà le wrapper 2 colonnes (#customer_login.col2-set,
   .u-column1/.u-column2) dès que l'inscription est activée — on l'habille,
   on ne le reconstruit pas. Empilé <768px (aucune donnée perdue, juste l'ordre
   naturel du DOM : connexion puis inscription). */
body.woocommerce-account #customer_login.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nt-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  body.woocommerce-account #customer_login.col2-set {
    grid-template-columns: 1fr 1px 1fr;
    align-items: start;
  }
  body.woocommerce-account #customer_login.col2-set .u-column2 {
    position: relative;
    padding-inline-start: var(--nt-space-xl);
  }
  body.woocommerce-account #customer_login.col2-set .u-column2::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--nt-space-xl) / -2);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--nt-line);
  }
}
body.woocommerce-account #customer_login.col2-set .u-column1,
body.woocommerce-account #customer_login.col2-set .u-column2 {
  margin: 0;
  padding-inline-start: 0;
  /* Correctif urgent (29/07, régression signalée fondateur, capture réelle) : le CSS de
     base WooCommerce force width:47%/float sur .u-column1/.u-column2 (col2-set), pensé
     pour un layout flottant classique. Une fois le parent passé en display:grid, cette
     largeur en % continue de s'appliquer À L'INTÉRIEUR de la piste de grille (1fr) —
     conflit qui écrase la colonne "Se connecter" à quelques pixels (texte éclaté lettre
     par lettre, capturé en direct). Neutralisé à la source : la largeur doit venir
     UNIQUEMENT de la piste de grille, jamais d'un pourcentage hérité. */
  width: auto;
  float: none;
}

/* -------- Introduction page déconnectée (29/07) -------- */
body.woocommerce-account .nk-account-intro {
  margin: 0 0 var(--nt-space-xl);
  max-width: 640px;
}
body.woocommerce-account .nk-account-intro__kicker {
  font-family: var(--nt-font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nt-gold);
  margin: 0;
}
body.woocommerce-account .nk-account-intro__title {
  font-family: var(--nt-font-heading);
  font-weight: var(--nt-weight-semibold);
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--nt-text-strong);
  margin: 0;
}
body.woocommerce-account .nk-account-intro__sub {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-lg);
  color: var(--nt-text-muted);
  margin: 0;
}
body.woocommerce-account .nk-reassurance--account {
  margin-top: var(--nt-space-xl);
}

/* -------- Dashboard premium connecté (29/07, v2 éditoriale) -------- */
/* V1 (grille de cartes) jugée encore "template" par le fondateur sur capture
   réelle. V2 : liste éditoriale — un label de section discret, puis une ligne
   par élément (titre + méta à gauche, lien "Voir →" à droite), séparées par un
   filet fin. Aucun encadré, aucune ombre, aucune grille symétrique. */
body.woocommerce-account .nk-account-editorial {
  margin: 0 0 var(--nt-space-xl);
  max-width: 640px;
}
body.woocommerce-account .nk-account-editorial__label {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nt-text-faint);
  margin: 0 0 var(--nt-space-sm);
}
body.woocommerce-account .nk-account-editorial__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nt-space-md);
  padding: var(--nt-space-sm) 0;
  border-bottom: 1px solid var(--nt-line);
}
body.woocommerce-account .nk-account-editorial__row:first-of-type {
  border-top: 1px solid var(--nt-line);
}
body.woocommerce-account .nk-account-editorial__title,
body.woocommerce-account a.nk-account-editorial__title {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-lg);
  font-weight: 400;
  color: var(--nt-text-strong);
  text-decoration: none;
  display: block;
}
body.woocommerce-account a.nk-account-editorial__title:hover {
  color: var(--nt-gold);
}
body.woocommerce-account .nk-account-editorial__status {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  margin: 2px 0 0;
}
body.woocommerce-account .nk-account-editorial__link {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
body.woocommerce-account .nk-account-editorial__link:hover {
  color: var(--nt-gold);
}
body.woocommerce-account .nk-account-back-shop {
  margin-top: var(--nt-space-xl);
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
}
body.woocommerce-account .nk-account-back-shop a {
  color: var(--nt-text-muted);
}
body.woocommerce-account .nk-account-back-shop a:hover {
  color: var(--nt-gold);
}

/* -------- Suppression du bandeau hero générique Kadence (29/07) -------- */
/* Kadence rend .entry-hero avec un overlay sombre pensé pour une image de fond
   (hero-section-overlay) : sans image sur /mon-compte/, l'overlay devient la
   seule chose visible -> bandeau noir avec titre à peine lisible (signalé
   fondateur, capture réelle). L'intro nk-account-intro ajoutée ci-dessus porte
   déjà tout le poids visuel du titre : afficher les deux serait redondant.
   Le <h1>"Mon compte" natif reste dans le DOM (SEO/schema intacts), juste
   masqué visuellement — même technique exacte que .nk-meta-seo (08-shop.css),
   déjà éprouvée sur ce site : masquage, jamais suppression. */
body.woocommerce-account .entry-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------- Commandes en fiches éditoriales (29/07) -------- */
/* Remplace le tableau (déjà retravaillé mais jugé "encore très WooCommerce" par
   le fondateur) par une fiche par commande, façon Apple Store. Réutilise le
   template nooktails-child/woocommerce/myaccount/orders.php — la donnée/logique
   provient de ce template (100% natif), seule cette CSS habille son propre
   balisage (nk-orders-editorial). Les classes de statut natives
   (woocommerce-orders-table__row--status-*) sont conservées pour la couleur du
   statut, cf. règles ci-dessous déjà écrites pour le tableau — même contrat,
   pas dupliqué : woocommerce-orders-table__cell-order-status n'existe plus dans
   ce balisage, la couleur est donc réappliquée directement sur .nk-orders-editorial__status. */
body.woocommerce-account .nk-orders-editorial {
  margin: 0;
}
body.woocommerce-account .nk-orders-editorial__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--nt-space-lg);
  padding: var(--nt-space-md) 0;
  border-bottom: 1px solid var(--nt-line);
}
body.woocommerce-account .nk-orders-editorial__item:first-child {
  border-top: 1px solid var(--nt-line);
}
body.woocommerce-account .nk-orders-editorial__number {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-lg);
  font-weight: 400;
  color: var(--nt-text-strong);
  text-decoration: none;
  display: block;
}
body.woocommerce-account .nk-orders-editorial__number:hover {
  color: var(--nt-gold);
}
body.woocommerce-account .nk-orders-editorial__meta {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  margin: 4px 0 0;
}
body.woocommerce-account .nk-orders-editorial__sep {
  margin: 0 4px;
}
body.woocommerce-account .nk-orders-editorial__status {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  font-weight: 500;
  margin: 4px 0 0;
}
body.woocommerce-account .nk-orders-editorial__status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
body.woocommerce-account .woocommerce-orders-table__row--status-processing .nk-orders-editorial__status { color: var(--nt-info); }
body.woocommerce-account .woocommerce-orders-table__row--status-completed .nk-orders-editorial__status { color: var(--nt-success); }
body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .nk-orders-editorial__status,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .nk-orders-editorial__status { color: var(--nt-alert); }
body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .nk-orders-editorial__status,
body.woocommerce-account .woocommerce-orders-table__row--status-pending .nk-orders-editorial__status { color: var(--nt-warning); }
body.woocommerce-account .woocommerce-orders-table__row--status-refunded .nk-orders-editorial__status { color: var(--nt-text-muted); }
body.woocommerce-account .nk-orders-editorial__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
body.woocommerce-account .nk-orders-editorial__link {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
body.woocommerce-account .nk-orders-editorial__link.view { color: var(--nt-gold); }
body.woocommerce-account .nk-orders-editorial__link:hover { color: var(--nt-gold); }
body.woocommerce-account .nk-orders-editorial__link.cancel { color: var(--nt-text-faint); text-decoration: underline; text-underline-offset: 2px; }
body.woocommerce-account .nk-orders-editorial__link.cancel:hover { color: var(--nt-alert); }
@media (max-width: 480px) {
  body.woocommerce-account .nk-orders-editorial__item {
    flex-direction: column;
    gap: var(--nt-space-xs);
  }
  body.woocommerce-account .nk-orders-editorial__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--nt-space-md);
  }
}

/* -------- Cartes d'adresse premium (29/07, v3) -------- */
/* PROBLÈME UX : "Adresse de facturation"/"Adresse de livraison" cassaient sur
   plusieurs lignes (capture réelle fondateur) — cause racine : titre et lien
   "Modifier" se disputaient la largeur sur UNE seule ligne (flex row
   space-between) dans une colonne déjà étroite (layout 2 colonnes natif). Une
   simple réduction de taille de police (v2) ne suffisait pas à tous les
   viewports. SOLUTION : disposition verticale — le titre occupe toute la
   largeur de la carte, le lien "Modifier" passe en dessous. Élimine la casse
   quelle que soit la largeur (320px→4K), pas seulement à un point de rupture
   donné. Combiné à un vrai traitement carte (fond, filet, padding) pour sortir
   du rendu "bloc WordPress nu".
   Note radius : la demande "rayon discret" entre en conflit avec la règle dure
   existante "0 carte arrondie" (déjà appliquée à 100% des composants de cette
   session — boutons, nk-ui-card, champs). Gardé à 0 pour rester uniforme avec
   le reste (point 6 de la demande : "aucune exception") — à trancher
   explicitement si un rayon est réellement voulu comme nouvelle exception. */
body.woocommerce-account .woocommerce-Address {
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line);
  border-radius: 0;
  padding: var(--nt-space-xl);
  margin-bottom: var(--nt-space-lg);
}
body.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: var(--nt-space-md);
}
body.woocommerce-account .woocommerce-Address-title h2 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--nt-text-strong);
  margin: 0;
}
body.woocommerce-account .woocommerce-Address-title .edit {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  color: var(--nt-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Confirmé sur capture mobile Safari réelle (29/07) : "Ajouter →" cassait sur
     2 lignes ("Ajouter" / "→") de façon incohérente selon la carte — le texte du
     lien n'avait pas de white-space:nowrap. Le titre (h2) reste libre de wrapper
     sur plusieurs lignes si besoin, seul le lien est protégé. */
  white-space: nowrap;
  flex-shrink: 0;
}
body.woocommerce-account .woocommerce-Address-title .edit:hover {
  color: var(--nt-gold-dark);
}
body.woocommerce-account address {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-base);
  line-height: var(--nt-leading-relaxed);
  color: var(--nt-text-muted);
  font-style: normal;
  margin-top: var(--nt-space-xs);
}
/* Colonnes natives (.col2-set .u-column1/2, page adresses) : même correctif de
   largeur que celui déjà appliqué à #customer_login (29/07 plus haut dans ce
   fichier) — le CSS de base WooCommerce force width:47%/float, en conflit avec
   toute mise en page moderne. Neutralisé ici pour cette page aussi. */
body.woocommerce-account .woocommerce-Addresses.col2-set .u-column1,
body.woocommerce-account .woocommerce-Addresses.col2-set .u-column2 {
  width: auto;
  float: none;
}
@media (min-width: 768px) {
  body.woocommerce-account .woocommerce-Addresses.col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nt-space-lg);
    align-items: stretch;
  }
  /* Hauteur identique même si une adresse est plus courte (29/07, polish) :
     la grille étire déjà les colonnes (align-items:stretch, comportement par
     défaut de Grid) — il faut aussi que la carte elle-même remplisse cette
     hauteur, sinon son contenu (moins de texte) la laisse plus courte que sa
     voisine à l'intérieur de la même piste. */
  body.woocommerce-account .woocommerce-Addresses.col2-set .u-column1,
  body.woocommerce-account .woocommerce-Addresses.col2-set .u-column2 {
    display: flex;
  }
  body.woocommerce-account .woocommerce-Addresses.col2-set .woocommerce-Address {
    width: 100%;
  }
}

/* -------- Fieldset "Changement de mot de passe" (29/07, polish) -------- */
/* Natif WooCommerce : <fieldset><legend>Password change</legend>...</fieldset>
   sans aucun style — bordure/padding par défaut du navigateur, très "formulaire
   technique". Neutralisé et retravaillé avec le même langage que le reste du
   compte (filet fin au-dessus, légende discrète en majuscules, même rythme
   vertical que les autres sections). */
body.woocommerce-account fieldset {
  border: none;
  padding: 0;
  margin: var(--nt-space-lg) 0 0;
}
body.woocommerce-account fieldset legend {
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nt-text-faint);
  padding: 0;
  margin-bottom: var(--nt-space-sm);
  border-top: 1px solid var(--nt-line);
  padding-top: var(--nt-space-md);
  width: 100%;
}

/* -------- Largeur de contenu (29/07) -------- */
/* Signalé fondateur (capture desktop réelle) : la page compte (toutes vues,
   dont le détail de commande) rend son contenu dans une colonne étroite
   (.entry-content.single-content) alors que la page panier utilise une
   largeur pleine (probablement bloc Gutenberg alignwide/alignfull, hors de la
   contrainte "content-style-boxed" que porte la page Mon Compte classique).
   Élargi ici spécifiquement pour les pages compte, sans toucher au réglage
   "Content Style: Boxed" global (reste inchangé pour articles/blog). */
body.woocommerce-account .entry-content.single-content {
  max-width: var(--nt-container);
}

/* -------- Détail de commande — adresses (29/07) -------- */
/* "Adresse de facturation"/"Adresse de livraison" cassent aussi sur la page
   de détail de commande (order/order-details.php natif, pas le même template
   que my-address.php déjà corrigé) — même symptôme, cause différente : ici
   pas de lien "Modifier" à côté, juste la contrainte de largeur de colonne
   ci-dessus. Réduit la taille pour rester sûr même en colonne encore étroite. */
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-view-order .woocommerce-column__title {
  font-size: var(--nt-text-lg);
  font-weight: 500;
}

/* -------- Avatar générique retiré (29/07) -------- */
/* .kadence-account-avatar (image Gravatar générique + nom en double, natif
   Kadence, piloté par l'option Customizer "woo_account_navigation_avatar")
   casse l'identité de marque. Masqué pour cette page uniquement — le message
   de bienvenue nominatif (nooktails_account_welcome, déjà en place) reste la
   SEULE salutation, sans avatar générique ni doublon de nom.
   !important : vérifié en direct, display:none seul ne suffit pas — Kadence
   fixe display:flex sur cet élément via son propre CSS (élément conçu comme
   flex icône+nom), qui l'emporte sur un simple sélecteur de classe. */
body.woocommerce-account .kadence-account-avatar {
  display: none !important;
}

/* -------- Nav : lien actif renforcé (29/07) -------- */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  font-weight: 600;
  color: var(--nt-text-strong);
}

/* -------- Bloc Support : resserré + repositionné en fin de contenu (29/07) -------- */
body.woocommerce-account .nk-account-support {
  margin-top: var(--nt-space-md);
  padding-top: var(--nt-space-sm);
}
body.woocommerce-account .nk-account-support__title {
  margin-bottom: 4px;
}

/* -------- Labels de formulaire assombris (29/07) -------- */
/* Demande fondateur : environ #8B8174. Aucun token existant ne correspond
   exactement (--nt-text-faint #A39C8C trop clair, --nt-text-muted #726B5F
   plus foncé que la cible) — utilisation de --nt-text-muted (déjà existant,
   0 hex nouveau) plutôt que d'introduire une valeur inédite. */
body.woocommerce-account .woocommerce-form-row label {
  color: var(--nt-text-muted);
}

/* -------- Espacement des champs resserré (29/07) -------- */
body.woocommerce-account .woocommerce-form-row {
  margin-bottom: var(--nt-space-sm);
}

/* -------- Dernière commande : numéro plus présent (29/07) -------- */
body.woocommerce-account .nk-account-editorial__title {
  font-size: 1.15rem;
}

/* -------- Cartes adresse : lien "Modifier" raccourci, disposition horizontale (29/07) -------- */
/* Le lien affiche maintenant "Modifier →" (court, libellé accessible complet
   conservé via aria-label — cf. template my-address.php) : la disposition
   verticale n'est plus nécessaire pour éviter la casse, retour à une ligne
   horizontale titre/lien comme demandé ("le titre reste le titre, le lien
   reste le lien"). Plus de respiration interne à la carte. */
/* -------- Checkbox "Se souvenir de moi" (29/07) -------- */
/* Remplace la case native (déjà accent-color) par une case dessinée au trait,
   cohérente avec le reste (0 radius, filet --nt-line, remplissage or à la
   coche) plutôt que le rendu natif du navigateur. */
body.woocommerce-account .woocommerce-form-login__rememberme {
  gap: 10px;
  margin-bottom: var(--nt-space-xs);
}
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--nt-line);
  border-radius: 0;
  background: transparent;
  position: relative;
  accent-color: initial;
  cursor: pointer;
}
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
  border-color: var(--nt-gold);
  background: var(--nt-gold);
}
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--nt-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--nt-text-strong);
  outline-offset: 2px;
}

/* -------- Texte de confidentialité (inscription) -------- */
body.woocommerce-account .woocommerce-privacy-policy-text {
  max-width: 480px;
}
body.woocommerce-account .woocommerce-privacy-policy-text p {
  font-size: var(--nt-text-xs);
  line-height: var(--nt-leading-relaxed);
  color: var(--nt-text-faint);
}

/* -------- Section "Sécurité" (mot de passe), override form-edit-account.php (29/07) -------- */
body.woocommerce-account fieldset.nk-account-security legend {
  text-transform: none;
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-lg);
  font-weight: 400;
  color: var(--nt-text-strong);
  letter-spacing: normal;
}
body.woocommerce-account .nk-account-security__intro {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  margin: 0 0 var(--nt-space-sm);
}

/* -------- État vide "Paiements" éditorial (29/07), override payment-methods.php -------- */
body.woocommerce-account .nk-account-empty-state {
  margin: 0 0 var(--nt-space-lg);
}
body.woocommerce-account .nk-account-empty-state__title {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-lg);
  font-weight: 400;
  color: var(--nt-text-strong);
  margin: 0 0 6px;
}
body.woocommerce-account .nk-account-empty-state__body {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  line-height: var(--nt-leading-relaxed);
  color: var(--nt-text-muted);
  margin: 0 0 var(--nt-space-md);
  max-width: 480px;
}
/* CTA mis en avant (variant plein) plutôt que le filet standard des autres
   boutons — seul état vide de cette page, justifie une action plus visible.
   Réutilise strictement le contrat bouton existant (mêmes token/hauteur/
   transition), juste inversé fond/texte comme .nk-ui-btn--plein ailleurs. */
/* a.button.nk-account-empty-state__cta (2 classes + élément) : nécessaire pour
   dépasser la spécificité de la règle de base a.button (élément + 1 classe,
   même préfixe body.woocommerce-account) — un simple .nk-account-empty-state__cta
   seul perdait silencieusement (vérifié en direct : fond resté transparent). */
body.woocommerce-account a.button.nk-account-empty-state__cta {
  background: var(--nt-gold);
  color: var(--nt-bg);
}
body.woocommerce-account a.button.nk-account-empty-state__cta:hover {
  background: var(--nt-gold-dark);
  border-color: var(--nt-gold-dark);
  color: var(--nt-bg);
}

/* -------- État vide "Aucune commande" + nav mobile (29/07, passe mobile uniquement) -------- */
/* Scopé <768px : ne touche ni la version desktop de l'état vide Paiements
   (classe de base .nk-account-empty-state partagée, inchangée en desktop)
   ni la nav desktop déjà validée. */
@media (max-width: 767px) {
  /* Carte compacte, pleine largeur disponible (héritée du conteneur déjà élargi
     2 passes plus tôt — aucune marge globale retouchée ici), bouton centré
     verticalement dans une hauteur réduite. */
  body.woocommerce-account .nk-account-empty-state--orders {
    background: var(--nt-surface-1);
    border: 1px solid var(--nt-line);
    border-radius: 0;
    padding: var(--nt-space-lg) var(--nt-space-md);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
  }
  body.woocommerce-account .nk-account-empty-state--orders .nk-account-empty-state__cta {
    margin-top: var(--nt-space-xs);
  }

  /* Nav mobile : espacement vertical entre liens réduit d'environ 15%
     (var(--nt-space-xs) = 8px -> 7px). */
  body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
    margin-top: 7px;
  }

  /* Indicateur d'état actif, très discret (filet 1px, jamais de fond) —
     réintroduit sur demande explicite, mobile uniquement cette fois. */
  body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    padding-inline-start: 8px;
    border-inline-start: 1px solid transparent !important;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    border-inline-start: 1px solid var(--nt-gold) !important;
  }
}