.formulaire-commande {
	--formulaire-accent: var(--commande-accent);
	--formulaire-accent-hover: var(--commande-accent-survol);
	--formulaire-cadre: var(--commande-cadre);
	--formulaire-fond: var(--commande-fond);
	--formulaire-surface: var(--commande-surface);
	--formulaire-cellule: var(--commande-cellule);
	--formulaire-texte: var(--commande-texte);
	--formulaire-bordure: var(--commande-bordure);
	width: 100%;
	min-height: 75vh;
	padding: max(14vh, 5rem) clamp(.75rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
	background:
		linear-gradient(to bottom, transparent 72%, var(--formulaire-fond) 100%),
		radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--formulaire-accent) 17%, transparent), transparent 30rem),
		radial-gradient(circle at 5% 96%, color-mix(in srgb, var(--commande-secondaire) 9%, transparent), transparent 28rem),
		linear-gradient(145deg, var(--formulaire-fond), var(--formulaire-surface) 55%, var(--formulaire-fond));
	color: var(--formulaire-texte);
	text-align: left;
}

#main > section.formulaire-commande {
	padding-top: max(14vh, 5rem);
}

.formulaire-commande > div,
.formulaire-commande > div > div,
.formulaire-commande .container {
	width: min(100%, 1180px);
	max-width: 1180px;
	margin-inline: auto;
}

.formulaire-commande .formulaire-commande-grille,
.formulaire-commande .formulaire-commande-suite {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(.75rem, 2vw, 1.5rem);
	margin: 0 0 clamp(.75rem, 2vw, 1.5rem) !important;
}

.formulaire-commande .column {
	width: 100%;
	padding: 0;
}

.formulaire-commande .formulaire-carte,
.formulaire-commande .box {
	padding: clamp(1rem, 2.3vw, 1.6rem);
	border: 1px solid color-mix(in srgb, var(--formulaire-cadre) 48%, var(--formulaire-bordure)) !important;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--formulaire-surface) 86%, transparent) !important;
	box-shadow:
		0 18px 50px color-mix(in srgb, var(--commande-ombre) 30%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--formulaire-texte) 8%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.formulaire-commande .formulaire-carte {
	animation: apparition-formulaire .45s ease both;
}

.formulaire-commande .formulaire-carte:nth-child(2) {
	animation-delay: .08s;
}

.formulaire-commande .formulaire-recapitulatif {
	width: 100%;
	height: 100%;
	border-color: color-mix(in srgb, var(--formulaire-cadre) 68%, var(--formulaire-bordure)) !important;
}

/* Le paiement conserve sa couleur de conversion, indépendamment de la salle. */
.formulaire-reservation .formulaire-total {
	--formulaire-cadre: var(--commande-cadre);
}

.formulaire-commande .formulaire-recapitulatif-colonne {
	display: flex;
}

.formulaire-recapitulatif-contenu,
.recapitulatif-details {
	display: grid;
	gap: .55rem;
}

.recapitulatif-salle {
	padding: .15rem 0 .6rem;
	color: var(--recapitulatif-salle-couleur, var(--formulaire-accent)) !important;
	font-family: var(--font-serif);
	font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
	font-weight: 700;
	text-align: center;
}

.recapitulatif-salle-rappel {
	color: var(--recapitulatif-salle-couleur, var(--formulaire-accent));
}

.recapitulatif-meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
}

.recapitulatif-meta .p,
.recapitulatif-details .p {
	margin: 0;
	padding: .6rem .7rem;
	border: 1px solid color-mix(in srgb, var(--formulaire-cadre) 28%, var(--formulaire-bordure));
	border-radius: var(--radius-min);
	background: color-mix(in srgb, var(--formulaire-cellule) 62%, transparent);
}

.recapitulatif-meta .p {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.4rem;
	text-align: center;
}

.recapitulatif-details {
	grid-template-columns: 1fr;
}

.recapitulatif-details .recapitulatif-large {
	grid-column: 1 / -1;
}

.recapitulatif-details .recapitulatif-note {
	border-left: 3px solid color-mix(in srgb, var(--formulaire-cadre) 72%, var(--formulaire-bordure));
	font-size: .93rem;
	opacity: .88;
}

.recapitulatif-details .recapitulatif-alerte {
	border-color: color-mix(in srgb, var(--commande-danger) 62%, var(--formulaire-bordure));
	background: color-mix(in srgb, var(--commande-danger) 10%, var(--formulaire-cellule));
}

.formulaire-commande .subtitle,
.formulaire-commande .label {
	margin: 0 0 .75rem;
	color: var(--formulaire-texte) !important;
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.15;
}

