/* ============================================================
   MON COMPTE — refonte V2.5 (03/08/2026, refonte-code, étape 8)
   Déployé dans : wp-content/themes/enfold-child/refonte-compte.css (STAGING)
   Source de vérité : maintenance-fcs/ux/refonte-compte.css
   Enfilé par : functions.php → inc/fcs-compte-avoirs.php, wp_enqueue_scripts
   prio 999, condition is_account_page(). Portée : TOUS les écrans du
   gabarit Mon compte (connexion, tableau de bord, commandes, adresses,
   informations, cartes cadeaux, avoirs).
   Budget arbitré par le manager le 04/08/2026 : 48 Ko bruts indicatifs,
   6 Ko en transit contraignants (commentaires denses conservés
   délibérément — l'allègement ne paierait qu'~3-4 Ko en transit, cf.
   CHANGELOG). ⚠️ CORRIGÉ le 05/08/2026 (dette signalée par la revue
   croisée du 04/08) : cette ligne affichait encore « 32 Ko bruts », valeur
   figée avant le Lot Connectés. Poids RÉEL mesuré après ce lot (7 écrans
   contre 1 : connexion, tableau de bord, commandes, adresses, informations,
   cartes cadeaux, avoirs) — voir rapport de livraison pour le chiffre en
   transit (dépend du réglage de minification WP Rocket au moment de la
   recette, jamais acquis d'une session à l'autre, cf. CHANGELOG).

   Variables du socle réutilisées (jamais de hex en dur pour la charte) :
   les noms conceptuels du prompt (--fcs-prune, --fcs-cta, --fcs-texte…) ne
   correspondent pas tous aux noms réels du socle — mapping complet et
   justifié dans CHANGELOG.md du skill refonte-code (03/08/2026).

   ---------------------------------------------------------------------
   LOT 0 (04/08/2026) — suppression des deux variables locales
   ---------------------------------------------------------------------
   `--fcs-avoir-prune-2` et `--fcs-avoir-radius` vivaient dans un :root
   local ci-dessus. Elles n'étaient PAS orphelines (contrairement à ce qui
   avait été rapporté) : elles étaient bien définies, donc aucun var() ne
   tombait en silence. Le défaut réel était autre — deux quasi-jumelles
   locales posées à côté de variables de charte qui existent déjà. Retirées
   sur arbitrage manager :
     - rayon  → var(--fcs-radius-lg, 20px)   (18 → 20px, écart assumé)
     - dégradé → 120° var(--fcs-rose) → var(--fcs-framboise), soit
       exactement le dégradé de la carte « Solde cartes cadeaux » de la
       maquette V2.5 : les deux onglets « solde » deviennent frères.
       ⚠️ CONTRASTE MESURÉ SUR LA PAGE RÉELLE — voir le bloc .fcs-avoir-solde.
   ============================================================ */

.fcs-avoirs {
  font-family: var(--fcs-font-text);
  color: var(--fcs-text-secondary);
  max-width: 640px;
}


/* ============================================================
   H1 DE PAGE — convention du projet, appliquée à TOUT le gabarit compte
   (arbitrage manager 04/08/2026, Lot 0)

   Jusqu'ici « Mes avoirs » était en Marcellus 28 px : c'était l'ONGLET qui
   faisait exception, pas la maquette. Les 6 frames V2.5 du compte posent
   toutes Birthstone 73-76 px, comme categorie / faq / contact / live /
   presse. « Mes avoirs » n'a aucune frame : il suit donc la convention de
   sa famille. Le « 100 % conforme » de cet onglet portait sur son CONTENU.

   Chaîne à 3 ID : mêmes raisons que refonte-live.css. `refonte-socle.css`
   pose `#top #wrap_all #main hN { line-height: var(--fcs-hn-lh, 1.25) }`,
   soit 3 ID — une règle de gabarit à 2 ID serait silencieusement morte.
   À spécificité égale, c'est l'ordre qui tranche, et refonte-compte.css
   dépend de (donc suit) refonte-socle.css.

   Sélecteur `h1` NU sans risque ici : cette feuille n'est enfilée que sur
   is_account_page(), et le rendu anonyme de /mon-compte/ mesuré le
   04/08/2026 contient ZÉRO <h1> (footer inclus). Le seul h1 de la page
   sera celui que ce lot ajoute.
   ============================================================ */
#top #wrap_all #main h1 {
  font-family: var(--fcs-font-script), cursive;
  font-size: 76px;
  font-weight: 400;
  color: var(--fcs-prune);
  --fcs-hn-lh: 1;
  line-height: 1;
  margin: 0;
}

/* ⚠️ `!important` OBLIGATOIRE ET BORNÉ AU MOBILE — même cause que sur la
   page live : Enfold pose, sous @media (max-width:767px),
   `#top #wrap_all .all_colors h1 { font-size: 35px !important }`. Aucune
   spécificité ne bat un !important. En desktop la règle adverse (80px) est
   en priorité normale : 3 ID suffisent, aucun !important posé là.

   Interligne 1.4 : écart ASSUMÉ à la maquette (qui impose 1). Birthstone a
   de longs jambages et demande ~1,37 × le corps ; à ratio 1, deux lignes se
   chevauchent nécessairement. En desktop les titres tiennent sur une ligne
   (interligne 1 conservé) ; en mobile « Mes cartes cadeaux » bascule sur
   deux lignes. Appliqué à TOUS les h1 du compte, pas seulement à celui qui
   casse aujourd'hui : le défaut est latent partout, un simple changement de
   libellé le réveillerait ailleurs. Convention identique à refonte-live.css. */
@media only screen and (max-width: 767px) {
  #top #wrap_all #main h1 {
    font-size: 40px !important;
    --fcs-hn-lh: 1.4;
    line-height: 1.4;
  }
}

/* Espacement sous le titre, quel que soit le niveau réellement rendu :
   fcs_compte_avoirs_page_has_h1() peut basculer le composant en <h2> si un
   futur réglage ajoutait un H1 global au gabarit (mesuré faux aujourd'hui). */
.fcs-avoirs-title {
  margin: 0 0 20px;
}

/* ---------- Liste de cartes ---------- */

.fcs-avoirs-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fcs-avoir-card {
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  overflow: hidden;
  background: var(--fcs-white);
  box-shadow: var(--fcs-shadow-sm);
}

/* ---------- Carte solde (dégradé prune) ---------- */

/* Dégradé de la carte solde — variables du socle uniquement, plus aucune
   quasi-jumelle locale (--fcs-avoir-prune-2 supprimée au Lot 0).

   ⚠️ DÉFAUT DE CONTRASTE DE LA MAQUETTE, PAS D'INTÉGRATION — à rejouer tel
   quel sur l'onglet Cartes cadeaux.
   La frame V2.5 « compte-cartes » pose `linear-gradient(120deg,#ef88a5,#b04d6b)`
   avec un texte BLANC. Mesuré (WCAG 2.1) : blanc sur #ef88a5 = **2,40:1** à
   l'extrémité haute-gauche, celle où se trouve justement le libellé. Sous le
   seuil AA de 4,5:1, et même sous 3:1 pour le montant en gros corps. Un
   premier arbitrage avait aligné cette carte sur la maquette : il faisait
   RÉGRESSER un onglet qui était bon (l'ancien fond prune donnait 17:1).
   Arbitrage corrigé le 04/08/2026 après mesure — on inverse le sens du
   dégradé. On garde tout ce qui motivait l'alignement (variables du socle,
   parenté visuelle avec l'onglet Cartes cadeaux) et le texte blanc repose
   désormais sur la framboise (5,10:1) puis la prune (17,02:1) : AA partout.
   4e contraste de maquette pris en défaut sur ce projet.

   ⚠️ NON VÉRIFIÉ EN CONDITIONS RÉELLES au 04/08 : le compte de recette n'a
   aucun avoir, l'onglet rend son état vide et cette carte n'est pas
   construite. Contrôle fait sur un élément temporaire uniquement. */
.fcs-avoir-solde {
  background: linear-gradient(120deg, var(--fcs-framboise), var(--fcs-prune));
  color: var(--fcs-white);
  padding: 20px;
  border-radius: var(--fcs-radius-lg, 20px) var(--fcs-radius-lg, 20px) 0 0;
}

@media (min-width: 768px) {
  .fcs-avoir-solde {
    padding: 28px;
  }
}

.fcs-avoir-solde-label {
  display: block;
  font-family: var(--fcs-font-text);
  font-size: 12px;
  font-weight: 600; /* graisse chargée : woff2 variable Jost 100-900 */
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Était --fcs-rose-clair (#f5b8c9) : lisible sur l'ancien dégradé prune,
     quasi invisible sur le nouveau fond rose (~1,3:1). Blanc = la valeur la
     plus contrastée disponible dans la charte sur ce fond, et celle que la
     maquette emploie pour le montant de la même carte. */
  color: var(--fcs-white);
  margin-bottom: 8px;
}

.fcs-avoir-solde-montant {
  font-family: var(--fcs-font-title);
  font-weight: 400; /* Marcellus, un seul poids chargé */
  font-size: 38px;
  line-height: 1;
}

@media (min-width: 768px) {
  .fcs-avoir-solde-montant {
    font-size: 52px;
  }
}

/* wc_price() rend un <bdi> avec la devise en <span> — même graisse/famille,
   pas de style additionnel nécessaire au-delà de l'héritage. */
.fcs-avoir-solde-montant bdi {
  font-family: inherit;
  font-weight: inherit;
}

/* ---------- Corps de carte (secondaire, fond blanc) ---------- */

.fcs-avoir-body {
  padding: 22px 24px;
}

.fcs-avoir-code-row {
  display: flex;
  flex-wrap: wrap; /* zéro défilement horizontal à 375px */
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.fcs-avoir-code {
  font-family: var(--fcs-font-text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--fcs-prune);
  word-break: break-all;
}

.fcs-avoir-copie {
  /* Un vrai <button>, pas un <span> cliquable. Cible tactile ≥44px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 112px; /* réserve la largeur du plus long libellé ("Copié ✓") → zéro CLS */
  padding: 10px 18px;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border: none;
  border-radius: var(--fcs-radius-pill);
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--fcs-duration-micro) var(--fcs-ease-out),
              opacity var(--fcs-duration-micro) var(--fcs-ease-out),
              background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-avoir-copie:hover {
  background: #8f3a55; /* même hover framboise que le CTA sitewide (.fcs-btn-rose, étape 3/7) */
}

.fcs-avoir-copie:active {
  transform: scale(.97);
}

.fcs-avoir-copie:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

.fcs-avoir-copie.is-copied {
  background: var(--fcs-prune);
}

.fcs-avoir-initial,
.fcs-avoir-validite {
  font-size: 14px;
  color: var(--fcs-text-subtle); /* ~4,7:1 sur blanc, mesuré — AA ok pour ce corps de texte */
  margin: 0 0 6px;
}

.fcs-avoir-jamais-utilise {
  font-size: 13.5px;
  color: var(--fcs-text-subtle);
  font-style: italic;
  margin: 10px 0 0;
}

/* ---------- Historique <details>/<summary> natif ---------- */

.fcs-avoir-historique {
  margin-top: 12px;
  border-top: 1px solid #f7ecef;
  padding-top: 12px;
}

/* Collision elementFromPoint (375px) : coin du <summary> capté par le
   badge Société des Avis Garantis (.agJsWidget, fixed). Cause racine =
   caractéristique PRÉ-EXISTANTE et SITEWIDE de Customize My Account Pro
   (frontend.css, colonne 68% + gouttière gauche fantôme ~130px), vérifiée
   identique sur /mon-compte/orders/ (jamais touchée) — pas un défaut du
   composant, pas le CSS du plugin. fit-content seul ne suffit pas si le
   texte s'enroule ; max-width fixe garde la zone cliquable à distance du
   badge. Détail complet + mesures : CHANGELOG.md du skill (03/08/2026). */
.fcs-avoir-historique summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--fcs-framboise);
  min-height: 44px;
  width: fit-content;
  max-width: 130px;
  display: flex;
  align-items: center;
  list-style: none; /* on garde le marqueur natif du navigateur (accessibilité gratuite) via ::-webkit-details-marker ci-dessous, retiré seulement visuellement du flex */
}

.fcs-avoir-historique summary::-webkit-details-marker {
  margin-right: 8px;
}

.fcs-avoir-historique summary:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

/* Le <details> qui s'ouvre pousse le contenu EN DESSOUS, jamais au-dessus :
   comportement natif du flux normal, rien à forcer ici. */
.fcs-avoir-historique-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcs-avoir-historique-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--fcs-radius-sm);
  background: var(--fcs-bg-soft);
}

.fcs-avoir-hist-date {
  color: var(--fcs-text-subtle);
}

