/* ═══════════════════════════════════════════════════════════════════════
   DISH SHEET SHARED — Lot 2B (2026-09-09)
   Source de verite UNIQUE et AUTONOME de la fiche produit, chargee
   identiquement par menu.php et order_form.php. Namespace dedie
   (.elyria-product-sheet*) : ne reutilise aucune ancienne classe generique
   (.dish-sheet, .sheet-*, .opt-*, .pairing-*, .order-modal*) precisement
   pour que les CSS concurrents de menu-premium.css / order-cards.css /
   order-premium.css / public.css deviennent naturellement inactifs sur ce
   composant, sans neutralisation ni suppression.
   Selection visuelle native via :has(input:checked) - aucune classe JS a
   maintenir pour l'etat "selectionne".
   ═══════════════════════════════════════════════════════════════════════ */

/* Barre panier flottante (.guest-cart-bar, menu-premium.css/order-cards.css) :
   masquee reellement pendant que la fiche est ouverte, via l'etat propre au
   composant (body.elyria-product-sheet-open, pose/retire par
   dish-sheet-renderer.js - voir mount()/destroy()).
   Pourquoi visibility et non opacity/transform : .guest-cart-bar.show fixe
   deja opacity/transform en !important (regle ajoutee apres coup dans
   menu-premium.css/order-cards.css, non modifiee ici) - lutter sur ces memes
   proprietes exigerait nous aussi du !important. "visibility" n'est fixe nulle
   part ailleurs sur .guest-cart-bar : une specificite superieure suffit donc
   SANS !important (body + 2 classes = (0,2,1), superieur a .guest-cart-bar.show
   = (0,2,0)) pour retirer la barre du rendu, du hit-testing ET du parcours
   clavier - plus complet que pointer-events seul (deja pose par ailleurs via
   body.sheet-open). Aucun clignotement : la transition (si presente) porte sur
   opacity/transform, jamais sur visibility, donc ce changement est immediat et
   sans a-coup visuel puisque la barre est de toute facon rendue invisible.
   Retrait de la classe = retour exact a l'etat precedent (visible si le
   panier avait .show, invisible sinon) - aucun etat independant memorise ici. */
body.elyria-product-sheet-open .guest-cart-bar { visibility: hidden; }

.elyria-product-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, .5);
  opacity: 0;
  transition: opacity .22s ease;
}
.elyria-product-sheet__backdrop--show {
  opacity: 1;
}
@media (min-width: 768px) {
  .elyria-product-sheet__backdrop {
    align-items: center;
    padding: 20px;
  }
}

