/* OHI — fiche produit (item-sheet) : bottom sheet mobile / modale desktop */
.sheet-root{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet-root[hidden]{display:none}
html.sheet-locked{overflow:hidden}

.sheet-backdrop{position:absolute;inset:0;background:rgba(30,26,32,.38);opacity:0;transition:opacity .35s var(--ease)}
.sheet-root.is-open .sheet-backdrop{opacity:1}

.sheet-panel{position:relative;display:flex;flex-direction:column;width:100%;max-height:92svh;background:var(--rice);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-2);overflow:hidden;overflow:clip;outline:none;
  transform:translateY(100%);transition:transform .42s var(--ease)}
.sheet-root.is-open .sheet-panel{transform:translateY(0)}
.sheet-root.is-closing .sheet-panel{transform:translateY(100%);transition-duration:.34s}

/* Poignée */
.sheet-grab{position:absolute;top:0;inset-inline:0;height:28px;z-index:3;display:flex;justify-content:center;padding-top:9px;touch-action:none;cursor:grab}
.sheet-handle{width:42px;height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(30,26,32,.08)}
.sheet-nophoto .sheet-handle{background:var(--line);box-shadow:none}

/* Fermer */
.sheet-close{position:absolute;top:12px;inset-inline-end:12px;z-index:4;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-1);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sheet-close:hover{background:var(--plum-soft);color:var(--plum-deep)}

/* Zone défilante */
.sheet-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet-media{margin:0;aspect-ratio:16/10;background:var(--washi);overflow:hidden}
.sheet-media img{width:100%;height:100%;object-fit:cover}
.sheet-nophoto .sheet-scroll{padding-top:var(--sp-6)}

.sheet-head{padding:var(--sp-5) 16px var(--sp-4);border-bottom:1px solid var(--line)}
.sheet-title{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:500;color:var(--ink);padding-inline-end:var(--sp-6)}
.sheet-media + .sheet-head .sheet-title{padding-inline-end:0}
.sheet-desc{margin-top:var(--sp-2);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.sheet-base{margin-top:var(--sp-3);color:var(--plum);font-size:var(--fs-lg)}

/* Groupes d'options */
.sheet-groups{padding:var(--sp-2) 0}
.sheet-group{border:0;margin:0;padding:var(--sp-4) 16px var(--sp-3);border-bottom:1px solid var(--line);border-inline-start:3px solid transparent;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);scroll-margin:var(--sp-6)}
.sheet-group.is-missing{border-inline-start-color:var(--plum);background:rgba(152,31,125,.035)}
.sheet-legend{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;padding:0;margin-bottom:var(--sp-2)}
.sheet-gtitle{font-weight:600;font-size:var(--fs-md);color:var(--ink)}
.sheet-hint{flex:none;white-space:nowrap;font-size:var(--fs-xs);font-weight:500;padding:.2em .7em;border-radius:var(--r-pill);background:var(--washi);color:var(--ink-2)}
.sheet-group.is-missing .sheet-hint{background:var(--plum-soft);color:var(--plum-deep)}
.sheet-group.is-done .sheet-hint{background:rgba(141,163,87,.16);color:var(--nori)}

.sheet-val{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:var(--sp-1) 0;cursor:pointer;border-bottom:1px dashed rgba(230,221,208,.7);-webkit-tap-highlight-color:transparent}
.sheet-val:last-child{border-bottom:0}
.sheet-vname{flex:1;font-size:var(--fs-md);color:var(--ink);line-height:1.35}
.sheet-val.is-on .sheet-vname{font-weight:500}
.sheet-vprice{font-size:var(--fs-sm);color:var(--ink-2);font-weight:500}
.sheet-val.is-disabled{cursor:not-allowed}
.sheet-val.is-disabled .sheet-vname,.sheet-val.is-disabled .sheet-vprice{color:var(--ink-3)}