.fcs-avoir-hist-label {
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-avoir-hist-commande {
  color: var(--fcs-text-subtle);
  grid-column: 2;
}

.fcs-avoir-hist-montant {
  font-weight: 600;
}

.fcs-avoir-hist-solde {
  grid-column: 1 / -1;
  color: var(--fcs-text-subtle);
}

/* ---------- État vide ---------- */

.fcs-avoirs-empty {
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  background: var(--fcs-white);
  padding: 32px 24px;
  text-align: center;
}

.fcs-avoirs-empty-icon {
  color: var(--fcs-framboise);
  margin-bottom: 14px;
}

.fcs-avoirs-empty-title {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 20px;
  color: var(--fcs-prune);
  margin: 0 0 10px;
}

.fcs-avoirs-empty-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fcs-text-subtle);
  max-width: 44ch;
  margin: 0 auto 22px;
}

.fcs-avoirs-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border-radius: var(--fcs-radius-pill);
  padding: 12px 24px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              transform var(--fcs-duration-micro) var(--fcs-ease-out);
}

.fcs-avoirs-empty-cta:hover {
  background: #8f3a55;
}

.fcs-avoirs-empty-cta:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

/* ---------- Note de bas de bloc ---------- */

.fcs-avoirs-footnote {
  font-size: 13px;
  color: var(--fcs-text-subtle);
  margin-top: 22px;
}

/* Annonce lecteur d'écran uniquement (aria-live) — jamais visible */
.fcs-avoirs-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   ÉCRAN CONNEXION / INSCRIPTION — frame V2.5 « connexion »
   (Lot Connexion, 04/08/2026)

   Balisage CONSTATÉ le 04/08/2026 sur le staging (jamais supposé) :
     #customer_login.u-columns.col2-set
       > .u-column1.col-1  > h2 + form.woocommerce-form-login.login
       > .u-column2.col-2  > h2 + form.woocommerce-form-register.register
   `#main` porte bien `.all_colors` (vérifié en anonyme ET en connectée).
   Le bandeau de titre est injecté par fcs_compte_login_hero() en PHP.
   ============================================================ */

/* ---------- Bandeau de titre ----------
   Pleine largeur réelle : technique 100vw + marges négatives, déjà éprouvée
   sur la bande de réassurance du footer (refonte-footer.css, 03/08). Elle est
   insensible aux paddings des conteneurs Enfold parents, contrairement à un
   simple width:100%. */
.fcs-login-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* #fdfbfa = fond de page du prototype, sans équivalent socle : laissé en
     hex, comme les autres valeurs uniques du projet (#f7ecef, #8f3a55). On
     ne crée pas une variable de charte pour une valeur employée une fois. */
  background: linear-gradient(135deg, var(--fcs-bg-soft) 0%, #fdfbfa 60%);
  padding: 56px 24px;
  text-align: center;
  box-sizing: border-box;
}

/* Le corps du titre est gouverné par la règle h1 à 3 ID plus haut
   (Birthstone 76/40) — on ne redéclare ici que ce qui lui est propre. */
.fcs-login-intro {
  margin: 10px auto 0;
  max-width: 62ch;
  font-family: var(--fcs-font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fcs-text-muted);
}

/* ---------- Grille des deux colonnes ---------- */

/* Enfold pose ses propres largeurs/flottants sur .col2-set / .u-column* :
   2 ID suffisent à les battre (règles adverses en priorité normale). */
#top #main.all_colors #customer_login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 26px 0 8px;
  margin: 0;
}

/* Deux colonnes seulement à partir de 992px — et NON 768px comme dans un
   premier jet. Deux raisons mesurées, aucune supposée :
   1. `1fr` vaut `minmax(auto, 1fr)` : la colonne inscription contient le
      widget reCAPTCHA, large de 302px INCOMPRESSIBLES. Sa min-content
      l'emporte et la grille dégénère — mesuré à 768px : 246px / 378px au
      lieu de deux colonnes égales. D'où `minmax(0, 1fr)`, qui autorise la
      piste à descendre sous la min-content de son contenu.
   2. Même corrigée, deux colonnes à 768px donnent ~312px chacune, dont 72px
      de padding de carte : 240px utiles pour un formulaire, c'est à l'étroit
      et le reCAPTCHA y frôle le bord. La maquette V2.5 ne décrit QUE le
      desktop (1440px) et le mobile (390px) : le palier tablette est un
      arbitrage d'intégration, signalé comme tel au manager. */
@media only screen and (min-width: 992px) {
  #top #main.all_colors #customer_login {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    padding: 52px 0 28px;
  }
}

/* Enfold/WooCommerce posent width + float sur ces colonnes : neutralisés,
   sinon la grille ci-dessus est mise en échec par des largeurs en % . */
#top #main.all_colors #customer_login .u-column1,
#top #main.all_colors #customer_login .u-column2 {
  width: auto;
  float: none;
  margin: 0;
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 22px 18px;
  box-shadow: var(--fcs-shadow-sm);
}

@media only screen and (min-width: 768px) {
  #top #main.all_colors #customer_login .u-column1,
  #top #main.all_colors #customer_login .u-column2 {
    padding: 36px;
  }
}

/* Titres de colonne : Marcellus 21px mobile / 26px desktop.
   `--fcs-hn-lh` posée SUR LE TITRE (jamais sur un conteneur : une propriété
   personnalisée est héritée et repeindrait tous les titres descendants). */
#top #main.all_colors #customer_login > div > h2 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 21px;
  --fcs-hn-lh: 1.25;
  line-height: 1.25;
  color: var(--fcs-prune);
  margin: 0 0 16px;
}

@media only screen and (min-width: 768px) {
  #top #main.all_colors #customer_login > div > h2 {
    font-size: 26px;
  }
}

/* ---------- Champs : étiquette haute à l'intérieur du cadre ----------
   La maquette montre TOUTES les étiquettes en position haute, sans aucun
   état « descendu » : c'est donc un placement STATIQUE, pas un label
   flottant. Aucun :placeholder-shown, aucun JS — ce qui tombe bien, car
   WooCommerce ne pose pas de `placeholder` sur ces champs (vérifié dans le
   HTML rendu) : un label flottant y serait resté bloqué en position basse. */
#top #main.all_colors #customer_login .form-row {
  position: relative;
  margin: 0 0 14px;
  padding: 0;
}

/* ⚠️ `:not(.woocommerce-form__label-for-checkbox)` n'est PAS un ornement.
   Sans lui, cette règle capture aussi l'étiquette de la case « Se souvenir de
   moi » — qui est un <label> dans un .form-row comme les autres — et la passe
   en position:absolute. Combinée au `display:contents` du <p> qui l'enveloppe
   (lequel ne génère alors plus de bloc conteneur), l'étiquette remontait se
   caler sur un ancêtre positionné lointain : mesurée à top:127px, soit
   AU-DESSUS du titre « Se connecter » (top:156px).
   Première tentative de correctif : `position: static` dans la règle
   `.woocommerce-form-login__rememberme` ci-dessous. Elle a ÉCHOUÉ, et contre
   mon propre CSS : `… .form-row label` (3 ID + 2 classes + 1 élément) bat
   `… .woocommerce-form-login__rememberme` (3 ID + 2 classes, pas d'élément).
   On exclut donc la case à la source plutôt que de la rattraper après coup. */
#top #main.all_colors #customer_login .form-row > label:not(.woocommerce-form__label-for-checkbox) {
  position: absolute;
  left: 16px;
  top: 7px;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-family: var(--fcs-font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  /* Maquette : #c05a78 (--fcs-framboise-clair). ÉCART ASSUMÉ ET MESURÉ :
     ce ton donne ~4,2:1 sur blanc, sous le seuil AA de 4,5:1, et ces
     étiquettes font 11px (donc « texte normal », seuil plein). On prend
     --fcs-framboise (#b04d6b, ~5,1:1 mesuré) : écart de teinte invisible à
     l'œil, conformité AA retrouvée. Le socle documente lui-même ce piège. */
  color: var(--fcs-framboise);
  pointer-events: none;
}

/* L'astérisque « obligatoire » de WooCommerce : conservé (accessibilité et
   information réelle), simplement aligné sur la couleur de l'étiquette. */
#top #main.all_colors #customer_login .form-row > label .required {
  color: inherit;
  text-decoration: none;
  border: none;
}

#top #main.all_colors #customer_login .form-row .input-text {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm, 10px);
  padding: 22px 16px 8px;
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  color: var(--fcs-prune);
  /* Fond blanc déjà imposé par le Quick CSS Enfold
     (`#top .input-text { background:#fff !important }`) : on ne le
     redéclare pas, ce serait du bruit — la valeur voulue est la même. */
  box-shadow: none;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors #customer_login .form-row .input-text:focus {
  border-color: var(--fcs-rose);
  outline: 2px solid var(--fcs-framboise);
  outline-offset: 1px;
}

/* ---------- Ligne « Se souvenir de moi » + « Mot de passe perdu ? » ----------
   Contrainte de balisage : WooCommerce met la case À COCHER, les champs
   cachés ET le bouton dans un MÊME <p class="form-row">, alors que le lien
   « Mot de passe perdu ? » vit dans un <p> SUIVANT. La maquette veut la case
   et le lien sur une seule ligne, puis le bouton pleine largeur en dessous.

   `display: contents` sur ce <p> promeut ses enfants au rang d'éléments flex
   du <form> : case, bouton et lien deviennent alors frères, et trois `order`
   suffisent à les remettre dans l'ordre voulu. Les <input type="hidden">
   n'apparaissent pas (display:none de la feuille du navigateur), donc aucun
   élément fantôme dans le flex. */
/* Enfold enveloppe TOUT <form> d'une boîte grise : mesuré sur la page réelle,
   background rgb(242,242,242) + padding 20px. La maquette n'a pas de boîte
   dans la boîte — la carte blanche EST le contenant. Neutralisé sur les deux
   formulaires de l'écran. */
#top #main.all_colors #customer_login form.login,
#top #main.all_colors #customer_login form.register {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

#top #main.all_colors #customer_login form.login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 12px;
}

#top #main.all_colors #customer_login form.login > .form-row-wide {
  flex: 0 0 100%;
  margin-bottom: 0;
}

/* Le <p> qui empaquette case + bouton (seul .form-row SANS .form-row-wide) */
#top #main.all_colors #customer_login form.login > .form-row:not(.form-row-wide) {
  display: contents;
}

#top #main.all_colors #customer_login .woocommerce-form-login__rememberme {
  order: 0;
  margin-right: auto;
  /* Ni `position: static` ni `pointer-events: auto` ici : la règle
     d'étiquette de champ exclut désormais cette case (voir le :not()
     ci-dessus), donc les deux seraient des no-op. On ne pose pas de
     neutralisation « par prudence » — c'est du bruit qu'une revue devrait
     retirer ensuite. */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--fcs-text-secondary);
  cursor: pointer;
  min-height: 44px; /* cible tactile */
}

#top #main.all_colors #customer_login .woocommerce-form-login__rememberme input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--fcs-framboise);
  cursor: pointer;
}

#top #main.all_colors #customer_login .woocommerce-LostPassword {
  order: 1;
  margin: 0;
  font-size: 13.5px;
}

/* Cible tactile : le <a> nu ne faisait que 19 px de haut (mesuré à 375 px).
   Passé en inline-flex à 44 px de haut — ce qui l'aligne du même coup sur la
   case « Se souvenir de moi » (44 px) posée sur la même ligne. Le soulignement
   reste collé au texte grâce au border-bottom porté par un <span> interne
   impossible ici : on garde donc text-decoration, qui suit le texte et non la
   boîte, contrairement au border-bottom qui se serait posé à 44 px du haut. */
#top #main.all_colors #customer_login .woocommerce-LostPassword a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fcs-framboise);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--fcs-rose);
  text-underline-offset: 3px;
}

/* ---------- Boutons ----------
   Quick CSS Enfold (servi APRÈS cette feuille) pose
   `.woocommerce-page .button { padding:15px; font-size:18px;
    border-radius:10px; text-transform:uppercase }` en priorité NORMALE :
   2 ID la battent, aucun !important nécessaire ici. */
#top #main.all_colors #customer_login .button {
  order: 2;
  flex: 0 0 100%;
  min-height: 48px;
  padding: 15px 24px;
  border-radius: var(--fcs-radius-pill);
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border: 1.5px solid var(--fcs-framboise);
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              color var(--fcs-duration-fast) var(--fcs-ease-out),
              transform var(--fcs-duration-micro) var(--fcs-ease-out);
}

/* Colonne « S'inscrire » : bouton en contour (maquette). */
#top #main.all_colors #customer_login .u-column2 .button {
  background: transparent;
  color: var(--fcs-framboise);
}

/* ⚠️ `!important` OBLIGATOIRE ET JUSTIFIÉ — la règle adverse l'est aussi.
   Quick CSS Enfold : `.ppcp-dcc-order-button:hover, .woocommerce-page
   .button:hover { background-color:#000c !important }`. Sans cela, le survol
   de TOUS les CTA du compte vire au noir translucide. Aucune spécificité ne
   bat un !important : c'est le seul cas de figure où le skill l'autorise, et
   la priorité de la règle adverse a été relevée par getPropertyPriority sur
   la page réelle (voir rapport de livraison), pas déduite d'une lecture. */
#top #main.all_colors #customer_login .button:hover,
#top #main.all_colors #customer_login .button:focus-visible {
  background-color: #8f3a55 !important; /* hover framboise du CTA sitewide */
  color: var(--fcs-white);
  border-color: #8f3a55;
}

