@charset "UTF-8";
/* ==========================================================================
   Maison Argile — espace « Mon compte » (WooCommerce)

   Cette feuille ne concerne QUE les écrans rendus par le shortcode
   [woocommerce_my_account] : connexion, inscription, mot de passe oublié,
   tableau de bord, commandes, téléchargements, adresses, détails du compte.
   Le panier et la commande sont en blocs et sont traités ailleurs.

   Principes repris du design system :
   — aucune ombre, aucun dégradé, aucun arrondi (2px au maximum) ;
   — les séparations sont portées par le blanc, pas par des filets : les traits
     décoratifs ont été retirés à la demande du client, l'espacement et la
     typographie tiennent seuls la hiérarchie. Ne restent que les traits qui
     portent une information (soulignement de champ, onglet actif, état d'un
     message, contour d'un objet dessiné) ;
   — libellés d'interface en Roboto Mono 500, 13-14px, en majuscules ;
   — champs « filet bas » comme .ma-field__input ;
   — focus toujours visible : outline 2px var(--ma-blue), offset 3px.

   Sommaire
     1.  Cadre de la page
     2.  Gabarit deux colonnes
     3.  Menu latéral
     4.  Zone de contenu — typographie
     5.  Tableau de bord
     6.  Formulaires — structure
     7.  Formulaires — champs et états
     8.  Cases à cocher, listes déroulantes
     9.  Boutons et actions
     10. Messages (erreur, succès, information)
     11. Tableaux
     12. Adresses
     13. Pagination
     14. Connexion / inscription / mot de passe oublié
     15. Adaptations mobiles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cadre de la page

   Le shortcode est rendu dans le contenu de singular.php, donc à l'intérieur
   de .ma-entry : il faut lever la largeur de lecture (720px) et les puces de
   liste héritées, qui ne conviennent pas à un tableau de bord.
   -------------------------------------------------------------------------- */

.woocommerce-account .ma-entry {
	max-width: none;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.woocommerce-account .ma-entry > * + * {
	margin-top: 0;
}

.woocommerce-account #content {
	padding-bottom: var(--ma-space-128);
}

.woocommerce-account .ma-page-header {
	padding-bottom: var(--ma-space-40);
}

/* --------------------------------------------------------------------------
   2. Gabarit deux colonnes

   Le menu n'existe que pour un client connecté : c'est la classe `logged-in`
   de WordPress qui déclenche la grille. Déconnecté (connexion, inscription,
   mot de passe perdu), le contenu occupe toute la largeur.
   -------------------------------------------------------------------------- */

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--ma-grid-gap) calc(var(--ma-grid-gap) + var(--ma-space-24));
	align-items: start;
}

/* Les notifications s'affichent sur toute la largeur, jamais dans la colonne
   du menu. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0; /* sans quoi un tableau large déborde de la grille */
}

