/**
 * Formulaire de réservation, côté visiteur.
 *
 * Trois règles de conception tiennent toute cette feuille :
 *
 * 1. Aucune police externe, aucune image distante, aucun CDN. La promesse
 *    « zéro appel sortant » vaut aussi pour le style : tout est en CSS pur,
 *    les pictogrammes sont des SVG en ligne dans le HTML.
 * 2. On n'impose rien au thème du restaurateur. La police est héritée
 *    (`font: inherit` partout), les couleurs se déduisent de `currentColor`
 *    et d'une seule variable d'accent réglable dans les réglages.
 * 3. Le doigt d'abord : toute zone tactile fait au moins 44 px de haut.
 */

.novea-res {
	/*
	 * LA variable à régler, et la seule : Réglages → « Couleur d'accent ».
	 * Le plugin la pose en style en ligne ; un thème peut la surcharger sur
	 * `.novea-res` sans rien connaître du reste de la feuille.
	 */
	--novea-res-accent: #1f5136;

	/*
	 * Teinte réellement peinte. Elle vaut l'accent en mode clair et une version
	 * éclaircie en mode sombre : une propriété personnalisée ne pouvant pas se
	 * référencer elle-même, il faut ce second nom.
	 */
	--novea-res-tone: var(--novea-res-accent);

	/* Tout le reste se déduit de l'accent ou du texte hérité du thème. */
	--novea-res-radius: 12px;
	--novea-res-radius-sm: 9px;
	--novea-res-border: color-mix(in srgb, currentColor 18%, transparent);
	--novea-res-border-strong: color-mix(in srgb, currentColor 34%, transparent);
	--novea-res-muted: color-mix(in srgb, currentColor 62%, transparent);
	--novea-res-surface: color-mix(in srgb, currentColor 3%, transparent);
	--novea-res-tone-soft: color-mix(in srgb, var(--novea-res-tone) 10%, transparent);
	--novea-res-danger: #b3261e;
	/*
	 * Trois teintes en plus du neutre, pas une de plus : l'accent du
	 * restaurateur (le choix), l'ambre (ça se remplit), le rouge (complet).
	 * Au-delà, une interface où tout est coloré ne dit plus rien.
	 */
	--novea-res-warn: #8a5300;
	--novea-res-warn-soft: color-mix(in srgb, #8a5300 10%, transparent);
	--novea-res-danger-soft: color-mix(in srgb, #b3261e 8%, transparent);
	--novea-res-success: #1c6b3c;
	--novea-res-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -16px rgba(0, 0, 0, 0.35);

	margin: 0 0 2rem;
	max-width: 44rem;
	font: inherit;
	line-height: 1.5;
}

/*
 * Repli pour les navigateurs sans color-mix (Safari < 16.4, Firefox < 113) :
 * des valeurs figées, calculées pour rester lisibles sur fond clair.
 */
@supports not (color: color-mix(in srgb, currentColor 10%, transparent)) {
	.novea-res {
		--novea-res-border: rgba(0, 0, 0, 0.18);
		--novea-res-border-strong: rgba(0, 0, 0, 0.34);
		--novea-res-muted: rgba(0, 0, 0, 0.62);
		--novea-res-surface: rgba(0, 0, 0, 0.03);
		--novea-res-tone-soft: rgba(31, 81, 54, 0.1);
		--novea-res-warn-soft: rgba(138, 83, 0, 0.1);
		--novea-res-danger-soft: rgba(179, 38, 30, 0.08);
	}
}

.novea-res *,
.novea-res *::before,
.novea-res *::after {
	box-sizing: border-box;
}

.novea-res__title {
	margin: 0 0 1.4rem;
	font: inherit;
	font-size: 1.6em;
	line-height: 1.2;
}

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

.novea-res__step {
	margin: 0 0 1.9rem;
	padding: 0;
	border: 0;
	min-width: 0; /* Un fieldset ne rétrécit pas tout seul dans une grille. */
}

.novea-res__steptitle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	padding: 0;
	font: inherit;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Pastille numérotée : le visiteur sait où il en est sans lire une notice. */
.novea-res__stepnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	background: var(--novea-res-tone);
	color: #fff;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1;
}

/* -------------------------------------------------------------- Les champs */

.novea-res__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.1rem;
}

.novea-res__field {
	margin: 0 0 0.2rem;
	min-width: 0;
}

.novea-res__field--wide {
	margin-top: 1.1rem;
	grid-column: 1 / -1;
}

.novea-res__label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.94em;
	font-weight: 600;
}

