/* ═══════════════════════════════════════════════════════════════════════
   DISH CARD SHARED — Lot 4 (carte horizontale, 2026-09-11)
   Remplace integralement l'ancienne carte verticale (Lot 2A) : UNE SEULE
   direction visuelle desormais active, aucune variante double dans le code.
   Forme tres fidelement inspiree de la structure d'une reference externe
   (carte horizontale : texte a gauche, photo carree a droite, pied separe
   par un filet fin) - jamais sa marque, ses couleurs, son fond beige ni ses
   textes. Les couleurs restent 100% dynamiques (--primary-color /
   --primary-color-readable, reglages du restaurant), jamais une couleur
   externe copiee en dur.
   Source de verite UNIQUE et AUTONOME du composant carte plat, chargee
   identiquement par menu.php et order_form.php. Namespace dedie
   (.elyria-product-card*), zero !important.
   ═══════════════════════════════════════════════════════════════════════ */

.elyria-product-card {
  /* Plus de align-self:start (retire le 2026-09-11) : chaque carte doit
     desormais avoir EXACTEMENT la meme hauteur que ses voisines de grille -
     le stretch par defaut d'un enfant de grille (valeur initiale, on ne le
     force plus a "start") fait que toute carte plus courte que sa voisine de
     ligne est etiree a la meme hauteur. Ceci ne sert que de filet de
     securite : la vraie source d'uniformite vient des emplacements reserves
     ci-dessous (meta/note/description/allergenes toujours presents dans le
     DOM, jamais retires quand la donnee est absente). */
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(120px, 41%, 260px);
  grid-template-rows: auto auto;
  column-gap: 14px;
  /* Hotfix 2026-09-12 (v2) : fond desormais teinte par la vraie couleur
     secondaire configuree par l'etablissement (jamais un blanc/creme fixe) -
     --secondary-color-readable garantit un texte lisible quelle que soit la
     couleur (tres claire, tres sombre, saturee...). */
  background: var(--secondary-color, #FFFDF8);
  color: var(--secondary-color-readable, #1a1a1a);
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 10px 24px -16px rgba(15, 23, 42, .20);
  padding: 16px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* Survol desktop extremement discret (retour 2026-09-11 : l'ancien lever
   translateY a ete retire - "aucun deplacement vertical de la carte") :
   uniquement une bordure/ombre legerement plus marquee, jamais de
   transform, jamais de changement de taille. */
.elyria-product-card:hover {
  border-color: rgba(15, 23, 42, .09);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 16px 32px -16px rgba(15, 23, 42, .26);
}

/* Bouton invisible etire sur toute la carte (Lot 4, correction accessibilite) :
   PREMIER arret de tabulation, ouvre la fiche produit partagee - jamais un
   role="button" pose sur un <article>/<div>, toujours un vrai <button>.
   z-index bas : le bouton d'action visible du pied (voir plus bas) reste
   cliquable independamment, au-dessus de celui-ci - deux boutons FRERES,
   jamais imbriques l'un dans l'autre. */
.elyria-product-card__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  /* Cause reelle du "voile blanc ovale" au survol (2026-09-11) : un
     <button> natif garde par defaut l'apparence systeme du navigateur
     (appearance:auto) - certains moteurs peignent alors un relief/halo natif
     au survol ou au clic sur un bouton non stylise, meme avec
     background:transparent en CSS (l'apparence native est peinte par-dessus,
     pas remplacee). Meme correctif deja utilise ailleurs dans ce fichier CSS
     (menu-premium.css) pour un probleme identique. */
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.elyria-product-card__open:focus-visible {
  outline: 2px solid var(--primary-color-readable, #0EA5E9);
  outline-offset: -2px;
}

/* ── Colonne gauche : nom, note, description, allergenes (rythme vertical
   affine le 2026-09-11 apres retour visuel - "bloc trop tasse en haut a
   gauche"). PAS de gap uniforme sur le conteneur : chaque enfant porte son
   propre margin-top explicite, cible pour SA transition specifique
   (nom→badge, badge→note, note→description, description→allergenes) plutot
   qu'un espacement generique repete partout - une carte pauvre en contenu
   (ex. Eau Minerale) n'accumule alors que les quelques marges reellement
   presentes, elle ne s'etire pas artificiellement. align-self:start (plutot
   que le stretch par defaut d'un enfant de grille) : le bloc de texte garde
   sa hauteur naturelle et reste aligne en haut avec la photo, jamais etire
   pour combler la hauteur de la ligne de grille. ── */
.elyria-product-card__left {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  pointer-events: none;
}
.elyria-product-card__topline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.elyria-product-card__name {
  margin: 0;
  min-height: calc(1.28em * 2);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.28;
  /* Hotfix 2026-09-12 (v2) : suit desormais le fond de la carte (couleur
     secondaire) plutot que la couleur principale - le fond de la carte
     portant lui-meme la couleur secondaire depuis ce meme hotfix, le nom
     doit rester lisible SUR ce fond precis, pas sur un fond neutre suppose. */
  color: var(--secondary-color-readable, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* Emplacements TOUJOURS presents dans le DOM (voir _dish_card.php) - meta
   (badge/fait maison), note et description reservent une hauteur constante
   MEME quand la donnee est absente, via min-height plutot qu'une valeur en
   pixels propre a un plat : c'est ce qui garantit une hauteur de carte
   identique sur toute la grille, quel que soit le contenu reel (2026-09-11,
   correction demandee - la version precedente compactait les cartes pauvres
   en contenu, ce qui cassait l'alignement de la grille). */
.elyria-product-card__meta {
  display: flex;
  /* nowrap + scroll horizontal (pas flex-wrap) : a largeur etroite (mobile),
     meme 2 courtes puces (badge + "fait maison") peuvent depasser la
     largeur de colonne - un retour a la ligne y ferait grandir CETTE carte
     seule, cassant l'egalite de hauteur avec ses voisines. Un scroll
     horizontal garde une hauteur de ligne strictement constante quel que
     soit le nombre/la longueur des puces, sans jamais rien masquer (2026-09-11). */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 22px;
  pointer-events: auto;
}
.elyria-product-card__meta::-webkit-scrollbar { display: none; }
.elyria-product-card__meta > * { flex-shrink: 0; }
.elyria-product-card__rating {
  margin: 9px 0 0;
  /* line-height explicite (pas seulement min-height) : la hauteur reelle
     d'une ligne avec le glyphe etoile (\2605) depasse legerement un
     line-height "naturel" par defaut. En fixant line-height ET min-height a
     LA MEME valeur, la ligne vide et la ligne peuplee calculent EXACTEMENT
     la meme hauteur (source unique), au lieu de deux approximations qui
     divergent de 1-2px - c'est ce qui causait le seul ecart de hauteur
     mesure entre cartes (2026-09-11). */
  line-height: 1.4;
  min-height: 1.4em;
  color: #b8860b;
  font-size: .78rem;
  font-weight: 700;
}
.elyria-product-card__description {
  margin: 10px 0 0;
  min-height: calc(1.55em * 2);
  font-size: .82rem;
  line-height: 1.55;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 46ch;
}
.elyria-product-card__homemade {
  display: inline-block;
  background: #ECFDF5;
  color: #047857;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 700;
}

/* BADGE — un seul badge manuel par carte, chip discret dans la zone meta
   (jamais superpose a la photo, desormais trop petite pour ca). */
.elyria-product-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  user-select: none;
  background: rgba(15, 23, 42, .05);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1e293b;
}
.elyria-product-card__badge-icon { font-size: .78rem; line-height: 1; }
.elyria-product-card__badge--gold { background: rgba(246, 192, 65, .28); color: #7c4a00; }
.elyria-product-card__badge--silver { background: rgba(208, 222, 238, .38); color: #2a4a70; }
.elyria-product-card__badge--bronze { background: rgba(232, 160, 98, .30); color: #782e0c; }
.elyria-product-card__badge--fire { background: rgba(255, 182, 96, .30); color: #8a3900; }
.elyria-product-card__badge--star { background: rgba(246, 210, 105, .32); color: #664200; }
.elyria-product-card__badge--amber { background: rgba(251, 188, 5, .18); color: #7c4a00; }

/* ALLERGENES — reutilise EXACTEMENT le meme pictogramme que la fiche produit
   (voir menu_allergen_icon_svg() dans core/helpers.php, source commune).
   DEUX variantes rendues par _dish_card.php (--compact : 2 puces max,
   --full : 3 puces max), une seule affichee a la fois via cette media
   query - jamais de defilement horizontal cache (retour utilisateur
   2026-09-12 : "je ne veux pas de defilement horizontal cache pour les
   allergenes"). flex-wrap:nowrap + overflow:hidden (pas de scroll) : la
   ligne ne s'affiche jamais sur 2 lignes ni ne devient scrollable - le
   nombre de puces visibles est CHOISI EN AMONT (2 vs 3) pour tenir sur une
   ligne, et chaque etiquette est tronquee proprement (ellipsis) si un mot
   traduit (allemand, turc...) est exceptionnellement long, sans jamais
   changer la hauteur de la ligne ni faire deborder la carte. Le nombre
   "+N" reste toujours exact pour la variante affichee, et la liste
   COMPLETE des allergenes reste disponible via l'aria-label du conteneur
   (voir _dish_card.php) - jamais une information supprimee, seulement
   repliee. */
.elyria-product-card__allergens {
  display: none;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  min-height: 24px;
}
.elyria-product-card__allergens > * { flex-shrink: 0; }
.elyria-product-card__allergens--compact { display: flex; }
.elyria-product-card__allergens--full { display: none; }
@media (min-width: 401px) {
  .elyria-product-card__allergens--compact { display: none; }
  .elyria-product-card__allergens--full { display: flex; }
}
.elyria-product-card__allergen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .045);
  min-width: 0;
}
.elyria-product-card__allergen-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--primary-color-readable, #1a1a1a);
  flex-shrink: 0;
}
.elyria-product-card__allergen-icon svg { width: 13px; height: 13px; }
.elyria-product-card__allergen-label {
  font-size: .66rem;
  font-weight: 700;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px;
}
.elyria-product-card__allergen--text-only { padding: 2px 8px; }
.elyria-product-card__allergen-more {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .07);
  font-size: .66rem;
  font-weight: 800;
  color: #4b5563;
}

/* ── Photo : element principal de la carte (polish 2026-09-11, ratio resserre
   le 2026-09-11 ; Hotfix 2026-09-12 v1 avait tente contain + copie floutee en
   fond, mais cela laissait une double image et un flou juges indesirables au
   retour visuel suivant. Hotfix 2026-09-12 v2 : une SEULE image en
   object-fit:cover, centree - remplit tout le cadre arrondi sans aucune
   bande/bordure/fond visible, au prix d'un recadrage assume sur les ratios
   extremes (portrait tres serre notamment) - compromis explicitement demande
   pour eliminer toute bande plutot que de la limiter. Aucun second
   telechargement, aucun filtre. Ratio 6:5 (plutot que 4:3) delibere : les
   photos plat reelles vont du portrait serre (ratio ~0.75) au paysage large
   (ratio ~1.5) - 6:5 est le meilleur compromis mesure entre les deux. ── */
.elyria-product-card__media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 6 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #EDEDED;
  pointer-events: none;
}
.elyria-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.elyria-product-card__empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 160% at 18% 10%, rgba(255,255,255,.6), transparent 55%),
    linear-gradient(150deg, #F7EFE2, #EADCC2);
}
.elyria-product-card__empty svg {
  width: 22px;
  height: 22px;
  color: color-mix(in srgb, var(--primary-color, #8A5A2B) 55%, transparent);
}
/* Le placeholder "sans photo" utilise EXACTEMENT le meme format que la
   photo reelle (retire le 2026-09-11 : la variante compacte precedente
   rendait cette carte plus petite que ses voisines, cassant l'uniformite de
   la grille demandee). La hauteur de carte identique vient desormais des
   emplacements texte reserves ci-dessus, pas d'une taille de photo reduite. */

/* ── Pied pleine largeur : filet fin, prix a gauche, action a droite ── */
.elyria-product-card__footer {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, .07);
  pointer-events: none;
}
.elyria-product-card__price {
  /* Hotfix 2026-09-12 (v2) : idem __name, suit le fond (couleur secondaire). */
  color: var(--secondary-color-readable, #1a1a1a);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.elyria-product-card__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-size: .84rem;
  color: #6b7280;
  font-weight: 600;
  min-width: 0;
}
.elyria-product-card__pricing-item strong {
  color: #1a1a1a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* BOUTON D'ACTION — vrai <button>, AU-DESSUS du bouton etire (z-index 3 >
   1), donc cliquable independamment sans jamais le declencher en meme
   temps. Toujours un vrai bouton texte desormais (polish 2026-09-11, le "+"
   seul ne se lisait pas comme une vraie action premium) : "Ajouter" (icone +
   texte, ajout rapide reel) ou "Choisir" (ouvre la fiche, comme un clic sur
   la carte) - le libelle decrit honnetement ce que fait le clic. 44px de
   hauteur minimum dans les deux cas. */
.elyria-product-card__action {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--primary-color-readable, #1a1a1a);
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, filter .18s ease;
  /* Meme reset d'apparence native que .elyria-product-card__open - un bouton
     visible peut aussi heriter d'un halo systeme au survol/clic. */
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.elyria-product-card__action-icon { display: block; flex-shrink: 0; }
.elyria-product-card__action:hover { filter: brightness(1.06); }
.elyria-product-card__action:active { transform: scale(.96); }
.elyria-product-card__action:focus-visible {
  outline: 2px solid var(--primary-color-readable, #0EA5E9);
  outline-offset: 2px;
}

/* ── Etat indisponible (prepare, non declenche par une donnee reelle a ce
   jour - aucun mecanisme de disponibilite par plat n'existe dans le modele
   actuel ; cette classe reste prete pour le jour ou il existera, jamais
   appliquee sans donnee reelle). ── */
.elyria-product-card--unavailable { opacity: .55; }
.elyria-product-card--unavailable .elyria-product-card__open { pointer-events: none; cursor: default; }
.elyria-product-card--unavailable .elyria-product-card__action { pointer-events: none; opacity: .6; }

@media (max-width: 400px) {
  .elyria-product-card { padding: 14px; border-radius: 16px; }
  .elyria-product-card__name { font-size: .95rem; }
  .elyria-product-card__price { font-size: 1rem; }
  /* Colonne texte tres etroite sur mobile : reduit le plafond de largeur de
     chaque etiquette allergene (garde 2 puces cote a cote sans deborder,
     meme avec un mot traduit plus long en allemand/turc - ellipsis prend le
     relais plutot qu'un debordement ou un retour a la ligne). */
  .elyria-product-card__allergen-label { max-width: 58px; }
}

/* ── Conteneur de la liste de cartes : aucune grille multi-colonnes n'existait
   pour ce composant avant ce lot (verifie : ni menu-premium.css ni
   order-premium.css ne definissent de grid-template-columns sur
   [data-category-section]) - definie ICI, scope strictement le composant
   carte. Mobile : une seule colonne, plusieurs cartes compactes visibles a
   l'ecran. Tablette/desktop : deux colonnes de cartes horizontales, jamais
   un retour a trois grandes cartes verticales. Stretch par defaut (retire
   align-items:start le 2026-09-11) : les cartes d'une meme ligne de grille
   s'etirent a hauteur egale - filet de securite en plus des emplacements
   reserves qui rendent deja chaque carte naturellement egale. */
.elyria-product-card-grid {
  /* [data-category-section] (menu-premium.css/order-premium.css) porte
     encore une regle desktop heritee de l'ancienne carte verticale
     (grid-template-columns: repeat(3,1fr) !important a partir de 1000px) -
     jamais modifiee ici (hors perimetre carte), mais neutralisee pour CE
     conteneur en lui faisant occuper TOUTES les colonnes du parent quel que
     soit leur nombre (grid-column: 1/-1) : la grille reelle des cartes est
     entierement definie ci-dessous, independante du parent. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .elyria-product-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ── Rollback visuel cartes (2026-09-12) : .elyria-product-card__open (voir
   plus haut) est reutilisee telle quelle par la carte classique restauree
   (_dish_card_classic.php) pour son bouton invisible plein cadre - meme
   composant, meme z-index (1). Le bouton visible "Ajouter"/"Choisir" de
   cette carte classique (.dish-card .dish-add-btn) n'a jamais eu besoin de
   z-index propre avant le Lot 4 (aucun overlay plein cadre n'existait) -
   sans cette regle, il resterait visuellement au-dessus mais cliquable en
   dessous du bouton invisible (meme defaut que celui deja corrige par le
   Lot 4 pour son propre bouton d'action). ── */
.dish-card .dish-add-btn {
  position: relative;
  z-index: 2;
}

/* ── Correctif urgent (2026-09-12, apres retour production) : la fiche ne
   s'ouvrait plus au clic reel (uniquement au clic synthetique en QA) - cause
   racine identifiee via document.elementFromPoint() en production : la
   regle historique ".dish-card > *, ... { pointer-events: none; }"
   (menu-premium.css, concue pour l'ANCIEN <article role="button"> ou le clic
   etait gere sur l'article lui-meme, les enfants devant etre transparents
   aux evenements pointeur pour laisser le clic "remonter") s'applique aussi
   aux DEUX vrais boutons de la carte classique restauree (data-dish-open et
   .dish-add-btn), tous deux enfants directs ou descendants de .dish-card -
   elle les rendait totalement inertes au clic/tap reel (mais pas a
   l'appel .click() programmatique, d'ou l'ecart non detecte en QA). Ces deux
   boutons sont desormais de VRAIS elements interactifs (Lot 4) : ils doivent
   explicitement redevenir cliquables, sans toucher a la regle historique
   elle-meme (portee large, potentiellement utilisee ailleurs). ── */
.dish-card [data-dish-open],
.dish-card .dish-add-btn {
  /* !important necessaire : la regle historique ci-dessus (menu-premium.css)
     pose elle-meme pointer-events:none en !important - seule une regle
     egalement !important peut la contrer, la specificite seule ne suffit
     pas face a !important. */
  pointer-events: auto !important;
}