#top #main.all_colors #customer_login .button:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

#top #main.all_colors #customer_login .button:active {
  transform: scale(.985);
}

/* ---------- Colonne inscription : textes d'accompagnement ---------- */

/* Le <p> d'explication WooCommerce (« Un lien permettant de définir un
   nouveau mot de passe… ») et la mention RGPD. Textes de PRODUCTION,
   inchangés — seule leur mise en forme est reprise. */
#top #main.all_colors #customer_login form.register > p:not(.form-row),
#top #main.all_colors #customer_login .woocommerce-privacy-policy-text p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fcs-text-subtle);
  margin: 0 0 14px;
}

#top #main.all_colors #customer_login .woocommerce-privacy-policy-text a {
  color: var(--fcs-framboise);
}

#top #main.all_colors #customer_login form.register {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Le widget reCAPTCHA fait 302px de large et débordait à 375px : il est mis
   à l'échelle plutôt que rogné (aucun défilement horizontal autorisé).
   transform-origin à gauche pour rester aligné sur les champs. */
#top #main.all_colors #customer_login .g-recaptcha {
  margin: 4px 0 14px;
  max-width: 100%;
}

@media only screen and (max-width: 400px) {
  #top #main.all_colors #customer_login .g-recaptcha {
    transform: scale(.86);
    transform-origin: left top;
    height: 66px; /* réserve la hauteur réduite → zéro CLS */
  }
}

/* ---------- Motion ----------
   Pas de cascade d'entrée sur ce gabarit : aucun JS n'observe/n'anime les
   cartes ici (choix délibéré, cf. rapport de livraison — "si et seulement
   si" le socle motion serait mobilisé pour rien sur une page lue une fois,
   sans defilement long). Seule micro-interaction animée : le bouton
   "Copier" ci-dessus (transform/opacity, 150-300ms), couverte par le
   garde-fou global prefers-reduced-motion du socle (refonte-socle.css). */

/* ============================================================
   ÉCRANS CONNECTÉS — LOT « CONNECTÉS » (05/08/2026, nuit)
   Tableau de bord · Commandes · Adresses · Informations · Cartes cadeaux

   Balisage CONSTATÉ (jamais supposé), curl authentifié sur le compte de
   test staging le 05/08/2026 :
     .woocommerce
       > .fcs-compte-hero                    (injecté par fcs_compte_hero_band(),
                                                woocommerce_before_account_navigation)
       > nav.woocommerce-MyAccount-navigation  (Customize My Account Pro, style_01)
           > ul.wcmamtx_vertical.style_01 > li.woocommerce-MyAccount-navigation-link
       > .woocommerce-MyAccount-content
           orders       → .wcmam-order-filters + .wcmam-order-card[data-status] (CMA Pro)
           edit-address → .u-columns.woocommerce-Addresses > .woocommerce-Address (WC core)
           edit-account → form.woocommerce-EditAccountForm (WC core, aucune surcharge)
           gift-cards   → .fcs-cartes-hero (nous) + .gift-card-panel-title-container
                          + table.my_account_giftcards (YITH Gift Cards)
           dashboard    → .fcs-dash-tiles + .fcs-dash-lastorder (nous) + grille de
                          raccourcis .wcmtx_def1-dashboard (CMA Pro, laissée en dessous)

   0 surcharge de template introduite par ce lot (budget registre inchangé,
   0/4) : uniquement des hooks WooCommerce/YITH standards + CSS.
   ============================================================ */

/* ---------- Grille 2 colonnes : sidebar 280px + contenu ----------
   `.woocommerce` a pour SEULS enfants directs : le hero (nous), <nav> et
   .woocommerce-MyAccount-content (vérifié dans le HTML rendu). Le hero
   reçoit `grid-column:1/-1` (ligne 1 pleine largeur) ; nav + content
   refluent automatiquement en ligne 2, colonnes 1 et 2. Zéro JS.

   ⚠️ BUG CORRIGÉ le 05/08/2026, trouvé en vérification navigateur réelle
   (miroir local, cf. rapport) : le sélecteur portait `.woocommerce-account`
   comme si c'était un descendant de `#main` — c'est FAUX, c'est une classe
   posée sur `<body>`, donc un ANCÊTRE de `#main`, jamais un descendant. La
   règle ne matchait donc JAMAIS (`getComputedStyle` mesuré : `display:block`,
   `grid-template-columns:none`), et la sidebar héritait une largeur de
   356px au lieu de 280px. `is_account_page()` dans l'enqueue PHP suffit déjà
   à scoper ce fichier aux pages compte : la classe body était redondante EN
   PLUS d'être mal placée — retirée plutôt que corrigée en
   `body.woocommerce-account #top #main.all_colors .woocommerce`, plus
   simple et tout aussi sûr. */
/* ⚠️ 2e BUG CORRIGÉ le 05/08/2026 sur cette même règle, trouvé en
   vérification navigateur réelle À 375px (le premier bug — classe body mal
   placée — ne se voyait qu'à 992px+) : `1fr` seul vaut `minmax(auto,1fr)`,
   et le "auto" (min-content) d'un item de grille n'est PAS borné par son
   propre `overflow-x:auto` interne. Mesuré : `nav.woocommerce-MyAccount-
   navigation` s'étalait à **2917px** (la somme des largeurs de ses 13
   pastilles de nav en `flex-direction:row` mobile, cf. plus bas) au lieu de
   tenir dans les 319px du track — le texte "Hello Test… Log out" ET la
   quasi-totalité des pastilles de nav devenaient inaccessibles, invisibles
   hors-écran, `document.body.scrollWidth` restant à 375 (pas de scroll
   PAGE, juste un débordement interne clippé par un ancêtre Enfold en
   `overflow-x:hidden`). Même piège que `1fr` sur les colonnes déjà catalogué
   dans ce fichier (reCAPTCHA, connexion), mais côté ITEM plutôt que côté
   TRACK : `minmax(0,1fr)` sur la colonne ne suffit pas seul, il faut AUSSI
   que l'item n'impose pas son min-content — d'où le `minmax(0,1fr)` ici
   ET en desktop, déjà present là mais pas encore ici en mobile. */
#top #main.all_colors .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 28px;
}

@media only screen and (min-width: 992px) {
  /* ⚠️ BUG CORRIGÉ le 06/08/2026 (constaté en prod par la gérante) : cette
     grille 280px/1fr s'appliquait AUSSI à l'écran connexion/inscription
     (même page /mon-compte/, visiteuse déconnectée, `is_account_page()`
     identique) alors que ses enfants (#customer_login, notices) n'ont AUCUN
     placement explicite ci-dessous → #customer_login auto-placé dans la
     piste sidebar de 280px, cartes écrasées à ~118px. Scope ajouté :
     `body.logged-in` (classe WordPress core) — déconnectée, la règle de base
     ci-dessus (1 colonne pleine largeur) s'applique, comme sur mobile. */
  body.logged-in #top #main.all_colors .woocommerce {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 12px 44px;
  }

  /* Placement EXPLICITE (05/08/2026, extension du lot) : l'ajout de
     .fcs-compte-profile (§9.1) comme 3e enfant direct de .woocommerce a
     cassé l'auto-placement à 2 colonnes qui fonctionnait avec seulement
     3 enfants (hero pleine largeur + nav + content) — avec 4 enfants,
     l'algorithme par défaut (remplissage ligne par ligne) plaçait la
     carte profil en ligne 2 colonne 1 et poussait <nav> en ligne 2
     colonne 2 (à la place du contenu), cassant tout le gabarit. Chaque
     enfant reçoit désormais sa position exacte — aucune dépendance à
     l'ordre du DOM au-delà de ce que ces règles fixent explicitement. */
  #top #main.all_colors .woocommerce > .fcs-compte-hero,
  #top #main.all_colors .woocommerce > .fcs-login-hero {
    grid-row: 1;
  }

  #top #main.all_colors .woocommerce > .fcs-compte-profile {
    grid-column: 1;
    grid-row: 2;
  }

  #top #main.all_colors .woocommerce > nav.woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 3;
  }

  #top #main.all_colors .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
}

/* ---------- Bandeau titre + fil d'Ariane (5 écrans, fcs_compte_hero_band) ----------
   Même famille visuelle que .fcs-login-hero (dégradé doux, pleine largeur
   réelle en 100vw), mais SANS le débordement 100vw ici : contrairement à
   l'écran connexion (page seule, pas de sidebar), ce bandeau doit rester
   DANS la largeur du conteneur Enfold pour s'aligner avec la grille
   sidebar/contenu juste en dessous — un 100vw casserait cet alignement. */
.fcs-compte-hero {
  grid-column: 1 / -1;
  padding: 28px 0 4px;
}

@media only screen and (min-width: 992px) {
  .fcs-compte-hero {
    padding: 36px 0 8px;
  }
}

.fcs-compte-breadcrumb {
  font-family: var(--fcs-font-text);
  font-size: 12.5px;
  color: var(--fcs-text-subtle);
  margin-bottom: 8px;
}

.fcs-compte-breadcrumb a {
  color: var(--fcs-text-subtle);
  text-decoration: none;
}

.fcs-compte-breadcrumb a:hover {
  color: var(--fcs-framboise);
}

.fcs-compte-breadcrumb span[aria-hidden] {
  margin: 0 6px;
}

.fcs-compte-breadcrumb span[aria-current] {
  color: var(--fcs-framboise, #b04d6b);
}

/* Le h1 lui-même est gouverné par la règle sitewide à 3 ID plus haut dans
   ce fichier (Birthstone 76/40, interligne corrigé) — rien à redéclarer. */

/* ---------- Sidebar : avatar + salutation (markup CMA Pro) ----------
   ⚠️ REVIRÉ le 05/08/2026 (extension du lot, demande gérante après recette
   compat exhaustive) : le lot précédent RESTYLAIT ce widget natif (upload
   Gravatar conservé). La gérante a vu le résultat en prod et tranché : hors
   maquette et partiellement en anglais (« Hello X (not X? Log out) »,
   chaîne par défaut du plugin — PAS un gettext, cf. commentaire PHP
   fcs_compte_profile_card()). MASQUÉ ici (fonctionnalité d'upload Gravatar
   perdue, assumé — aucune autre fonctionnalité que l'affichage du nom/mail
   ne dépendait de ce bloc), REMPLACÉ par .fcs-compte-profile (§9.1, PHP) —
   cf. son style plus bas dans cette section. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation .wcmamtx_upload_div,
#top #main.all_colors nav.woocommerce-MyAccount-navigation #wcmamtx-avatar-content-output {
  display: none;
}

/* ---------- Bloc profil maison, À PLAT (.fcs-compte-profile, PHP §9.1) ----------
   ⚠️ 05/08/2026 (dernière retouche du lot, décision gérante verbatim :
   « il n'est pas censé y avoir de carte », capture de la vraie maquette
   sous les yeux). VÉRIFIÉ sur le staging réel avant de conclure (jamais
   supposé) : `getComputedStyle` sur `.fcs-compte-profile`,
   `nav.woocommerce-MyAccount-navigation` et son `ul.wcmamtx_vertical`
   rendait déjà `background:rgba(0,0,0,0)` / `border:0px none` /
   `box-shadow:none` avant cette retouche — aucune "carte" (fond blanc,
   bordure, ombre) n'entourait ce bloc, ni ici ni ailleurs dans ce fichier.
   Règles ci-dessous posées EXPLICITEMENT malgré ce constat : documentent
   l'intention (jamais de carte sur ce bloc, contrairement aux tuiles de la
   colonne de droite) et servent de garde-fou contre une régression future
   (ex. un correctif générique `.fcs-*` qui ajouterait par erreur un fond
   blanc à TOUT bloc de ce gabarit). Seule décoration voulue par la
   maquette : le cercle avatar (rond pâle + initiale) et la pastille pleine
   framboise de l'item de menu ACTIF — aucune autre. */
.fcs-compte-profile {
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 18px;
}

.fcs-compte-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise, #b04d6b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fcs-font-title);
  font-size: 22px;
  flex: none;
}

.fcs-compte-profile-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fcs-compte-profile-hello {
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-compte-profile-email {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 20px;
  /* Filet de sécurité en plus de `minmax(0,1fr)` sur `.woocommerce` : cet
     item de grille contient un enfant `overflow-x:auto` dont le contenu ne
     s'enroule jamais (`ul.wcmamtx_vertical` en `flex-direction:row` sur
     mobile) — sans ce `min-width:0` explicite ICI aussi, un changement
     futur du track parent pourrait réintroduire le débordement à 2917px
     mesuré le 05/08/2026 (texte + nav invisibles, hors-écran). */
  min-width: 0;
}

/* ⚠️ 3e BUG trouvé À LA MÊME PASSE de vérification 375px : Customize My
   Account Pro pose (frontend.css, `@media(max-width:768px)`, sans
   `!important`) `.woocommerce-MyAccount-content{float:right;width:68%}` —
   DÉJÀ documenté comme défaut PRÉ-EXISTANT et sitewide le 03/08/2026 (étape
   8, gouttière fantôme ~130px), mais jusqu'ici seulement contourné au cas
   par cas (max-width sur un élément voisin). Avec la grille posée par ce
   lot, l'effet change de forme sans disparaître : contenu mesuré à 216,75px
   au lieu de 318,75px (318,75 × 0,68 = 216,75, calcul exact) — un vide de
   ~102px à droite au lieu d'à gauche. 2 ID battent 0 ID sans !important :
   neutralisé à la racine ici, plutôt que recontourné localement une 5e
   fois. */
#top #main.all_colors .woocommerce-MyAccount-content {
  min-width: 0;
  width: 100%;
  float: none;
}

