/* ============================================================
   Restaurant chez Lya — components.css
   Cartes, boutons, chips, listes, fiches (sheets), toast…
   ============================================================ */

/* ---- cartes ---- */
.card{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:13px 14px; margin:10px 0;
}
.card h3{ margin:0 0 6px; font-size:14.5px; }
.k{ font-size:12px; color:var(--muted); }
.mascot-line{
  display:flex; gap:9px; align-items:center;
  background:var(--accsoft); border-radius:var(--r);
  padding:10px 12px; margin:10px 0; font-size:13.5px; font-weight:600;
}
.mascot-line .m{ font-size:21px; }

/* ---- boutons ---- */
.bigbtn{
  display:block; width:100%; border:none; border-radius:20px;
  background:var(--acc); color:#fff; font-weight:900; font-size:16px;
  padding:15px; cursor:pointer; box-shadow:var(--shadow); margin:10px 0 4px;
  font-family:inherit;
}
.bigbtn:active{ transform:scale(.985); }
.bigbtn.sec{ background:var(--card); color:var(--ink); border:1.5px solid var(--line); }
.bigbtn.danger{ background:var(--bad); }
.row{ display:flex; gap:8px; }
.row > *{ flex:1; }

.chip{
  display:inline-block;
  background:var(--card); border:1.5px solid var(--line); border-radius:99px;
  padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
  color:var(--ink); font-family:inherit;
}
.chip.on{ background:var(--acc); border-color:var(--acc); color:#fff; }
.chips{ display:flex; gap:6px; overflow-x:auto; padding:8px 0; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips.wrap{ flex-wrap:wrap; overflow:visible; }

.pill{
  display:inline-block; background:var(--accsoft); color:var(--acc);
  border-radius:99px; padding:3px 10px; font-size:11.5px; font-weight:800;
}
.pill.green{ background:var(--decosoft); color:var(--deco); }
.pill.red{ background:#fdeae8; color:var(--bad); }
.pill.gray{ background:var(--line); color:var(--muted); }

/* ---- lignes repas / listes ---- */
.meal{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-top:1px dashed var(--line);
}
.meal:first-of-type{ border-top:none; }
.meal .e{ font-size:24px; flex:0 0 auto; }
.meal .n{ font-weight:700; font-size:14px; }
.meal .d{ font-size:11.5px; color:var(--muted); }
.meal .end{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.meal .verdict{ font-size:20px; }
.meal.tappable{ cursor:pointer; border-radius:10px; }
.meal.tappable:active{ background:var(--accsoft); }

.checkline{ display:flex; align-items:center; gap:8px; font-size:13.5px; padding:6px 0; cursor:pointer; }
.checkline input{ width:19px; height:19px; accent-color:var(--acc); flex:0 0 auto; }
.checkline.done{ opacity:.55; }

/* ---- grille d'aliments ---- */
.foodgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.food{
  position:relative; background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  padding:10px 4px 7px; text-align:center; cursor:pointer; border:none; font-family:inherit; color:var(--ink);
}
.food:active{ transform:scale(.96); }
.food .fe{ font-size:26px; display:block; }
.food .fn{ font-size:10.5px; font-weight:700; margin-top:2px; display:block; }
.food .dot{ position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%; }
.dot.ok{ background:var(--ok); }
.dot.mid{ background:var(--warn); }
.dot.no{ background:var(--bad); }
.dot.new{ background:var(--line); }
.legend{ display:flex; gap:12px; font-size:11px; color:var(--muted); margin-top:8px; flex-wrap:wrap; }
.legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px; }

/* ---- steppers ---- */
.stepper{ display:flex; align-items:center; gap:14px; justify-content:center; margin:6px 0; }
.stepper button{
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--accsoft); color:var(--acc); font-size:20px; font-weight:900; cursor:pointer;
  font-family:inherit;
}
.stepper .val{ font-size:18px; font-weight:900; min-width:120px; text-align:center; }

/* ---- barres de progression / étapes ---- */
.prog-track{ height:12px; background:var(--line); border-radius:99px; overflow:hidden; margin:8px 0 4px; }
.prog-fill{ height:100%; background:linear-gradient(90deg,var(--acc),var(--acc2)); border-radius:99px; transition:width .4s; }
.steps{ display:flex; gap:5px; margin:8px 0 4px; }
.steps span{ flex:1; height:7px; border-radius:99px; background:var(--line); }
.steps span.f{ background:var(--acc); }

/* ---- congélo ---- */
.freezer{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cube{
  background:var(--card); border-radius:12px; box-shadow:var(--shadow);
  padding:8px 10px; font-size:12px; font-weight:700; cursor:pointer;
  border:none; font-family:inherit; color:var(--ink); text-align:left;
}
.cube small{ display:block; color:var(--muted); font-weight:400; font-size:10.5px; }
.cube.warn{ outline:2px solid var(--warn); }
.cube.add{ border:2px dashed var(--acc); box-shadow:none; color:var(--acc); background:none; }

/* ---- frise ---- */
.tl{ border-left:3px solid var(--accsoft); margin:6px 0 0 8px; padding-left:14px; }
.tl .ev{ position:relative; padding:5px 0; font-size:13px; }
.tl .ev::before{
  content:""; position:absolute; left:-20px; top:11px;
  width:9px; height:9px; border-radius:50%; background:var(--acc);
}
.tl .ev small{ color:var(--muted); }

/* ---- fiches coulissantes (sheets) ---- */
.ov{
  position:fixed; inset:0; background:rgba(35,20,25,.45);
  display:flex; align-items:flex-end; justify-content:center; z-index:60;
}
.sheet{
  background:var(--paper); width:100%; max-width:480px; max-height:88dvh;
  overflow-y:auto; border-radius:26px 26px 0 0; padding:14px 16px 22px;
  animation:up .22s ease; color:var(--ink);
}
@keyframes up{ from{ transform:translateY(40px); opacity:.5; } to{ transform:none; opacity:1; } }
.sheet h2{ margin:2px 0 4px; font-size:18px; }
.grab{ width:44px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 8px; }
.sheet .close{
  float:right; background:var(--line); border:none; border-radius:99px;
  width:30px; height:30px; cursor:pointer; font-weight:900; color:var(--ink); font-family:inherit;
}
.verdicts{ display:flex; gap:10px; margin:8px 0; }
.verdicts button{
  flex:1; font-size:30px; padding:12px 0; border-radius:18px;
  border:2.5px solid var(--line); background:var(--card); cursor:pointer;
}
.verdicts button.on{ border-color:var(--acc); background:var(--accsoft); transform:scale(1.05); }

/* ---- toast ---- */
#toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 18px);
  transform:translateX(-50%) translateY(20px);
  background:#33272b; color:#fff; padding:11px 18px; border-radius:99px;
  font-weight:800; font-size:13.5px; opacity:0; transition:.25s;
  z-index:80; pointer-events:none; max-width:90%; text-align:center;
}
#toast.on{ opacity:1; transform:translateX(-50%); }

/* ---- SOS ---- */
.sos-head{ background:var(--sos); color:#fff; border-radius:var(--r); padding:14px; font-weight:800; }
.callbtn{
  flex:1; border:none; border-radius:16px; padding:15px 0;
  font-size:17px; font-weight:900; cursor:pointer; color:#fff;
  display:block; text-align:center; text-decoration:none;
}