/* ------------------------------------------------------------------ *
 * L'ESPACE CLIENT
 *
 * WooCommerce sert ces pages sans habillage : une liste à puces d'un
 * côté, un paragraphe de l'autre. Ça marche, et ça n'a l'air de rien —
 * or c'est la page où un client revient, celle qui dit s'il a affaire à
 * un commerce tenu ou à un site laissé en plan.
 *
 * ELLE EMPRUNTE LA CHARTE DU SITE, elle n'en invente pas une seconde.
 * Les jetons viennent de `charte.css` — cuivre du cidre, crème, encre.
 *
 * MOBILE D'ABORD, AU SENS STRICT : aucune requête `max-width` ici. On
 * élargit vers le haut, on ne rattrape jamais vers le bas. C'est la même
 * règle que `boutique.css`, et pour la même raison — un client commande
 * debout, sur un marché.
 * ------------------------------------------------------------------ */

.woocommerce-account .woocommerce {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* --- La navigation : des lignes, pas des puces --------------------- *
 * Une liste à puces se lit comme un sommaire ; ces entrées sont des
 * BOUTONS. On leur donne une cible franche — 46 px — parce qu'on y
 * arrive au pouce.                                                     */
.woocommerce-account .woocommerce-MyAccount-navigation {
  margin: 0 0 28px;
  width: auto;
  float: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--rlg-sable, #F5EFE4);
  border: 1px solid var(--rlg-trait, #E4DCCE);
  border-radius: 12px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  flex: 1 1 auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  font: 600 14px/1.2 var(--rlg-sans, system-ui, sans-serif);
  color: var(--rlg-encre-douce, #5C5145);
  text-decoration: none;
  text-align: center;
  transition: background .15s, color .15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(168, 91, 36, .09);
  color: var(--rlg-cuivre, #A85B24);
}

/* L'ACTIF EST DÉCOUPÉ DANS LA BARRE, il ne porte pas juste une couleur.
   Un onglet actif signalé par la seule teinte disparaît pour qui ne
   distingue pas le cuivre du brun — un patron sur huit. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--rlg-encre, #2B2620);
  color: var(--rlg-creme, #FAF7F2);
}

/* La déconnexion se détache : c'est la seule qui ferme quelque chose. */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a {
  color: var(--rlg-rouge, #A3372F);
}

/* --- Le contenu ---------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto;
  float: none;
  background: var(--rlg-creme, #FAF7F2);
  border: 1px solid var(--rlg-trait, #E4DCCE);
  border-radius: 14px;
  padding: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  font-size: 16px;
  line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--rlg-titre, Georgia, serif);
  letter-spacing: -.015em;
  margin: 0 0 12px;
}

/* --- Les tableaux de commandes ------------------------------------- *
 * Ils deviennent des FICHES sous 720 px. Six colonnes sur un téléphone
 * se lisent en défilant latéralement — donc ne se lisent pas.
 * `data-title` est déjà écrit par WooCommerce : on s'en sert.          */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  border: 1px solid var(--rlg-trait, #E4DCCE);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

.woocommerce-account table.shop_table th {
  background: var(--rlg-sable, #F5EFE4);
  font: 600 12px/1.4 var(--rlg-sans, system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rlg-encre-douce, #5C5145);
  padding: 12px 14px;
  text-align: left;
  border: 0;
}

.woocommerce-account table.shop_table td {
  padding: 14px;
  border: 0;
  border-top: 1px solid var(--rlg-trait, #E4DCCE);
  font-size: 14.5px;
  vertical-align: middle;
}

.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
  color: var(--rlg-cuivre, #A85B24);
}

/* Les statuts, en pastille : un mot en gris se confond avec une date. */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font: 600 12px/1.6 var(--rlg-sans, system-ui, sans-serif);
}

/* --- Les boutons --------------------------------------------------- */
.woocommerce-account .woocommerce-button,
.woocommerce-account .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--rlg-cuivre, #A85B24);
  color: #fff;
  font: 600 14px/1 var(--rlg-sans, system-ui, sans-serif);
  text-decoration: none;
  border: 1px solid var(--rlg-cuivre, #A85B24);
}

.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .button:hover {
  background: #8E4B1C;
  color: #fff;
}

/* --- Les formulaires : connexion, inscription, adresse ------------- */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce form.woocommerce-address-fields {
  border: 1px solid var(--rlg-trait, #E4DCCE);
  border-radius: 14px;
  background: var(--rlg-creme, #FAF7F2);
  padding: 24px;
}

.woocommerce-account .woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  font: 600 13.5px/1.4 var(--rlg-sans, system-ui, sans-serif);
  color: var(--rlg-encre, #2B2620);
}

.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce form select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--rlg-trait, #E4DCCE);
  border-radius: 8px;
  background: #fff;
  font-size: 16px; /* 16 px : en dessous, iOS ZOOME au focus. */
  color: var(--rlg-encre, #2B2620);
}

.woocommerce-account .woocommerce form .input-text:focus-visible,
.woocommerce-account .woocommerce form select:focus-visible {
  outline: 3px solid var(--rlg-cuivre-clair, #C8892B);
  outline-offset: 2px;
}

/* --- L'espace fidélité, servi par le plugin ------------------------ */
.woocommerce-account .fidelite-solde {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 20px;
  margin: 0 0 20px;
  background: var(--rlg-sable, #F5EFE4);
  border: 1px solid var(--rlg-trait, #E4DCCE);
  border-radius: 12px;
}

.woocommerce-account .fidelite-solde b {
  font: 700 30px/1 ui-monospace, monospace;
  color: var(--rlg-cuivre, #A85B24);
  font-variant-numeric: tabular-nums;
}

/* --- Deux colonnes à partir de 860 px ------------------------------ *
 *
 * ON NOMME LES ZONES, ON NE COMPTE PAS LES CASES.
 *
 * DÉFAUT MESURÉ SUR CAPTURE, le 2026-08-18 : la navigation partait à
 * DROITE et large, le contenu à GAUCHE et étroit. Le
 * `.woocommerce-notices-wrapper` — vide, donc invisible — occupait la
 * première cellule, et tout ce qui suivait se décalait d'une case.
 *
 * > Une grille qui dépend de l'ORDRE se casse au premier élément qu'on
 * > n'a pas prévu. Et celui-là ne se voyait pas.
 *
 * `grid-template-areas` donne à chacun sa place par son nom. L'ordre du
 * DOM n'entre plus en jeu, et un élément inattendu ne décale plus rien.
 */
@media (min-width: 860px) {
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas:
      "avis  avis"
      "nav   contenu";
    gap: 24px;
    align-items: start;
  }

  .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-area: avis; }
  .woocommerce-account .woocommerce-MyAccount-navigation { grid-area: nav; margin: 0; }
  .woocommerce-account .woocommerce-MyAccount-content { grid-area: contenu; }

  /* TOUT CE QUI N'EST NI L'UN NI L'AUTRE PASSE EN PLEINE LARGEUR.
     La page déconnectée sert deux colonnes de formulaires : sans cette
     règle, elles se retrouveraient dans la colonne de 250 px. */
  .woocommerce-account .woocommerce > .u-columns,
  .woocommerce-account .woocommerce > form { grid-column: 1 / -1; }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 96px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    justify-content: flex-start;
    text-align: left;
  }
}

/* --- Les tableaux : des fiches d'abord, un tableau ensuite --------- *
 *
 * MOBILE D'ABORD, ET CETTE FOIS POUR DE BON. La première version posait
 * les fiches sous 720 px, dans une requête de rattrapage vers le bas —
 * exactement ce que l'en-tête de ce fichier promet de ne pas faire.
 *
 * Et le garde-fou de l'outil a mordu sur le commentaire qui CITAIT
 * l'ancienne requête. Il avait raison : un fichier qui interdit une
 * forme ne doit pas l'écrire, même pour en parler.
 *
 * ON N'EMPILE QUE CE QUI PORTE SON INTITULÉ.
 *
 * Mesuré le 2026-08-18 sur les pages servies : « Mes commandes » porte
 * `data-title` sur ses 50 cellules ; « Ma fidélité » n'en portait AUCUN
 * sur ses 49. Empiler des cellules sans étiquette donne une colonne de
 * valeurs anonymes — pire que le défilement, parce que ça a l'air voulu.
 *
 * > Un `attr()` vide ne rend pas une chaîne vide visible : il rend la
 * > RÈGLE invisible.
 *
 * ET ON LIT LES DEUX CONVENTIONS. WooCommerce écrit `data-title`,
 * nos plugins écrivent `data-titre` — celle des écrans d'administration.
 * Renommer l'une des deux casserait l'autre ; la feuille sait lire les
 * deux, et c'est le seul endroit où elles se rencontrent.
 *
 * SANS `:has()`, LA RÈGLE TOMBE ENTIÈRE, et le tableau défile DANS son
 * cadre. Moins agréable ; jamais cassé. C'est la couche qui doit tenir
 * toute seule.
 */
.woocommerce-account .woocommerce-MyAccount-content { overflow-x: auto; }

.woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) thead {
  display: none;
}

.woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) tr {
  display: block;
  border-top: 1px solid var(--rlg-trait, #E4DCCE);
}

.woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) tr:first-child {
  border-top: 0;
}

.woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) td {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 0;
  padding: 8px 14px;
}

.woocommerce-account table.shop_table td[data-title]::before { content: attr(data-title); }
.woocommerce-account table.shop_table td[data-titre]::before { content: attr(data-titre); }

.woocommerce-account table.shop_table td[data-title]::before,
.woocommerce-account table.shop_table td[data-titre]::before {
  font: 600 12px/1.5 var(--rlg-sans, system-ui, sans-serif);
  color: var(--rlg-encre-douce, #5C5145);
  flex: 0 0 auto;
}

/* UNE CELLULE VIDE SE RETIRE. Un intitulé suivi de rien se lit comme une
   donnée manquante — c'est la leçon des écrans d'administration. */
.woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) td:empty {
  display: none;
}

/* --- À partir de 720 px, le tableau redevient un tableau ----------- */
@media (min-width: 720px) {
  .woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) thead {
    display: table-header-group;
  }

  .woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) tr {
    display: table-row;
    border-top: 0;
  }

  .woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) td,
  .woocommerce-account table.shop_table:has(td[data-title], td[data-titre]) td:empty {
    display: table-cell;
    padding: 12px 14px;
  }

  .woocommerce-account table.shop_table td[data-title]::before,
  .woocommerce-account table.shop_table td[data-titre]::before {
    content: none;
  }
}

/* ------------------------------------------------------------------ *
 * LE TABLEAU DE BORD
 * ------------------------------------------------------------------ */
.woocommerce-account .compte-bonjour {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  margin: 0 0 12px;
  font-size: 20px;
  font-family: var(--rlg-titre, Georgia, serif);
}

.woocommerce-account .compte-bonjour strong { font-weight: 700; }

.woocommerce-account .compte-deconnexion {
  margin-left: auto;
  font: 500 13px/1.4 var(--rlg-sans, system-ui, sans-serif);
  color: var(--rlg-encre-douce, #5C5145);
}

.woocommerce-account .compte-intro {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rlg-encre-douce, #5C5145);
}

/* LES RACCOURCIS SONT UNE RANGÉE, PAS UNE PILE. Trois boutons empilés
   dans une colonne étroite se lisent comme trois étapes à suivre. */
.woocommerce-account .compte-raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.woocommerce-account .compte-raccourcis .button { flex: 0 0 auto; }

/* ------------------------------------------------------------------ *
 * « MON COMPTE » DANS LA NAVIGATION
 *
 * Il passait à la ligne sous le menu. Ce n'est pas une entrée de plus :
 * c'est un accès, et il se distingue sans crier.
 * ------------------------------------------------------------------ */
.menu-item-compte > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.menu-item-compte > a::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  /* Une silhouette, pas une image : rien à charger, rien à bloquer. */
  -webkit-mask: var(--rlg-icone-compte) center / contain no-repeat;
  mask: var(--rlg-icone-compte) center / contain no-repeat;
}

:root {
  --rlg-icone-compte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5Z'/%3E%3C/svg%3E");
}