@media only screen and (min-width: 992px) {
  #top #main.all_colors nav.woocommerce-MyAccount-navigation {
    margin: 0;
  }
}

/* Nettoyage 05/08/2026 (extension du lot) : les règles qui stylaient en
   détail .wcmamtx_upload_div / .wcmamtx_avatar_wrap img / .wcmamtx_camera_icon
   / #wcmamtx-avatar-content-output (upload Gravatar + salutation natifs) ont
   été RETIRÉES ici — ces sélecteurs ne stylent plus rien de visible depuis
   que le bloc est passé en `display:none` juste au-dessus (remplacé par
   .fcs-compte-profile). Nettoyage du SÉLECTEUR mort, pas de la propriété :
   aucun de ces sélecteurs n'est partagé avec un élément encore affiché. */

/* ---------- Sidebar : liste de navigation ----------
   13 entrées réelles constatées (vs 8 dans la maquette, simplifiée) : toutes
   stylées de façon identique — retirer les entrées absentes de la maquette
   (Téléchargements, Moyens de paiement, Parrainages…) supprimerait une
   fonctionnalité réelle, hors mandat. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation ul.wcmamtx_vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link {
  margin: 0;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--fcs-radius-md, 14px);
  font-family: var(--fcs-font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--fcs-text-secondary);
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a:hover {
  background: var(--fcs-bg-soft);
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a .wcmamtx_fa_icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex: none;
  /* Les couleurs d'icône posées en style inline par le plugin (dashboard,
     cf. .wcmtx_def1-dashboard plus bas) ne s'appliquent PAS ici : cette
     icône-ci n'a pas de style inline dans la nav (vérifié). currentColor
     hérite proprement de la couleur du lien, actif ou non. */
  color: currentColor;
}

/* Icônes emoji (maquette) à la place de Font Awesome (05/08/2026, extension
   du lot) — aucun hook de rendu d'icône dans le template du plugin (icône
   imprimée en dur dans la boucle, vérifié dans le code source) : recomposé
   en CSS, `content` sur un pseudo-élément par clé de menu réelle. Icône FA
   masquée (`font-size:0`, pas `display:none` : conserve sa largeur `flex:
   none` réservée par la règle ci-dessus, évite un micro-saut de layout
   entre les libellés selon que l'item a ou non un correctif emoji). */
#top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a .wcmamtx_fa_icon {
  font-size: 0;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--liste .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--my-points .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--gift-cards .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--mes-avoirs .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--retour .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--affiliate-dashboard .wcmamtx_fa_icon::before,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout .wcmamtx_fa_icon::before {
  font-size: 15px;
  font-family: initial; /* neutralise la police d'icônes Font Awesome héritée, sinon l'emoji peut être rendu par ce glyphset */
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard .wcmamtx_fa_icon::before { content: "🏠"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders .wcmamtx_fa_icon::before { content: "📦"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--liste .wcmamtx_fa_icon::before { content: "♡"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--my-points .wcmamtx_fa_icon::before { content: "⭐"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--gift-cards .wcmamtx_fa_icon::before { content: "🎁"; }
/* 💶 (billet euro) : demande gérante du 05/08/2026 (« garde mes avoirs et
   bascule ») — distinct de 🎁 (cartes cadeaux physiques/à offrir) et ⭐
   (points fidélité), cohérent avec le rôle "cagnotte/avoir en argent" de
   cet onglet. Reste dans le style emoji de la liste, pas de nouvelle
   convention introduite. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--mes-avoirs .wcmamtx_fa_icon::before { content: "💶"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address .wcmamtx_fa_icon::before { content: "📍"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account .wcmamtx_fa_icon::before { content: "👤"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--retour .wcmamtx_fa_icon::before { content: "↩"; }
/* 🤝 corrigé le 05/08/2026 (dernière retouche) : posé à tort sur `referrals`
   (Parrainages, YITH) — la maquette montre « Espace affilié », qui
   correspond en réalité à l'endpoint `affiliate-dashboard` (programme
   d'affiliation), pas à `referrals`. `referrals` reste visible (jamais
   masqué par ce lot, non touché ici) mais garde son icône Font Awesome
   native, faute d'emoji dédié dans le jeu de la maquette. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--affiliate-dashboard .wcmamtx_fa_icon::before { content: "🤝"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout .wcmamtx_fa_icon::before { content: "⎋"; }

/* Menu : 5 entrées masquées en DERNIER RECOURS CSS (05/08/2026, extension
   du lot puis tout dernier ajustement — `referrals`/Parrainages ajouté en
   toute fin de journée, décision gérante sur capture exacte de la
   maquette : « … Effectuer un retour, Espace affilié, Déconnexion — pas de
   Parrainages ») — `unset()` PHP (fcs_compte_menu_curate) est sans effet
   dessus, Customize My Account Pro les réaffiche depuis SA PROPRE option
   `wcmamtx_advanced_settings` quel que soit le contenu du tableau filtré
   (constat empirique détaillé dans le commentaire PHP de
   fcs_compte_menu_curate). Fonctionnalité PRÉSERVÉE : chaque endpoint
   reste joignable par URL directe, seule l'entrée de menu disparaît. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--custom-link-118479,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--tickets,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--referrals {
  display: none;
}

/* Libellés : MÊME piège que la visibilité (§ commentaire PHP
   fcs_compte_menu_curate) — Customize My Account Pro rend le TEXTE de ses
   clés connues depuis sa propre option `wcmamtx_advanced_settings`
   (`endpoint_name`), pas depuis ce que notre filtre `woocommerce_account_
   menu_items` lui passe : "Commandes"/"Cartes cadeau"/"Adresses"/"Détails
   du compte"/"Mes points" mesurés en réel le 05/08/2026, tous différents
   du libellé maquette. `retour` (NOTRE PROPRE clé, jamais dans l'option
   CMA) est ELLE AUSSI réécrite en "Retours" par un mécanisme distinct —
   pas la même option (absente du dump `wp option get wcmamtx_advanced_
   settings`), cause exacte non identifiée (vraisemblablement une table de
   libellés par défaut interne à CMA Pro qui reconnaît le slug "retour"),
   corrigée par le même filet CSS plutôt que creusée plus loin — le
   symptôme et le remède sont identiques quelle qu'en soit la cause interne.
   Remède : texte natif rendu invisible (`font-size:0`, même technique que
   les icônes plus haut — jamais `display:none`, qui retirerait le texte de
   l'arbre d'accessibilité) puis remplacé par un `::after` au bon libellé,
   `font-size` explicite dessus pour ne pas hériter le 0 du parent. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders .wcmamtx_sticky_icon_name,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--gift-cards .wcmamtx_sticky_icon_name,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address .wcmamtx_sticky_icon_name,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account .wcmamtx_sticky_icon_name,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--my-points .wcmamtx_sticky_icon_name,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--retour .wcmamtx_sticky_icon_name {
  font-size: 0;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders .wcmamtx_sticky_icon_name::after,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--gift-cards .wcmamtx_sticky_icon_name::after,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address .wcmamtx_sticky_icon_name::after,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account .wcmamtx_sticky_icon_name::after,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--my-points .wcmamtx_sticky_icon_name::after,
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--retour .wcmamtx_sticky_icon_name::after {
  font-size: 14.5px;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders .wcmamtx_sticky_icon_name::after { content: "Mes commandes"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--gift-cards .wcmamtx_sticky_icon_name::after { content: "Mes cartes cadeaux"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address .wcmamtx_sticky_icon_name::after { content: "Mes adresses"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account .wcmamtx_sticky_icon_name::after { content: "Mes informations"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--my-points .wcmamtx_sticky_icon_name::after { content: "Mes points fidélité"; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--retour .wcmamtx_sticky_icon_name::after { content: "Effectuer un retour"; }

/* Ordre visuel FORCÉ (05/08/2026, dernière retouche du lot) — BUG RÉEL
   trouvé en vérifiant le filet avant Déconnexion : `customer-logout` (clé
   connue de CMA Pro) sort AVANT nos clés maison (`liste`, `mes-avoirs`,
   `retour` — absentes de son option, donc rajoutées par CMA en fin de son
   propre tableau reconstruit) dans l'ORDRE DOM réel, mesuré via `wp eval`.
   Résultat sans cette règle : Déconnexion n'est PAS visuellement la
   dernière entrée, le filet `border-top` posé dessus (§ plus haut) se
   retrouve au milieu du menu au lieu d'être un séparateur de fin de liste
   — contraire à la maquette. `ul.wcmamtx_vertical` est `display:flex;
   flex-direction:column` (cf. règle plus haut) : l'ordre visuel peut donc
   être repris intégralement en CSS via `order`, INDÉPENDAMMENT de l'ordre
   DOM chaotique produit par CMA Pro — plus robuste qu'essayer de piloter
   cet ordre côté PHP (déjà tenté sans succès pour la visibilité, cf.
   commentaire de fcs_compte_menu_curate). Séquence = ordre maquette exact. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard { order: 1; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders { order: 2; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--liste { order: 3; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--my-points { order: 4; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--gift-cards { order: 5; }
/* Mes avoirs : décision gérante du 05/08/2026, gardé dans le bloc argent/
   fidélité, juste après Cartes cadeaux. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--mes-avoirs { order: 6; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address { order: 7; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { order: 8; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--retour { order: 9; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--affiliate-dashboard { order: 10; }
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { order: 11; }
/* `referrals` (Parrainages) a eu un `order` explicite un temps (nécessaire
   tant qu'il était visible, cf. CHANGELOG) — retiré ici : la clé a rejoint
   les entrées masquées (`display:none` ci-dessus) le 05/08/2026 (décision
   gérante finale), l'`order` d'un élément non affiché est un no-op, le
   garder aurait été du code mort. Entrées masquées : `order` sans effet,
   laissées à leur valeur par défaut (0), pas la peine de les lister ici. */

/* État actif : posé par CMA Pro via la classe `is-active` sur le <li>. */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.is-active .woocommerce-MyAccount-navigation-link_a {
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  font-weight: 600;
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: -2px;
}

/* Séparateur visuel avant Déconnexion, comme la maquette (pas de nouvelle
   classe : simple sélecteur d'adjacence sur la clé réelle). */
#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--fcs-border);
}

#top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout .woocommerce-MyAccount-navigation-link_a {
  color: var(--fcs-text-subtle);
}

/* Mobile : la sidebar bascule en ligne de pastilles défilante horizontalement
   plutôt qu'en tiroir plein écran (simplification assumée — la maquette V2.5
   dessine un tiroir ☰ dédié pour cet écran, non repris ce lot faute de temps ;
   signalé au manager). Zéro dépassement horizontal de PAGE : le défilement
   est interne à la nav uniquement (overflow-x ici, jamais sur <body>). */
@media only screen and (max-width: 991px) {
  /* Règle de padding pour .wcmamtx_upload_div/#wcmamtx-avatar-content-output
     retirée ici (05/08/2026) : ces éléments sont `display:none` en toutes
     largeurs depuis la sidebar §9.1 — nettoyage du sélecteur mort. */
  .fcs-compte-profile {
    padding-left: 4px;
    padding-right: 4px;
  }

  #top #main.all_colors nav.woocommerce-MyAccount-navigation ul.wcmamtx_vertical {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  #top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link {
    flex: none;
  }

  #top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a {
    white-space: nowrap;
    padding: 10px 14px;
  }

  #top #main.all_colors nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link_a span.wcmamtx_sticky_icon_name {
    white-space: nowrap;
  }

  #top #main.all_colors nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--fcs-border);
    padding-left: 12px;
  }
}

/* ---------- Contenu : carte générique blanche ----------
   Motif réutilisé tel quel par Commandes / Adresses / Informations / Cartes
   cadeaux : fond blanc, bordure claire, angle 18px — identique à
   .fcs-avoir-card ci-dessus, dupliqué en classes dédiées pour ne pas coupler
   des gabarits différents à une même classe (cf. leçon "nettoyage à sec" du
   CHANGELOG : ne jamais faire dépendre deux écrans indépendants d'un même
   sélecteur partagé). */
.fcs-compte-card {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  overflow: hidden;
}

/* ============================================================
   COMMANDES — /mon-compte/orders/ (Customize My Account Pro)
   ============================================================ */

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-filters-button {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--fcs-radius-pill);
  border: 1.5px solid var(--fcs-border);
  background: var(--fcs-white);
  color: var(--fcs-text-secondary);
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              color var(--fcs-duration-fast) var(--fcs-ease-out),
              border-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-filters-button.active,
