/* Mon compte (inc/account.php ; recette Alain 2026-10-08 : « pas belle et trop WordPress »).
   Menu en onglets au trait au-dessus du contenu (comme les cinq mondes de La Boutique), sans avatar ; tableau de bord en
   trois cartes ; commandes, adresses et formulaires aux couleurs de la charte : un seul bouton vermillon par écran
   (celui qui enregistre), les autres actions en liens. */

/* ---- Mise en page : le menu au-dessus, le contenu centré ---- */
body.kh-my-account .woocommerce { display: block; max-width: 56rem; margin: 0 auto; }
body.kh-my-account .account-navigation-wrap { float: none; width: auto; margin: 0 0 2.5rem; padding: 0; border: 0; }
body.kh-my-account .woocommerce-MyAccount-content { float: none; width: auto; padding: 0; }
body.kh-my-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2rem; margin: 0; padding: 0; border-bottom: 1px solid var(--kh-sumi-20); list-style: none; }
body.kh-my-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; }
/* Sélecteurs par .account-navigation-wrap : Kadence y pose sa barre latérale de 5 px (woocommerce-account.min.css). */
body.kh-my-account .account-navigation-wrap li a { display: block; margin-bottom: -1px; padding: .7rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--kh-sumi-70); font: 400 .78rem/1.2 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: none; }
body.kh-my-account .account-navigation-wrap li.is-active a { border-left: 0; border-color: var(--kh-vermillon); color: var(--kh-sumi); }
body.kh-my-account .account-navigation-wrap li a:is(:hover, :focus-visible) { border-left: 0; color: var(--kh-vermillon); }
body.kh-my-account .woocommerce-MyAccount-navigation li::before, body.kh-my-account .woocommerce-MyAccount-navigation li a::before { display: none; }
body.kh-my-account .account-navigation-wrap .kadence-account-avatar { display: none; } /* au cas où l'option Kadence reviendrait */

/* ---- Tableau de bord : un mot d'accueil, trois cartes, l'aide ---- */
.kh-account-hello { margin: 0 0 .4rem; font: italic 400 clamp(1.7rem, 3vw, 2.2rem)/1.2 var(--kh-font-display); text-align: center; }
.kh-account-intro { max-width: 46ch; margin: 0 auto 2.25rem; color: var(--kh-sumi-70); text-align: center; }
.woocommerce-MyAccount-content .kh-account-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.kh-account-card { display: flex; flex-direction: column; margin: 0; padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--kh-sumi-20); background: rgb(255 253 252 / .55); }
.kh-account-card h2 { margin: 0 0 .6rem; font: italic 400 1.4rem/1.2 var(--kh-font-display); }
.kh-account-card p { margin: 0 0 1rem; color: var(--kh-sumi-70); font-size: .95rem; line-height: 1.5; }
.kh-account-card a { margin-top: auto; color: var(--kh-sumi); font: 400 .78rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.kh-account-card a::after { content: " \2192"; }
.kh-account-card a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
.kh-account-help { margin: 2rem 0 0; color: var(--kh-sumi-70); font: 300 .85rem/1.6 var(--kh-font-ui); text-align: center; }
.kh-account-help a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Commandes : tableau au trait, état en pastille, actions en liens ---- */
body.kh-my-account .woocommerce-orders-table { width: 100%; border: 0; border-collapse: collapse; }
body.kh-my-account .woocommerce-orders-table th { padding: .6rem .5rem; border: 0; border-bottom: 1px solid var(--kh-sumi-20); background: none; color: var(--kh-sumi-70); font: 400 .72rem/1.2 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; text-align: left; }
body.kh-my-account .woocommerce-orders-table td { padding: .9rem .5rem; border: 0; border-bottom: 1px solid var(--kh-sumi-20); background: none; font-size: .95rem; vertical-align: middle; }
body.kh-my-account .woocommerce-orders-table__cell-order-number a { color: var(--kh-sumi); font-family: var(--kh-font-display); font-size: 1.15rem; font-style: italic; text-decoration: none; }
body.kh-my-account .woocommerce-orders-table__cell-order-status { white-space: nowrap; }
body.kh-my-account .kh-order-status { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--kh-sumi-20); font: 400 .72rem/1.3 var(--kh-font-ui); letter-spacing: .06em; }
body.kh-my-account .kh-order-status--completed, body.kh-my-account .kh-order-status--processing { border-color: var(--kh-sumi); }
body.kh-my-account .kh-order-status--pending, body.kh-my-account .kh-order-status--on-hold { border-color: var(--kh-vermillon); color: var(--kh-vermillon); }
body.kh-my-account .kh-order-status--cancelled, body.kh-my-account .kh-order-status--failed, body.kh-my-account .kh-order-status--refunded { color: var(--kh-sumi-70); }
body.kh-my-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }
/* Seulement les actions du tableau des commandes : ailleurs (ajouter un moyen de paiement…), le bouton reste un bouton. */
body.kh-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .woocommerce-button.button { display: inline; margin: 0 0 0 1rem; padding: 0; border: 0; background: none; color: var(--kh-sumi); font: 400 .78rem/1.3 var(--kh-font-ui); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; box-shadow: none; }
body.kh-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .woocommerce-button.button.pay { color: var(--kh-vermillon); }
body.kh-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .woocommerce-button.button:is(:hover, :focus-visible) { color: var(--kh-vermillon); }