.woocommerce-account .woocommerce-MyAccount-content-wrapper {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   3. Menu latéral

   Même écriture que le menu du pied de page : mono 13px, empilé, en
   majuscules, sans fond ni puce. L'entrée courante passe en bleu.

   Le filet vertical qui fermait la colonne a été retiré (demande client) :
   la coupure entre le menu et le contenu est désormais tenue par la gouttière
   — 40px de marge intérieure ici, plus l'écart de grille défini en section 2.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 100px; /* hauteur de l'en-tête collant + respiration */
	align-self: start;
	padding-right: var(--ma-space-40);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li::marker {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ma-black);
	transition: opacity 0.25s var(--ma-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	opacity: 0.6;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a {
	color: var(--ma-blue);
}

/* La déconnexion est une action, pas une rubrique : le vide l'isole. En plus
   des 18px d'écart de la liste, 24px de marge portent la coupure à ~42px. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--ma-space-24);
}

/* --------------------------------------------------------------------------
   4. Zone de contenu — typographie
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content .ma-title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
	margin: 0 0 var(--ma-space-24);
}

.woocommerce-account .woocommerce-MyAccount-content h2 + p,
.woocommerce-account .woocommerce-MyAccount-content h3 + p {
	margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-black);
	margin: var(--ma-space-40) 0 var(--ma-space-13);
}

.woocommerce-account .woocommerce-MyAccount-content p {
	margin: 0 0 var(--ma-space-13);
}

.woocommerce-account .woocommerce-MyAccount-content p:last-child {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--ma-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
	text-decoration-thickness: 2px;
}

/* Statut de commande et autres marqueurs : badge de la charte. */
.woocommerce-account .woocommerce mark,
.woocommerce-account .woocommerce .order-status {
	display: inline-block;
	padding: 4px 8px;
	background: #c8ddff;
	color: var(--ma-blue);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: var(--ma-radius);
}

/* --------------------------------------------------------------------------
   5. Tableau de bord (myaccount/dashboard.php)
   -------------------------------------------------------------------------- */

.ma-account-dashboard__lead {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce-MyAccount-content .ma-account-dashboard__lead {
	margin-bottom: var(--ma-space-24);
}

.ma-account-dashboard__text {
	max-width: 520px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.55;
}

/* Raccourcis vers les rubriques : liens flèche de la charte, en colonne.
   Le sélecteur est préfixé pour passer devant « .ma-entry ul » (puces).
   Le filet qui les détachait du texte d'accueil est remplacé par 64px de
   blanc, cf. demande client. */
.woocommerce-account .ma-account-shortcuts {
	display: flex;
	flex-direction: column;
	gap: var(--ma-space-13);
	margin: var(--ma-space-64) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .ma-account-shortcuts li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-content .ma-account-shortcuts a {
	color: var(--ma-black);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .ma-account-shortcuts a:hover .ma-arrow-link__icon {
	transform: translateX(4px);
}

.ma-account-dashboard__logout {
	margin-top: var(--ma-space-40);
	font-family: var(--ma-font-mono);
	font-size: 12px;
	color: var(--ma-grey);
}

.woocommerce-account .woocommerce-MyAccount-content .ma-account-dashboard__logout a {
	color: var(--ma-grey);
}

/* --------------------------------------------------------------------------
   6. Formulaires — structure

   Les formulaires WooCommerce reposent sur des flottants (form-row-first /
   form-row-last) : on repasse en grille, plus fiable et sans .clear.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px var(--ma-space-13);
	max-width: 560px;
}

.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce form .woocommerce-form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-account .woocommerce form .form-row-wide,
.woocommerce-account .woocommerce form .woocommerce-form-row--wide,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last) {
	grid-column: 1 / -1;
}

/* Les cales de flottement de WooCommerce n'ont plus d'objet en grille. */
.woocommerce-account .woocommerce form .clear {
	display: none;
}

/* Le groupe « changement de mot de passe » n'est plus annoncé par un filet
   mais par 48px de blanc — sa légende suffit à le nommer (demande client). */
.woocommerce-account .woocommerce form fieldset {
	margin: var(--ma-space-48) 0 0;
	padding: 0;
	border: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

.woocommerce-account .woocommerce form fieldset legend {
	padding: 0;
	margin-bottom: var(--ma-space-8);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-black);
}

/* Le bouton d'enregistrement est détaché du dernier champ. */
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-account .woocommerce form.woocommerce-address-fields > p.form-row {
	margin-top: var(--ma-space-24);
}

.woocommerce-account .woocommerce form.woocommerce-address-fields {
	max-width: 560px;
}

/* --------------------------------------------------------------------------
   7. Formulaires — champs et états

   Style « filet bas » de .ma-field__input : fond transparent, une seule
   bordure sous le champ, aucun arrondi.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce form .woocommerce-form-row label,
.woocommerce-account .woocommerce form fieldset label {
	font-family: var(--ma-font-mono);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row textarea,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .woocommerce-form-row input.input-text,
.woocommerce .woocommerce-form-login .form-row input.input-text,
.woocommerce .woocommerce-form-register .form-row input.input-text,
.woocommerce .woocommerce-form-lost-password .form-row input.input-text {
	width: 100%;
	padding: 6px 0 10px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	border-radius: 0;
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.25s var(--ma-ease);
}

/* Focus : le filet s'épaissit et passe en bleu. L'outline reste présent au
   clavier — c'est l'exigence d'accessibilité — mais pas à la souris. */
.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row textarea:focus,
.woocommerce-account .woocommerce form .form-row select:focus,
.woocommerce .woocommerce-form-login .form-row input.input-text:focus,
.woocommerce .woocommerce-form-register .form-row input.input-text:focus,
.woocommerce .woocommerce-form-lost-password .form-row input.input-text:focus {
	border-bottom-width: 2px;
	border-bottom-color: var(--ma-blue);
	padding-bottom: 9px;
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus:not(:focus-visible),
.woocommerce-account .woocommerce form .form-row textarea:focus:not(:focus-visible),
.woocommerce-account .woocommerce form .form-row select:focus:not(:focus-visible) {
	outline: none;
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus-visible,
.woocommerce-account .woocommerce form .form-row textarea:focus-visible,
.woocommerce-account .woocommerce form .form-row select:focus-visible {
	outline: 2px solid var(--ma-blue);
	outline-offset: 3px;
}

.woocommerce-account .woocommerce form .form-row textarea {
	min-height: 120px;
	resize: vertical;
}

.woocommerce-account .woocommerce form .form-row input::placeholder,
.woocommerce-account .woocommerce form .form-row textarea::placeholder {
	color: var(--ma-grey);
	opacity: 1;
}

/* Champ désactivé ou en lecture seule : le contraste reste au-dessus de AA. */
.woocommerce-account .woocommerce form .form-row input.input-text:disabled,
.woocommerce-account .woocommerce form .form-row input.input-text[readonly],
.woocommerce-account .woocommerce form .form-row select:disabled {
	color: var(--ma-grey);
	border-bottom-style: dashed;
	cursor: not-allowed;
}

/* Astérisque des champs obligatoires. */
.woocommerce-account .woocommerce .required,
.woocommerce .woocommerce-form-register .required {
	color: var(--ma-error);
	border: 0;
	text-decoration: none;
}

/* Erreur de saisie : filet rouge épaissi + libellé rouge. La couleur n'est
   jamais le seul indice, le message de WooCommerce reste affiché au-dessus. */
.woocommerce-account .woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce-account .woocommerce form .form-row.woocommerce-invalid select,
.woocommerce-account .woocommerce form .form-row.woocommerce-invalid-required-field input.input-text {
	border-bottom-color: var(--ma-error);
	border-bottom-width: 2px;
	padding-bottom: 9px;
}

.woocommerce-account .woocommerce form .form-row.woocommerce-invalid label,
.woocommerce-account .woocommerce form .form-row.woocommerce-invalid-required-field label {
	color: var(--ma-error);
}

.woocommerce-account .woocommerce form .form-row.woocommerce-validated input.input-text {
	border-bottom-color: var(--ma-blue);
}

/* Aides et mentions secondaires. */
.woocommerce-account .woocommerce form .form-row span em,
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce form .description {
	font-family: var(--ma-font-mono);
	font-style: normal;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ma-grey);
}

/* Indicateur de robustesse du mot de passe : lisible, sans pastille ni fond. */
.woocommerce-account .woocommerce-password-strength {
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	text-align: left;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-password-strength.short,
.woocommerce-account .woocommerce-password-strength.bad {
	color: var(--ma-error);
}

.woocommerce-account .woocommerce-password-strength.good {
	color: var(--ma-black);
}

.woocommerce-account .woocommerce-password-strength.strong {
	color: var(--ma-blue);
}

.woocommerce-account .woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	font-family: var(--ma-font-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ma-grey);
}

/* --------------------------------------------------------------------------
   8. Cases à cocher, listes déroulantes
   -------------------------------------------------------------------------- */

/* Les libellés de cases à cocher restent en casse normale : ce sont souvent
   des phrases (consentement, CGV), illisibles en capitales. */
.woocommerce-account .woocommerce form .woocommerce-form__label-for-checkbox,
.woocommerce .woocommerce-form-login__rememberme {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--ma-font-mono);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-transform: none;
}

.woocommerce-account .woocommerce form input[type="checkbox"],
.woocommerce .woocommerce-form-login input[type="checkbox"] {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin: 3px 0 0;
	padding: 0;
	background: none;
	border: 1px solid var(--ma-black);
	border-radius: 0;
	display: grid;
	place-content: center;
	cursor: pointer;
}

.woocommerce-account .woocommerce form input[type="checkbox"]::after,
.woocommerce .woocommerce-form-login input[type="checkbox"]::after {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--ma-black);
	transform: scale(0);
	transition: transform 0.15s var(--ma-ease);
}

.woocommerce-account .woocommerce form input[type="checkbox"]:checked::after,
.woocommerce .woocommerce-form-login input[type="checkbox"]:checked::after {
	transform: scale(1);
}

.woocommerce-account .woocommerce form input[type="checkbox"]:focus-visible,
.woocommerce .woocommerce-form-login input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ma-blue);
	outline-offset: 3px;
}

/* Liste native : on garde le chevron du navigateur (aucun dégradé n'est
   employé pour en dessiner un), seul le filet bas est repris. */
.woocommerce-account .woocommerce form .form-row select {
	padding-right: 4px;
	cursor: pointer;
}

/* Select2 (pays / région de la page Adresses). Le menu déroulant est injecté
   à la racine du document : il ne peut pas être limité au sélecteur du
   compte, d'où ces quelques règles globales, volontairement minimales. */
.woocommerce-account .woocommerce .select2-container .select2-selection--single {
	height: auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	border-radius: 0;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 6px 0 10px;
	line-height: 1.4;
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-size: 14px;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0;
	height: 100%;
}

.select2-dropdown {
	background: var(--ma-white);
	border: 1px solid rgba(58, 58, 53, 0.2);
	border-radius: 0;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	color: var(--ma-black);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid rgba(58, 58, 53, 0.2);
	border-radius: 0;
	padding: 8px 10px;
	font-family: var(--ma-font-mono);
	font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--ma-black);
	color: var(--ma-white);
}

/* --------------------------------------------------------------------------
   9. Boutons et actions

   Le style de base (mono 500, fond noir, sans arrondi) vient de
   woocommerce.css : on ne règle ici que l'espacement et le focus.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce .button + .button {
	margin-left: var(--ma-space-13);
}

.woocommerce-account .woocommerce .button:focus-visible,
.woocommerce-account .woocommerce button:focus-visible,
.woocommerce-account .woocommerce a:focus-visible {
	outline: 2px solid var(--ma-blue);
	outline-offset: 3px;
}

/*
 * Pas d'opacité ici : woocommerce.css traite déjà l'état désactivé en inversant
 * le bouton, précisément parce qu'un voile de 0,4 rendait le libellé illisible
 * (1,5:1). Rétablir une opacité annulerait ce correctif, cette règle étant plus
 * spécifique. On ne pose donc que le curseur.
 */
.woocommerce-account .woocommerce .button:disabled,
.woocommerce-account .woocommerce .button.disabled {
	cursor: not-allowed;
}

/* Actions en fin de ligne du tableau des commandes : boutons compacts. */
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button {
	padding: 9px 16px;
	font-size: 13px;
}

.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 8px;
}