.novea-res__req {
	color: var(--novea-res-tone);
}

.novea-res__optional {
	margin-left: 0.35em;
	font-weight: 400;
	font-size: 0.9em;
	color: var(--novea-res-muted);
}

/* Le pictogramme vit DANS le cadre du champ, le texte s'écarte de sa largeur. */
.novea-res__control {
	position: relative;
	display: block;
}

.novea-res__control .novea-res__icon {
	position: absolute;
	top: 50%;
	inset-inline-start: 0.85rem;
	transform: translateY(-50%);
	color: var(--novea-res-muted);
	pointer-events: none;
}

.novea-res input[type="text"],
.novea-res input[type="tel"],
.novea-res input[type="email"],
.novea-res input[type="date"],
.novea-res input[type="number"],
.novea-res textarea {
	width: 100%;
	max-width: 100%;
	min-height: 3rem; /* ≈ 48 px : confortable au doigt. */
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--novea-res-border-strong);
	border-radius: var(--novea-res-radius-sm);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Deux classes ici, à dessein : la règle générale ci-dessus porte un sélecteur
 * d'attribut ([type="text"]…) et gagnerait sur une seule classe — le texte
 * viendrait alors se poser sur le pictogramme.
 */
.novea-res .novea-res__control input {
	padding-inline-start: 2.9rem;
}

.novea-res textarea {
	min-height: 5.5rem;
	resize: vertical;
}

.novea-res input::placeholder,
.novea-res textarea::placeholder {
	color: var(--novea-res-muted);
	opacity: 1;
}

.novea-res input:hover,
.novea-res textarea:hover {
	border-color: var(--novea-res-tone);
}

.novea-res input:focus,
.novea-res textarea:focus {
	outline: none;
	border-color: var(--novea-res-tone);
	box-shadow: 0 0 0 3px var(--novea-res-tone-soft);
}

/* Le focus clavier reste visible même quand le thème l'a effacé. */
.novea-res :focus-visible {
	outline: 2px solid var(--novea-res-tone);
	outline-offset: 2px;
}

/* Champ en erreur : bordure rouge, en plus du message écrit dessous. */
.novea-res [aria-invalid="true"] {
	border-color: var(--novea-res-danger);
}

.novea-res__error {
	display: none;
	margin: 0.4rem 0 0;
	font-size: 0.88em;
	color: var(--novea-res-danger);
}

.novea-res__error--on {
	display: block;
}

.novea-res__hint {
	display: block;
	margin: 0.6rem 0 0;
	font-size: 0.9em;
	color: var(--novea-res-muted);
}

.novea-res__hint--error {
	color: var(--novea-res-danger);
}

/* -------------------------------------------------- Compteur de couverts */

.novea-res__stepper {
	display: flex;
	align-items: center;
	max-width: 12rem;
	border: 1px solid var(--novea-res-border-strong);
	border-radius: var(--novea-res-radius-sm);
	overflow: hidden;
}

.novea-res__stepper:focus-within {
	border-color: var(--novea-res-tone);
	box-shadow: 0 0 0 3px var(--novea-res-tone-soft);
}

.novea-res__stepbtn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem; /* 48 px de cible tactile. */
	padding: 0;
	border: 0;
	background: var(--novea-res-surface);
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.novea-res__stepbtn:hover:not([disabled]) {
	background: var(--novea-res-tone);
	color: #fff;
}

.novea-res__stepbtn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.novea-res__partyvalue {
	flex: 1 1 auto;
	min-height: 3rem;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
	font-weight: 700;
	font-size: 1.05em;
	padding: 0.7rem 0.2rem;
	box-shadow: none !important;
	-moz-appearance: textfield;
}

.novea-res__partyvalue::-webkit-outer-spin-button,
.novea-res__partyvalue::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Sans JavaScript les deux boutons ne feraient rien : on les retire, et le
   champ nombre reprend ses flèches natives. */
.novea-res--nojs .novea-res__stepbtn {
	display: none;
}

.novea-res--nojs .novea-res__partyvalue {
	-moz-appearance: auto;
	text-align: start;
	padding-inline-start: 0.9rem;
}

.novea-res--nojs .novea-res__partyvalue::-webkit-outer-spin-button,
.novea-res--nojs .novea-res__partyvalue::-webkit-inner-spin-button {
	-webkit-appearance: auto;
}

/* ------------------------------------------------------ Pastilles horaires */

.novea-res__slotlist {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	transition: opacity 0.15s ease;
}

