/* La carte — photos des plats (fiche « Photo du plat » d'ALV Core).
   A · la colonne photo d'une rubrique : une photo, ou une pile qui se défait au fil du plat lu ;
   B · la visionneuse, ouverte par la colonne ou la pastille d'un plat. */

/* A · la colonne */
/* Carrée comme la colonne validée (base.css : .tartare-shot img en 1:1, 260 px) ; plus large dès qu'un plat a sa photo. */
.plat-scene { position: sticky; isolation: isolate; border-radius: var(--alv-radius); width: 100%; aspect-ratio: 1; }
.plat-scene--photos { max-width: 320px; }
.plat-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity .6s var(--alv-ease-out), transform 1.2s var(--alv-ease-out); }
.plat-scene img.is-on { opacity: 1; transform: none; z-index: 1; }
.plat-scene__nom { position: absolute; z-index: 12; left: 10px; right: 10px; bottom: 10px; padding: 7px 10px 6px; border-radius: 6px;
  background: rgba(10, 9, 4, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 12.5px/1.25 var(--alv-font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--alv-cream);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; pointer-events: none; }
.plat-scene__nom.is-on { opacity: 1; transform: none; }
.plat-scene__nom:empty { display: none; }
/* Pas de transition de couleur : en quittant la surbrillance, le fond doré part d'un coup et le texte, transparent,
   restait invisible le temps du fondu (vu en prod le 11/10). */
.dish.is-lit .dish__name { background: var(--alv-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Le bouton qui couvre la colonne : loupe et compteur en haut à droite */
.plat-scene__ouvrir { all: unset; position: absolute; inset: 0; z-index: 11; border-radius: inherit; cursor: zoom-in; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.plat-scene__ouvrir:focus-visible { outline: 2px solid var(--alv-gold-solid); outline-offset: 4px; }
.plat-scene__ouvrir svg { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%;
  background: rgba(10, 9, 4, .74); fill: none; stroke: var(--alv-cream); stroke-width: 2; stroke-linecap: round; transition: transform .25s var(--alv-ease-out), background .25s; }
@media (hover: hover) { .plat-scene__ouvrir:hover svg { transform: scale(1.1); background: rgba(10, 9, 4, .9); } }
.plat-scene__compte { position: absolute; top: 14px; right: 10px; padding: 5px 9px 4px; border-radius: 999px; background: rgba(10, 9, 4, .74);
  font: 700 12px/1 var(--alv-font-label); letter-spacing: .1em; color: var(--alv-cream); font-variant-numeric: tabular-nums; }

/* La pile : chaque photo est une carte (bord, ombre) ; le cadre lui-même s'efface pour laisser dépasser les cartes du dessous.
   Les positions sont posées par carte-photos.js (décalage, rotation, assombrissement). */
.plat-pile { overflow: visible; border: 0; box-shadow: none; margin-top: 20px; }
.plat-pile img { opacity: 1; transform: none; border-radius: var(--alv-radius); border: 1px solid var(--alv-line); box-shadow: var(--alv-shadow-2); background: var(--alv-surface);
  transform-origin: 50% 85%; transition: transform .8s var(--alv-ease-out), opacity .5s var(--alv-ease-out), filter .6s var(--alv-ease-out); }
.plat-pile img.is-partie { pointer-events: none; }
.media.plat-pile:hover img { transition: transform .8s var(--alv-ease-out), opacity .5s var(--alv-ease-out), filter .6s var(--alv-ease-out); } /* pas le zoom des .media au survol : la pile a ses propres positions */

/* C · la pastille, à côté du nom */
.dish__cam { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -6px 0 -6px 6px; vertical-align: middle;
  border-radius: 50%; cursor: zoom-in; color: var(--alv-gold-solid); transition: background .2s, transform .2s; }
/* Zone de tap de 44 × 44 px (WCAG 2.5.8) sans changer l'aspect ni la ligne du plat : le pseudo-élément déborde du bouton */
.dish__cam { position: relative; }
.dish__cam::before { content: ""; position: absolute; inset: calc((100% - 44px) / 2); }
.dish__cam svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (hover: hover) { .dish__cam:hover { background: rgba(247, 219, 142, .14); transform: scale(1.08); } }
.dish__cam:focus-visible { outline: 2px solid var(--alv-gold-solid); outline-offset: 2px; }

/* B · la visionneuse (élément dialog, créé par carte-photos.js) */
html.ov-lb-ouverte { overflow: hidden; }
.ov-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 72px 20px; box-sizing: border-box; border: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; background: rgba(6, 5, 2, .97); color: var(--alv-ink); overscroll-behavior: contain; }
.ov-lb:not([open]) { display: none; }
.ov-lb::backdrop { background: rgba(6, 5, 2, .6); }
.ov-lb[open] { animation: ov-lb-entre .35s var(--alv-ease-out); }
@keyframes ov-lb-entre { from { opacity: 0; } }
.ov-lb__scene { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
.ov-lb__img { display: block; max-width: min(100%, 1200px); max-height: 100%; width: auto; height: auto; border-radius: var(--alv-radius); box-shadow: 0 30px 80px -20px #000;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: transform .4s var(--alv-ease-out), opacity .2s; }
.ov-lb__img.is-zoom { transform: scale(var(--zoom, 2)); cursor: zoom-out; border-radius: 0; }
.ov-lb__img.is-sort-g { opacity: 0; transform: translateX(-36px); }
.ov-lb__img.is-sort-d { opacity: 0; transform: translateX(36px); }
.ov-lb__img.is-entre-d { opacity: 0; transform: translateX(36px); transition: none; }
.ov-lb__img.is-entre-g { opacity: 0; transform: translateX(-36px); transition: none; }
.ov-lb__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; width: 100%; max-width: 760px; margin: 0 auto; }
.ov-lb__info p { margin: 0; }
.ov-lb__nom { font: 700 22px/1.2 var(--alv-font-label); letter-spacing: .04em; text-transform: uppercase; color: var(--alv-gold-solid); }
.ov-lb__prix { font: 700 21px/1.2 var(--alv-font-label); white-space: nowrap; }
.ov-lb__prix:empty { display: none; }
.ov-lb__desc { grid-column: 1 / -1; color: var(--alv-ink-soft); }
.ov-lb__compte { grid-column: 1 / -1; font: 700 12px/1 var(--alv-font-label); letter-spacing: .14em; color: var(--alv-ink-faint); font-variant-numeric: tabular-nums; }
.ov-lb__compte:empty { display: none; }
.ov-lb__btn { all: unset; position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(247, 243, 234, .08); color: var(--alv-cream); transition: background .2s, transform .2s; }
.ov-lb__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .ov-lb__btn:hover { background: rgba(247, 219, 142, .2); transform: scale(1.06); } }
.ov-lb__btn:focus-visible { outline: 2px solid var(--alv-gold-solid); outline-offset: 3px; }
.ov-lb__fermer { top: 10px; right: 12px; }
.ov-lb__prec { left: 12px; top: calc(50% - 60px); }
.ov-lb__suiv { right: 12px; top: calc(50% - 60px); }
.ov-lb.is-seule .ov-lb__prec, .ov-lb.is-seule .ov-lb__suiv { display: none; }

/* Le volet de la pastille (téléphone, ou rubrique sans colonne) : la photo glisse depuis le bord droit */
.ov-volet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 5, 2, .55); overscroll-behavior: contain; }
.ov-volet:not([open]) { display: none; }
.ov-volet::backdrop { background: transparent; }
.ov-volet__panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 88vw); box-sizing: border-box; overflow-y: auto; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 16px; padding: 64px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--alv-bg-raised); border-left: 1px solid var(--alv-line); box-shadow: -30px 0 80px -20px #000; color: var(--alv-ink); }
.ov-volet[open] .ov-volet__panneau { animation: ov-volet-entre .55s var(--alv-ease-out); }
.ov-volet[open] { animation: ov-lb-entre .35s var(--alv-ease-out); }
.ov-volet.is-sort .ov-volet__panneau { transform: translateX(105%); transition: transform .26s var(--alv-ease-in-out); }
.ov-volet.is-sort { opacity: 0; transition: opacity .26s; }
@keyframes ov-volet-entre { from { transform: translateX(105%); } }
.ov-volet__photo { all: unset; display: block; cursor: zoom-in; border-radius: var(--alv-radius); overflow: hidden; box-shadow: var(--alv-shadow-2); }
.ov-volet__photo:focus-visible { outline: 2px solid var(--alv-gold-solid); outline-offset: 3px; }
.ov-volet__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ov-volet[open] .ov-volet__photo img { animation: ov-volet-photo .8s var(--alv-ease-out); }
@keyframes ov-volet-photo { from { transform: translateX(40px) rotate(3deg) scale(.96); } }
.ov-volet__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
.ov-volet__info p { margin: 0; }
.ov-volet__fermer { top: 10px; right: 12px; }

@media (max-width: 900px) {
  .plat-scene:not(.plat-scene--photos) { width: min(56%, 240px); } /* comme avant le lot */
  .plat-scene { position: relative; top: auto; } /* au-dessus de la liste, plus collée : on fait glisser la pile du doigt */
  .plat-pile { width: calc(100% - 24px); margin: 22px 0 14px 6px; }
  .dish__cam { width: 34px; height: 34px; } /* cible tactile */
  .ov-lb { padding: 60px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ov-lb__prec, .ov-lb__suiv { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  .ov-lb__info { padding-inline: 4px; }
  .ov-lb:not(.is-seule) .ov-lb__info { padding-bottom: 56px; } /* les flèches passent sous le texte */
  .ov-lb__nom { font-size: 19px; }
  .ov-lb__prix { font-size: 19px; }
  .ov-lb__desc { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .plat-scene img, .plat-pile img, .plat-scene__nom, .dish__cam, .ov-lb__img, .plat-scene__ouvrir svg { transition: none !important; }
  .plat-scene img { transform: none; }
  .ov-lb[open], .ov-volet[open], .ov-volet[open] .ov-volet__panneau, .ov-volet[open] .ov-volet__photo img { animation: none; }
}