/* ============================================================
   PORTAIL PUBLIC FINO — Style autonome (charte cohérente Fino Gestion)
   Mobile-first : la majorité des clients commandent au téléphone.
   DIRECTION VISUELLE : « Trattoria dark & chaleureux » (2026-07).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root{
  --rouge:#C8362E; --rouge-fonce:#9E2820; --rouge-clair:#F0776B;
  --creme:#F4EFE6; --creme-2:#C6BAAC; --noir:#1a1714;
  --bg:#221E1B; --bg-bas:#17130F; --panel:#26211D; --surface:#2E2723; --surface-h:#392F29;
  --line:rgba(244,239,230,.09); --line-fort:rgba(244,239,230,.16);
  --or:#E8B878; --vert:#6cc07a; --orange:#e8a23d; --gris:#9d9186;
  --ambiance:radial-gradient(circle at 50% 36%, #3d322b 0%, #271f1b 62%, #201a16 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;color:var(--creme);background-color:var(--bg);
  background:radial-gradient(125% 70% at 50% -8%, #302823 0%, #221E1B 52%, #1A1613 100%) fixed;
  min-height:100vh;display:flex;flex-direction:column}
/* Grain discret pour le « fond texturé sombre » */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Barre du haut ===== */
.topbar{position:sticky;top:0;z-index:10;background:var(--bg-bas);color:var(--creme);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.topbar .marque{font-family:'Fraunces',serif;font-weight:700;font-size:26px;color:var(--rouge-clair)}
.topbar .marque span{color:var(--creme)}
.topbar .retour{font-size:14px;opacity:.85;background:rgba(244,239,230,.12);padding:8px 14px;border-radius:999px}
.topbar .retour:active{transform:scale(.97)}

/* ===== Conteneur ===== */
.conteneur{width:100%;max-width:1100px;margin:0 auto;padding:20px 16px 40px;flex:1}

/* ===== Accueil ===== */
.hero{text-align:center;padding:18px 6px 26px}
.hero h1{font-family:'Fraunces',serif;font-weight:700;font-size:30px;line-height:1.1}
.hero-sous{color:var(--creme-2);margin-top:10px;font-size:15px;line-height:1.5}

.restos{display:grid;gap:16px}
.resto-carte{background:var(--surface);border-radius:18px;padding:20px;box-shadow:0 6px 24px rgba(0,0,0,.35);
  border:1px solid var(--line);transition:transform .12s,border-color .12s,box-shadow .12s;display:block}
.resto-carte:active{transform:scale(.99)}
.resto-carte:hover{border-color:var(--rouge);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.resto-mode{background:rgba(200,54,46,.18);color:var(--rouge-clair);font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:999px;white-space:nowrap}

/* ===== Menu ===== */
.menu-entete{margin-bottom:8px}
.menu-entete h1{font-family:'Fraunces',serif;font-size:28px;font-weight:700}
.menu-sous{color:var(--creme-2);font-size:14px;margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.cat{margin-top:26px}
.produit{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.32);display:flex;align-items:stretch}

/* Indisponible : grisé */
.produit.indispo{opacity:.55;filter:grayscale(.4)}

/* ===== Message API indisponible ===== */
.message-indispo{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:40px 22px;
  text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.35);margin-top:24px}
.message-indispo .mi-ic{font-size:46px;margin-bottom:10px}
.message-indispo h2{font-family:'Fraunces',serif;font-size:22px;margin-bottom:8px}
.message-indispo p{color:var(--creme-2);margin-bottom:18px}
.btn-portail{display:inline-block;background:var(--rouge);color:#fff;font-weight:600;padding:12px 22px;border-radius:12px;outline:none;border:none;box-shadow:0 8px 22px rgba(200,54,46,.32)}

/* ===== Pied ===== */
.pied{background:var(--bg-bas);color:var(--creme);text-align:center;padding:22px 16px;font-size:14px;
  border-top:1px solid var(--line)}
.pied .petit{color:var(--creme-2);opacity:.8;font-size:12px;margin-top:4px}

/* ===== Écrans plus larges ===== */
@media(min-width:560px){
  .produits-grille{grid-template-columns:1fr 1fr}
}
@media(min-width:720px){
  .hero h1{font-size:40px}
  .restos{grid-template-columns:1fr 1fr}
  .menu-entete h1{font-size:34px}
}
.sf-step{display:flex;align-items:center;gap:10px;flex:none}
.sf-step button{width:42px;height:42px;border-radius:11px;border:1px solid var(--line-fort);background:var(--surface-h);
  font-size:22px;line-height:1;cursor:pointer;color:var(--creme)}
.sf-step button:active{transform:scale(.95)}
.sf-step span{min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.sf-btn-clair{background:var(--surface-h);border:1px solid var(--line-fort);color:var(--creme);font-weight:600;
  padding:12px 18px;border-radius:12px;cursor:pointer}

/* Pastille panier client (local{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;
  background:var(--rouge);color:#fff;border:0;border-radius:999px;padding:12px 18px;font-size:15px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:default}

/* ===== Ajout au panier (menu) ===== */
.btn-ajout{margin-top:8px;align-self:flex-start;background:var(--rouge);color:#fff;border:0;border-radius:10px;
  padding:9px 16px;font-size:15px;font-weight:600;cursor:pointer}
.btn-ajout:active{transform:scale(.97)}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:60;background:#0f0c0a;color:#fff;
  padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;transition:opacity .2s;box-shadow:0 6px 20px rgba(0,0,0,.45);border:1px solid var(--line)}
.toast.on{opacity:1}

/* ===== Page panier / commande ===== */
.cmd-bloc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:16px;box-shadow:0 4px 18px rgba(0,0,0,.32)}
.cmd-h2{font-family:'Fraunces',serif;font-size:19px;margin-bottom:12px}
.cart-lignes{display:flex;flex-direction:column;gap:10px}
.cart-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cart-l-nom{flex:1;min-width:120px;font-weight:600}
.cart-l-prix{font-weight:700;color:var(--rouge-clair);min-width:70px;text-align:right}
.cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:18px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:12px}
.cmd-lien{display:inline-block;margin-top:12px;color:var(--rouge-clair);font-weight:600}
.cmd-lab{display:block;font-size:14px;font-weight:600;margin-bottom:12px}
.cmd-lab .req{color:var(--rouge-clair)}
.cmd-in{display:block;width:100%;margin-top:5px;padding:12px;border:1px solid var(--line-fort);border-radius:10px;
  font-size:16px;font-weight:400;background:var(--panel);color:var(--creme);font-family:inherit}