.elyria-product-sheet {
  /* Couleurs dediees fiche produit (2026-09-12) : deux champs par restaurant
     (fiche_color_1 = fond principal, fiche_color_2 = bloc nom/prix/description),
     exposes en :root par menu.php/order_form.php sous --sheet-bg1/--sheet-bg1-text/
     --sheet-bg2/--sheet-bg2-text. Alias locaux + variantes derivees (mutees,
     bordures) calculees ICI via color-mix() pour rester 100% autonome (voir
     entete de fichier) - aucune couleur blanche/noire figee ne doit survivre
     dans ces deux zones desormais personnalisables. Repli (apres la virgule)
     uniquement pour un ancien gabarit qui n'exposerait pas encore ces
     variables - jamais utilise en production une fois cette migration deployee. */
  --bg1: var(--sheet-bg1, #FFFDF8);
  --bg1-text: var(--sheet-bg1-text, #1a1a1a);
  /* 2026-09-12 : 55% ne garantissait pas 4,5:1 sur un fond fiche_color_1 tres
     clair (mesure : 3.65:1 sur #FFFDF8) - releve a 70%, verifie >4.5:1 sur les
     cas clairs ET sombres testes (voir module "Completez votre menu"). */
  --bg1-muted: color-mix(in srgb, var(--bg1-text) 70%, var(--bg1) 30%);
  --bg1-border: color-mix(in srgb, var(--bg1-text) 10%, transparent);
  --bg1-border-strong: color-mix(in srgb, var(--bg1-text) 28%, transparent);
  --bg1-tint: color-mix(in srgb, var(--bg1-text) 6%, var(--bg1) 94%);
  --bg1-tint-strong: color-mix(in srgb, var(--bg1-text) 10%, var(--bg1) 90%);
  --bg2: var(--sheet-bg2, #F3EEE2);
  --bg2-text: var(--sheet-bg2-text, #1a1a1a);
  /* Meme correctif de contraste que --bg1-muted ci-dessus. */
  --bg2-muted: color-mix(in srgb, var(--bg2-text) 70%, var(--bg2) 30%);
  --bg2-border: color-mix(in srgb, var(--bg2-text) 10%, transparent);
  --bg2-tint: color-mix(in srgb, var(--bg2-text) 6%, var(--bg2) 94%);
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}
.elyria-product-sheet--show {
  transform: translateY(0);
  opacity: 1;
}
@media (min-width: 768px) {
  .elyria-product-sheet { border-radius: 28px; max-height: 88vh; }
}

/* Lot 3B (forme Allzin) — barre superieure STATIQUE, jamais posee sur la
   photo, jamais liee au defilement : fermer a gauche, partager a droite,
   grande zone respirante entre les deux (comme la reference). Le titre reste
   dans le DOM pour aria-labelledby mais est visuellement masque (le nom du
   plat vit desormais dans le bloc d'infos centre, juste sous la photo -
   aucune repetition necessaire). */
.elyria-product-sheet__header {
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 6px;
  background: transparent;
}
.elyria-product-sheet__title {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Reapparition discrete (Lot 3B, correction ciblee) : uniquement une fois que
   le nom du plat (deja affiche dans le bloc d'informations) a defile hors de
   vue - jamais au sommet de la fiche, jamais un retour a l'ancien en-tete
   lourd/flottant. Reutilise le MEME element (deja rempli avec le vrai nom du
   plat par mount(), voir dish-sheet-renderer.js) plutot que d'en dupliquer un
   second dans le DOM - un seul titre, juste sa visibilite qui change. */
.elyria-product-sheet__header--scrolled .elyria-product-sheet__title {
  position: static;
  width: auto; height: auto;
  padding: 0 8px; margin: 0;
  overflow: hidden;
  clip: auto;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--bg1-text);
  text-align: center;
  opacity: 0;
  animation: elyria-title-reveal .2s ease forwards;
}
@keyframes elyria-title-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Boutons circulaires simples, neutres (jamais superposes a la photo -
   voir plus bas, la photo est desormais entierement sous cette barre).
   Derives de --bg1-text (jamais rgba(15,23,42,...) fixe) : sur un fond 1
   tres sombre, un fond de bouton fonce sur fonce serait invisible. */
.elyria-product-sheet__close,
.elyria-product-sheet__share {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0;
  background: var(--bg1-tint);
  color: var(--bg1-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease;
}
.elyria-product-sheet__close svg,
.elyria-product-sheet__share svg { width: 19px; height: 19px; }
.elyria-product-sheet__close:hover,
.elyria-product-sheet__share:hover { background: var(--bg1-tint-strong); }
.elyria-product-sheet__close:active,
.elyria-product-sheet__share:active { background: color-mix(in srgb, var(--bg1-text) 14%, var(--bg1) 86%); transform: scale(.94); }
.elyria-product-sheet__close:focus-visible,
.elyria-product-sheet__share:focus-visible { outline: 2px solid var(--primary-color-readable, #0EA5E9); outline-offset: 2px; }
/* Repli honnete (Lot 3B) : le bouton partager n'est revele que si
   dish-sheet-renderer.js a confirme une vraie capacite (navigator.share ou
   a defaut navigator.clipboard) - jamais un bouton visible sans action reelle
   derriere (voir mount() : classList/hidden bascules uniquement apres ce test). */

.elyria-product-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Le squelette (et cette div) est reutilise entre deux ouvertures : sans
     ceci, l'ancrage de defilement natif du navigateur peut "retrouver" une
     position proche de l'ancienne apres un innerHTML de remplacement (bug
     trouve en QA reelle : rouvrir le MEME plat repartait scrolle en bas au
     lieu du sommet) - jamais souhaite ici, la fiche doit toujours rouvrir en
     haut (voir aussi le reset explicite de scrollTop dans mount()). */
  overflow-anchor: none;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Barre de defilement amincie plutot que masquee : reste toujours visible
     et fonctionnelle (aucune perte d'accessibilite/de decouvrabilite du
     defilement), simplement plus discrete que la barre brute par defaut. */
  scrollbar-width: thin;
  scrollbar-color: var(--bg1-border-strong) transparent;
}
/* Barre fine et discrete (polish final), limitee strictement a cette fiche
   (selecteur porte sur .elyria-product-sheet__body uniquement - aucun effet
   sur la barre de defilement generale de la page). Toujours utilisable :
   4px reste largement au-dessus du minimum cliquable/glissable habituel,
   contraste suffisant au repos et renforce au survol. */
.elyria-product-sheet__body::-webkit-scrollbar { width: 4px; }
.elyria-product-sheet__body::-webkit-scrollbar-track { background: transparent; }
.elyria-product-sheet__body::-webkit-scrollbar-thumb {
  background: var(--bg1-border-strong);
  border-radius: 999px;
}
.elyria-product-sheet__body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--bg1-text) 40%, transparent); }

/* ── Photo interieure (Lot 3B, forme Allzin) ──
   Changement visuel principal : la photo n'est plus plein-bord (elle vivait
   avant dans .hero avec une marge negative annulant le padding du corps) -
   elle est desormais un vrai cadre INTERIEUR, marge egale de chaque cote
   (heritee du padding de .body, jamais redefinie ici), 4 coins arrondis
   visibles, comme une photo posee sur la feuille plutot que collee a ses
   bords. */
.elyria-product-sheet__hero { display: flex; flex-direction: column; gap: 0; }
.elyria-product-sheet__media {
  /* Historique v3-v7 (2026-09-12) : hauteur naturelle, puis hauteur maitrisee
     agrandie par etapes, puis hauteur variable selon l'orientation mesuree,
     puis hauteur commune mais tres haute (jusqu'a 430-450px, quasi
     carre/vertical sur mobile) - retour utilisateur explicite a chaque
     etape, la derniere en date annulant desormais TOUTE contrainte
     d'affichage integral de la photo.
     Correctif 2026-09-12 (v8) : nouvelle priorite explicite - rendu
     horizontal elegant proche des cartes classiques, plutot qu'un grand
     cadre haut. Ratio FIXE (aspect-ratio, pas de hauteur en dur ni en
     svh/vh) : la hauteur decoule automatiquement de la largeur du cadre,
     identique pour TOUTES les photos et TOUS les formats d'ecran a
     largeur egale - plus besoin de breakpoint dedie pour le desktop (voir
     l'ancien bloc @media min-width:641px, supprime). object-fit:cover
     (voir plus bas) remplit entierement ce cadre, quitte a recadrer
     moderement le haut/bas d'une photo tres verticale - le v8 abandonne
     donc explicitement l'exigence "image toujours integralement visible"
     des versions precedentes, sur demande explicite.
     Correctif 2026-09-12 (v9) : le ratio 3/2 (v8) recadrait trop fort les
     photos assiette peu allongees (ex. "Kebab Pané", ratio reel 0.8) - une
     partie importante de l'assiette disparaissait. Retour utilisateur
     explicite : ratio releve a 4/3 (moins large), qui montre davantage le
     haut/bas de la photo tout en restant un format horizontal compact -
     toujours un seul gabarit commun a toutes les fiches.
     Correctif 2026-09-13 (v10) : encore trop recadre au gout de
     l'utilisateur - ratio encore reduit a 5/4 (dezoom supplementaire,
     cadre legerement moins large que 4/3) pour montrer davantage l'assiette
     tout en restant un format horizontal (pas carre). */
  position: relative;
  /* Marges laterales quasi nulles (bord a bord sur mobile, residuel minime
     en desktop/tablette) - inchange depuis v6/v7, toujours valable pour un
     rendu "pleine largeur" proche des cartes classiques. */
  margin: 0 -14px;
  width: auto;
  aspect-ratio: 5 / 4;
  height: auto;
  overflow: hidden;
  border-radius: 20px;
  /* Fond conserve pour le seul cas restant ou il est visible : l'etat sans
     photo ci-dessous (icone + fond tinte, pas de photo a couvrir). Une
     photo reelle couvre desormais tout le cadre (object-fit:cover) et ce
     fond ne s'affiche plus derriere elle. */
  background: var(--bg1);
}
/* Image unique, remplit tout le cadre horizontal (object-fit:cover) -
   recadrage modere du haut/bas pour une photo tres verticale accepte
   explicitement (v8/v9), le plat reste centre et identifiable
   (object-position:center). Jamais de deformation (cover preserve toujours
   le ratio reel de l'image, seul l'exces est recadre). Aucun fond floute,
   aucune deuxieme image, aucune bande visible autour de la photo : cover
   couvre 100% du cadre sans residu. */
.elyria-product-sheet__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Sans photo : meme cadre horizontal (ratio 4/3, memes marges, 4 coins
   arrondis) - jamais un format different pour l'etat vide, jamais un grand
   vide ni un rendu "image cassee". */
.elyria-product-sheet__media-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--bg1-tint-strong);
}
.elyria-product-sheet__media-empty svg {
  width: 28px;
  height: 28px;
  color: var(--bg1-muted);
}
.elyria-product-sheet__media-empty-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Bloc d'informations principales (Lot 3B, forme Allzin) ──
   Fond legerement distinct du fond general de la fiche, grands coins
   arrondis, memes marges laterales que la photo (heritees du padding de
   .body) : nom/prix/description centres et regroupes, comme sur la
   reference, jamais une simple colonne alignee a gauche.
   Correctif 2026-09-12 (v3) : fond desormais fiche_color_2 (--bg2), un champ
   DEDIE a ce bloc precis - remplace l'usage transitoire de --secondary-color
   (2026-09-12 v2, abandonne par retour utilisateur explicite : reutiliser
   couleur_secondaire ici entrait en conflit avec son usage deja existant
   pour le header/navigation). */
.elyria-product-sheet__intro {
  margin-top: 14px;
  padding: 17px 20px 14px;
  border-radius: 20px;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
/* Nom en serif. Suit le fond dedie de ce bloc (--bg2/--bg2-text, contraste
   calcule automatiquement) - jamais la couleur principale ni secondaire.
   Contraste volontaire avec le sans-serif du reste de la fiche (allergenes,
   options, pied). Centre (jamais aligne a gauche) pour rester lisible avec
   un nom long, sur 1 a 3 lignes. */
.elyria-product-sheet__name {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bg2-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 34ch;
}
.elyria-product-sheet__price { margin: 5px 0 0; font-size: 1.35rem; font-weight: 800; color: var(--bg2-text); font-variant-numeric: tabular-nums; }
.elyria-product-sheet__rating { margin: 3px 0 0; color: #b8860b; font-size: .85rem; font-weight: 700; }
.elyria-product-sheet__description { margin: 8px 0 0; color: var(--bg2-muted); font-size: .92rem; line-height: 1.55; max-width: 40ch; }
/* Allergenes : desormais a l'interieur du bloc d'informations, sous la
   description (meme esprit que la reference) - pictogramme + libelle
   toujours visible ensemble, jamais une icone seule incomprehensible. Filet
   fin au-dessus (jamais une bordure lourde) tant qu'il y a un element au-dessus
   a separer. Toujours dans le bloc bg2 : bordure/icones/libelles derives de
   --bg2-text, jamais de rgba(15,23,42,...) fixe. */
.elyria-product-sheet__allergens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bg2-border);
  width: 100%;
}
.elyria-product-sheet__allergen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 44px;
}
.elyria-product-sheet__allergen-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg2-text) 8%, transparent);
  color: var(--bg2-text);
  flex-shrink: 0;
}
.elyria-product-sheet__allergen-icon svg { width: 18px; height: 18px; }
.elyria-product-sheet__allergen-label { font-size: .72rem; font-weight: 700; color: var(--bg2-muted); white-space: nowrap; }
/* Repli texte seul (Lot 3B, correction pictogramme oeuf) : quand aucun
   pictogramme fiable n'existe pour cet allergene, une pastille neutre avec le
   nom seul - jamais une icone generique/incertaine qui risquerait d'etre mal
   comprise (cercle confondu avec un "0", une lettre, etc.). */