/* --------------------------------------------------------------------------
   10. Messages (erreur, succès, information)

   Bloc plat, filet de gauche 2px coloré, et un glyphe distinct par nature de
   message : la couleur n'est jamais le seul indice.

   Le cadre 1px qui entourait l'encart est retiré (demande client) ; le filet
   de gauche, lui, RESTE : c'est lui qui porte l'état du message et évite de
   dépendre de la seule couleur (WCAG 1.4.1). Le retrait du cadre est compensé
   par le retrait symétrique du padding droit et 24px de marge basse.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-notice {
	position: relative;
	margin: 0 0 var(--ma-space-24);
	padding: var(--ma-space-8) 0 var(--ma-space-8) 32px;
	background: transparent;
	border: 0;
	border-left: 2px solid rgba(58, 58, 53, 0.15);
	border-radius: 0;
	list-style: none;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-error li + li,
.woocommerce-account .woocommerce-info li + li {
	margin-top: 8px;
}

.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before {
	position: absolute;
	top: var(--ma-space-8);
	left: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.5;
	text-indent: 0;
}

.woocommerce-account .woocommerce-error {
	border-left-color: var(--ma-error);
	color: var(--ma-error);
}

/* Même convention que woocommerce.css : ! pour l'erreur, jamais l'astérisque. */
.woocommerce-account .woocommerce-error::before {
	content: "!";
	color: var(--ma-error);
}

