/* =====================================================================
   DÉMO PROSPECT FRESH FOOD (Marseille) · 03/11/2026
   Posé APRÈS skin-dark.css : même habillage noir, couleurs du logo
   (rouge brique + crème + bleu nuit) à la place de l'or.
   ===================================================================== */

html.skin-freshfood,html.skin-freshfood body{background:#0a0d10}
html.skin-freshfood #app{
  --brand:#c63a25;--brandText:#fff3df;--brand2:#0e1c26;
  --bg:#0a0d10;--card:#13171b;--elev:#191e23;--text:#f8eedc;--muted:#a9a196;
  --line:#272a2c;--hair:rgba(246,227,192,.09);--imgbg:#171b1f;
  --gold:#f3dcae;--gold-deep:#c63a25;--gold-soft:rgba(198,58,37,.16);--gold-line:rgba(198,58,37,.42);
  --ff-red:#c63a25;--ff-red2:#9e2a18;--ff-cream:#fff3df;
  background:radial-gradient(120% 60% at 50% -10%,#2a120d 0%,#0a0d10 58%) fixed,#0a0d10
}

/* barre du haut : logo rond + FRESH'FOOD */
html.v3.skin-freshfood #app .topbar{background:linear-gradient(to bottom,#0a0d10 76%,transparent)!important}
html.v3.skin-freshfood #app .topbar::before{content:"";order:0;width:38px;height:38px;min-height:38px;flex:0 0 38px;margin-right:8px;background:url('/img/freshfood/logo.png') center/contain no-repeat;border-radius:50%;box-shadow:0 0 0 1px rgba(246,227,192,.18)}
html.v3.skin-freshfood #app .topbar::after{content:"FRESH’FOOD";order:1;margin-left:0;font:900 24px/1 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:var(--ff-cream)}

/* hero : logo en médaillon, « ’ » rouge */
html.v3.skin-freshfood #app .hero{border-color:var(--gold-line)!important}
html.v3.skin-freshfood #app .hero-title span{color:var(--ff-red)!important}
html.v3.skin-freshfood #app .hero-badge{color:var(--ff-cream)!important;border-color:var(--gold-line)!important}
html.v3.skin-freshfood #app .hero::before{content:"";position:absolute;z-index:3;top:14px;right:14px;width:92px;height:92px;background:url('/img/freshfood/logo.png') center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.7))}

/* tout ce qui était « fond or + texte noir » devient rouge + crème */
html.v3.skin-freshfood #app .cat.active,html.v3.skin-freshfood #app .chip.on,html.v3.skin-freshfood #app .chip.incl.on,
html.v3.skin-freshfood #app .bs-rank,html.v3.skin-freshfood #app .card-plus,html.v3.skin-freshfood #app .hot,html.v3.skin-freshfood #app .c-qty,
html.v3.skin-freshfood #app .supp-check,html.v3.skin-freshfood #app .supp-badge,html.v3.skin-freshfood #app .toggle-row.on .tr-check,
html.v3.skin-freshfood #app .v3rd.on,html.v3.skin-freshfood #app .v3-seg button.on,html.v3.skin-freshfood #app .v3-seg .on{
  background:var(--ff-red)!important;border-color:var(--ff-red)!important;color:var(--ff-cream)!important}
html.v3.skin-freshfood #app .card-plus{box-shadow:0 6px 16px rgba(198,58,37,.35)!important}
html.v3.skin-freshfood #app .nws-d i.on,html.v3.skin-freshfood #app .v3prog b,html.v3.skin-freshfood #app .step-dots .sd.on,
html.v3.skin-freshfood #app .v3loy-b i.on{background:var(--ff-red)!important;border-color:var(--ff-red)!important}
html.v3.skin-freshfood #app .cartbar-in,html.v3.skin-freshfood #app .cta{background:linear-gradient(135deg,#d8492f,#a82d19)!important;color:var(--ff-cream)!important;box-shadow:0 16px 32px -14px rgba(198,58,37,.6)!important}
html.v3.skin-freshfood #app .cartbar-in *,html.v3.skin-freshfood #app .cta *{color:var(--ff-cream)!important}
html.v3.skin-freshfood #app .supp-card.on,html.v3.skin-freshfood #app .toggle-row.on,html.v3.skin-freshfood #app .v3mo.on,html.v3.skin-freshfood #app .v3mopt.on{border-color:var(--ff-red)!important}
html.v3.skin-freshfood #app .supp-card.on{box-shadow:0 0 0 1px var(--ff-red)!important}
html.v3.skin-freshfood #app .supp-add,html.v3.skin-freshfood #app .supp-step,html.v3.skin-freshfood #app .v3plus{border-color:var(--ff-red)!important}
html.v3.skin-freshfood #app .v3ithumb{background:radial-gradient(80% 80% at 50% 40%,#2a1712,#121518)!important}
html.v3.skin-freshfood #app .cf-numcard{background:linear-gradient(135deg,#22140f,#111417)!important}
html.v3.skin-freshfood #app .v3grp{background:linear-gradient(135deg,#161a1e,#101316)!important}
html.v3.skin-freshfood #app .v3gift{background:linear-gradient(135deg,rgba(198,58,37,.18),rgba(198,58,37,.05))!important}

