:root {
  /* Charte DOUMKO, voir docs/CHARTE_GRAPHIQUE.md */
  --dk-green: #8BC044;        /* vert de marque (logo) : décor, filets, fonds avec texte noir */
  --dk-green-dark: #3F6B12;   /* vert accessible : boutons (texte blanc 6,3:1), liens, titres */
  --dk-green-darker: #2F5A0E; /* survol / appui */
  --dk-green-tint: #F1F8E8;   /* fond doux */
  --dk-black: #000000;        /* noir du logo */
  --dk-ink: #1A1A1A;          /* texte courant */
  --dk-muted: #555555;        /* texte secondaire (7,5:1) */
  --dk-red: #B42318;          /* alertes / détresse (texte blanc 6,6:1) */
  --dk-bg: #F4F6F2;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; font-size: 19px; background: var(--dk-bg); color: var(--dk-ink); }
header { background: #fff; color: var(--dk-ink); border-bottom: 4px solid var(--dk-green); padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; }
#title img { height: 40px; display: block; }
#net { font-size: 15px; font-weight: 600; padding: 5px 12px; border-radius: 14px; background: var(--dk-green-tint); color: var(--dk-green-dark); border: 1px solid var(--dk-green); }
#net.off { background: var(--dk-red); color: #fff; border-color: var(--dk-red); }
main { padding: 14px; max-width: 760px; margin: auto; }
h2 { margin: 8px 0 14px; }
.btn { display: block; width: 100%; padding: 18px; margin: 10px 0; font-size: 21px; font-weight: 600; border: 0; border-radius: 12px; background: var(--dk-green-dark); color: #fff; text-align: center; text-decoration: none; cursor: pointer; }
.btn.alt { background: #fff; color: var(--dk-green-dark); border: 2px solid var(--dk-green-dark); }
.btn.red { background: var(--dk-red); }
.btn.small { display: inline-block; width: auto; padding: 10px 14px; font-size: 17px; margin: 4px 4px 4px 0; }
.card { background: #fff; border-radius: 12px; padding: 14px; margin: 10px 0; box-shadow: 0 1px 3px #0002; }
.card a { color: inherit; text-decoration: none; display: block; }
label { display: block; margin: 14px 0 6px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 14px; font-size: 19px; border: 2px solid #bbb; border-radius: 10px; background: #fff; }
input[type=checkbox], input[type=radio] { width: 28px; height: 28px; vertical-align: middle; margin-right: 10px; }
.check { display: flex; align-items: center; background: #fff8e1; padding: 12px; border-radius: 10px; font-weight: 600; }
.muted { color: var(--dk-muted); font-size: 16px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 15px; background: #eee; }
.tag.attended { background: #d4edda; } .tag.missed { background: #f8d7da; } .tag.cancelled { background: #ddd; } .tag.pending { background: #fff3cd; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid #eee; padding: 10px 0; }
.err { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 10px; }
.ok { background: #d4edda; color: #155724; padding: 12px; border-radius: 10px; }
.sync { font-size: 15px; color: var(--dk-muted); text-align: center; margin: 6px 0; }
.pin { font-size: 34px; letter-spacing: 12px; text-align: center; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.keypad button { padding: 20px; font-size: 28px; border-radius: 12px; border: 0; background: #fff; box-shadow: 0 1px 3px #0003; }
.banner { background: #fff3cd; border-left: 6px solid #e0a800; padding: 12px; border-radius: 10px; margin: 10px 0; }
.btn:active { background: var(--dk-green-darker); }
.btn.red:active { background: #8f1c13; }
.btn.alt:active { background: var(--dk-green-tint); }
:focus-visible { outline: 3px solid var(--dk-green); outline-offset: 2px; }
.brandhero { text-align: center; margin: 18px 0 8px; }
.brandhero img { width: min(88%, 420px); height: auto; }
.brandhero p { color: var(--dk-muted); margin: 6px 0 0; }
.pinlogo { display: block; width: 96px; height: 96px; margin: 8px auto; }
input:focus, select:focus { border-color: var(--dk-green-dark); outline: none; }
body.login-screen #title { visibility: hidden; }
.pill-n:not(:empty) { display: inline-block; min-width: 26px; padding: 1px 8px; margin-left: 6px; border-radius: 13px; background: var(--dk-green-dark); color: #fff; font-size: 16px; }
body.chat-screen main { max-width: 1320px; }
#chatroot { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 460px; margin-top: 8px; font-size: 15px; }
#chmsg:empty { display: none; }
/* Notifications */
#top{display:flex;align-items:center;gap:10px}#ntbell{margin-left:auto;position:relative;font-size:22px;text-decoration:none;padding:4px 6px}
.ntp-n{position:absolute;top:-4px;right:-6px;background:var(--dk-red,#B42318);color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:1px 6px}
.ntp-bar{margin:6px 0 10px}.ntp{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.ntp-i{font-size:22px;line-height:1}
.ntp.unread{background:#F1F8E8;border-left:6px solid #8BC044}.ntp.unread b{font-weight:800}.ntp.crit{border-left:6px solid var(--dk-red,#B42318)}
body.login-screen #top { display: none; }
/* Téléconsultations */
.tm-pc{display:flex;flex-direction:column;gap:6px}.tm-pc-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tm-pc.live{border-left:6px solid var(--dk-red,#B42318)}.tm-pc .btn{margin-top:4px}
body #tmroom .tm-room{min-height:0;margin-top:10px}body #tmroom .tm-stage{min-height:380px}