/* ============================================================
   AZURGENCES — Design System CSS (Phase 7)
   Références : docs/Design_System.md (§3, §4, §5, §6, §10)
   + maquettes React archive/maquettes azurgences/src/index.css
   Fonds validés 15/07 : page #FDFBF7, cartes #F9F8F6.
   ============================================================ */

:root {
  /* ─── Palette Azur (Design_System §3.1, light) ─── */
  --azur-50:  #F0F7FF;
  --azur-100: #D6E8FF;
  --azur-200: #A8D0FF;
  --azur-300: #6BB3FF;
  --azur-400: #3A9BFF;
  --azur-500: #0A84FF;
  --azur-600: #0066CC;
  --azur-700: #004C99;
  --azur-800: #003366;
  --azur-900: #001A33;

  /* ─── Sémantique médicale (§3.2) ─── */
  --success-500: #34C759;
  --success-bg:  #E9F7EF;
  --success-text:#1F7A3D;
  --warning-500: #FF9500;
  --warning-bg:  #FDF3E3;
  --warning-text:#8A5A00;
  --error-500:   #FF3B30;
  --error-bg:    #FDECEB;
  --error-text:  #C0281E;

  /* Indicateurs d'attente console : tons foncés/chauds calibrés pour rester
     >= 3:1 (WCAG 1.4.11, indicateur non textuel) sur le fond crème #FDFBF7
     — les tons 500 vifs n'y atteignent que ~2:1. */
  --wait-ok:   #1F7A3D; /* < 15 min  (~5.3:1 sur #FDFBF7) */
  --wait-warn: #B45309; /* 15-30 min (~5.5:1) */
  --wait-crit: #C0281E; /* > 30 min  (~6:1) */
  --info-500:    #5AC8FA;
  --info-bg:     #EAF7FE;
  --info-text:   #12678A;
  /* Mauve : teinte de carte console (systemPurple Apple, décliné comme les
     autres familles sémantiques). */
  --mauve-500:   #AF52DE;
  --mauve-bg:    #F5EDFB;
  --mauve-text:  #6E3AA5;
  /* Jaune : 6e teinte de carte console (systemYellow Apple, décision
     2026-09-09) — distincte de l'orange warning. */
  --jaune-500:   #FFD60A;
  --jaune-bg:    #FBF6D9;
  --jaune-text:  #7D6608;

  /* ─── Neutres (échelle stone, console validée 15/07) ─── */
  --neutral-100: #f5f5f4;
  --neutral-200: #e7e5e4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #292524;
  --neutral-900: #1C1C1E;

  /* ─── Fonds (validés 15/07) ─── */
  --bg-page:    #FDFBF7;
  --bg-card:    #F9F8F6;
  --bg-subtle:  #F2F1ED;
  --bg-field:   #FFFFFF;
  --white:      #FFFFFF;

  /* ─── Textes ─── */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverse:   #FFFFFF;

  /* ─── Typographie (§4) ─── */
  /* Police systeme assumee (HIG) : San Francisco sur iPhone/Mac, Roboto sur
     Android, Segoe sur Windows — rendu natif, zero telechargement, identique
     au reste de l'OS. 'Inter'/'Avenir' n'etaient jamais chargees. */
  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-brand: var(--font-sans);

  /* ─── Espacement 8pt grid (§5.1) ─── */
  --space-4:  4px;  --space-8:  8px;  --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px;

  /* ─── Rayons (§10, équiv. Tailwind) ─── */
  --radius-sm:   8px;
  --radius-md:   12px; /* champs = boutons (coins concentriques) */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 9999px;

  /* ─── Ombres (§10) ─── */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.15);
  --shadow-primary: 0 3px 10px rgba(0, 0, 0, 0.10); /* neutre : plus de halo colore */

  /* ─── Animations (§8.1) ─── */
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms var(--ease-in-out);
  --transition-base: 200ms var(--ease-in-out);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus visible (accessibilité §9.3) */
:focus-visible {
  outline: 2px solid var(--azur-500);
  outline-offset: 2px;
}

/* ─── Skip to content ─── */
.skip-to-content {
  position: absolute; left: -9999px; top: 8px; z-index: 10000;
  background: var(--azur-600); color: var(--white);
  padding: 8px 16px; border-radius: var(--radius-sm);
  text-decoration: none; font-size: 14px; font-weight: 500;
}
.skip-to-content:focus { left: 8px; }

/* ─── Typographie utilitaire ─── */
.font-title-2 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.font-mono { font-family: var(--font-mono); }
.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-error { color: var(--error-text); }

/* ─── Utilitaires espacement / layout ─── */
.mt-1 { margin-top: 4px; }  .mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.w-full { width: 100%; }
.max-w-sm { max-width: 480px; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

/* ============================================================
   Coquille commune parcours PATIENTS + pages auth (mobile first)
   Fidèle à MainLayout.tsx / AuthLayout.tsx : header empilé centré
   AZURGENCES + « Maison Médicale », contenu max-w-lg, footer sizu.
   ============================================================ */
/* Footer ancré en bas de la fenêtre comme sur la console (console V4 F6) :
   colonne flex min-height 100dvh (100vh déborde du viewport visuel sur
   mobile — barre d'URL — et laissait le footer « suivre le contenu »)
   + margin-top:auto de sûreté sur le footer. */
.patients-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg-page); font-size: 17px; /* HIG body */ }
.patients-shell > .app-footer { margin-top: auto; }
/* Sélecteur de langue du parcours patient (console V4 G1) : coin supérieur
   droit selon les règles de l'art (globe + endonyme + chevron, pas de
   drapeaux). Propriétés logiques : inset-inline-end → passe naturellement en
   haut à GAUCHE en arabe (dir="rtl"). Position absolue dans la coquille pour
   ne pas perturber le header AZURGENCES centré. Base <details>/<summary> :
   utilisable sans JavaScript (app.js n'ajoute que Escape / clic extérieur). */
.patients-shell { position: relative; }
.lang-switch {
  position: absolute;
  inset-block-start: var(--space-8);
  inset-inline-end: var(--space-8);
  z-index: 100;
}
.lang-switch-menu { position: relative; }
.lang-switch-menu summary::-webkit-details-marker { display: none; }
.lang-switch-button {
  display: inline-flex; align-items: center; gap: 5px;
  list-style: none; cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 500; color: var(--text-tertiary);
  padding: 5px 8px; border-radius: 999px;
}
.lang-switch-button:hover { background: rgba(0, 0, 0, .04); color: var(--text-secondary); }
.lang-switch-menu[open] .lang-switch-button { background: rgba(0, 0, 0, .04); color: var(--text-secondary); }
.lang-switch-menu[open] .lang-switch-chevron { transform: rotate(180deg); }
.lang-switch-globe, .lang-switch-chevron { flex: none; }
.lang-switch-list {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 148px;
  margin: 0; padding: var(--space-4, 4px); list-style: none;
  background: var(--white); border: 1px solid var(--border-subtle, rgba(0, 0, 0, .08));
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}
.lang-switch-list a {
  display: block; padding: 6px 10px; border-radius: 6px;
  font-size: 13px; color: var(--text-secondary); text-decoration: none;
}
.lang-switch-list a:hover { background: rgba(0, 0, 0, .04); color: var(--text-primary); }
.lang-switch-list a.is-active { color: var(--azur-700); background: var(--azur-100); font-weight: 600; }
.patients-main { flex: 1; display: flex; flex-direction: column; padding: var(--space-48) var(--space-16) var(--space-24); }
.patients-header { text-align: center; margin-bottom: var(--space-32); }
.patients-brand {
  font-family: var(--font-brand);
  font-size: 27px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--azur-700); line-height: 1;
}
.patients-brand-sub {
  font-family: var(--font-brand);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-400); line-height: 1.2; margin-top: 4px;
}
.patients-content { width: 100%; max-width: 512px; margin: 0 auto; display: flex; flex-direction: column; }

@media (min-width: 640px) {
  .patients-main { padding-left: var(--space-24); padding-right: var(--space-24); }
}

/* ─── Footer « AI-Powered by ✦ sizu.fr » (sans trait, Footer.tsx) ─── */
.app-footer {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-16) var(--space-24) var(--space-24);
  background: transparent; border: none;
}
.app-footer-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--text-tertiary);
}
.app-footer-star { color: var(--azur-500); font-size: 18px; line-height: 1; font-weight: 700; }

/* ============================================================
   Cartes (maquette : rounded-xl, border azur-100, shadow-sm)
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--azur-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-16) var(--space-20) 0; }
.card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.card-body { padding: var(--space-20); }
.auth-card, .onboarding-card { width: 100%; }

/* ─── Auth / Login — harmonisé avec les panneaux de la console (V3) ─── */
.auth-card {
  background: var(--console-panel);
  border: 1px solid var(--console-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--console-panel-shadow);
}

.auth-method-note {
  margin: var(--space-12) 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}
