/*
 * Revoca — styles publics.
 *
 * Tout est scopé sous `.revoca`. Aucun sélecteur global (button, input, form)
 * n'est utilisé : le reste du site n'est jamais affecté.
 *
 * Mode « Hériter du thème » : seule la mise en page est appliquée.
 * Mode « Personnaliser » (`.revoca--custom`) : les variables CSS injectées par
 * l'écran Apparence prennent le relais pour les couleurs et la typographie.
 */

.revoca {
	--revoca-max-width: 720px;
	--revoca-spacing: 16px;
	--revoca-card-radius: 12px;
	--revoca-card-padding: 24px;
	--revoca-card-border-width: 1px;
	--revoca-field-radius: 8px;
	--revoca-field-padding-y: 12px;
	--revoca-field-padding-x: 14px;
	--revoca-btn-radius: 8px;
	--revoca-btn-padding-y: 14px;
	--revoca-btn-padding-x: 24px;
	--revoca-btn-border-width: 1px;
	--revoca-btn-width: auto;
	--revoca-line: rgba(128, 128, 128, 0.28);
	--revoca-line-soft: rgba(128, 128, 128, 0.16);

	box-sizing: border-box;
	width: 100%;
}

.revoca *,
.revoca *::before,
.revoca *::after {
	box-sizing: inherit;
}

.revoca-shell {
	max-width: var(--revoca-max-width);
	margin: 0 auto;
}

/* ---------------------------------------------------------------- En-tête */

.revoca-header {
	margin: 0 0 20px;
}

.revoca-title {
	margin: 0 0 8px;
	line-height: 1.25;
}

.revoca-lead {
	margin: 0;
	opacity: 0.8;
	line-height: 1.6;
}

/* ----------------------------------------------------------------- Étapes */

.revoca-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.revoca-steps__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875em;
	opacity: 0.55;
}

.revoca-steps__item.is-current {
	opacity: 1;
	font-weight: 600;
}

.revoca-steps__item.is-done {
	opacity: 0.8;
}

.revoca-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	border: 1px solid var(--revoca-line);
	border-radius: 999px;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.revoca-steps__item.is-current .revoca-steps__num {
	border-color: currentColor;
}

/* ------------------------------------------------------------ Messages */

.revoca-alert,
.revoca-notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--revoca-line);
	border-left-width: 4px;
	border-radius: var(--revoca-card-radius);
	line-height: 1.55;
}

.revoca-alert:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.revoca-alert__title {
	margin: 0 0 6px;
	font-weight: 600;
}

.revoca-alert__list {
	margin: 0;
	padding-left: 1.2em;
}

.revoca-alert__list li + li {
	margin-top: 4px;
}

/* -------------------------------------------------------------- Cartes */

.revoca-card {
	margin: 0 0 var(--revoca-spacing);
	padding: var(--revoca-card-padding);
	border: var(--revoca-card-border-width) solid var(--revoca-line-soft);
	border-radius: var(--revoca-card-radius);
}

.revoca-card__title {
	margin: 0 0 6px;
	font-size: 1.05em;
	line-height: 1.35;
}

.revoca-card__hint {
	margin: 0 0 16px;
	font-size: 0.9em;
	opacity: 0.75;
	line-height: 1.55;
}

.revoca-order-badge {
	margin: 0 0 var(--revoca-spacing);
	font-size: 0.95em;
	opacity: 0.8;
}

.revoca-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 var(--revoca-spacing);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.55;
}

.revoca-separator::before,
.revoca-separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--revoca-line-soft);
}

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

.revoca-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.revoca-legend {
	padding: 0;
	margin: 0 0 12px;
	font-weight: 600;
}

.revoca-field {
	margin: 0 0 var(--revoca-spacing);
}

.revoca-field:last-child {
	margin-bottom: 0;
}

.revoca-grid {
	display: grid;
	gap: var(--revoca-spacing);
	grid-template-columns: 1fr;
}

.revoca-label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.95em;
	font-weight: 500;
}

.revoca-label--small {
	font-size: 0.85em;
	opacity: 0.8;
}

.revoca-hint {
	margin: 6px 0 0;
	font-size: 0.85em;
	opacity: 0.7;
	line-height: 1.5;
}

.revoca-input {
	width: 100%;
	max-width: 100%;
	padding: var(--revoca-field-padding-y) var(--revoca-field-padding-x);
	border: 1px solid var(--revoca-line);
	border-radius: var(--revoca-field-radius);
	font: inherit;
	line-height: 1.4;
}

.revoca-input--number {
	width: 6.5em;
	text-align: center;
}

.revoca-textarea {
	min-height: 90px;
	resize: vertical;
}

.revoca-input:focus-visible,
.revoca-check:focus-visible,
.revoca-radio:focus-visible,
.revoca-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --------------------------------------------------------- Choix / listes */

.revoca-choice,
.revoca-orders__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--revoca-line-soft);
	border-radius: var(--revoca-field-radius);
}

.revoca-choice + .revoca-choice,
.revoca-orders__item + .revoca-orders__item {
	margin-top: 10px;
}

.revoca-choice__label,
.revoca-orders__label,
.revoca-item__label {
	display: block;
	flex: 1;
	cursor: pointer;
}

.revoca-choice__title,
.revoca-orders__number {
	display: block;
	font-weight: 600;
}

.revoca-choice__hint,
.revoca-orders__meta {
	display: block;
	margin-top: 3px;
	font-size: 0.88em;
	opacity: 0.7;
}

.revoca-orders {
	list-style: none;
	margin: 0;
	padding: 0;
}

.revoca-check,
.revoca-radio {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: currentColor;
}

/* ------------------------------------------------------------- Articles */

