/* OHI SUSHI — menu-list : sections du menu + cartes plats (.ml-*) */
.ml{padding-block:var(--sp-5) var(--sp-8)}

/* ---- Section ---- */
.ml-section{padding-top:var(--sp-7)}
.ml-section:first-child{padding-top:var(--sp-4)}
.ml-section[hidden]{display:none}
.ml-head{position:relative;display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.ml-index{font-family:var(--f-display);font-size:var(--fs-sm);color:var(--plum);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  display:inline-block;overflow:hidden;line-height:1.2;vertical-align:baseline}
.ml-index-roll{display:block}
/* Numéro qui défile : il monte derrière un masque à l'arrivée de la section */
.ml-motion .ml-index-roll{transform:translateY(105%);transition:transform .7s var(--ease) .05s}
.ml-motion .ml-head.is-in .ml-index-roll{transform:none}
.ml-motion .ml-head::after{content:"";position:absolute;inset-block-end:-1px;inset-inline:0;height:1px;background:var(--plum);
  transform:scaleX(0);transform-origin:var(--ml-origin,right);opacity:.5;transition:transform .9s var(--ease) .1s,opacity .6s var(--ease) .9s}
.ml-motion .ml-head.is-in::after{transform:scaleX(1);opacity:0}
[dir="ltr"] .ml-head{--ml-origin:left}
.ml-title{font-family:var(--f-display);font-weight:500;font-size:var(--fs-xl);color:var(--ink);line-height:1.1}
.ml-count{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}

/* ---- Grille cartes ---- */
.ml-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:860px){.ml-grid{grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}}
.ml-grid > li[hidden]{display:none}

/* ---- Carte plat ---- */
.ml-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--sp-4);align-items:stretch;
  padding:var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ml-body{display:flex;flex-direction:column;min-width:0;padding-block:var(--sp-1);padding-inline-start:var(--sp-2)}
.ml-name{font-family:var(--f-display);font-weight:500;font-size:1.12rem;line-height:1.25;color:var(--ink);margin:0}
.ml-open{display:inline;text-align:start;font:inherit;color:inherit;line-height:inherit}
.ml-open::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);z-index:1}
.ml-open:focus-visible{outline:none}
.ml-open:focus-visible::after{outline:2px solid var(--plum);outline-offset:2px}
.ml-sub{display:block;font-family:var(--f-body);font-size:var(--fs-sm);font-weight:400;color:var(--ink-2);margin-top:2px}
.ml-desc{margin-top:var(--sp-1);font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ml-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2)}
.ml-tag{font-size:var(--fs-xs);line-height:1;padding:.4em .7em;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-2);background:var(--rice)}
.ml-tag--build{border-color:rgba(152,31,125,.22);color:var(--plum-deep);background:var(--plum-soft)}
.ml-foot{margin-top:auto;padding-top:var(--sp-2);display:flex;align-items:center;gap:var(--sp-3)}
.ml-price{font-size:var(--fs-md);color:var(--ink)}
.ml-from{font-size:var(--fs-xs);color:var(--ink-3);font-weight:400;margin-inline-end:.25em}

/* Photo (à gauche en RTL) */
.ml-media{position:relative;width:104px;align-self:center}
.ml-photo{width:104px;height:104px;border-radius:var(--r-md);overflow:hidden;background:var(--washi)}
.ml-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ml-photo--none{display:grid;place-items:center}
.ml-seal{width:44%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(152,31,125,.35);display:grid;place-items:center;
  font-family:var(--f-display);font-size:.72rem;letter-spacing:.12em;color:var(--plum)}

/* Bouton + */
.ml-add{position:absolute;z-index:2;inset-inline-end:-6px;bottom:-6px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--plum);color:#fff;border:3px solid var(--paper);
  transition:background var(--dur) var(--ease),transform .15s var(--ease)}
