/*
 * ACE — composants : boutons, champs, cases, badges, notices, prix, panneaux,
 * cartes, pagination, médias, dropzone, états système.
 *
 * Source unique (brief §5.4) : les classes générées par WooCommerce sont
 * rattachées par liste de sélecteurs, jamais dupliquées. États en attributs.
 */

@layer ace.components {
	/* --- Boutons ----------------------------------------------------------- */

	.ace-btn,
	.woocommerce .button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.wc-proceed-to-checkout .checkout-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--ace-2);
		min-height: 44px;
		padding: 0 18px;
		font: 700 14px/1 var(--ace-font);
		letter-spacing: 0.01em;
		border: 1px solid transparent;
		border-radius: var(--ace-radius);
		background: var(--ace-primary);
		color: #fff;
		cursor: pointer;
		text-decoration: none;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	}

	.ace-btn:hover,
	.woocommerce .button:hover,
	.woocommerce button.button:hover,
	.wc-proceed-to-checkout .checkout-button:hover {
		background: var(--ace-primary-dark);
		color: #fff;
	}

	.ace-btn:focus-visible {
		outline: none;
		box-shadow: var(--ace-ring-btn);
	}

	.ace-btn[disabled],
	.ace-btn[aria-disabled="true"],
	.woocommerce .button:disabled,
	.woocommerce .button.disabled {
		background: var(--ace-primary-border);
		cursor: not-allowed;
	}

	.ace-btn[data-loading]::before {
		content: "";
		width: 13px;
		height: 13px;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, 0.45);
		border-top-color: #fff;
		animation: ace-spin 0.7s linear infinite;
	}

	.ace-btn--secondary {
		background: var(--ace-surface);
		color: var(--ace-text);
		border-color: var(--ace-border-field);
		font-weight: 600;
	}

	.ace-btn--secondary:hover {
		background: var(--ace-surface);
		border-color: var(--ace-primary);
		color: var(--ace-primary-text);
	}

	.ace-btn--navy {
		background: var(--ace-navy);
	}

	.ace-btn--navy:hover {
		background: var(--ace-navy-dark);
	}

	.ace-btn--lg {
		min-height: 48px;
		font-size: 15px;
	}

	.ace-btn--block {
		width: 100%;
	}

	.ace-icon {
		flex: none;
	}

	/* --- Champs ------------------------------------------------------------ */

	.ace-field,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea,
	.woocommerce-ordering select {
		width: 100%;
		min-height: 42px;
		padding: 0 12px;
		font: 400 14px/1.4 var(--ace-font);
		color: var(--ace-text);
		background: var(--ace-surface);
		border: 1px solid var(--ace-border-field);
		border-radius: var(--ace-radius);
	}

	.woocommerce form .form-row textarea {
		min-height: 96px;
		padding: 10px 12px;
	}

	.ace-field:focus,
	.woocommerce form .form-row input.input-text:focus,
	.woocommerce form .form-row select:focus,
	.woocommerce form .form-row textarea:focus {
		outline: none;
		border-color: var(--ace-primary);
		box-shadow: var(--ace-ring-field);
	}

	.ace-field:disabled,
	.woocommerce form .form-row input.input-text:disabled {
		border-color: var(--ace-rule);
		background: var(--ace-bg);
		color: var(--ace-border-strong);
	}

	.woocommerce form .form-row.woocommerce-invalid input.input-text,
	.woocommerce form .form-row.woocommerce-invalid select {
		border-color: var(--ace-danger-field);
		box-shadow: 0 0 0 3px rgba(209, 67, 67, 0.14);
	}

	.woocommerce form .form-row label,
	.ace-fields label {
		display: block;
		margin-bottom: 5px;
		font-size: var(--ace-fs-xs);
		font-weight: 600;
		color: var(--ace-text-strong);
	}

	.woocommerce form .form-row .required {
		color: var(--ace-danger);
		text-decoration: none;
	}

	.ace-field-hint {
		display: block;
		margin-top: var(--ace-1);
		font-size: 11.5px;
		font-weight: 400;
		color: var(--ace-text-subtle);
	}

	.ace-fields__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-4);
	}

	.ace-fields__grid .form-row,
	.woocommerce form .form-row {
		margin: 0;
		padding: 0;
	}

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

		.ace-fields__grid .form-row-wide {
			grid-column: 1 / -1;
		}
	}

	/* --- Cases à cocher ----------------------------------------------------- */

	.ace-check {
		display: flex;
		align-items: center;
		gap: 9px;
		font-size: var(--ace-fs-sm);
		font-weight: 400;
		color: var(--ace-text-strong);
		cursor: pointer;
		margin: 0;
	}

	.ace-check[data-align="start"] {
		align-items: flex-start;
		line-height: 1.5;
		font-size: 12.5px;
	}

	.ace-check input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	.ace-check__box {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 16px;
		height: 16px;
		border: 1.5px solid var(--ace-border-strong);
		border-radius: var(--ace-radius-sm);
		background: var(--ace-surface);
		color: transparent;
		transition: border-color 0.15s, background-color 0.15s;
	}

	.ace-check[data-align="start"] .ace-check__box {
		margin-top: 2px;
	}

	.ace-check input:checked + .ace-check__box {
		background: var(--ace-primary);
		border-color: var(--ace-primary);
		color: #fff;
	}

	.ace-check input:focus-visible + .ace-check__box {
		box-shadow: var(--ace-ring-field);
	}

	.ace-check__label {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
	}

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

	/* --- Badges ------------------------------------------------------------- */

	.ace-badge {
		display: inline-flex;
		align-items: center;
		padding: 3px 8px;
		border-radius: var(--ace-radius-sm);
		font-size: var(--ace-fs-2xs);
		font-weight: 600;
		letter-spacing: 0.02em;
		white-space: nowrap;
		background: var(--ace-success-bg);
		color: var(--ace-success);
	}

	.ace-badge[data-statut="reserve"],
	.ace-badge[data-tone="warning"] {
		background: var(--ace-warning-bg);
		color: var(--ace-warning);
	}

	.ace-badge[data-statut="arrivage"],
	.ace-badge[data-tone="info"] {
		background: var(--ace-info-bg);
		color: var(--ace-info);
	}

	.ace-badge[data-statut="vendu"],
	.ace-badge[data-tone="danger"] {
		background: var(--ace-danger-bg);
		color: var(--ace-danger);
	}

	.ace-badge[data-tone="neutral"] {
		background: var(--ace-rule);
		color: var(--ace-text-muted);
	}

	/* --- Notices ------------------------------------------------------------ */

	.ace-notice,
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0 0 var(--ace-4);
		padding: var(--ace-3) 14px;
		border: 1px solid var(--ace-success-border);
		border-radius: var(--ace-radius);
		background: var(--ace-success-bg);
		color: var(--ace-success-text);
		font-size: var(--ace-fs-sm);
		line-height: 1.5;
		list-style: none;
	}

	.ace-notice[data-tone="warning"],
	.woocommerce-info {
		background: var(--ace-warning-bg);
		border-color: var(--ace-warning-border);
		color: var(--ace-warning-text);
	}

	.ace-notice[data-tone="danger"],
	.woocommerce-error {
		background: var(--ace-danger-bg);
		border-color: var(--ace-danger-border);
		color: var(--ace-danger-text);
	}

	.ace-notice .ace-icon {
		margin-top: 2px;
	}

	ul.woocommerce-error,
	.woocommerce-notices-wrapper ul {
		padding-left: 14px;
	}

	ul.woocommerce-error li {
		list-style: none;
	}

	/* --- Prix --------------------------------------------------------------- */

	.ace-price {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.ace-price__amount {
		font-size: 18px;
		font-weight: 800;
		color: var(--ace-text);
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.ace-price__amount .woocommerce-Price-amount {
		font: inherit;
		color: inherit;
	}

	.ace-price__note {
		margin-top: 3px;
		font-size: 10.5px;
		font-weight: 400;
		color: var(--ace-text-subtle);
		letter-spacing: 0.02em;
	}

	.ace-price[data-locked] {
		padding: 4px 10px;
		border: 1px dashed var(--ace-border-strong);
		border-radius: var(--ace-radius-sm);
		font-size: var(--ace-fs-xs);
		font-weight: 600;
		color: var(--ace-text-muted);
	}

	/* --- Panneaux (cartes de section) --------------------------------------- */

	.ace-panel {
		background: var(--ace-surface);
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius-lg);
		padding: var(--ace-5);
	}

	.ace-panel + .ace-panel {
		margin-top: var(--ace-5);
	}

	.ace-panel[data-flush="1"] {
		padding: 0;
		overflow: hidden;
	}

	.ace-panel__title {
		margin-bottom: 14px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
	}

	.ace-panel[data-flush="1"] .ace-panel__title {
		margin: 0;
		padding: var(--ace-4) 18px;
		border-bottom: 1px solid var(--ace-rule);
	}

	.ace-panel__body {
		padding: var(--ace-5);
	}

	.ace-eyebrow {
		margin-bottom: var(--ace-4);
		font-size: var(--ace-fs-xs);
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--ace-primary-text);
	}

	/* --- Médias 4:3 ---------------------------------------------------------- */

	.ace-media {
		position: relative;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--ace-media-bg);
		border-radius: var(--ace-radius-sm);
	}

	.ace-media__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* --- Fil d'Ariane -------------------------------------------------------- */

	.ace-breadcrumb,
	.ace-breadcrumb .woocommerce-breadcrumb {
		margin-bottom: var(--ace-2);
		font-size: var(--ace-fs-xs);
		color: var(--ace-text-subtle);
	}

	.ace-breadcrumb a {
		color: var(--ace-text-subtle);
		text-decoration: none;
	}

	.ace-breadcrumb a:hover {
		color: var(--ace-primary-text);
	}

	.ace-breadcrumb__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 5px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ace-breadcrumb__item + .ace-breadcrumb__item::before {
		content: "/";
		margin-right: 5px;
		color: var(--ace-text-muted);
	}

	.ace-breadcrumb__item[aria-current="page"] {
		color: var(--ace-text);
	}

	/* --- Pagination ----------------------------------------------------------- */

	.ace-pagination {
		display: flex;
		justify-content: center;
		margin-top: var(--ace-8);
	}

	.ace-pagination ul.page-numbers {
		display: flex;
		align-items: center;
		gap: 6px;
		list-style: none;
		margin: 0;
		padding: 0;
		flex-wrap: wrap;
	}

	.ace-pagination .page-numbers li {
		margin: 0;
	}

	.ace-pagination a.page-numbers,
	.ace-pagination span.page-numbers,
	.ace-pagination__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		min-height: 36px;
		padding: 0 var(--ace-2);
		border: 1px solid var(--ace-border-field);
		border-radius: var(--ace-radius);
		background: var(--ace-surface);
		color: var(--ace-text);
		font-size: var(--ace-fs-sm);
		font-variant-numeric: tabular-nums;
		text-decoration: none;
	}

	.ace-pagination span.page-numbers.current {
		background: var(--ace-navy);
		border-color: var(--ace-navy);
		color: #fff;
		font-weight: 700;
	}

	.ace-pagination span.page-numbers.dots {
		border: 0;
		background: none;
		color: var(--ace-text-subtle);
	}

	/* --- État vide ------------------------------------------------------------- */

	.ace-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--ace-16) var(--ace-8);
	}

	.ace-empty__glyph {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		margin-bottom: var(--ace-4);
		border-radius: 50%;
		background: var(--ace-bg);
		color: var(--ace-text-subtle);
	}

	.ace-empty__title {
		margin-bottom: 6px;
		font-size: 17px;
		font-weight: 700;
	}

	.ace-empty__text {
		margin-bottom: var(--ace-5);
		max-width: 360px;
		font-size: 13.5px;
		color: var(--ace-text-muted);
		line-height: 1.6;
	}

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

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

	/* --- Dropzone --------------------------------------------------------------- */

	.ace-dropzone {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--ace-1);
		padding: 22px;
		border: 1.5px dashed var(--ace-border-strong);
		border-radius: var(--ace-radius-lg);
		background: #fafbfc;
		text-align: center;
		cursor: pointer;
		transition: border-color 0.15s, background-color 0.15s;
	}

	.ace-dropzone:hover,
	.ace-dropzone[data-dragover] {
		border-color: var(--ace-primary);
		background: var(--ace-primary-soft);
	}

	.ace-dropzone__input {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}

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

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

	.ace-dropzone__label b {
		color: var(--ace-primary-text);
		font-weight: 600;
	}

	.ace-dropzone__hint {
		font-size: 11.5px;
		color: var(--ace-text-subtle);
	}

	.ace-dropzone__files:not(:empty) {
		margin-top: var(--ace-2);
		font-size: var(--ace-fs-xs);
		font-weight: 600;
		color: var(--ace-text);
		overflow-wrap: anywhere;
	}

	/* --- 404 -------------------------------------------------------------------- */

	.ace-404 {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--ace-12) var(--ace-8);
	}

	.ace-404__code {
		font-size: 64px;
		font-weight: 800;
		letter-spacing: -0.03em;
		line-height: 1;
		color: var(--ace-navy);
	}

	.ace-404__title {
		margin: 14px 0 6px;
		font-size: var(--ace-fs-h3);
		font-weight: 700;
	}

	.ace-404__text {
		margin-bottom: var(--ace-5);
		max-width: 360px;
		font-size: 13.5px;
		color: var(--ace-text-muted);
	}

	/* --- Copier ------------------------------------------------------------------ */

	.ace-copy[data-copied] {
		border-color: var(--ace-success);
		color: var(--ace-success);
	}

	/* --- Carte véhicule ------------------------------------------------------ */

	.ace-card {
		margin: 0;
		list-style: none;
		background: var(--ace-surface);
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius);
		overflow: hidden;
		transition: border-color 0.15s, box-shadow 0.15s;
	}

	.ace-card:hover {
		border-color: var(--ace-border-strong);
		box-shadow: var(--ace-shadow-card);
	}

	.ace-card:focus-within {
		border-color: var(--ace-primary);
		box-shadow: 0 0 0 2px rgba(246, 148, 30, 0.35);
	}

	.ace-card__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		color: inherit;
		text-decoration: none;
	}

	.ace-card__link:focus-visible {
		box-shadow: none;
	}

	.ace-card__media {
		border-radius: 0;
	}

	.ace-card__badge {
		position: absolute;
		top: var(--ace-2);
		left: var(--ace-2);
	}

	.ace-card__body {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 14px 14px 16px;
		flex: 1;
		min-width: 0;
	}

	.ace-card__head {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.ace-card__title {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	.ace-card__version {
		font-size: 12.5px;
		color: var(--ace-text-muted);
		line-height: 1.3;
		overflow-wrap: anywhere;
	}

	.ace-card__specs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 12px;
	}

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

	.ace-card__spec:nth-child(even) {
		text-align: right;
	}

	.ace-card__footer {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--ace-2);
		margin-top: auto;
		padding-top: 10px;
		border-top: 1px solid var(--ace-rule);
	}

	.ace-card__origin {
		display: inline-flex;
		align-items: center;
		flex: none;
		padding: 3px 7px;
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius-sm);
		font-size: var(--ace-fs-2xs);
		font-weight: 500;
		color: var(--ace-text-muted);
	}

	/* --- Grille véhicules (catalogue + accueil) ----------------------------- */

	.ace-vehgrid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
		gap: var(--ace-gutter);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ace-vehgrid::before,
	.ace-vehgrid::after {
		content: none;
	}

	@keyframes ace-spin {
		to {
			transform: rotate(360deg);
		}
	}
}