.auth-alternatives, .login-method { display: none; }
.auth-alternatives {
  margin-top: var(--space-24);
  padding-top: var(--space-20);
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, .08));
}
.auth-alternatives-label {
  margin: 0 0 var(--space-12);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.login-method + .login-method { margin-top: var(--space-12); }

/* Browser mobile: magic link only. Browser desktop: all methods. */
@media (min-width: 768px) {
  html:not(.is-standalone) .auth-alternatives,
  html:not(.is-standalone) .login-method-password { display: block; }
  html:not(.is-standalone).has-passkey .login-method-passkey:not([hidden]) { display: block; }
}

/* Installed PWA, including the iOS class fallback: magic link + passkey. */
html.is-standalone.has-passkey .auth-alternatives,
html.is-standalone.has-passkey .login-method-passkey:not([hidden]) { display: block; }
html.is-standalone .login-method-password { display: none; }
@media (display-mode: standalone) {
  html.has-passkey .auth-alternatives,
  html.has-passkey .login-method-passkey:not([hidden]) { display: block; }
  .login-method-password { display: none; }
}
.auth-icon-success {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--success-bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.auth-icon-check {
  color: var(--success-text);
  font-size: 28px; font-weight: 700; line-height: 1;
}

/* ============================================================
   Boutons (maquette .btn-primary / .btn-secondary, HIG §6.3.1)
   Mobile first : pleine largeur via .btn-block, min 44pt.
   ============================================================ */
.manual-patient-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--white);
  color: var(--text-primary); box-shadow: var(--shadow-lg); overflow: hidden;
}
.manual-patient-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.manual-patient-panel { max-height: calc(100vh - 32px); overflow: auto; }
.manual-patient-form { display: flex; flex-direction: column; min-height: min(720px, calc(100vh - 32px)); }
.manual-patient-header, .manual-patient-actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-20) var(--space-24); background: var(--white);
}
.manual-patient-header { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.manual-patient-header h2, .manual-patient-matches h3 { margin: 0; }
.manual-patient-header .eyebrow { margin: 0 0 4px; color: var(--azur-600); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.manual-patient-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); flex: 1; min-height: 0; }
.manual-patient-fields, .manual-patient-matches { padding: var(--space-24); }
.manual-patient-matches { background: var(--bg-card); border-left: 1px solid rgba(0, 0, 0, .08); }
.manual-patient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-16); }
.manual-patient-selected, .manual-patient-match {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-16); margin-bottom: var(--space-16); border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg); background: var(--white);
}
.manual-patient-selected { border-color: var(--azur-300); background: var(--azur-50); }
.manual-patient-selected p, .manual-patient-match p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.manual-patient-match.is-strong { border-color: var(--warning-500); }
.manual-patient-queue { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 999px; background: var(--azur-50); color: var(--azur-700); font-size: 12px; font-weight: 600; }
.manual-patient-hint { color: var(--text-secondary); font-size: 14px; }
/* Dossiers MLM nés le même jour (rempli par app.js) : CONTINUE la liste des
   dossiers Azurgences dans la même colonne — même anatomie de carte, le badge
   dit la source, aucun séparateur. */
.manual-patient-mlm { margin-top: var(--space-12); }
.manual-patient-mlm[hidden] { display: none; }
.manual-patient-source {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12); color: var(--text-secondary);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: middle;
}
.manual-patient-confirm { display: flex; gap: 10px; padding: var(--space-12); margin-top: var(--space-12); border-radius: var(--radius-md); background: var(--warning-bg); }
.manual-patient-actions { position: sticky; bottom: 0; justify-content: flex-end; border-top: 1px solid rgba(0, 0, 0, .08); }
.manual-patient-status { position: fixed; right: 24px; bottom: 24px; z-index: 50; margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--success-bg); color: var(--success-text); box-shadow: var(--shadow-md); }
.manual-patient-status:empty { display: none; }
.console-add-patient { white-space: nowrap; }
@media (max-width: 760px) {
  .manual-patient-dialog { width: 100vw; max-width: none; max-height: 100vh; border-radius: 0; }
  .manual-patient-panel { max-height: 100vh; }
  .manual-patient-layout { grid-template-columns: 1fr; }
  .manual-patient-matches { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .08); }
  .manual-patient-grid { grid-template-columns: 1fr; }
  .manual-patient-actions { padding: var(--space-16); }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: var(--radius-lg);
  padding: 12px 32px; min-height: 44px;
  font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.3;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform var(--transition-base), background-color var(--transition-base),
              color var(--transition-base), box-shadow var(--transition-base);
}
.btn:disabled { cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.96); }

.btn-primary { background: var(--azur-500); color: var(--text-inverse); box-shadow: var(--shadow-primary); }
.btn-primary:hover:not(:disabled) { background: var(--azur-600); }
.btn-primary:disabled { background: var(--azur-300); box-shadow: none; }

.btn-secondary { background: transparent; color: var(--azur-500); border-color: var(--azur-500); }
.btn-secondary:hover:not(:disabled) { background: var(--azur-50); }

.btn-ghost { background: transparent; color: var(--text-tertiary); }
.btn-ghost:hover:not(:disabled) { background: var(--azur-50); color: var(--azur-600); }

.btn-danger { background: var(--error-500); color: var(--white); }
.btn-danger:hover:not(:disabled) { background: #D70015; }

.btn-sm { padding: 6px 12px; font-size: 13px; min-height: 36px; border-radius: var(--radius-md); }
.btn-block { display: flex; width: 100%; }

/* ============================================================
   Formulaires (HIG §6.3.2 : fond secondaire, focus azur + halo)
   ============================================================ */
.form-group { margin-bottom: var(--space-16); }
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 6px;
}
/* Mention discrète des champs facultatifs (HIG Text fields : dire ce qui est
   optionnel plutôt que marquer tout le reste d'astérisques). */
.form-optional { font-weight: 400; color: var(--text-tertiary); }
.input, .select, .textarea {
  display: block; width: 100%; min-height: 44px;
  padding: 10px 16px;
  background: var(--bg-field);
  border: 1px solid var(--azur-100); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 16px; color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--azur-500);
  box-shadow: 0 0 0 4px var(--azur-100);
}
.input[readonly] { background: var(--bg-subtle); color: var(--text-tertiary); }
.input[aria-invalid="true"], .input.input-error { border-color: var(--error-500); }
.textarea { min-height: 80px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 40px;
}
.form-error {
  display: block; font-size: 13px; color: var(--error-text); margin-top: 6px;
}
/* Nom de famille : toujours affiché en MAJUSCULES (normalisé côté serveur). */
.input-uppercase { text-transform: uppercase; }
/* Prénom : capitale à chaque mot, comme le parcours patient. La saisie reste
   libre, seule la restitution est normalisée. */
.input-titlecase { text-transform: capitalize; }
.input-titlecase::placeholder { text-transform: none; }
.input-uppercase::placeholder { text-transform: none; }
/* Téléphone : indicatif pays + numéro national sur une ligne (ltr forcé). */
.phone-row { display: flex; gap: 8px; }
.phone-row .phone-dial { flex: 0 1 40%; min-width: 110px; }
.phone-row .phone-national { flex: 1 1 auto; }
/* Actions post-enregistrement : notification principale + aide PWA secondaire. */
.push-optin { margin-top: var(--space-20); }
.push-optin .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); }
.push-optin .lucide { flex: 0 0 auto; }
.push-optin-done {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--success-bg); color: var(--success-text); font-size: 14px;
}
.push-optin-denied {
  display: flex; align-items: flex-start; gap: var(--space-8); margin: 0;
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--warning-bg);
  color: var(--warning-text); font-size: 13px; text-align: start;
}
.push-optin-denied .lucide { flex: none; margin-top: 2px; }
.pwa-install-hint {
  display: flex; align-items: flex-start; gap: var(--space-12); margin-top: var(--space-16);
  padding: var(--space-12) var(--space-16); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md); background: var(--bg-subtle); text-align: start;
}
.pwa-install-hint[hidden],
.pwa-install-hint [data-pwa-ios][hidden],
.pwa-install-hint [data-pwa-android][hidden],
.pwa-install-hint [data-pwa-android-native][hidden],
.pwa-install-hint [data-pwa-android-fallback][hidden],
.pwa-install-hint [data-pwa-install][hidden] { display: none !important; }
.pwa-install-hint-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--azur-50); color: var(--azur-700);
}
.pwa-install-hint-content { min-width: 0; flex: 1; }
.pwa-install-hint-content > strong { display: block; color: var(--text-primary); font-size: 14px; }
.pwa-install-hint-content > p, .pwa-install-android p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.45; }
.pwa-install-steps { margin: var(--space-8) 0 0; padding-inline-start: 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.pwa-install-steps li + li { margin-top: 4px; }
.pwa-install-android { margin-top: var(--space-8); }
.pwa-install-android .btn { margin-top: var(--space-12); }
.checkbox-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--text-secondary); min-height: 24px; cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--azur-500); flex-shrink: 0; }
.doctor-fieldset {
  border: 1px solid var(--azur-100); border-radius: var(--radius-md);
  padding: var(--space-12); background: var(--bg-field);
}
.doctor-fieldset .input { background: var(--bg-subtle); border-color: transparent; }
.doctor-fieldset .input:focus { border-color: var(--azur-500); background: var(--bg-field); }

