/* ============================================================
   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;

  /* ─── 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; }
.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;
}
.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; }
.console-card > .consent-badge { position: absolute; top: 5px; right: 5px; z-index: 2; }
/* Cartes Secrétariat / Sorties (une seule ligne) : le badge porte le
   margin-left:auto qui pousse en bout de ligne, MLM/heure de sortie suivent
   normalement (gap de la ligne) — cf. .console-card-exit .mlm-btn et
   .console-card-exit-time. */
.console-card-exit .console-card-top > .consent-badge,
.console-card-out .console-card-top > .consent-badge { margin-left: auto; }
.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); }
.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; }
.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(160px, 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; }
  .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 {
  flex-shrink: 0; width: 288px; 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; }
/* « À 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 : lanes empilées + footer sizu (les sidebars descendent en bas de page) */
.console-center {
  flex: 1; min-width: 0; min-height: 0; background: var(--console-bg);
  padding: 8px 8px 0 0; display: flex; flex-direction: column;
}
.console-lanes {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 16px; padding: 0 8px 8px 0;
}
/* Bloc imagerie (Radio puis Écho) poussé en bas de la zone centrale, juste
   au-dessus du footer — aucun libellé, aucun trait : la position distingue
   le service (spec V3 §1.1). */
.console-lane-imagerie { margin-top: auto; }
.console-lane {
  background: var(--console-panel); border: 1px solid var(--console-hairline);
  border-radius: 12px; box-shadow: var(--shadow-sm);
  display: flex; align-items: stretch; min-height: 72px; flex-shrink: 0;
}
.console-lane-head {
  flex-shrink: 0; width: 128px; padding: 12px;
  display: flex; align-items: center;
}
.console-lane-title { font-size: 13px; font-weight: 600; color: var(--neutral-700); }
/* Le corps grandit verticalement avec les cartes (2-3 patients, fil déplié) ;
   justify-content:center aligne verticalement une carte seule sur le nom de
   la salle (min-height 72px de la lane). */
.console-lane-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 8px; min-width: 0; border: none; justify-content: center;
}
/* 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 {
  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 { 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 (Lot 2) : pastille posee SUR l'icone, dans un slot de
   largeur fixe — la ligne de la carte ne doit jamais bouger selon l'etat.
   Couleurs reprises des tokens semantiques (§3.2) : les tons fonces des
   indicateurs d'attente sont reutilises pour rester >= 3:1 sur le fond creme
   (WCAG 1.4.11, indicateur non textuel). */
.mlm-slot { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.mlm-btn { position: relative; }
.mlm-tag {
  margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600; line-height: 15px; white-space: nowrap;
}
.mlm-tag-absent    { background: var(--info-bg);    color: var(--info-text); }
.mlm-tag-divergent { background: var(--warning-bg); color: var(--warning-text); }
.mlm-tag-review    { background: var(--warning-bg); color: var(--warning-text); }
.mlm-tag-failed    { background: var(--error-bg);   color: var(--error-text); }
.mlm-tag-pending   { background: var(--bg-subtle);  color: var(--text-tertiary); }

/* Colonne « À valider » : toute la carte declenche l'ouverture du dossier
   administratif, le curseur doit le dire. Le glisser-deposer reste actif. */
.console-column[data-column="a_valider"] .console-card,
[data-column="a_valider"] .console-card { cursor: pointer; }
.mlm-dot-found     { background: var(--wait-ok); }    /* conforme */
.mlm-dot-divergent { background: var(--wait-warn); }  /* ecarts a arbitrer */
.mlm-dot-absent    { background: var(--info-text); }  /* dossier a creer */
.mlm-dot-review    { background: var(--wait-warn); }  /* homonymes proches */
.mlm-dot-failed    { background: var(--wait-crit); }  /* verification KO */
.mlm-dot-pending   { background: var(--neutral-400); }/* en file */

/* 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;
}
/* Cartes de la zone Secrétariat (console V4 F5) : MLM en bout de ligne, sans
   la marge de slot. Le badge consentements qui le précède porte désormais le
   margin-left:auto (règle .consent-badge ci-dessous) : lui et le bouton MLM
   se déplacent ensemble en bout de ligne. */
.console-card-exit .mlm-btn { margin-right: 0; align-self: center; }
.console-secretariat-card {
  flex-direction: column; align-items: stretch; gap: 6px;
}
.console-secretariat-card .console-card-body { width: 100%; display: flex; flex-direction: column; }

/* Salles d'imagerie : pas de pastilles Médecin/Infirmier (le passage en
   radio/écho EST l'acte) — le slot Message reste intact. */
.console-lane[data-column="radio"] .console-acts,
.console-lane[data-column="echo"] .console-acts,
.console-lane[data-column="radio"] .mlm-btn,
.console-lane[data-column="echo"] .mlm-btn { display: none; }
/* 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;
}
.console-column-items {
  flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 24px;
  overflow-y: auto; scrollbar-width: none; padding: 2px;
  border-radius: var(--radius-sm);
}
.console-column-items::-webkit-scrollbar { display: none; }
.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);
}

/* Cartes patient — variante sidebar (file d'attente : rail coloré continu) */
.console-card {
  position: relative;
  display: flex; align-items: center; padding: 8px 8px 8px 12px;
  border-radius: 8px; cursor: grab; 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 {
  position: relative; display: flex; flex-direction: column;
  border-radius: 8px; 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: default; 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; }
/* Hover « pill » façon liste de conversations Claude.ai */
.console-column-sidebar .console-card: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); }
/* Grip discret (sidebar) : visible au survol ou pendant le drag uniquement */
.console-card-grip {
  color: var(--neutral-300); margin-right: 4px; flex-shrink: 0; line-height: 0;
  opacity: 0; transition: opacity var(--transition-fast);
}
.console-card:hover .console-card-grip,
body.console-dragging .console-card-grip { opacity: 1; }
.console-card-body { flex: 1; min-width: 0; }
.console-card-top { display: flex; align-items: baseline; gap: 6px; }
.console-card-number {
  font-family: var(--font-mono);
  font-weight: 700; color: var(--azur-700); font-size: 10px;
}
/* Hiérarchie : le nom d'abord (semibold), les métadonnées en second */
.console-card-name {
  font-size: 14px; font-weight: 600; color: var(--neutral-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.console-card-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 12px; font-weight: 400; color: var(--neutral-500);
}
.console-card-sep { color: var(--neutral-300); }
.console-card-wait { display: inline-flex; align-items: center; }
.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; }