#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-filters-button:hover {
  background: var(--fcs-framboise);
  border-color: var(--fcs-framboise);
  color: var(--fcs-white);
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-filters-button:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

/* Chaque .wcmam-order-card devient une "ligne" au sens de la maquette : fond
   blanc, bordure, coins arrondis, séparées par un espace vertical (la
   maquette les soude dans une seule carte à filets internes, mais le
   balisage réel isole chaque commande dans SON PROPRE conteneur — les souder
   demanderait une surcharge de template pour un gain esthétique marginal ;
   écart assumé). */
#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-card {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 18px 20px;
  margin: 0 0 14px;
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--fcs-font-text);
  font-size: 13px;
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header .status {
  border-radius: var(--fcs-radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise, #b04d6b);
}

/* Statuts positifs (livrée/terminée) : vert, même famille que le socle
   avoirs/live pour rester cohérent avec le reste du site. */
#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header .status.completed,
#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header .status.processing {
  background: #eef5f0;
  color: #4a7a5c;
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header .status.cancelled,
#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header .status.failed {
  background: #fdeceb;
  color: #b5473a;
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-header .order-date {
  color: var(--fcs-text-subtle);
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmam-order-body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#top #main.all_colors .woocommerce-MyAccount-content .product-thumb {
  display: flex;
  gap: 6px;
  flex: none;
}

#top #main.all_colors .woocommerce-MyAccount-content .product-thumb img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--fcs-bg-soft);
}

#top #main.all_colors .woocommerce-MyAccount-content .order-details {
  flex: 1 1 220px;
  min-width: 0;
}

#top #main.all_colors .woocommerce-MyAccount-content .order-details h4 {
  margin: 0 0 4px;
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
}

#top #main.all_colors .woocommerce-MyAccount-content .order-details h4 a {
  color: var(--fcs-prune);
  text-decoration: none;
}

#top #main.all_colors .woocommerce-MyAccount-content .order-details .order-total {
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  color: var(--fcs-text-muted);
}

/* Prix mis en avant à l'intérieur du total (le reste — "for N item(s)",
   chaîne du plugin, mixe FR/EN par défaut — hérite du même style discret ;
   point i18n signalé au manager, hors mandat de ce lot). */
#top #main.all_colors .woocommerce-MyAccount-content .order-details .order-total .woocommerce-Price-amount {
  color: var(--fcs-prune);
  font-weight: 600;
}

#top #main.all_colors .woocommerce-MyAccount-content .order-details p[class^="wcmamtx_order_items"] {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--fcs-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#top #main.all_colors .woocommerce-MyAccount-content .order-arrow.view a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise);
  text-decoration: none;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors .woocommerce-MyAccount-content .order-arrow.view a:hover {
  background: var(--fcs-framboise);
  color: var(--fcs-white);
}

/* ============================================================
   ADRESSES — /mon-compte/edit-address/ (liste, gabarit WooCommerce natif)
   ============================================================ */

/* ⚠️ PAS `> p:first-child` : `.woocommerce-notices-wrapper` (vide mais bien
   présent dans le DOM) est le VRAI premier enfant, vérifié le 05/08/2026 en
   navigateur réel — `:first-child` ne matchait donc jamais ce <p>. Sélecteur
   d'adjacence sur l'élément réellement précédent à la place. */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-notices-wrapper + p {
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-text-muted);
  margin: 0 0 18px;
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Addresses.u-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
}

@media only screen and (min-width: 640px) {
  #top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Addresses.u-columns {
    grid-template-columns: 1fr 1fr;
  }
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Address {
  width: auto;
  float: none;
  margin: 0;
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 22px 24px;
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

/* Title Case (« Adresse de livraison »), PAS majuscules — demande explicite
   gérante du 05/08/2026 après comparaison directe au prototype navigable.
   `text-transform:uppercase` retiré ; taille remontée un peu (12→13px) pour
   qu'un vrai libellé en casse normale ne paraisse pas sous-dimensionné à
   côté du badge « Par défaut » voisin. */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
  margin: 0;
  font-family: var(--fcs-font-text);
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--fcs-text-secondary);
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--fcs-framboise, #b04d6b);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  color: var(--fcs-framboise);
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fcs-text-secondary);
}

/* ============================================================
   ADRESSES / INFORMATIONS — formulaires (champs à étiquette flottante,
   MÊME motif que l'écran connexion, marqueurs de balisage identiques :
   WooCommerce core, form-edit-address.php / form-edit-account.php)
   ============================================================ */

/* ⚠️ CORRIGÉ DEUX FOIS le 05/08/2026, trouvé en vérification navigateur
   réelle (pas à la relecture) :
   1) La classe `.fcs-compte-form-card` visée par un premier jet n'était
      posée par AUCUN code — ni ce fichier, ni `inc/fcs-compte-avoirs.php`,
      ni WooCommerce. Remplacée par un ciblage direct de `<form>`.
   2) Le formulaire d'ADRESSE (pas celui du compte) est réécrit par le
      plugin **Woo Checkout Field Editor Pro** (`woo-checkout-field-editor-
      pro`, actif — préfixe `thwcfd` sur les classes de champ, vérifié le
      05/08/2026 par lecture du DOM réel, jamais supposé) : le `<form>` y
      perd TOUTE classe, un `<h2>Adresse de facturation</h2>` NU est ajouté
      avant les champs, et les `.form-row` sont nichés DEUX niveaux plus bas
      (`form > div.woocommerce-address-fields > div.…__field-wrapper >
      p.form-row`) au lieu d'être enfants directs du form. Un `display:grid`
      posé sur le `<form>` ne pouvait donc mettre en grille QUE ses deux
      enfants directs (le h2 nu et le div wrapper), pas les champs eux-mêmes
      — la grille 2 colonnes ne s'appliquait jamais aux champs d'adresse.
   Le formulaire COMPTE (`edit-account`, WooCommerce core, aucune surcharge
   constatée), lui, garde ses `.form-row` en enfants directs — d'où deux
   règles `display:grid` distinctes ci-dessous plutôt qu'une seule sur
   `<form>`, chacune posée au bon niveau réel de nidification. */
#top #main.all_colors .woocommerce-MyAccount-content form {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 22px 20px;
  margin: 0 0 20px;
}

@media only screen and (min-width: 768px) {
  #top #main.all_colors .woocommerce-MyAccount-content form {
    padding: 30px 28px;
  }
}

/* Grille des champs — edit-account (WC core, .form-row enfants directs). */
#top #main.all_colors .woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media only screen and (min-width: 560px) {
  #top #main.all_colors .woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grille des champs — edit-address (Woo Checkout Field Editor Pro, .form-row
   nichés dans ce wrapper précis, pas dans <form>). */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media only screen and (min-width: 560px) {
  #top #main.all_colors .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

/* Titre nu ajouté par Woo Checkout Field Editor Pro (« Adresse de
   facturation/livraison »). Motif à 2 ID déjà éprouvé sur ce fichier — un
   sélecteur de classe seul perd contre le piège Enfold catalogué #1. */
#top #main.all_colors .woocommerce-MyAccount-content form > h2 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 20px;
  --fcs-hn-lh: 1.25;
  line-height: 1.25;
  color: var(--fcs-prune);
  margin: 0 0 18px;
}

/* Le <p> nu qui enveloppe le bouton "Enregistrer l'adresse" est traité plus
   bas avec celui du formulaire compte (règle commune `> p:not(.form-row)`,
   juste après le bloc bouton) — un seul endroit pour cette responsabilité. */

#top #main.all_colors .woocommerce-MyAccount-content .form-row {
  position: relative;
  margin: 0 0 14px;
  padding: 0;
  grid-column: span 1;
}

#top #main.all_colors .woocommerce-MyAccount-content .form-row-wide {
  grid-column: 1 / -1;
}

#top #main.all_colors .woocommerce-MyAccount-content .form-row > label {
  position: absolute;
  left: 16px;
  top: 7px;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-family: var(--fcs-font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--fcs-framboise);
  pointer-events: none;
}

#top #main.all_colors .woocommerce-MyAccount-content .form-row .required {
  color: inherit;
  text-decoration: none;
  border: none;
}

#top #main.all_colors .woocommerce-MyAccount-content .form-row .input-text,
#top #main.all_colors .woocommerce-MyAccount-content .form-row select {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm, 10px);
  padding: 22px 16px 8px;
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  color: var(--fcs-prune);
  box-shadow: none;
  background: var(--fcs-white);
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors .woocommerce-MyAccount-content .form-row .input-text:focus,
#top #main.all_colors .woocommerce-MyAccount-content .form-row select:focus {
  border-color: var(--fcs-rose);
  outline: 2px solid var(--fcs-framboise);
  outline-offset: 1px;
}

/* ⚠️ 4e BUG trouvé À LA MÊME PASSE 375px, sur "Mes informations" cette
   fois : aucune règle CSS du site ne gouverne `.password-input`
   (`<span class="password-input"><input>…<button class="show-password-
   input">`, JS natif de mot de passe de WooCommerce) — vérifié absent de
   TOUTES les feuilles chargées. En `display:inline` par défaut du
   navigateur, `.form-row .input-text{width:100%}` ci-dessus fait prendre à
   l'`<input>` toute la largeur de la ligne : le `<button>` inline qui le
   suit est alors repoussé sur la ligne SUIVANTE, réduit à un filet de 6px
   de haut au bord GAUCHE du champ. Conséquence mesurée : pour le champ
   "Nouveau mot de passe" (2e des 3 champs du fieldset), ce filet tombe
   exactement dans le rectangle du bouton WhatsApp flottant (`.fcs-wa-float`,
   14-68px × 744-798px à 375px de large, scroll 400px) — collision RÉELLE
   confirmée par `elementFromPoint` au centre du bouton, reproduite deux
   fois. Pas un défaut du bouton WhatsApp (mu-plugin, jamais touché) : le
   défaut vient d'ici, et se serait produit QUELLE QUE SOIT la position du
   bouton WhatsApp — un simple filet 6px cliquable au mauvais endroit est
   déjà un défaut d'accessibilité en soi. Corrigé en donnant au wrapper le
   traitement standard "icône dans le champ" (position relative + bouton
   absolu à droite), plutôt qu'en essayant d'éviter le bouton WhatsApp au
   cas par cas. */
#top #main.all_colors .woocommerce-MyAccount-content .password-input {
  display: block;
  position: relative;
}

#top #main.all_colors .woocommerce-MyAccount-content .password-input .input-text {
  padding-right: 44px;
}

#top #main.all_colors .woocommerce-MyAccount-content .show-password-input {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--fcs-text-subtle);
  cursor: pointer;
}

#top #main.all_colors .woocommerce-MyAccount-content .show-password-input:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 1px;
}

/* Champ téléphone du formulaire d'adresse : iti.js (sélecteur pays) pose son
   propre padding-left conséquent — non touché ici (fonctionnalité tierce),
   juste l'étiquette repositionnée pour ne pas chevaucher l'indicatif. */
#top #main.all_colors .woocommerce-MyAccount-content .form-row.woocommerce-validated .iti,
#top #main.all_colors .woocommerce-MyAccount-content .form-row .iti {
  width: 100%;
}

/* Fieldset « Changement de mot de passe » : pas de wrapper séparé (le
   formulaire réel n'en a qu'un, cf. correctif ci-dessus) — la séparation
   visuelle en "2e carte" de la maquette est obtenue par une bordure haute +
   un espacement, sans dupliquer la carte blanche. */
#top #main.all_colors .woocommerce-MyAccount-content fieldset {
  border: none;
  border-top: 1px solid var(--fcs-bg-card);
  margin: 10px 0 0;
  padding: 20px 0 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media only screen and (min-width: 560px) {
  #top #main.all_colors .woocommerce-MyAccount-content fieldset {
    grid-template-columns: 1fr 1fr;
  }
}

#top #main.all_colors .woocommerce-MyAccount-content fieldset > legend {
  grid-column: 1 / -1;
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 18px;
  --fcs-hn-lh: 1.25;
  line-height: 1.25;
  color: var(--fcs-prune);
  padding: 0;
  margin: 0 0 14px;
}

/* ⚠️ `grid-column:1/-1` seul ne suffit plus pour l'adresse depuis le
   correctif Woo Checkout Field Editor Pro ci-dessus : le bouton n'est plus
   forcément un ITEM de la grille (son `<p>` parent est un enfant direct de
   `.woocommerce-address-fields`, pas du wrapper mis en grille). `width:100%`
   sur le bouton lui-même le rend plein-largeur dans TOUS les cas — grid ou
   flux normal — sans dépendre du conteneur. Le `<p>` non classé qui
   l'enveloppe (compte ET adresse) est neutralisé juste après. */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Button.button,
#top #main.all_colors .woocommerce-MyAccount-content form button[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--fcs-radius-pill);
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border: 1.5px solid var(--fcs-framboise);
  cursor: pointer;
  margin-top: 4px;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              transform var(--fcs-duration-micro) var(--fcs-ease-out);
}