/* Champ fichier (carte vitale / mutuelle) — input natif capture="environment" */
input[type="file"].input { padding: 9px 12px; cursor: pointer; }
input[type="file"].input::file-selector-button {
  margin-right: 12px; padding: 4px 12px;
  border: 1px solid var(--azur-200); border-radius: var(--radius-sm);
  background: var(--azur-50); color: var(--azur-700);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ============================================================
   Badges & alertes (HIG §6.4.3)
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 16px;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-error   { background: var(--error-bg);   color: var(--error-text); }
.badge-info    { background: var(--info-bg);    color: var(--info-text); }
.badge-neutral { background: var(--bg-subtle);  color: var(--text-tertiary); }

.alert {
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 14px; margin-bottom: var(--space-16);
}
.alert-danger  { background: var(--error-bg);   color: var(--error-text);   border: 1px solid rgba(255,59,48,0.25); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid rgba(255,149,0,0.25); }
.alert-success { background: var(--success-bg); color: var(--success-text); border: 1px solid rgba(52,199,89,0.25); }
.alert-info    { background: var(--info-bg);    color: var(--info-text);    border: 1px solid rgba(90,200,250,0.3); }

/* Notification éphémère (§6.4 Toast) : bandeau de résultat d'action —
   auto-disparition après 5s (délai piloté en JS, voir app.js), fondu ici.
   Se met en pause au survol/focus (armFlashAlert) : le délai ci-dessus ne
   régit que la sortie visuelle, pas la temporisation réelle. */
.flash-alert {
  position: relative; padding-right: 40px;
  animation: flash-alert-in 300ms var(--ease-spring);
}
.flash-alert.is-leaving { animation: flash-alert-out 400ms var(--ease-in-out) forwards; }
.flash-alert-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: inherit; opacity: 0.6;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.flash-alert-close:hover, .flash-alert-close:focus-visible { opacity: 1; background: rgba(0,0,0,0.08); }
@keyframes flash-alert-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes flash-alert-out { to { opacity: 0; transform: translateY(-4px); } }

/* ─── Spinner ─── */
.spinner {
  width: 24px; height: 24px; border: 3px solid var(--azur-100);
  border-top-color: var(--azur-500); border-radius: 50%;
  animation: spin 1s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── États vides ─── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-48) var(--space-24); text-align: center;
}
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state-text { font-size: 14px; color: var(--text-secondary); }

/* ============================================================
   Parcours PATIENTS (Phases 3-5) — écrans React d'origine
   ============================================================ */
.onboarding-heading { text-align: center; margin-bottom: var(--space-24); }
.onboarding-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary); margin-top: 4px;
}
.auth-step .font-title-2 { text-align: center; }
.auth-step > .text-secondary { display: block; text-align: center; margin: 8px 0 var(--space-24); font-size: 17px; }

/* Connexion par code personnel (appareil connu) */
.auth-pin-account { font-weight: 600; color: var(--text-primary); }
.auth-pin-email { font-weight: 400; color: var(--text-secondary); font-size: 15px; }
.input-pin { text-align: center; letter-spacing: 0.5em; font-size: 24px; }
.auth-pin-links { display: flex; flex-direction: column; gap: var(--space-12); align-items: center; margin-top: var(--space-24); }
.auth-pin-links a { color: var(--azur-600); text-decoration: none; font-size: 15px; }
.auth-pin-links a:hover { text-decoration: underline; }

/* Enfants (étape 3) */
.children-list { list-style: none; margin: 0 0 var(--space-16); display: flex; flex-direction: column; gap: 8px; }
.child-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--bg-field); border: 1px solid var(--azur-100); border-radius: var(--radius-lg);
}
.child-row-avatar, .person-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
  background: var(--azur-100); color: var(--azur-700);
}
.child-row-avatar-male   { background: var(--azur-50);  color: var(--azur-600); }
.child-row-avatar-female { background: #FFF1F2; color: #E11D48; }
.child-row-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.child-row-birth { font-size: 13px; }
.child-row-delete { color: var(--text-tertiary); }
.child-row-delete:hover:not(:disabled) { color: var(--error-text); background: var(--error-bg); }

/* Check-in : sélection de la personne */
.person-list { display: flex; flex-direction: column; gap: 12px; }
.person-card {
  display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20);
  background: var(--bg-card); border: 1px solid var(--azur-100);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  min-height: 72px;
}
.person-card:hover { background: var(--azur-50); box-shadow: var(--shadow-md); }
.person-card:active { transform: scale(0.98); }
.person-card-add { border-style: dashed; background: transparent; box-shadow: none; }
.person-card-add:hover { background: var(--azur-50); box-shadow: none; }
.person-avatar-self { border: 2px solid var(--white); box-shadow: var(--shadow-sm); }
.person-avatar-add { background: var(--bg-subtle); color: var(--text-tertiary); font-size: 20px; }
.person-avatar-lg { width: 64px; height: 64px; font-size: 20px; margin: 0 auto; }
.person-meta { flex: 1; display: flex; flex-direction: column; text-align: left; min-width: 0; }
.person-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.person-name { font-weight: 600; }
.person-chevron { color: var(--text-disabled); font-size: 22px; }

/* Check-in groupé (docs/features/31_grouped_checkin.md) : personnes pas
   encore enregistrées, sélectionnables par case à cocher au lieu d'un lien
   direct. */
.person-card-selectable { cursor: pointer; }
.person-card-selectable input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--azur-500); }
.person-card-selectable:has(input:checked) { border-color: var(--azur-400); background: var(--azur-50); }
.person-card-selectable:has(input:focus-visible) { border-color: var(--azur-500); box-shadow: 0 0 0 4px var(--azur-100); }

/* Récapitulatif check-in */
.recap-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16);
  background: var(--bg-field); border: 1px solid var(--azur-100);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-20); font-size: 14px;
}
.recap-label { color: var(--text-tertiary); font-size: 13px; }
.recap-value { font-weight: 500; }
.recap-upper { text-transform: uppercase; }

/* Consentements de soins (écran de validation du check-in) */
.consent-intro { margin-bottom: 12px; font-size: 14px; }
.consent-list { display: flex; flex-direction: column; gap: 10px; }
.consent-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
}
.consent-check input {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--azur-500);
}
.consent-check strong, .consent-check small { display: block; }
.consent-check strong { color: var(--text-primary); font-size: 14px; }
.consent-check small { margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }
.consent-check:has(input:focus-visible) { border-color: var(--azur-500); box-shadow: 0 0 0 4px var(--azur-100); }

/* Badge consentements des cartes console (triangle/coche + infobulle).
   Icônes 100 % CSS : triangle clip-path, coche et croix en bordures. */
.consent-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; cursor: help; align-self: center; }

.consent-icon-warn {
  display: inline-flex; align-items: flex-end; justify-content: center;
  width: 15px; height: 13px; padding-bottom: 1px;
  background: var(--warning-500); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: var(--white); font-size: 9px; font-weight: 800; line-height: 1;
}
.consent-icon-ok {
  width: 9px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--success-500); border-bottom: 2px solid var(--success-500);
  transform: rotate(-45deg);
}
.consent-tooltip {
  /* position: fixed (plutôt qu'absolute) + coordonnées posées par app.js
     (positionConsentTooltip) : les colonnes de la console ont un
     overflow-y: auto qui rognerait une infobulle positionnée en absolute
     dès que la carte n'est pas tout en haut de la liste. */
  position: fixed; top: 0; left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border: 1px solid var(--neutral-200); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-md);
  font-size: 12px; font-weight: 400; color: var(--text-secondary);
  white-space: nowrap; text-align: left; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.consent-badge:hover .consent-tooltip,
.consent-badge:focus-visible .consent-tooltip {
  opacity: 1; visibility: visible;
  transition: opacity .3s ease, visibility 0s linear;
}
.consent-tooltip-row { display: flex; align-items: center; gap: 6px; }
.consent-mark { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.consent-mark.ok::before {
  content: ""; position: absolute; left: 1px; top: 2px; width: 8px; height: 4px;
  border-left: 2px solid var(--success-500); border-bottom: 2px solid var(--success-500);
  transform: rotate(-45deg);
}
.consent-mark.no::before, .consent-mark.no::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 2px; height: 10px;
  background: var(--error-500);
}
.consent-mark.no::before { transform: rotate(45deg); }
.consent-mark.no::after { transform: rotate(-45deg); }

/* Carte vitale & documents */
.upload-block { margin-bottom: var(--space-24); }
.upload-status { margin-top: 8px; }
.upload-done { color: var(--success-text); font-weight: 600; font-size: 14px; }

