/* Explain: Styles for food cards, restaurant cards, and menu items. */
/* MARKET HOME — Mark Food : rails, catégories, plat du moment, cartes restaurants & plats */

/* ---------- En-tête de section ---------- */
.hsec{padding-block:16px 6px}
.hsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.hsec-head h2{margin:0;font-family:var(--font-heading);font-weight:600;font-size:1.2rem;letter-spacing:-.02em}
.hsec-head a{font-size:.82rem;font-weight:600;color:var(--food);text-decoration:none;white-space:nowrap}
.hsec-head a i{font-size:11px;margin-left:4px}

.sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 14px}
.sec h2{margin:0;font-family:var(--font-heading);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.35rem);letter-spacing:-.025em}
.sec-n{color:var(--muted);font-size:.85rem}

/* ---------- Rails horizontaux (pleine largeur) ---------- */
.hscroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
  padding:4px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  scroll-padding-inline:16px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{scroll-snap-align:start;flex:none}

/* ---------- Catégories ---------- */
.cats{margin-top:16px}
.cat{flex:none;display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;font-weight:600;font-size:.9rem;white-space:nowrap;color:var(--fg);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--stroke);scroll-snap-align:start;transition:transform .2s,background .3s,color .3s,box-shadow .3s}
.cat:active{transform:scale(.95)}
.cat-all{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--glass);margin-left:-6px}
.cat-all i{font-size:14px}
.cat[aria-pressed="true"]{color:#fff;background:linear-gradient(135deg,var(--food),var(--food-2));box-shadow:0 10px 24px -10px var(--food)}
.cat[aria-pressed="true"] .cat-all{background:rgba(255,255,255,.22)}

/* ---------- Plat du moment ---------- */
.feat{position:relative;display:block;width:100%;min-height:178px;margin-top:22px;padding:22px;border:0;border-radius:30px;overflow:hidden;text-align:left;color:#fff;background:linear-gradient(130deg,var(--food),var(--food-2));box-shadow:0 26px 60px -30px var(--food)}
.feat::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 50%,rgba(0,0,0,.3),transparent 70%);pointer-events:none}
.feat-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;max-width:calc(100% - 140px)}
.kick{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.feat .kick{color:rgba(255,255,255,.82)}
.feat-name{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.25rem,3.2vw,1.9rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.feat-r{font-size:.9rem;opacity:.88}
.feat-cta{white-space:nowrap;margin-top:10px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:999px;cursor:pointer;font-weight:700;font-size:.86rem;color:#1A0E0B;background:rgba(255,255,255,.95);font-variant-numeric:tabular-nums;transition:transform .2s}
.feat-cta:active{transform:scale(.96)}
.feat-cta i{font-size:13px}
.feat-plate{position:absolute;right:-40px;top:50%;width:clamp(190px,26vw,260px);aspect-ratio:1;max-width:none;object-fit:cover;border-radius:50%;translate:0 -50%;animation:spin 70s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Carte restaurant ---------- */
.rc{flex:none;width:min(80vw,320px);display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--glass);box-shadow:inset 0 0 0 1px var(--stroke),0 18px 40px -28px var(--shadow);scroll-snap-align:start;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.rc:hover{transform:translateY(-3px)}
.rc-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.rc-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rc:hover .rc-cover img{transform:scale(1.06)}
.rc-cover .art{width:100%;height:100%}
.demo-pill{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(10,12,18,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rc-body{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
.mono{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;overflow:hidden;font-family:var(--font-heading);font-weight:700;font-size:.8rem;letter-spacing:-.02em;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mono img{width:100%;height:100%;object-fit:cover}
.rc-txt{display:flex;flex-direction:column;min-width:0}
.rc-name{font-weight:700;font-size:1.02rem}
.rc-cui{color:var(--muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-stats,.stats{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.rc-stats{padding:4px 16px 12px}
.stats span,.rc-stats span{display:inline-flex;align-items:center;gap:4px}
.stats i,.rc-stats i{font-size:12px}
.star{color:var(--market)}
.rc-actions{display:flex;gap:8px;padding:0 16px 16px}
.rc-btn{flex:1;text-align:center;padding:9px 10px;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none;background:var(--primary-color);color:#fff;transition:transform .2s}
.rc-btn:active{transform:scale(.97)}
.rc-btn.alt{background:var(--accent-color)}
.rc-btn i{margin-right:4px}

/* ---------- Grille de plats ---------- */
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.dgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dc{display:flex;flex-direction:column;padding:8px 8px 14px;border-radius:26px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--stroke),0 18px 40px -28px var(--shadow);animation:cardIn .6s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.dc-media{position:relative}
.dc-img{display:block;width:100%;aspect-ratio:1;border-radius:20px;overflow:hidden}
.dc-img .art{width:100%;height:100%}
.art{position:relative;display:block;overflow:hidden;background:rgba(238,70,60,.08)}
.art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.art-ph{display:grid;place-items:center;color:rgba(238,70,60,.5)}
.art-ph i{font-size:24px}
.dc:hover .art img{transform:rotate(18deg) scale(1.05)}
.price{position:absolute;left:8px;bottom:8px;padding:5px 11px;border-radius:999px;pointer-events:none;font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums;color:#fff;background:linear-gradient(135deg,var(--food),var(--food-2));box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.fav{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(10,12,18,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fav i{font-size:16px}
.fav[aria-pressed="true"]{color:#FF5A6E}
.fav.beat{animation:beat .5s cubic-bezier(.2,1.6,.4,1)}
.add{position:absolute;right:8px;bottom:8px;z-index:2;width:36px;height:36px;border:0;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--bg);background:var(--fg);box-shadow:0 8px 18px -8px rgba(0,0,0,.6);transition:transform .2s}
.add:active{transform:scale(.86)}
.add i{font-size:15px}
.dc-meta{display:flex;flex-direction:column;gap:3px;padding:12px 6px 0}
.dc-name{margin:0;font-weight:700;font-size:.98rem;line-height:1.25;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.dc-r{margin:0;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes beat{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}}

@media (max-width:520px){
  .feat-plate{width:150px;right:-46px}
  .feat-txt{max-width:calc(100% - 80px)}
}

/* ---------- États vides ---------- */
.empty-filter{margin:14px 0;text-align:center;font-size:.88rem;color:var(--text-muted)}
.empty-state{padding:40px 20px;text-align:center;border-radius:24px;background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--stroke)}
.empty-state i{font-size:26px;color:var(--food);margin-bottom:10px}
.empty-state h3{margin:0 0 4px;font-size:1rem;font-weight:800}
.empty-state p{margin:0;font-size:.85rem;color:var(--text-muted)}