.woocommerce-account .woocommerce-message {
	border-left-color: var(--ma-blue);
}

.woocommerce-account .woocommerce-message::before {
	content: "\2713"; /* ✓ */
	color: var(--ma-blue);
}

.woocommerce-account .woocommerce-info {
	border-left-color: var(--ma-blue);
}

.woocommerce-account .woocommerce-info::before {
	content: "//";
	color: var(--ma-blue);
}

/* Un message peut contenir un bouton d'appel (« Voir la boutique »). */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
	float: right;
	margin-left: var(--ma-space-24);
}

.woocommerce-account .woocommerce-error a {
	color: var(--ma-error);
}

/* --------------------------------------------------------------------------
   11. Tableaux (commandes, détail de commande, téléchargements)

   Plus aucun filet : ni sous l'en-tête, ni entre les lignes, ni au pied
   (demande client). La lecture repose désormais sur deux appuis :

   — la typographie : en-têtes en Roboto Mono 13px capitales et --ma-grey,
     cellules en --ma-black. Le contraste de couleur suffit à repérer la
     ligne de titre sans qu'un trait la souligne ;
   — l'air vertical : 14px de marge intérieure haut et bas par cellule (28px
     entre deux lignes), et 24px supplémentaires aux jonctions en-tête/corps
     et corps/pied, là où passait le filet le plus marqué.

   Le tableau défile horizontalement plutôt que de déborder.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce table.shop_table,
.woocommerce-account .woocommerce table.woocommerce-orders-table,
.woocommerce-account .woocommerce table.woocommerce-table--order-details,
.woocommerce-account .woocommerce table.woocommerce-table--order-downloads,
.woocommerce-account .woocommerce table.woocommerce-MyAccount-downloads {
	width: 100%;
	margin: 0 0 var(--ma-space-40);
	background: transparent;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.woocommerce-account .woocommerce table.shop_table thead th,
.woocommerce-account .woocommerce table.woocommerce-orders-table thead th,
.woocommerce-account .woocommerce table.woocommerce-table--order-details thead th {
	padding: 0 var(--ma-space-24) var(--ma-space-14) 0;
	background: transparent;
	border: 0;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ma-grey);
	white-space: nowrap;
}

.woocommerce-account .woocommerce table.shop_table tbody td,
.woocommerce-account .woocommerce table.shop_table tbody th,
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tbody td,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tbody th {
	padding: var(--ma-space-14) var(--ma-space-24) var(--ma-space-14) 0;
	background: transparent;
	border: 0;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce table.shop_table td:last-child,
.woocommerce-account .woocommerce table.shop_table th:last-child {
	padding-right: 0;
}

/* Jonction en-tête / corps : le filet supprimé y est remplacé par 24px, soit
   nettement plus que l'écart entre deux lignes du corps. La coupure reste
   donc lisible sans trait. */