/* Waiting room */
.waiting-card .card-body { display: flex; flex-direction: column; align-items: center; }
.waiting-status { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.waiting-count {
  width: 88px; height: 88px; border-radius: var(--radius-xl); background: var(--azur-500);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary);
}
.waiting-count-number { font-size: 58px; font-weight: 700; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.waiting-room-name {
  padding: var(--space-16) var(--space-32); border-radius: var(--radius-xl);
  background: var(--success-bg); color: var(--success-text);
  font-size: 24px; font-weight: 700;
}
.waiting-number { font-size: 17px; color: var(--azur-600); }
.waiting-eta { font-size: 14px; }
.waiting-info-panel {
  width: 100%; max-width: 350px; aspect-ratio: 16 / 9;
  background: var(--bg-subtle); border: 1px solid var(--azur-100); border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; text-align: center; padding: var(--space-12);
}

/* ============================================================
   Console SECRÉTARIAT (V3 — salles empilées, 16/07)
   Contrat visuel : archive/maquettes/console_v3_salles_empilees.html
   + docs/spec_console_v3.md §1. Fonds/effets de bord = app Mac
   Claude.ai thème clair (tokens --console-*). Sidebars = panneaux
   BLANCS 288↔48px, hairline 4 côtés, radius 12px, marge 8px, pleine
   hauteur (le footer sizu vit dans la colonne centrale). Centre =
   lanes pleine largeur empilées (gap 16px), Radio/Écho ancrées en
   bas (margin-top:auto). Cartes en salle : une ligne, sans bordure,
   pastilles d'acte + slot Message fixe 120px au bord droit.
   ============================================================ */
.console-shell {
  --console-bg: var(--bg-page); /* console V4 F4 : même fond que /login (#FDFBF7) — les panneaux blancs restent distingués par hairline + ombre douce */
  --console-panel: #FFFFFF;
  --console-hairline: rgba(0,0,0,0.06);
  --console-panel-shadow: 0 1px 3px rgba(0,0,0,0.04);
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--console-bg); color: var(--neutral-800);
}
.console-brand {
  font-family: var(--font-brand);
  font-size: 16px; font-weight: 800; letter-spacing: 0.06em; line-height: 1;
  text-transform: uppercase; color: var(--azur-700);
  white-space: nowrap; overflow: hidden;
}
.console-shell .app-footer {
  flex-shrink: 0; justify-content: center; padding: 12px 16px 16px;
  border-top: none; background: transparent;
}
.console-main { flex: 1; display: flex; min-height: 0; }
/* Pages de contenu (profil, administration) : le contenu peut dépasser la
   hauteur de l'écran, la page doit défiler — seule la console garde sa
   hauteur figée (overflow:hidden sur .console-shell). */
.console-main:has(> .staff-placeholder) { overflow-y: auto; }

/* TODO: UI staff auth — styles de prévisualisation uniquement. Les écrans ne
   sont pas routés avant l'implémentation et leurs contrôles restent disabled. */
.staff-placeholder { width: min(480px, calc(100% - 32px)); margin: auto; padding: 32px 0; }
.staff-placeholder-wide { width: min(1080px, calc(100% - 32px)); }
.staff-placeholder-card { width: 100%; }
.staff-placeholder-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.staff-placeholder-heading h1 { margin: 2px 0 0; }
.staff-placeholder-kicker { margin: 0 0 4px; color: var(--azur-700); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.staff-placeholder-badge { padding: 4px 8px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-text); font-size: 11px; font-weight: 700; }
.staff-placeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.staff-placeholder-help { margin: 12px 0; color: var(--text-tertiary); font-size: 13px; }
.staff-placeholder-summary div, .staff-placeholder-methods li, .staff-placeholder-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--console-hairline); }
.staff-placeholder-summary dt, .staff-placeholder-row small { color: var(--text-tertiary); }
.staff-placeholder-summary dd { margin: 0; font-weight: 600; }
.staff-placeholder-methods { padding: 0; list-style: none; }
.staff-placeholder-methods li, .staff-placeholder-row { align-items: center; }
.staff-placeholder-row small { display: block; margin-top: 4px; }
.staff-placeholder-check { display: block; margin: 0 0 16px; }
.staff-placeholder-table-wrap { overflow-x: auto; }
.staff-placeholder-table { width: 100%; border-collapse: collapse; text-align: left; }
.staff-placeholder-table th, .staff-placeholder-table td { padding: 12px; border-bottom: 1px solid var(--console-hairline); white-space: nowrap; }
.staff-placeholder-correction { margin-top: 20px; }
.admin-staff-page { padding-bottom: 48px; }
.admin-staff-page > .alert { margin-bottom: 16px; }

.admin-staff-delete { position: relative; }
.admin-staff-delete > summary { list-style: none; cursor: pointer; color: var(--error-text); }
.admin-staff-delete > summary::-webkit-details-marker { display: none; }
.admin-staff-delete-confirm { margin-top: 8px; padding: 12px; max-width: 320px; border: 1px solid rgba(255,59,48,0.25); border-radius: var(--radius-md); background: var(--error-bg); }
.admin-staff-delete-confirm p { margin: 0 0 10px; color: var(--error-text); font-size: var(--text-sm); }
/* ─── Connexion automatique du poste (décision 2026-09-05) ─── */
/* Bandeau de la page de connexion : le formulaire reste visible dessous, le
   bandeau annonce ce qui est en cours (HIG Progress indicators, indicateur
   indéterminé pour une attente non quantifiable). */
.poste-autologin {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: var(--space-16); color: var(--text-secondary); font-size: 14px;
}
.poste-autologin[hidden] { display: none !important; }
.poste-autologin-spinner { width: 18px; height: 18px; border-width: 2.5px; margin: 0; }
/* MLM fermé sur ce poste : ce qu'il faut faire, puis le geste de reprise.
   Même place que le bandeau ; les moyens de connexion habituels reprennent la
   main juste dessous. */
.poste-autologin-absent {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
  margin-bottom: var(--space-16); text-align: center; font-size: 14px;
}
.poste-autologin-absent p { margin: 0; }
.poste-autologin-absent[hidden] { display: none !important; }

.staff-danger-zone { margin-top: 24px; border-color: rgba(255,59,48,0.3); }
.staff-danger-zone .card-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.staff-danger-zone p { margin: 4px 0 0; color: var(--text-secondary); }
.staff-account-delete-page { max-width: 720px; }
.staff-account-delete-card .alert { margin-bottom: 20px; }
.staff-account-delete-card .alert p { margin: 6px 0 0; }
.staff-profile-page { padding-bottom: 48px; }
.staff-profile-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(480px, 1.3fr); gap: 20px; align-items: start; }
.staff-profile-section-heading { margin-bottom: 20px; }
.staff-profile-section-heading > p:last-child { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; }
.staff-profile-eyebrow { margin: 0 0 4px; color: var(--azur-700); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.staff-profile-avatar { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: var(--azur-100); color: var(--azur-700); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.staff-profile-name, .staff-profile-email { display: block; overflow-wrap: anywhere; }
.staff-profile-name { color: var(--text-primary); font-size: 18px; }
.staff-profile-email { margin-top: 3px; color: var(--text-tertiary); font-size: 14px; }
.staff-profile-summary { margin: 24px 0 0; }
.staff-profile-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--neutral-200); }
.staff-profile-summary dt { color: var(--text-secondary); font-size: 14px; }
.staff-profile-summary dd { margin: 0; }
.staff-profile-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: 999px; background: var(--neutral-100); color: var(--text-secondary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.staff-profile-chip-active { background: var(--success-bg); color: var(--success-text); }
.staff-profile-methods { margin: 0; padding: 0; list-style: none; }
.staff-profile-methods li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--neutral-200); }
.staff-profile-methods li > span:first-child strong, .staff-profile-methods li > span:first-child small { display: block; }
.staff-profile-methods li > span:first-child strong { color: var(--text-primary); font-size: 14px; }
.staff-profile-methods li > span:first-child small { margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }
.staff-profile-passkey { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; margin-top: 20px; padding: 16px; border: 1px solid var(--azur-200); border-radius: var(--radius-md); background: var(--azur-50); }
.staff-profile-passkey p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.staff-profile-passkey-actions { display: flex; gap: 6px; }
.staff-profile-passkey .form-error { grid-column: 1 / -1; color: var(--error-text); }
.staff-profile-password-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--neutral-200); }
.staff-profile-password-section h3 { margin: 0; color: var(--text-primary); font-size: 15px; }
.staff-profile-password-section header > p { margin: 4px 0 18px; color: var(--text-secondary); font-size: 12px; }
.staff-profile-password-section .alert { margin-bottom: 16px; }
.staff-profile-password-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.staff-profile-password-form .form-group { margin: 0; }
.staff-profile-password-submit { grid-column: 1 / -1; justify-self: start; }
.admin-staff-grid { grid-template-columns: minmax(300px, .8fr) minmax(480px, 1.2fr); align-items: start; }
/* « Ajouter » à gauche, la liste des profils dans la colonne large à droite.
   L'ancrage explicite reste nécessaire : sans lui, une carte ajoutée à
   gauche volerait la colonne large et écraserait la liste. */
