/* ============================================================
   PORTAIL PUBLIC FINO — Style autonome (charte cohérente Fino Gestion)
   Mobile-first : la majorité des clients commandent au téléphone.
   ============================================================ */
@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; --creme:#F4EFE6; --noir:#1a1714;
  --vert:#3a7d44; --orange:#e8a23d; --gris:#8a8178;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:var(--creme);color:var(--noir);min-height:100vh;display:flex;flex-direction:column}
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(--noir);color:var(--creme);
  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)}
.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{opacity:.7;margin-top:10px;font-size:15px;line-height:1.5}

.restos{display:grid;gap:16px}
.resto-carte{background:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 22px rgba(0,0,0,.06);
  border:2px solid transparent;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 10px 30px rgba(0,0,0,.10)}
.resto-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.resto-haut h2{font-family:'Fraunces',serif;font-size:24px;font-weight:700}
.resto-mode{background:rgba(200,54,46,.10);color:var(--rouge-fonce);font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:999px;white-space:nowrap}
.resto-infos{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.resto-infos li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.4}
.resto-infos .ic{flex:none}
.resto-infos a{color:var(--rouge-fonce);font-weight:600}
.resto-cta{display:inline-block;background:var(--rouge);color:#fff;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:12px}

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

.cat{margin-top:26px}
.cat-titre{font-family:'Fraunces',serif;font-size:22px;font-weight:600;padding-bottom:8px;
  border-bottom:2px solid rgba(200,54,46,.18);margin-bottom:16px}

.produits-grille{display:grid;grid-template-columns:1fr;gap:14px}
.produit{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 3px 16px rgba(0,0,0,.05);
  display:flex;align-items:stretch}
.produit-photo{position:relative;width:108px;flex:none;background:var(--creme)}
.produit-photo img{width:108px;height:108px;object-fit:cover}
.photo-placeholder{width:108px;height:108px;display:flex;align-items:center;justify-content:center;
  font-size:38px;background:linear-gradient(135deg,#f0e9dc,#e7ddca);opacity:.85}
.produit-corps{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1}
.produit-nom{font-size:17px;font-weight:600;line-height:1.25}
.produit-prix{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.produit-prix .prix{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--rouge-fonce)}
.produit-prix .taille{font-size:14px}
.produit-prix .taille b{font-weight:600;color:var(--noir)}

/* Indisponible : grisé */
.produit.indispo{opacity:.55;filter:grayscale(.4)}
.badge-indispo{position:absolute;left:6px;top:6px;background:var(--gris);color:#fff;font-size:11px;
  font-weight:600;padding:3px 9px;border-radius:999px}

/* ===== Message API indisponible ===== */
.message-indispo{background:#fff;border-radius:18px;padding:40px 22px;text-align:center;
  box-shadow:0 4px 22px rgba(0,0,0,.06);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{opacity:.7;margin-bottom:18px}
.btn-portail{display:inline-block;background:var(--rouge);color:#fff;font-weight:600;padding:12px 22px;border-radius:12px}

/* ===== Pied ===== */
.pied{background:var(--noir);color:var(--creme);text-align:center;padding:22px 16px;font-size:14px}
.pied .petit{opacity:.55;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}
}
@media(min-width:980px){
  .produits-grille{grid-template-columns:1fr 1fr 1fr}
}