/* Contrôles natifs masqués, marques personnalisées */
.sheet-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sheet-mark{flex:none;width:22px;height:22px;border:1.5px solid var(--ink-3);background:var(--paper);display:grid;place-items:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.sheet-mark-radio{border-radius:50%}
.sheet-mark-check{border-radius:6px}
.sheet-mark-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--plum);transform:scale(0);transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.sheet-mark-check svg{color:#fff;display:block}
.sheet-mark-check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .28s var(--ease) .06s}
.sheet-input:checked + .sheet-mark{border-color:var(--plum)}
.sheet-input:checked + .sheet-mark-radio::after{transform:scale(1)}
.sheet-input:checked + .sheet-mark-check{background:var(--plum)}
.sheet-input:checked + .sheet-mark-check path{stroke-dashoffset:0}
.sheet-input:checked + .sheet-mark{animation:sheet-tap .32s var(--ease)}
@keyframes sheet-tap{40%{transform:scale(.86)}100%{transform:scale(1)}}
.sheet-input:focus-visible + .sheet-mark{outline:2px solid var(--plum);outline-offset:3px}
.sheet-input:disabled + .sheet-mark{border-color:var(--line);background:var(--washi)}

/* Valeurs avec quantité (sauces…) */
.sheet-val-step{cursor:default}
.sheet-mini{flex:none;display:inline-flex;align-items:center;gap:2px}
.sheet-mbtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--ink);background:var(--paper);transition:border-color .2s var(--ease),background .2s var(--ease),opacity .2s}
.sheet-mbtn:hover:not(:disabled){border-color:var(--plum);color:var(--plum)}
.sheet-mbtn:disabled{opacity:.35;cursor:not-allowed}
.sheet-mval{min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-sm)}
.sheet-val-step:not(.is-on) .sheet-mbtn[data-step="-1"],.sheet-val-step:not(.is-on) .sheet-mval{visibility:hidden}
.sheet-val-step.is-on .sheet-mbtn[data-step="1"]{border-color:var(--plum);color:var(--plum)}
.sheet-val-step.is-on .sheet-mbtn[data-step="1"]:disabled{border-color:var(--line);color:var(--ink)}

/* Secousse du groupe manquant */
.sheet-shake{animation:sheet-shake .45s var(--ease)}
@keyframes sheet-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Note cuisine */
.sheet-note{padding:var(--sp-3) 16px var(--sp-5)}
.sheet-note-sum{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;cursor:pointer;list-style:none;font-weight:500;color:var(--ink-2)}
.sheet-note-sum::-webkit-details-marker{display:none}
.sheet-note-sum::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);font-size:.9rem;line-height:1;transition:transform .25s var(--ease)}
.sheet-note[open] .sheet-note-sum::before{transform:rotate(45deg)}
.sheet-note-opt{font-size:var(--fs-xs);color:var(--ink-3);font-weight:400}
.sheet-note-input{display:block;width:100%;margin-top:var(--sp-2);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);resize:vertical;min-height:72px;font-size:16px}
.sheet-note-input:focus{outline:none;border-color:var(--plum)}