.admin-staff-list-card { grid-column: 2; grid-row: 1; }
.admin-staff-card-heading { margin-bottom: 20px; }
.admin-staff-card-heading p { margin-top: 4px; color: var(--text-tertiary); font-size: 13px; }
.admin-staff-create-form .form-group { margin-bottom: 16px; }
.admin-staff-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px;
  padding: 12px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
}
.admin-staff-check input {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--azur-500);
}
.admin-staff-check strong, .admin-staff-check small { display: block; }
.admin-staff-check strong { color: var(--text-primary); font-size: 14px; }
.admin-staff-check small { margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }
.admin-staff-check:has(input:focus-visible) { border-color: var(--azur-500); box-shadow: 0 0 0 4px var(--azur-100); }
.admin-staff-list { display: flex; flex-direction: column; }
.admin-staff-row { padding: 16px 0; border-bottom: 1px solid var(--neutral-200); }
.admin-staff-row:first-child { padding-top: 0; }
.admin-staff-identity { margin-bottom: 12px; }
.admin-staff-identity strong, .admin-staff-identity span { display: block; }
.admin-staff-identity strong { color: var(--text-primary); font-size: 15px; }
.admin-staff-identity span { margin-top: 2px; color: var(--text-tertiary); font-size: 12px; overflow-wrap: anywhere; }
.admin-staff-edit-form {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) auto auto;
  align-items: end; gap: 12px;
}
.admin-staff-edit-form .form-group { margin: 0; }
.admin-staff-check-compact { align-items: center; align-self: end; min-height: 44px; margin: 0; padding: 8px 10px; }
.admin-staff-pin-form { margin-top: 6px; display: flex; justify-content: flex-end; }
.admin-staff-empty { padding: 24px 0; color: var(--text-tertiary); text-align: center; }
@media (max-width: 980px) {
  .admin-staff-grid { grid-template-columns: 1fr; }
  .admin-staff-list-card { grid-column: auto; grid-row: auto; }
  .staff-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.staff-danger-zone .card-body { align-items: stretch; flex-direction: column; }
  .staff-placeholder-heading { align-items: flex-start; flex-direction: column; }
  .admin-staff-edit-form { grid-template-columns: 1fr; align-items: stretch; }
  .admin-staff-check-compact { align-self: stretch; }
  .admin-staff-edit-form .btn, .admin-staff-pin-form .btn { width: 100%; }
  .staff-profile-password-form { grid-template-columns: 1fr; }
  .staff-profile-password-submit { width: 100%; }
  .staff-profile-passkey { grid-template-columns: 1fr; }
  .staff-profile-passkey-actions { align-items: stretch; flex-direction: column; }
  .staff-profile-passkey-actions .btn { width: 100%; }
  .staff-profile-methods li { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 720px) { .staff-placeholder-grid { grid-template-columns: 1fr; } }
.console-board-wrap { flex: 1; display: flex; min-height: 0; min-width: 0; }
.console-board { flex: 1; display: flex; min-height: 0; min-width: 0; align-items: stretch; }

/* Sidebars : panneaux blancs Claude.ai (hairline 4 côtés, arrondi, ombre douce) */
.console-sidebar {
  /* 320px et non 288 : depuis l'unification des cartes, une carte de file
     d'attente porte numéro, nom, âge, temps d'attente et deux indicateurs sur
     UNE rangée — à 288px le nom, qui est la première chose qu'on lit, tombait
     à cinq lettres. Le centre, où les salles n'ont qu'une ou deux cartes,
     peut céder ces 32px. */
  flex-shrink: 0; width: 320px; display: flex; flex-direction: column;
  background: var(--console-panel);
  border: 1px solid var(--console-hairline); border-radius: 12px;
  box-shadow: var(--console-panel-shadow);
  margin: 8px; min-height: 0; overflow: hidden;
  transition: width 200ms ease;
}
.console-sidebar-head {
  flex-shrink: 0; height: 56px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.console-sidebar-head-right { justify-content: flex-start; }
.console-panel-btn {
  border: none; background: transparent; padding: 0; border-radius: 8px;
  color: var(--neutral-400); cursor: pointer; line-height: 0;
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.console-panel-btn:hover { background: rgba(0,0,0,0.04); color: var(--neutral-600); }
.console-sidebar-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.console-sidebar-half { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.console-sidebar-half .console-column-sidebar { flex: 1; min-height: 0; }
/* Secrétariat (sidebar droite) : toujours la moitié de la sidebar (au lieu
   du tiers fixe) — plus de patients visibles d'un coup, Autre et Sorties se
   partagent le reste. Hauteur fixe même à vide (retour Julien 05/09) : une
   zone qui rétrécit devient une cible de dépôt difficile à viser. */
.console-half-secretariat { flex: 0 0 50%; }
/* « À valider » repliée quand vide (console V4 F2) : en-tête compact + zone
   de drop minimale conservée (on peut y déposer une carte pour dévalider) ;
   se déplie automatiquement (transition douce) dès qu'une carte arrive via
   le re-rendu SSE du board. Compteur masqué à vide. */
.console-half-avalider {
  flex: 0 1 auto; max-height: 50%;
  transition: max-height 250ms var(--ease-in-out);
}
.console-half-avalider.console-half-collapsed { flex: 0 0 auto; }
.console-half-collapsed .console-count { display: none; }
.console-half-collapsed .console-column-head { margin-bottom: 4px; }
.console-half-collapsed .console-column-items:not(:has(.console-card)) { min-height: 32px; }
.console-sidebar-collapsed {
  display: none; flex: 1; flex-direction: column; align-items: center;
  padding-top: 4px; gap: 16px;
}
.console-brand-mono {
  font-family: var(--font-brand); font-size: 16px; font-weight: 900;
  color: var(--azur-700); line-height: 1;
}
.console-count-bubble {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.05);
  color: var(--neutral-500); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
body.console-left-closed .console-sidebar-left,
body.console-right-closed .console-sidebar-right { width: 48px; }
body.console-left-closed .console-sidebar-left .console-sidebar-head,
body.console-right-closed .console-sidebar-right .console-sidebar-head {
  justify-content: center; padding: 0 8px;
}
body.console-left-closed .console-sidebar-left .console-brand { display: none; }
body.console-left-closed .console-sidebar-left .console-sidebar-body,
body.console-left-closed .console-sidebar-left .console-dock,
body.console-right-closed .console-sidebar-right .console-sidebar-body { display: none; }
body.console-left-closed .console-sidebar-left .console-sidebar-collapsed,
body.console-right-closed .console-sidebar-right .console-sidebar-collapsed { display: flex; }

/* Dock statut professionnel du poste : bas de sidebar gauche, sans trait
   ni libellé (spec V3 §1.6) */
.console-dock { flex-shrink: 0; padding: 8px; }
.console-dock-list { display: none; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.console-dock.open .console-dock-list { display: flex; }
.console-dock-list a {
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--neutral-600); text-decoration: none;
}
.console-dock-list a:hover { background: rgba(0,0,0,0.04); }
.console-dock-current {
  border: none; background: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px;
}
.console-dock-current:hover { background: rgba(0,0,0,0.04); }
.console-dock-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azur-100); color: var(--azur-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.console-dock-name {
  flex: 1; text-align: left; font-size: 13px; font-weight: 600; color: var(--neutral-700);
}
.console-dock-chev { color: var(--neutral-400); transition: transform 150ms ease; }
.console-dock.open .console-dock-chev { transform: rotate(180deg); }

/* Centre (console V5 G1) : grille à deux rangées de hauteur FIXE — 4 salles
   en haut, Écho/Attente imagerie/Radio en bas. Chaque colonne défile en
   interne : une colonne pleine ne déforme jamais la grille. */
/* Seules les marges des sidebars (8px) espacent le centre : aucun padding
   latéral ici, sinon les espacements s'additionnent et le tableau perd sa
   largeur (révision « tableau », 09/09/2026). */
.console-center {
  flex: 1; min-width: 0; min-height: 0; background: var(--console-bg);
  padding: var(--space-8) 0 0; display: flex; flex-direction: column;
}
/* Révision « tableau » (Julien, 09/09/2026) : le centre est UNE surface
   continue — filets fins entre colonnes et rangées, pas de boîtes espacées.
   La séparation minimale (filet) suffit à grouper, l'espace économisé va aux
   cartes (HIG Layout). Les titres de colonne prennent l'allure d'en-têtes de
   tableau. */
.console-lanes {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; padding: 0 0 var(--space-8);
}
.console-grid-row {
  flex: 1 1 50%; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--console-panel);
  border: 1px solid var(--console-hairline);
}
.console-grid-row:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.console-grid-row-imagerie {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.console-lane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.console-lane + .console-lane { border-left: 1px solid var(--console-hairline); }
.console-lane-head {
  flex-shrink: 0; padding: var(--space-8) var(--space-8) var(--space-4);
  display: flex; align-items: center;
}
.console-lane-title {
  font-size: 12px; font-weight: 600; color: var(--neutral-700);
  text-transform: uppercase; letter-spacing: .04em;
}
.console-lane-body {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4); min-width: 0; border: none;
}
/* Bouton MLM : slot fixe à gauche de Médecin (même respiration que le slot
   Message : marge fixe, jamais de décalage). Icône : 13px de haut partout
   (console V4 F5, -30 % vs 18px), largeur auto ; slot bouton ~18px.
   Désactivé. Le logo M est aligné verticalement avec le reste de la ligne. */
.mlm-btn,
.mlm-mark {
  flex-shrink: 0; height: 18px; margin-right: 24px; padding: 0;
  border: none; background: none; display: inline-flex; align-items: center;
  justify-content: center;
}
.mlm-btn[disabled] { cursor: default; opacity: 0.45; }
.mlm-btn:not([disabled]) { cursor: pointer; }
.mlm-btn img,
.mlm-mark img { height: 13px; width: auto; display: block; }
/* États de la passerelle MLM (Lot 2) posés par app.js après sendMessage :
   busy = opération en cours, ok = dossier ouvert/créé, err = échec/ambiguïté. */
.mlm-btn.mlm-busy { animation: mlm-pulse 1s ease-in-out infinite; }
.mlm-btn.mlm-ok img { filter: drop-shadow(0 0 2px rgba(22, 163, 74, 0.9)); }
.mlm-btn.mlm-err img { filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.9)); }
@keyframes mlm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Etat du dossier MLM (liaison stricte, decision 2026-09-10) : un seul
   symbole, aucun texte sur la carte. Icone seule = lie ; icone barree d'une
   croix rouge = non lie (le detail est dans l'infobulle et la fenetre). */
.mlm-slot { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.mlm-btn,
.mlm-mark { position: relative; }
.mlm-unlinked img { opacity: 0.55; filter: grayscale(1); }
.mlm-unlinked::after {
  content: "\2715"; /* croix, lisible a un metre d'ecran */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--error-500); font-size: 16px; font-weight: 800; line-height: 1;
  text-shadow: 0 0 2px var(--white), 0 0 1px var(--white);
  pointer-events: none;
}

/* Les cartes d'imagerie n'ont pas de bouton MLM (règle de zone, voir plus
   bas) : rien à régler ici pour « À valider », le clic y ouvre la fenêtre
   patient comme partout ailleurs. */
/* Extension obsolete : le bouton reste inactif mais doit se distinguer d'une
   extension absente — la cause et le remede ne sont pas les memes. */
.mlm-btn.mlm-outdated img { filter: grayscale(1); }
.mlm-btn.mlm-outdated::after {
  content: "!"; position: absolute; top: -3px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--wait-warn); color: var(--white);
  font-size: 8px; font-weight: 800; line-height: 10px; text-align: center;
}

/* Infobulle : meme comportement que .consent-tooltip (fixed, positionnee par
   app.js), survol ET focus clavier, fondu 300ms a l'ouverture comme a la
   fermeture. */
.mlm-tooltip {
  position: fixed; top: 0; left: 0; z-index: 60;
  max-width: 320px; padding: 8px 10px;
  border: 1px solid var(--neutral-200); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-md);
  color: var(--text-primary); font-size: 12px; line-height: 1.4;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.mlm-slot:hover .mlm-tooltip,
.mlm-slot:focus-within .mlm-tooltip {
  opacity: 1; visibility: visible;
  transition: opacity .3s ease, visibility 0s linear;
}

/* L'icône MLM s'affiche sur TOUTES les cartes, dans toutes les zones (décision
   2026-09-13). Les salles d'imagerie la masquaient : une même carte n'affiche
   pas ses accessoires ici et pas là. */
/* Salle vide : zone pointillée seule, SANS texte (spec V3 §1.8) */
.console-lane-body:not(:has(.console-card))::after {
  content: ""; flex: 1; min-height: 56px;
  border: 1.5px dashed var(--neutral-200); border-radius: 8px;
}
body.console-dragging .console-lane-body:not(:has(.console-card))::after {
  border-color: var(--azur-300); background: var(--azur-50);
}

/* Colonnes des sidebars (attente / sorties / autre) */
.console-column { display: flex; flex-direction: column; min-height: 0; }
.console-column-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding: 0;
}
.console-column-sidebar { padding: 0 12px 12px; flex: 1; min-height: 0; }
.console-column-sidebar .console-column-title {
  font-size: 11px; font-weight: 700; color: var(--neutral-400);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.console-count {
  min-width: 20px; height: 20px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--azur-50); color: var(--azur-700); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
/* scrollbar-width: thin, comme .console-lane-body : la barre masquée cachait
   qu'il restait des patients sous le pli. HIG Scroll views : « Because scroll
   indicators aren't always visible, it can be helpful to make it obvious when
   content extends beyond the view »
   (https://developer.apple.com/design/human-interface-guidelines/scroll-views). */
.console-column-items {
  flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 24px;
  overflow-y: auto; scrollbar-width: thin; padding: 2px;
  border-radius: var(--radius-sm);
}
.console-column-items:not(:has(.console-card)) {
  border: 1.5px dashed var(--neutral-200); min-height: 56px;
}
body.console-dragging .console-column-items:not(:has(.console-card)) {
  border-color: var(--azur-300); background: var(--azur-50);
}

/* ─── Carte patient : UNE seule anatomie, dans toutes les zones ──────────────
   À valider, En attente, les quatre salles, Écho, Attente imagerie, Radio,
   Secrétariat, Autre et Sorties rendent exactement la même carte : même fond,
   même bordure, même hauteur de rangée, mêmes accessoires au même endroit
   (décision 2026-09-12-carte-patient-unifiee). Seules changent les RÈGLES de
   la zone — chrono d'attente des deux files, carte inerte en Sorties.
   HIG Lists and tables : « Choose a row style that fits the information you
   need to display »
   (https://developer.apple.com/design/human-interface-guidelines/lists-and-tables). */
.console-card {
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
  border: 1px solid var(--console-hairline); border-radius: var(--radius-md);
  background: var(--console-panel); box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  /* Le clic ouvre la fenêtre patient dans toutes les zones sauf Sorties
     (cartes inertes, voir plus bas) ; le glisser-déposer reste actif et se
     signale à la prise (:active). */
  cursor: pointer; transition: background var(--transition-fast);
}
/* Marqueur d'attente : uniquement en file d'attente (classes wait-*), et
   LINÉAIRE par groupe — les barres de cartes consécutives du même groupe
   fusionnent en un seul trait continu (le texte "X min" reste le vecteur
   principal — WCAG 1.4.1). */
.console-card-wait-ok::before,
.console-card-wait-warn::before,
.console-card-wait-crit::before {
  content: ""; position: absolute; left: 2px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px;
}
.console-card-wait-ok::before   { background: var(--wait-ok); }
.console-card-wait-warn::before { background: var(--wait-warn); }
.console-card-wait-crit::before { background: var(--wait-crit); }
/* Continuité : une carte qui suit une carte du même groupe étend sa barre
   vers le haut à travers l'interstice (4px gap + 4px inset). */
/* Check-ins liés (docs/features/31_grouped_checkin.md) : column.html/
   patient_card.html enveloppent les cartes d'un même check_in_group dans un
   unique <div class="console-group"> (secretariat.go, blockifyBoardCards) —
   un vrai conteneur DOM, pas juste des cartes indépendantes coïncidemment
   adjacentes : SortableJS (app.js) le traite comme un seul élément
   draggable, donc un seul glisser-déposer déplace tout le groupe. Le trait
   continu du bord droit (même principe que la bande d'attente ci-dessus)
   porte sur le conteneur, plus sur chaque carte : il reste correct même si
   une carte du groupe est re-rendue isolément (SSE message/acte ciblé). */
.console-group {
  /* flex-shrink: 0 comme .console-card : le groupe est un élément flex d'une
     colonne qui défile — sans ça, une colonne trop pleine le comprime et,
     overflow: hidden aidant, ROGNE ses cartes du bas (le compteur annonçait
     14 patients, 11 s'affichaient). Le contenu garde sa hauteur, c'est la
     colonne qui défile. HIG Scroll views : « Make it apparent when content is
     scrollable… displaying partial content at the edge of a view indicates
     that there's more content in that direction »
     (https://developer.apple.com/design/human-interface-guidelines/scroll-views). */
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--console-hairline); border-radius: var(--radius-md);
  background: var(--console-panel); box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: grab;
}
.console-group::after {
  content: ""; position: absolute; right: 2px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: var(--azur-300);
  /* Purement décoratif, mais positionné par-dessus les .console-card en
     ordre d'empilement (positioned paints above in-flow content, quel que
     soit l'ordre du DOM) : sans ça, ce trait de 3px intercepterait les
     clics sur tout ce qu'il chevauche au bord droit des cartes (bouton
     Envoyer du composer, notamment). */
  pointer-events: none;
}
.console-group:active { cursor: grabbing; }
.console-group .console-card {
  cursor: pointer; border: 0; border-radius: 0; box-shadow: none;
}
.console-group .console-card:not(:last-child) {
  border-bottom: 1px solid var(--neutral-100);
}
.console-card-wait-ok   + .console-card-wait-ok::before,
.console-card-wait-warn + .console-card-wait-warn::before,
.console-card-wait-crit + .console-card-wait-crit::before {
  top: -8px; border-top-left-radius: 0; border-top-right-radius: 0;
}
.console-card:active { cursor: grabbing; }
/* Survol : partout pareil, mais seulement sur une carte sans teinte — une
   carte colorée garde sa couleur, qui porte une information. */
