/* 1337 — espace « Mon compte » de WooCommerce.
 *
 * Couvre l'ensemble du parcours client : connexion, inscription, tableau de
 * bord, commandes, adresses, moyens de paiement, mot de passe oublie. Les
 * selecteurs viennent des gabarits du plugin (templates/myaccount/), pas d'une
 * observation partielle : les ecrans reserves aux clients connectes sont ainsi
 * couverts eux aussi.
 *
 * Toutes les regles sont prefixees par .woocommerce-account ou par un
 * conteneur « Mon compte » : rien ici ne peut deborder sur le panier ou la
 * commande, habilles par woo-skin.css.
 */

.woocommerce-account {
	--cp-ink: #f5eefe;
	--cp-muted: #a596c0;
	--cp-faint: #6d5f86;
	--cp-line: rgba(255, 255, 255, .09);
	--cp-line2: rgba(255, 255, 255, .17);
	--cp-card: rgba(255, 255, 255, .026);
	--cp-brand: #9b46ff;
	--cp-violet: #d31ad1;
	--cp-display: "Chakra Petch", sans-serif;
	--cp-body: "Space Grotesk", sans-serif;
	--cp-mono: "JetBrains Mono", monospace;
}

/* ==========================================================================
   Titres de section
   ========================================================================== */

.woocommerce-account h2,
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account legend {
	font-family: var(--cp-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cp-ink);
}

/* ==========================================================================
   Connexion / inscription (deux colonnes)
   ========================================================================== */

.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	align-items: start;
}

/* WooCommerce ajoute un « clearfix » en ::before / ::after pour contenir ses
   colonnes flottantes. En grille, ces deux pseudo-elements deviennent des
   cellules a part entiere : ils occupaient la premiere et la derniere, et
   poussaient « Se connecter » dans la colonne de droite avec « S'inscrire »
   renvoye a la ligne suivante. Ils n'ont plus d'utilite ici. */
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

/* WooCommerce dispose ces colonnes en flottants a 48 % via
   « .woocommerce .col2-set .col-1 » (specificite 0,3,0). Un selecteur plus
   court serait ignore : la grille s'appliquerait au conteneur pendant que les
   colonnes resteraient flottantes et etroites a l'interieur de chaque cellule.
   On repasse donc par le meme chemin, avec un niveau de plus. */
.woocommerce-account .woocommerce .u-columns .u-column1,
.woocommerce-account .woocommerce .u-columns .u-column2,
.woocommerce-account .woocommerce .col2-set .col-1,
.woocommerce-account .woocommerce .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	border: 1px solid var(--cp-line);
	border-radius: 16px;
	background: var(--cp-card);
	padding: 26px 26px 24px;
}

@media (max-width: 820px) {
	.woocommerce-account .u-columns { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account .woocommerce-form__label,
.woocommerce-account .form-row label {
	display: block;
	font-family: var(--cp-mono);
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cp-muted);
	margin-bottom: 7px;
	font-weight: 500;
}

.woocommerce-account .required { color: var(--cp-violet); border: 0; text-decoration: none; }

.woocommerce-account .woocommerce-Input,
.woocommerce-account .woocommerce-form__input,
.woocommerce-account .input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
	width: 100%;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--cp-line2);
	border-radius: 10px;
	color: var(--cp-ink);
	font-family: var(--cp-body);
	font-size: 14px;
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color .18s, box-shadow .18s;
}

.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	outline: none;
	border-color: var(--cp-brand);
	box-shadow: 0 0 0 3px rgba(155, 70, 255, .18);
}

.woocommerce-account ::placeholder { color: var(--cp-faint); opacity: 1; }

/* Cases a cocher : la case et son intitule sur la meme ligne.
   Le selecteur reprend « .form-row label » plus la classe de la case, sans
   quoi la regle generique des intitules (majuscules, interlettrage) gagnerait
   et « Se souvenir de moi » s'afficherait en capitales espacees. */
.woocommerce-account .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	text-transform: none;
	letter-spacing: .04em;
	font-family: var(--cp-body);
	font-size: 13px;
	color: var(--cp-muted);
	cursor: pointer;
}
.woocommerce-account .woocommerce-form__input-checkbox {
	width: auto;
	margin: 0;
	accent-color: var(--cp-brand);
}

.woocommerce-account .woocommerce-form-login__rememberme { margin: 4px 0 18px; }

.woocommerce-account fieldset {
	border: 1px solid var(--cp-line);
	border-radius: 12px;
	padding: 18px 20px;
	margin: 24px 0 18px;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account a.button,
.woocommerce-account input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--cp-brand), var(--cp-violet));
	color: #fff;
	font-family: var(--cp-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 26px;
	cursor: pointer;
	box-shadow: 0 8px 24px -10px rgba(155, 70, 255, .85);
	transition: transform .18s, filter .18s, box-shadow .18s;
}

.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account input[type="submit"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}

/* Actions secondaires : meme gabarit, sans le degrade. */
.woocommerce-account .woocommerce-button--previous,
.woocommerce-account .woocommerce-Button--previous,
.woocommerce-account .woocommerce-orders-table a.button.view {
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--cp-line2);
	color: var(--cp-muted);
	box-shadow: none;
	padding: 9px 16px;
	font-size: 10.5px;
}
.woocommerce-account .woocommerce-orders-table a.button.view:hover,
.woocommerce-account .woocommerce-button--previous:hover {
	color: #fff;
	border-color: rgba(155, 70, 255, .5);
	background: rgba(155, 70, 255, .14);
	filter: none;
}

