/* =============================================================
   « MON COMPTE » — WooCommerce + Caribou LMS, Round 3
   Chargé uniquement sur is_account_page(). Les alias de content.css
   pointent vers theme.json : aucune valeur de marque n'est dupliquée ici.
   Registre product, mobile-first, sans surtitre ni carte englobante.
   ============================================================= */

.woocommerce-account .entry-content {
	--lms-radius: var(--wp--custom--radius--card, 10px);
	--lms-field-radius: var(--wp--custom--radius--field, 8px);
}

/* Le gabarit de page plafonne son contenu à la largeur de lecture (47,5 rem = 760 px).
   Bon pour un article, absurde pour un tableau de bord à deux colonnes : la colonne de
   contenu tombait à 446 px. « Mon compte » reprend donc la largeur des pages publiques.

   Et il faut aussi défaire le rembourrage global que le gabarit pose sur <main> (48 px
   à 1280) : combiné au plafond de 1200, il donnait une colonne de 1184 px démarrant à
   48 px, là où l'accueil, le catalogue et la fiche donnent tous 1120 px démarrant à 80.
   On rend la traversée transparente et c'est le bloc « Mon compte » qui porte la
   gouttière, exactement comme .shell le fait sur les pages publiques. */
.woocommerce-account main.has-global-padding {
	padding-inline: 0;
}

.woocommerce-account .entry-content.wp-block-post-content {
	max-width: none;
}

.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce *,
.woocommerce-account .woocommerce *::before,
.woocommerce-account .woocommerce *::after {
	box-sizing: border-box;
}

/* WooCommerce replafonne à 1000 px via `.woocommerce-account main .woocommerce`
   (woocommerce-blocktheme.css) : le plafond public se pose à ce même niveau de
   spécificité pour le battre sans ajouter une couche contradictoire. */
.woocommerce-account main .woocommerce {
	width: 100%;
	max-width: 1200px;
}

/* ---------- 1. STRUCTURE : navigation + contenu aplati ---------- */
.woocommerce-account .woocommerce {
	display: flex;
	flex-direction: column;
	gap: clamp(1.2rem, 3vw, 1.8rem);
	margin: 0 auto;
	padding-inline: clamp(1.2rem, 4vw, 2.5rem);
	padding-block: clamp(1.4rem, 4vw, 2.4rem) clamp(3rem, 6vw, 5rem);
}

/* WooCommerce pose un nettoyage de flottants (`content:" "; display:table`) en ::before et ::after
   de `.woocommerce`. Le conteneur étant passé en flex, ces deux boîtes invisibles deviennent des
   éléments de la rangée et consomment chacune une gouttière : 29 px avalés à gauche et autant à
   droite, si bien que le menu du compte ne tombait plus sur le même bord que le logo de l'en-tête.
   Plus aucun flottant à nettoyer ici — on les retire. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	display: none;
}

@media (min-width: 860px) {
	.woocommerce-account .woocommerce {
		flex-direction: row;
		align-items: flex-start;
	}
}

.woocommerce-MyAccount-navigation {
	position: relative;
	flex-shrink: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	overflow: hidden;
}

@media (max-width: 859px) {
	.woocommerce-MyAccount-navigation.has-scroll-next::after {
		content: "→";
		position: absolute;
		top: 0;
		right: 0;
		display: grid;
		place-items: center end;
		width: 3.5rem;
		height: 100%;
		padding-right: 0.6rem;
		background: linear-gradient(to right, transparent, var(--surface) 58%);
		color: var(--terre);
		font-family: var(--grotesk);
		font-weight: 800;
		pointer-events: none;
	}
}

@media (min-width: 860px) {
	.woocommerce-MyAccount-navigation {
		position: sticky;
		top: 5rem;
		width: 232px;
	}
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* La remise à zéro ci-dessus perdait : WooCommerce pose `margin: 0 0 2em` sur cette liste avec
   trois classes (`.woocommerce-account .woocommerce-MyAccount-navigation ul`, blocktheme.css).
   Au téléphone, où la liste devient une rangée d'onglets, ces 2em laissaient 35 px de vide sous
   les onglets à l'intérieur de la carte — et la flèche « → » de défilement, calée sur la hauteur
   de la carte, se peignait dans ce vide au lieu d'être à hauteur des onglets. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
}

@media (min-width: 860px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		overflow: visible;
	}
}

/* WooCommerce pose `padding: 1em 0` sur chaque entrée via
   `.woocommerce-account .woocommerce-MyAccount-navigation li` : 39 px de vide mort
   par ligne, alors que le lien fait déjà ses 44 px. Même spécificité pour l'annuler. */