.console-card[data-card-color=""]:hover { background: rgba(0,0,0,0.04); }
.console-card-ghost { opacity: 0.4; }
/* Pendant le drag (classe SortableJS) : la carte manipulee « se souleve »
   (langage de profondeur HIG — l'element tenu est plus proche de l'oeil). */
.sortable-chosen { box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-radius: 12px; background: var(--console-panel); }
/* La rangée d'identité : numéro du jour, nom (qui prend toute la place
   disponible), âge, puis les accessoires — toujours dans le même ordre, à la
   même place, quelle que soit la zone. HIG Layout :
   « Align elements to make them easier to scan… People assume that aligned
   items are related to each other »
   (https://developer.apple.com/design/human-interface-guidelines/layout). */
/* Grille 8pt : la demi-unité (4px) est l'écart des rangées denses — une
   rangée de carte porte jusqu'à six éléments dans une colonne de 288px. */
.console-card-row { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.console-card-number {
  font-family: var(--font-mono);
  font-weight: 700; color: var(--azur-700); font-size: 11px; flex-shrink: 0;
}
/* Hiérarchie : le nom d'abord (semibold), les métadonnées en second */
.console-card-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--neutral-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.console-card-age {
  flex-shrink: 0;
  font-size: 12px; font-weight: 400; color: var(--neutral-500); white-space: nowrap;
}

/* Temps d'attente : dans les DEUX files (En attente, Attente imagerie), et
   nulle part ailleurs. Chiffres tabulaires — le libellé change toutes les
   minutes, il ne doit pas faire danser la rangée. */
.console-card-wait {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: 12px; color: var(--neutral-500); font-variant-numeric: tabular-nums;
}
.console-card-wait-warn .console-card-wait { color: var(--wait-warn); font-weight: 600; }
.console-card-wait-crit .console-card-wait { color: var(--wait-crit); font-weight: 600; }
/* Heure de sortie HH:MM (colonne Sorties) : même emplacement que le chrono
   d'attente — les deux ne coexistent jamais sur une carte. */
.console-card-exit-time {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500);
}