/* Carte SORTIES (console V4 E3) : heure de sortie HH:MM discrète, poussée en
   bout de ligne (polish visuel affiné par l'Agent F). Le badge consentements
   qui la précède porte désormais le margin-left:auto (règle .consent-badge
   ci-dessous) : lui et l'heure de sortie se déplacent ensemble. */
.console-card-exit-time {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500);
}

/* Cartes patient — variante SALLE (console V3) : une ligne, sans bordure,
   sans temps en salle ; drag sur la carte entière (pas de grip) */
.console-pcard {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  background: var(--console-panel); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column;
  align-items: stretch; gap: 8px;
}
.console-pcard-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.console-pcard .console-card-number { font-size: 11px; }
.console-pcard-name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.console-pcard-meta { font-size: 12px; color: var(--neutral-500); white-space: nowrap; }
.console-pcard-spacer { flex: 1; }

/* Pastilles de statut d'acte : cycle vide → demandé (rouge) → en cours
   (jaune) → fait (vert) → vide (cockpit archive/app) */
.console-acts { display: flex; gap: 6px; flex-shrink: 0; }
.act {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--neutral-200); background: var(--white);
  color: var(--neutral-600);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.act .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-300); flex-shrink: 0; }
.act[data-s="1"] { background: #FDECEB; border-color: transparent; color: var(--wait-crit); }
.act[data-s="1"] .dot { background: var(--wait-crit); }
.act[data-s="2"] { background: #FDF3E3; border-color: transparent; color: var(--wait-warn); }
.act[data-s="2"] .dot { background: var(--wait-warn); }
.act[data-s="3"] { background: #E9F7EF; border-color: transparent; color: var(--wait-ok); }
.act[data-s="3"] .dot { background: var(--wait-ok); }

/* Messagerie : déclencheur TEXTE « Message » + compteur, dans un slot de
   largeur FIXE 120px justifié au bord droit — l'apparition du compteur ne
   déplace jamais Médecin/Infirmier (spec V3 §1.10) */
.msg-slot { flex-shrink: 0; width: 120px; display: flex; justify-content: flex-end; }
.msg-toggle {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--azur-600);
  padding: 2px 6px; margin: -2px -6px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.msg-toggle:hover { background: rgba(0,0,0,0.04); }
.msg-count {
  min-width: 22px; height: 16px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--azur-100); color: var(--azur-700);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-count.zero { visibility: hidden; }

/* Fil de messages déjà rendu avec la carte ; la classe .open ne change que sa
   visibilité. En salle et en Secrétariat, la carte grandit au dépliage. */
.console-thread-slot { display: none; }
.console-message-card.open .console-thread-slot { display: block; }
.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-600);
}
.console-msg-who {
  font-weight: 700; color: var(--azur-700);
  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;
}


/* ─── 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; }
}