/* =======================================================
   Eatalia Order Manager — Frontend CSS
   Mobile-first, accessible, propre.
   v1.0.4 — Page commande refondue : hero immersif + card.
            Variables CSS héritées du thème quand dispo (fallbacks inclus).
   ======================================================= */

:root {
	/* Fallbacks utilisés si le thème ne définit pas ces vars */
	--eom-primary: #e76f51;
	--eom-primary-dark: #c0541f;
	--eom-bg: #ffffff;
	--eom-surface: #faf7f2;
	--eom-text: #2a2a2a;
	--eom-muted: #8a8a8a;
	--eom-border: #e5e0d5;
	--eom-banner-bg: #2a2a2a;
	--eom-banner-text: #ffffff;
	--eom-success: #2e7d32;
	--eom-radius: 14px;
	--eom-font-size: 1rem;
	--eom-button-radius: 12px;

	/* Hero (v1.0.4) */
	--eom-hero-min-h: clamp(280px, 38vw, 460px);
	--eom-hero-grad-from: #C4572E; /* terracotta du thème */
	--eom-hero-grad-via: #E6A43A;  /* ocre du thème */
	--eom-hero-grad-to:  #6B7E3A;  /* olive du thème */
	--eom-hero-text: #FFFAF2;
	--eom-card-shadow: 0 30px 60px -20px rgba(40,22,12,.25), 0 8px 20px -8px rgba(40,22,12,.15);
}

/* =====================================================================
   PAGE COMMANDE (v1.0.4) — Hero immersif + carte chevauchante
   ===================================================================== */
.eom-page {
	/* On sort du wrapper de page WP pour faire du full-bleed.
	   Astuce safe : utilise margin négative + 100vw. */
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
	margin-block-start: 0;
	margin-block-end: clamp(2rem, 4vw, 4rem);
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	color: var(--col-ink, var(--eom-text));
	box-sizing: border-box;
}
.eom-page * { box-sizing: border-box; }

/* --- Hero --- */
.eom-hero {
	position: relative;
	min-height: var(--eom-hero-min-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(3rem, 8vw, 6rem) clamp(5rem, 10vw, 8rem);
	padding-inline: clamp(1.25rem, 4vw, 3rem);
	color: var(--eom-hero-text);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.18), transparent 50%),
		radial-gradient(ellipse at 80% 100%, rgba(255,255,255,.10), transparent 50%),
		linear-gradient(135deg, var(--eom-hero-grad-from) 0%, var(--eom-hero-grad-via) 60%, var(--eom-hero-grad-to) 100%);
}
.eom-hero.has-image {
	background-color: #281a10;
	background-size: cover;
	background-position: center;
}

/* Pattern décoratif type carrelage italien (subtil) */
.eom-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
	background-size: 24px 24px;
	opacity: .6;
	z-index: -1;
}

.eom-hero__inner {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.5rem, 1.5vw, 1rem);
	animation: eom-hero-rise .6s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes eom-hero-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.eom-hero__eyebrow {
	font-family: var(--font-heading, var(--font-body, sans-serif));
	font-size: clamp(.75rem, .7rem + .2vw, .875rem);
	letter-spacing: .25em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0;
	opacity: .85;
	color: var(--eom-hero-text);
}

.eom-hero__title {
	font-family: var(--font-display, Georgia, serif);
	font-size: clamp(2rem, 1.6rem + 3vw, 4.5rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--eom-hero-text);
	text-shadow: 0 2px 30px rgba(0,0,0,.25);
}

.eom-hero__subtitle {
	font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
	line-height: 1.5;
	max-width: 540px;
	margin: 0;
	opacity: .92;
}

/* Vague de transition vers la carte (couleur = bg de la page) */
.eom-hero__wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: clamp(40px, 6vw, 80px);
	color: var(--col-bg, #F8EDE3);
	display: block;
	pointer-events: none;
}

/* --- Card sélecteur (chevauche le bas du hero) --- */
.eom-card {
	max-width: 720px;
	margin-inline: auto;
	margin-block-start: clamp(-3rem, -5vw, -2rem); /* chevauchement */
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--col-surface, var(--eom-bg));
	border-radius: clamp(16px, 1.5vw, 24px);
	box-shadow: var(--eom-card-shadow);
	border: 1px solid var(--col-border, var(--eom-border));
	position: relative;
	z-index: 2;
	animation: eom-card-rise .7s cubic-bezier(.2,.8,.2,1) .15s both;
}

@keyframes eom-card-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Fieldset reset (utilise <fieldset> pour la sémantique radio) */
.eom-page fieldset.eom-field {
	border: 0;
	padding: 0;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
	min-width: 0;
}

.eom-page fieldset.eom-field legend.eom-label {
	display: block;
	width: 100%;
	margin-bottom: clamp(.5rem, 1vw, .875rem);
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(.95rem, .9rem + .15vw, 1.05rem);
	font-weight: 600;
	color: var(--col-ink, var(--eom-text));
	letter-spacing: -0.005em;
	padding: 0;
}

/* =====================================================================
   CHECKOUT BOX (préservé, inchangé)
   ===================================================================== */
.eom-checkout-box {
	background: var(--eom-bg);
	color: var(--eom-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--eom-font-size);
	line-height: 1.5;
	padding: 18px;
	border-radius: var(--eom-radius);
	border: 1px solid var(--eom-border);
	margin: 18px 0;
	box-shadow: 0 6px 24px rgba(0,0,0,.04);
	box-sizing: border-box;
}

.eom-checkout-box * {
	box-sizing: border-box;
}

.eom-order-page__title {
	/* Conservé pour rétro-compat éventuelle */
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.2;
}

.eom-checkout-box h3 {
	font-size: 1.1rem;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--eom-border);
}

.eom-field {
	margin-bottom: 16px;
}

.eom-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 0.92rem;
}

