/**
 * Habillage de « Mon compte » WooCommerce (tableau de bord, commandes, factures) :
 * on ne touche pas au header/footer du site sur ces pages (contrairement aux pages
 * cours/module/quiz, qui ont leur propre coquille), on reskinne uniquement les
 * éléments WooCommerce natifs pour qu'ils suivent la même identité visuelle que le
 * reste de la plateforme (mêmes variables de theming, mêmes cartes/ombres/typo).
 * Ciblé uniquement sur `.woocommerce-account` (classe posée par WooCommerce sur le
 * <body> des pages Mon compte) pour ne rien casser ailleurs sur le site. Demande de
 * Florian (31/08/2026) : rendre les commandes/factures « modernes et agréables ».
 *
 * @package DV_LMS
 */

/* ---------------------------------------------------------------- Base */

body.woocommerce-account {
	background: var( --dv-fond, #f4f1ea );
}

body.woocommerce-account .woocommerce {
	font-family: var( --dv-police, 'Work Sans', system-ui );
	color: var( --dv-texte, #1c222b );
}

body.woocommerce-account .entry-title {
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
	color: var( --dv-texte, #1c222b ) !important;
	font-weight: 700 !important;
	font-size: 30px !important;
	line-height: 1.2 !important;
	background: none !important;
}

/* ---------------------------------------------------------------- Mise en page nav + contenu */

body.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
	max-width: 1080px;
	margin: 8px auto 64px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 260px;
	background: var( --dv-surface, #fff );
	border: 1px solid var( --dv-bordure, #e7e2d6 );
	border-radius: 16px;
	box-shadow: var( --dv-ombre-2, 0 10px 24px -10px rgba( 15, 20, 30, 0.16 ) );
	padding: 14px;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 11px 16px;
	border-radius: 10px;
	color: var( --dv-texte-att, #6b7280 );
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
	background: var( --dv-fond, #f4f1ea );
	color: var( --dv-texte, #1c222b );
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: linear-gradient( 120deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) );
	color: #fff;
	box-shadow: var( --dv-ombre-secondaire, 0 8px 18px -10px rgba( 216, 154, 70, 0.5 ) );
}

body.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 480px;
	min-width: 0;
	background: var( --dv-surface, #fff );
	border: 1px solid var( --dv-bordure, #e7e2d6 );
	border-radius: 16px;
	box-shadow: var( --dv-ombre-2, 0 10px 24px -10px rgba( 15, 20, 30, 0.16 ) );
	padding: 32px;
}

@media ( max-width: 860px ) {
	body.woocommerce-account .woocommerce {
		flex-direction: column;
		margin: 8px 20px 48px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		flex-basis: auto;
		width: 100%;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		padding: 22px;
	}
}

/* ---------------------------------------------------------------- Notices (ex. « confirmez votre e-mail ») */

body.woocommerce-account .woocommerce-notices-wrapper > * {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var( --dv-couleur-secondaire-tres-claire, #fbeedc ) !important;
	border: 1px solid var( --dv-bordure, #e7e2d6 ) !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin: 0 0 24px !important;
	color: var( --dv-texte, #1c222b ) !important;
	list-style: none !important;
}

body.woocommerce-account .woocommerce-notices-wrapper > *::before {
	display: none !important;
}

body.woocommerce-account .woocommerce-notices-wrapper .button,
body.woocommerce-account .woocommerce-notices-wrapper a.button {
	background: linear-gradient( 155deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) ) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 10px 20px !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	box-shadow: var( --dv-ombre-secondaire, 0 8px 18px -10px rgba( 216, 154, 70, 0.5 ) ) !important;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Tableau des commandes */

body.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
	margin: -10px 0 0;
}

body.woocommerce-account .woocommerce-orders-table thead {
	display: none;
}

@media ( min-width: 769px ) {
	body.woocommerce-account .woocommerce-orders-table thead {
		display: table-header-group;
	}

	body.woocommerce-account .woocommerce-orders-table-header th {
		text-align: left;
		padding: 0 16px 10px;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var( --dv-texte-att, #6b7280 );
		font-weight: 700;
		border: none !important;
	}
}

body.woocommerce-account .woocommerce-orders-table__row {
	background: var( --dv-fond, #f4f1ea );
	border-radius: 12px;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
}

body.woocommerce-account .woocommerce-orders-table__cell,
body.woocommerce-account .woocommerce-orders-table__row th.woocommerce-orders-table__cell {
	border: none !important;
	padding: 14px 16px !important;
	font-size: 14px;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-orders-table__cell:first-child,
body.woocommerce-account .woocommerce-orders-table__row th.woocommerce-orders-table__cell {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

body.woocommerce-account .woocommerce-orders-table__cell:last-child {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-weight: 700 !important;
	color: var( --dv-texte, #1c222b ) !important;
	text-decoration: none !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
	color: var( --dv-couleur-secondaire-foncee, #b87b2e ) !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-date time {
	color: var( --dv-texte-att, #6b7280 );
}

/* États : pastilles colorées à la place du simple texte */

body.woocommerce-account .woocommerce-orders-table__cell-order-status p {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 700;
	background: var( --dv-bordure, #e7e2d6 );
	color: var( --dv-texte-att, #6b7280 );
}

body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status p {
	background: var( --dv-succes-fond, #e7f1eb );
	color: var( --dv-succes, #3d7a5c );
}

body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status p,
body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status p,
body.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status p {
	background: var( --dv-couleur-secondaire-tres-claire, #fbeedc );
	color: var( --dv-couleur-secondaire-foncee, #b87b2e );
}

body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status p,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status p,
body.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status p {
	background: #fdecea;
	color: #b3261e;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-total {
	font-weight: 700;
	color: var( --dv-texte, #1c222b );
}

/* Boutons d'action : « Voir » en fantôme, « Facture » (et autres actions fortes) en plein */

body.woocommerce-account .woocommerce-orders-table__cell-order-actions p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px !important;
	border-radius: 100px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: none !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view {
	background: transparent !important;
	border: 1px solid var( --dv-bordure, #e7e2d6 ) !important;
	color: var( --dv-texte, #1c222b ) !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view:hover {
	background: var( --dv-surface, #fff ) !important;
	border-color: var( --dv-couleur-secondaire, #d79a46 ) !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button:not( .view ) {
	background: linear-gradient( 155deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) ) !important;
	color: #fff !important;
	border: none !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay {
	background: linear-gradient( 155deg, var( --dv-couleur-primaire-claire, #26385a ), var( --dv-couleur-primaire, #16233a ) ) !important;
}

/* ---------------------------------------------------------------- Vue mobile (< 769px, bascule WooCommerce native) */

@media ( max-width: 768px ) {
	body.woocommerce-account .woocommerce-orders-table,
	body.woocommerce-account .woocommerce-orders-table tbody,
	body.woocommerce-account .woocommerce-orders-table__row,
	body.woocommerce-account .woocommerce-orders-table__cell {
		display: block;
		width: 100%;
	}

	body.woocommerce-account .woocommerce-orders-table__row {
		padding: 14px 16px;
		margin-bottom: 12px;
	}

	body.woocommerce-account .woocommerce-orders-table__cell {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0 !important;
		border-bottom: 1px dashed var( --dv-bordure, #e7e2d6 ) !important;
	}

	body.woocommerce-account .woocommerce-orders-table__cell:last-child {
		border-bottom: none !important;
	}

	body.woocommerce-account .woocommerce-orders-table__cell::before {
		content: attr( data-title );
		font-size: 11.5px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		font-weight: 700;
		color: var( --dv-texte-att, #6b7280 );
		flex-shrink: 0;
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions p {
		justify-content: flex-end;
		width: 100%;
	}
}