/* ═══════════════════════════════════════════════════════════
   LA FLAMME D'OR — « Le trait d'or » (la carte qui s'écrit)
   Chaque plat apparaît quand il arrive à l'écran : le nom se pose,
   les pointillés dorés se tracent de gauche à droite, puis le prix
   s'allume d'une brève lueur dorée. Le soulignement des onglets
   glisse d'une catégorie à l'autre.
   Actif seulement avec html.menu-anim (posé par carte-trait.js) :
   sans JavaScript ou avec « réduire les animations », la carte est
   exactement comme avant.
   ═══════════════════════════════════════════════════════════ */

/* ─── plats : état de départ ─── */
html.menu-anim .ct-item .ct-name,
html.menu-anim .ct-item .ct-desc,
html.menu-anim .ct-item .ct-extra {
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.menu-anim .ct-item .ct-desc,
html.menu-anim .ct-item .ct-extra { transition-delay: calc(var(--d, 0ms) + 90ms); }

html.menu-anim .ct-item .ct-dots {
  transform: translateY(-5px) scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
  transition-delay: calc(var(--d, 0ms) + 120ms);
}
html.menu-anim .ct-item .ct-price { opacity: 0; }

/* ─── plats : à l'écran ─── */
html.menu-anim .ct-item.in .ct-name,
html.menu-anim .ct-item.in .ct-desc,
html.menu-anim .ct-item.in .ct-extra { opacity: 1; transform: none; }
html.menu-anim .ct-item.in .ct-extra { opacity: .75; }
html.menu-anim .ct-item.in .ct-dots { transform: translateY(-5px) scaleX(1); }
html.menu-anim .ct-item.in .ct-price {
  animation: ctPriceGlow .9s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0ms) + 520ms);
}
@keyframes ctPriceGlow {
  0%   { opacity: 0; text-shadow: none; }
  35%  { opacity: 1; text-shadow: 0 0 10px rgba(230, 199, 122, .85), 0 0 22px rgba(230, 160, 60, .35); }
  100% { opacity: 1; text-shadow: none; }
}

/* ─── photo du plat : apparition très douce ─── */
html.menu-anim .ct-photo img {
  opacity: 0; transform: scale(1.04);
  transition: opacity .9s var(--ease-out), transform 1.4s var(--ease-out);
}
html.menu-anim .ct-photo.in img { opacity: 1; transform: none; }

/* ─── onglets : la pastille dorée glisse ─── */
html.menu-anim .carte-tabs { position: relative; }
html.menu-anim .carte-tabs button { position: relative; z-index: 1; }
html.menu-anim .carte-tabs button[aria-selected="true"] { background: transparent; border-color: transparent; }
.ctab-ind {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px; background: var(--lime);
  pointer-events: none;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .45s cubic-bezier(.65, 0, .35, 1), height .45s cubic-bezier(.65, 0, .35, 1);
}
.ctab-ind.no-anim { transition: none; }