/* =====================================================================
   Toggles (mode + type)
   ===================================================================== */
.eom-toggles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.eom-toggle {
	position: relative;
	cursor: pointer;
	padding: 14px 16px;
	border: 2px solid var(--eom-border);
	border-radius: var(--eom-radius);
	background: var(--eom-surface);
	text-align: center;
	transition: border-color .18s ease, background .18s ease, transform .1s ease, box-shadow .18s ease;
	user-select: none;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
}

.eom-toggle input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.eom-toggle:hover {
	border-color: var(--col-border-strong, #cdbfa2);
}

/* MODIFIÉ v1.0.5 — Focus uniquement au clavier (pas au clic souris).
   :focus-within restait collé sur Safari après un click → faux positif visuel.
   :has(:focus-visible) permet de garder l'a11y clavier sans persister au clic. */
.eom-toggle:has(input:focus-visible) {
	outline: 2px solid var(--col-primary, var(--eom-primary));
	outline-offset: 2px;
}
/* Fallback pour navigateurs sans :has() (très rare en 2026 mais safe) */
@supports not selector(:has(*)) {
	.eom-toggle:focus-within {
		outline: 2px solid var(--col-primary, var(--eom-primary));
		outline-offset: 2px;
	}
}

.eom-toggle.is-active {
	border-color: var(--col-primary, var(--eom-primary));
	background: var(--col-primary-soft, #fff3ec);
	color: var(--col-primary-dark, var(--eom-primary-dark));
	box-shadow: 0 4px 14px var(--col-primary-glow, rgba(231,111,81,.18));
}

.eom-toggle__icon {
	font-size: 1.4em;
	line-height: 1;
}

.eom-toggle__label {
	font-size: 0.95rem;
}

/* =====================================================================
   Select de date
   ===================================================================== */
.eom-field select {
	width: 100%;
	padding: 12px 38px 12px 14px;
	border: 2px solid var(--eom-border);
	border-radius: 12px;
	font-size: 0.98rem;
	background: #fff;
	color: var(--eom-text);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	min-height: 48px;
}

.eom-field select:focus {
	outline: none;
	border-color: var(--eom-primary);
}

/* =====================================================================
   Grille de créneaux
   ===================================================================== */
.eom-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
	min-height: 48px;
	padding: 4px 0;
}

.eom-slot {
	padding: 12px 6px;
	border: 2px solid var(--eom-border);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
	text-align: center;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
	min-height: 44px;
}

.eom-slot:hover {
	border-color: var(--eom-primary);
	color: var(--eom-primary-dark);
}

.eom-slot.is-active {
	border-color: var(--eom-primary);
	background: var(--eom-primary);
	color: #fff;
	font-weight: 600;
}

.eom-slots__hint,
.eom-slots__empty,
.eom-slots__loading {
	grid-column: 1 / -1;
	color: var(--eom-muted);
	font-style: italic;
	font-size: 0.9rem;
	padding: 10px 4px;
	margin: 0;
}

/* =====================================================================
   Actions / boutons
   ===================================================================== */
.eom-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.eom-actions__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eom-message {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.9rem;
	color: #c0392b;
	font-weight: 500;
}

.eom-message.is-success {
	color: var(--eom-success);
}

.eom-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 14px 24px;
	background: var(--col-primary, var(--eom-primary));
	color: #fff !important;
	border: none;
	border-radius: var(--eom-button-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, transform .1s ease, box-shadow .18s ease;
	width: 100%;
	text-decoration: none;
	min-height: 50px;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 4px 14px var(--col-primary-glow, rgba(231,111,81,.25));
}

.eom-submit:hover {
	background: var(--col-primary-dark, var(--eom-primary-dark));
	box-shadow: 0 6px 20px var(--col-primary-glow, rgba(231,111,81,.35));
}

.eom-submit:active {
	transform: scale(0.98);
}

.eom-submit[disabled] {
	background: #c9c9c9;
	cursor: not-allowed;
	box-shadow: none;
}

.eom-skip {
	background: transparent;
	color: var(--eom-muted);
	border: 1px solid var(--eom-border);
	padding: 12px 16px;
	border-radius: var(--eom-button-radius);
	cursor: pointer;
	font-size: 0.92rem;
	transition: color .15s ease, border-color .15s ease;
	min-height: 46px;
}

.eom-skip:hover {
	color: var(--eom-text);
	border-color: var(--eom-text);
}

/* Cache les champs scheduled-only quand ASAP est sélectionné */
.eom-page[data-type="asap"] [data-show-when="scheduled"],
.eom-checkout-box[data-type="asap"] [data-show-when="scheduled"] {
	display: none;
}

/* v2.0.0-alpha2 — Bloc adresse de livraison (visible uniquement si service=delivery)
   On utilise data-service sur #eom-order-page (posé par le JS via syncServiceVisibility) */
.eom-page:not([data-service="delivery"]) [data-show-when-service="delivery"] {
	display: none;
}

/* Bloc d'adresse */
.eom-delivery-address {
	background: var(--col-bg-alt, #faf7f2);
	border: 1px solid var(--col-border, #e5e0d5);
	border-radius: 12px;
	padding: 1.25rem;
	margin-block: 1rem;
}
.eom-address-input-wrap {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: stretch;
}
/* v2.0.0-alpha3 — Colonne input (input + dropdown suggestions positionné dessous) */
.eom-address-input-col {
	flex: 1 1 220px;
	position: relative;
	min-width: 0;
}
.eom-address-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 2px solid var(--col-border, #e5e0d5);
	border-radius: 12px;
	background: #fff;
	color: var(--col-ink, #2a2a2a);
	font-size: .98rem;
	font-family: inherit;
}
.eom-address-input:focus {
	outline: none;
	border-color: var(--col-primary, #e76f51);
}

/* v2.0.0-alpha3 — Dropdown suggestions */
.eom-address-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--col-border, #e5e0d5);
	border-radius: 12px;
	box-shadow: 0 12px 32px -8px rgba(40,22,12,.15), 0 4px 12px -4px rgba(40,22,12,.08);
	max-height: 320px;
	overflow-y: auto;
	z-index: 100;
}
.eom-address-suggestions[hidden] {
	display: none;
}
.eom-suggest-list {
	list-style: none;
	margin: 0;
	padding: .25rem;
}
.eom-suggest-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .65rem .75rem;
	border-radius: 8px;
	cursor: pointer;
	font-size: .92rem;
	color: var(--col-ink, #2a2a2a);
	transition: background-color .12s ease;
}
.eom-suggest-item:hover,
.eom-suggest-item.is-active {
	background: var(--col-primary-soft, #fff3ec);
	color: var(--col-primary-dark, #c0541f);
}
.eom-suggest-icon {
	font-size: 1em;
	flex-shrink: 0;
}
.eom-suggest-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eom-address-check-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	min-height: 48px;
	background: var(--col-primary, #e76f51);
	color: #fff !important;
	border: none;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, transform .1s ease;
}
.eom-address-check-btn:hover {
	background: var(--col-primary-dark, #c0541f);
}
.eom-address-check-btn:active {
	transform: scale(0.97);
}
.eom-address-check-btn[disabled] {
	background: #bbb;
	cursor: wait;
}

.eom-address-status {
	margin: .75rem 0 0;
	font-size: .92rem;
	min-height: 1.4em;
	color: var(--col-ink-soft, #555);
}
.eom-address-status.is-loading {
	color: var(--col-ink-soft, #888);
}
.eom-address-status.is-error {
	color: #c0392b;
	font-weight: 500;
}
.eom-address-status.is-success {
	color: #2e7d32;
}

/* Zone summary (apparaît après vérification réussie) */
.eom-zone-summary {
	margin-top: 1rem;
}
.eom-zone-summary__inner {
	background: #fff;
	border: 2px solid var(--col-primary-soft, #fff3ec);
	border-radius: 12px;
	padding: 1rem 1.25rem;
}
.eom-zone-summary__addr {
	margin: 0 0 .75rem;
	font-size: .95rem;
	color: var(--col-ink, #2a2a2a);
}
.eom-zone-summary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .92rem;
	color: var(--col-ink-soft, #555);
}
.eom-zone-summary__list li {
	padding: 0;
}
.eom-zone-summary__list li strong {
	color: var(--col-ink, #2a2a2a);
}

/* Tablet : input + button côte à côte avec proportions sympas */
@media (min-width: 600px) {
	.eom-address-input { flex: 1 1 320px; }
}

.eom-asap-preview {
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--eom-primary);
	min-height: 1.5em;
	font-weight: 500;
}

.eom-asap-preview.is-error {
	color: #c0392b;
}

/* =====================================================================
   Bandeau bas de page (banner)
   ===================================================================== */
.eom-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--eom-banner-bg);
	color: var(--eom-banner-text);
	box-shadow: 0 -4px 16px rgba(0,0,0,.18);
	animation: eomBannerIn .3s ease-out;
}

.eom-banner.is-hidden { display: none; }

@keyframes eomBannerIn {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.eom-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	flex-wrap: wrap;
}

.eom-banner__text {
	flex: 1;
	min-width: 200px;
	font-size: 0.92rem;
	font-weight: 500;
}

.eom-banner__cta {
	display: inline-block;
	padding: 10px 20px;
	background: var(--eom-primary);
	color: #fff !important;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
	white-space: nowrap;
}

.eom-banner__cta:hover {
	background: var(--eom-primary-dark);
	color: #fff !important;
}

.eom-banner__close {
	background: transparent;
	border: none;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.7;
}

.eom-banner__close:hover { opacity: 1; }

/* =====================================================================
   Encart résumé (sticky) cart/checkout
   ===================================================================== */
.eom-summary-box {
	background: var(--eom-surface);
	border: 1px solid var(--eom-border);
	border-left: 4px solid var(--eom-primary);
	border-radius: var(--eom-radius);
	padding: 12px 16px;
	margin: 14px 0;
	font-size: 0.95rem;
}

.eom-summary-box__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.eom-summary-box__icon { font-size: 1.3em; }
.eom-summary-box__mode { font-weight: 600; }
.eom-summary-box__sep  { color: var(--eom-muted); }
.eom-summary-box__time { color: var(--eom-text); }

.eom-summary-box__edit {
	margin-left: auto;
	color: var(--eom-primary);
	text-decoration: underline;
	font-size: 0.9rem;
}

.eom-summary-box__edit:hover { color: var(--eom-primary-dark); }

/* v3.1.0 — Variante flottante (footer global, sur toutes les pages) */
.eom-summary-box--floating {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	margin: 0;
	z-index: 99998;
	max-width: 520px;
	margin-inline: auto;
	box-shadow: 0 6px 20px rgba(0,0,0,.15);
	background: var(--eom-bg);
	border-left-width: 4px;
	animation: eom-summary-slide-up .35s cubic-bezier(.2,.85,.3,1) both;
}
.eom-summary-box--floating .eom-summary-box__close {
	background: transparent;
	border: 0;
	color: var(--eom-text);
	font-size: 1.4rem;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	opacity: .55;
	margin-left: 4px;
}
.eom-summary-box--floating .eom-summary-box__close:hover { opacity: 1; }
.eom-summary-box--floating.is-hidden { display: none; }
@keyframes eom-summary-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
	.eom-summary-box--floating {
		left: 8px;
		right: 8px;
		bottom: 8px;
		font-size: .85rem;
		padding: 10px 12px;
	}
}

/* =====================================================================
   Notice livraison (progression vers gratuité + min non atteint)
   ===================================================================== */
.eom-progress {
	padding: 14px 18px;
	margin: 16px 0;
	border-radius: var(--eom-radius);
	background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
	border-left: 4px solid var(--eom-primary);
	color: #4a2c1a;
	font-size: 0.95rem;
	line-height: 1.5;
}

.eom-progress--success {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	border-left-color: var(--eom-success);
	color: #1b5e20;
}

.eom-progress__text {
	margin-bottom: 8px;
}

.eom-progress__bar {
	height: 8px;
	background: rgba(255,255,255,0.6);
	border-radius: 8px;
	overflow: hidden;
}

.eom-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--eom-primary), #f4a261);
	border-radius: 8px;
	transition: width .4s ease;
}

/* Bloc minimum non atteint avec boutons (utilisé dans la notice WC) */
.eom-min-block {
	display: block;
	line-height: 1.55;
}

.eom-min-block strong {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 1.02em;
}

.eom-min-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

/* WC notice : on style nos boutons custom */
.woocommerce-error a.eom-btn-add,
.woocommerce-error a.eom-btn-pay,
.eom-min-buttons a.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 18px !important;
	margin: 0 !important;
	text-decoration: none !important;
	border-radius: var(--eom-button-radius) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	min-height: 46px;
}

.eom-btn-add {
	background: #fff !important;
	color: var(--eom-text) !important;
	border: 2px solid var(--eom-border) !important;
}

.eom-btn-add:hover {
	border-color: var(--eom-primary) !important;
}

.eom-btn-pay {
	background: var(--eom-primary) !important;
	color: #fff !important;
	border: 2px solid var(--eom-primary) !important;
}

.eom-btn-pay:hover {
	background: var(--eom-primary-dark) !important;
	border-color: var(--eom-primary-dark) !important;
}

/* =====================================================================
   TABLET et + (≥ 600px)
   ===================================================================== */
@media (min-width: 600px) {
	.eom-checkout-box {
		padding: 22px;
	}

	.eom-order-page__title {
		font-size: 1.6rem;
	}

	.eom-toggles {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 10px;
	}

	.eom-slots {
		grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	}

	.eom-actions__buttons {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.eom-submit {
		width: auto;
		min-width: 240px;
	}

	.eom-min-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* =====================================================================
   Mobile très petit (< 380px) — ajustements minimes
   ===================================================================== */
@media (max-width: 380px) {
	.eom-checkout-box {
		padding: 14px;
		margin: 12px 0;
	}

	.eom-card {
		padding: 1.25rem;
	}

	.eom-order-page__title { font-size: 1.25rem; }

	.eom-banner__inner { padding: 10px 12px; }
	.eom-banner__text  { font-size: 0.85rem; min-width: 100%; order: 1; }
	.eom-banner__cta   { font-size: 0.88rem; padding: 8px 14px; order: 2; }
	.eom-banner__close { order: 0; margin-left: auto; }

	.eom-summary-box__edit {
		margin-left: 0;
		width: 100%;
		text-align: right;
	}
}

/* =================================================================
   v2.0.0-beta3 — Service switcher (toggle in-place panier/checkout)
   v2.0.0-beta4 — Harmonisation CSS vars avec double fallback (--col-X, --eom-X)
   ================================================================= */
/* v3.2.5 — Service switcher UNIFIED : 1 seule boîte avec mode + créneau + Modifier
   + autres modes en switch. Plus de doublon avec la summary-box. */
.eom-service-switcher {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin: 0 0 1.25rem;
	padding: .85rem 1.1rem;
	background: var(--col-surface, var(--eom-surface));
	border: 1px solid var(--col-border, var(--eom-border));
	border-left: 3px solid var(--col-primary, var(--eom-primary, #e76f51));
	border-radius: 12px;
	font-size: .95rem;
}

/* Ligne 1 : mode actif + créneau + bouton Modifier à droite */
.eom-service-switcher__current {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
}
.eom-service-switcher__icon {
	font-size: 1.2rem;
	line-height: 1;
}
.eom-service-switcher__mode-label {
	font-weight: 700;
	color: var(--col-ink, var(--eom-text));
}
.eom-service-switcher__sep {
	color: var(--col-muted, var(--eom-text-muted, #999));
	margin: 0 .15rem;
}
.eom-service-switcher__slot {
	color: var(--col-ink, var(--eom-text));
	flex: 1;
	min-width: 0;
}
.eom-service-switcher__modify {
	margin-left: auto;
	color: var(--col-primary-dark, var(--eom-primary-dark, #c0541f));
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: .88rem;
	white-space: nowrap;
}
.eom-service-switcher__modify:hover {
	color: var(--col-primary, var(--eom-primary));
}

/* Ligne 2 : autres modes (switch rapide) */
.eom-service-switcher__alt {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	padding-top: .6rem;
	border-top: 1px dashed var(--col-border, var(--eom-border));
}
.eom-service-switcher__alt-label {
	font-size: .85rem;
	color: var(--col-muted, var(--eom-text-muted, #777));
	font-weight: 500;
}
.eom-service-switcher__btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .4rem .85rem;
	background: #fff;
	border: 1.5px solid var(--col-border, var(--eom-border));
	border-radius: 999px;
	color: var(--col-ink, var(--eom-text));
	text-decoration: none;
	font-weight: 500;
	font-size: .85rem;
	cursor: pointer;
	transition: all .15s ease;
}
.eom-service-switcher__btn:hover {
	border-color: var(--col-primary, var(--eom-primary));
	color: var(--col-primary-dark, var(--eom-primary-dark));
	transform: translateY(-1px);
}
.eom-service-switcher__btn.is-loading {
	opacity: .6;
	cursor: wait;
}

/* Bouton "Passer en À emporter" dans le bandeau min commande */
.eom-min-buttons .eom-btn-switch-pickup {
	background: #fff;
	border: 2px solid var(--col-primary, var(--eom-primary));
	color: var(--col-primary-dark, var(--eom-primary-dark));
	font-weight: 600;
	transition: all .15s ease;
}
.eom-min-buttons .eom-btn-switch-pickup:hover {
	background: var(--col-primary, var(--eom-primary));
	color: #fff;
}

@media (max-width: 600px) {
	.eom-service-switcher {
		font-size: .9rem;
	}
	.eom-service-switcher__current {
		gap: .35rem;
	}
	.eom-service-switcher__modify {
		margin-left: 0;
		margin-top: .15rem;
		width: 100%;
		text-align: right;
	}
	.eom-service-switcher__alt {
		justify-content: center;
	}
	.eom-service-switcher__alt-label {
		flex-basis: 100%;
		text-align: center;
	}
}

/* =====================================================================
   v3.0.0 — WIZARD 3 ÉTAPES (refonte page commande)
   Pattern Uber Eats / Deliveroo : une décision à la fois.
   Punchy + animé, vibe pizzeria moderne.
   ===================================================================== */

:root {
	/* Palette pizzeria : feu de four → terracotta → ocre → basilic */
	--eom-fire-1: #ff5722;        /* tomate ardente */
	--eom-fire-2: #f4511e;        /* terracotta intense */
	--eom-fire-3: #ff8a3d;        /* ocre four à bois */
	--eom-fire-4: #ffb74d;        /* doré */
	--eom-basil:  #6B7E3A;        /* basilic frais */
	--eom-cream:  #fff8f0;        /* pâte fraîche */
	--eom-charcoal: #1a0f0a;      /* charbon de bois */

	--eom-shadow-sm:  0 2px 8px rgba(40,22,12,.08);
	--eom-shadow-md:  0 8px 24px rgba(40,22,12,.12);
	--eom-shadow-lg:  0 24px 60px -12px rgba(244,81,30,.35), 0 8px 24px -4px rgba(40,22,12,.18);
	--eom-shadow-card: 0 12px 32px -8px rgba(244,81,30,.18), 0 4px 12px -2px rgba(40,22,12,.08);

	--eom-easing: cubic-bezier(.2,.85,.3,1);
	--eom-easing-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* --- Particules flottantes hero --- */
.eom-hero__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.eom-particle {
	position: absolute;
	left: var(--p-x);
	top:  var(--p-y);
	color: rgba(255,250,242,.55);
	font-size: clamp(.75rem, .8vw + .5rem, 1.25rem);
	animation: eom-float var(--p-r, 8s) ease-in-out var(--p-d, 0s) infinite;
	will-change: transform, opacity;
}
@keyframes eom-float {
	0%,100% { transform: translate(0,0) rotate(0deg); opacity: .35; }
	33%     { transform: translate(8px,-14px) rotate(120deg); opacity: .85; }
	66%     { transform: translate(-6px,-22px) rotate(240deg); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
	.eom-particle { animation: none; opacity: .4; }
}

/* --- Stepper visuel --- */
.eom-stepper {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.eom-stepper__list {
	display: flex;
	align-items: center;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}
.eom-stepper__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-heading, sans-serif);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--col-muted, var(--eom-muted));
	position: relative;
	min-width: 0;
}
.eom-stepper__item:not(:last-child)::after {
	content: '';
	flex: 1;
	height: 2px;
	margin-inline-start: .35rem;
	background: linear-gradient(90deg, var(--col-border, var(--eom-border)) 0%, var(--col-border, var(--eom-border)) 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position .5s var(--eom-easing);
	border-radius: 2px;
}
.eom-stepper__num {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--col-bg-alt, #faf7f2);
	border: 2px solid var(--col-border, var(--eom-border));
	font-size: .82rem;
	font-weight: 700;
	transition: all .3s var(--eom-easing);
}
.eom-stepper__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .3s var(--eom-easing);
}
.eom-wizard[data-step="1"] .eom-stepper__item[data-step-target="1"] .eom-stepper__num,
.eom-wizard[data-step="2"] .eom-stepper__item[data-step-target="2"] .eom-stepper__num,
.eom-wizard[data-step="3"] .eom-stepper__item[data-step-target="3"] .eom-stepper__num {
	background: linear-gradient(135deg, var(--eom-fire-2), var(--eom-fire-3));
	border-color: var(--eom-fire-2);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(244,81,30,.15), 0 4px 12px rgba(244,81,30,.35);
	transform: scale(1.08);
}
.eom-wizard[data-step="1"] .eom-stepper__item[data-step-target="1"] .eom-stepper__label,
.eom-wizard[data-step="2"] .eom-stepper__item[data-step-target="2"] .eom-stepper__label,
.eom-wizard[data-step="3"] .eom-stepper__item[data-step-target="3"] .eom-stepper__label {
	color: var(--col-ink, var(--eom-text));
}
.eom-wizard[data-step="2"] .eom-stepper__item[data-step-target="1"] .eom-stepper__num,
.eom-wizard[data-step="3"] .eom-stepper__item[data-step-target="1"] .eom-stepper__num,
.eom-wizard[data-step="3"] .eom-stepper__item[data-step-target="2"] .eom-stepper__num {
	background: var(--eom-basil);
	border-color: var(--eom-basil);
	color: #fff;
}
.eom-wizard[data-step="2"] .eom-stepper__item[data-step-target="1"]::after,
.eom-wizard[data-step="3"] .eom-stepper__item[data-step-target="1"]::after,
.eom-wizard[data-step="3"] .eom-stepper__item[data-step-target="2"]::after {
	background: linear-gradient(90deg, var(--eom-basil) 0%, var(--col-border, var(--eom-border)) 100%);
	background-position: 0 0;
}
.eom-wizard:not([data-service="delivery"]) .eom-stepper__item[data-only-for="delivery"] {
	display: none;
}
.eom-wizard:not([data-service="delivery"]) .eom-stepper__item[data-step-target="1"]::after {
	display: none;
}

/* --- Steps : visibilité contrôlée par data-step --- */
.eom-step {
	display: none;
	animation: eom-step-in .45s var(--eom-easing) both;
}
.eom-wizard[data-step="1"] .eom-step--service,
.eom-wizard[data-step="2"] .eom-step--address,
.eom-wizard[data-step="3"] .eom-step--time {
	display: block;
}
@keyframes eom-step-in {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}
.eom-wizard[data-step-direction="back"] .eom-step {
	animation-name: eom-step-in-back;
}
@keyframes eom-step-in-back {
	from { opacity: 0; transform: translateX(-24px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.eom-step,
	.eom-wizard[data-step-direction="back"] .eom-step {
		animation: none;
	}
}

.eom-step__title {
	font-family: var(--font-display, var(--font-heading, Georgia, serif));
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 .35rem;
	color: var(--col-ink, var(--eom-text));
}
.eom-step__title:focus { outline: none; }
.eom-step__title:focus-visible {
	outline: 2px solid var(--eom-fire-3);
	outline-offset: 4px;
	border-radius: 4px;
}
.eom-step__hint {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--col-muted, var(--eom-muted));
	font-size: .95rem;
	line-height: 1.5;
}

/* Bouton retour discret (haut de step) */
.eom-step__back {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: transparent;
	border: 0;
	padding: .35rem .65rem .35rem .35rem;
	margin: 0 0 .85rem -.35rem;
	color: var(--col-muted, var(--eom-muted));
	font-size: .85rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	border-radius: 8px;
	transition: all .18s ease;
}
.eom-step__back:hover {
	background: var(--col-bg-alt, #faf7f2);
	color: var(--col-ink, var(--eom-text));
	transform: translateX(-2px);
}
.eom-step__back svg { transition: transform .18s ease; }
.eom-step__back:hover svg { transform: translateX(-2px); }

/* --- ÉTAPE 1 : Cartes mode (LE choix) --- */
.eom-mode-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(.85rem, 1.5vw, 1.15rem);
	margin-top: .5rem;
}
@media (min-width: 560px) {
	.eom-mode-cards {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

.eom-mode-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(.85rem, 1.8vw, 1.25rem);
	padding: clamp(1.1rem, 2.2vw, 1.5rem);
	background: linear-gradient(135deg, #fff 0%, var(--eom-cream) 100%);
	border: 2px solid var(--col-border, var(--eom-border));
	border-radius: 18px;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--eom-shadow-sm);
	transition:
		transform .35s var(--eom-easing),
		box-shadow .35s var(--eom-easing),
		border-color .25s var(--eom-easing),
		background .35s var(--eom-easing);
	user-select: none;
	min-height: 88px;
	animation: eom-card-pop .55s var(--eom-easing-bounce) both;
}
.eom-mode-card:nth-child(1) { animation-delay: .05s; }
.eom-mode-card:nth-child(2) { animation-delay: .15s; }
.eom-mode-card:nth-child(3) { animation-delay: .25s; }
@keyframes eom-card-pop {
	0%   { opacity: 0; transform: translateY(20px) scale(.96); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.eom-mode-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.eom-mode-card__glow {
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 50%, rgba(244,81,30,.18) 0%, transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
}

.eom-mode-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--eom-shadow-md);
	border-color: var(--eom-fire-3);
}
.eom-mode-card:hover .eom-mode-card__glow { opacity: 1; }
.eom-mode-card:hover .eom-mode-card__arrow {
	transform: translateX(6px);
	color: var(--eom-fire-2);
}

.eom-mode-card:has(input:focus-visible) {
	outline: 3px solid var(--eom-fire-3);
	outline-offset: 3px;
}

.eom-mode-card.is-active {
	background: linear-gradient(135deg, var(--eom-fire-2) 0%, var(--eom-fire-3) 50%, var(--eom-fire-4) 100%);
	border-color: var(--eom-fire-2);
	color: #fff;
	box-shadow: var(--eom-shadow-lg);
	transform: translateY(-2px);
}
.eom-mode-card.is-active .eom-mode-card__icon { color: #fff; }
.eom-mode-card.is-active .eom-mode-card__tagline { color: rgba(255,255,255,.85); }
.eom-mode-card.is-active .eom-mode-card__arrow { color: #fff; transform: translateX(4px); }
.eom-mode-card.is-active::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0);
	background-size: 16px 16px;
	opacity: .4;
	z-index: -1;
	border-radius: inherit;
}

.eom-mode-card__icon {
	width: clamp(54px, 8vw, 68px);
	height: clamp(54px, 8vw, 68px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--eom-fire-2);
	transition: color .3s var(--eom-easing), transform .4s var(--eom-easing-bounce);
	flex-shrink: 0;
}
.eom-mode-card__icon svg {
	width: 100%;
	height: 100%;
}
.eom-mode-card:hover .eom-mode-card__icon {
	transform: rotate(-6deg) scale(1.08);
}
.eom-mode-card.is-active .eom-mode-card__icon {
	transform: rotate(-3deg) scale(1.05);
	animation: eom-icon-bounce .55s var(--eom-easing-bounce);
}
@keyframes eom-icon-bounce {
	0%   { transform: rotate(0) scale(1); }
	50%  { transform: rotate(-8deg) scale(1.15); }
	100% { transform: rotate(-3deg) scale(1.05); }
}

.eom-mode-card__body {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
	text-align: left;
}
.eom-mode-card__label {
	font-family: var(--font-display, var(--font-heading, Georgia, serif));
	font-size: clamp(1.15rem, 1.05rem + .35vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
}
.eom-mode-card__tagline {
	font-size: .82rem;
	color: var(--col-muted, var(--eom-muted));
	font-weight: 500;
	line-height: 1.3;
}

.eom-mode-card__arrow {
	color: var(--col-muted, var(--eom-muted));
	transition: transform .25s var(--eom-easing), color .25s var(--eom-easing);
	flex-shrink: 0;
	display: inline-flex;
}

/* --- ÉTAPE 2 : Adresse --- */
.eom-step--address .eom-delivery-address {
	margin-block: .5rem 1.25rem;
}
.eom-address-input-col {
	position: relative;
}
.eom-address-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--eom-fire-2);
	pointer-events: none;
	z-index: 2;
}
.eom-step--address .eom-address-input {
	padding-left: 44px;
}
.eom-address-check-btn {
	background: linear-gradient(135deg, var(--eom-fire-2), var(--eom-fire-3));
	border: 0;
	color: #fff;
	font-weight: 600;
	padding: 0 1.25rem;
	min-height: 48px;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: .95rem;
	letter-spacing: .01em;
	box-shadow: 0 4px 12px rgba(244,81,30,.3);
	transition: all .2s var(--eom-easing);
	white-space: nowrap;
}
.eom-address-check-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(244,81,30,.45);
}
.eom-address-check-btn:disabled {
	opacity: .55;
	cursor: wait;
}

/* --- ÉTAPE 3 : Cartes "Quand" --- */
.eom-time-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: .85rem;
	margin: .5rem 0 1.25rem;
}
@media (min-width: 480px) {
	.eom-time-cards { grid-template-columns: 1fr 1fr; }
}

.eom-time-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: 1.15rem 1rem;
	background: var(--col-surface, var(--eom-surface));
	border: 2px solid var(--col-border, var(--eom-border));
	border-radius: 16px;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform .25s var(--eom-easing),
		border-color .25s var(--eom-easing),
		background .25s var(--eom-easing),
		box-shadow .25s var(--eom-easing);
	text-align: center;
	user-select: none;
}
.eom-time-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.eom-time-card__glow {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 0%, rgba(244,81,30,.15) 0%, transparent 70%);
	opacity: 0;
	transition: opacity .25s ease;
}
.eom-time-card:hover {
	transform: translateY(-2px);
	border-color: var(--eom-fire-3);
	box-shadow: 0 6px 18px rgba(244,81,30,.15);
}
.eom-time-card:hover .eom-time-card__glow { opacity: 1; }
.eom-time-card:has(input:focus-visible) {
	outline: 3px solid var(--eom-fire-3);
	outline-offset: 3px;
}
.eom-time-card.is-active {
	background: linear-gradient(135deg, var(--eom-fire-2) 0%, var(--eom-fire-3) 100%);
	border-color: var(--eom-fire-2);
	color: #fff;
	box-shadow: 0 8px 24px rgba(244,81,30,.35);
}
.eom-time-card.is-active .eom-time-card__sub { color: rgba(255,255,255,.9); }
.eom-time-card__icon {
	color: var(--eom-fire-2);
	transition: color .25s var(--eom-easing), transform .35s var(--eom-easing-bounce);
}
.eom-time-card.is-active .eom-time-card__icon {
	color: #fff;
	transform: scale(1.08);
}
.eom-time-card__label {
	font-family: var(--font-display, var(--font-heading, Georgia, serif));
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.1;
}
.eom-time-card__sub {
	font-size: .82rem;
	color: var(--col-muted, var(--eom-muted));
	min-height: 1.2em;
	font-weight: 500;
}
.eom-time-card__sub.is-error {
	color: #c0392b;
}

.eom-step .eom-toggles { display: none; }

/* --- Boutons step actions --- */
.eom-step__actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: clamp(1rem, 2vw, 1.5rem);
	justify-content: flex-end;
}
.eom-step__actions .eom-btn--ghost {
	margin-right: auto;
}

.eom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.5rem;
	min-height: 48px;
	border-radius: 12px;
	border: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: .98rem;
	font-weight: 600;
	letter-spacing: .005em;
	transition: all .2s var(--eom-easing);
	text-decoration: none;
}
.eom-btn--primary {
	background: linear-gradient(135deg, var(--eom-fire-2), var(--eom-fire-3));
	color: #fff;
	box-shadow: 0 6px 18px rgba(244,81,30,.32);
	border-color: transparent;
}
.eom-btn--primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(244,81,30,.45);
}
.eom-btn--primary:active:not(:disabled) {
	transform: translateY(0);
}
.eom-btn--primary:disabled {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}
.eom-btn--ghost {
	background: transparent;
	color: var(--col-muted, var(--eom-muted));
	border-color: var(--col-border, var(--eom-border));
}
.eom-btn--ghost:hover {
	background: var(--col-bg-alt, #faf7f2);
	color: var(--col-ink, var(--eom-text));
	border-color: var(--col-border-strong, #cdbfa2);
}

/* v3.0.0 — Skip discret sous les cartes step 1 (et step 3 fallback) */
.eom-skip,
.eom-skip--discrete {
	display: block;
	margin: 1.25rem auto 0;
	background: transparent;
	border: 0;
	color: var(--col-muted, var(--eom-muted));
	padding: .55rem 1rem;
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: .01em;
	border-radius: 8px;
	opacity: .65;
	transition: opacity .18s ease, color .18s ease, background .18s ease;
}
.eom-skip:hover,
.eom-skip--discrete:hover {
	opacity: 1;
	color: var(--col-ink, var(--eom-text));
	text-decoration: underline;
	text-underline-offset: 3px;
	background: transparent;
}

/* Message d'erreur step 3 */
.eom-step--time .eom-message {
	margin: 1rem 0 0;
	min-height: 1.2em;
	color: #c0392b;
	font-size: .92rem;
	font-weight: 500;
}
.eom-step--time .eom-message.is-success {
	color: var(--eom-basil);
}

/* Helper sr-only */
.eom-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
	.eom-stepper__label { display: none; }
	.eom-stepper__item { flex: 0 0 auto; }
	.eom-stepper__item:not(:last-child)::after { min-width: 24px; }
	.eom-mode-card {
		grid-template-columns: auto 1fr auto;
		gap: .85rem;
		padding: 1rem;
	}
	.eom-step__actions { flex-direction: column-reverse; }
	.eom-step__actions .eom-btn { width: 100%; }
	.eom-step__actions .eom-btn--ghost { margin-right: 0; }
}

/* =====================================================================
   v3.2.0 — Upsell : groupes de produits avant validation
   ===================================================================== */

.eom-upsell-wrap {
	margin: 18px 0 22px;
}

.eom-upsell-group {
	margin-bottom: 22px;
	background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
	border: 1px solid var(--eom-border, #e5e0d5);
	border-radius: var(--eom-radius, 14px);
	padding: 16px 18px;
	box-shadow: var(--eom-shadow-sm, 0 2px 8px rgba(40,22,12,.08));
}

.eom-upsell-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--eom-text, #2a2a2a);
}

.eom-upsell-group__emoji {
	font-size: 1.5em;
	line-height: 1;
}

.eom-upsell-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

/* v3.2.2 — Resets défensifs pour résister aux styles agressifs des thèmes
   (Astra, Divi, Storefront, GeneratePress posent souvent des styles globaux
   sur button/input qui peuvent casser le rendu). */
.eom-upsell-card,
button.eom-upsell-card {
	display: flex;
	flex-direction: column;
	background: var(--eom-bg, #fff);
	border: 2px solid var(--eom-border, #e5e0d5);
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
	box-shadow: none;
	margin: 0;
	width: 100%;
	transition: transform .25s var(--eom-easing, ease), border-color .25s, box-shadow .25s;
	position: relative;
}

.eom-upsell-card:hover,
.eom-upsell-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--eom-fire-2, var(--eom-primary, #e76f51));
	box-shadow: 0 10px 24px -8px rgba(244, 81, 30, .25);
	outline: none;
	background: var(--eom-bg, #fff);
}

.eom-upsell-card:active {
	transform: translateY(0);
}

.eom-upsell-card.is-loading {
	opacity: .6;
	pointer-events: none;
}

.eom-upsell-card.is-added {
	border-color: var(--eom-success, #2e7d32);
	background: #f1f8e9;
}

.eom-upsell-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f5f5f5;
}

.eom-upsell-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.eom-upsell-card:hover .eom-upsell-card__image img {
	transform: scale(1.05);
}

.eom-upsell-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
	flex: 1;
}

.eom-upsell-card__name {
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.3;
	color: var(--eom-text, #2a2a2a);
}

.eom-upsell-card__desc {
	font-size: .82rem;
	color: var(--eom-text-muted, #777);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eom-upsell-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 6px;
	gap: 8px;
}

.eom-upsell-card__price {
	font-weight: 700;
	color: var(--eom-fire-2, var(--eom-primary, #e76f51));
	font-size: 1rem;
}

.eom-upsell-card__price ins,
.eom-upsell-card__price del {
	text-decoration: none;
	background: transparent;
}

.eom-upsell-card__price del {
	color: var(--eom-text-muted, #999);
	font-weight: 400;
	font-size: .85em;
	margin-right: 4px;
}

.eom-upsell-card__add {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, var(--eom-fire-2, var(--eom-primary, #e76f51)), var(--eom-fire-3, var(--eom-primary-dark, #c0541f)));
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	transition: filter .2s;
}

.eom-upsell-card:hover .eom-upsell-card__add {
	filter: brightness(1.08);
}

.eom-upsell-card.is-added .eom-upsell-card__add {
	background: var(--eom-success, #2e7d32);
}

/* Toast confirmation */
.eom-upsell-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1a0f0a;
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	box-shadow: 0 8px 30px rgba(0,0,0,.25);
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s, transform .25s;
}

.eom-upsell-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.eom-upsell-toast--error {
	background: #b32d2e;
}

@media (max-width: 600px) {
	.eom-upsell-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.eom-upsell-card__body { padding: 10px 12px; }
	.eom-upsell-card__name { font-size: .9rem; }
	.eom-upsell-card__desc { display: none; }
}

/* =====================================================================
   v3.2.8 — Compat bandeau cookies fixed-bottom
   ===================================================================== */
/* Le thème Eatalia (et beaucoup d'autres) ont un bandeau cookies en
   position:fixed bottom qui peut cacher le bouton "Continuer" du wizard.
   On ajoute un padding-bottom adaptatif sur la page commande pour que
   le contenu soit toujours scrollable au-dessus du bandeau.

   ~280px couvre la hauteur typique d'un bandeau cookies (3 boutons sur 2 lignes).
   Quand le bandeau est masqué (cookie déjà accepté), le padding reste mais c'est
   imperceptible (juste de l'espace en bas). */

#eom-order-page {
	padding-bottom: 280px;
}

@media (min-width: 768px) {
	#eom-order-page {
		padding-bottom: 200px;
	}
}

/* Si le bandeau a été fermé, on retire le padding (détecté via le cookie thème
   qui retire le bandeau du DOM, on cible alors body sans .eap-cookies-banner).
   On utilise :has() qui est supporté sur tous les navigateurs récents (~95%). */
body:not(:has(.eap-cookies-banner[data-visible="true"])) #eom-order-page {
	padding-bottom: 40px;
}

/* Sur cart/checkout : pareil, le bouton "Commander" doit être accessible. */
body:has(.eap-cookies-banner[data-visible="true"]) .woocommerce-cart-form,
body:has(.eap-cookies-banner[data-visible="true"]) .woocommerce-checkout {
	padding-bottom: 280px;
}