/* Chargement : la liste s'estompe et devient inerte, sans sauter en hauteur. */
.novea-res__slotlist[aria-busy="true"] {
	opacity: 0.4;
	pointer-events: none;
}

.novea-res__slotgroup-name {
	margin: 0 0 0.5rem;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--novea-res-muted);
}

.novea-res__chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
	gap: 0.55rem;
}

.novea-res__chip {
	position: relative;
	display: flex;
	margin: 0;
	font-weight: 600;
}

/* Le vrai bouton radio reste là (clavier, lecteurs d'écran, envoi sans JS) :
   on le rend invisible, jamais absent. */
.novea-res__chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.novea-res__chip-face {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	width: 100%;
	min-height: 2.9rem; /* 46 px : au-dessus du minimum tactile. */
	padding: 0.5rem 0.35rem;
	border: 1px solid var(--novea-res-border-strong);
	border-radius: var(--novea-res-radius-sm);
	background: transparent;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		color 0.15s ease, transform 0.15s ease;
}

.novea-res__chip-hour {
	line-height: 1.1;
}

/*
 * Le mot qui double la couleur. Sans lui, un daltonien et un lecteur d'écran
 * ne verraient aucune différence entre « libre » et « il en reste deux » :
 * la teinte éclaire une information, elle ne la porte jamais seule.
 */
.novea-res__chip-note {
	font-size: 0.66em;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: lowercase;
	opacity: 0.95;
}

.novea-res__chip:hover .novea-res__chip-face {
	border-color: var(--novea-res-tone);
	background: var(--novea-res-tone-soft);
}

.novea-res__chip input:checked + .novea-res__chip-face {
	border-color: var(--novea-res-tone);
	background: var(--novea-res-tone);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--novea-res-shadow);
}

/* Le focus doit se voir sur la pastille, pas sur l'input caché. */
.novea-res__chip input:focus-visible + .novea-res__chip-face {
	outline: 2px solid var(--novea-res-tone);
	outline-offset: 2px;
}

/*
 * « Il se remplit » — ambre. C'est une information vraie : il reste peu de
 * couverts, et le seuil se règle. Elle crée une urgence honnête, la seule
 * qu'on s'autorise ici.
 */
.novea-res__chip--tight .novea-res__chip-face {
	border-color: var(--novea-res-warn);
	background: var(--novea-res-warn-soft);
	color: var(--novea-res-warn);
}

.novea-res__chip--tight:hover .novea-res__chip-face {
	border-color: var(--novea-res-warn);
	background: var(--novea-res-warn-soft);
}

/* Une pastille ambre choisie reprend l'accent plein : le choix prime l'alerte. */
.novea-res__chip--tight input:checked + .novea-res__chip-face {
	border-color: var(--novea-res-tone);
	background: var(--novea-res-tone);
	color: #fff;
}

/* Complet : visible mais barré. Montrer ce qui part est plus honnête —
   et plus efficace — que de le faire disparaître. */
.novea-res__chip--full .novea-res__chip-face {
	border-style: dashed;
	border-color: var(--novea-res-border);
	color: var(--novea-res-muted);
	background: var(--novea-res-surface);
	cursor: not-allowed;
}

/* La rature ne porte que l'heure : le mot « complet » doit rester lisible. */
.novea-res__chip--full .novea-res__chip-hour {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.novea-res__chip--full .novea-res__chip-note {
	font-weight: 600;
	opacity: 1;
}

.novea-res__chip--full:hover .novea-res__chip-face {
	border-color: var(--novea-res-border);
	background: var(--novea-res-surface);
}

/* ------------------------------------------------------ Service complet */

/*
 * Un service entièrement pris ne se dit pas par une grille grise muette. Il se
 * dit avec le mot, et il s'accompagne toujours d'une sortie — l'autre service,
 * ou une autre date. Un client qui lit « complet » comprend deux choses : la
 * maison marche, et il doit choisir autre chose maintenant.
 */
.novea-res__slotgroup--full .novea-res__slotgroup-name {
	opacity: 0.7;
}

.novea-res__soldout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem 0.7rem;
	margin: 0 0 0.7rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--novea-res-danger);
	border-left-width: 4px;
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-danger-soft);
}

.novea-res__soldout-tag {
	flex: 0 0 auto;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--novea-res-danger);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.novea-res__soldout-text {
	flex: 1 1 12rem;
	margin: 0;
	font-weight: 600;
}

.novea-res__soldout-out {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.92em;
	opacity: 0.85;
}