.formulaire-commande h1.subtitle {
	padding-bottom: .55rem;
	border-bottom: 1px solid color-mix(in srgb, var(--formulaire-cadre) 58%, transparent);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}

.formulaire-commande p,
.formulaire-commande .p,
.formulaire-commande .content,
.formulaire-commande .checkbox {
	color: var(--formulaire-texte);
	font-size: clamp(.95rem, 1.3vw, 1.08rem);
	line-height: 1.35;
}

.formulaire-commande .field {
	margin-bottom: .65rem;
}

.formulaire-commande .control {
	position: relative;
}

.formulaire-commande .input,
.formulaire-commande .textarea,
.formulaire-commande .select,
.formulaire-commande .select select,
.formulaire-commande .select_trans {
	width: 100%;
	max-width: none !important;
}

.formulaire-commande .input,
.formulaire-commande .textarea,
.formulaire-commande .select select,
.formulaire-commande .select_trans {
	min-height: 3rem;
	padding: .65rem .85rem;
	border: 1px solid var(--formulaire-bordure);
	border-radius: var(--radius-min);
	outline: none;
	background: color-mix(in srgb, var(--formulaire-cellule) 88%, transparent) !important;
	color: var(--formulaire-texte);
	font: 500 1rem/1.2 var(--font-serif);
	box-shadow: inset 0 1px 4px color-mix(in srgb, var(--commande-ombre) 22%, transparent);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.formulaire-commande .has-icons-left .input {
	padding-left: 2.65rem;
}

.formulaire-commande .input::placeholder,
.formulaire-commande .textarea::placeholder {
	color: color-mix(in srgb, var(--formulaire-texte) 58%, transparent);
	opacity: 1;
}

.formulaire-commande .input:focus,
.formulaire-commande .textarea:focus,
.formulaire-commande .select select:focus,
.formulaire-commande .select_trans:focus {
	border-color: var(--formulaire-accent);
	background: color-mix(in srgb, var(--formulaire-cellule) 96%, transparent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--formulaire-accent) 19%, transparent);
}

.formulaire-commande .icon {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: .85rem;
	transform: translateY(-50%);
	color: color-mix(in srgb, var(--formulaire-accent) 72%, var(--formulaire-texte));
	pointer-events: none;
}

.formulaire-commande option {
	background: var(--formulaire-cellule) !important;
	color: var(--formulaire-texte);
}

.formulaire-commande input[type="checkbox"] {
	width: 1.2rem !important;
	height: 1.2rem !important;
	margin-right: .35rem;
	accent-color: var(--formulaire-accent);
	vertical-align: middle;
}

.formulaire-commande .checkbox a {
	color: var(--formulaire-accent) !important;
	text-decoration: underline;
	text-underline-offset: .18em;
}

.formulaire-commande .formulaire-option {
	padding: .8rem 1rem;
	border-color: color-mix(in srgb, var(--commande-secondaire) 38%, var(--formulaire-bordure)) !important;
	background: color-mix(in srgb, var(--commande-secondaire) 10%, var(--formulaire-surface)) !important;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.formulaire-commande .formulaire-option:hover {
	border-color: var(--commande-secondaire) !important;
	background: color-mix(in srgb, var(--commande-secondaire) 18%, var(--formulaire-surface)) !important;
	transform: translateY(-1px);
}

.formulaire-commande #facturator_button,
.formulaire-commande #facturator {
	margin-top: .75rem;
}

.formulaire-commande .formulaire-total {
	border-color: color-mix(in srgb, var(--formulaire-accent) 58%, var(--formulaire-bordure)) !important;
	background: color-mix(in srgb, var(--formulaire-accent) 7%, var(--formulaire-surface)) !important;
	text-align: center;
}

.formulaire-commande .formulaire-total h1.subtitle {
	border-bottom-color: color-mix(in srgb, var(--formulaire-accent) 58%, transparent);
}

.formulaire-commande #prix_commande,
.formulaire-commande #prix_total {
	color: var(--formulaire-accent);
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	font-weight: 700;
}

.formulaire-commande .formulaire-payer {
	display: flex;
	width: min(100%, 360px);
	min-height: 3.4rem;
	margin: .4rem auto 0;
	border-color: var(--formulaire-accent);
	background: var(--formulaire-accent);
	color: var(--commande-cta-texte);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	text-shadow: none;
	cursor: pointer;
	box-shadow: 0 10px 34px color-mix(in srgb, var(--formulaire-accent) 32%, transparent);
}

.formulaire-commande .formulaire-payer:hover,
.formulaire-commande .formulaire-payer:focus-visible {
	border-color: var(--formulaire-accent-hover);
	background: var(--formulaire-accent-hover);
	color: var(--commande-cta-texte);
	transform: translateY(-2px);
}