/* ---- Adresses : deux cartes ---- */
body.kh-my-account .woocommerce .woocommerce-Addresses.col2-set { display: grid; width: auto; float: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
body.kh-my-account .woocommerce-Addresses::before, body.kh-my-account .woocommerce-Addresses::after { display: none; }
/* WooCommerce : .woocommerce .col2-set .col-1 { float; width: 48% } */
body.kh-my-account .woocommerce .col2-set .woocommerce-Address { float: none; width: auto; max-width: none; margin: 0; padding: 1.4rem; border: 1px solid var(--kh-sumi-20); background: rgb(255 253 252 / .55); }
body.kh-my-account .woocommerce-Address-title { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
body.kh-my-account .woocommerce-Address-title h2 { margin: 0; font: italic 400 1.4rem/1.2 var(--kh-font-display); }
body.kh-my-account .woocommerce-Address-title .edit { float: none; color: var(--kh-sumi); font: 400 .75rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; text-align: left; }
body.kh-my-account .woocommerce-Address address { font-style: normal; line-height: 1.6; }

/* ---- Formulaires : champs au trait, angles droits, un seul bouton vermillon ---- */
body.kh-my-account .woocommerce form .form-row label { color: var(--kh-sumi-70); font: 400 .72rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
body.kh-my-account .woocommerce form .form-row :is(input.input-text, select, textarea) { border: 1px solid var(--kh-sumi-20); border-radius: 0; background: rgb(255 253 252 / .7); box-shadow: none; font-family: var(--kh-font-body); }
body.kh-my-account .woocommerce form .form-row :is(input.input-text, select, textarea):focus { border-color: var(--kh-sumi); outline: 2px solid var(--kh-vermillon); outline-offset: 1px; }
body.kh-my-account .woocommerce form fieldset { margin: 1.5rem 0 0; padding: 1.25rem; border: 1px solid var(--kh-sumi-20); }
body.kh-my-account .woocommerce form fieldset legend { padding: 0 .5rem; font: italic 400 1.25rem/1.2 var(--kh-font-display); }
body.kh-my-account .woocommerce form .form-row em, body.kh-my-account .woocommerce form .form-row .description { color: var(--kh-sumi-70); font-size: .8rem; font-style: normal; }
body.kh-my-account .woocommerce :is(button[type="submit"], .woocommerce-Button) { border-radius: 0; background: var(--kh-vermillon); color: #fff; font-family: var(--kh-font-ui); }

/* ---- Avis WooCommerce (confirmer l'adresse e-mail…) : discrets, sans aplat ---- */
body.kh-my-account .woocommerce-info, body.kh-my-account .woocommerce-message { border: 1px solid var(--kh-sumi-20); border-left: 2px solid var(--kh-vermillon); background: rgb(255 253 252 / .55); color: var(--kh-sumi); }
body.kh-my-account :is(.woocommerce-info, .woocommerce-message) { font-size: .92rem; }
body.kh-my-account :is(.woocommerce-info, .woocommerce-message) .button { padding: .5rem .9rem; border: 1px solid var(--kh-sumi); border-radius: 0; background: none; color: var(--kh-sumi); font: 400 .75rem/1.3 var(--kh-font-ui); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 767px) {
  body.kh-my-account .woocommerce-MyAccount-navigation ul { flex-wrap: nowrap; justify-content: flex-start; gap: 1.25rem; margin: 0 calc(-1 * var(--kh-gutter, 16px)); padding: 0 var(--kh-gutter, 16px); overflow-x: auto; scrollbar-width: none; }
  body.kh-my-account .woocommerce-MyAccount-navigation li { flex: none; }
  .woocommerce-MyAccount-content .kh-account-cards, body.kh-my-account .woocommerce .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; }
  body.kh-my-account .woocommerce-orders-table__cell-order-actions { text-align: left; }
  body.kh-my-account .woocommerce-orders-table__cell-order-actions .button:first-child { margin-left: 0; }
}