.woocommerce-account .woocommerce table.shop_table tbody tr:first-child > td,
.woocommerce-account .woocommerce table.shop_table tbody tr:first-child > th,
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:first-child > td,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tbody tr:first-child > td,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tbody tr:first-child > th {
	padding-top: var(--ma-space-24);
}

/* Pied du détail de commande : sous-total, expédition, total. Les libellés
   passent en --ma-grey comme l'en-tête, le total reste en noir et en gras :
   la hiérarchie du pied tient à la graisse et à la couleur, plus au filet. */
.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce table.shop_table tfoot th {
	padding: var(--ma-space-13) var(--ma-space-24) var(--ma-space-13) 0;
	background: transparent;
	border: 0;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ma-grey);
}

.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot td,
.woocommerce-account .woocommerce table.shop_table tfoot td {
	padding: var(--ma-space-13) 0;
	background: transparent;
	border: 0;
	text-align: left;
}

/* Jonction corps / pied : même respiration de 24px qu'entre l'en-tête et le
   corps, pour que le récapitulatif se détache du détail des articles. */
.woocommerce-account .woocommerce table.shop_table tfoot tr:first-child > th,
.woocommerce-account .woocommerce table.shop_table tfoot tr:first-child > td {
	padding-top: var(--ma-space-24);
}

