/* ============================================================
   Gestion patients — feuille de style unique
   Direction : barre latérale bleu nuit, accent cyan, contenu clair.
   Aucune ressource externe (police système, icônes SVG en ligne).
   ============================================================ */

:root {
  /* Bleu nuit de la barre latérale */
  --navy-900: #0b2545;
  --navy-800: #0d2f5a;
  --navy-700: #0e3a6b;
  --navy-600: #14497f;

  /* Accent cyan */
  --accent: #22d3ee;
  --accent-strong: #0891b2;
  --accent-soft: #cffafe;

  /* Surfaces claires */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Texte */
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --text-on-navy: #e2e8f0;
  --text-on-navy-muted: #94b3d4;

  /* Sémantique */
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --success: #059669;
  --success-bg: #ecfdf5;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --info: #1d4ed8;
  --info-bg: #eff6ff;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 16px -6px rgba(15, 23, 42, .10);
  --shadow-lg: 0 12px 40px -12px rgba(15, 23, 42, .28);

  --sidebar-w: 258px;
  --topbar-h: 66px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Durée d'animation pilotée par une variable : mise à 0 sous prefers-reduced-motion */
  --motion: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tous les chiffres alignés verticalement (tableaux, indicateurs, montants) */
table, .num, .stat__value, .pager, input[type="number"],
.cal, .badge, time { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent-strong); }

/* Focus visible homogène partout, y compris sur fond bleu nuit */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}
.sidebar :focus-visible, .topbar__navy :focus-visible {
  outline-color: var(--accent);
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--motion);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Amorçage
   ============================================================ */
.boot {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--bg);
}
.boot__mark {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  animation: pulse 1.4s ease-in-out infinite;
}
.boot__text { color: var(--text-muted); font-size: 14px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ============================================================
   Connexion
   ============================================================ */
.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background:
    radial-gradient(1100px 600px at 15% -10%, #14497f 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  padding: 24px;
  align-content: center;
  justify-items: center;
}
.auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 30px;
}
.auth__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
}
.auth__brand-mark {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  display: grid; place-items: center;
  color: var(--accent);
}
.auth__brand-name { font-size: 17px; font-weight: 650; }
.auth__brand-sub { font-size: 12.5px; color: var(--text-muted); }
.auth__title { font-size: 21px; margin-bottom: 5px; }
.auth__lede { color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.auth__foot { margin-top: 20px; font-size: 12.5px; color: var(--text-faint); text-align: center; }

/* ============================================================
   Ossature de l'application
   ============================================================ */
.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  /* Les rangées DOIVENT être déclarées. Sans elles, les rangées implicites
     valent « auto », et la barre latérale — qui s'étend sur toute la hauteur
     (grid-row: 1 / -1) avec height: 100dvh — verse la totalité de ses 100dvh
     dans la première rangée. Résultat : le contenu principal, placé en
     rangée 2, démarrait un écran entier plus bas, sous un grand vide.
     Une première rangée à taille FIXE (la barre supérieure) empêche tout
     élément à cheval de la faire grandir. */
  grid-template-rows: var(--topbar-h) 1fr;
}