/* Le <p> nu qui enveloppe le bouton (edit-account : enfant direct de la
   grille du <form> ; edit-address : enfant direct de .woocommerce-address-
   fields, hors grille) — dans les deux cas, pleine largeur et pas de
   marge fantôme du <p> par défaut du navigateur.
   ⚠️ `:not(.form-row)` INDISPENSABLE sur la branche edit-account : sans lui,
   ce sélecteur (2 ID + 3 classes + 2 éléments) bat `.form-row` (2 ID + 3
   classes + 0 élément) et réétend « Prénom »/« Nom » en pleine largeur au
   lieu de les garder côte à côte (`grid-column:span 1`). Sur la branche
   edit-address le `:not()` est un no-op inoffensif : aucun `.form-row` n'est
   enfant direct de `.woocommerce-address-fields` (ils sont nichés un niveau
   plus bas, dans `.field-wrapper`) — gardé pour que la même règle reste
   sûre si la structure du plugin changeait. */
#top #main.all_colors .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:not(.form-row),
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-address-fields > p:not(.form-row) {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}

/* ⚠️ !important justifié (même règle adverse que sur l'écran connexion) :
   Quick CSS Enfold, `.woocommerce-page .button:hover{background-color:#000c !important}`. */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Button.button:hover,
#top #main.all_colors .woocommerce-MyAccount-content form button[type="submit"]:hover {
  background-color: #8f3a55 !important;
  border-color: #8f3a55;
}

#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-Button.button:active,
#top #main.all_colors .woocommerce-MyAccount-content form button[type="submit"]:active {
  transform: scale(.985);
}

/* Le <span id="…_description"> d'aide contextuelle (nom affiché) : sous le
   champ, jamais superposé (le form-row garde une hauteur naturelle car ce
   <span> n'est PAS en position absolute — seul le <label> l'est). */
#top #main.all_colors .woocommerce-MyAccount-content .form-row span[id$="_description"] {
  display: block;
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--fcs-text-subtle);
  margin-top: -6px;
  margin-bottom: 8px;
}

/* ============================================================
   CARTES CADEAUX — /mon-compte/gift-cards/ (YITH Gift Cards)
   ============================================================ */

/* ⚠️ REVU le 05/08/2026 (extension du lot, demande gérante) : le dégradé
   framboise→PRUNE livré au lot précédent (repris tel quel de .fcs-avoir-
   solde) s'éloignait trop de la maquette (rose→framboise,
   `#ef88a5`→`#b04d6b`) et n'avait jamais été validé — « trop sombre ».
   Corrigé au plus près de la maquette : MÊME PAIRE DE COULEURS que la
   frame V2.5, seul le SENS est inversé (méthode déjà cataloguée dans ce
   fichier pour ce type de dégradé, cf. section Avoirs plus haut) —
   `120deg` place le texte (coin haut-gauche) du côté du PREMIER stop :
   la maquette (rose d'abord) y mesurait 2,40:1 (échec AA), donc ici
   framboise D'ABORD, rose ENSUITE — même sens que .fcs-avoir-solde,
   mais rose au lieu de prune en second stop. Framboise sur blanc
   ≈5,10:1 (AA, valeur déjà établie dans ce fichier) : le coin où vit le
   texte reste protégé, sans s'éloigner de la maquette au-delà du strict
   nécessaire pour l'accessibilité. */
.fcs-cartes-hero {
  margin: 0 0 20px;
}

.fcs-cartes-solde {
  background: linear-gradient(120deg, var(--fcs-framboise), var(--fcs-rose));
  color: var(--fcs-white);
  padding: 24px 26px;
  border-radius: var(--fcs-radius-lg, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fcs-cartes-solde-label {
  font-family: var(--fcs-font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fcs-white);
}

.fcs-cartes-solde-montant {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
}

@media only screen and (min-width: 768px) {
  .fcs-cartes-solde-montant {
    font-size: 52px;
  }
}

.fcs-cartes-solde-montant bdi {
  font-family: inherit;
  font-weight: inherit;
}

.fcs-cartes-solde-note {
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  color: var(--fcs-white);
  opacity: .92;
}

/* CTA « Envie d'offrir ? » (§9.5, PHP), ajouté sous le tableau natif YITH. */
.fcs-cartes-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--fcs-bg-card);
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-text-muted);
}

.fcs-cartes-cta a {
  color: var(--fcs-framboise);
  font-weight: 600;
  text-decoration: none;
}

.fcs-cartes-cta a:hover {
  color: var(--fcs-prune);
}

/* Titre + bouton natifs YITH (fonctionnalité réelle : ouvre la modale
   d'ajout de carte du plugin — conservée telle quelle, pas remplacée par un
   faux champ décoratif). */
#top #main.all_colors .woocommerce-MyAccount-content .gift-card-panel-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}

#top #main.all_colors .woocommerce-MyAccount-content .gift-card-panel-title {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 20px;
  --fcs-hn-lh: 1.25;
  line-height: 1.25;
  color: var(--fcs-prune);
  margin: 0;
}

#top #main.all_colors .woocommerce-MyAccount-content #ywgc-add-new-gift-card {
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border: none;
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors .woocommerce-MyAccount-content #ywgc-add-new-gift-card:hover {
  background: #8f3a55;
}

/* Tableau (état "avec cartes" — non revérifié en conditions réelles au
   05/08/2026, le compte de recette n'a aucune carte cadeau ; styles écrits
   depuis la lecture du template source du plugin, signalé au manager). */
#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards {
  width: 100%;
  border-collapse: collapse;
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  overflow: hidden;
  font-family: var(--fcs-font-text);
  font-size: 14px;
}

#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards thead th {
  background: var(--fcs-bg-soft);
  text-align: left;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fcs-text-subtle);
  font-weight: 600;
  padding: 14px 18px;
}

#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards tbody td {
  padding: 14px 18px;
  border-top: 1px solid #f7ecef;
  color: var(--fcs-text-secondary);
}

#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards .balance {
  font-weight: 600;
  color: var(--fcs-prune);
}

#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards tr.status-expired,
#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards tr.status-used {
  opacity: .55;
}

#top #main.all_colors .woocommerce-MyAccount-content table.my_account_giftcards a.button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

/* État vide (celui du compte de recette, vérifié en conditions réelles). */
#top #main.all_colors .woocommerce-MyAccount-content .ywgc-empty-table {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 40px 24px;
  text-align: center;
  color: var(--fcs-text-subtle);
  font-family: var(--fcs-font-text);
}

#top #main.all_colors .woocommerce-MyAccount-content .ywgc-empty-table-icon svg {
  max-width: 96px;
  height: auto;
  opacity: .35;
}

/* ============================================================
   TABLEAU DE BORD — /mon-compte/ (tuiles + dernière commande, nous ;
   grille de raccourcis CMA Pro conservée en dessous, inchangée)
   ============================================================ */

.fcs-dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 24px;
}

@media only screen and (min-width: 768px) {
  .fcs-dash-tiles {
    gap: 20px;
  }
}

.fcs-dash-tile {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .fcs-dash-tile {
    padding: 22px 20px;
    text-align: left;
  }
}

.fcs-dash-tile-label {
  font-family: var(--fcs-font-text);
  font-size: 11px;
  color: var(--fcs-text-subtle);
  order: 2;
}

@media only screen and (min-width: 768px) {
  .fcs-dash-tile-label {
    font-size: 13px;
    order: 0;
  }
}

.fcs-dash-tile-value {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 24px;
  color: var(--fcs-prune);
  order: 1;
}

@media only screen and (min-width: 768px) {
  .fcs-dash-tile-value {
    font-size: 34px;
  }
}

/* ---------- Bandeau « Programme fidélité » (§9.4, PHP) — ajouté le
   05/08/2026, manquait entièrement au lot précédent. ---------- */
.fcs-dash-loyalty {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
}

.fcs-dash-loyalty-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fcs-dash-loyalty-title {
  font-family: var(--fcs-font-title);
  font-size: 18px;
  font-weight: 400;
  color: var(--fcs-prune);
}

.fcs-dash-loyalty-count {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-subtle);
  white-space: nowrap;
}

.fcs-dash-loyalty-bar {
  height: 10px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-bg-soft);
  overflow: hidden;
}

.fcs-dash-loyalty-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  /* Largeur posée en style inline (valeur calculée côté PHP, propre à
     chaque affichage — pas une transition animée au chargement, cf. Motion
     déjà tranché « aucune cascade d'entrée » pour ce gabarit). */
}

.fcs-dash-loyalty-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.fcs-dash-loyalty-note {
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  color: var(--fcs-text-muted);
}

.fcs-dash-loyalty-note strong {
  color: var(--fcs-framboise);
}

.fcs-dash-loyalty-cta {
  flex: none;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border-radius: var(--fcs-radius-pill);
  padding: 10px 20px;
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-dash-loyalty-cta:hover {
  background: var(--fcs-prune);
}

.fcs-dash-lastorder {
  margin: 0 0 28px;
}

.fcs-dash-lastorder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

/* ⚠️ !important absent à tort dans le premier jet : `.fcs-dash-lastorder-head
   h2` (0 ID) perdait silencieusement contre le piège Enfold catalogué #1
   (`#top #wrap_all .all_colors h2{font-family:birthstone…;font-size:70px}`,
   2 ID) — trouvé en vérification navigateur réelle le 05/08/2026
   (`getComputedStyle` : birthstone-regular-ttf 70px au lieu de Marcellus
   22/26px). Corrigé avec le motif à 2 ID déjà éprouvé sur ce fichier
   (`.woocommerce-Address-title h2`), qu'un simple sélecteur de classe ne
   peut jamais battre. */
#top #main.all_colors .fcs-dash-lastorder-head h2 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: 22px;
  --fcs-hn-lh: 1.25;
  line-height: 1.25;
  color: var(--fcs-prune);
  margin: 0;
}

@media only screen and (min-width: 768px) {
  #top #main.all_colors .fcs-dash-lastorder-head h2 {
    font-size: 26px;
  }
}

.fcs-dash-lastorder-head a {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--fcs-framboise, #b04d6b);
  text-decoration: none;
  white-space: nowrap;
}

.fcs-dash-lastorder-head a:hover {
  color: var(--fcs-framboise);
}