.cmd-in::placeholder{color:var(--creme-2);opacity:.6}
.cmd-in:focus{outline:none;border-color:var(--rouge)}
.cmd-check{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:4px}
.cmd-soon{color:var(--gris);font-size:12px}
.cmd-radio{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding:10px 0}
.cmd-ferme{background:rgba(232,162,61,.18);border-radius:10px;padding:12px;font-size:14px;margin-bottom:10px}
.cmd-horaires{font-size:14px;color:var(--vert);font-weight:600;margin:2px 0 6px}
.cmd-warn{background:rgba(200,54,46,.16);color:var(--rouge-clair);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;margin-top:4px}
.cmd-err{background:rgba(200,54,46,.16);color:var(--rouge-clair);border-radius:10px;padding:12px;margin-top:14px;font-weight:600}
.cmd-envoyer{display:block;width:100%;margin-top:18px;text-align:center;border:0;font-size:17px;cursor:pointer}
.cmd-vide{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:40px 20px;text-align:center;margin-top:20px;box-shadow:0 4px 18px rgba(0,0,0,.32)}
.cmd-confirm{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:40px 24px;text-align:center;margin-top:20px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.cmd-confirm .cc-ic{font-size:48px;margin-bottom:8px}
.cmd-confirm h2{font-family:'Fraunces',serif;font-size:24px;margin-bottom:10px}
.cmd-confirm p{font-size:16px;line-height:1.5;margin-bottom:18px}

/* ===== Navigation par familles (menu mobile-first) ===== */
.fam-accueil{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.fam-carte{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--ambiance);box-shadow:0 6px 20px rgba(0,0,0,.35);padding:0;display:block;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.fam-carte:active{transform:scale(.98)}
.fam-carte:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.5);border-color:rgba(200,54,46,.55)}
.fam-carte-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fam-carte::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,14,.04) 30%,rgba(18,14,12,.5) 68%,rgba(14,10,8,.88) 100%)}
.fam-carte-nom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 10px 13px;text-align:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:18px;color:var(--creme);
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fam-carte.sans-photo{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce))}
.fam-carte.sans-photo::after{display:none}
.fam-carte.sans-photo .fam-carte-nom{text-shadow:none}
@media(min-width:560px){ .fam-accueil{grid-template-columns:1fr 1fr 1fr} }
@media(min-width:900px){ .fam-accueil{grid-template-columns:repeat(4,1fr)} }