/* --- Barre latérale --- */
.sidebar {
  grid-row: 1 / -1;
  background: linear-gradient(175deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--text-on-navy);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  min-height: var(--topbar-h);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar__mark {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(34, 211, 238, .14);
  display: grid; place-items: center;
  color: var(--accent);
}
.sidebar__name { font-size: 15px; font-weight: 650; color: #fff; }
.sidebar__tenant {
  font-size: 12px;
  color: var(--text-on-navy-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.sidebar__nav { padding: 14px 12px; flex: 1; }
.sidebar__section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-on-navy-muted);
  padding: 14px 10px 7px;
  font-weight: 600;
}
.navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  min-height: 44px; /* cible tactile */
  border-radius: 10px;
  color: var(--text-on-navy);
  text-decoration: none;
  font-size: 14.5px;
  position: relative;
  transition: background var(--motion), color var(--motion);
}
.navlink:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.navlink svg { flex: 0 0 auto; opacity: .82; }
.navlink.is-active {
  background: rgba(34, 211, 238, .14);
  color: #fff;
  font-weight: 600;
}
.navlink.is-active svg { opacity: 1; color: var(--accent); }
/* Barre d'accent cyan sur l'élément courant */
.navlink.is-active::before {
  content: "";
  position: absolute;
  left: -12px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sidebar__foot {
  padding: 14px 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: var(--text-on-navy-muted);
}
.sidebar__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sidebar__user-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.sidebar__user-role { font-size: 11.5px; color: var(--text-on-navy-muted); }
.sidebar__logout {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--text-on-navy);
  font: inherit; font-size: 13.5px;
  cursor: pointer;
  transition: background var(--motion);
}
.sidebar__logout:hover { background: rgba(255, 255, 255, .09); }

/* --- Barre supérieure --- */
.topbar {
  grid-column: 2;
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 247, 251, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
}
.topbar__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
}
.search {
  flex: 1;
  max-width: 520px;
  position: relative;
  display: flex;
  align-items: center;
}
.search svg {
  position: absolute;
  left: 13px;
  color: var(--text-faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
  outline: none;
}
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.iconbtn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: background var(--motion), color var(--motion);
}
.iconbtn:hover { background: rgba(15, 23, 42, .06); color: var(--text); }
.iconbtn--bordered { border-color: var(--border); background: var(--surface); }
.iconbtn__dot {
  position: absolute;
  top: 9px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: 2px solid var(--bg);
}
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
  color: #fff;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  flex: 0 0 auto;
}
.avatar--sm { width: 32px; height: 32px; font-size: 11.5px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.userchip:hover { background: var(--surface-alt); }
.userchip__meta { text-align: left; line-height: 1.2; }
.userchip__name { font-size: 13.5px; font-weight: 600; }
.userchip__role { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 900px) { .userchip__meta { display: none; } .userchip { padding-right: 4px; } }

/* --- Zone principale --- */
.main {
  grid-column: 2;
  padding: 24px 22px 56px;
  min-width: 0; /* indispensable pour que les tableaux larges puissent défiler */
}
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-title { font-size: 23px; }
.page-sub { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Tiroir latéral sous 768px */
.scrim {
  position: fixed; inset: 0;
  background: rgba(11, 37, 69, .5);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion);
}
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }
  .topbar, .main { grid-column: 1; }
  .topbar__burger { display: inline-flex; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, var(--sidebar-w));
    z-index: 50;
    transform: translateX(-102%);
    transition: transform var(--motion) ease-out;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .main { padding: 18px 15px 48px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .page-title { font-size: 20px; }
  /* Le nom du patient dans un tableau est un vrai lien d'action : au doigt, il
     doit offrir une cible de 44px. On n'allonge les lignes que sur petit écran. */
  .linkish { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   Cartes
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.card__title { font-size: 15.5px; font-weight: 650; }
.card__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stack { display: grid; gap: 16px; }

/* Carte d'indicateur */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat__icon {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--info-bg);
  color: var(--info);
}
.stat__icon--cyan { background: var(--accent-soft); color: var(--accent-strong); }
.stat__icon--green { background: var(--success-bg); color: var(--success); }
.stat__icon--amber { background: var(--warning-bg); color: var(--warning); }
.stat__icon--navy { background: #e6edf7; color: var(--navy-700); }
.stat__label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.stat__value { font-size: 26px; font-weight: 680; letter-spacing: -.02em; line-height: 1.15; }

/* ============================================================
   Boutons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--motion), border-color var(--motion), opacity var(--motion);
}
.btn:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--text-faint); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: var(--navy-700); border-color: var(--navy-700); }
.btn--accent {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}
.btn--accent:hover:not(:disabled) { background: #0e7490; border-color: #0e7490; }
.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover:not(:disabled) { background: rgba(15, 23, 42, .06); }
.btn--sm { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn--block { width: 100%; }
/* Sur mobile on force la hauteur tactile même pour les petits boutons */
@media (max-width: 768px) { .btn--sm { min-height: 44px; } }

/* ============================================================
   Formulaires
   ============================================================ */
.form { display: grid; gap: 15px; }
.form-row { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.field__hint { font-size: 12px; color: var(--text-muted); }
.field__req { color: var(--danger); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.form-error {
  font-size: 12.5px;
  color: var(--danger);
  min-height: 0;
}
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
}
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  border: 1px solid;
}
.alert svg { flex: 0 0 auto; margin-top: 1px; }
.alert--danger { background: var(--danger-bg); border-color: var(--danger-border); color: #991b1b; }
.alert--info { background: var(--info-bg); border-color: #bfdbfe; color: #1e40af; }
.alert--warn { background: var(--warning-bg); border-color: #fde68a; color: #92400e; }

/* Barre de filtres */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.toolbar .field { gap: 4px; }
.toolbar .field > label { font-size: 12px; color: var(--text-muted); }
.toolbar .input, .toolbar .select { min-height: 40px; font-size: 14px; }
@media (max-width: 768px) { .toolbar .field { flex: 1 1 100%; } }

/* ============================================================
   Tableaux
   ============================================================ */
/* `position: relative` n'est pas décoratif ici : les éléments réservés aux
   lecteurs d'écran (`.visually-hidden`, en position absolue) prenaient sinon
   la page entière comme référence. Placés dans la dernière colonne d'un
   tableau large, ils se retrouvaient au-delà du bord droit du document et
   provoquaient un défilement horizontal de TOUTE la page — alors que le
   tableau, lui, défilait correctement dans sa propre boîte. */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 620px;
}
.table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 650;
  padding: 12px 16px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-alt); }
.table td.actions { text-align: right; white-space: nowrap; }
.table .cell-strong { font-weight: 600; }
.cell-person { display: flex; align-items: center; gap: 10px; }
.cell-muted { color: var(--text-muted); font-size: 13px; }
.linkish {
  background: none; border: none; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--navy-700);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.linkish:hover { text-decoration: underline; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.pager__btns { display: flex; gap: 8px; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.badge--info { background: var(--info-bg); color: var(--info); border-color: #bfdbfe; }
.badge--cyan { background: var(--accent-soft); color: var(--accent-strong); border-color: #a5f3fc; }
.badge--success { background: var(--success-bg); color: var(--success); border-color: #a7f3d0; }
.badge--warn { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }
.badge--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge--plain::before { display: none; }

/* ============================================================
   États : chargement (squelettes), vide, erreur
   ============================================================ */
.skel {
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: #e9eef5; }
}
.skel--line { height: 12px; }
.skel--title { height: 18px; width: 40%; }
.skel--pill { height: 24px; width: 88px; border-radius: 999px; }
.skel-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 18px;
  display: flex; gap: 14px; align-items: center;
}
.skel-rows { padding: 6px 0; }
.skel-rows > div {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
}
.skel-rows > div:last-child { border-bottom: none; }

.state {
  padding: 44px 24px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.state__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface-alt);
  color: var(--text-faint);
  border: 1px solid var(--border);
  margin-bottom: 2px;
}
.state__icon--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.state__title { font-size: 15.5px; font-weight: 650; }
.state__text { color: var(--text-muted); font-size: 14px; max-width: 46ch; }
.state__actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Onglets (fiche patient)
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  scrollbar-width: thin;
}
.tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-muted);
  padding: 13px 14px;
  min-height: 46px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--navy-700);
  border-bottom-color: var(--accent);
  font-weight: 650;
}
.tab__count {
  font-size: 11.5px;
  background: #eef2f7;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
}

/* Liste de définitions (informations patient) */
.dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px 26px;
}
.dl__item { min-width: 0; }
.dl__key {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 650;
  margin-bottom: 3px;
}
.dl__val { font-size: 14.5px; overflow-wrap: anywhere; }
.dl__val--empty { color: var(--text-faint); }