.woocommerce-account .woocommerce-MyAccount-navigation li {
	padding: 0;
}

.woocommerce-MyAccount-navigation-link {
	flex-shrink: 0;
}

.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.85rem;
	border-radius: calc(var(--lms-radius) - 3px);
	color: var(--ink-soft);
	font-family: var(--grotesk);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--bg);
	color: var(--terre);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--terre);
	color: var(--on-dark);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--bourgogne);
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: var(--bourgogne);
	color: var(--on-dark);
}

@media (min-width: 860px) {
	.woocommerce-MyAccount-navigation-link--orders,
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0.35rem;
		padding-top: 0.35rem;
		border-top: 1px solid var(--line);
	}
}

/* Le contenu n'est volontairement pas une carte : chaque section porte sa surface. */
.woocommerce-MyAccount-content {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-MyAccount-content > p {
	color: var(--ink-soft);
	font-size: var(--step-0);
	line-height: 1.6;
}

.woocommerce-MyAccount-content > p a {
	color: var(--bourgogne);
}

/* ---------- 2. TITRES, SECTIONS ET BOUTONS ---------- */
.woocommerce-MyAccount-content .panel__head {
	margin-bottom: clamp(1.2rem, 3vw, 1.6rem);
}

.woocommerce-MyAccount-content .panel__title {
	margin: 0;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.woocommerce-MyAccount-content .panel__sub {
	margin: 0.5rem 0 0;
	color: var(--ink-soft);
	font-size: var(--step-0);
	line-height: 1.6;
}

.woocommerce-MyAccount-content .sec {
	margin-top: clamp(1.6rem, 4vw, 2.2rem);
}

.woocommerce-MyAccount-content .sec__title {
	margin: 0 0 0.9rem;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.woocommerce-MyAccount-content .sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.9rem;
}

.woocommerce-MyAccount-content .sec__head .sec__title {
	margin: 0;
}

.woocommerce-MyAccount-content .sec__link {
	color: var(--bourgogne);
	font-family: var(--grotesk);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-MyAccount-content .sec__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-MyAccount-content .btn,
.woocommerce-MyAccount-content .lms-acct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0.65rem 1.3rem;
	border: 0;
	border-radius: var(--lms-field-radius);
	font-family: var(--grotesk);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.woocommerce-MyAccount-content .btn--p,
.woocommerce-MyAccount-content .lms-acct-btn {
	background: var(--ink);
	color: var(--bg);
}

.woocommerce-MyAccount-content .btn--p:hover,
.woocommerce-MyAccount-content .lms-acct-btn:hover {
	background: var(--bourgogne);
	color: var(--on-dark);
}

.woocommerce-MyAccount-content .btn--s {
	border: 1.5px solid var(--line-strong);
	background: transparent;
	color: var(--terre);
}

.woocommerce-MyAccount-content .btn--s:hover {
	border-color: var(--terre);
	background: var(--surface);
}

.woocommerce-MyAccount-content .btn--full,
.woocommerce-MyAccount-content .lms-acct-btn--full {
	width: 100%;
}

.woocommerce-MyAccount-content .btn--sm {
	min-height: 40px;
	padding: 0.45rem 0.95rem;
	font-size: 0.88rem;
}

.woocommerce-MyAccount-content .btn.is-disabled {
	pointer-events: none;
}

.woocommerce-MyAccount-content .lms-acct-vide,
.woocommerce-MyAccount-content .lms-acct-vide-inline {
	color: var(--ink-soft);
}

.woocommerce-MyAccount-content .lms-acct-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: clamp(2rem, 6vw, 3rem) 1rem;
	text-align: center;
}

/* ---------- 3. BARRES ET TUILES ---------- */
/* Remplissage peint directement en fond du .bar (couche dégradé dimensionnée à
   --pct via background-size), et NON via un ::after : la résolution du %
   sur la largeur d'un pseudo-élément en flux est peu fiable sous Chromium
   (le remplissage ne se peignait pas). background-size résout le % contre la
   boîte de l'élément → fiable, et ne touche pas aux gabarits. */
.lms-acct .bar,
.lms-acct-bar {
	--pct: 0;
	display: block;
	height: 8px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	overflow: hidden;
	background:
		linear-gradient(90deg, var(--terre), var(--bourgogne)) left center / calc(var(--pct) * 1%) 100% no-repeat,
		var(--line);
}

.lms-acct .bar--rang,
.lms-acct-bar--rang {
	background:
		linear-gradient(90deg, var(--sauge), var(--spruce-700)) left center / calc(var(--pct) * 1%) 100% no-repeat,
		var(--line);
}

.lms-acct .bar-row {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
}

.lms-acct .bar-row .bar {
	flex: 1;
}

.lms-acct .bar-row__pct {
	min-width: 3.2em;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 0.88rem;
	font-weight: 700;
	text-align: right;
}

.lms-acct .tile {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.15rem 1.3rem;
	border-radius: var(--lms-radius);
	text-decoration: none;
}

.lms-acct .tile--dark {
	background: var(--spruce-900);
	color: var(--on-dark);
}

.lms-acct .tile--light {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
}

.lms-acct .tile__value {
	font-family: var(--grotesk);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}

.lms-acct .tile--light .tile__value {
	color: var(--terre);
}

.lms-acct .tile__label {
	font-size: 0.85rem;
	opacity: 0.85;
}

.lms-acct .tile--light .tile__label {
	color: var(--ink-soft);
	opacity: 1;
}

.lms-acct .tile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-family: var(--grotesk);
	font-size: 0.85rem;
	font-weight: 600;
}

.lms-acct .tile--dark .tile__foot {
	color: var(--on-dark-soft);
}

.lms-acct .tile--light .tile__foot {
	color: var(--bourgogne);
}

.lms-acct .tile__go {
	transition: transform 0.16s var(--ease);
}

.lms-acct .tile:hover .tile__go {
	transform: translateX(3px);
}

/* ---------- 4. D1 — ACCUEIL ---------- */
.lms-acct .resume {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
	overflow: hidden;
}

@media (min-width: 620px) {
	.lms-acct .resume {
		grid-template-columns: 200px 1fr;
	}
}

.lms-acct .resume--empty {
	display: block;
}

.lms-acct .resume__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(155deg, var(--spruce-700), var(--spruce-900));
	overflow: hidden;
}