/* La sortie quand c'est toute la journée qui est prise. */
.novea-res__nextday {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	margin: 0.9rem 0 0;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--novea-res-border-strong);
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-surface);
}

.novea-res__nextday-text {
	flex: 1 1 12rem;
	margin: 0;
	font-weight: 600;
}

.novea-res__nextday-btn {
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-tone);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.novea-res__nextday-btn:hover {
	filter: brightness(1.08);
}

/* Rangée de fantômes pendant le premier chargement des créneaux. */
.novea-res__ghosts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
	gap: 0.55rem;
}

.novea-res__ghost {
	height: 2.9rem;
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-surface);
	animation: novea-res-pulse 1.4s ease-in-out infinite;
}

@keyframes novea-res-pulse {
	0%,
	100% {
		opacity: 0.45;
	}
	50% {
		opacity: 0.9;
	}
}

/* ------------------------------------------------------------- Consentement */

.novea-res__consent {
	margin: 1.6rem 0 0;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--novea-res-border);
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-surface);
}

.novea-res__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	font-size: 0.92em;
	font-weight: 400;
	cursor: pointer;
}

.novea-res__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--novea-res-tone);
}

.novea-res__privacy {
	display: inline-block;
	margin-top: 0.45rem;
	margin-inline-start: 1.85rem;
	font-size: 0.88em;
	color: inherit;
}

/* ------------------------------------------------------------------ Envoi */

.novea-res__submit {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1.6rem 0 0;
}

.novea-res__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem; /* 52 px. */
	padding: 0.85rem 2rem;
	border: 1px solid var(--novea-res-tone);
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-tone);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--novea-res-shadow);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.novea-res__button:hover:not([disabled]) {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.novea-res__button:active:not([disabled]) {
	transform: translateY(0);
}

.novea-res__button[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.novea-res__spinner {
	display: none;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: novea-res-spin 0.7s linear infinite;
}

.novea-res__button--busy .novea-res__spinner {
	display: block;
}

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

.novea-res__status {
	font-size: 0.92em;
	color: var(--novea-res-muted);
}

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

.novea-res__notice {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 0 1.4rem;
	padding: 0.95rem 1.1rem;
	border: 1px solid currentColor;
	border-inline-start-width: 4px;
	border-radius: var(--novea-res-radius-sm);
	background: var(--novea-res-surface);
}

.novea-res__notice .novea-res__icon {
	flex: 0 0 auto;
	margin-top: 0.1rem;
}

.novea-res__notice p {
	margin: 0 0 0.35rem;
	font-size: 0.95em;
}

.novea-res__notice p:last-child {
	margin-bottom: 0;
}

.novea-res__notice--success {
	color: var(--novea-res-success);
}

.novea-res__notice--error {
	color: var(--novea-res-danger);
}

/* ------------------------------------------------------- Écran de confirmation */

.novea-res__done {
	padding: 2.2rem 1.6rem;
	border: 1px solid var(--novea-res-border);
	border-top: 3px solid var(--novea-res-tone);
	border-radius: var(--novea-res-radius);
	background: var(--novea-res-surface);
	text-align: center;
	box-shadow: var(--novea-res-shadow);
}

.novea-res__donemark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1rem;
	height: 3.1rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--novea-res-tone);
	color: #fff;
	animation: novea-res-pop 0.35s ease-out;
}

.novea-res__donemark .novea-res__icon {
	width: 26px;
	height: 26px;
	stroke-width: 2.2;
}

@keyframes novea-res-pop {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.novea-res__donetitle {
	margin: 0 0 1.3rem;
	font: inherit;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.2;
}

/* Le récapitulatif : ce que le visiteur vient de réserver, noir sur blanc. */
.novea-res__recap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: 0.9rem;
	margin: 0 auto 1.3rem;
	padding: 1.1rem 1rem;
	border-radius: var(--novea-res-radius-sm);
	border: 1px solid var(--novea-res-border);
	text-align: center;
}

.novea-res__recap div {
	min-width: 0;
}

.novea-res__recap dt {
	margin: 0 0 0.25rem;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--novea-res-muted);
}

.novea-res__recap dd {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	overflow-wrap: break-word;
}

.novea-res__donetext {
	margin: 0 0 0.6rem;
}

.novea-res__donemail {
	margin: 0;
	font-size: 0.92em;
	color: var(--novea-res-muted);
}

