/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   Lot 3I — Refonte du parcours de commande (visuel et ergonomie UNIQUEMENT : aucune logique metier).
   Charge en DERNIER sur /r/<slug> (menu), /r/<slug>/commande et la confirmation. Aucune police, image ni bibliotheque externe.
   Couleurs 100 % dynamiques (--primary-color du restaurant) : jamais une couleur de marque figee.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --oe-ink: #14171f;
  --oe-muted: #566070;
  --oe-line: rgba(15, 23, 42, .10);
  --oe-line-strong: rgba(15, 23, 42, .20);
  --oe-surface: #ffffff;
  --oe-radius: 16px;
  --oe-radius-sm: 12px;
  --oe-focus: var(--primary-color, #0ea5e9);
  --oe-danger: #b42318;
  --oe-danger-bg: #fef3f2;
  --oe-ok: #15803d;
  --oe-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─────────────── 1. CARTES DES PLATS : forme STABLE, survol tres discret, jamais d'ovale ───────────────
   Cause du « bas de carte ovale » : au survol la carte recevait un transform (translateY) ET l'image interne un scale, sous
   overflow:hidden + border-radius + ombre large : Chromium rasterise alors le clip de facon deformee (ellipse claire). On
   supprime les transforms au survol (carte ET image) et on isole la carte (isolation) : le survol ne change que bordure
   et ombre legere. Aucun pseudo-element, aucun masque, aucun changement de rayon, de taille ou de voisinage. */
.dish-card,
.elyria-product-card,
[data-category-section] .dish-card,
.menu-app .dish-card {
  isolation: isolate !important;
  transform: none !important;
  transition: box-shadow .16s ease, border-color .16s ease !important;
  will-change: auto !important;
}
[data-category-section],
.menu-app [data-category-section] { overflow: visible !important; }
.dish-card .media,
[data-category-section] .dish-card .media { overflow: hidden !important; }
.dish-card .media img,
[data-category-section] .dish-card .media img { transform: none !important; transition: none !important; filter: none !important; }

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover,
  [data-category-section] .dish-card:hover,
  .menu-app .dish-card:hover,
  .elyria-product-card:hover {
    transform: none !important;
    border-color: var(--oe-line-strong) !important;
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .30) !important;
  }
  .menu-app .dish-card:hover { background-image: none !important; background-color: var(--theme-inner-bg, #fff) !important; }
  .dish-card:hover .media img,
  [data-category-section] .dish-card:hover .media img { transform: none !important; filter: none !important; }
  .dish-card:hover .dish-add-btn,
  [data-category-section] .dish-card:hover .dish-side .dish-add-btn { filter: none !important; transform: none !important; }
  .dish-card .dish-add-btn:hover,
  [data-category-section] .dish-card .dish-side .dish-add-btn:hover { filter: brightness(1.06) !important; }
}
/* Ecrans tactiles : aucun etat :hover conserve apres un appui (pas de survol « bloque »). */
@media (hover: none), (pointer: coarse) {
  .dish-card,
  [data-category-section] .dish-card,
  .menu-app .dish-card,
  .elyria-product-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; border-color: var(--oe-line) !important; }
  .dish-card:hover,
  [data-category-section] .dish-card:hover,
  .menu-app .dish-card:hover,
  .elyria-product-card:hover {
    transform: none !important;
    border-color: var(--oe-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
  }
  .dish-card:hover .media img,
  [data-category-section] .dish-card:hover .media img { transform: none !important; filter: none !important; }
}
/* Focus clavier aussi clair que le survol, sans deformation. */
.dish-card:has(:focus-visible),
.elyria-product-card:has(:focus-visible) {
  outline: 2px solid var(--oe-focus) !important;
  outline-offset: 2px !important;
  border-color: var(--oe-line-strong) !important;
}
.elyria-product-card__open:focus-visible { outline: none !important; }
.dish-add-btn:focus-visible { outline: 2px solid var(--oe-ink) !important; outline-offset: 2px !important; }

/* CAUSE REELLE du « bas de carte ovale » : le bouton d'ouverture .elyria-product-card__open est etire sur TOUTE la carte ;
   au survol, une regle generique de bouton (fond, rayon en pilule, ombre) s'applique a ce bouton geant, ce qui dessine
   une ellipse claire sur la carte. On fige TOUS ses etats : fond transparent, rayon herite, aucune ombre ni filtre. */
.elyria-product-card__open,
.elyria-product-card__open:hover,
.elyria-product-card__open:active,
.elyria-product-card__open:focus,
.elyria-product-card__open:focus-visible,
.dish-card > button[data-dish-open],
.dish-card > button[data-dish-open]:hover,
.dish-card > button[data-dish-open]:active {
  background: transparent !important; background-image: none !important; border: 0 !important; border-radius: inherit !important;
  box-shadow: none !important; filter: none !important; transform: none !important; opacity: 1 !important;
  -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent;
}
/* Cartes coherentes : ratio d'image constant, hauteur stable, texte proprement limite (le nom complet reste dans
   l'aria-label du bouton d'ouverture et dans la fiche). */
.dish-card .media { aspect-ratio: 4 / 3 !important; }
.dish-card .dish-name {
  display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
  overflow: hidden !important; line-height: 1.25 !important; overflow-wrap: anywhere;
}
.dish-card .dish-desc {
  display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
  overflow: hidden !important; color: var(--oe-muted) !important; line-height: 1.4 !important;
}
.dish-card .price-pill { font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--oe-ink) !important; }
.dish-card .dish-rating-pill { font-weight: 600 !important; opacity: .85; }
.dish-card .dish-add-btn { min-height: 44px !important; min-width: 44px !important; }
/* Badges : un seul niveau d'importance visuelle (discrets), pas de ruban qui masque la photo. */
.dish-card .dish-emoji-badge {
  font-size: .68rem !important; letter-spacing: .01em !important; padding: 4px 9px !important;
  background: rgba(255, 255, 255, .94) !important; color: #1f2937 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .18) !important;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dish-card .home-badge { font-size: .66rem !important; font-weight: 700 !important; }
.dish-card[data-unavailable], .dish-card.is-unavailable { opacity: .6; }
.dish-card[data-unavailable] .dish-add-btn, .dish-card.is-unavailable .dish-add-btn { pointer-events: none; filter: grayscale(1); }

/* ─────────────── 2. EN-TETE et PROGRESSION (compacte, lisible sans la couleur) ─────────────── */
.cmd-greeting { padding-top: 6px !important; padding-bottom: 6px !important; gap: 10px !important; }
.cmd-greeting__avatar { width: 34px !important; height: 34px !important; font-size: .9rem !important; }
.cmd-greeting__name { font-size: .95rem !important; font-weight: 800 !important; color: var(--oe-ink) !important; }
.cmd-greeting__sub { font-size: .76rem !important; color: var(--oe-muted) !important; }
.cmd-greeting__secure { font-size: .7rem !important; font-weight: 700 !important; color: var(--oe-muted) !important; }
.cmd-topbar__back { min-height: 44px !important; display: inline-flex !important; align-items: center !important; font-weight: 700 !important; }
.cmd-topbar__account { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }

.cmd-stepper-wrap { padding: 10px 12px 10px !important; margin-bottom: 14px !important; border-radius: var(--oe-radius) !important; }
.cmd-stepper-wrap::before { display: none !important; }
.cmd-stepper { align-items: center !important; gap: 4px; }
.cmd-step { flex-direction: row !important; gap: 7px !important; justify-content: center; min-width: 0; padding: 6px 4px; border-radius: 10px; }
.cmd-step::after { display: none !important; }
.cmd-step__node {
  width: 26px !important; height: 26px !important; flex: 0 0 auto; border: 2px solid var(--oe-line-strong) !important;
  background: #fff !important; color: var(--oe-muted) !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
}
.cmd-step__label { font-size: .78rem !important; font-weight: 700 !important; color: var(--oe-muted) !important; opacity: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1 !important; }
/* Etape ACTIVE : disque plein + libelle fort + soulignement (lisible sans la couleur). */
.cmd-step--active { box-shadow: inset 0 -3px 0 var(--primary-color, #0ea5e9); }
.cmd-step--active .cmd-step__node { background: var(--primary-color, #0ea5e9) !important; border-color: var(--primary-color, #0ea5e9) !important; color: #fff !important; }
.cmd-step--active .cmd-step__label { color: var(--oe-ink) !important; font-weight: 800 !important; }
/* Etape TERMINEE : coche visible a la place de l'icone + libelle barre d'une coche textuelle pour les lecteurs d'ecran. */
.cmd-step--done .cmd-step__node { background: var(--oe-ok) !important; border-color: var(--oe-ok) !important; color: #fff !important; }
.cmd-step--done .cmd-step__node svg { display: none !important; }
.cmd-step--done .cmd-step__node::before { content: "✓"; font-size: 14px; font-weight: 900; line-height: 1; }
.cmd-step--done .cmd-step__label { color: var(--oe-ok) !important; }
/* Etape A VENIR : contour en pointille + libelle attenue mais >= contraste AA. */
.cmd-step:not(.cmd-step--active):not(.cmd-step--done) .cmd-step__node { border-style: dashed !important; }
@media (max-width: 480px) {
  .cmd-step { flex-direction: column !important; gap: 3px !important; padding: 4px 2px; }
  .cmd-step__label { font-size: .7rem !important; }
  .cmd-stepper-wrap { padding: 6px 8px !important; }
}

/* ─────────────── 3. CHOIX DU MODE ─────────────── */
.cmd-mode-kicker { font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .06em !important; color: var(--oe-muted) !important; margin-bottom: 8px !important; }
.cmd-mode-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 10px !important; }
.cmd-mode-card {
  position: relative; display: flex !important; align-items: center !important; gap: 12px !important; min-height: 72px !important;
  padding: 12px 14px !important; border-radius: var(--oe-radius) !important; background: var(--oe-surface) !important;
  border: 1.5px solid var(--oe-line) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important; transform: none !important;
}
.cmd-mode-card { flex-direction: row !important; text-align: start !important; justify-content: flex-start !important; }
.cmd-mode-card .cmd-mode-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; text-align: start; }
.cmd-mode-card .cmd-mode-check { position: absolute !important; top: 10px !important; inset-inline-end: 10px !important; inset-inline-start: auto !important; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cmd-mode-card strong { font-size: .98rem !important; color: var(--oe-ink) !important; line-height: 1.2 !important; }
.cmd-mode-card small { font-size: .8rem !important; color: var(--oe-muted) !important; line-height: 1.3 !important; }
.cmd-mode-card .cmd-mode-icon { flex: 0 0 auto; width: 40px !important; height: 40px !important; border-radius: 12px !important; }
@media (hover: hover) and (pointer: fine) { .cmd-mode-card:hover { border-color: var(--oe-line-strong) !important; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .30) !important; } }
.cmd-mode-card--active {
  border-color: var(--primary-color, #0ea5e9) !important; border-width: 2px !important; padding: 11.5px 13.5px !important;
  background: rgb(var(--primary-rgb, 14 165 233) / .06) !important; box-shadow: 0 0 0 3px rgb(var(--primary-rgb, 14 165 233) / .12) !important;
}
.cmd-mode-card--active .cmd-mode-check { opacity: 1 !important; transform: scale(1) !important; background: var(--primary-color, #0ea5e9) !important; }
.cmd-mode-card[aria-disabled="true"], .cmd-mode-card.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.cmd-mode-card[aria-disabled="true"] small::after, .cmd-mode-card.is-disabled small::after { content: attr(data-unavailable-reason); display: block; color: var(--oe-danger); font-weight: 600; }

/* ─────────────── 4. FORMULAIRE : labels visibles, champs bien proportionnes, erreurs pres du champ ─────────────── */
.cmd-section-card { border-radius: var(--oe-radius) !important; }
.cmd-section-header { padding-top: 14px !important; padding-bottom: 10px !important; }
.cmd-section-title { font-size: 1.15rem !important; letter-spacing: -.01em !important; }
.cmd-form-body { display: grid !important; gap: 14px !important; padding-top: 4px !important; }
.cmd-label { display: block; font-size: .78rem !important; font-weight: 800 !important; letter-spacing: .03em !important; color: var(--oe-ink) !important; margin-bottom: 6px !important; }
.cmd-input, .cmd-form-body input[type="text"], .cmd-form-body input[type="time"], .cmd-form-body input[type="tel"], .cmd-form-body textarea, .cmd-form-body select {
  width: 100%; min-height: 48px !important; border: 1.5px solid var(--oe-line-strong) !important; border-radius: var(--oe-radius-sm) !important;
  background: #fff !important; color: var(--oe-ink) !important; font-size: 1rem !important; padding: 10px 14px !important; box-shadow: none !important;
}
.cmd-form-body textarea { min-height: 96px !important; resize: vertical; line-height: 1.4; }
.cmd-input::placeholder, .cmd-form-body textarea::placeholder { color: #7b8494 !important; opacity: 1; }
.cmd-input:focus, .cmd-form-body textarea:focus, .cmd-form-body select:focus, .cmd-form-body input:focus {
  outline: 2px solid var(--oe-focus) !important; outline-offset: 1px !important; border-color: var(--oe-focus) !important;
}
.cmd-input:disabled, .cmd-form-body textarea:disabled, .cmd-form-body select:disabled { background: #f3f4f6 !important; color: #8b93a1 !important; cursor: not-allowed; }
.cmd-input-wrap .cmd-input { padding-inline-start: 38px !important; }
.cmd-input[aria-invalid="true"], .cmd-form-body [aria-invalid="true"] { border-color: var(--oe-danger) !important; background: var(--oe-danger-bg) !important; }
.of-inline-error, .cmd-field-error {
  display: block; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--oe-danger-bg); color: var(--oe-danger);
  font-size: .85rem; font-weight: 600; line-height: 1.35; border: 1px solid rgba(180, 35, 24, .25);
}
.of-inline-error[hidden], .cmd-field-error[hidden] { display: none !important; }

/* ─────────────── 5. PANIER (barre basse compacte + tiroir), zone sure mobile, rien ne masque le contenu ─────────────── */
.guest-cart-bar {
  bottom: calc(10px + var(--oe-safe-bottom)) !important; min-height: 56px !important; border-radius: 16px !important;
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, .45) !important; font-weight: 800 !important;
}
.guest-cart-bar:focus-visible { outline: 3px solid var(--oe-focus) !important; outline-offset: 3px !important; }
.guest-cart-bar .gc-bar-left, .guest-cart-bar .gc-bar-right { font-size: .98rem !important; }
/* Le contenu ne passe jamais SOUS la barre : reserve de defilement en bas de page (barre + zone sure). */
.cmd-page-wrap, main.public-order-main, #order-form { scroll-padding-bottom: calc(96px + var(--oe-safe-bottom)); }
.cmd-page-wrap { padding-bottom: calc(96px + var(--oe-safe-bottom)) !important; }
.guest-cart-drawer { border-radius: 20px 20px 0 0 !important; padding-bottom: var(--oe-safe-bottom) !important; }
.gc-drawer-head { padding: 16px 18px 8px !important; }
.gc-drawer-head h3 { font-size: 1.2rem !important; letter-spacing: -.02em !important; }
.gc-close { min-width: 44px !important; min-height: 44px !important; }
.gc-list { padding: 2px 18px !important; }
.gc-item { padding: 12px 0 !important; border-bottom: 1px solid var(--oe-line) !important; }
.gc-total-row { font-size: 1.05rem !important; }
.gc-total-row strong { font-size: 1.2rem !important; letter-spacing: -.02em !important; }
.gc-checkout { min-height: 52px !important; border-radius: 14px !important; font-size: 1.02rem !important; font-weight: 800 !important; }
.gc-checkout:disabled, .gc-checkout.is-submitting { opacity: .65; cursor: progress; }
.gc-checkout:focus-visible { outline: 3px solid var(--oe-ink) !important; outline-offset: 2px !important; }

/* Titres des sections de plats : hierarchie plus nette, moins d'air perdu. */
.cmd-dishes-title { font-size: 1.25rem !important; letter-spacing: -.02em !important; margin: 6px 0 12px !important; color: var(--oe-ink) !important; }
.category-title { font-size: 1.2rem !important; letter-spacing: -.02em !important; color: var(--oe-ink) !important; }
[data-category-section] { padding-top: 14px !important; padding-bottom: 14px !important; }

/* Mouvement reduit : aucune transition decorative. */
@media (prefers-reduced-motion: reduce) {
  .dish-card, .elyria-product-card, .cmd-mode-card, .cmd-step__node, .guest-cart-bar { transition: none !important; }
}

/* En-tete mobile : le libelle « Mon compte » ne doit pas comprimer le titre du restaurant. */
@media (max-width: 480px) {
  .cmd-topbar__account { font-size: .8rem !important; padding-left: 8px !important; padding-right: 8px !important; }
  .cmd-topbar__back { font-size: .85rem !important; }
}

/* Quand la barre de panier est affichee, le bas de page (pied, liens legaux) reste atteignable : reserve de defilement. */
body:has(.guest-cart-bar.show) { padding-bottom: calc(92px + var(--oe-safe-bottom)) !important; }