/* ===== Bouton panier dans le header (unique pastille panier) ===== */
.topbar-cart{display:inline-flex;align-items:center;gap:6px;background:var(--rouge);color:#fff;
  font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;font-variant-numeric:tabular-nums}
.topbar-cart:active{transform:scale(.97)}

/* ===== Panneau menu (dalles -> panneau ; un seul niveau visible) ===== */
.panneau-overlay{position:fixed;inset:0;background:rgba(10,8,6,.6);z-index:50;display:none}
.panneau-overlay.on{display:flex;align-items:stretch;justify-content:center}
.panneau{background:var(--bg);width:100%;display:flex;flex-direction:column;max-height:100vh;max-height:100dvh}
.panneau-top{flex:none;display:flex;align-items:center;gap:10px;background:var(--bg-bas);color:var(--creme);
  padding:12px 14px;border-bottom:1px solid var(--line)}
.pan-btn{flex:none;width:42px;height:42px;border-radius:11px;border:0;background:rgba(244,239,230,.14);color:var(--creme);
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pan-btn:active{transform:scale(.95)}
.pan-titre{flex:1;min-width:0;font-family:'Fraunces',serif;font-size:20px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panneau-corps{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
.panneau-actions{flex:none;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:transparent;
  box-shadow:none}
.panneau-actions .btn-portail{display:flex;flex-direction:row;align-items:center;width:100%;border:0;font-size:17px;cursor:pointer}
.panneau-actions .btn-portail:disabled{opacity:.45;cursor:default}

.pan-grille{display:grid;grid-template-columns:1fr;gap:12px}
.pan-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:10px;box-shadow:0 2px 12px rgba(0,0,0,.28);cursor:pointer;color:var(--creme)}
.pan-row:hover{border-color:var(--rouge);background:var(--surface-h)}
.pan-row:active{transform:scale(.99)}
.pan-row.indispo{opacity:.55;filter:grayscale(.4);cursor:default}
.pan-row.indispo:hover{border-color:var(--line)}
.pan-row-photo{width:64px;height:64px;flex:none;border-radius:11px;overflow:hidden;background:var(--ambiance);
  display:flex;align-items:center;justify-content:center;font-size:28px}
.pan-row-photo img{width:64px;height:64px;object-fit:cover}
.pan-row-info{flex:1;min-width:0}
.pan-row-nom{font-weight:600;line-height:1.25}
.pan-row-sous{font-size:13px;line-height:1.35;color:var(--creme-2);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.plat-wrap.open .pan-row-sous{
  display:block;-webkit-line-clamp:unset;overflow:visible;
}
.pan-row-prix{font-size:14px;color:var(--rouge-clair);font-weight:700;margin-top:2px}
.pan-chev{flex:none;color:var(--gris);font-size:26px;line-height:1;padding:0 4px}
.pan-badge{flex:none;background:var(--rouge);color:#fff;font-size:12px;font-weight:700;
  min-width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 7px}

/* Photo plat : zone CARRÉE (sources 600x600), image entière (contain) sur FOND AMBIANCE{display:block;width:100%;max-width:340px;margin:0 auto 4px;aspect-ratio:1/1;
  object-fit:contain;background:var(--ambiance);border-radius:16px;box-shadow:0 14px 30px rgba(0,0,0,.4)}

@media(min-width:560px){
  .panneau-overlay.on{align-items:center}
  .panneau{max-width:560px;max-height:90vh;border-radius:18px;overflow:hidden}
}

/* ===== Compte client (socle) : onglets inscription/connexion ===== */
.compte-tabs{display:flex;gap:8px;margin:8px 0 14px}
.compte-tab{flex:1;text-align:center;background:var(--surface);border:1px solid var(--line-fort);border-radius:12px;
  padding:11px 12px;font-weight:600;color:var(--creme)}
.compte-tab.actif{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.compte-tab:active{transform:scale(.99)}
.compte-form .cmd-envoyer{margin-top:16px}

/* ===== Compte : bannière panier + profil + historique ===== */
.compte-banniere{background:rgba(108,192,122,.14);color:var(--vert);border-radius:10px;padding:10px 12px;
  font-size:14px;font-weight:600;margin-bottom:12px}
.compte-banniere a{color:var(--rouge-clair)}
.compte-profil{list-style:none;display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
.compte-profil li{font-size:15px}
.compte-profil li span{display:inline-block;min-width:90px;color:var(--creme-2);font-size:13px}
.cmd-histo{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px}
.cmd-histo-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cmd-histo-num{font-weight:700}
.cmd-histo-date{font-size:13px;color:var(--creme-2);margin-top:2px}
.cmd-statut{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.cmd-statut.st-ok{background:rgba(108,192,122,.18);color:var(--vert)}
.cmd-statut.st-attente{background:rgba(232,162,61,.20);color:var(--or)}
.cmd-statut.st-annule{background:rgba(200,54,46,.18);color:var(--rouge-clair)}
.cmd-histo-lignes{list-style:none;margin:10px 0 8px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.cmd-histo-lignes .q{font-weight:700;color:var(--rouge-clair);font-variant-numeric:tabular-nums}
.cmd-histo-lignes em{color:var(--creme-2);font-style:normal}
.cmd-histo-total{text-align:right;font-size:15px;border-top:1px solid var(--line);padding-top:8px}

/* ── Expand inline plat (UX Uber Eats) ── */
.plat-wrap { margin-bottom: 10px; }
.plat-wrap.open .pan-row {
  border-radius: 14px 14px 0 0;
  border-color: var(--rouge);
}
.plat-supp-section { border-bottom: 1px solid var(--line); display:block; width:100%; }
.plat-supp-fam-sec + .plat-supp-fam-sec { margin-top: 2px; }
.plat-supp-hdr {
  width: 100%; text-align: left; background: none; border: none;
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; color: inherit;
}
.plat-supp-hdr::after { content: '›'; font-size: 16px; opacity: .4; transition: transform .2s; }
.plat-supp-section.open .plat-supp-hdr::after { transform: rotate(90deg); }
.plat-supp-body { display: none; flex-wrap: wrap; gap: 6px; padding: 4px 4px 12px; }
.plat-supp-section.open .plat-supp-body { display: flex; }
.plat-remarque-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-fort);
  border-radius: 10px; font-size: 16px; font-family: inherit;
  resize: none; background: var(--panel); color: var(--creme);
}
.plat-remarque-input::placeholder { color: var(--creme-2); opacity:.6; }
.plat-remarque-input:focus { outline: none; border-color: var(--rouge); }

/* ── Familles accordion dans suppléments ── */
.plat-supp-fam-sec { border-bottom: 1px solid var(--line); }
.plat-supp-fam-hdr {
  width: 100%; text-align: left; background: none; border: none;
  padding: 10px 4px; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; color: var(--creme); text-transform: uppercase;
  letter-spacing: .04em;
}
.plat-supp-fam-hdr::after { content: '›'; font-size: 15px; transition: transform .2s; }
.plat-supp-fam-sec.open .plat-supp-fam-hdr::after { transform: rotate(90deg); }
.plat-supp-fam-body {
  display: none; flex-wrap: wrap; gap: 6px; padding: 4px 4px 12px;
}
.plat-supp-fam-sec.open .plat-supp-fam-body { display: flex; }

/* ── Fiche plat style Uber Eats ── */
/* LE POINT CLÉ : conteneur photo = fond ambiance chaleureux (plus de bandes blanches). */
.rp-photo { display:block; width:100%; height:auto; max-height:420px; object-fit:contain; background:var(--ambiance);
  border-radius:16px; box-shadow:0 14px 30px rgba(0,0,0,.42); }
.rp-header { padding:16px 16px 8px; }
.rp-nom { font-size:22px; font-weight:700; margin-bottom:6px; }
.rp-prix { font-size:18px; font-weight:700; color:var(--rouge-clair); }
.rp-desc { font-size:14px; line-height:1.6; color:var(--creme-2); padding:0 16px 12px; }
.rp-supps { padding:0 16px; }
.rp-footer { display:flex; flex-direction:column; gap:6px; padding:0; }
.rp-btn-ajout { width:100%; }

.rp-btn-moins, .rp-btn-plus {
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:300; flex-shrink:0;
  margin:0 12px;
}
.rp-btn-label { flex:1; text-align:center; font-size:15px; font-weight:600; padding:0 8px; }
.rp-btn-ajout { display:flex; flex-direction:row; align-items:center; width:100%; min-height:52px; padding:0 14px; gap:0; justify-content:space-between; }

.rp-supps{ padding:0; }
.cmp-wrap{margin:14px 0}
.cmp-quota{position:sticky;top:0;z-index:5;background:var(--rouge);color:#fff;padding:8px 14px;border-radius:10px;font-weight:700;font-size:14px;text-align:center;margin-bottom:10px}
.cmp-sec{margin-bottom:14px}
.cmp-sec-titre{font-weight:700;font-size:14px;margin-bottom:7px;color:var(--creme)}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.cmp-dalle{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--ambiance);border:2px solid transparent;cursor:pointer}
.cmp-dalle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-dalle-bd{position:absolute;left:0;right:0;bottom:0;background:rgba(15,11,9,.78);padding:4px 6px}
.cmp-dalle-nom{color:#fff;font-size:12.5px;font-weight:700;line-height:1.15}
.cmp-dalle-px{color:var(--or);font-size:11px}
.cmp-dalle.sel{border-color:var(--rouge);box-shadow:0 0 0 2px rgba(200,54,46,.45)}
.cmp-dalle.sel::after{content:'\2713';position:absolute;top:5px;right:5px;background:var(--rouge);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.cmp-dalle.dis{opacity:.35}

/* ===== Accueil : cartes resto visuelles ===== */
.hero .fil{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--creme-2);font-family:'Fraunces',serif;font-size:14px;margin-top:14px}
.hero .fil::before,.hero .fil::after{content:"";height:1px;width:36px;background:var(--line-fort)}
.resto-carte{padding:0;overflow:hidden}
.rc-visuel{position:relative;height:150px;overflow:hidden}
.rc-visuel img{width:100%;height:100%;object-fit:cover}
.rc-visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,.05) 30%,rgba(26,20,17,.72) 85%,#2E2723 100%)}
.rc-statut{position:absolute;top:12px;left:12px;z-index:2;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.rc-statut.ouvert{background:rgba(37,80,44,.85);color:#8fe39d;border:1px solid rgba(143,227,157,.35)}
.rc-statut.ferme{background:rgba(80,30,26,.85);color:#f0a49c;border:1px solid rgba(240,164,156,.3)}
.rc-statut .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.rc-mode{position:absolute;top:12px;right:12px;z-index:2;background:rgba(20,15,12,.75);color:var(--creme);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line-fort)}
.rc-nom{position:absolute;left:16px;bottom:10px;z-index:2;font-family:'Fraunces',serif;font-weight:700;font-size:24px;color:var(--creme);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rc-nom span{color:var(--rouge-clair)}
.rc-corps{padding:14px 16px 16px}
.rc-infos{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.rc-infos li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.4;color:var(--creme-2)}
.rc-infos li b{color:var(--creme);font-weight:600}
.rc-infos .ic{flex:none}
.rc-actions{display:flex;gap:9px}
.rc-cta{flex:1;text-align:center;background:var(--rouge);color:#fff;font-weight:700;font-size:15px;padding:13px 10px;border-radius:12px;box-shadow:0 8px 22px rgba(200,54,46,.32)}
.rc-btn2{flex:none;width:48px;display:flex;align-items:center;justify-content:center;background:var(--surface-h);border:1px solid var(--line-fort);border-radius:12px;font-size:19px;cursor:pointer;color:var(--creme)}
@media(min-width:720px){ .rc-visuel{height:170px} }

/* ===== Bandeau d'accueil (landing) ===== */
.accueil-hero{padding:8px 4px 2px;text-align:center}
.ah-marque{font-family:'Fraunces',serif;font-weight:700;font-size:30px;line-height:1.05;color:var(--creme)}
.ah-marque span{color:var(--rouge-clair)}
.ah-infos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.ah-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  color:var(--creme);font-size:13px;font-weight:600;padding:8px 13px;border-radius:999px}
.ah-chip .ah-ic{font-size:14px}
.accueil-label{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--creme-2);font-family:'Fraunces',serif;font-size:15px;margin:22px 0 12px}
.accueil-label::before,.accueil-label::after{content:"";height:1px;width:40px;background:var(--line-fort)}
@media(min-width:720px){ .ah-marque{font-size:38px} }
.plat-supp-fam-body .cmp-grid{width:100%}
/* ===== MOBILE-COMPACT ===== */ @media(max-width:559px){ .topbar{padding:9px 16px} .topbar .marque{font-size:21px} .conteneur{padding-top:12px} .hero{padding:8px 6px 12px} .hero h1{font-size:23px} .hero-sous{font-size:13px;margin-top:5px} .hero .fil{margin-top:8px;font-size:13px} .restos{gap:12px} .rc-visuel{height:clamp(88px,12vh,132px)} .rc-nom{font-size:19px;bottom:7px;left:14px} .rc-corps{padding:9px 12px 11px} .rc-infos{gap:4px;margin-bottom:9px} .rc-infos li{font-size:13px} .rc-cta{padding:11px 10px;font-size:14.5px} .rc-btn2{width:44px;font-size:17px} .rc-statut{font-size:11px;padding:4px 10px;top:10px;left:10px} .rc-mode{font-size:10.5px;top:10px;right:10px} }
@media(max-width:559px){ .accueil-hero{padding:4px 0 0} .ah-marque{font-size:20px} .ah-infos{margin-top:9px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 2px 4px;scrollbar-width:none} .ah-infos::-webkit-scrollbar{display:none} .ah-chip{flex:none;font-size:12px;padding:7px 11px} .accueil-label{margin:12px 0 10px;font-size:14px} .fam-carte-nom{font-size:16px;padding:9px 8px 10px} }
@media(max-width:559px){ .conteneur{flex:0 0 auto;padding-bottom:16px} }
/* fix vide fantome accordeons supplements (flex->block) */ .plat-supp-section.open .plat-supp-body{display:block} .plat-supp-fam-sec.open .plat-supp-fam-body{display:block}
/* Formule Duo */ .fd-intro{font-size:14px;color:var(--creme-2);margin:2px 0 10px;text-align:center} .fd-recap{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line-fort);border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600;margin:0 0 10px;cursor:pointer} .fd-modif{color:var(--rouge-clair);font-size:12.5px;flex:none;margin-left:10px}
/* Formule v3 : groupes lignes-photo */ .fd-groupe{margin-bottom:10px} .fd-corps{display:none;padding:10px 2px 2px} .fd-groupe.open .fd-corps{display:block} .fd-groupe.open .pan-row{border-color:var(--rouge)}

/* Pied : coordonnees */
.pied .pied-tel{color:var(--creme);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Icones SVG chips + panier */
.ah-ic{display:inline-flex;align-items:center}
.topbar-cart svg{vertical-align:-2px;margin-right:1px}
.cmd-h2 svg{vertical-align:-2px;margin-right:5px}

/* ===== PC & TABLETTES : confort grand ecran ===== */
@media(min-width:720px){
  .topbar{padding-left:max(16px,calc((100vw - 1068px)/2));padding-right:max(16px,calc((100vw - 1068px)/2))}
  .fam-carte{transition:transform .25s ease,box-shadow .25s ease}
  .fam-carte:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.45)}
  .fam-carte-img{transition:transform .35s ease}
  .fam-carte:hover .fam-carte-img{transform:scale(1.05)}
  .panneau{max-width:720px}
  .pan-row{transition:border-color .2s ease}
  .pan-row:hover{border-color:var(--rouge)}
  .taille-choix{transition:border-color .2s ease}
  .taille-choix:hover{border-color:var(--rouge)}
  .cmp-dalle{transition:transform .2s ease,border-color .2s ease}
  .cmp-dalle:hover{border-color:var(--rouge);transform:translateY(-2px)}
  .btn-ajout:hover,.rc-cta:hover,.cmd-envoyer:hover{filter:brightness(1.12)}
  .ah-chip-tel:hover,.pied-tel:hover{color:var(--rouge-clair)}
  .rc-btn2{transition:border-color .2s ease}
  .rc-btn2:hover{border-color:var(--rouge)}
  .sf-carte{transition:border-color .2s ease}
}

/* ===== PC : menu complet + sommaire ===== */
#menuPc{display:none}
@media(min-width:900px){
  #menuPc{display:block;margin-top:10px}
  .pc-fam{margin-bottom:26px;scroll-margin-top:14px}
  .pc-fam-titre{font-family:'Fraunces',serif;font-size:24px;color:var(--creme);margin:2px 0 12px}
  .pc-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}

/* PC : tuiles compactes nom + prix (description visible dans la fiche) */
@media(min-width:900px){
  #menuPc .pan-row-info:has(.pan-row-prix) .pan-row-sous{display:none}
  .pc-grille{grid-template-columns:repeat(4,1fr)}
}

/* PC : plats en tuiles PHOTO (comme les dalles familles mobile) */
@media(min-width:900px){
  #menuPc .pan-row{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:16px}
  #menuPc .pan-row-photo{width:100%;height:auto;aspect-ratio:1/1;flex:none;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:54px}
  #menuPc .pan-row-photo img{width:100%;height:100%;object-fit:cover}
  #menuPc .pan-row-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 12px 10px;background:linear-gradient(180deg,rgba(20,16,14,0) 0%,rgba(20,16,14,.9) 72%)}
  #menuPc .pan-row-nom{font-size:16.5px;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
  #menuPc .pan-row-prix{margin-top:2px;font-size:15px}
  #menuPc .pan-row-sous{margin-top:2px;font-size:15px;color:var(--prix);font-weight:700}
  #menuPc .pan-chev{display:none}
  .pc-grille{gap:14px}
}

/* PC : bouton retour categories */
@media(min-width:900px){
  .pc-retour{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-fort);color:var(--creme);border-radius:10px;padding:9px 14px;font-size:14.5px;font-weight:600;cursor:pointer;margin-bottom:14px}
  .pc-retour:hover{border-color:var(--rouge)}
}

/* PC : barre de categories rapide */
@media(min-width:900px){
  #pcNav{display:none;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 16px}
  .pc-nav-chip{background:var(--surface);border:1px solid var(--line-fort);color:var(--creme-2);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;cursor:pointer}
  .pc-nav-chip:hover{border-color:var(--rouge);color:var(--creme)}
  .pc-nav-chip.actif{background:var(--rouge);border-color:var(--rouge);color:#fff}
}

/* ===== Panier : photos, suggestions, 2 colonnes PC ===== */
.cart-l-photo{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none;background:var(--ambiance)}
.cart-l-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cart-l-photo:empty{display:none}
.cmd-suggest{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-fort)}
.cmd-suggest-t{font-size:14px;font-weight:700;color:var(--creme-2);margin-bottom:9px}
.cmd-suggest-b{display:flex;flex-wrap:wrap;gap:8px}
.cmd-suggest-btn{background:var(--surface);border:1px solid var(--line-fort);color:var(--creme);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600}
.cmd-suggest-btn:hover{border-color:var(--rouge)}
.cmd-suggest-btn.accent{background:var(--rouge);border-color:var(--rouge);color:#fff}
.cmd-col{display:contents}
@media(min-width:900px){
  .cmd-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
  .cmd-col{display:block}
  .cmd-col-d{grid-column:2;grid-row:1;position:sticky;top:14px}
  .cmd-col-g{grid-column:1;grid-row:1}
}

/* Reglages : lien CG en ligne, page legale, pied multi-restos, bouton-lien */
.cmd-check .cmd-lien{margin-top:0}
.legal p{margin:0 0 12px}
.legal .cmd-lien{margin-top:0}
.legal .cmd-bloc p:last-child{margin-bottom:0}
.pied-cols{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;text-align:center}
.btn-lien{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--rouge-clair);font-weight:600;margin-top:0}

/* Fiche produit : ligne allergenes */
.rp-allerg{font-size:13px;color:var(--creme-2);font-style:italic;margin:2px 0 8px;padding:7px 10px;background:var(--surface);border-radius:9px;border:1px solid var(--line)}

/* Pied : liens legaux */
.pied-liens{margin-top:10px}
.pied-liens a{color:var(--creme-2);text-decoration:underline;text-underline-offset:3px}
.pied-liens a:hover{color:var(--creme)}

/* Tableau origine des viandes */
.tbl-viandes{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px}
.tbl-viandes th{text-align:left;color:var(--creme-2);font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line-fort)}
.tbl-viandes td{padding:10px;border-bottom:1px solid var(--line)}
.tbl-viandes tr:last-child td{border-bottom:0}

/* Suivi de commande */
.sv-etapes{display:flex;align-items:center;gap:6px;margin:8px 0 16px}
.sv-etape{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:96px;text-align:center}
.sv-dot{width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--line-fort)}
.sv-etape.actif .sv-dot{background:var(--rouge);border-color:var(--rouge)}
.sv-etape.actif .sv-lab{color:var(--creme)}
.sv-lab{font-size:12.5px;color:var(--creme-2);font-weight:600}
.sv-trait{flex:1;height:2px;background:var(--line-fort);transition:background .35s ease}
.sv-trait.actif{background:var(--rouge)}
.sv-dot{transition:background .35s ease,border-color .35s ease}
.sv-msg{font-size:15px;color:var(--creme-2)}

/* ===== Chef Fino (mascotte IA) ===== */
.chef-wrap{position:relative;margin:18px 0 6px;display:flex;justify-content:flex-end;align-items:flex-end;gap:10px}
.chef-btn{flex:none;width:64px;height:64px;border:none;background:none;padding:0;cursor:pointer;transition:transform .2s}
.chef-btn:hover{transform:scale(1.06)}
.chef-btn svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.chef-oeil{transform-origin:center;animation:chefClign 4.5s infinite}
@keyframes chefClign{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.chef-pense .chef-btn svg{animation:chefWob .8s ease-in-out infinite}
@keyframes chefWob{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.chef-panel{display:none;flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-fort);border-radius:14px 14px 4px 14px;padding:12px 14px}
.chef-wrap.open .chef-panel{display:block}
.chef-titre{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin-bottom:6px}
.chef-bulle{font-size:14px;line-height:1.55;color:var(--creme);min-height:20px}
.chef-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.chef-chip{background:none;border:1px solid var(--rouge);color:var(--rouge-clair);border-radius:16px;padding:6px 13px;font-size:13px;cursor:pointer;font-family:inherit}
.chef-chip:hover{background:var(--rouge);color:#fff}

/* Chef Fino flottant : toujours visible en bas a droite */
.panneau{position:relative}
.panneau .chef-wrap{position:absolute;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));margin:0;z-index:6;flex-direction:column;align-items:flex-end}
#chefHote .chef-wrap{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));margin:0;z-index:45;flex-direction:column;align-items:flex-end}
.panneau .chef-wrap .chef-panel,#chefHote .chef-wrap .chef-panel{width:min(320px,calc(100vw - 44px));flex:none}
.panneau .chef-wrap .chef-btn,#chefHote .chef-wrap .chef-btn{width:56px;height:56px}

/* Chef Fino GLOBAL : fixe en bas a droite de l'ecran, toutes pages, au-dessus de tout */
.chef-wrap{position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));margin:0;z-index:70;flex-direction:column;align-items:flex-end}
.chef-wrap .chef-panel{width:min(320px,calc(100vw - 44px));flex:none}
.chef-wrap .chef-btn{width:56px;height:56px}