@media (min-width: 620px) {
	.lms-acct .resume__thumb {
		aspect-ratio: auto;
	}
}

.lms-acct .resume__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lms-acct .resume__thumb-tag {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	padding: 0.25rem 0.6rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: color-mix(in oklch, var(--spruce-900) 72%, transparent);
	color: var(--on-dark);
	font-family: var(--grotesk);
	font-size: 0.72rem;
	font-weight: 700;
}

.lms-acct .resume__body {
	display: flex;
	flex-direction: column;
	padding: clamp(1.1rem, 3vw, 1.5rem);
}

.lms-acct .resume__title {
	margin: 0 0 0.15rem;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.lms-acct .resume__next {
	margin: 0.1rem 0 0.9rem;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.lms-acct .resume__next strong {
	color: var(--ink);
	font-weight: 600;
}

.lms-acct .resume__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: auto;
}

.lms-acct .resume__count {
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.lms-acct .glance {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: clamp(1.2rem, 3vw, 1.6rem);
}

@media (min-width: 560px) {
	.lms-acct .glance {
		grid-template-columns: 1fr 1fr;
	}
}

.lms-acct .mini-courses {
	display: flex;
	flex-direction: column;
}

.lms-acct .mini-course {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
}

.lms-acct .mini-course:last-child {
	border-bottom: 0;
}

.lms-acct .mini-course__thumb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--lms-field-radius);
	background: linear-gradient(155deg, var(--spruce-700), var(--spruce-900));
	overflow: hidden;
}