.elyria-product-sheet__allergen--text-only {
  flex-direction: row;
  min-height: 34px;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg2-text) 8%, transparent);
}
.elyria-product-sheet__allergen--text-only .elyria-product-sheet__allergen-label { white-space: normal; }

/* ── Groupes (fieldset natif) ──
   Variant A (Lot 3B) : plus de carte blanche bordee autour de chaque groupe -
   juste un titre puis une liste de lignes separees par un filet fin (voir
   .elyria-product-sheet__options plus bas), a l'image d'une carte de
   restaurant plutot que d'un formulaire administratif. */
.elyria-product-sheet__group {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}
.elyria-product-sheet__group legend {
  padding: 0 2px 10px;
  font-size: .84rem;
  font-weight: 800;
  color: var(--bg1-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.elyria-product-sheet__required {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #B45309;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.elyria-product-sheet__optional {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--bg1-muted);
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.elyria-product-sheet__group--invalid .elyria-product-sheet__options,
.elyria-product-sheet__group--invalid .elyria-product-sheet__pricing-options {
  outline: 2px solid #EF4444;
  outline-offset: 4px;
  border-radius: 10px;
}
.elyria-product-sheet__error {
  margin: 8px 2px 0;
  color: #B91C1C;
  font-size: .8rem;
  font-weight: 700;
}

/* ── Formule (double tarif) ── meme filet fin qu'un groupe d'options (voir
   .elyria-product-sheet__options) - prix unique et double tarif partagent
   desormais exactement le meme niveau de finition, sans cadre individuel. */
.elyria-product-sheet__pricing-options {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  padding: 2px 10px;
}
.elyria-product-sheet__pricing-option {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 14px 4px 14px 32px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 400;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--bg1-border);
  cursor: pointer;
  transition: background .15s ease;
}
.elyria-product-sheet__pricing-option:last-child { border-bottom: 0; }
.elyria-product-sheet__pricing-option:has(input:checked) {
  background: color-mix(in srgb, var(--primary-color, #0EA5E9) 7%, transparent);
  border-bottom-color: transparent;
}
.elyria-product-sheet__pricing-option input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
/* Coche visible sur selection - retour "vrai controle de borne", pas
   seulement une bordure coloree difficile a percevoir en un coup d'oeil.
   Fond de la case = --bg1 (jamais blanc fixe) : elle se fond dans la
   surface au repos, seule la bordure (--bg1-border-strong) la revele. */
.elyria-product-sheet__pricing-option::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.75px solid var(--bg1-border-strong);
  background: var(--bg1);
}
.elyria-product-sheet__pricing-option:has(input:checked)::before {
  border-color: var(--primary-color-readable, #0EA5E9);
  background: var(--primary-color-readable, #0EA5E9);
}
.elyria-product-sheet__pricing-option:has(input:checked)::after {
  content: '';
  position: absolute;
  left: 9.5px;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-65%) rotate(45deg);
}
.elyria-product-sheet__pricing-label { font-weight: 700; color: var(--bg1-text); }
.elyria-product-sheet__pricing-amount { font-weight: 800; color: var(--bg1-text); font-variant-numeric: tabular-nums; }

/* ── Section generique (utilisee par le bloc options) ── */
.elyria-product-sheet__section { display: flex; flex-direction: column; gap: 10px; }
/* ── Options (suppléments) ──
   Variant A (Lot 3B) : plus de pastille bordee par option - une liste aeree
   separee par un filet fin (comme une carte de restaurant), l'etat
   selectionne se lit par un fond teinte + une coche, jamais par un cadre
   supplementaire qui s'ajouterait au filet. */
.elyria-product-sheet__options {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-radius: 14px;
  padding: 2px 10px;
}
.elyria-product-sheet__option {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 14px 4px 14px 32px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 400;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--bg1-border);
  cursor: pointer;
  transition: background .15s ease;
}
.elyria-product-sheet__option:last-child { border-bottom: 0; }
.elyria-product-sheet__option:has(input:checked) {
  background: color-mix(in srgb, var(--primary-color, #0EA5E9) 7%, transparent);
  border-bottom-color: transparent;
}
.elyria-product-sheet__option input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.elyria-product-sheet__option::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 1.75px solid var(--bg1-border-strong);
  background: var(--bg1);
}
.elyria-product-sheet__option:has(input[type="radio"])::before { border-radius: 50%; }
.elyria-product-sheet__option:has(input:checked)::before {
  border-color: var(--primary-color-readable, #0EA5E9);
  background: var(--primary-color-readable, #0EA5E9);
}
.elyria-product-sheet__option:has(input:checked)::after {
  content: '';
  position: absolute;
  left: 9.5px;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-65%) rotate(45deg);
}
.elyria-product-sheet__option-name { font-weight: 600; color: var(--bg1-text); }
.elyria-product-sheet__option-price { font-weight: 700; color: var(--bg1-muted); font-size: .88rem; white-space: nowrap; }
.elyria-product-sheet__option-price--included { color: #047857; }

/* ── Module "Completez votre menu" (borne-style, 2026-09-12) ──
   Refonte complete : l'ancien module (defilement horizontal cache, titre et
   sous-texte cote a cote, 2 cartes larges max) devient une vraie grille
   d'upsell de borne - titre seul sur sa ligne, sous-texte dessous, jusqu'a 6
   petites cartes carrees en grille responsive (2 colonnes mobile, 3-4 selon
   largeur). Namespace dedie (.elyria-upsell*) plutot que de reutiliser/
   redefinir .elyria-product-sheet__suggestions* - ancien nom retire du HTML
   (voir dish-sheet-renderer.js), zero risque de collision residuelle.
   Toutes les couleurs derivent de --bg1/--bg1-text (fond principal de la
   fiche, jamais --bg2 : ce module vit dans le corps scrollable, hors du bloc
   nom/prix/description) - contraste garanti quelle que soit la couleur
   choisie par le restaurateur, jamais de noir/blanc fixe. */
.elyria-upsell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Espace sous la grille pour que le pied fixe (bouton d'action) ne masque
     jamais la derniere rangee de cartes - le corps reste scrollable, cette
     marge n'est visible qu'en fin de defilement. */
  margin-bottom: 8px;
}
.elyria-upsell__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elyria-upsell__title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--bg1-text); }
.elyria-upsell__hint { margin: 0; font-size: .85rem; color: var(--bg1-muted); line-height: 1.4; }
.elyria-upsell__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px) {
  .elyria-upsell__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .elyria-upsell__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.elyria-upsell__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* admin.css definit une regle generique button{height:40px} qui s'applique
     aussi a ce <button> sur order_form.php (seule cette page charge admin.css
     en plus de ce fichier) et ecrasait la hauteur naturelle du flex, coupant
     photo/nom/prix - height:auto la retablit explicitement ici. */
  height: auto;
  border: 1px solid var(--bg1-border);
  /* !important requis : public.css force button{border-radius:999px !important}
     (bouton "pill" generique) sur order_form.php, qui gagnerait sinon malgre
     la specificite plus forte de .elyria-upsell__item (une regle !important
     l'emporte toujours sur une regle sans !important, quelle que soit la
     specificite). */
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--bg1-tint);
  cursor: pointer;
  text-align: left;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .15s ease;
}
.elyria-upsell__item:active { transform: scale(.97); }
.elyria-upsell__item:focus-visible {
  outline: 2px solid var(--primary-color-readable, #0EA5E9);
  outline-offset: 2px;
}
.elyria-upsell__media { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--bg1-tint-strong); }
.elyria-upsell__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elyria-upsell__empty { display: block; width: 100%; height: 100%; }
.elyria-upsell__body { padding: 7px 8px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.elyria-upsell__name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--bg1-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elyria-upsell__price { font-size: .78rem; font-weight: 800; color: var(--bg1-text); font-variant-numeric: tabular-nums; }
/* Pastille CTA ("+" ajout rapide ou "›" ouverture config) - meme couleur que
   le bouton d'action principal (--primary-color-readable, deja garanti
   lisible en blanc par menu_readable_accent() cote PHP), jamais une couleur
   fixe indifferente au theme. */
.elyria-upsell__cta {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-color-readable, #1a1a1a);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
/* Etat "Ajoute" (2026-09-12) : retour visuel clair et bref (1.4s, voir
   dish-sheet-renderer.js) sur un produit simple ajoute directement - jamais
   pour un produit configurable (celui-ci ouvre sa fiche, aucun etat "ajoute"
   n'a de sens ici). Vert AA (#15803D, >4.5:1 avec du blanc) plutot qu'une
   couleur qui dependrait du theme : cet etat est un signal universel de
   succes, pas une surface a personnaliser. */
.elyria-upsell__item[data-added="1"] .elyria-upsell__cta {
  background: #15803D;
}
.elyria-upsell__item:disabled { cursor: default; }

/* ── Pied fixe ── */
.elyria-product-sheet__footer {
  position: relative;
  flex-shrink: 0;
  border-top: 1px solid var(--bg1-border);
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg1);
}
/* Signal discret (pas un contenu masque) : tant qu'il reste du contenu sous
   la ligne de flottaison du corps defilant, une ombre tres legere se pose
   juste au-dessus du pied - disparait des qu'on atteint reellement le bas. */
.elyria-product-sheet__footer--more-below::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -9px;
  height: 9px;
  background: linear-gradient(to bottom, transparent, var(--bg1-border));
  pointer-events: none;
}
.elyria-product-sheet__summary { font-size: .85rem; color: var(--bg1-muted); min-height: 1.2em; }
.elyria-product-sheet__summary:empty { display: none; min-height: 0; }
.elyria-product-sheet__actions { display: flex; gap: 10px; }
/* La croix de l'en-tete ferme deja la fiche, toujours accessible (clavier
   compris) - "Fermer" au pied ne reapparait que lorsqu'aucune action metier
   n'est proposee (commande desactivee) : il devient alors la seule sortie et
   merite un traitement plein/visible plutot qu'un texte discret. Regle
   generale (pas seulement mobile) : la croix suffit partout ailleurs. */
.elyria-product-sheet__actions:has(.elyria-product-sheet__actions-list > *) .elyria-product-sheet__cancel {
  display: none;
}
.elyria-product-sheet__cancel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 14px;
  border: 0;
  background: var(--bg1-tint);
  color: var(--bg1-text);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
}
.elyria-product-sheet__cancel:hover { background: var(--bg1-tint-strong); }
/* Zone d'actions generique : la page fournit 0..n descripteurs (voir
   ElyriaDishSheet.mount({actions}) / instance.setActions()) - ce fichier ne
   connait qu'un style de bouton par variante, jamais un identifiant metier.
   variant 'primary' (par defaut) = action la plus mise en avant (fond plein,
   plus de largeur relative) ; 'outline' = action secondaire, fond neutre
   discret plutot qu'un contour colore qui rivaliserait avec le primaire. */
.elyria-product-sheet__actions-list { display: flex; flex: 1 1 auto; gap: 8px; }
.elyria-product-sheet__action {
  flex: 1.3 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 18px;
  border-radius: 14px;
  border: 0;
  background: var(--primary-color-readable, #1a1a1a);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: normal;
  white-space: normal;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.elyria-product-sheet__action:active { transform: scale(.98); }
.elyria-product-sheet__action--outline {
  flex: 1 1 auto;
  background: var(--bg1-tint);
  color: var(--bg1-text);
}
.elyria-product-sheet__action:focus-visible,
.elyria-product-sheet__cancel:focus-visible {
  outline: 2px solid var(--primary-color-readable, #0EA5E9);
  outline-offset: 2px;
}
.elyria-product-sheet__action-total { font-variant-numeric: tabular-nums; }
.elyria-product-sheet__action-sep { opacity: .55; font-weight: 400; margin: 0 -4px; }

@media (max-width: 400px) {
  .elyria-product-sheet__body { padding: 0 14px 14px; }
  .elyria-product-sheet__intro { padding: 17px 14px 14px; }
  /* Correctif 2026-09-12 (v3) : plus de ratio/hauteur fige sur mobile non plus
     (voir .elyria-product-sheet__media plus haut) - le conteneur epouse le
     ratio naturel de la photo sur toutes les tailles d'ecran. */
  /* menu.php peut fournir jusqu'a 3 actions (add_to_cart + click_collect +
     order_onsite) simultanement. L'action principale (toujours la premiere
     du tableau fourni par la page - business logic inchangee, seul l'ordre
     d'affichage compte) prend toute la largeur sur sa propre rangee ; les
     actions secondaires se partagent la rangee suivante a parts egales,
     jamais seules dans une cellule vide (defaut d'une grille 2 colonnes
     fixe essayee puis abandonnee). "Fermer" est deja masque des qu'une
     action existe (regle generale ci-dessus) - rien a reordonner ici. */
  .elyria-product-sheet__actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .elyria-product-sheet__actions-list > .elyria-product-sheet__action:first-child {
    flex: 1 1 100%;
  }
  .elyria-product-sheet__actions-list > .elyria-product-sheet__action:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
  }
  .elyria-product-sheet__action {
    padding: 13px 14px;
    font-size: .92rem;
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elyria-product-sheet__backdrop,
  .elyria-product-sheet,
  .elyria-product-sheet__header,
  .elyria-product-sheet__title,
  .elyria-product-sheet__close,
  .elyria-product-sheet__share {
    transition: none;
  }
  .elyria-product-sheet__header--scrolled .elyria-product-sheet__title {
    animation: none;
    opacity: 1;
  }
}