/*
 * ACE — espace compte : nav 220 px, KPI, tableau de commandes (repli cartes),
 * documents, connexion, inscription pro, écran d'attente. Mobile-first.
 */

@layer ace.pages {
	.ace-account__title {
		margin-bottom: var(--ace-5);
		font-size: var(--ace-fs-h2);
		font-weight: 800;
	}

	.ace-account__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-gutter);
		align-items: start;
	}

	.ace-account__content {
		min-width: 0;
	}

	/* --- Navigation ---------------------------------------------------------- */

	.ace-accnav {
		background: var(--ace-surface);
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius-lg);
		overflow: hidden;
	}

	.ace-accnav__head {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: var(--ace-4);
		border-bottom: 1px solid var(--ace-rule);
	}

	.ace-accnav__head .ace-avatar {
		width: 34px;
		height: 34px;
	}

	.ace-accnav__id {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.ace-accnav__company {
		font-size: var(--ace-fs-sm);
		font-weight: 700;
		overflow-wrap: anywhere;
	}

	.ace-accnav__status {
		font-size: var(--ace-fs-2xs);
		color: var(--ace-text-subtle);
	}

	.ace-accnav__status[data-status="validated"] {
		color: var(--ace-success);
	}

	.ace-accnav__status[data-status="pending"] {
		color: var(--ace-warning);
	}

	.ace-accnav__status[data-status="rejected"] {
		color: var(--ace-danger);
	}

	.ace-accnav__menu {
		display: flex;
		flex-direction: column;
		gap: 2px;
		list-style: none;
		margin: 0;
		padding: var(--ace-2);
	}

	.ace-accnav__menu li {
		margin: 0;
	}

	.ace-accnav__link {
		display: block;
		padding: 9px 12px;
		border-radius: var(--ace-radius);
		background: transparent;
		font-size: var(--ace-fs-sm);
		font-weight: 500;
		color: var(--ace-text-strong);
		text-decoration: none;
	}

	.ace-accnav__link:hover {
		background: var(--ace-bg);
		color: var(--ace-text);
	}

	.ace-accnav__link[aria-current="page"] {
		background: var(--ace-primary-soft);
		color: var(--ace-primary-text);
		font-weight: 700;
	}

	/* --- KPI ------------------------------------------------------------------ */

	.ace-kpis {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ace-4);
		margin-bottom: var(--ace-5);
	}

	.ace-kpi {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: var(--ace-4);
		background: var(--ace-surface);
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius-lg);
	}

	.ace-kpi__label {
		font-size: var(--ace-fs-xs);
		color: var(--ace-text-muted);
	}

	.ace-kpi__value {
		font-size: 26px;
		font-weight: 800;
		line-height: 1.1;
	}

	.ace-kpi[data-tone="danger"] .ace-kpi__value {
		color: var(--ace-danger);
	}

	/* --- Tableau de commandes -------------------------------------------------- */

	.ace-orders {
		width: 100%;
	}

	.ace-orders th {
		padding: 11px 18px;
		background: #fafbfc;
		border-bottom: 1px solid var(--ace-rule);
		font-size: var(--ace-fs-2xs);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--ace-text-subtle);
		text-align: left;
	}

	.ace-orders th[data-align="end"],
	.ace-orders td[data-align="end"] {
		text-align: right;
	}

	.ace-orders td {
		padding: 13px 18px;
		border-bottom: 1px solid var(--ace-rule-soft);
		font-size: var(--ace-fs-sm);
	}

	.ace-orders tbody tr:hover {
		background: #fafbfc;
	}

	.ace-orders__ref {
		font-size: 12.5px;
		font-weight: 600;
		color: var(--ace-navy);
		text-decoration: none;
	}

	.ace-orders__date {
		font-size: 12.5px;
		color: var(--ace-text-muted);
	}

	.ace-orders__total {
		font-weight: 600;
	}

	/* Repli mobile en cartes empilées, par CSS uniquement (brief §7.6). */
	@media (max-width: 767px) {
		.ace-orders thead {
			display: none;
		}

		.ace-orders tr {
			display: block;
			padding: var(--ace-3) var(--ace-4);
			border-bottom: 1px solid var(--ace-rule);
		}

		.ace-orders td,
		.ace-orders td[data-align="end"] {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--ace-3);
			padding: 5px 0;
			border: 0;
			text-align: right;
		}

		.ace-orders td::before {
			content: attr(data-label);
			font-size: var(--ace-fs-2xs);
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--ace-text-subtle);
			text-align: left;
		}
	}

	/* --- Documents -------------------------------------------------------------- */

	.ace-doclist {
		display: flex;
		flex-direction: column;
		gap: 10px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ace-doclist__link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px;
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius);
		color: inherit;
		text-decoration: none;
		transition: border-color 0.15s;
	}

	.ace-doclist__link:hover {
		border-color: var(--ace-border-strong);
	}

	.ace-doclist__badge {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		font-size: 9px;
	}

	.ace-doclist__name {
		flex: 1;
		min-width: 0;
		font-size: 12.5px;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	.ace-doclist__icon {
		color: var(--ace-text-subtle);
	}

	/* --- Connexion ---------------------------------------------------------------- */

	.ace-login {
		padding: 28px;
	}

	.ace-login__logo {
		height: 34px;
		width: auto;
		margin-bottom: var(--ace-5);
	}

	.ace-login__title {
		margin-bottom: var(--ace-4);
		font-size: 17px;
		font-weight: 700;
	}

	.ace-login .form-row {
		margin-bottom: 14px;
	}

	.ace-login__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ace-3);
		margin-bottom: 14px;
	}

	.ace-login__lost {
		font-size: 12.5px;
	}

	.ace-login__signup {
		margin-top: 14px;
		text-align: center;
		font-size: 12.5px;
		color: var(--ace-text-muted);
	}

	/* --- Inscription pro ------------------------------------------------------------ */

	.ace-signup__title {
		margin-bottom: 6px;
		font-size: var(--ace-fs-h1);
		font-weight: 800;
		line-height: 1.15;
	}

	.ace-signup__lead {
		margin-bottom: 28px;
		font-size: 14px;
		color: var(--ace-text-muted);
		line-height: 1.6;
	}

	.ace-signup__actions {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--ace-3);
		margin-top: var(--ace-5);
	}

	@media (min-width: 560px) {
		.ace-signup__actions {
			flex-direction: row;
			justify-content: flex-end;
		}
	}

	/* --- Écran d'attente -------------------------------------------------------------- */

	.ace-pending {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		max-width: 560px;
		margin-inline: auto;
		padding: var(--ace-16) var(--ace-gutter);
	}

	.ace-pending__glyph {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		margin-bottom: var(--ace-5);
		border-radius: 50%;
		background: var(--ace-warning-bg);
		color: var(--ace-warning);
	}

	.ace-pending[data-status="rejected"] .ace-pending__glyph {
		background: var(--ace-danger-bg);
		color: var(--ace-danger);
	}

	.ace-pending__title {
		margin-bottom: 10px;
		font-size: var(--ace-fs-h2);
		font-weight: 800;
	}

	.ace-pending__text {
		margin-bottom: var(--ace-2);
		font-size: 14px;
		color: var(--ace-text-muted);
		line-height: 1.65;
	}

	.ace-pending__note {
		margin-bottom: 28px;
		font-size: var(--ace-fs-sm);
		color: var(--ace-text-subtle);
	}

	.ace-pending__actions {
		display: flex;
		flex-direction: column;
		gap: var(--ace-3);
		width: 100%;
		max-width: 360px;
	}

	@media (min-width: 560px) {
		.ace-pending__actions {
			flex-direction: row;
			justify-content: center;
			width: auto;
		}
	}

	/* --- Détail de commande + adresses natives ---------------------------------------- */

	.ace-view-order__status {
		margin-bottom: var(--ace-4);
	}

	.woocommerce-order-details,
	.woocommerce-customer-details {
		margin-top: var(--ace-5);
	}

	.woocommerce-table--order-details,
	.woocommerce-table {
		width: 100%;
		font-size: var(--ace-fs-sm);
	}

	.woocommerce-table th,
	.woocommerce-table td {
		padding: var(--ace-2) 0;
		border: 0;
		border-bottom: 1px solid var(--ace-rule-soft);
		text-align: left;
	}

	.woocommerce-table tfoot th,
	.woocommerce-table tfoot td {
		font-weight: 700;
	}

	.woocommerce-column__title {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: var(--ace-2);
	}

	address {
		font-style: normal;
		font-size: var(--ace-fs-sm);
		line-height: 1.6;
		color: var(--ace-text-muted);
	}

	/* --- Palier desktop ------------------------------------------------------------------ */

	@media (min-width: 768px) {
		.ace-kpis {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	@media (min-width: 1025px) {
		.ace-account__body {
			grid-template-columns: 220px minmax(0, 1fr);
		}
	}
}