/* Éléments de liste (dossiers, ordonnances, traitements) */
.itemlist { display: grid; }
.item {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.item:last-child { border-bottom: none; }
.item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.item__title { font-size: 14.5px; font-weight: 650; }
.item__meta { font-size: 12.5px; color: var(--text-muted); }
.item__body { font-size: 14px; color: #334155; white-space: pre-wrap; overflow-wrap: anywhere; }
.kv-inline { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; font-size: 13.5px; }
.kv-inline b { font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; display: block; }

/* ============================================================
   Calendrier (fait main, sans bibliothèque)
   ============================================================ */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cal-month { font-size: 16px; font-weight: 650; text-transform: capitalize; }
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal__dow {
  padding: 9px 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 650;
  text-align: center;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.cal__day {
  min-height: 108px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 7px 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
}
.cal__day:nth-child(7n) { border-right: none; }
.cal__day--out { background: #fbfcfe; }
.cal__day--out .cal__num { color: var(--text-faint); }
.cal__num {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  flex: 0 0 auto;
}
.cal__day--today .cal__num { background: var(--navy-800); color: #fff; }
.cal__evt {
  appearance: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: #0e4f5f;
  border-left: 3px solid var(--accent-strong);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal__evt:hover { filter: brightness(.96); }
.cal__evt--cancelled { background: #f1f5f9; color: #64748b; border-left-color: #94a3b8; text-decoration: line-through; }
.cal__evt--done { background: var(--success-bg); color: #065f46; border-left-color: var(--success); }
.cal__more { font-size: 11px; color: var(--text-muted); padding-left: 4px; }
@media (max-width: 768px) {
  .cal__day { min-height: 78px; padding: 5px 4px; }
  .cal__evt { font-size: 10.5px; padding: 3px 4px; }
  .cal__dow { font-size: 10px; padding: 7px 2px; }
}

/* ============================================================
   Toasts
   ============================================================ */
.toasts {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 100;
  display: grid;
  gap: 10px;
  width: min(370px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy-700);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 13px 14px;
  font-size: 14px;
  pointer-events: auto;
  animation: toast-in var(--motion) ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--info { border-left-color: var(--accent-strong); }
.toast__icon { flex: 0 0 auto; margin-top: 1px; }
.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--info .toast__icon { color: var(--accent-strong); }
.toast__msg { flex: 1; overflow-wrap: anywhere; }
.toast__close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none; background: none;
  color: var(--text-faint);
  border-radius: 6px;
  cursor: pointer;
}
.toast__close:hover { background: var(--surface-alt); color: var(--text); }

/* ============================================================
   Boîtes de dialogue
   ============================================================ */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 69, .48);
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  animation: fade-in var(--motion) ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  margin: auto;
  animation: modal-in var(--motion) ease-out;
}
.modal--wide { max-width: 760px; }
.modal--narrow { max-width: 440px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 14px;
}
.modal__title { font-size: 17.5px; flex: 1; }
.modal__sub { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.modal__body { padding: 4px 22px 20px; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 22px 20px;
  flex-wrap: wrap;
}
.modal__x {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border: none; background: none;
  border-radius: 9px;
  color: var(--text-muted);
  cursor: pointer;
  display: grid; place-items: center;
}
.modal__x:hover { background: var(--surface-alt); color: var(--text); }
.modal__icon {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--danger-bg);
  color: var(--danger);
}
@media (max-width: 768px) {
  .modal { max-width: 100%; }
  .modal__foot .btn { flex: 1; }
}

/* Zone de dépôt de fichier */
.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  background: var(--surface-alt);
  display: grid;
  gap: 8px;
  justify-items: center;
}
.dropzone.is-over { border-color: var(--accent-strong); background: var(--accent-soft); }
.dropzone__name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }

.filerow { display: flex; align-items: center; gap: 12px; }
.filerow__icon {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--info);
  display: grid; place-items: center;
}

/* Divers */
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Utilitaires de structure — remplacent les styles en ligne répétés.
   Les largeurs calculées (squelettes de chargement) restent en ligne : c'est
   le seul cas où une valeur dynamique justifie l'attribut style. */
.u-block { display: block; }
.u-min0 { min-width: 0; }
.u-flex1 { flex: 1; }
.u-wrap { overflow-wrap: anywhere; }
.u-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.u-row--tight { gap: 8px; }

/* Un bouton destructif discret : fond transparent MAIS texte rouge.
   Sans cette règle, .btn--ghost annule le fond de .btn--danger et laisse
   sa couleur blanche — donc un libellé invisible. */
.btn--ghost.btn--danger {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
}
.btn--ghost.btn--danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* ============================================================
   En-tête d'identité patient
   Trois zones sur une seule ligne en grand écran : identité + constantes
   vitales + actions. Les coordonnées y sont directement actionnables, au lieu
   d'être enfermées dans l'onglet « Informations ».
   ============================================================ */
.ident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 16px 18px;
}
/* L'identité occupe la place restante : constantes vitales et actions sont
   donc poussées à droite, que le bloc « vitales » existe ou non. */
.ident__main { flex: 1 1 320px; display: flex; align-items: center; gap: 15px; min-width: 0; }
.ident__name { font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.ident__contacts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; }
.ident__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
  min-height: 32px;
  overflow-wrap: anywhere;
}
.ident__contact:hover { color: var(--accent-strong); text-decoration: underline; }
.ident__vitals { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ident__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 1080px) {
  /* Sous 1080px les trois zones ne tiennent plus côte à côte sans écraser le
     nom du patient : `flex-basis` force le passage à la ligne, et tout
     s'aligne à gauche plutôt que de rester collé à droite. */
  .ident__main { flex-basis: 100%; }
  .ident__vitals, .ident__actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .ident__contact { min-height: 44px; }
  .ident__actions .btn { flex: 1 1 auto; }
}

/* Groupes de champs de la fiche — remplacent les <hr> posés en ligne */
.fieldset + .fieldset { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.fieldset__title { font-size: 15.5px; font-weight: 650; margin-bottom: 14px; }

/* ============================================================
   Indicateur cliquable
   Seuls les indicateurs ayant une vraie destination deviennent des liens.
   ============================================================ */
.stat__text { display: grid; min-width: 0; }
.stat--link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion);
}
.stat--link .stat__go { margin-left: auto; color: var(--text-faint); flex: 0 0 auto; }
.stat--link:hover {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.stat--link:hover .stat__go { color: var(--accent-strong); }
.stat--link:active { transform: translateY(0) scale(.995); }

/* ============================================================
   Mouvement
   Principes GSAP appliqués en CSS : transform/opacity uniquement (aucun
   reflow), ease-out à l'entrée, sortie plus courte que l'entrée, et chaque
   animation exprime une cause — jamais de décoration.
   GSAP n'est volontairement PAS embarqué : l'application n'a aucune ressource
   externe (CSP script-src 'self'), et le motion appuyé est un anti-pattern
   reconnu en contexte médical.
   ============================================================ */

/* Arrivée des données : les lignes entrent en cascade, du haut vers le bas.
   Décalage de 35 ms, plafonné à 8 lignes — au-delà, l'attente se verrait. */
@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.itemlist--enter > .item {
  animation: row-in 220ms cubic-bezier(.22, .61, .36, 1) both;
}
.itemlist--enter > .item:nth-child(1) { animation-delay: 0ms; }
.itemlist--enter > .item:nth-child(2) { animation-delay: 35ms; }
.itemlist--enter > .item:nth-child(3) { animation-delay: 70ms; }
.itemlist--enter > .item:nth-child(4) { animation-delay: 105ms; }
.itemlist--enter > .item:nth-child(5) { animation-delay: 140ms; }
.itemlist--enter > .item:nth-child(6) { animation-delay: 175ms; }
.itemlist--enter > .item:nth-child(7) { animation-delay: 210ms; }
.itemlist--enter > .item:nth-child(n + 8) { animation-delay: 245ms; }

/* Changement d'onglet : fondu enchaîné dans le même conteneur, pas de saut. */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.tabpanel { animation: panel-in 180ms cubic-bezier(.22, .61, .36, 1) both; }

/* Sorties : ~65 % de la durée d'entrée, en ease-in. */
@keyframes modal-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px) scale(.99); }
}
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }

