/* ============================================================
   Restaurant chez Lya — base.css
   Variables (univers Caro), reset, layout général, mode sombre
   ============================================================ */

:root{
  /* Univers Caro 🥕 */
  --acc:#f4703a;        /* orange carotte */
  --acc2:#ffb648;       /* jaune abricot */
  --accsoft:#fff0e6;
  --deco:#7cb87a;       /* vert feuille */
  --decosoft:#eef6ea;

  --ink:#33272b;
  --muted:#8d7d82;
  --paper:#fffdf9;
  --card:#ffffff;
  --line:#f0e4e0;

  --ok:#4caf7d;
  --warn:#e5a13d;
  --bad:#e2574b;
  --sos:#e2574b;

  --r:18px;
  --shadow:0 4px 14px rgba(70,40,40,.08);
  --tabbar-h:64px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#241d20; --card:#2f272b; --ink:#f4ebee; --muted:#a8969c; --line:#443a3f;
    --accsoft:#3a2c26; --decosoft:#2c3328;
    --shadow:0 4px 14px rgba(0,0,0,.3);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  font-size:16px;
}
@media (min-width:520px){
  body{ background:#efe7de; }
  @media (prefers-color-scheme: dark){ body{ background:#1a1518; } }
}

#app{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  position:relative;
}
@media (min-width:520px){
  #app{ box-shadow:0 0 40px rgba(50,25,25,.15); }
}

/* ---- entête ---- */
.app-head{
  position:sticky; top:0; z-index:30;
  background:var(--paper);
  display:flex; align-items:center; gap:10px;
  padding:12px 14px 10px;
  border-bottom:1px solid var(--line);
}
.mascot{
  width:44px; height:44px; border-radius:50%;
  background:var(--accsoft);
  display:flex; align-items:center; justify-content:center;
  font-size:25px; flex:0 0 auto;
}
.app-title{ font-weight:900; font-size:16.5px; line-height:1.15; }
.app-sub{ font-size:11.5px; color:var(--muted); }
.head-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.sosbtn{
  background:var(--sos); color:#fff; border:none; border-radius:12px;
  font-weight:900; font-size:12px; padding:9px 12px; cursor:pointer;
  box-shadow:var(--shadow);
}
.gearbtn{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  font-size:16px; padding:7px 10px; cursor:pointer; color:var(--ink);
}

/* ---- contenu ---- */
main#screen{
  flex:1;
  padding:4px 14px calc(var(--tabbar-h) + 26px);
}

/* ---- barre d'onglets ---- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  display:flex;
  background:var(--card);
  border-top:1px solid var(--line);
  padding:6px 4px calc(8px + env(safe-area-inset-bottom));
  z-index:30;
}
.tab{
  flex:1; background:none; border:none; cursor:pointer; text-align:center;
  font-size:19px; padding:6px 0 3px; border-radius:14px; color:var(--muted);
}
.tab small{ display:block; font-size:9.5px; font-weight:800; }
.tab.on{ background:var(--accsoft); color:var(--acc); }

/* ---- divers ---- */
a{ color:var(--acc); }
input, textarea, select{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  width:100%;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--acc); outline-offset:1px; }
noscript{ display:block; padding:30px; text-align:center; }