/* Cartes : texte NON sélectionnable — la sélection au glisser parasitait la
   prise de la carte au drag (Julien, 09/09/2026). La lecture/copie d'un
   texte se fait dans la fenêtre carte patient, qui reste sélectionnable. */
.console-card { user-select: none; }

/* Couleur de carte (décision 2026-09-09) : posée dans la fenêtre carte
   patient parmi 6 teintes, elle teinte la carte entière, dans toutes les
   salles et zones. data-card-color est porté par toutes les variantes de
   carte ; '' = aucune (fond blanc). */
.console-card[data-card-color="bleu"]   { background: var(--info-bg); }
.console-card[data-card-color="vert"]   { background: var(--success-bg); }
.console-card[data-card-color="jaune"]  { background: var(--jaune-bg); }
.console-card[data-card-color="orange"] { background: var(--warning-bg); }
.console-card[data-card-color="rouge"]  { background: var(--error-bg); }
.console-card[data-card-color="mauve"]  { background: var(--mauve-bg); }

/* Fil de messages (console V5 G4) : toujours visible — en lecture seule sur
   les cartes de salle (l'écriture vit dans la fenêtre carte patient), avec
   composer sur les cartes Secrétariat. Plus de bouton « Message(s) ». */
.console-thread-slot { display: block; }
.console-thread-slot:empty { display: none; }
.console-thread {
  border-top: 1px solid var(--neutral-100); padding-top: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.console-msg {
  font-size: 12px; display: flex; gap: 6px; align-items: baseline;
  color: var(--neutral-700);
  background: var(--warning-bg);
  border: 1px solid rgba(255,149,0,0.25); /* même motif que .alert-warning */
  padding: 5px 8px;
  border-radius: var(--radius-sm);
}
.console-msg-who {
  font-weight: 700; color: var(--warning-text);
  font-family: var(--font-mono); font-size: 10px; flex-shrink: 0;
}
.console-msg-when { color: var(--neutral-400); font-size: 10px; flex-shrink: 0; margin-left: auto; }
.console-composer { display: flex; gap: 6px; }
.console-composer input {
  flex: 1; border: 1px solid var(--neutral-200); border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 12px;
  background: var(--white); color: var(--neutral-700);
}
.console-composer input::placeholder { color: var(--neutral-400); }
.console-composer button {
  border: none; cursor: pointer; font: inherit;
  background: var(--azur-100); color: var(--azur-700);
  border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600;
}

/* Suppression d'un message : croix discrète en bout de bulle, rouge au
   survol/focus. Toujours visible (poste fixe, pas de :hover fiable au
   tactile) mais neutre pour ne pas concurrencer la lecture. */
.console-msg-delete {
  border: none; background: none; cursor: pointer; flex-shrink: 0;
  width: 18px; height: 18px; padding: 0; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neutral-400); align-self: center;
}
.console-msg-delete:hover, .console-msg-delete:focus-visible {
  color: var(--error-text); background: var(--error-bg);
}

/* Dialog de confirmation de suppression (HIG Alerts) : compact, message
   exact cité dans un bloc neutre, Annuler à gauche / Supprimer rouge à
   droite. Même fond de backdrop que le dialog d'accueil. */
.msg-delete-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(420px, calc(100vw - 32px));
  padding: var(--space-24); border: 0; border-radius: var(--radius-xl);
  background: var(--white); color: var(--text-primary); box-shadow: var(--shadow-lg);
}
.msg-delete-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.msg-delete-dialog h2 { margin: 0 0 var(--space-12); font-size: 16px; }
.msg-delete-quote {
  margin: 0; padding: var(--space-12);
  border-radius: var(--radius-md); background: var(--bg-card);
  border: 1px solid var(--neutral-200);
  font-size: 14px; overflow-wrap: anywhere;
}
.msg-delete-note { margin: var(--space-12) 0 0; color: var(--text-secondary); font-size: 13px; }
.msg-delete-actions {
  display: flex; justify-content: flex-end; gap: var(--space-12);
  margin-top: var(--space-20);
}

/* ─── Fenêtre carte patient (console V5 G6-G8) ──────────────────────────────
   Modale à tâche centrée (HIG Sheets) : fiche modifiable, MLM grand format,
   messages avec composer. Vit hors du bloc SSE (console.html) — un re-rendu
   du board ne la touche jamais. Toutes les cartes l'ouvrent au clic
   (cursor: pointer, posé sur .console-card) sauf « Sorties », inerte. */
[data-column="sorties"] .console-card { cursor: grab; }
.patient-popup-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: var(--radius-xl);
  background: var(--white); color: var(--text-primary); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.patient-popup-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.patient-popup-panel { max-height: calc(100vh - 32px); overflow: auto; }
.patient-popup-head {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-20) var(--space-24);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.patient-popup-title { margin: 0; font-size: 18px; flex-shrink: 1; min-width: 0; }
.patient-popup-age { color: var(--text-secondary); font-size: 13px; flex-shrink: 0; }
/* MLM grand format (G6) : même passerelle que sur la carte, icône doublée,
   poussée à droite du titre. */
.patient-popup-mlm { margin-left: auto; }
.patient-popup-mlm .mlm-btn,
.patient-popup-mlm .mlm-mark { height: 32px; margin-right: 0; }
.patient-popup-mlm .mlm-btn img,
.patient-popup-mlm .mlm-mark img { height: 26px; }
.patient-popup-mlm .mlm-unlinked::after { font-size: 24px; }
.patient-popup-close {
  border: none; background: none; cursor: pointer; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neutral-500);
}
.patient-popup-close:hover, .patient-popup-close:focus-visible {
  color: var(--text-primary); background: var(--bg-subtle);
}
.patient-popup-status {
  margin: 0; padding: 0 var(--space-24);
  color: var(--success-text); font-size: 13px;
}
.patient-popup-status:empty { display: none; }
.patient-popup-status:not(:empty) { padding-top: var(--space-12); }
/* Pastille couleur de carte + sélecteur (décision 2026-09-09) : un point de
   la teinte -500, menu de 7 pastilles (« aucune » = point barré) ancré sous
   la pastille. Cibles 32px, aria-label = nom de la teinte. */