/* Texte réservé aux lecteurs d'écran (le « (complet) » des pastilles pleines). */
.novea-res__sronly {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Piège à robots : invisible à l'œil, absent du parcours clavier, mais
   toujours dans le document pour qu'un automate le remplisse. */
.novea-res__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ------------------------------------------------------------- Téléphone */

@media (max-width: 600px) {
	.novea-res__row {
		grid-template-columns: 1fr;
	}

	/* Trois pastilles par ligne : la grille reste lisible sur 390 px. */
	.novea-res__chips,
	.novea-res__ghosts {
		grid-template-columns: repeat(3, 1fr);
	}

	.novea-res__stepper {
		max-width: none;
	}

	.novea-res__submit {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.7rem;
	}

	/* Bouton pleine largeur, en bas, sous le pouce. */
	.novea-res__button {
		width: 100%;
	}

	.novea-res__status {
		text-align: center;
	}

	.novea-res__done {
		padding: 1.8rem 1.1rem;
	}
}

@media (max-width: 360px) {
	.novea-res__chips,
	.novea-res__ghosts {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------- Mode sombre */

/*
 * On ne repeint pas le formulaire : le texte et le fond viennent toujours du
 * thème. On rééquilibre seulement ce qui ne se déduit pas de currentColor —
 * l'accent est éclairci pour tenir le contraste sur fond sombre.
 */
@media (prefers-color-scheme: dark) {
	.novea-res {
		--novea-res-border: color-mix(in srgb, currentColor 24%, transparent);
		--novea-res-border-strong: color-mix(in srgb, currentColor 42%, transparent);
		--novea-res-surface: color-mix(in srgb, currentColor 8%, transparent);
		--novea-res-danger: #ff8a80;
		--novea-res-danger-soft: rgba(255, 138, 128, 0.14);
		/* L'ambre est éclairci comme le reste : sur fond sombre, #8a5300 disparaît. */
		--novea-res-warn: #f0b429;
		--novea-res-warn-soft: rgba(240, 180, 41, 0.16);
		--novea-res-success: #6ed49a;
		--novea-res-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
	}

	/*
	 * L'accent choisi par le restaurateur est éclairci d'un tiers pour tenir le
	 * contraste sur fond sombre, plutôt que remplacé par une autre teinte : sa
	 * couleur reste reconnaissable.
	 */
	@supports (color: color-mix(in srgb, red 50%, white)) {
		.novea-res {
			--novea-res-tone: color-mix(in srgb, var(--novea-res-accent) 66%, #ffffff);
			--novea-res-tone-soft: color-mix(in srgb, var(--novea-res-accent) 26%, transparent);
		}
	}

	.novea-res__stepnum,
	.novea-res__button,
	.novea-res__donemark,
	.novea-res__chip input:checked + .novea-res__chip-face,
	.novea-res__nextday-btn,
	.novea-res__stepbtn:hover:not([disabled]) {
		color: #10231a;
	}

	.novea-res__soldout-tag {
		color: #2a0a08;
	}

	.novea-res__spinner {
		border-color: rgba(0, 0, 0, 0.25);
		border-top-color: #10231a;
	}
}

/* ------------------------------------------------- Animations en sourdine */

@media (prefers-reduced-motion: reduce) {
	.novea-res *,
	.novea-res *::before,
	.novea-res *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.novea-res__chip input:checked + .novea-res__chip-face,
	.novea-res__button:hover:not([disabled]) {
		transform: none;
	}
}

/* ----------------------------------------------- Contraste élevé / forcé */

@media (forced-colors: active) {
	.novea-res__chip input:checked + .novea-res__chip-face {
		outline: 3px solid CanvasText;
		outline-offset: -3px;
	}

	/*
	 * En contraste forcé, toutes nos teintes tombent : c'est précisément
	 * pourquoi chaque état porte AUSSI un mot. On garde seulement la forme.
	 */
	.novea-res__chip--full .novea-res__chip-face {
		opacity: 0.6;
	}

	.novea-res__chip--tight .novea-res__chip-face {
		outline: 2px dotted CanvasText;
		outline-offset: -4px;
	}

	.novea-res__soldout {
		border: 2px solid CanvasText;
	}
}


/* ------------------------------------ Retour d'annulation, hors formulaire */

/*
 * Le lien « je ne pourrai pas venir » d'un e-mail peut tomber sur une page qui
 * ne porte aucun formulaire : le message doit tenir debout tout seul.
 */
.novea-res--standalone {
	margin-bottom: 1.6rem;
}

.novea-res--standalone .novea-res__notice {
	margin: 0;
}

.novea-res__cancelrecap {
	margin: 0.4em 0 0;
	opacity: 0.85;
}