.fcs-dash-lastorder-card {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fcs-dash-lastorder-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.fcs-dash-lastorder-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fcs-dash-lastorder-num {
  font-family: var(--fcs-font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-dash-lastorder-date {
  font-family: var(--fcs-font-text);
  font-size: 12.5px;
  color: var(--fcs-text-subtle);
}

.fcs-dash-lastorder-status {
  border-radius: var(--fcs-radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise, #b04d6b);
  white-space: nowrap;
}

.fcs-dash-lastorder-status.status-completed,
.fcs-dash-lastorder-status.status-processing {
  background: #eef5f0;
  color: #4a7a5c;
}

.fcs-dash-lastorder-status.status-cancelled,
.fcs-dash-lastorder-status.status-failed {
  background: #fdeceb;
  color: #b5473a;
}

.fcs-dash-lastorder-items {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fcs-dash-lastorder-thumb {
  width: 56px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fcs-bg-soft);
  flex: none;
}

.fcs-dash-lastorder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fcs-dash-lastorder-summary {
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  color: var(--fcs-text-secondary);
}

.fcs-dash-lastorder-actions {
  display: flex;
}

.fcs-dash-lastorder-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--fcs-radius-pill);
  border: 1.5px solid var(--fcs-rose);
  color: var(--fcs-framboise, #b04d6b);
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-dash-lastorder-view:hover {
  background: var(--fcs-framboise);
  border-color: var(--fcs-framboise);
  color: var(--fcs-white);
}

/* Grille de raccourcis CMA Pro (.wcmtx_def1-dashboard) : laissée avec ses
   propres couleurs d'icône inline (fonctionnalité du plugin) — simple mise
   en cohérence typographique et cartes arrondies pour ne pas jurer avec le
   reste de l'écran. */
#top #main.all_colors .woocommerce-MyAccount-content .wcmtx_def1-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media only screen and (min-width: 640px) {
  #top #main.all_colors .woocommerce-MyAccount-content .wcmtx_def1-dashboard {
    grid-template-columns: repeat(3, 1fr);
  }
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmtx_def1-dashboard .wcmtx_def1-card {
  background: var(--fcs-white) !important;
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 18px 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out),
              box-shadow var(--fcs-duration-fast) var(--fcs-ease-out);
}

/* ⚠️ !important sur `background` uniquement : le plugin pose un style
   inline `color:#334155` sur chaque lien (`style="color:#334155;"`, vérifié
   dans le HTML rendu) mais AUCUN `background` inline — donc pas de conflit
   de spécificité réel sur cette propriété, le !important est ici défensif
   (un futur réglage plugin pourrait en ajouter un) plutôt que strictement
   nécessaire aujourd'hui ; laissé par prudence car sans coût de lisibilité. */

#top #main.all_colors .woocommerce-MyAccount-content .wcmtx_def1-dashboard .wcmtx_def1-card:hover {
  border-color: var(--fcs-rose);
  box-shadow: var(--fcs-shadow-sm);
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmtx_def1-dashboard .wcmatx_tab_title_new_de {
  font-family: var(--fcs-font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--fcs-prune);
}

#top #main.all_colors .woocommerce-MyAccount-content .wcmtx_def1-dashboard .wcmatx_tab_desc_below_dashlink {
  font-family: var(--fcs-font-text);
  font-size: 12px;
  color: var(--fcs-text-subtle);
}

/* ============================================================
   LOT 2 (05/08/2026) — Détail commande · Points fidélité · Ma liste ·
   Retour article. Commande gérante du jour : « les 4 premiers d'abord ».

   Balisage CONSTATÉ (curl authentifié, compte de test staging, 05/08/2026) :
     view-order : do_action('woocommerce_view_order') dans le template
       CMA Pro 02.php → <p>La commande n°X…</p> (natif, masqué ci-dessous,
       doublonné par notre .fcs-vieworder-meta) puis
       <section class="woocommerce-order-details"> (table native WooCommerce,
       AUCUNE surcharge) puis <section class="woocommerce-customer-details">
       (adresse(s), 1 ou 2 selon facturation=livraison ou non).
     my-points  : <div class="ywpar-wrapper"><h2>…</h2>
       <div class="ywpar_myaccount_entry_info"><div class="ywpar_summary_badge">…
       puis #ywpar_tabs > table.ywpar_points_rewards (YITH natif, AUCUNE
       surcharge — notre carte solde/gain s'ajoute AU-DESSUS via hook).
     Ma liste  : page 43370 (/listedesouhaits/), HORS /mon-compte/, contenu =
       <ul class="wishlist_table wishlist_view shop_table cart modern_grid
       responsive"><li class="item-wrapper">… (YITH natif "modern_grid",
       AUCUNE surcharge). Bouton « Ajouter au panier » RÉEL rendu par le
       plugin (woocommerce_template_loop_add_to_cart) seulement si le
       réglage `yith_wcwl_add_to_cart_show` = yes — était "no" sur ce
       staging (constaté), basculé à "yes" pour ce lot (RÉGLAGE PLUGIN, pas
       du code — autorisé en préproduction, ÉCART À REPRODUIRE EN PROD au
       go-live, cf. rapport de livraison). Même chose pour
       `yith_wcwl_stock_show` (était "no" → "yes", pour le badge rupture de
       stock natif `.wishlist-out-of-stock`).
     Retour     : nouvel endpoint /mon-compte/retour/, markup 100% maison
       (fcs_compte_retour_render()), aucun plugin de retour/RMA installé sur
       ce site — formulaire + note de commande + e-mail, PAS de création
       d'avoir automatique (règle du fichier PHP).

   0 template WooCommerce/YITH surchargé (budget registre inchangé, 0/4).
   ============================================================ */

/* ---------- 8.1 Détail commande (view-order) ---------- */

/* La phrase native CMA Pro/WooCommerce (« La commande n°X a été passée
   le… ») N'est PAS le premier enfant de .woocommerce-MyAccount-content
   (⚠️ mesuré après un premier essai raté : `.woocommerce-notices-wrapper`
   — TOUJOURS présent, même vide — occupe cette position sur les 4 écrans
   de ce lot) mais bien le <p> qui suit IMMÉDIATEMENT ce wrapper — et ce
   uniquement sur view-order (vérifié : orders/edit-address/gift-cards/
   dashboard/mes-avoirs/my-points/retour n'ont AUCUN <p> à cet endroit,
   sélecteur donc scopé par structure sans risquer un autre endpoint).
   Remplacée par notre propre .fcs-vieworder-meta juste en dessous (mêmes
   infos, mise en forme carte). */
#top #main.all_colors .woocommerce-MyAccount-content > .woocommerce-notices-wrapper + p {
  display: none;
}

.fcs-vieworder-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.fcs-vieworder-meta-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fcs-vieworder-meta-num {
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-vieworder-meta-date {
  font-family: var(--fcs-font-text);
  font-size: 12.5px;
  color: var(--fcs-text-subtle);
}

.fcs-vieworder-tracking-note {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-muted);
  background: var(--fcs-bg-soft);
  border-radius: var(--fcs-radius-sm, 10px);
  padding: 10px 14px;
  margin: 0 0 20px;
}

/* Titre natif « Order updates » (notes de commande, WC core) et « Détails de
   la commande » (h2.woocommerce-order-details__title) : Marcellus, comme le
   reste du gabarit compte. */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-order-details__title,
#top #main.all_colors .woocommerce-MyAccount-content section.woocommerce-customer-details h2 {
  font-family: var(--fcs-font-title);
  font-size: 18px;
  font-weight: 400;
  color: var(--fcs-prune);
  --fcs-hn-lh: 1.3;
  margin: 0 0 14px;
}

#top #main.all_colors .woocommerce-MyAccount-content section.woocommerce-order-details,
#top #main.all_colors .woocommerce-MyAccount-content section.woocommerce-customer-details {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 22px 24px;
  margin-bottom: 20px;
  display: block;
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fcs-font-text);
  font-size: 14px;
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details thead th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fcs-text-subtle);
  font-weight: 600;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--fcs-bg-card);
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot th {
  padding: 14px 0;
  border-top: 1px solid #f7ecef;
  vertical-align: middle;
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-name a {
  color: var(--fcs-prune);
  font-weight: 500;
  text-decoration: none;
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-name a:hover {
  color: var(--fcs-framboise);
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-quantity {
  color: var(--fcs-text-subtle);
  font-weight: 400;
  margin-left: 4px;
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-total,
#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot td {
  text-align: right;
  font-weight: 600;
  color: var(--fcs-prune);
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr:last-child th,
#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 15px;
  font-weight: 700;
}

#top #main.all_colors .woocommerce-MyAccount-content table.woocommerce-table--order-details .includes_tax {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--fcs-text-subtle);
}

/* Miniature produit ajoutée par fcs_compte_order_item_thumbnail() (hook
   woocommerce_order_item_name, aucune surcharge de template). */
.fcs-vieworder-item-thumb {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 12px;
  width: 44px;
  height: 55px;
  border-radius: var(--fcs-radius-sm, 10px);
  overflow: hidden;
}

.fcs-vieworder-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Points fidélité gagnés sur cette commande (bandeau natif YITH Points and
   Rewards, `.ywpar-order-point-summary`, ajouté automatiquement sur
   view-order — restylé, pas généré ici). */
#top #main.all_colors .woocommerce-MyAccount-content p.ywpar-order-point-summary {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-framboise);
  background: var(--fcs-bg-soft);
  border-radius: var(--fcs-radius-pill);
  display: inline-flex;
  padding: 8px 16px;
  margin: 0 0 20px;
}

/* Adresse(s) : 1 ou 2 colonnes selon que la commande a une adresse de
   livraison distincte (WooCommerce ajoute alors un wrapper
   .woocommerce-columns--addresses avec .col-1/.col-2 ; sans lui, une seule
   <address> directement dans la section). `auto-fit`/`minmax` couvre les
   deux cas sans avoir besoin de savoir lequel est servi. */
#top #main.all_colors .woocommerce-MyAccount-content .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

#top #main.all_colors .woocommerce-MyAccount-content section.woocommerce-customer-details address {
  font-family: var(--fcs-font-text);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fcs-text-secondary);
  font-style: normal;
}

#top #main.all_colors .woocommerce-MyAccount-content section.woocommerce-customer-details .woocommerce-customer-details--phone,
#top #main.all_colors .woocommerce-MyAccount-content section.woocommerce-customer-details .woocommerce-customer-details--email {
  font-size: 13px;
  color: var(--fcs-text-subtle);
  margin: 4px 0 0;
}

/* Bouton natif « Commander à nouveau » (woocommerce_order_again_button) et
   lien de retour à la liste — pilule framboise cohérente avec le reste du
   gabarit compte. */
#top #main.all_colors .woocommerce-MyAccount-content a.woocommerce-button.button.order-again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border: none;
  border-radius: var(--fcs-radius-pill);
  padding: 13px 26px;
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #main.all_colors .woocommerce-MyAccount-content a.woocommerce-button.button.order-again:hover {
  background: var(--fcs-prune);
}

/* ---------- 8.2 Points fidélité (my-points) ---------- */

/* Le <h2> natif YITH (« Mes Points ») double notre <h1> (fcs_compte_hero_band) :
   masqué, pas supprimé côté PHP (on ne touche pas au plugin). */
#top #main.all_colors .woocommerce-MyAccount-content .ywpar-wrapper > h2:first-child {
  display: none;
}

.fcs-points-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media only screen and (max-width: 640px) {
  .fcs-points-grid {
    grid-template-columns: 1fr;
  }
}

.fcs-points-solde {
  background: linear-gradient(135deg, var(--fcs-prune), #4a2433);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 28px;
  color: var(--fcs-white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* <span>, PAS <h2> — même convention que .fcs-avoir-solde-label et
   .fcs-cartes-solde-label déjà dans ce fichier (lot précédent) : évite
   d'écrire au clavier une nouvelle bataille de spécificité contre le piège
   Enfold catalogué (`#top #wrap_all .all_colors h2{font-family:birthstone;
   font-size:70px}`). CONFIRMÉ EN NAVIGATEUR RÉEL sur ce lot (miroir local,
   375px) : un premier jet en <h2> affichait « Mon solde » en Birthstone
   cursif géant au lieu de ce petit label Jost — corrigé en <span>, comme
   .fcs-points-earn-title juste en dessous (même bug, même correctif). */
.fcs-points-solde-label {
  margin: 0;
  font-family: var(--fcs-font-text);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fcs-rose-clair);
  font-weight: 600;
}

.fcs-points-solde-montant {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.fcs-points-solde-nombre {
  font-family: var(--fcs-font-title);
  font-size: 44px;
  line-height: 1;
}

.fcs-points-solde-unite {
  font-family: var(--fcs-font-text);
  font-size: 15px;
  color: var(--fcs-border);
}

.fcs-points-solde-note,
.fcs-points-solde-collected {
  margin: 0;
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fcs-border);
}

.fcs-points-solde-note strong,
.fcs-points-solde-collected strong {
  color: var(--fcs-white);
}

.fcs-points-earn {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 22px 24px 10px;
}

/* <span>, PAS <h3> — même raison que .fcs-points-solde-label ci-dessus.
   `.fcs-points-earn` n'est pas un conteneur flex (contrairement à
   .fcs-points-solde) : `display:block` explicite nécessaire pour que le
   label occupe sa propre ligne (un <span> est inline par défaut). */
.fcs-points-earn-title {
  display: block;
  margin: 0 0 4px;
  font-family: var(--fcs-font-text);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fcs-text-subtle);
  font-weight: 600;
}

.fcs-points-earn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #f7ecef;
}

.fcs-points-earn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--fcs-radius-md, 14px);
  background: var(--fcs-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
}

.fcs-points-earn-label {
  flex: 1;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-text-secondary);
}

.fcs-points-earn-value {
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fcs-framboise, #b04d6b);
  white-space: nowrap;
}

/* Résumé natif (points à échanger, niveau, rang) : carte discrète. */
#top #main.all_colors .woocommerce-MyAccount-content .ywpar_myaccount_entry_info {
  display: none; /* doublon exact de notre .fcs-points-solde ci-dessus (mêmes chiffres) */
}

/* Onglets natifs (historique / cibles / gagner des points…) restylés en
   pastilles, cohérent avec le motif de navigation mobile déjà en place. */
#top #main.all_colors .woocommerce-MyAccount-content #ywpar_tabs .ywpar_tabs_header ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

#top #main.all_colors .woocommerce-MyAccount-content #ywpar_tabs .ywpar_tabs_links {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--fcs-text-secondary);
  background: var(--fcs-bg-soft);
  border-radius: var(--fcs-radius-pill);
  padding: 10px 18px;
  cursor: pointer;
}

#top #main.all_colors .woocommerce-MyAccount-content #ywpar_tabs .ywpar_tabs_links[aria-selected="true"] {
  background: var(--fcs-framboise);
  color: var(--fcs-white);
}

#top #main.all_colors .woocommerce-MyAccount-content table.ywpar_points_rewards {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
}

#top #main.all_colors .woocommerce-MyAccount-content table.ywpar_points_rewards thead th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fcs-text-subtle);
  font-weight: 600;
  background: #fdf6f8;
  padding: 13px 16px;
}

#top #main.all_colors .woocommerce-MyAccount-content table.ywpar_points_rewards tbody td {
  padding: 13px 16px;
  border-top: 1px solid #f7ecef;
  color: var(--fcs-text-secondary);
}

#top #main.all_colors .woocommerce-MyAccount-content table.ywpar_points_rewards .ywpar_plus {
  color: #4a7a5c;
  font-weight: 600;
}

#top #main.all_colors .woocommerce-MyAccount-content table.ywpar_points_rewards .ywpar_minus {
  color: var(--fcs-framboise, #b04d6b);
  font-weight: 600;
}