.lms-acct .mini-course__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lms-acct .mini-course__grow {
	flex: 1;
	min-width: 0;
}

.lms-acct .mini-course__title {
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
}

.lms-acct .mini-course__title:hover {
	color: var(--bourgogne);
}

.lms-acct .mini-course__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.15rem;
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.lms-acct .mini-course__meta .bar {
	width: 90px;
	height: 5px;
}

.lms-acct .mini-course__done {
	color: var(--spruce-700);
	font-family: var(--grotesk);
	font-size: 0.85rem;
	font-weight: 700;
}

@media (max-width: 520px) {
	.lms-acct .mini-course {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.lms-acct .mini-course > .btn {
		margin-left: 61px;
	}
}

/* ---------- 5. D2 — EMPREINTES ---------- */
.lms-acct .clarify {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin-bottom: 1.4rem;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: var(--step-0);
}

.lms-acct .clarify svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--clay);
}

.lms-acct .clarify strong {
	color: var(--terre);
}

.lms-acct .stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Variante à un seul chiffre : le porte-monnaie en vedette, le total à vie
   expliqué à côté en toutes lettres plutôt que posé comme second grand nombre. */
.lms-acct .stats--solo {
	align-items: center;
	gap: 1.2rem;
}

.lms-acct .stats__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--step-0);
	line-height: 1.55;
}

.lms-acct .stats__note strong { color: var(--ink); }

.lms-acct .stats__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.35rem;
	color: var(--bourgogne);
	font-family: var(--grotesk);
	font-weight: 700;
	text-decoration: none;
}

.lms-acct .stats__lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Échéance du solde. Même bloc que .clarify — c'est la même famille de message, pas un
   nouveau composant : un renseignement tant que la date est loin. */
.lms-acct .echeance {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin-top: 1.1rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 0.92rem;
	line-height: 1.55;
}

.lms-acct .echeance svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--clay);
}

.lms-acct .echeance strong { color: var(--ink); }

/* Sous 30 jours — au moment où part le premier courriel —, le bloc passe au bourgogne,
   la couleur des signaux d'action. */
.lms-acct .echeance--proche {
	border-color: color-mix(in oklch, var(--bourgogne) 35%, var(--line));
	background: color-mix(in oklch, var(--bourgogne) 6%, var(--surface));
	color: var(--ink);
}

.lms-acct .echeance--proche svg,
.lms-acct .echeance--proche strong { color: var(--bourgogne); }

@media (min-width: 480px) {
	.lms-acct .stats--solo { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }

	.lms-acct .stats {
		grid-template-columns: 1fr 1fr;
	}
}

.lms-acct .bareme-group {
	margin-top: 1.4rem;
}

