/* =====================================================================
   UMED Online — Feuille de style
   Charte UMED : #3f91cf (bleu principal) · bleu profond #3f91cf · bleu clair #BFDDF3
   ===================================================================== */
:root {
  /* Charte UMED : bleu principal #3f91cf */
  --ice: #BFDDF3;
  --ice-50: #EEF6FC;
  --ice-100: #DCECF8;
  --ice-600: #3f91cf;
  --red: #3f91cf;          /* accent de marque (boutons principaux, repères actifs) */
  --red-600: #3f91cf;
  --red-50: #E6F1FA;
  --danger: #D64545;       /* urgences, retards, rejets */
  --danger-600: #B53030;
  --danger-50: #FBEAEA;
  --navy: #3f91cf;
  --navy-2: #3f91cf;
  --navy-3: #3f91cf;
  --text: #3f91cf;
  --muted: #5E7086;
  --line: #DBE7F2;
  --bg: #F2F7FC;
  --card: #FFFFFF;
  --green: #2F855A; --green-50: #E6F4EC;
  --amber: #B7791F; --amber-50: #FDF3E1;
  --blue: #3f91cf; --blue-50: #E6F1FA;
  --gray-50: #EEF2F6;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(14,51,84,.06), 0 4px 16px rgba(14,51,84,.06);
  --sidebar-w: 248px;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-title: 'Poppins', 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14.5px; color: var(--text); background: var(--bg); line-height: 1.5; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--navy); margin: 0 0 .5em; line-height: 1.25; }
h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
.muted { color: var(--muted); }
.small, small { font-size: .82rem; }
.pad { padding: 12px 14px; }
.ic { flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }

/* ---------------- Structure ---------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: var(--navy); color: #CFE2F3; position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column; z-index: 40; transition: transform .2s ease;
  background-image: radial-gradient(circle at 20% 0%, rgba(191,221,243,.10), transparent 45%);
}
.brand { display: block; padding: 20px 20px 4px; }
.company { padding: 0 20px 14px; font-size: .75rem; color: var(--ice); opacity: .8; letter-spacing: .4px; text-transform: uppercase; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 2px 0; color: #CFE2F3;
  border-radius: 9px; font-weight: 500; position: relative;
}
.sidebar nav a:hover { background: rgba(191,221,243,.08); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: rgba(191,221,243,.16); color: #fff; }
.sidebar nav a.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--red); }
.sidebar nav a span { flex: 1; }
.nav-sep { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: var(--ice); opacity: .6; padding: 14px 12px 4px; }
.sidebar-foot { padding: 12px 20px; font-size: .72rem; color: #8FB3D3; border-top: 1px solid rgba(255,255,255,.06); }
.pill { background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; }
.pill-abs { position: absolute; top: -2px; right: -4px; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 62px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
  padding: 0 24px; position: sticky; top: 0; z-index: 30;
}
.page-title { font-size: 1.2rem; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.content { padding: 24px; flex: 1; }
.icon-btn { background: transparent; border: 0; padding: 8px; border-radius: 10px; cursor: pointer; color: var(--navy); position: relative; display: inline-flex; }
.icon-btn:hover { background: var(--ice-50); }
.user-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 3px 12px 3px 3px; cursor: pointer; font: inherit; color: var(--navy); font-weight: 500; }
.only-mobile { display: none; }
.sidebar-backdrop { display: none; }

/* ---------------- Dropdown ---------------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(14,51,84,.15); min-width: 220px; display: none; z-index: 50; overflow: hidden;
}
.dropdown-menu.wide { width: 360px; max-height: 440px; overflow-y: auto; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu > a { display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: var(--text); border-top: 1px solid var(--gray-50); }
.dropdown-menu > a:hover { background: var(--ice-50); text-decoration: none; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--gray-50); color: var(--text); }
.notif-item:hover { background: var(--ice-50); text-decoration: none; }
.notif-item.unread { background: #F7FBFE; border-left: 3px solid var(--red); }
.notif-item strong { display: block; font-size: .88rem; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }

/* ---------------- Cartes & grilles ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card.flush { padding: 0; }
.card.flush .card-head { padding: 16px 18px 0; }
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }

/* Tuiles statistiques */
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.stat .value { font-family: var(--font-title); font-size: 1.9rem; font-weight: 700; color: var(--navy); line-height: 1.2; margin-top: 4px; }
.stat .sub { font-size: .8rem; color: var(--muted); }
.stat::after { content: ''; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 50%; background: var(--ice-50); }
.stat.accent-red::after { background: var(--danger-50); }
.stat.accent-navy { background: var(--navy); border-color: var(--navy); }
.stat.accent-navy .value { color: #fff; } .stat.accent-navy .label, .stat.accent-navy .sub { color: var(--ice); }
.stat.accent-navy::after { background: rgba(191,221,243,.12); }

/* ---------------- Boutons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: .15s;
  background: var(--navy); color: #fff; font-size: .9rem;
}
.btn:hover { background: var(--navy-3); }
.btn-red { background: var(--red); } .btn-red:hover { background: var(--red-600); }
.btn-ice { background: var(--ice); color: var(--navy); } .btn-ice:hover { background: #9BD0EF; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); } .btn-ghost:hover { background: var(--ice-50); }
.btn-green { background: var(--green); } .btn-green:hover { filter: brightness(1.1); }
.btn-sm { padding: 6px 11px; font-size: .82rem; border-radius: 8px; }
.btn-xs { padding: 3px 8px; font-size: .76rem; border-radius: 7px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-link { background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; padding: 0; }
.mini-link { font-size: .85rem; }

/* ---------------- Badges ---------------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.badge-gray { background: var(--gray-50); color: #4A5568; }
.badge-blue { background: var(--blue-50); color: var(--blue); }
.badge-green { background: var(--green-50); color: var(--green); }
.badge-amber { background: var(--amber-50); color: var(--amber); }
.badge-red { background: var(--danger-50); color: var(--danger-600); }
.badge-ice { background: var(--ice-100); color: var(--navy-2); }
.badge-navy { background: var(--navy); color: #fff; }

/* ---------------- Formulaires ---------------- */
label { display: block; font-weight: 600; font-size: .85rem; color: var(--navy); margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.field small { font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=number],
input[type=search], input[type=color], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #CBD7E4; border-radius: 9px; font: inherit; background: #fff; color: var(--text);
}
input[type=color] { padding: 3px; height: 40px; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ice-600); box-shadow: 0 0 0 3px rgba(191,221,243,.55); }
select[multiple] { min-height: 130px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.check input { width: auto; }
.inline-form { display: inline; }

/* ---------------- Tableaux ---------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); background: #FAFCFE; white-space: nowrap; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--gray-50); vertical-align: middle; }
.table tr:hover td { background: #FAFCFE; }
.table tr.is-done td { opacity: .6; }
.table tr.is-late td:first-child { box-shadow: inset 3px 0 var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.empty .ic { width: 40px; height: 40px; color: var(--ice-600); display: block; margin: 0 auto 8px; }

/* ---------------- Alertes ---------------- */
.alert { padding: 12px 40px 12px 16px; border-radius: 10px; margin-bottom: 16px; position: relative; border: 1px solid; }
.alert-success { background: var(--green-50); border-color: #B7DFC7; color: #22543D; }
.alert-error { background: var(--danger-50); border-color: #F0C2C2; color: #8F2525; }
.alert-warning { background: var(--amber-50); border-color: #F1D7A8; color: #7B4F12; }
.alert-info { background: var(--ice-50); border-color: var(--ice); color: var(--navy); }
.alert-close { position: absolute; right: 10px; top: 8px; background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: inherit; }

/* ---------------- Avatars ---------------- */
.avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; position: relative; flex-shrink: 0; letter-spacing: .3px; }
.avatar.sm { width: 28px; height: 28px; font-size: .68rem; }
.avatar.lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar.xl { width: 72px; height: 72px; font-size: 1.4rem; }
.dot-online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #38A169; border: 2px solid #fff; }
.avatars { display: flex; } .avatars .avatar { margin-left: -8px; border: 2px solid #fff; } .avatars .avatar:first-child { margin-left: 0; }
.person { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- Progression ---------------- */
.progress { height: 8px; background: var(--gray-50); border-radius: 99px; overflow: hidden; min-width: 80px; }
.progress span { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.progress .low { background: var(--danger); } .progress .mid { background: var(--amber); }
.progress .good { background: var(--ice-600); } .progress .done { background: var(--green); }
.progress.lg { height: 12px; }

/* ---------------- Dialogues ---------------- */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 24px)); box-shadow: 0 25px 60px rgba(14,51,84,.35); color: var(--text); }
dialog::backdrop { background: rgba(14,51,84,.55); backdrop-filter: blur(2px); }
.dlg-head { background: var(--navy); color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.dlg-head h3 { color: #fff; margin: 0; }
.dlg-head button { background: none; border: 0; color: var(--ice); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.dlg-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.dlg-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: #FAFCFE; }

/* ---------------- Onglets ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--navy); border-color: var(--red); }
.tabs a:hover { text-decoration: none; color: var(--navy); }
.tabs .pill { margin-left: 5px; }

/* ---------------- Tâches ---------------- */
.task-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #A8B8CC; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; }
.task-check.done { background: var(--green); border-color: var(--green); }
.task-check:hover { border-color: var(--green); }
.task-title { font-weight: 600; color: var(--navy); }
.is-done .task-title { text-decoration: line-through; }
.due { font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; }
.due.late { color: var(--danger); font-weight: 600; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: #EAF1F8; border-radius: 12px; padding: 10px; min-height: 200px; }
.kcol h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; display: flex; justify-content: space-between; margin: 4px 4px 10px; }
.kcol.drag-over { outline: 2px dashed var(--ice-600); }
.kcard { background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(14,51,84,.08); cursor: grab; border-left: 3px solid var(--ice-600); }
.kcard.prio-urgente { border-left-color: var(--danger); } .kcard.prio-haute { border-left-color: var(--amber); } .kcard.prio-basse { border-left-color: #A0AEC0; }
.kcard a { color: var(--navy); font-weight: 600; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.checklist li.done span { text-decoration: line-through; color: var(--muted); }

/* ---------------- Fil / commentaires ---------------- */
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-50); }
.feed .meta { font-size: .78rem; color: var(--muted); }
.timeline { list-style: none; padding: 0 0 0 18px; margin: 0; border-left: 2px solid var(--ice); }
.timeline li { position: relative; padding: 0 0 14px 12px; }
.timeline li::before { content: ''; position: absolute; left: -26px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); }
.timeline li.ok::before { border-color: var(--green); } .timeline li.ko::before { border-color: var(--danger); } .timeline li.fw::before { border-color: var(--amber); }
.att-list { list-style: none; padding: 0; margin: 8px 0 0; }
.att-list li { padding: 6px 10px; background: var(--ice-50); border-radius: 8px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.att-list li a:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prose { line-height: 1.65; word-wrap: break-word; }

/* ---------------- Chat ---------------- */
.chat-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); height: calc(100vh - 62px - 48px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.chat-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: #FAFCFE; min-height: 0; }
.chat-side .head { padding: 14px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; }
.chat-side .list { overflow-y: auto; flex: 1; padding: 6px; }
.chat-side .sec { font-size: .7rem; text-transform: uppercase; color: var(--muted); padding: 10px 8px 4px; letter-spacing: .6px; font-weight: 700; }
.ch-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--text); }
.ch-item:hover { background: var(--ice-50); text-decoration: none; }
.ch-item.active { background: var(--navy); color: #fff; }
.ch-item.active .muted { color: var(--ice); }
.ch-item span.n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chat-head h3 { margin: 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; background: linear-gradient(180deg, #F8FBFE, #fff); }
.msg { display: flex; gap: 10px; margin-bottom: 12px; max-width: 80%; }
.msg .bubble { background: #fff; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.msg .who { font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.msg .who b { color: var(--navy); }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
.msg.mine .bubble { background: var(--navy); color: #fff; border-color: var(--navy); border-radius: 14px 4px 14px 14px; }
.msg.mine .bubble a { color: var(--ice); }
.msg.mine .who { text-align: right; }
.msg .text { white-space: pre-wrap; word-wrap: break-word; }
.day-sep { text-align: center; font-size: .75rem; color: var(--muted); margin: 14px 0; }
.day-sep span { background: var(--ice-50); padding: 3px 12px; border-radius: 99px; }
.chat-form { border-top: 1px solid var(--line); padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { min-height: 44px; max-height: 160px; height: 44px; }
.chat-file-name { font-size: .78rem; color: var(--muted); padding: 0 14px 8px; }

/* ---------------- Agenda ---------------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal .dow { background: var(--navy); color: var(--ice); font-size: .75rem; text-transform: uppercase; padding: 8px; text-align: center; font-weight: 600; border-right: 1px solid var(--navy-3); }
.cal .day { min-height: 112px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; background: #fff; overflow: hidden; }
.cal .day.out { background: #F7F9FC; color: #A0AEC0; }
.cal .day.today { background: var(--ice-50); }
.cal .day.today .num { background: var(--red); color: #fff; }
.cal .num { font-size: .8rem; font-weight: 700; display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; }
.cal .ev { display: block; font-size: .74rem; padding: 2px 6px; border-radius: 5px; color: #fff; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev.task { background: #fff !important; color: var(--danger-600); border: 1px solid var(--danger); }

/* ---------------- Réunions ---------------- */
.meet-body { background: #081F35; }
.meet-body .content { padding: 0; }
.meet { display: grid; grid-template-columns: minmax(0,1fr) 300px; height: calc(100vh - 62px); }
.stage { display: flex; flex-direction: column; min-height: 0; }
.videos { flex: 1; display: grid; gap: 10px; padding: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-auto-rows: minmax(200px, 1fr); overflow-y: auto; }
.tile { background: #0F2C49; border-radius: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #1D4B73; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.tile .label { position: absolute; left: 10px; bottom: 10px; background: rgba(14,51,84,.85); color: #fff; font-size: .78rem; padding: 3px 10px; border-radius: 99px; }
.tile.featured { grid-column: 1 / -1; grid-row: span 2; }
.tile .placeholder { color: var(--ice); text-align: center; }
.controls { display: flex; justify-content: center; gap: 12px; padding: 14px; background: #3f91cf; border-top: 1px solid #1D4B73; flex-wrap: wrap; }
.ctrl { background: #3f91cf; color: #fff; border: 0; border-radius: 99px; padding: 11px 18px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font: inherit; font-weight: 600; }
.ctrl:hover { background: #3f91cf; }
.ctrl.on { background: var(--ice); color: var(--navy); }
.ctrl.danger { background: var(--danger); }
.meet-side { background: #fff; display: flex; flex-direction: column; min-height: 0; }
.meet-side .sec { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.meet-chat { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: .88rem; }
.meet-chat p { margin: 0 0 8px; }
.meet-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }

/* ---------------- Organigramme ---------------- */
.org { overflow-x: auto; padding: 10px 0 20px; }
.org ul { padding-top: 20px; position: relative; display: flex; justify-content: center; margin: 0; padding-left: 0; }
.org li { list-style: none; text-align: center; position: relative; padding: 20px 6px 0; }
.org li::before, .org li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--ice); width: 50%; height: 20px; }
.org li::after { right: auto; left: 50%; border-left: 2px solid var(--ice); }
.org li:only-child::after, .org li:only-child::before { display: none; }
.org li:only-child { padding-top: 0; }
.org li:first-child::before, .org li:last-child::after { border: 0 none; }
.org li:last-child::before { border-right: 2px solid var(--ice); border-radius: 0 6px 0 0; }
.org li:first-child::after { border-radius: 6px 0 0 0; }
.org ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--ice); height: 20px; }
.org > ul { padding-top: 0; }
.org-node { display: inline-block; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 10px; padding: 10px 12px; min-width: 150px; box-shadow: var(--shadow); }
.org-node.l0, .org-node.l1 { border-top-color: var(--red); }
.org-node.l2 { border-top-color: var(--navy); } .org-node.l3 { border-top-color: var(--ice-600); } .org-node.l4, .org-node.l5 { border-top-color: var(--ice); }
.org-node .nm { font-weight: 700; color: var(--navy); font-size: .88rem; margin-top: 4px; }
.org-node .rl { font-size: .74rem; color: var(--muted); }

/* ---------------- Connexion ---------------- */
.auth-body { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; }
.auth-hero { background: var(--navy); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(191,221,243,.22), transparent 70%); right: -160px; top: -120px; }
.auth-hero::after { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(63,145,207,.45), transparent 70%); left: -120px; bottom: -140px; }
.auth-hero h2 { color: #fff; font-size: 2rem; max-width: 460px; position: relative; }
.auth-hero p { color: var(--ice); max-width: 460px; position: relative; }
.auth-hero ul { position: relative; padding: 0; list-style: none; color: #DCEBF7; }
.auth-hero li { padding: 5px 0; } .auth-hero li::before { content: '◆'; color: var(--red); margin-right: 10px; font-size: .7rem; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-form .box { width: 100%; max-width: 380px; }

/* ---------------- Divers ---------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: var(--ice-50); border: 1px solid var(--ice-100); font-size: .8rem; color: var(--navy); }
.color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: 9px 0; border-bottom: 1px solid var(--gray-50); display: flex; gap: 10px; align-items: center; }
.list-plain li:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: .9rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 500; }
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 220px; }
.level-bar { display: grid; grid-template-columns: 170px 1fr 50px; gap: 10px; align-items: center; padding: 6px 0; font-size: .88rem; }
#toast-zone { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); border-left: 4px solid var(--red); max-width: 340px; animation: slideIn .25s ease; cursor: pointer; }
.toast small { color: var(--ice); display: block; }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.print-only { display: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-main { grid-template-columns: 1fr; }
  .meet { grid-template-columns: 1fr; grid-template-rows: 1fr 260px; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(14,51,84,.5); z-index: 35; }
  .main { margin-left: 0; }
  .only-mobile { display: inline-flex; }
  .hide-mobile { display: none; }
  .content { padding: 16px; }
  .topbar { padding: 0 12px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 62px - 32px); }
  .chat-side { display: none; }
  .chat-layout.show-side .chat-side { display: flex; }
  .chat-layout.show-side .chat-main { display: none; }
  .auth-body { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .dropdown-menu.wide { width: 300px; right: -60px; }
  .cal .day { min-height: 70px; }
  .cal .ev { font-size: .65rem; }
  .level-bar { grid-template-columns: 110px 1fr 40px; }
}
@media (max-width: 520px) { .g-4 { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; } }

/* ---------------- Impression ---------------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  .sidebar, .topbar, .no-print, .toolbar, .btn, dialog, #toast-zone, .tabs, .chat-form { display: none !important; }
  .main { margin: 0; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .print-only { display: block; }
  a { color: inherit; }
  .badge { border: 1px solid #999; }
}
.rep-h { color: var(--navy); border-left: 4px solid var(--red); padding-left: 10px; margin: 18px 0 8px; font-size: 1rem; }
.prose ul { margin: 4px 0 10px; padding-left: 22px; }

/* ---------------- UMED : activité médicale ---------------- */
.svc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 99px; font-size: .74rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--svc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--svc) 35%, #fff); white-space: nowrap; }
.svc::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--svc); }
.locked { background: var(--ice-50); border: 1px dashed var(--ice-600); color: var(--navy); padding: 10px 14px; border-radius: 10px; font-size: .86rem; display: flex; gap: 8px; align-items: center; }
.vitals-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.vital { background: var(--ice-50); border-radius: 10px; padding: 10px 12px; }
.vital .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.vital .v { font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.vital.bad { background: var(--danger-50); } .vital.bad .v { color: var(--danger-600); }
.svc-cards { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; border-top: 4px solid var(--svc); color: var(--text); box-shadow: var(--shadow); }
.svc-card:hover { text-decoration: none; border-color: var(--svc); }
.svc-card .n { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.svc-card .l { font-size: .8rem; font-weight: 600; }
.alert-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--danger-50); border: 1px solid #F0C2C2; color: #8F2525; margin-bottom: 16px; }
.alert-strip strong { color: #8F2525; }
.guest-link { display: flex; gap: 8px; align-items: center; background: var(--ice-50); border: 1px solid var(--ice); border-radius: 10px; padding: 8px 10px; }
.guest-link input { font-size: .8rem; }
.status-steps { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1100px) { .svc-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } .vitals-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .svc-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tile.local { order: 2; }
@media (max-width: 860px) { .videos { grid-template-columns: 1fr; grid-auto-rows: minmax(160px, 1fr); } .tile.local:not(.featured) { max-height: 28vh; } }