/* MedAgent — thème et composants communs à toutes les pages.
 * Chargé via <link rel="stylesheet" href="app.css"> AVANT le <style> de page,
 * pour que les règles spécifiques d'une page puissent surcharger au besoin.
 * Le bandeau patient (#mp-*) et la nav du bas (.bottom-nav) sont injectés par chrome.js. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --bg:#0a0e1a; --bg2:#0e1a16; --bg3:#080f0e; --card:#0d1a14;
  --border:#1e3a2a; --border2:#2a4a3a;
  --green:#4db87a; --green2:#7ac87a; --green3:#86bb9e; --green4:#5a9a70;
  --text:#c8e6c9; --text2:#d0e8d8; --text3:#b8d8b8; --muted:#93a394; --muted2:#88998d;
  --amber:#d4a44c; --red:#c45a5a; --blue:#5a8ab8;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; background:var(--bg); color:var(--text2); font-family:'Lora',Georgia,serif; overflow:hidden; }

#app {
  display:flex; flex-direction:column;
  height:100%; height:-webkit-fill-available;
  max-width:760px; margin:0 auto;
  padding-bottom:calc(56px + var(--safe-bottom));   /* réserve la nav fixe du bas */
}

header { padding:calc(16px + var(--safe-top)) 20px 14px; text-align:center; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; }
.header-label { font-size:9px; letter-spacing:.35em; color:var(--green3); text-transform:uppercase; margin-bottom:6px; }
header h1 { font-size:26px; font-weight:400; letter-spacing:-.02em; color:var(--text); line-height:1; }
header h1 span { color:var(--green); font-style:italic; }
header p { color:var(--muted); font-size:11px; margin-top:4px; }

#scroll { flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
#scroll::-webkit-scrollbar { width:3px; }
#scroll::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* ─── Formulaires & boutons ─────────────────────────────────────────────── */
.form { display:flex; flex-direction:column; gap:12px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:16px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.field { display:flex; flex-direction:column; gap:5px; flex:1; min-width:130px; }
label { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--green3); }
input, select, textarea { background:var(--bg3); border:1px solid var(--border2); border-radius:9px; padding:11px 12px; color:var(--text); font-family:'Lora',serif; font-size:15px; width:100%; }
textarea { resize:vertical; min-height:80px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green4); }
.hint { font-size:10px; color:var(--muted2); }

.btn { background:var(--green4); color:#06120c; border:none; border-radius:9px; padding:12px; font-family:'Lora',serif; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s; }
.btn:hover { background:var(--green); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-ghost { background:transparent; border:1px solid var(--border2); color:var(--green2); }
.btn-ghost:hover { background:var(--bg2); border-color:var(--green4); }
.btn-danger { background:transparent; border:1px solid #6b2320; color:#e3a08a; }
.btn-danger:hover { background:rgba(120,40,40,.18); }

/* Nav du bas (.bottom-nav) et bandeau patient (#mp-*) : styles auto-injectés par chrome.js
 * (partagés par les 2 paradigmes de page, donc hors de ce thème paradigme-A). */