.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child td {
	font-weight: 700;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce table.shop_table .amount,
.woocommerce-account .woocommerce table.shop_table .woocommerce-Price-amount {
	color: var(--ma-grey);
	white-space: nowrap;
}

.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child .amount {
	color: var(--ma-black);
}

.woocommerce-account .woocommerce table.shop_table .product-name a {
	color: var(--ma-black);
	text-decoration: none;
}

.woocommerce-account .woocommerce table.shop_table .product-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce table.shop_table .product-quantity {
	color: var(--ma-grey);
}

.woocommerce-account .woocommerce table.shop_table .wc-item-meta,
.woocommerce-account .woocommerce table.shop_table dl.variation {
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--ma-grey);
}

.woocommerce-account .woocommerce table.shop_table .wc-item-meta li {
	list-style: none;
	margin: 0;
}

/* Aucune commande / aucun téléchargement. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message--info {
	margin-bottom: var(--ma-space-24);
}

/* --------------------------------------------------------------------------
   12. Adresses
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
	margin-top: var(--ma-space-24);
}

.woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce .woocommerce-Addresses .col-2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Le filet sous le titre d'adresse est remplacé par 24px de blanc : le titre
   en capitales mono se détache seul de l'adresse en casse normale. */
.woocommerce-account .woocommerce .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ma-space-13);
	padding-bottom: 0;
	margin-bottom: var(--ma-space-24);
}

.woocommerce-account .woocommerce .woocommerce-Address-title h2,
.woocommerce-account .woocommerce .woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce .woocommerce-Address-title .edit {
	flex: none;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--ma-blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.woocommerce-account .woocommerce .woocommerce-Address-title .edit:hover {
	border-bottom-color: currentColor;
}

.woocommerce-account .woocommerce .woocommerce-Address address {
	font-family: var(--ma-font-mono);
	font-style: normal;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ma-black);
}

/* Adresses affichées au bas d'une commande. */
.woocommerce-account .woocommerce .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
	margin-top: var(--ma-space-24);
}

.woocommerce-account .woocommerce .woocommerce-columns--addresses .col-1,
.woocommerce-account .woocommerce .woocommerce-columns--addresses .col-2 {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce .woocommerce-customer-details address {
	font-style: normal;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   13. Pagination du compte (liste des commandes)
   -------------------------------------------------------------------------- */

/* Filet supérieur retiré : 64px de blanc détachent la pagination du tableau,
   qui n'a lui-même plus de filet de clôture (demande client). */
.woocommerce-account .woocommerce-pagination,
.woocommerce-account .woocommerce-Pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ma-space-13);
	margin-top: var(--ma-space-64);
	padding-top: 0;
}