/* ---------- 8.3 Ma liste (/listedesouhaits/, YITH Wishlist "modern_grid") ----------
   Page HORS /mon-compte/ : ce bloc n'est PAS scopé par `.woocommerce`, il
   s'appuie sur les classes natives du plugin (`ul.wishlist_table`…), qui ne
   vivent nulle part ailleurs sur le site — scope naturel, pas besoin d'une
   classe de <body>. Reprend le MODÈLE DE CARTE déployé sur les grilles
   produit (refonte-socle.css §Grilles produits) : photo dominante, texte
   sous la photo, prix Marcellus italique framboise — troisième et dernière
   surface produit qui ne l'avait pas encore (avec la recherche et la
   grille catégorie, déjà couvertes). */

.fcs-liste-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(135deg, var(--fcs-bg-soft) 0%, #fdfbfa 60%);
  padding: 48px 24px 20px;
  text-align: center;
  box-sizing: border-box;
}

.fcs-liste-hero .fcs-compte-breadcrumb {
  justify-content: center;
  display: flex;
}

.fcs-liste-hero-count {
  margin: 6px 0 0;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-text-subtle);
}

#top #wrap_all ul.wishlist_table.modern_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0 24px 60px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 640px) {
  #top #wrap_all ul.wishlist_table.modern_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  #top #wrap_all ul.wishlist_table.modern_grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
  }
}

#top #wrap_all ul.wishlist_table.modern_grid li {
  list-style: none;
}

#top #wrap_all ul.wishlist_table.modern_grid .item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#top #wrap_all ul.wishlist_table.modern_grid .product-thumbnail {
  position: relative;
  border-radius: var(--fcs-radius-lg, 20px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--fcs-bg-soft);
}

#top #wrap_all ul.wishlist_table.modern_grid .product-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

#top #wrap_all ul.wishlist_table.modern_grid .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
}

/* Case à cocher des actions groupées : conservée fonctionnelle (suppression
   groupée toujours possible) mais discrète — la carte met en avant le
   bouton retirer individuel (croix) et « Ajouter au panier », pas la
   sélection multiple, hors du langage visuel de la maquette. */
#top #wrap_all ul.wishlist_table.modern_grid .product-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

#top #wrap_all ul.wishlist_table.modern_grid .product-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--fcs-framboise);
  cursor: pointer;
}

/* Retirer de la liste : même chip rond blanc que le cœur wishlist des
   grilles produit (refonte-socle.css §7), coin opposé (haut-droite) car le
   cœur "ajouter" n'existe pas ici — cette carte EST déjà la liste. */
#top #wrap_all ul.wishlist_table.modern_grid .product-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

#top #wrap_all ul.wishlist_table.modern_grid .product-remove a.remove_from_wishlist {
  width: 40px;
  height: 40px;
  border-radius: var(--fcs-radius-pill);
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--fcs-shadow-sm);
  color: var(--fcs-framboise-clair);
  text-decoration: none;
}

#top #wrap_all ul.wishlist_table.modern_grid .product-remove i.fa-trash::before {
  content: "\2715"; /* croix — plus léger qu'une icône Font Awesome à charger pour un seul usage */
  font-style: normal;
  font-size: 14px;
}

#top #wrap_all ul.wishlist_table.modern_grid .item-details-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#top #wrap_all ul.wishlist_table.modern_grid h3.product-name {
  margin: 0;
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fcs-prune);
  --fcs-hn-lh: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date d'ajout : présente dans le HTML natif (réglage `yith_wcwl_show_dateadded`
   du site, laissé tel quel) mais absente de la maquette — masquée pour ne
   pas surcharger la carte, sans toucher au réglage plugin (CSS, pas
   settings, pour ce détail mineur). */
#top #wrap_all ul.wishlist_table.modern_grid tr.date-added,
#top #wrap_all ul.wishlist_table.modern_grid table.item-details-table tr:first-child td.label {
  display: none;
}

#top #wrap_all ul.wishlist_table.modern_grid table.item-details-table {
  border-collapse: collapse;
}

#top #wrap_all ul.wishlist_table.modern_grid tr.product-price td.label,
#top #wrap_all ul.wishlist_table.modern_grid tr.product-stock-status td.label {
  display: none; /* "Prix unitaire :" / "Stock :" : le prix stylé + le badge suffisent, pas besoin du libellé */
}

#top #wrap_all ul.wishlist_table.modern_grid tr.product-price td.value {
  display: block;
  font-family: var(--fcs-font-title);
  font-style: italic;
  font-size: 17px;
  color: var(--fcs-framboise);
  padding: 2px 0 0;
}

#top #wrap_all ul.wishlist_table.modern_grid tr.product-stock-status td.value {
  display: block;
  padding: 0;
}

#top #wrap_all ul.wishlist_table.modern_grid .wishlist-out-of-stock {
  display: inline-block;
  font-family: var(--fcs-font-text);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fcs-white);
  background: rgba(42, 22, 32, .85);
  border-radius: var(--fcs-radius-pill);
  padding: 4px 11px;
  margin-top: 2px;
}

#top #wrap_all ul.wishlist_table.modern_grid .wishlist-in-stock {
  display: none; /* "En stock" : état par défaut attendu, seul le manque de stock mérite un badge */
}

/* Bouton natif WooCommerce (woocommerce_template_loop_add_to_cart), visible
   depuis le basculement du réglage `yith_wcwl_add_to_cart_show` (cf. note en
   tête de section). Même pilule que le reste du site. Pour un produit
   variable, le plugin affiche « Choix des options » (renvoie vers la fiche
   produit) plutôt qu'un ajout direct — comportement WooCommerce standard,
   pas une régression de ce lot. */
#top #wrap_all ul.wishlist_table.modern_grid .product-add-to-cart {
  margin-top: 2px;
}

#top #wrap_all ul.wishlist_table.modern_grid a.add_to_cart_button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border-radius: var(--fcs-radius-pill);
  padding: 12px 0;
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

#top #wrap_all ul.wishlist_table.modern_grid a.add_to_cart_button:hover {
  background: var(--fcs-prune);
}

/* Formulaire de variation en ligne (produits variables « Choix des
   options ») : masqué visuellement, WooCommerce redirige de toute façon
   vers la fiche produit au clic — éviter un mini-formulaire tronqué dans
   une carte de 260px de large. */
#top #wrap_all ul.wishlist_table.modern_grid .variations_form.in_loop {
  display: none;
}

/* Reste du gabarit (actions groupées, partage, pagination) : sobre, sous la
   grille — fonctionnalité conservée, pas mise en avant visuellement. */
#top #wrap_all .yith_wcwl_wishlist_footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-subtle);
}

#top #wrap_all .yith_wcwl_wishlist_footer select,
#top #wrap_all .yith_wcwl_wishlist_footer input[type="submit"] {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm, 10px);
  padding: 8px 12px;
  background: var(--fcs-white);
  color: var(--fcs-text-secondary);
}

#top #wrap_all li.wishlist-empty {
  max-width: 640px;
  margin: 40px auto 80px;
  text-align: center;
  font-family: var(--fcs-font-text);
  font-size: 15px;
  color: var(--fcs-text-muted);
}

/* ---------- 8.4 Effectuer un retour (/mon-compte/retour/) ---------- */

.fcs-retour {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fcs-retour-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fdf6f8;
  border: 1px solid var(--fcs-border-light);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 20px 24px;
}

.fcs-retour-banner-icon {
  font-size: 26px;
  flex: none;
}

.fcs-retour-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fcs-retour-banner-title {
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-retour-banner-sub {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fcs-text-muted);
}

.fcs-retour-step {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg, 20px);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Piège Enfold catalogué : `.fcs-retour-step h2` seul (0 ID) perdrait contre
   `#top #wrap_all .all_colors h2 {font-family:birthstone;font-size:70px}`
   (2 ID) — vérifié en navigateur réel sur ce lot (miroir local, écran
   Points fidélité), pas supposé : le même bug touchait initialement
   `.fcs-points-solde-label`/`.fcs-points-earn-title` (corrigés en <span>,
   hors flux des titres Hn). Ici le <h2> est un vrai titre d'étape,
   gardé en <h2> : préfixe à 2 ID + assez de classes pour battre Enfold. */
#top #main.all_colors .woocommerce-MyAccount-content .fcs-retour-step h2 {
  margin: 0;
  font-family: var(--fcs-font-title);
  font-size: 20px;
  font-weight: 400;
  color: var(--fcs-prune);
  --fcs-hn-lh: 1.3;
}

.fcs-retour-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fcs-retour-pill {
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-pill);
  padding: 11px 20px;
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  color: var(--fcs-text-secondary);
  cursor: pointer;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out),
              background-color var(--fcs-duration-fast) var(--fcs-ease-out),
              color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-pill input {
  /* Case cachée visuellement mais toujours au clavier/lecteur d'écran :
     jamais `display:none` (retire l'élément de l'arbre d'accessibilité). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fcs-retour-pill:has(input:checked) {
  border-color: var(--fcs-framboise);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  font-weight: 600;
}

.fcs-retour-pill:has(input:focus-visible) {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

.fcs-retour-comment-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fcs-retour-comment-label span {
  font-family: var(--fcs-font-text);
  font-size: 12px;
  color: var(--fcs-framboise);
  letter-spacing: .02em;
}

.fcs-retour-comment-label textarea {
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm, 10px);
  padding: 12px 14px;
  min-height: 72px;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-prune);
  resize: vertical;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-comment-label textarea:focus-visible {
  border-color: var(--fcs-rose);
  outline: 2px solid var(--fcs-framboise);
  outline-offset: 1px;
}

.fcs-retour-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-md, 14px);
  cursor: pointer;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out),
              background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-item:not(:last-child) {
  margin-bottom: 12px;
}

.fcs-retour-item:has(input:checked) {
  border-color: var(--fcs-framboise);
  background: #fdf6f8;
}

.fcs-retour-item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fcs-retour-item-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--fcs-border);
  border-radius: 5px;
  background: var(--fcs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  flex: none;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out),
              background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-item:has(input:checked) .fcs-retour-item-check {
  border-color: var(--fcs-framboise);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
}

.fcs-retour-item img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--fcs-radius-sm, 10px);
  flex: none;
}

.fcs-retour-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.fcs-retour-item-name {
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-retour-item-qty {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-subtle);
}

.fcs-retour-item-price {
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fcs-prune);
  white-space: nowrap;
}

.fcs-retour-refund-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media only screen and (max-width: 480px) {
  .fcs-retour-refund-choices {
    grid-template-columns: 1fr;
  }
}

.fcs-retour-refund {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1.5px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-md, 14px);
  padding: 18px;
  cursor: pointer;
  transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out),
              background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-refund:has(input:checked) {
  border-color: var(--fcs-framboise);
  background: #fdf6f8;
}

.fcs-retour-refund input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fcs-retour-refund-radio {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--fcs-border);
  background: var(--fcs-white);
  flex: none;
  display: inline-block;
  transition: border var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-refund:has(input:checked) .fcs-retour-refund-radio {
  border: 5px solid var(--fcs-framboise);
}

.fcs-retour-refund-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-retour-refund-sub {
  display: block;
  width: 100%;
  padding-left: 30px;
  font-size: 13px;
  font-weight: 400;
  color: var(--fcs-text-muted);
}

.fcs-retour-submit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.fcs-retour-submit-btn {
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border: none;
  border-radius: var(--fcs-radius-pill);
  padding: 16px 34px;
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color var(--fcs-duration-fast) var(--fcs-ease-out);
}

.fcs-retour-submit-btn:hover {
  background: var(--fcs-prune);
}

.fcs-retour-submit-btn:focus-visible {
  outline: 2px solid var(--fcs-prune);
  outline-offset: 2px;
}

.fcs-retour-policy-link {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-framboise, #b04d6b);
  text-decoration: none;
  border-bottom: 1px solid var(--fcs-border-light);
}

.fcs-retour-policy-link:hover {
  color: var(--fcs-framboise);
}

.fcs-retour-errors {
  background: #fdeceb;
  border: 1px solid #f3c6c0;
  border-radius: var(--fcs-radius-md, 14px);
  padding: 16px 18px;
}

.fcs-retour-errors p {
  margin: 0;
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  color: #b5473a;
}

.fcs-retour-errors p + p {
  margin-top: 6px;
}

.fcs-retour-confirm {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #eef5f0;
  border: 1px solid #d8e6dd;
  border-radius: var(--fcs-radius-md, 14px);
  padding: 20px 22px;
  max-width: 640px;
}

.fcs-retour-confirm-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #7c9885;
  color: var(--fcs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
}

.fcs-retour-confirm-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fcs-retour-confirm-title {
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fcs-prune);
}

.fcs-retour-confirm-sub {
  font-family: var(--fcs-font-text);
  font-size: 13.5px;
  line-height: 1.6;
  color: #4a6b57;
}

/* Motion : AUCUNE animation d'entrée sur ces 4 écrans — même choix assumé
   que le reste du gabarit compte (§ "Motion" ci-dessus, ligne ~797) :
   pages lues une fois, sans défilement long, un JS d'observation n'aurait
   mobilisé le socle motion pour rien. Seules les micro-interactions déjà
   couvertes plus haut (hover/focus, transform/opacity, 150-300ms) animent. */