.formulaire-code-bouton {
	width: 100%;
	min-height: 3rem;
	height: auto;
	margin: 0;
	padding: .45rem .7rem;
	border-color: var(--formulaire-bordure);
	background: color-mix(in srgb, var(--formulaire-accent) 18%, var(--formulaire-surface));
	color: var(--formulaire-texte);
	font-size: .9rem;
	line-height: 1.05;
	cursor: pointer;
}

.formulaire-code-bouton span {
	display: block;
}

.formulaire-reservation .formulaire-code-reduction {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr);
	align-items: stretch;
	gap: .6rem;
	margin: 0 !important;
}

.formulaire-reservation .formulaire-code-reduction .column {
	padding: 0;
}

.formulaire-commande #reduc_holder td {
	display: block;
	flex: 0 1 18rem;
	width: 90%;
	padding: .35rem 0;
	border: 0;
	background: transparent;
}

.formulaire-commande #reduc_holder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .55rem;
}

.formulaire-commande #reduc_holder:not(:empty) {
	margin: .55rem 0;
	padding: .15rem;
}

.formulaire-commande .formulaire-reduction {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .65rem;
	min-height: 3.2rem;
	padding: .65rem 2.65rem .65rem .85rem;
	border: 1px solid color-mix(in srgb, var(--formulaire-accent) 35%, var(--formulaire-bordure));
	border-radius: var(--radius-min);
	background: color-mix(in srgb, var(--formulaire-accent) 10%, var(--formulaire-cellule));
	color: var(--formulaire-texte);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--formulaire-texte) 9%, transparent);
}

.formulaire-commande .formulaire-reduction > i {
	color: var(--formulaire-accent);
	font-size: 1.15rem;
}

.formulaire-commande .formulaire-reduction > div:last-child {
	color: var(--formulaire-accent);
	font-weight: 700;
}

.formulaire-commande .formulaire-reduction-supprimer {
	position: absolute;
	top: 50%;
	right: .65rem;
	display: grid;
	width: 1.65rem;
	height: 1.65rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--commande-danger) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--commande-danger) 16%, transparent);
	color: var(--formulaire-texte);
	font: 700 1.2rem/1 Arial, sans-serif;
	place-items: center;
	transform: translateY(-50%);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.formulaire-commande .formulaire-reduction-supprimer:hover,
.formulaire-commande .formulaire-reduction-supprimer:focus-visible {
	background: var(--commande-danger);
	transform: translateY(-50%) scale(1.08);
}

.formulaire-cadeau {
	--formulaire-accent: var(--commande-accent-cadeau);
	--formulaire-accent-hover: var(--commande-accent-survol);
}

.formulaire-cadeau .container {
	width: min(100%, 1050px);
}

.formulaire-cadeau .formulaire-commande-grille {
	align-items: start;
}

.formulaire-cadeau .textarea {
	min-height: 7rem;
	resize: vertical;
}

body:has(.formulaire-commande) footer {
	background: var(--commande-fond);
}

@keyframes apparition-formulaire {
	from {
		opacity: 0;
		transform: translateY(.65rem);
	}
}

@media (max-width: 830px) {
	#main > section.formulaire-commande {
		padding: calc(max(50px, 10vh) + min(2vh, 3vw) + min(2vh, 3vw) + .75rem) 1rem 1.5rem;
	}

	.formulaire-commande .formulaire-commande-grille,
	.formulaire-commande .formulaire-commande-suite {
		grid-template-columns: 1fr;
		gap: .75rem;
	}

	.formulaire-commande .formulaire-recapitulatif {
		position: static;
	}

	.formulaire-reservation .formulaire-commande-suite > .column:first-child {
		order: 2;
	}

	.formulaire-commande .columns,
	.formulaire-commande .column {
		margin: 0 !important;
		padding: 0 !important;
	}

	.formulaire-commande .formulaire-carte,
	.formulaire-commande .box {
		padding: 1.1rem;
	}

	.formulaire-commande .column.formulaire-carte {
		padding: 1.1rem !important;
	}

	.formulaire-reservation .formulaire-code-reduction {
		grid-template-columns: minmax(0, 1fr) minmax(6.8rem, 38%);
		gap: .5rem;
	}

	.formulaire-commande .input,
	.formulaire-commande .textarea,
	.formulaire-commande .select select,
	.formulaire-commande .select_trans {
		min-height: 2.8rem;
	}

	.formulaire-commande .formulaire-payer {
		width: 100%;
	}
}

@media (min-width: 831px) {
	.recapitulatif-meta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.recapitulatif-details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.formulaire-commande *,
	.formulaire-commande *::before,
	.formulaire-commande *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}