/* Chef Fino : champ de conversation */
.chef-saisie{display:flex;gap:8px;margin-top:11px}
.chef-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-fort);color:var(--creme);padding:9px 12px;border-radius:10px;font-size:14px;font-family:inherit}
.chef-input:focus{outline:none;border-color:var(--rouge)}
.chef-envoi{flex:none;width:42px;background:var(--rouge);color:#fff;border:none;border-radius:10px;font-size:16px;cursor:pointer}

/* Chef Fino : croix de fermeture + drag */
.chef-btn-wrap{position:relative}
.chef-x{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;background:#3a332e;color:#cfc6ba;border:1px solid var(--line-fort);font-size:11px;line-height:1;text-align:center;cursor:pointer;padding:0;z-index:2}
.chef-x:hover{background:var(--rouge);color:#fff}
.chef-btn{touch-action:none}
.chef-wrap.chef-haut{flex-direction:column-reverse}
.chef-wrap.chef-haut .chef-panel{border-radius:4px 14px 14px 14px}

/* Mascotte plus grande sur PC */
@media(min-width:900px){
  .chef-wrap .chef-btn{width:84px;height:84px}
}

/* ===== Composeur : inclus / payant / mini-confirmation (22/08/2026) ===== */
.cmp-quota.plein{color:#EC681C;font-weight:700}
/* premium : pas de cadre (réservé à la sélection) — le prix en pastille dorée suffit */
.cmp-dalle.prem .cmp-dalle-px{display:inline-block;background:#d4a017;color:#1a1714;font-weight:800;padding:0 6px;border-radius:8px;font-size:11px}
.cmp-dalle.paye .cmp-dalle-px{color:#EC681C;font-weight:700}
.cmp-dalle.dis{opacity:.45}
.rp-recap{margin:0 0 8px;font-size:12.5px;line-height:1.45}
.rp-recap-l{color:#7a6f66}
.rp-recap-l.paye{color:#EC681C;font-weight:600}
.cpay-ov{position:fixed;inset:0;background:rgba(26,23,20,.55);z-index:220;display:flex;align-items:center;justify-content:center;padding:20px}
.cpay-box{background:#fff;border-radius:16px;max-width:340px;width:100%;padding:20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center}
.cpay-nom{font-weight:800;font-size:17px;margin-bottom:8px;color:#1a1714}
.cpay-motif{font-size:13.5px;color:#5d554d;line-height:1.5;margin-bottom:14px}
.cpay-btns{display:flex;gap:10px;justify-content:center}
.cpay-ko{background:none;border:1px solid rgba(0,0,0,.18);border-radius:12px;padding:10px 16px;font-size:14px;cursor:pointer;color:#5d554d}
.cpay-ok{white-space:nowrap}