/* Fiche produit commune au menu digital et a /commande (dish-sheet-editorial.js, menu.php et order_form.php).
   Couleurs : uniquement les reglages du restaurant - fond et texte de fiche (--sheet-bg1 / --sheet-bg1-text, fiche_color_1),
   couleur principale (--ed-accent, --ed-accent-ink lisible sur fond clair ou sombre, --ed-on-accent). Aucune couleur de
   marque en dur. Mobile : bottom sheet (poignee, contenu defilant, action fixe). Des 768px : fenetre centree ; des 1024px,
   deux colonnes quand le plat propose des choix (classe .ps--split posee par le script). Proprietes logiques partout : le RTL se met en miroir sans regle dediee. */
.ps-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .44); opacity: 0; transition: opacity .22s ease; }
.ps-scrim[hidden] { display: none; }
/* Typographie de base de la fiche fixee ici (valeurs du menu) : la fiche ne depend plus de la page qui l'accueille (/commande
   impose line-height 24px a sa page) - meme rendu sur le menu et sur /commande. */
.ps-scrim { font-size: 16px; line-height: normal; letter-spacing: normal; }
.ps-scrim.is-open { opacity: 1; }
.ps {
  --ps-bg: var(--sheet-bg1, var(--ed-inner, #FFFDF8));
  --ps-ink: var(--sheet-bg1-text, var(--ed-ink, #1A1A1A));
  --ps-muted: color-mix(in srgb, var(--ps-ink) 68%, var(--ps-bg));
  --ps-line: color-mix(in srgb, var(--ps-ink) 11%, transparent);
  --ps-tint: color-mix(in srgb, var(--ps-ink) 6%, var(--ps-bg));
  --ps-accent: var(--ed-accent, var(--primary-color, #0EA5E9));
  --ps-accent-ink: var(--ed-accent-ink, var(--ps-accent));
  --ps-on-accent: var(--ed-on-accent, #FFFFFF);
  --ps-danger: var(--sheet-danger, #C62828);
  position: relative; width: 100%; max-height: calc(100dvh - 48px); display: flex; flex-direction: column;
  background: var(--ps-bg); color: var(--ps-ink); font-family: var(--ed-font, Inter, system-ui, sans-serif);
  border-radius: 24px 24px 0 0; overflow: hidden; box-shadow: 0 -16px 36px -26px rgba(0, 0, 0, .6);
  transform: translateY(32px); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.ps-scrim.is-open .ps { transform: none; }
.ps-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ps button { font-family: inherit; }
/* poignee, partage et fermeture poses SUR la photo : aucune barre d'en-tete qui mange de la hauteur */
.ps-grip { position: absolute; z-index: 3; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px;
  background: color-mix(in srgb, var(--ps-ink) 22%, transparent); pointer-events: none; }
.ps--photo .ps-grip { background: rgba(255, 255, 255, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.ps-tools { position: absolute; z-index: 3; top: 10px; inset-inline-end: 10px; display: flex; gap: 8px; }
.ps .ps-icon { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50% !important; display: grid; place-items: center;
  cursor: pointer; color: var(--ps-ink); background: var(--ps-tint); -webkit-tap-highlight-color: transparent; }
.ps--photo .ps-icon { color: #FFFFFF; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ps.is-scrolled .ps-icon { color: var(--ps-ink); background: var(--ps-tint); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ps button:focus-visible, .ps-chip:has(input:focus-visible), .ps-opt:has(input:focus-visible) { outline: 2px solid var(--ps-accent-ink); outline-offset: 2px; }
.ps-media { aspect-ratio: 5 / 4; background: var(--ps-tint); overflow: hidden; }
.ps-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* mini-titre qui apparait quand le nom passe sous les boutons */
/* bloc (pas flex) : les points de suspension coupent le nom AVANT les icones (en flex, le texte debordait sous le partage) */
.ps-bar { position: absolute; z-index: 2; inset: 0 0 auto; height: 64px; display: block; line-height: 64px; padding-block: 0; padding-inline: 20px 116px;
  background: var(--ps-bg); box-shadow: 0 1px 0 var(--ps-line); font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.ps.is-scrolled .ps-bar { opacity: 1; transform: none; }
.ps-info { padding: 20px 20px 4px; }
/* sans photo : nom et prix sous la rangee d'icones (pleine largeur, jamais colles au partage / a la fermeture) */
.ps--nophoto .ps-info { padding-top: 70px; }
.ps-head { display: flex; align-items: baseline; gap: 16px; }
.ps-name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.42rem; line-height: 1.22; font-weight: 750; letter-spacing: -.012em; overflow-wrap: anywhere; color: inherit; }
.ps-price { flex: 0 0 auto; margin: 0; font-size: 1.2rem; font-weight: 750; color: var(--ps-accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-num { unicode-bidi: isolate; white-space: nowrap; }
/* Note : meme hierarchie que la note des cartes du menu (menu-editorial.css, .dish-rating-pill) - etoile doree --ed-star
   (teinte ajustee au texte de la fiche, plus lumineuse sur fond sombre), score en gras couleur du texte, nombre d'avis
   secondaire ; un peu plus grande que sur les cartes, sans rivaliser avec le nom ni le prix. */
.ps-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 0; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--ps-muted); }
.ps-rating__star { color: var(--ed-star, currentColor); color: color-mix(in srgb, var(--ed-star, currentColor) 86%, var(--ps-ink)); font-size: 1.05em; line-height: 1; }
.ps-rating__value { color: var(--ps-ink); font-weight: 700; white-space: nowrap; }
.ps-rating__sep, .ps-rating__count { color: var(--ps-muted); font-weight: 500; white-space: nowrap; }
.ps-desc { margin: 12px 0 0; font-size: .95rem; line-height: 1.58; color: var(--ps-muted); max-width: 62ch; }
.ps-allergens { margin: 12px 0 0; font-size: .84rem; line-height: 1.5; color: var(--ps-muted); }
.ps-allergens b { color: var(--ps-ink); font-weight: 650; }
/* groupes de choix */
.ps-choices { padding: 4px 0 8px; }
.ps-group { margin: 0; padding: 22px 20px 6px; }
.ps-group + .ps-group { box-shadow: inset 0 1px 0 var(--ps-line); }
.ps-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ps-gname { margin: 0; font-size: 1.02rem; line-height: 1.3; font-weight: 700; color: inherit; }
.ps-greq { flex: 0 0 auto; font-size: .8rem; font-weight: 650; color: var(--ps-accent-ink); white-space: nowrap; }
.ps-greq--opt, .ps-greq--ok { color: var(--ps-muted); }
.ps-greq--opt { font-weight: 500; }
.ps-greq svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--ps-accent-ink); }
.ps-ghint { margin: 3px 0 10px; font-size: .84rem; color: var(--ps-muted); }
.ps-gerr { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .86rem; font-weight: 650; color: var(--ps-danger); }
.ps-gerr[hidden] { display: none; }
.ps-group.is-invalid .ps-greq { color: var(--ps-danger); }
/* pastilles : choix gratuits ou au meme prix, libelles courts */
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  background: var(--ps-tint); color: var(--ps-ink); font-size: .92rem; font-weight: 550; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease; }
.ps-chip input, .ps-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ps-chip svg { display: none; width: 15px; height: 15px; flex: 0 0 auto; }
.ps-chip:has(input:checked) { background: var(--ps-accent); color: var(--ps-on-accent); }
.ps-chip:has(input:checked) svg { display: block; }
/* maximum atteint (groupe multiple limite) : choix non coches desactives, mention mise en avant */
.ps-chip:has(input:disabled), .ps-opt:has(input:disabled) { opacity: .42; cursor: not-allowed; }
.ps-group.is-full .ps-ghint { color: var(--ps-accent-ink); font-weight: 650; }
/* lignes : choix payants ou libelles longs */
.ps-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ps-opt[hidden] { display: none; }
.ps-opt + .ps-opt { box-shadow: inset 0 1px 0 var(--ps-line); }
.ps-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: transparent;
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--ps-ink) 38%, transparent); transition: background-color .15s ease; }
.ps-opt--radio .ps-mark { border-radius: 50%; }
.ps-mark svg { width: 14px; height: 14px; }
.ps-opt:has(input:checked) .ps-mark { background: var(--ps-accent); box-shadow: none; color: var(--ps-on-accent); }
.ps-olabel { flex: 1 1 auto; min-width: 0; font-size: .95rem; }
.ps-oprice { flex: 0 0 auto; font-size: .9rem; color: var(--ps-muted); font-variant-numeric: tabular-nums; }
.ps .ps-more { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0 !important; background: none; cursor: pointer;
  color: var(--ps-accent-ink); font-size: .9rem; font-weight: 650; }
/* restaurant sans commande : mention discrete sous le prix, qui suit les choix a titre indicatif */
.ps-indicative { margin: 4px 0 0; font-size: .8rem; color: var(--ps-muted); text-align: end; }
/* « Avec ce plat » : grille de mini-cartes, 2 par ligne (telephone des 320px et colonne gauche des 768px), jamais de
   defilement horizontal. Surface, filet, ombre, rayon, photo 4:3, nom et prix : meme recette que les cartes du menu
   (menu-editorial.css, --mp-surface / --mp-line / --mp-shadow / --mp-price), calculee sur le fond de la fiche. */
.ps-sugg { margin-top: 14px; padding: 26px 0 12px; box-shadow: inset 0 1px 0 var(--ps-line); }
.ps-sugg__head { margin: 0 20px 16px; }
.ps-sugg h3 { margin: 0; font-size: 1.22rem; line-height: 1.25; font-weight: 780; letter-spacing: -.01em; color: inherit; }
.ps-sugg__sub { margin: 4px 0 0; font-size: .9rem; color: var(--ps-muted); }
.ps-rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 0 20px 6px; }
.ps-reco { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--ps-ink) 5.5%, var(--ps-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ps-ink) 8%, transparent), 0 1px 2px rgba(0, 0, 0, .06), 0 10px 22px -18px rgba(0, 0, 0, .5); }
.ps .ps-reco__open { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0 !important;
  background: none; color: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ps .ps-reco__open:focus-visible { outline: none; }
.ps-reco:has(.ps-reco__open:focus-visible) { outline: 2px solid var(--ps-accent-ink); outline-offset: 2px; }
/* un seul format d'image (4:3, comme les cartes du menu) : six cartes sur trois rangees sans fiche demesuree, meme hauteur
   par rangee */
.ps-reco__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--ps-ink) 8%, var(--ps-bg)); }
.ps-reco__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ps-reco__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 12px; }
.ps-reco__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.5em;
  font-size: .95rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