.lms-acct .bareme-group__title {
	margin: 0 0 0.4rem;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.lms-acct .bareme {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lms-acct .bareme__row {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--line);
}

.lms-acct .bareme__row:last-child {
	border-bottom: 0;
}

.lms-acct .bareme__act {
	color: var(--ink);
	font-size: 0.95rem;
}

.lms-acct .bareme__act small {
	color: var(--ink-soft);
}

.lms-acct .bareme__dots {
	flex: 1;
	border-bottom: 1px dotted var(--line-strong);
	transform: translateY(-3px);
}

.lms-acct .bareme__pts {
	color: var(--spruce-700);
	font-family: var(--grotesk);
	font-weight: 700;
	white-space: nowrap;
}

.lms-acct .journal__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 0.7fr) minmax(5rem, 0.4fr) minmax(6.5rem, 0.5fr);
	align-items: center;
	gap: 0.8rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.92rem;
}

.lms-acct .journal__row--head {
	padding-top: 0;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 0.82rem;
	font-weight: 700;
}

.lms-acct .journal__row:last-child {
	border-bottom: 0;
}

.lms-acct .journal__label {
	color: var(--ink);
}

.lms-acct .journal__date {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.lms-acct .journal__delta {
	font-family: var(--grotesk);
	font-weight: 700;
	text-align: right;
}

.lms-acct .journal__balance {
	color: var(--ink);
	font-family: var(--grotesk);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

.lms-acct .journal__delta.is-gain {
	color: var(--spruce-700);
}

.lms-acct .journal__delta.is-spend {
	color: var(--bourgogne);
}

.lms-acct .referral {
	padding: 1.1rem 1.2rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--lms-radius);
	background: var(--surface);
}

.lms-acct .referral p {
	margin: 0 0 0.8rem;
	color: var(--ink-soft);
	font-size: var(--step-0);
}

.lms-acct .referral__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.lms-acct .referral__input {
	min-width: 220px;
	min-height: 44px;
	flex: 1;
	padding: 0 0.9rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--lms-field-radius);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 0.9rem;
}

@media (max-width: 520px) {
	.lms-acct .bareme__dots {
		display: none;
	}

	.lms-acct .bareme__act {
		flex: 1;
	}

	.lms-acct .journal__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.2rem 0.75rem;
	}

	.lms-acct .journal__row--head {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
	}

	.lms-acct .journal__date {
		grid-column: 1;
		grid-row: 2;
	}

	.lms-acct .journal__delta {
		grid-column: 2;
		grid-row: 1;
	}

	.lms-acct .journal__balance {
		grid-column: 2;
		grid-row: 2;
		color: var(--ink-soft);
		font-size: 0.82rem;
		font-weight: 500;
	}

	.lms-acct .journal__balance::before {
		content: attr(data-label) " : ";
	}

	.lms-acct .referral__input,
	.lms-acct .referral__copy {
		width: 100%;
		min-width: 0;
	}
}

/* ---------- 6. D3 — RANG ---------- */
.lms-acct .rank-now {
	padding: clamp(1.2rem, 3vw, 1.6rem);
	border-radius: var(--lms-radius);
	background: var(--spruce-900);
	color: var(--on-dark);
}

.lms-acct .rank-now__label {
	color: var(--on-dark-soft);
	font-family: var(--grotesk);
	font-size: 0.88rem;
	font-weight: 600;
}

.lms-acct .rank-now__name {
	margin: 0.1rem 0 0.9rem;
	color: var(--on-dark);
	font-family: var(--grotesk);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.lms-acct .rank-now .bar {
	background:
		linear-gradient(90deg, var(--sauge), var(--spruce-700)) left center / calc(var(--pct) * 1%) 100% no-repeat,
		color-mix(in oklch, var(--on-dark) 18%, transparent);
}

.lms-acct .rank-now__note {
	margin: 0.7rem 0 0;
	color: var(--on-dark-soft);
	font-size: var(--step-0);
}

.lms-acct .rank-now__note strong {
	color: var(--on-dark);
}

.lms-acct .ladder {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lms-acct .ladder__step {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--line);
}

.lms-acct .ladder__step:last-child {
	border-bottom: 0;
}

.lms-acct .ladder__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 2px solid var(--line-strong);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--surface);
	color: var(--ink-soft);
	font-family: var(--grotesk);
	font-size: 0.95rem;
	font-weight: 800;
}

