/* Explain: Styles for Mark Food app's screens, navigation, and drawers. */
/* MARKET HOME — Mark Food : coquille d'application (écrans, barre de navigation, fenêtres) */

/* ---------- Écrans ---------- */
.mf{position:relative;min-height:100vh}
.screen{display:none}
.screen.active{display:block;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.screen.nodock{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* ---------- Barre de navigation ---------- */
.mf .dock{position:fixed;z-index:30}
.dk .badge,.fab .badge{position:absolute;top:-4px;right:-4px}

/* ---------- Fenêtres ---------- */
.p-sheet{position:fixed;left:0;right:0;bottom:0;width:100%;max-height:min(92vh,760px);border-radius:28px 28px 0 0;opacity:0;transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.9,.15,1),opacity .4s ease}
.ov.show .p-sheet{opacity:1;transform:none}
.p-sheet.narrow{max-width:520px;margin-inline:auto}
.p-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);overflow:hidden;transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.9,.15,1)}
.ov.show .p-drawer{transform:none}
.grab{display:block;width:40px;height:5px;margin:12px auto 2px;border-radius:3px;background:var(--track)}
.p-drawer .grab{display:none}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 12px;box-shadow:0 1px 0 var(--stroke)}
.ph-t{min-width:0}
.ph-t h2{margin:0;font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.ph-t p{margin:2px 0 0;color:var(--muted);font-size:.86rem}
.ph .ibtn{width:40px;height:40px}
.onimg{width:44px;height:44px;color:#fff;background:rgba(10,12,18,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none}

/* ---------- Mosaïque de restaurant ---------- */
.mosaic{position:relative;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:100%;aspect-ratio:16/10;overflow:hidden}
.mo{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;background:var(--glass-strong)}
.mo .art{width:100%;height:100%}
.mo-big{grid-row:1/3}
.more-n{position:absolute;inset:auto 8px 8px auto;padding:3px 8px;border-radius:999px;font-size:.72rem;font-weight:700;color:#fff;background:rgba(10,12,18,.55)}

/* ---------- Grand écran : fenêtres centrées ---------- */
@media (min-width:760px){
  .p-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(940px,calc(100% - 48px));max-height:min(680px,calc(100% - 48px));border-radius:32px;opacity:0;transform:translate(-50%,-46%) scale(.96);transition:transform .5s cubic-bezier(.2,.9,.15,1),opacity .3s}
  .ov.show .p-sheet{opacity:1;transform:translate(-50%,-50%)}
  .p-sheet.narrow{width:min(520px,calc(100% - 48px))}
}