.ml-add:hover{background:var(--plum-deep)}
.ml-add:active{transform:scale(.92)}
.ml-add svg{width:18px;height:18px;grid-area:1/1;transition:opacity .25s var(--ease),transform .45s var(--ease)}
.ml-add .ml-ico-check{opacity:0;transform:rotate(-120deg) scale(.3)}
.ml-add.is-added{background:var(--wasabi);animation:ml-pop .45s var(--ease)}
.ml-add.is-added .ml-ico-plus{opacity:0;transform:rotate(135deg) scale(.3)}
.ml-add.is-added .ml-ico-check{opacity:1;transform:none}
@keyframes ml-pop{0%{transform:scale(1)}35%{transform:scale(.86)}70%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Pastille quantité déjà au panier */
.ml-qty{position:absolute;z-index:2;top:-6px;inset-inline-end:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:600;line-height:24px;text-align:center;font-variant-numeric:tabular-nums;
  border:2px solid var(--paper)}
.ml-qty[hidden]{display:none}
.ml-qty.is-bump{animation:ml-bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes ml-bump{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Vignette qui vole vers le panier (créée par JS, transform uniquement) */
.ml-fly{position:fixed;z-index:1000;pointer-events:none;will-change:transform}
.ml-fly-in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--washi);box-shadow:var(--shadow-2);will-change:transform,opacity}
.ml-fly-in img{width:100%;height:100%;object-fit:cover}
.ml-card.is-in-cart{border-color:rgba(152,31,125,.35)}

@media (hover:hover){
  .ml-card:hover{border-color:rgba(152,31,125,.3);box-shadow:var(--shadow-1)}
  .ml-card:hover .ml-photo img{transform:scale(1.07)}
}
@media (min-width:860px){
  .ml-card{padding:var(--sp-4);gap:var(--sp-5)}
  .ml-media,.ml-photo{width:132px}
  .ml-photo{height:132px}
  .ml-name{font-size:1.25rem}
}

/* Latin (noms de rolls en capitales) */
.ml-latin{font-family:var(--f-body);letter-spacing:.12em;font-size:.86em;font-weight:500}

/* ---- Boissons : liste fine ---- */
.ml-drinks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:var(--sp-6);border-top:1px solid var(--line)}
@media (min-width:600px){.ml-drinks{grid-template-columns:1fr 1fr}}
.ml-drinks > li[hidden]{display:none}
.ml-drink{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:64px;padding-block:var(--sp-2);border-bottom:1px solid var(--line)}
.ml-drink .ml-open::after{border-radius:var(--r-sm)}
.ml-drink-thumb{position:relative;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--washi)}
.ml-drink-thumb img{width:100%;height:100%;object-fit:cover}
.ml-drink-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ml-drink-name{font-size:var(--fs-md);font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.ml-drink-vol{font-size:var(--fs-xs);color:var(--ink-3)}
.ml-drink .ml-price{font-size:var(--fs-sm);color:var(--ink-2)}
.ml-drink .ml-add{position:relative;inset:auto;flex:none;width:36px;height:36px;border:0;background:var(--plum-soft);color:var(--plum)}
.ml-drink .ml-add::before{content:"";position:absolute;inset:-4px}
.ml-drink .ml-add:hover{background:var(--plum);color:#fff}
.ml-drink .ml-add.is-added{background:var(--wasabi);color:#fff}
.ml-drink .ml-add svg{width:16px;height:16px}
.ml-drink .ml-qty{position:static;flex:none;border:0}

/* ---- Bas de page ---- */
.ml-alt{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line);text-align:center;font-size:var(--fs-sm);color:var(--ink-3)}
.ml-alt-link{color:var(--ink-2);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;
  display:inline-block;padding-block:12px;transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.ml-alt-link:hover{color:var(--plum);text-decoration-color:currentColor}
.ml-noscript{padding:var(--sp-6) 0;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .ml-card,.ml-photo img,.ml-add,.ml-add svg,.ml-alt-link{transition:none}
  .ml-add.is-added,.ml-qty.is-bump{animation:none}
  .ml-motion .ml-index-roll{transform:none;transition:none}
  .ml-motion .ml-head::after{display:none}
  .ml-card:hover .ml-photo img{transform:none}
}