/* Pied collant */
.sheet-foot{flex:none;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 16px calc(var(--sp-3) + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
.sheet-qty{flex:none;display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}
.sheet-qbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink)}
.sheet-qbtn:disabled{color:var(--ink-3);cursor:not-allowed}
.sheet-qval{min-width:1.6em;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.sheet-add{position:relative;overflow:hidden;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:50px;padding:.7em 1.2em;border-radius:var(--r-pill);background:var(--plum);color:#fff;font-weight:600;font-size:var(--fs-md);transition:background var(--dur) var(--ease),transform .15s var(--ease),opacity var(--dur) var(--ease)}
.sheet-add:hover{background:var(--plum-deep)}
.sheet-add:active{transform:scale(.98)}
.sheet-add.is-disabled{background:var(--ink-3);opacity:.75}
.sheet-add.is-disabled:hover{background:var(--ink-3)}
.sheet-add-dot{opacity:.6}
.sheet-add-label{display:inline-flex;align-items:center;gap:.45em;transition:transform .35s var(--ease),opacity .25s var(--ease)}
.sheet-add-done{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none}
.sheet-add-done path{stroke-dasharray:1;stroke-dashoffset:1}
.sheet-add.is-added{background:var(--plum-deep)}
.sheet-add.is-added .sheet-add-label{transform:translateY(-120%);opacity:0}
.sheet-add.is-added .sheet-add-done{opacity:1}
.sheet-add.is-added .sheet-add-done path{transition:stroke-dashoffset .38s var(--ease) .12s;stroke-dashoffset:0}

/* Prix qui roule */
.sheet-add-price{display:inline-block}
.sheet-roll{display:inline-flex;vertical-align:bottom;unicode-bidi:isolate}
.sheet-roll-d{display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden}
.sheet-roll-col{display:flex;flex-direction:column;transition:transform .5s var(--ease);will-change:transform}
.sheet-roll-col>span{height:1.25em;text-align:center}
.sheet-roll-s{line-height:1.25em}

/* Ouverture : photo qui se dévoile, puis contenu en cascade */
.sheet-root.is-entering .sheet-media{animation:sheet-unveil .75s var(--ease) .1s both}
.sheet-root.is-entering .sheet-media img{animation:sheet-settle 1.1s var(--ease) .1s both}
.sheet-root.is-entering .sheet-head,.sheet-root.is-entering .sheet-group,.sheet-root.is-entering .sheet-note,.sheet-root.is-entering .sheet-foot{animation:sheet-rise .5s var(--ease) both;animation-delay:calc(.28s + var(--i,0) * 55ms)}
.sheet-root.is-entering .sheet-foot{--i:2}
@keyframes sheet-unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sheet-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes sheet-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sheet-hint.sheet-pop{animation:sheet-pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes sheet-pop{0%{transform:scale(.85)}100%{transform:scale(1)}}

/* Desktop : modale centrée */
@media (min-width:720px){
  .sheet-root{align-items:center;padding:var(--sp-6)}
  .sheet-panel{max-width:560px;max-height:min(88vh,860px);border-radius:var(--r-lg);transform:translateY(16px) scale(.97);opacity:0;transition:transform .4s var(--ease),opacity .3s var(--ease)}
  .sheet-root.is-open .sheet-panel{transform:none;opacity:1}
  .sheet-root.is-closing .sheet-panel{transform:translateY(10px) scale(.98);opacity:0;transition-duration:.28s}
  .sheet-root.is-closing.is-added .sheet-panel{transform:translateY(56px);opacity:0;transition-duration:.42s}
  .sheet-grab{display:none}
  .sheet-head,.sheet-group,.sheet-note{padding-inline:var(--sp-6)}
  .sheet-group{padding-inline-start:calc(var(--sp-6) - 3px)}
  .sheet-foot{padding:var(--sp-4) var(--sp-6)}
}

@media (max-width:719px){
  .sheet-root.is-entering .sheet-head,.sheet-root.is-entering .sheet-group,.sheet-root.is-entering .sheet-note{animation-duration:.4s;animation-delay:calc(.22s + var(--i,0) * 35ms)}
  .sheet-root.is-entering .sheet-media img{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .sheet-root .sheet-media,.sheet-root .sheet-media img,.sheet-root .sheet-head,.sheet-root .sheet-group,.sheet-root .sheet-note,.sheet-root .sheet-foot,.sheet-mark,.sheet-hint{animation:none!important}
  .sheet-panel,.sheet-root.is-open .sheet-panel,.sheet-root.is-closing .sheet-panel{transition:none}
  .sheet-shake{animation:none}
}

/* Mentions du groupe (sélections offertes + obligatoire/facultatif) */
.sheet-hints{flex:none;display:inline-flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.sheet-free{font-size:var(--fs-xs);font-weight:500;color:var(--wasabi);white-space:nowrap}