/* pied de carte : prix puis action, sur la meme ligne tant qu'il y a la place (sinon l'action passe dessous, en fin de ligne) */
.ps-reco__foot { margin-top: auto; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ps-reco__price { min-height: 30px; display: flex; align-items: center; font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ps-accent-ink) 70%, var(--ps-ink)); }
.ps-reco--add .ps-reco__foot { padding-inline-end: 44px; }
/* action d'un produit a configurer : « Choisir » explicite (ouvre sa fiche, jamais d'ajout direct) ; sans commande :
   simple fleche discrete. Meme hauteur visuelle que le « + ». */
.ps-reco__cue { margin-inline-start: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 1px; height: 32px; white-space: nowrap; }
.ps-reco__cue--choose { padding-block: 0; padding-inline: 11px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ps-accent) 13%, var(--ps-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-accent) 30%, transparent); color: var(--ps-accent-ink); font-size: .8rem; font-weight: 750; }
.ps-reco__cue--view { width: 32px; border-radius: 50%; color: var(--ps-muted); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-chev { width: 15px; height: 15px; flex: 0 0 auto; }
[dir="rtl"] .ps-chev { transform: scaleX(-1); }
/* carte etroite (telephone de 320px, libelle long) : « Choisir » devient un cercle de la taille du « + » (fleche seule ;
   la carte porte le nom complet de l'action) - le prix et l'action restent sur une seule ligne, rangees alignees. */
.ps-reco__foot { container-type: inline-size; }
@container (max-width: 126px) {
  .ps-reco__cue--choose { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
  .ps-reco__cue--choose span { display: none; }
  .ps-reco__cue--choose .ps-chev { width: 18px; height: 18px; }
}
@container (max-width: 161px) {
  .ps-reco__cue--long { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
  .ps-reco__cue--long span { display: none; }
  .ps-reco__cue--long .ps-chev { width: 18px; height: 18px; }
}
/* alignement par rangee (subgrid) : photos, noms puis pieds alignes d'une carte a l'autre ; une rangee de noms courts
   ne garde plus de ligne vide. Sans subgrid : hauteur de nom reservee sur deux lignes (alignement conserve). */
@supports (grid-template-rows: subgrid) {
  .ps-reco { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .ps .ps-reco__open { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
  .ps-reco__body { display: contents; }
  .ps-reco__name { min-height: 0; margin: 11px 12px 0; align-self: start; }
  .ps-reco__foot { margin: 8px 12px 12px; align-self: end; }
}
/* « + » discret (30px visibles) dans une vraie zone tactile de 44 x 44px, en bas de la carte, du cote de fin de ligne */
.ps .ps-reco__add { position: absolute; inset-inline-end: 4px; bottom: 8px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50% !important;
  display: grid; place-items: center; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ps-reco__add span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ps-accent); color: var(--ps-on-accent);
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .4); transition: transform .12s ease; }
.ps-reco__add span svg { width: 18px; height: 18px; }
.ps-reco__add:active span { transform: scale(.92); }
/* retour d'ajout rapide : pastille posee sur la photo (aucun decalage de mise en page), annonce par la zone role=status */
.ps-reco__added { position: absolute; z-index: 1; top: 8px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px;
  border-radius: 999px; background: color-mix(in srgb, var(--ps-bg) 92%, transparent); color: var(--ps-accent-ink); font-size: .74rem; font-weight: 750;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.94); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.ps-reco__added svg { width: 12px; height: 12px; }
.ps-reco.is-added .ps-reco__added { opacity: 1; transform: none; }
.ps-reco.is-added { box-shadow: 0 0 0 1.5px var(--ps-accent-ink), 0 10px 22px -18px rgba(0, 0, 0, .5); }
/* bouclier invisible pose a la fermeture de la fiche : absorbe un second appui rapide (voir shieldTaps) */
.ps-tapshield { position: fixed; inset: 0; z-index: 2147483000; background: transparent; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ps-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ps-end { height: 16px; }
/* action fixe, sous le pouce */
.ps-foot { flex: 0 0 auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ps-bg); transition: box-shadow .15s ease; }
.ps.has-more .ps-foot { box-shadow: 0 -1px 0 var(--ps-line); }
/* message bloquant (pourquoi le bouton n'ajoute pas encore) : encre pleine, pas le gris secondaire */
.ps-need { margin: 0 4px 8px; font-size: .875rem; font-weight: 600; color: var(--ps-ink); text-align: center; }
.ps-need[hidden] { display: none; }
.ps .ps-cta { width: 100%; height: 54px; margin: 0; padding: 0 20px; border: 0; border-radius: 16px !important; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; background: var(--ps-accent); color: var(--ps-on-accent); font-size: 1rem; font-weight: 750; }
.ps-cta + .ps-cta { margin-top: 8px; }
.ps-toast { position: absolute; z-index: 4; top: 64px; left: 50%; margin: 0; padding: 8px 14px; border-radius: 10px; transform: translateX(-50%);
  background: var(--ps-ink); color: var(--ps-bg); font-size: .86rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ps-toast.is-on { opacity: 1; }
/* Fiche ouverte en deux colonnes puis fenetre retrecie sous 768px : les deux zones restent defilables. */
.ps--split .ps-left { flex: 0 1 auto; max-height: 45%; overflow-y: auto; }
/* tablette et ordinateur : fenetre centree ; deux colonnes quand il y a des choix (photo + infos | choix + action) */
@media (min-width: 768px) {
  .ps-scrim { align-items: center; padding: 32px; }
  .ps { width: min(600px, 100%); max-height: min(820px, calc(100dvh - 64px)); border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); transform: translateY(12px) scale(.985); }
  .ps-grip { display: none; }
  .ps--split { width: min(980px, 100%); height: min(700px, calc(100dvh - 64px)); display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ps--split .ps-left { grid-row: 1 / 3; max-height: none; overflow-y: auto; overscroll-behavior: contain; box-shadow: inset -1px 0 0 var(--ps-line); }
  [dir="rtl"] .ps--split .ps-left { box-shadow: inset 1px 0 0 var(--ps-line); }
  .ps--split .ps-scroll { grid-column: 2; margin-top: 64px; box-shadow: inset 0 1px 0 var(--ps-line); }
  .ps--split .ps-foot { grid-column: 2; }
  .ps--split .ps-bar { display: none; }
  .ps--split .ps-info { padding: 22px 26px 26px; }
  .ps--split .ps-choices { padding-top: 0; }
  .ps--split .ps-icon { color: var(--ps-ink); background: var(--ps-tint); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ps--split .ps-left .ps-sugg { margin: 0; padding-bottom: 26px; }
  .ps--split .ps-left .ps-sugg__head { margin-inline: 26px; }
  .ps--split .ps-left .ps-rgrid { padding-inline: 26px; }
  /* fenetre d'une colonne (600px, tablette ou plat sans choix) : 3 cartes par ligne, soit 2 rangees de ~180px */
  .ps:not(.ps--split) .ps-rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* fenetre d'une colonne : photo 16:10 (au lieu de 5:4) pour laisser voir le nom et les premiers choix */
  .ps:not(.ps--split) .ps-media { aspect-ratio: 16 / 10; }
  .ps--split .ps-toast { top: 72px; left: auto; inset-inline-end: 16px; transform: none; }
}
/* Fiche independante de sa page d'accueil : /commande charge des regles globales que le menu n'a pas (admin.css : label,
   button ; public.css : button { font-weight: 900 !important }, .public-reservation-body label / input). Proprietes fixees
   ici aux valeurs du rendu du menu (valeurs de la fiche ou du navigateur) : meme rendu sur les deux pages. Seul !important :
   le poids des boutons, pour neutraliser celui impose par public.css. */
.ps label { margin-bottom: 0; letter-spacing: normal; }
.ps label:not(.ps-chip) { font-size: inherit; font-weight: inherit; color: inherit; }
.ps label.ps-chip { color: var(--ps-ink); font-weight: 550; }
.ps button { align-items: revert; justify-content: revert; height: revert; gap: revert; font-size: revert; font-weight: 400 !important; letter-spacing: revert;
  white-space: revert; text-decoration: revert; color: revert; transition: revert; }
.ps button:active { transform: none; }
.ps .ps-cta { font-weight: 750 !important; }
.ps .ps-more { font-weight: 650 !important; }
.ps-chip input, .ps-opt input { min-height: 0; }
/* admin.css impose img { max-width: 100% } : dans le bouton des recommandations, WebKit reduisait alors la photo de moitie. */
.ps img { max-width: none; }
/* Configurateur, lot 1 (clarte des choix) - prix de tete « A partir de » (libelle plus discret que le montant), option sans
   supplement, recapitulatif compact au-dessus du bouton (ou pied d'information sans commande). Le pied reste dans le flux
   de la fiche (jamais superpose) : la zone defilante se reduit d'autant, aucun contenu n'est masque. */
.ps-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: .32em; margin-inline-start: auto; }
/* nom long + « A partir de » : le prix passe sous le nom plutot que d'ecraser le titre (jamais de mot coupe pour lui faire place) ;
   un nom court garde le prix sur sa ligne (largeur du contenu, pas 60 % imposes) */
.ps-head { flex-wrap: wrap; row-gap: 4px; }
.ps-head .ps-name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.ps-from { font-size: .7em; font-weight: 600; color: var(--ps-muted); white-space: nowrap; }
.ps-oprice--free { font-size: .84rem; }
.ps-cta [data-ps-total] { display: inline-flex; align-items: baseline; gap: .32em; }
.ps-cta .ps-from { color: inherit; opacity: .82; }
.ps-recap { margin: 0 2px 10px; font-size: .86rem; line-height: 1.35; color: var(--ps-ink); }
.ps-recap[hidden] { display: none; }
.ps-recap__title { margin: 0 0 3px; font-size: .8rem; font-weight: 700; color: var(--ps-muted); }
/* Finition : aucune zone a defilement interne. Selection courte : tout est visible dans le pied ; longue : resume (montant
   de depart, supplements payants, nombre de choix sans supplement) + « Voir tous mes choix ». Le detail complet s'ouvre dans la
   zone defilante, sous les options (meme marges qu'un groupe) : aucune ligne coupee, bouton jamais masque, options accessibles. */
.ps-recap__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ps-recap-detail { margin: 0; padding: 22px 20px 6px; box-shadow: inset 0 1px 0 var(--ps-line); font-size: .92rem; line-height: 1.4; color: var(--ps-ink); scroll-margin: 8px; }
.ps-recap-detail[hidden] { display: none; }
.ps-recap-detail .ps-gname { margin-bottom: 8px; }
.ps-recap-detail .ps-recap__list { gap: 6px; }
.ps-recap__row--start .ps-recap__label { font-weight: 650; }
.ps-recap__row--pending .ps-recap__price { color: var(--ps-accent-ink); font-weight: 600; }
.ps .ps-recap__toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0 !important; background: none;
  color: var(--ps-accent-ink); font-size: .86rem; font-weight: 650 !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ps .ps-recap__toggle:focus-visible { outline: 2px solid var(--ps-accent-ink); outline-offset: 2px; }
.ps-recap__toggle .ps-chev { transform: rotate(90deg); transition: transform .15s ease; }
.ps-recap__toggle[aria-expanded="true"] .ps-chev { transform: rotate(-90deg); }
.ps-recap__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ps-recap__label { min-width: 0; overflow-wrap: anywhere; }
.ps-recap__price { flex: 0 0 auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.ps-recap__row--free .ps-recap__label, .ps-recap__row--free .ps-recap__price { color: var(--ps-muted); font-weight: 500; }
.ps-recap__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; margin: 6px 0 0; padding-top: 6px;
  box-shadow: inset 0 1px 0 var(--ps-line); font-size: .95rem; font-weight: 750; }
.ps-recap__total > span:last-child { display: inline-flex; align-items: baseline; gap: .32em; color: var(--ps-accent-ink); }
.ps-foot--info .ps-recap { margin-bottom: 0; }
/* Configurateur lot 2 : groupe conditionne masque (aucune place reservee) ; tarif avec le contenu de la formule, saisi par le
   restaurateur, sous l'intitule (meme ligne que les options, prix du tarif en encre pleine). */
.ps-group[hidden] { display: none; }
.ps-opt--tariff { align-items: flex-start; padding-block: 10px; }
.ps-opt--tariff .ps-mark { margin-top: 2px; }
.ps-olabel .ps-odetail { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.35; color: var(--ps-muted); }
.ps-oprice--tariff { color: var(--ps-ink); font-weight: 650; }
/* Repris de l'ancienne fiche de /commande (dish-sheet-shared.css) : la barre du panier ne passe jamais devant la fiche. */
body.elyria-product-sheet-open .guest-cart-bar { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ps-scrim, .ps, .ps-bar, .ps-chip, .ps-mark, .ps-foot, .ps-toast, .ps-reco, .ps-reco__added, .ps-reco__add span { transition: none !important; }
  .ps { transform: none !important; }
}
/* Lot panier : modification d'un article du panier dont un choix n'est plus propose - message en tete des choix. */
.ps-notice { align-items: flex-start; margin: 4px 0 18px; padding: 10px 12px; border-radius: 12px; line-height: 1.4; color: var(--ps-danger); background: color-mix(in srgb, var(--ps-danger) 9%, transparent); }
.ps-notice svg { flex: 0 0 auto; margin-top: 2px; }