/* ---------- photos du menu = petites (03/11, Tarik : « beaucoup plus petites ») ----------
   Les photos viennent du menu papier (environ 300 px) : jamais agrandies en plein cadre,
   toujours affichées entières au format panuozzo (2:1). */
/* hero sans photo : fond rouge sombre + logo en médaillon */
html.v3.skin-freshfood #app .hero{min-height:0!important;height:auto!important;background:radial-gradient(120% 120% at 85% 20%,#5a1a10 0%,#1a0f0d 55%,#0f1114 100%)!important}
html.v3.skin-freshfood #app .hero-img{display:none!important}
html.v3.skin-freshfood #app .hero::after{display:none!important}
html.v3.skin-freshfood #app .hero-inner{position:relative!important;padding:64px 20px 22px!important}
html.v3.skin-freshfood #app .hero-title{font-size:54px!important}
html.v3.skin-freshfood #app .hero::before{width:118px;height:118px;top:16px;right:14px}

/* carte : liste, vignette 2:1 entière */
html.v3.skin-freshfood #app .section .grid{display:flex!important;flex-direction:column;gap:10px!important}
html.v3.skin-freshfood #app .section .card,html.v3.skin-freshfood #app .section .card.featured{display:grid!important;grid-template-columns:96px 1fr;column-gap:14px;align-items:center;aspect-ratio:auto!important;min-height:0!important;padding:12px 12px!important;border-radius:16px!important;overflow:hidden!important}
html.v3.skin-freshfood #app .section .card-img,html.v3.skin-freshfood #app .section .card-media{grid-column:1;grid-row:1;position:relative!important;inset:auto!important;width:96px!important;height:64px!important;aspect-ratio:auto!important;border-radius:12px!important;object-fit:contain!important;padding:6px 4px;box-sizing:border-box;background:radial-gradient(90% 90% at 50% 50%,#3a1a12,#15181c)!important;opacity:1!important}
html.v3.skin-freshfood #app .section .card-ov{display:none!important}
html.v3.skin-freshfood #app .section .card-info{grid-column:2;grid-row:1;position:static!important;padding:0 44px 0 0!important;color:var(--text)!important}
html.v3.skin-freshfood #app .section .c-nm{font-size:17px!important;line-height:1.15!important;text-shadow:none!important;white-space:normal!important;color:var(--text)!important}
html.v3.skin-freshfood #app .section .c-desc{color:var(--muted)!important;opacity:1!important;text-shadow:none!important;font-size:12.5px!important;line-height:1.35!important;margin-top:4px!important;-webkit-line-clamp:2!important;white-space:normal!important}
html.v3.skin-freshfood #app .section .c-px{margin-top:6px!important;font-size:17px!important}
html.v3.skin-freshfood #app .section .card-plus{top:auto!important;bottom:50%!important;transform:translateY(50%);right:12px!important;width:36px!important;height:36px!important;font-size:20px!important}
html.v3.skin-freshfood #app .section .hot{position:absolute!important;top:8px!important;left:8px!important;z-index:2;font-size:10px!important;padding:1px 6px!important}

/* « les plus commandés » : vignettes 2:1 */
html.v3.skin-freshfood #app .bs-media{aspect-ratio:2/1!important;height:auto!important}
html.v3.skin-freshfood #app .bs-media{background:radial-gradient(90% 90% at 50% 50%,#3a1a12,#15181c)!important}
html.v3.skin-freshfood #app .bs-media img{object-fit:contain!important;padding:10px 12px;box-sizing:border-box}

/* fiche produit : photo au format 2:1, pas de zoom */
html.v3.skin-freshfood #app .v3ithumb{aspect-ratio:2.6/1!important;width:100%!important;max-width:none!important;margin:12px auto 0!important;background:radial-gradient(70% 80% at 50% 50%,#3a1a12,#121518)!important}
html.v3.skin-freshfood #app .v3ithumb img{object-fit:contain!important;width:58%!important;height:100%!important;margin:0 auto;display:block}
html.v3.skin-freshfood #app .v3ihead .icon-btn{top:calc(10px + env(safe-area-inset-top,0px));left:16px}