.lms-acct .ladder__step.is-reached .ladder__mark {
	border-color: var(--sauge);
	background: var(--sauge);
	color: var(--spruce-900);
}

.lms-acct .ladder__step.is-current .ladder__mark {
	border-color: var(--terre);
	background: var(--terre);
	box-shadow: 0 0 0 4px color-mix(in oklch, var(--terre) 15%, transparent);
	color: var(--on-dark);
}

.lms-acct .ladder__grow {
	min-width: 0;
	flex: 1;
}

.lms-acct .ladder__name {
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.02rem;
	font-weight: 700;
}

.lms-acct .ladder__step.is-upcoming .ladder__name {
	color: var(--ink-soft);
}

.lms-acct .ladder__thresh {
	margin-top: 0.1rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.lms-acct .ladder__state {
	font-family: var(--grotesk);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.lms-acct .ladder__state.is-reached {
	color: var(--spruce-700);
}

.lms-acct .ladder__state.is-current {
	color: var(--terre);
}

.lms-acct .ladder__state.is-upcoming {
	color: var(--clay);
}

.lms-acct .sec__title--rewards {
	margin-bottom: 0.4rem;
}

.lms-acct .sec__intro {
	margin: 0 0 1rem;
	color: var(--ink-soft);
	font-size: var(--step-0);
}

.lms-acct .rewards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 560px) {
	.lms-acct .rewards {
		grid-template-columns: 1fr 1fr;
	}
}

.lms-acct .reward {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
}

.lms-acct .reward.is-locked {
	opacity: 0.75;
}

.lms-acct .reward__state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--grotesk);
	font-size: 0.78rem;
	font-weight: 700;
}

.lms-acct .reward__state.is-unlocked {
	color: var(--spruce-700);
}

.lms-acct .reward__state.is-locked {
	color: var(--ink-soft);
}

.lms-acct .reward__title {
	margin: 0;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.lms-acct .reward.is-locked .reward__title {
	color: var(--ink-soft);
}

.lms-acct .reward__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.lms-acct .reward__foot {
	margin-top: auto;
}

@media (max-width: 480px) {
	.lms-acct .ladder__step {
		align-items: flex-start;
		gap: 0.75rem;
	}

	.lms-acct .ladder__state {
		max-width: 7rem;
		white-space: normal;
		text-align: right;
	}
}

/* ---------- 7. ONGLETS LMS EXISTANTS ---------- */
.lms-acct-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 560px) {
	.lms-acct-grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}
}

.lms-acct-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.lms-acct-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-1px);
}

.lms-acct-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(160deg, var(--spruce-700), var(--spruce-900));
}

.lms-acct-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lms-acct-card__thumb-ph {
	display: block;
	width: 100%;
	height: 100%;
}

.lms-acct-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.1rem 1.15rem;
}

.lms-acct-card__titre {
	margin: 0;
	font-family: var(--grotesk);
	font-size: 1.05rem;
	line-height: 1.3;
}

.lms-acct-card__titre a {
	color: var(--terre);
	text-decoration: none;
}

.lms-acct-card__titre a:hover {
	color: var(--bourgogne);
}

.lms-acct-card__meta {
	margin: 0 0 0.7rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.lms-acct-card .lms-acct-bar {
	margin: 0.7rem 0 0.5rem;
	height: 6px;
}

.lms-acct-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.2rem 0.6rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--grotesk);
	font-size: 0.76rem;
	font-weight: 700;
}

.lms-acct-badge--question {
	background: color-mix(in oklch, var(--clay) 20%, transparent);
	color: var(--terre);
}

.lms-acct-badge--reponse {
	background: color-mix(in oklch, var(--bourgogne) 15%, transparent);
	color: var(--bourgogne);
}