.woocommerce-account .woocommerce-pagination .button--previous {
	margin-right: auto;
}

.woocommerce-account .woocommerce-pagination .button--next {
	margin-left: auto;
}

.woocommerce-account .woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.woocommerce-account .woocommerce-pagination .page-numbers {
	padding: 8px 12px;
	border: 1px solid rgba(58, 58, 53, 0.2);
	border-radius: 0;
	background: transparent;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--ma-black);
	text-decoration: none;
}

.woocommerce-account .woocommerce-pagination .page-numbers.current,
.woocommerce-account .woocommerce-pagination .page-numbers:hover {
	background: var(--ma-black);
	border-color: var(--ma-black);
	color: var(--ma-white);
}

/* --------------------------------------------------------------------------
   14. Connexion / inscription / mot de passe oublié

   Deux colonnes séparées par le vide — le filet vertical est retiré (demande
   client) — ; l'ensemble reste cadré à gauche, comme les formulaires du site.
   -------------------------------------------------------------------------- */

/*
 * WooCommerce encadre historiquement les formulaires de connexion, d'inscription
 * et de mot de passe oublié (border 1px + border-radius 5px + padding 20px).
 * C'est exactement le genre de cadre que la charte refuse : les titres et
 * l'espacement suffisent à distinguer les deux colonnes.
 */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.lost_reset_password,
.woocommerce-account .woocommerce form.checkout_coupon {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/*
 * WooCommerce pose un clearfix ::before / ::after sur .col2-set, héritage des
 * mises en page en flottants. Dans une grille CSS ces pseudo-éléments deviennent
 * de vraies cases : ils occupaient la première cellule, ce qui renvoyait la
 * connexion en colonne 2 et l'inscription à la ligne suivante. On les neutralise
 * avant toute chose.
 */
.ma-auth::before,
.ma-auth::after,
.woocommerce-account .woocommerce .col2-set::before,
.woocommerce-account .woocommerce .col2-set::after {
	content: none;
	display: none;
}

.ma-auth {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ma-space-64);
	align-items: start;
	max-width: 1080px;
	padding-top: var(--ma-space-24);
}

/* Inscription désactivée dans les réglages : une seule colonne. */
.ma-auth--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
}

.woocommerce-account .woocommerce .ma-auth .col-1,
.woocommerce-account .woocommerce .ma-auth .col-2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Le blanc sépare la connexion de l'inscription : 64px d'écart de grille plus
   64px de marge intérieure, soit 128px de gouttière — les deux formulaires
   étant par ailleurs bornés à 420px, la coupure est franche sans filet. */
.ma-auth__col--register {
	padding-left: var(--ma-space-64);
}

.ma-auth .ma-title {
	margin-bottom: var(--ma-space-13);
}

.ma-auth__intro {
	max-width: 380px;
	margin-bottom: var(--ma-space-40);
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ma-black);
}

.woocommerce-account .woocommerce .ma-auth__form,
.woocommerce .woocommerce-form-lost-password {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: 420px;
}

/* Ligne « se souvenir de moi » + bouton : sur une seule ligne, alignés.
   Le sélecteur inclut « form » pour passer devant la règle générique des
   .form-row de la section 6, qui les empile. */
.woocommerce-account .woocommerce form .ma-auth__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ma-space-13);
	margin-top: var(--ma-space-13);
}

.woocommerce-account .woocommerce form .ma-auth__actions .button {
	margin-left: auto;
}