.woocommerce-account .woocommerce-LostPassword,
.woocommerce-account .lost_password {
	margin: 14px 0 0;
	font-size: 13px;
}
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .lost_password a {
	color: var(--cp-faint);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--cp-brand); }

/* ==========================================================================
   Espace connecte : menu + contenu
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cp-line);
	border-radius: 14px;
	background: var(--cp-card);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--cp-line); }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 17px;
	font-family: var(--cp-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cp-muted);
	text-decoration: none;
	transition: color .18s, background .18s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--cp-ink);
	background: rgba(255, 255, 255, .04);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: #fff;
	background: linear-gradient(90deg, rgba(155, 70, 255, .22), rgba(211, 26, 209, .07));
	box-shadow: inset 3px 0 0 var(--cp-brand);
}

.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--cp-muted); }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--cp-brand); }
.woocommerce-account .woocommerce-MyAccount-content mark {
	background: none;
	color: var(--cp-ink);
	font-weight: 600;
}

/* Deux colonnes : menu a gauche, contenu a droite. */
@media (min-width: 821px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { width: 236px; float: left; }
	.woocommerce-account .woocommerce-MyAccount-content {
		width: calc(100% - 268px);
		float: right;
	}
}

/* ==========================================================================
   Tableaux (commandes, telechargements, moyens de paiement)
   ========================================================================== */

.woocommerce-account .shop_table,
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--cp-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--cp-card);
}

.woocommerce-account .shop_table th,
.woocommerce-account .woocommerce-orders-table__header {
	font-family: var(--cp-mono);
	font-size: 10px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cp-faint);
	text-align: left;
	padding: 13px 15px;
	background: rgba(255, 255, 255, .03);
	border: 0;
}

.woocommerce-account .shop_table td,
.woocommerce-account .woocommerce-orders-table__cell {
	padding: 15px;
	border: 0;
	border-top: 1px solid var(--cp-line);
	color: var(--cp-muted);
	font-size: 13.5px;
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: var(--cp-ink);
	font-family: var(--cp-mono);
	text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover { color: var(--cp-brand); }

.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-family: var(--cp-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cp-ink);
}

.woocommerce-account .shop_table .amount { color: var(--cp-ink); font-weight: 600; }

/* Sur mobile, WooCommerce replie ses tableaux en lignes empilees. */
@media (max-width: 640px) {
	.woocommerce-account .shop_table_responsive thead { display: none; }
	.woocommerce-account .shop_table_responsive tr { display: block; border-top: 1px solid var(--cp-line); }
	.woocommerce-account .shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		border-top: 0;
		padding: 9px 15px;
	}
	.woocommerce-account .shop_table_responsive td::before {
		content: attr(data-title);
		font-family: var(--cp-mono);
		font-size: 10px;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--cp-faint);
	}
}

/* ==========================================================================
   Adresses
   ========================================================================== */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 8px;
}
.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
	border: 1px solid var(--cp-line);
	border-radius: 14px;
	background: var(--cp-card);
	padding: 20px 22px;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 15px; }
.woocommerce-account .woocommerce-Address-title .edit {
	font-family: var(--cp-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cp-brand);
	text-decoration: none;
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	color: var(--cp-muted);
	font-size: 13.5px;
	line-height: 1.7;
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Moyens de paiement, telechargements, pagination
   ========================================================================== */

.woocommerce-account .woocommerce-PaymentMethod,
.woocommerce-account .woocommerce-Downloads { color: var(--cp-muted); }

.woocommerce-account .woocommerce-pagination ul {
	display: flex;
	gap: 7px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}
.woocommerce-account .woocommerce-pagination li { border: 0; }
.woocommerce-account .woocommerce-pagination a,
.woocommerce-account .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	border: 1px solid var(--cp-line);
	border-radius: 9px;
	color: var(--cp-muted);
	font-family: var(--cp-mono);
	font-size: 12px;
	text-decoration: none;
}
.woocommerce-account .woocommerce-pagination .current {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg, var(--cp-brand), var(--cp-violet));
}

/* Message « aucune commande » et avis divers. */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
	border: 1px solid var(--cp-line);
	border-left: 3px solid var(--cp-brand);
	border-radius: 12px;
	background: rgba(155, 70, 255, .07);
	color: var(--cp-muted);
	padding: 15px 18px;
	font-size: 13.5px;
	list-style: none;
}
.woocommerce-account .woocommerce-error { border-left-color: #ff8d9c; background: rgba(255, 141, 156, .08); }

/* Le pseudo-element « ! » par defaut de WooCommerce ne sert a rien ici. */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before { display: none; }

.woocommerce-account .clear { clear: both; }

/* ==========================================================================
   Invitation vers la page d'inscription
   Remplace le formulaire d'inscription reduit de WooCommerce sur /mon-compte/.
   L'inscription complete se fait sur /register/ : un seul parcours, pas deux.
   ========================================================================== */

.woocommerce-account .leet-register-invite {
	border: 1px solid var(--cp-line);
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(155, 70, 255, .08), rgba(211, 26, 209, .03));
	padding: 26px 26px 24px;
}

.woocommerce-account .leet-register-invite__accroche {
	font-family: var(--cp-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 17px;
	color: var(--cp-ink);
	margin: 0 0 10px;
}

.woocommerce-account .leet-register-invite__texte {
	color: var(--cp-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.woocommerce-account .leet-register-invite__points {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 9px;
}
.woocommerce-account .leet-register-invite__points li {
	position: relative;
	padding-left: 20px;
	color: var(--cp-muted);
	font-size: 13.5px;
}
.woocommerce-account .leet-register-invite__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cp-brand), var(--cp-violet));
}

.woocommerce-account .leet-register-invite__cta { width: 100%; }