.modal-scrim.is-leaving {
  animation: fade-out 110ms ease-in both;
  pointer-events: none; /* plus aucun clic ne porte pendant la disparition */
}
.modal-scrim.is-leaving .modal { animation: modal-out 110ms ease-in both; }
.toast.is-leaving { animation: toast-out 110ms ease-in both; pointer-events: none; }

/* Retour tactile : léger enfoncement à l'appui, sans décaler la mise en page. */
.btn:active:not(:disabled) { transform: scale(.97); }
.btn { transition: background var(--motion), border-color var(--motion), color var(--motion), transform 90ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  /* Le contenu doit rester lisible : on supprime le mouvement, pas l'élément.
     Chaque animation part d'un état visible et finit à l'état final. */
  .itemlist--enter > .item,
  .tabpanel,
  .modal-scrim.is-leaving,
  .modal-scrim.is-leaving .modal,
  .toast.is-leaving { animation: none; opacity: 1; transform: none; }
  .stat--link:hover, .btn:active:not(:disabled) { transform: none; }
}

/* ============================================================
   Mobile — corrections mesurées à 375 px
   Chaque règle répond à un défaut constaté, pas à une intuition.
   ============================================================ */
@media (max-width: 768px) {
  /* La recherche du bandeau tombait à 86 px de large : une fois l'icône et
     ses 40 px de retrait déduits, il restait 46 px pour taper. Elle passe donc
     sur sa propre ligne, en pleine largeur.
     La 1re rangée repasse en « auto » SANS risque ici : sous 768 px la barre
     latérale est en position fixe, donc hors du flux de la grille — elle ne
     peut plus gonfler la rangée comme elle le faisait en grand écran. */
  .shell { grid-template-rows: auto 1fr; }
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 8px;
  }
  .search { order: 3; flex: 1 0 100%; max-width: none; }
  .topbar__spacer { display: none; }

  /* 44 px minimum au doigt : ces trois règles descendaient à 40-42 px. */
  .search input { height: 44px; }
  .toolbar .input, .toolbar .select { min-height: 44px; }

  /* Calendrier — le défaut le plus sévère : 42 boutons « + » figés à 26×26 px
     dans des cases de 49 px de large. Impossible à viser sans se tromper de
     jour. On les retire au doigt (le bouton « Nouveau rendez-vous » de
     l'en-tête fait le même travail) et on rend les pastilles d'événement
     réellement tactiles et lisibles. */
  .cal__day [data-day-add] { display: none; }
  .cal__day { min-height: 108px; padding: 6px 5px 8px; }
  .cal__evt {
    /* 44 px en HAUTEUR : c'est la dimension qui compte pour des pastilles
       empilées (on rate un voisin verticalement, pas horizontalement). La
       largeur reste bornée par la colonne — une grille de 7 jours sur 375 px
       ne peut pas offrir 44 px de large, quoi qu'on fasse. */
    min-height: 44px;
    font-size: 12px;
    padding: 6px 7px;
    display: flex;
    align-items: center;
    white-space: normal;
    line-height: 1.25;
  }
  .cal__dow { font-size: 12px; padding: 8px 4px; }
  .cal__more { font-size: 12px; }
  .cal__num { font-size: 13px; }

  /* Texte : rien de lisible ne descend sous 12 px au doigt.
     Les en-têtes de colonnes sont relus à chaque ligne parcourue. */
  .table th { font-size: 12px; }
  .sidebar__section, .sidebar__user-role, .userchip__role { font-size: 12px; }
  .dl__key { font-size: 12px; }
  /* Restent volontairement sous 12 px : les initiales dans les pastilles
     d'avatar et les compteurs des onglets. Ce sont des redondances visuelles —
     le nom complet et le libellé de l'onglet sont juste à côté. Les grossir
     ferait grandir la pastille et volerait de la largeur au nom lui-même. */
}

@media print {
  .sidebar, .topbar, .page-actions, .ident__actions, .toasts { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .main { padding: 0; }
  /* À l'impression, rien ne doit dépendre d'une animation jouée ou non. */
  .itemlist--enter > .item, .tabpanel { animation: none; opacity: 1; transform: none; }
}