.revoca-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.revoca-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--revoca-line-soft);
	border-radius: var(--revoca-field-radius);
}

.revoca-item + .revoca-item {
	margin-top: 10px;
}

.revoca-item__select {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.revoca-item__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.revoca-item__image {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--revoca-line-soft);
}

.revoca-item__image--empty {
	display: block;
}

.revoca-item__text {
	display: block;
	min-width: 0;
}

.revoca-item__name {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.revoca-item__meta,
.revoca-item__ordered {
	display: block;
	margin-top: 3px;
	font-size: 0.88em;
	opacity: 0.72;
}

.revoca-item__quantity {
	padding-left: 32px;
}

.revoca-items-card.is-disabled {
	opacity: 0.5;
}

/* ------------------------------------------------------ Récapitulatif */

.revoca-summary {
	margin: 0;
}

.revoca-summary__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--revoca-line-soft);
}

.revoca-summary__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.revoca-summary dt {
	flex: none;
	min-width: 140px;
	margin: 0;
	font-size: 0.9em;
	opacity: 0.7;
}

.revoca-summary dd {
	margin: 0;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.revoca-recap {
	list-style: none;
	margin: 0;
	padding: 0;
}

.revoca-recap__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--revoca-line-soft);
}

.revoca-recap__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.revoca-recap__name {
	display: block;
	font-weight: 600;
}

.revoca-recap__meta {
	display: block;
	margin-top: 2px;
	font-size: 0.88em;
	opacity: 0.72;
}

.revoca-recap__qty {
	display: block;
	margin-top: 4px;
	font-size: 0.92em;
}

.revoca-recap__subtitle {
	margin: 18px 0 6px;
	font-size: 0.95em;
}

.revoca-recap__comment p {
	margin: 0;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.revoca-declaration {
	margin: 0;
	line-height: 1.65;
}

.revoca-reference {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
}

.revoca-outro {
	margin: 4px 0 0;
	font-size: 0.92em;
	opacity: 0.75;
	line-height: 1.6;
}

/* -------------------------------------------------------------- Actions */

.revoca-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.revoca-final {
	margin-top: 8px;
}

.revoca-final__hint {
	margin: 0 0 14px;
	font-size: 0.92em;
	opacity: 0.75;
	line-height: 1.6;
}

.revoca-final__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.revoca-final__confirm {
	order: -1;
	flex: 1 1 260px;
}

.revoca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--revoca-btn-padding-y) var(--revoca-btn-padding-x);
	border-radius: var(--revoca-btn-radius);
	font: inherit;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.revoca-btn[disabled],
.revoca-btn[aria-disabled="true"] {
	cursor: default;
	opacity: 0.6;
}

.revoca-btn--confirm {
	width: 100%;
	font-weight: 700;
}

.revoca-btn--secondary {
	background: transparent;
	border: 1px solid var(--revoca-line);
	color: inherit;
}

.revoca-footer-link {
	padding: 12px 16px;
	text-align: center;
	font-size: 0.85em;
}

/* ------------------------------------------------- Mode personnalisation */

.revoca--custom {
	color: var(--revoca-text-color);
	background: var(--revoca-bg);
}

.revoca--custom .revoca-label,
.revoca--custom .revoca-legend {
	color: var(--revoca-label-color);
}

.revoca--custom .revoca-card,
.revoca--custom .revoca-choice,
.revoca--custom .revoca-orders__item,
.revoca--custom .revoca-item {
	background: var(--revoca-card-bg);
	border-color: var(--revoca-card-border);
	border-width: var(--revoca-card-border-width);
}

.revoca--custom .revoca-input {
	color: var(--revoca-text-color);
	background: var(--revoca-field-bg);
	border-color: var(--revoca-field-border);
}

.revoca--custom .revoca-input:focus,
.revoca--custom .revoca-input:focus-visible {
	border-color: var(--revoca-field-focus);
	outline-color: var(--revoca-field-focus);
}

.revoca--custom .revoca-check,
.revoca--custom .revoca-radio {
	accent-color: var(--revoca-field-focus);
}

.revoca--custom .revoca-btn {
	background: var(--revoca-btn-bg);
	color: var(--revoca-btn-color);
	border: var(--revoca-btn-border-width) solid var(--revoca-btn-border-color);
	font-size: var(--revoca-btn-font-size);
	font-weight: var(--revoca-btn-font-weight);
	width: var(--revoca-btn-width);
}

.revoca--custom .revoca-btn:hover,
.revoca--custom .revoca-btn:focus-visible {
	background: var(--revoca-btn-bg-hover);
	color: var(--revoca-btn-color-hover);
}

.revoca--custom .revoca-btn--secondary {
	background: transparent;
	color: var(--revoca-text-color);
	border-color: var(--revoca-field-border);
	width: auto;
}

.revoca--custom .revoca-btn--secondary:hover,
.revoca--custom .revoca-btn--secondary:focus-visible {
	background: transparent;
	color: var(--revoca-text-color);
	border-color: var(--revoca-btn-bg);
}

.revoca--custom .revoca-btn--confirm {
	width: 100%;
}

/* ------------------------------------------------------------- Réglages */

@media (min-width: 600px) {
	.revoca-grid {
		grid-template-columns: 1fr 1fr;
	}

	.revoca-item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.revoca-item__select {
		flex: 1;
		min-width: 0;
	}

	.revoca-item__quantity {
		flex: none;
		padding-left: 0;
		text-align: right;
	}

	.revoca-btn--confirm {
		width: auto;
		min-width: 260px;
	}

	.revoca--custom .revoca-btn--confirm {
		width: var(--revoca-btn-width);
		min-width: 260px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.revoca-btn,
	.revoca-input {
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}
}