.lms-acct-qa-list {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lms-acct-qa-item {
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
}

.lms-acct-qa-item__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.lms-acct-qa-item__date {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

.lms-acct-qa-item__contenu {
	margin: 0.5rem 0 0.6rem;
	color: var(--ink);
	font-size: var(--step-0);
	line-height: 1.55;
}

.lms-acct-qa-item__lien {
	color: var(--bourgogne);
	font-family: var(--grotesk);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.lms-acct-qa-item__lien:hover {
	text-decoration: underline;
}

/* ---------- 8. WOOCOMMERCE NATIF : commandes, avis et formulaires ---------- */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-table {
	display: block;
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.woocommerce-MyAccount-content table.shop_table thead,
.woocommerce-MyAccount-content table.shop_table tbody,
.woocommerce-MyAccount-content table.shop_table tr {
	display: revert;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	white-space: nowrap;
}

.woocommerce-MyAccount-content table.shop_table th {
	color: var(--terre);
	font-family: var(--grotesk);
	font-weight: 700;
}

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px, pas 40 : c'est l'engagement pris dans PRODUCT.md, et ces boutons sont d'abord touchés
	   au pouce. */
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: var(--lms-field-radius);
	background: var(--terre);
	color: var(--on-dark) !important;
	font-family: var(--grotesk);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s var(--ease);
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button.button:hover {
	background: var(--bourgogne);
}

.woocommerce-MyAccount-content .woocommerce-button.cancel,
.woocommerce-MyAccount-content .button.cancel {
	border: 1.5px solid var(--bourgogne);
	background: transparent;
	color: var(--bourgogne) !important;
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-Message,
.woocommerce-account .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 0 0.8rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line) !important;
	border-radius: var(--lms-radius);
	background: var(--surface) !important;
	color: var(--ink-soft) !important;
	font-size: 0.9rem;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-Message::before {
	position: static;
	color: var(--clay);
}

.woocommerce-account .wc-block-components-notice-banner svg {
	flex-shrink: 0;
	fill: var(--clay);
	/* WooCommerce peint un disque bleu info en fond du <svg> ; on le retire pour
	   ne garder que l'icône contour clay (cohérent avec le bandeau .clarify). */
	background: transparent !important;
}

.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-Message a {
	color: var(--bourgogne);
}

.woocommerce-EditAccountForm .woocommerce-form-row,
.woocommerce-address-fields .form-row,
.woocommerce-form-login .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.woocommerce-EditAccountForm label,
.woocommerce-address-fields label,
.woocommerce-form-login label {
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 0.85rem;
	font-weight: 600;
}

.woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-address-fields .input-text,
.woocommerce-address-fields select,
.woocommerce-form-login .woocommerce-Input {
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--lms-field-radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 0.95rem;
}

.woocommerce-EditAccountForm fieldset {
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
}

.woocommerce-EditAccountForm legend {
	padding: 0 0.4rem;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.05rem;
	font-weight: 700;
}

.woocommerce-MyAccount-paymentMethods .method,
.woocommerce-MyAccount-paymentMethods .actions {
	text-align: left;
}

/* ---------- 8 bis. PAGE DE CONNEXION (visiteur) ----------
   Deux colonnes de même poids : se connecter à gauche, et à droite la réponse à
   « je n'ai pas de compte ». Sans elle la page ne menait nulle part.
   ⚠️ `.woocommerce-account .woocommerce` passe en rangée à 860px : il prenait le
   titre et le formulaire pour deux colonnes, d'où le titre esseulé à gauche et
   la carte au milieu. On lui donne désormais un seul enfant, qui porte lui-même
   sa grille. */
.cnx {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	display: grid;
	gap: clamp(1.8rem, 5vw, 3rem);
}

.cnx-col {
	min-width: 0;
}

.cnx-mot {
	margin: 0 0 1.6rem;
	color: var(--ink-soft);
	line-height: 1.6;
}

.cnx-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (min-width: 860px) {
	/* Pas d'`align-items: start` : les deux cases doivent faire la même hauteur,
	   sinon le filet de séparation s'arrête sous le bouton et donne l'impression
	   d'un trait coupé. */
	.cnx {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.cnx-porte {
		border-inline-start: 1px solid var(--line-strong);
		padding-inline-start: clamp(1.8rem, 5vw, 3rem);
	}
}

/* ---------- 9. D8 — ADRESSES FUSIONNÉES ET ENDPOINT D'ÉDITION ---------- */
.account-addresses__intro {
	margin: -0.35rem 0 1rem;
	color: var(--ink-soft);
	font-size: var(--step-0);
}

.woocommerce-account .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
}

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

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses > .col-1,
.woocommerce-account .woocommerce-Addresses > .col-2 {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--lms-radius);
	background: var(--surface);
}

/* Le gabarit WooCommerce d'édition d'adresse répète son titre en h2 sous le nôtre. Le greffon le
   vide (`woocommerce_my_account_edit_address_title`) ; `display:none` acheve le travail en le
   retirant aussi de l'arbre d'accessibilité, pour ne pas laisser un titre muet aux lecteurs
   d'écran. */
.woocommerce-account .woocommerce-MyAccount-content form > h2:empty {
	display: none;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.55rem;
}

/* Même nettoyage de flottants que sur `.woocommerce`, mêmes dégâts : le titre de la carte se
   retrouvait rentré de 12 px et le lien « Modifier » décollé d'autant du bord droit, alors que
   l'adresse en dessous, elle, était bien à fleur. WooCommerce vise ces deux pseudo-éléments avec
   trois classes (`.woocommerce-account .addresses .title`) : il faut en aligner autant pour
   l'emporter, d'où le `.woocommerce` intercalé. */
.woocommerce-account .woocommerce .woocommerce-Address-title::before,
.woocommerce-account .woocommerce .woocommerce-Address-title::after {
	display: none;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	float: none;
	margin: 0;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.05rem !important;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.woocommerce-account .woocommerce-Address-title .edit {
	float: none;
	flex-shrink: 0;
	/* Le lien ne faisait que 23 px de haut : sous le doigt, c'est une cible manquée une fois sur
	   deux. On l'étire à 44 px et on reprend le débord en marge négative, pour que l'entête de la
	   carte garde exactement la même allure. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.45rem;
	margin-inline-end: -0.45rem;
	color: var(--bourgogne);
	font-family: var(--grotesk);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

/* WooCommerce glisse l'aide du champ « Nom affiché » dans un `em` nu : elle héritait de la taille
   de la prose (19,5 px) et pesait donc plus lourd que le libellé qu'elle explique (13,6 px). */
.woocommerce-account #account_display_name_description {
	display: block;
	margin-top: 0.35rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
	line-height: 1.45;
}

/* L'œil qui dévoile le mot de passe ne faisait que 22 px de côté. L'icône garde sa taille ;
   c'est la zone touchable qui passe à 44, calée sur le bord droit du champ. */
.woocommerce-account .woocommerce-MyAccount-content .password-input .show-password-input {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	right: 0;
	background-position: center;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account address {
	margin: 0;
	color: var(--ink);
	font-style: normal;
	line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-address-fields > h2 {
	margin: 0 0 1rem;
	color: var(--terre);
	font-family: var(--grotesk);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* ---------- 10. FOCUS ET MOUVEMENT RÉDUIT ---------- */
.woocommerce-account .woocommerce :focus-visible {
	outline: 2px solid var(--bourgogne);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lms-acct-card,
	.lms-acct .tile__go,
	.woocommerce-MyAccount-navigation-link a,
	.woocommerce-MyAccount-content .btn,
	.woocommerce-MyAccount-content .button {
		transition-duration: 0ms !important;
	}
}