.popup-color { position: relative; margin-left: auto; flex-shrink: 0; }
.patient-popup-mlm { margin-left: 0; }
.popup-color-chip, .popup-color-swatch {
  border: none; background: none; cursor: pointer; padding: 0;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.popup-color-chip:hover, .popup-color-chip:focus-visible,
.popup-color-swatch:hover, .popup-color-swatch:focus-visible { background: var(--bg-subtle); }
.popup-color-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--console-hairline);
  background: var(--white); position: relative;
}
/* La pastille d'entrée fait la taille de l'icône MLM voisine (26px). */
.popup-color-chip .popup-color-dot { width: 26px; height: 26px; }
.popup-color-dot[data-card-color="bleu"]   { background: var(--info-500); }
.popup-color-dot[data-card-color="vert"]   { background: var(--success-500); }
.popup-color-dot[data-card-color="jaune"]  { background: var(--jaune-500); }
.popup-color-dot[data-card-color="orange"] { background: var(--warning-500); }
.popup-color-dot[data-card-color="rouge"]  { background: var(--error-500); }
.popup-color-dot[data-card-color="mauve"]  { background: var(--mauve-500); }
/* « Aucune » : point blanc barré d'un trait diagonal. */
.popup-color-dot[data-card-color=""]::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, transparent 45%, var(--neutral-400) 45%, var(--neutral-400) 55%, transparent 55%);
}
/* Menu = popover natif (le navigateur gère ouverture/fermeture/Échap).
   Ancré sous la pastille par CSS anchor positioning ; sans support anchor,
   il garde le placement popover par défaut (centré), repli acceptable.
   Pas de display sur le popover fermé : l'UA le masque lui-même. */
.popup-color-chip { anchor-name: --popup-color-chip; }
.popup-color-menu {
  margin: 0; inset: auto;
  position-anchor: --popup-color-chip;
  top: calc(anchor(bottom) + var(--space-4));
  right: anchor(right);
  gap: var(--space-4); padding: var(--space-4);
  background: var(--white); border: 1px solid var(--console-hairline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.popup-color-menu:popover-open { display: flex; }
.popup-color-selected { outline: 2px solid var(--azur-500); outline-offset: -2px; }

/* Le formulaire d'accueil embarqué garde son moteur mais perd son chrome de
   dialog : la fenêtre porte déjà le titre et la fermeture. */
.patient-popup .manual-patient-form { min-height: 0; }
.patient-popup .manual-patient-header { display: none; }
.patient-popup .manual-patient-actions .btn-ghost { display: none; }
/* Fenetre carte patient : fiche a gauche, dossier MLM en zone droite
   (croquis valide, spec liaison MLM). Le layout interne du formulaire
   repasse en une colonne — la colonne droite appartient a l'aside MLM. */
.patient-popup-fiche { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); min-height: 0; }
.patient-popup .manual-patient-layout { grid-template-columns: 1fr; }
.patient-popup-mlm-aside {
  padding: 0 var(--space-24) var(--space-24); border-left: 1px solid var(--neutral-200);
  background: var(--bg-card); display: flex; flex-direction: column; gap: var(--space-12);
  min-width: 0;
}
/* Dossier LIÉ : ni titre de section, ni commande de rafraîchissement — le
   dossier est trouvé, il n'y a plus rien à chercher, et le panneau dit déjà
   « Dossier MLM n° … ». L'en-tête revient dès que le panneau repasse en
   recherche (Délier), sans JavaScript : le fragment échangé par htmx porte
   .mlm-panel-linked, le :has le suit. HIG Layout : « Use progressive
   disclosure to make layouts cleaner and easier to interact with »
   (https://developer.apple.com/design/human-interface-guidelines/layout). */
.patient-popup-mlm-aside:has(.mlm-panel-linked) .patient-popup-mlm-head { display: none; }
.patient-popup-mlm-aside:has(.mlm-panel-linked) { padding-top: var(--space-24); }

/* En-tête de section « Dossier MLM » : titre (+ retour d'état sous lui) à
   gauche, commande de rafraîchissement sur la MÊME ligne, tout à droite. */
.patient-popup-mlm-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8);
  padding-top: var(--space-16); margin-bottom: var(--space-8);
}
.patient-popup-mlm-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.patient-popup-mlm-aside .patient-popup-mlm-head .patient-popup-section-title {
  padding-top: 0; margin: 0;
}
/* Retour d'état de la recherche : ligne courte sous le titre, discrète ;
   masquée tant qu'il n'y a rien à dire. */
.mlm-refresh-status { margin: 0; font-size: 12px; color: var(--text-tertiary); }
.mlm-refresh-status:empty { display: none; }
.mlm-refresh-status.is-error { color: var(--warning-text); }
/* Icône seule, SANS cadre : ni bordure ni fond, juste la flèche qui change de
   teinte au survol et tourne pendant la recherche (retour d'état). */
.mlm-refresh-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; color: var(--text-tertiary);
  cursor: pointer; line-height: 0; transition: color 120ms var(--ease-in-out);
}
.mlm-refresh-btn:hover:not(:disabled) { color: var(--azur-600); }
.mlm-refresh-btn:disabled { cursor: default; opacity: 0.5; }
.mlm-refresh-btn:focus-visible { outline: 2px solid var(--azur-500); outline-offset: 2px; border-radius: var(--radius-sm); }
.mlm-refresh-btn.is-refreshing svg { animation: spin 0.8s linear infinite; }
.mlm-panel { display: flex; flex-direction: column; gap: var(--space-12); font-size: 13px; min-width: 0; }
.mlm-panel-linked { margin: 0; font-weight: 600; }
.mlm-panel-hint { margin: 0; color: var(--text-secondary); }
.mlm-panel-diffs { margin: 0; padding-left: var(--space-16); color: var(--warning-text); font-size: 12px; }
.mlm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.mlm-panel-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-12);
  padding: var(--space-12); border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg); background: var(--white);
}
.mlm-panel-who { min-width: 0; overflow-wrap: anywhere; }
.mlm-panel-link { margin: 0; flex-shrink: 0; }
.mlm-panel-unlink, .mlm-panel-create { align-self: flex-start; }
.mlm-panel-noext { margin: 0; color: var(--text-tertiary); font-size: 12px; }
.patient-popup-messages { padding: 0 var(--space-24) var(--space-24); }
.patient-popup-section-title {
  margin: 0 0 var(--space-8); font-size: 13px; font-weight: 600;
  color: var(--neutral-700);
}
.patient-popup .console-thread { border-top: none; padding-top: 0; }

/* ─── Auth forte par action (décision 2026-09-05) ───────────────────────────
   Fenêtre modale du code 4 chiffres (signature d'un message, ouverture de
   l'administration). Même gabarit que la confirmation de suppression ; champ
   unique, gros chiffres espacés, erreur en clair au-dessus du champ. */
.pin-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(360px, calc(100vw - 32px));
  padding: var(--space-24); border: 0; border-radius: var(--radius-xl);
  background: var(--white); color: var(--text-primary); box-shadow: var(--shadow-lg);
}
.pin-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.pin-dialog h2 { margin: 0 0 var(--space-8); font-size: 16px; }
.pin-dialog-note { margin: 0 0 var(--space-16); color: var(--text-secondary); font-size: 13px; }
.pin-dialog-error { margin: 0 0 var(--space-12); color: var(--error-text); font-size: 13px; }
.pin-dialog-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: var(--space-12); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md); background: var(--bg-card);
  font-size: 24px; text-align: center; letter-spacing: 0.5em;
}
.pin-dialog-input:focus { outline: 2px solid var(--azur-500); outline-offset: 1px; }
.pin-dialog-actions {
  display: flex; justify-content: flex-start;
  margin-top: var(--space-20);
}


/* ─── Micro-transitions (HIG) ───────────────────────────────────────────────
   Arrivee des fragments htmx/SSE en fondu + 6px (200-300 ms) ; pulsation
   unique du panneau « C'est a vous » ; menus en 150 ms ; pastille qui
   respire sur la page carte vitale. Le bloc prefers-reduced-motion global
   ci-dessous neutralise tout automatiquement. */
.htmx-added { opacity: 0; transform: translateY(6px); }
.waiting-status, .auth-step, .child-row, .push-optin, .upload-done {
  transition: opacity 280ms var(--ease-in-out), transform 280ms var(--ease-in-out);
}
@keyframes room-pop {
  0% { transform: scale(0.94); opacity: 0.5; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
.waiting-room-name { animation: room-pop 500ms var(--ease-spring); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-switch-menu[open] .lang-switch-list,
.console-dock.open .console-dock-list { animation: menu-in 150ms var(--ease-in-out); }
.waiting-pulse {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--azur-100); margin: 0 auto var(--space-24);
  position: relative; animation: breathe 2.4s var(--ease-in-out) infinite;
}
.waiting-pulse::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--azur-500); }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ─── Réduction de mouvement (§8.5) ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Print ─── */
@media print {
  .console-sidebar, .app-footer, .skip-to-content { display: none !important; }
}