.ma-auth__lost {
	margin: 0;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.woocommerce-account .woocommerce .ma-auth__lost a {
	color: var(--ma-black);
	text-decoration: none;
	border-bottom: 1px solid rgba(58, 58, 53, 0.35);
	padding-bottom: 2px;
}

.woocommerce-account .woocommerce .ma-auth__lost a:hover {
	color: var(--ma-blue);
	border-bottom-color: currentColor;
}

.ma-auth__note {
	margin: 0;
	font-family: var(--ma-font-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ma-grey);
}

/* Formulaire « mot de passe oublié » : seul sur la page, cadré à gauche. */
.woocommerce .woocommerce-form-lost-password {
	padding-top: var(--ma-space-24);
}

.woocommerce .woocommerce-form-lost-password .woocommerce-form-row {
	margin: 0;
}

.woocommerce .woocommerce-ResetPassword .form-row-first,
.woocommerce .woocommerce-ResetPassword .form-row-last {
	width: auto;
	float: none;
}

/* --------------------------------------------------------------------------
   15. Adaptations mobiles
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: var(--ma-grid-gap);
	}
}

@media (max-width: 900px) {
	/* Le menu repasse au-dessus du contenu, en ligne, comme le pied de page
	   sous 1000px. */
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ma-space-40);
	}

	/* Filets retirés ici aussi : l'écart de grille (40px) plus 24px de marge
	   intérieure détachent le menu du contenu qu'il surmonte. */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
		padding: 0 0 var(--ma-space-24);
		border: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px 20px;
	}

	/* En ligne, la déconnexion suit simplement les autres entrées. */
	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
	}

	.woocommerce-account .woocommerce .woocommerce-Addresses,
	.woocommerce-account .woocommerce .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ma-space-40);
	}
}

@media (max-width: 780px) {
	.ma-auth {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ma-space-48);
	}

	/* Empilées, les deux colonnes sont séparées par 96px de blanc (48px d'écart
	   de grille + 48px de marge intérieure) au lieu du filet. */
	.ma-auth__col--register {
		padding-left: 0;
		padding-top: var(--ma-space-48);
		border: 0;
	}
}

@media (max-width: 768px) {
	/* WooCommerce empile déjà les cellules sous 768px (shop_table_responsive).
	   On reprend simplement la main sur l'alignement et sur l'étiquette.
	   Le filet entre deux commandes empilées est remplacé par 24px de marge
	   intérieure haut et bas, soit 48px entre deux blocs : c'est le double de
	   l'écart entre deux cellules d'une même commande (2 × 6px + interligne),
	   donc le groupement reste lisible sans trait. */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr {
		display: block;
		padding: var(--ma-space-24) 0;
	}

	/* Pas de blanc superflu en tête et en pied de liste. */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:first-child {
		padding-top: 0;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:last-child {
		padding-bottom: 0;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td {
		display: block;
		padding: 6px 0;
		border: 0;
		text-align: left;
	}

	/* Empilé, c'est la ligne qui porte la respiration, plus la cellule : on
	   annule la marge de jonction en-tête/corps réglée en section 11. */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:first-child > td,
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:first-child > th {
		padding-top: 6px;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td[data-title]::before {
		content: attr(data-title);
		display: block;
		float: none;
		margin-bottom: 2px;
		font-family: var(--ma-font-mono);
		font-weight: 500;
		font-size: 11px;
		letter-spacing: -0.01em;
		text-transform: uppercase;
		color: var(--ma-grey);
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td:not([data-title])::before {
		content: none;
	}
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce form.woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button {
		display: block;
		width: 100%;
		text-align: center;
	}

	.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button + .button {
		margin: 8px 0 0;
	}

	.woocommerce-account .woocommerce-info .button,
	.woocommerce-account .woocommerce-message .button {
		float: none;
		display: block;
		margin: var(--ma-space-13) 0 0;
	}
}

/* Le tableau de bord et les tableaux restent lisibles à l'impression du
   récapitulatif de commande. */
@media print {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-pagination {
		display: none;
	}

	.woocommerce-account.logged-in .woocommerce {
		display: block;
	}
}