/* =====================================================================
   Cabinet Pro — Design System
   ---------------------------------------------------------------------
   C10.1 — ARCHITECTURE : ce fichier est PLAT (pas de @layer) et empilé
   par couches historiques ; la cascade = l'ordre du fichier. Carte des
   couches, pièges connus (DEUX blocs :root — le plus bas gagne en cas de
   doublon de token), thème sombre ([data-theme='dark']), breakpoints et
   RÈGLE CANONIQUE pour tout ajout (tokens, jamais d'hex sémantique brut) :
   → docs/ARCHITECTURE-CSS.md
   Ne PAS réorganiser physiquement ce fichier sans passe visuelle dédiée.
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2-variations');
}

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* Couleurs (clair) */
  --bg: #F7F7F8;
  --bg-elevated: #FFFFFF;
  --bg-sidebar: #FAFAFB;
  --bg-hover: #F0F0F2;
  --bg-active: #E8E9EE;
  --bg-input: #FFFFFF;
  --bg-overlay: rgba(15, 23, 42, 0.4);

  --text: #0F172A;
  --text-soft: #475569;
  --text-mute: #64748B;
  --text-on-primary: #FFFFFF;

  --border: #E5E7EB;
  --border-strong: #CBD5E1;

  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft: #DBEAFE;
  --primary-text-on-soft: #1E40AF;

  --accent: #14B8A6;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #06B6D4;

  /* V3 : ombres plus diffuses et plus discrètes (profondeur sans lourdeur) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 16px 36px rgba(15, 23, 42, 0.09);
  --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 28px 64px rgba(15, 23, 42, 0.14);

  --radius-sm: 7px;
  /* C10.11 — référencé (var(--radius-md, 8px)) à 4 endroits mais jamais
     défini ici : retombait systématiquement sur le repli codé en dur.
     Valeur = le repli existant, zéro changement visuel. */
  --radius-md: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  --sidebar-w: 248px;
  --topbar-h: 56px;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  /* C10.13 — durée « rapide » déjà utilisée partout (.12s/120ms, 34 occurrences)
     mais jamais nommée. Même valeur, juste tokenisée. */
  --transition-fast: 120ms;

  /* Espacement (workspace clinique) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --clinical-aside-w: 300px;

  /* C10.10 (14/07) — échelle de breakpoints NOMMÉE, référence pour tout
     nouveau @media ajouté à ce fichier. CSS ne permet pas d'utiliser une
     custom property dans la condition d'un @media (aucun navigateur, y
     compris le Chromium embarqué d'Electron, ne le supporte à ce jour) :
     ces valeurs restent donc des LITTÉRAUX à recopier, pas des var().
       sm  640px — mobile portrait large
       md  768px — bascule la plus utilisée de ce fichier (agenda-tabs, RFP,
                    tabbar mobile… déjà sur cette valeur, zéro changement)
       lg  1024px — desktop réduit / sidebar+contenu à l'étroit
       xl  1280px — pleine largeur confortable
     Les ~10 @media ad hoc restants (860/820/760/720/700/880/1100/560/380px)
     gardent leurs valeurs mesurées au cas par cas : les faire converger de
     force vers ces 4 paliers déplacerait le point de bascule visuel d'une
     dizaine d'écrans différents (GPU, IA, RFP, lab, pick-list…) sans pouvoir
     revérifier chacun dans cette passe — seuls les écarts <10px (imperceptibles,
     760→768) ont été fusionnés ci-dessous. Le reste : à traiter séparément,
     écran par écran, si souhaité. */
  /* 0,22 → 0,85 : contraste de l'indicateur de focus (voir premium.css). */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.85);
  /* C10.9 — même halo « outline » que --focus-ring pour les éléments qui ne
     peuvent pas utiliser box-shadow (répété identique à 6 endroits avant). */
  --focus-outline: 2px solid var(--primary);

  /* C10.12 (14/07) — échelle de tailles de boutons NOMMÉE. Les 3 paliers
     existent déjà de fait (.btn-sm, la base .btn-primary/secondary/ghost,
     .btn-rec) mais jamais nommés → tokenisés ici avec leurs valeurs EXACTES
     actuelles, zéro changement visuel. Le CTA de l'assistant IA
     (.orchestrator-input-row .btn-primary, height:42px/48px mobile) reste
     hors échelle : c'est une taille de bouton-héros à part, utilisée nulle
     part ailleurs — la faire rentrer de force dans sm/md/lg changerait la
     taille de ce bouton précis sans qu'on puisse le revérifier visuellement
     ici. Idem pour les boutons de pied de modale : ils utilisent déjà la
     base (md) sans surcouche, rien à migrer.
       --btn-pad-sm  → .btn-sm
       --btn-pad-md  → base .btn-primary/.btn-secondary/.btn-ghost/.btn-danger
       --btn-pad-lg  → .btn-rec */
  --btn-pad-sm: 5px 10px;
  --btn-pad-md: 7px 14px;
  --btn-pad-lg: 9px 16px;

  /* ---------------------------------------------------------------
     Alias de compatibilité — tokens employés par les vues mais jamais
     définis dans :root. Sans eux, var(--x, fallback) tombait toujours
     sur le fallback (souvent #fff) → îlots clairs en thème sombre.
     Ils pointent vers les tokens réels et suivent donc le thème.
     --------------------------------------------------------------- */
  --bg-elev: var(--bg-elevated);
  --bg-card: var(--bg-elevated);
  --surface: var(--bg-elevated);
  --bg-2: var(--bg-hover);
  --bg-mute: var(--bg-hover);
  --bg-soft: var(--bg-hover);
  --bg-subtle: var(--bg-hover);
  --bg-sunk: var(--bg);
  --border-faint: var(--border);
  --border-subtle: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--text-soft);
  --text-muted: var(--text-mute);
  --text-500: var(--text-soft);
  --primary-light: var(--primary-soft);
  --brand-soft: var(--primary-soft);
  /* Alias manquants — ces noms étaient utilisés en fallback CSS
     (var(--surface-2, #f1f5f9)…) sans JAMAIS être définis : la valeur codée
     en dur du fallback était donc la SEULE valeur réellement appliquée,
     figée en clair et cassée en sombre. Ajoutés le 09/07 pour que ces
     usages deviennent enfin théme-conscients (repérés par grep, ~25 sites). */
  --surface-2: var(--bg-hover);
  --surface-3: var(--bg-active);
  --surface-soft: var(--bg-hover);
  --ok: var(--success);
  --success-soft: var(--success-bg);
  /* Alias manquants repérés le 22/07 par contrôle croisé « utilisés vs
     définis ». Les deux premiers étaient employés SANS repli : la déclaration
     était donc purement invalide (texte de succès qui héritait sa couleur,
     fond de carte transparent). Les trois suivants ne tenaient que par un
     repli codé en dur, donc faux en thème sombre. */
  --success-text: var(--ok-text);
  --bg-surface: var(--bg-elevated);
  /* .res-item survolé/actif dessine un liseré gauche « inset 3px 0 0
     var(--res-color) » — jamais défini nulle part, donc déclaration invalide
     et repère de sélection INVISIBLE dans la liste des résultats. */
  --res-color: var(--primary);
  --success-light: var(--ok-bg);
  --warn-border: var(--amber-border);
  /* Encadrés de statut (thème clair) */
  --success-bg: #D1FAE5;
  --warning-bg: #FEF3C7;
  --warn-bg: #FEF3C7;
  --warn-text: #92400E;
  --ok-bg: #D1FAE5;
  --ok-text: #065F46;
  --info-bg: #DBEAFE;
  --info-text: #1E40AF;
  --danger-text: #B91C1C;
  /* Ambre « à vérifier / en attente / test » — couleur DÉJÀ utilisée partout
     dans le dossier patient (chips DMG, homologation, IA partielle…) mais en
     hex codé en dur (#b45309/#fffbeb/#f59e0b), donc invisible/illisible en
     sombre faute d'override. Tokenisé le 09/07 pour corriger tous les
     usages d'un coup avec un remplacement mécanique (même triplet partout). */
  --amber-text: #B45309;
  --amber-bg: #FFFBEB;
  --amber-border: #F59E0B;
  /* Nuances « strong » (21/07) — texte/icône saturé sur fond clair, plus foncé
     que --danger/--success/--info (pensés pour des fonds/bordures). Utilisées
     par la migration des hex codés en dur des vues (#dc2626, #16a34a, #0284c7…),
     avec variante sombre éclaircie comme --danger-text/--amber-text. */
  --danger-strong: #DC2626;
  --success-strong: #16A34A;
  --info-strong: #0284C7;
  /* Tokens référencés par les vues mais jamais définis (même bug historique
     que --surface-2 : le fallback codé en dur était la seule valeur réelle,
     figée en clair). Définis ici (21/07) pour qu'ils suivent enfin le thème. */
  --danger-bg: #FEF2F2;
  --danger-border: #FCA5A5;
  --warning-text: var(--warn-text);
  --warning-light: var(--warning-bg);
  --warning-soft: var(--warning-bg);
  --warning-border: var(--amber-border);
  --ok-soft: var(--ok-bg);

  /* C10.4 (suite, 21/07) — nuances « appuyées » des statuts, jusqu'ici en hex
     bruts dispersés (app.css + styles inline des vues : #16a34a, #15803d,
     #dc2626, #b91c1c, #d97706…). INVARIANTS clair/sombre À DESSEIN : comme les
     bases --success/--warning/--danger ci-dessus (elles non plus n'ont pas
     d'override sombre), pour garantir ZÉRO changement de rendu lors du
     remplacement mécanique hex → var(). Les faire suivre le thème (à la
     manière de --danger-text/--warn-text) = décision future, écran par écran,
     avec vérification visuelle (cf. docs/ARCHITECTURE-CSS.md §Tokens). */
  /* ⚠ FUSION 22/07 : les tokens de ce bloc qui existaient DÉJÀ plus haut
     (--success-strong, --success-light, --danger-strong, --danger-border,
     --warning-light, --warning-border, --warn-border, --ok-soft) ont été
     RETIRÉS d'ici — en CSS la 2e définition gagne en silence, et celles-ci
     écrasaient les alias THÉMÉS définis plus haut (fonds redevenus clairs
     figés en thème sombre : pastille « Rassurant », bandeau DMG, indicateur
     de brouillon…). Ne restent que les nuances propres à C10.4. */
  --success-deep:   #15803D;  /* vert texte lisible sur fond vert pâle */
  --danger-deep:    #B91C1C;  /* rouge texte lisible sur fond rouge pâle */
  --warning-strong: #D97706;  /* ambre appuyé (texte d'avertissement) */

  /* Vocabulaire documentaire canonique (lib/doc-meta.js, DOC_CLASS_META) —
     partagé par le dossier patient, Documents ET Réception ; « un même
     document garde la même identité visuelle sur tous les écrans » (doc-meta.js
     l.5). Avant : 12 couleurs hex codées en dur dans ce module JS, AUCUNE
     variante sombre nulle part → chips catégorie illisibles/plates en sombre
     PARTOUT dans l'app d'un coup. Tokenisées ici (09/07) pour que ce SEUL
     fichier CSS corrige la cohérence sur tous les écrans à la fois, sans
     toucher le code consommateur (les couleurs voyagent déjà en strings CSS
     opaques dans les styles inline — var() s'y glisse sans rien casser).
     Ordonnance/vaccin et biologie/bilan partagent la même teinte dans
     doc-meta.js — tokens séparés quand même pour un réglage indépendant futur. */
  --doccat-imagerie: #14B8A6;      --doccat-imagerie-bg: #F0FDFA;
  --doccat-specialiste: #8B5CF6;   --doccat-specialiste-bg: #F5F3FF;
  --doccat-biologie: #EF4444;      --doccat-biologie-bg: #FEF2F2;
  --doccat-courrier: #3B82F6;      --doccat-courrier-bg: #EFF6FF;
  --doccat-protocole: #0891B2;     --doccat-protocole-bg: #ECFEFF;
  --doccat-sortie: #6366F1;        --doccat-sortie-bg: #EEF2FF;
  --doccat-vaccin: #16A34A;        --doccat-vaccin-bg: #F0FDF4;
  --doccat-lettre: #F59E0B;        --doccat-lettre-bg: #FFFBEB;
  --doccat-certificat: #D97706;    --doccat-certificat-bg: #FFF7ED;
  --doccat-ordonnance: #16A34A;    --doccat-ordonnance-bg: #F0FDF4;
  --doccat-bilan: #EF4444;         --doccat-bilan-bg: #FEF2F2;

  /* Lettres SOAP (S/O/A/P/T) — badges pleine couleur + texte blanc. Tokenisés
     pour la maintenabilité (avant : hex codés en dur x2, badge + liseré de
     focus assorti) ; PAS de variante sombre volontairement — vérifié en
     LIVE (09/07) que ces pastilles saturées + texte blanc restent parfaitement
     lisibles sur fond sombre (même logique que les badges colorés de
     Slack/GitHub, volontairement indépendants du thème). Baisser la
     saturation ici réduirait le contraste avec le texte blanc, donc aucun
     override [data-theme=dark] n'a été ajouté sans preuve visuelle d'un
     vrai problème. --soap-subjective = var(--primary) (même bleu exact). */
  --soap-objective: #0891B2;
  --soap-assessment: #7C3AED;
  --soap-plan: #D97706;
  --soap-treatment: #16A34A;

  /* Agenda (miroir AgendaPro) — définis à la RACINE car ses menus flottants
     (popmenu, tooltip, SlotFinder) sont montés sur <body>, hors de .agp-root. */
  --agp-blue: #0288D1;
  --agp-teal: #01BDC3;
  --agp-deep: #01579B; /* texte bleu foncé sur fonds bleu clair translucides */

  /* Échelle de z-index nommée (S9 — navigation) : les valeurs reprennent
     exactement celles déjà en place pour .modal/.toasts (aucun changement
     visuel), --z-dropdown/--z-overlay/--z-tooltip sont ajoutées pour la même
     convention mais ne sont pas encore consommées ailleurs dans ce fichier —
     seuls .modal/#modal-confirm/.toasts ont été retouchés dans ce lot. */
  --z-dropdown: 40;
  /* C10.4 (suite) — référencé var(--z-popover, 60) plus bas mais jamais défini :
     tokenisé avec la valeur du repli, zéro changement visuel. */
  --z-popover: 60;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 200;
  --z-tooltip: 300;
}

[data-theme='dark'] {
  --bg: #0B0F19;
  --bg-elevated: #131826;
  --bg-sidebar: #0F1320;
  --bg-hover: #1B2030;
  --bg-active: #232940;
  --bg-input: #161C2C;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text: #F1F5F9;
  --text-soft: #CBD5E1;
  /* 64748B était trop sombre sur le fond du DMI : aides et métadonnées
     devenaient presque illisibles pendant une consultation. */
  --text-mute: #94A3B8;

  --border: #1F2937;
  --border-strong: #334155;

  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-soft: rgba(59, 130, 246, 0.15);
  --primary-text-on-soft: #93C5FD;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 35px rgba(0, 0, 0, 0.5);

  /* Encadrés de statut (thème sombre) — esprit des fallbacks d'origine */
  --success-bg: rgba(16, 185, 129, 0.15);
  --warning-bg: rgba(245, 158, 11, 0.15);
  --warn-bg: #4A3A1A;
  --warn-text: #F0C674;
  --ok-bg: #1E3A2A;
  --ok-text: #7FD99F;
  --info-bg: #1C2E3E;
  --info-text: #8FC1E3;
  --danger-text: #FCA5A5;
  --danger-strong: #F87171;
  --success-strong: #4ADE80;
  --info-strong: #38BDF8;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-border: rgba(248, 113, 113, 0.4);
  --amber-text: #FBBF24;
  --amber-bg: rgba(245, 158, 11, 0.14);
  --amber-border: rgba(245, 158, 11, 0.4);

  /* Vocabulaire documentaire canonique — variantes sombres (texte éclairci,
     fond translucide), même logique que --danger-text/--amber-text ci-dessus. */
  --doccat-imagerie: #2DD4BF;      --doccat-imagerie-bg: rgba(20, 184, 166, 0.16);
  --doccat-specialiste: #C4B5FD;   --doccat-specialiste-bg: rgba(139, 92, 246, 0.18);
  --doccat-biologie: #FCA5A5;      --doccat-biologie-bg: rgba(239, 68, 68, 0.16);
  --doccat-courrier: #93C5FD;      --doccat-courrier-bg: rgba(59, 130, 246, 0.16);
  --doccat-protocole: #67E8F9;     --doccat-protocole-bg: rgba(8, 145, 178, 0.18);
  --doccat-sortie: #A5B4FC;        --doccat-sortie-bg: rgba(99, 102, 241, 0.18);
  --doccat-vaccin: #4ADE80;        --doccat-vaccin-bg: rgba(22, 163, 74, 0.16);
  --doccat-lettre: #FBBF24;        --doccat-lettre-bg: rgba(245, 158, 11, 0.14);
  --doccat-certificat: #FBBF24;    --doccat-certificat-bg: rgba(217, 119, 6, 0.16);
  --doccat-ordonnance: #4ADE80;    --doccat-ordonnance-bg: rgba(22, 163, 74, 0.16);
  --doccat-bilan: #FCA5A5;         --doccat-bilan-bg: rgba(239, 68, 68, 0.16);

  /* Agenda : texte bleu lisible sur fonds bleu translucides en sombre */
  --agp-deep: #7DD3FC;
}

/* =====================================================================
   Reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
input:not([type='checkbox']):not([type='radio']):not([type='color']), textarea, select {
  color-scheme: light dark;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03', 'cv02';
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
/* Focus HOMOGÈNE par défaut sur tout champ de saisie (recherche, inputs ad hoc) :
   bordure primaire + anneau doux, identique aux champs déjà stylés (.form-field,
   .rx-field…). Les règles par composant gardent la priorité (spécificité ≥). */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* Accessibilité : focus visible clavier */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Titres : interlettrage légèrement négatif = rendu plus net et compact (look produit moderne). */
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h1 { letter-spacing: -0.02em; }
svg { display: block; }

/* Scrollbars fines & flottantes : pouce arrondi détaché du bord (padding-box),
   discret au repos, plus marqué au survol. Plus léger que la barre 10px pleine. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--transition);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* Accessibilité : respecter « réduire les animations » du système (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Recherche ⌘K : élément mis en évidence par les flèches clavier */
.result-item.active { background: var(--bg-hover); }
.desktop-back-btn:disabled { opacity: .35; cursor: default; }
/* Séparateur vertical léger entre sous-groupes de boutons */
.tools-sep { width: 1px; align-self: stretch; min-height: 18px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }
/* Menu déroulant « ⋯ » (overflow) basé sur <details> */
.chip-menu { position: relative; display: inline-block; }
.chip-menu > summary { list-style: none; cursor: pointer; }
.chip-menu > summary::-webkit-details-marker { display: none; }
.chip-menu-pop {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
  z-index: 50; min-width: 190px;
}
.chip-menu-pop .btn-chip, .chip-menu-pop button { width: 100%; justify-content: flex-start; text-align: left; }

/* =====================================================================
   Layout
   ===================================================================== */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 12px;
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  user-select: none;
  -webkit-app-region: drag;
}
.sidebar > * { -webkit-app-region: no-drag; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.brand-mark {
  width: 32px; height: 32px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.signal-logo--mark { display: block; object-fit: contain; flex: 0 0 auto; }
.signal-logo--full {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text, #0A1F44);
  line-height: 1;
}
.signal-logo__word { font-size: 24px; font-weight: 750; letter-spacing: -.04em; white-space: nowrap; }
.signal-logo__pro { color: #00B8E6; }
.signal-logo--agenda .signal-logo__pro { color: #123B8F; }
.brand-name { font-weight: 700; font-size: var(--text-lg, 16px); letter-spacing: -0.01em; }
.brand-sub { font-size: var(--text-xs); color: var(--text-mute); }

.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-mute);
  font-size: var(--text-base);
  margin-bottom: 8px;
  transition: var(--transition);
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-soft); }
.search-trigger span { flex: 1; text-align: left; }
.search-trigger kbd {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 2px 5px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mute);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  padding: 16px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-soft);
  font-weight: 500;
  font-size: var(--text-md, 14px);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  font-weight: 600;
}
.nav-item .badge {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: white;
  min-width: 18px;
  text-align: center;
}
/* Deux signaux distincts sur l'entrée eHealthBox : pastille ROUGE = messages
   non lus (alarme « nouveau ») + compteur ORANGE = documents à rattacher
   (worklist de classement). Conteneur poussé à droite ; les pastilles à
   l'intérieur ne reprennent pas le margin-left:auto pour rester collées. */
.nav-item .nav-badges {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-item .nav-badges .badge { margin-left: 0; }
.nav-item .nav-badges .badge--attach {
  background: var(--warning, #f59e0b);
}

/* Zone « Système & IA » — outils non cliniques (assistant IA, monitoring GPU,
   paramètres). Volontairement DISCRÈTE : séparée par un filet et atténuée, pour
   que les entrées cliniques dominent la sidebar (logique DMI). */
.nav-section--system {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.nav-item--system {
  color: var(--text-mute);
  font-size: var(--text-base);
  font-weight: 500;
}
.nav-item--system svg { width: 16px; height: 16px; opacity: 0.85; }
.nav-item--system:hover { color: var(--text); }
.nav-item--system.active { color: var(--primary-text-on-soft); }

.sidebar-footer {
  margin-top: auto;
  padding: 8px 4px 4px;
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-sidebar);
}
.sidebar-pins {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-pins:not(:has(> *:not([hidden]))) { display: none; }

/* ── Interrupteur « IA du Mac » (Dr 25/07) ────────────────────────────────
   Même gabarit que .ai-status juste en dessous, pour que le pied de bannière
   garde une seule grammaire visuelle (le Dr avait fait retirer les blocs
   précédents jugés « moches » — on reste donc sobre et compact). */
.mac-ia-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
}
.mac-ia-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mac-ia-track {
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--border-strong, var(--border));
  position: relative;
  transition: background var(--transition, .15s ease);
}
.mac-ia-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  transition: transform var(--transition, .15s ease);
}
.mac-ia-switch input:checked + .mac-ia-track { background: var(--success, #2f855a); }
.mac-ia-switch input:checked + .mac-ia-track .mac-ia-knob { transform: translateX(13px); }
.mac-ia-switch input:focus-visible + .mac-ia-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.mac-ia-label { color: var(--text-soft); white-space: nowrap; }
.mac-ia-switch input:checked ~ .mac-ia-label { color: var(--text); font-weight: 600; }
/* Bannière repliée : on ne garde que l'interrupteur, comme .ai-status. */
body.sidebar-folded .mac-ia-switch { justify-content: center; padding: 8px 4px; }
body.sidebar-folded .mac-ia-label { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mac-ia-track, .mac-ia-knob { transition: none; }
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.ai-status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-mute);
  flex-shrink: 0;
}
.ai-status.ok .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.ai-status.error .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }

/* Main */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
  -webkit-app-region: drag;
}
.topbar > * { -webkit-app-region: no-drag; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.page-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
/* C10.7 (12/07) : zone contextuelle par vue, remplie via mountTopbarContext(node) —
   vide = invisible (pas de séparateur ni d'espace parasite quand aucune vue n'a
   d'action contextuelle). */
.topbar-context-actions { display: flex; align-items: center; gap: 6px; }
.topbar-context-actions:not(:empty) { padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--border); }
.topbar-session-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-session-actions:not(:empty) { padding-right: 8px; border-right: 1px solid var(--border); }
.topbar-session-actions > button {
  max-width: 230px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.topbar-session-actions .cpill-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-session-actions .cpill-hint { color: var(--text-mute); }
.recording-session-pill {
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 245px;
  padding: 5px 7px 5px 9px;
  border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--danger) 5%, var(--bg-elevated));
  color: var(--text);
  box-shadow: var(--shadow-xs);
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
}
.recording-session-label { color: var(--text-soft); white-space: nowrap; }
.recording-session-patient::before { content: '·'; margin-right: 5px; color: var(--text-mute); }
.recording-session-patient { font-weight: 650; }
/* Les trois actions permanentes n'avaient ni taille d'icône ni surface propre :
   selon la largeur et le rendu SVG d'Electron, elles se réduisaient à des
   pastilles presque blanches. Cible directe pour ne pas modifier les boutons
   contextuels injectés par les vues. */
.topbar-right > button.btn-ghost {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
  color: var(--text);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.topbar-right > button.btn-ghost svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.topbar-right > button.btn-ghost:hover {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}

.view {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 48px;
}

/* =====================================================================
   Boutons
   ===================================================================== */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--btn-pad-md, 7px 14px);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover { background: var(--danger-hover); }
.btn-sm { padding: var(--btn-pad-sm, 5px 10px); font-size: var(--text-sm); }

/* Micro-interactions cohérentes pour TOUS les boutons d'action :
   - pression tactile au clic (s'enfonce d'1px),
   - anneau de focus clavier doux (a11y) au lieu de l'outline système,
   - le primaire prend un peu d'élévation au survol. */
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active {
  transform: translateY(0.5px);
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn-primary:hover { box-shadow: var(--shadow-md); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled {
  opacity: .55; cursor: not-allowed; box-shadow: none; transform: none;
}
.icon-btn:active { transform: translateY(0.5px); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-soft);
  transition: var(--transition);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

/* =====================================================================
   Cartes & sections
   ===================================================================== */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.card-h h2 { font-size: var(--text-md); color: var(--text-soft); font-weight: 600; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.kpi-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-label {
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.kpi-card .kpi-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-sub {
  font-size: var(--text-sm);
  color: var(--text-mute);
  margin-top: 4px;
}
.kpi-card .kpi-icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  border-radius: 10px;
}
.kpi-card .kpi-icon svg { width: 18px; height: 18px; }

/* =====================================================================
   Tableau de bord (dashboard)
   ===================================================================== */
.dash-root { display: flex; flex-direction: column; gap: 16px; }

/* Hero — bandeau date + résumé du jour */
.dash-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(135% 135% at 0% 0%, rgba(37, 99, 235, 0.10), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 55%),
    var(--bg-elevated);
}
.dash-hero-over {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-mute);
}
.dash-hero-day {
  font-size: var(--text-2xl, 22px); font-weight: 700; letter-spacing: -0.02em;
  text-transform: capitalize; margin-top: 2px;
}
.dash-hero-stats { display: flex; gap: 26px; flex-shrink: 0; }
.dash-hero-stat { font-size: var(--text-sm); color: var(--text-soft); text-align: right; }
.dash-hero-stat b {
  display: block; font-size: var(--text-2xl); font-weight: 700; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}

/* Bandeaux d'attention (alertes / rappels / demandes) */
.dash-attention { display: flex; flex-direction: column; gap: 8px; }
.dash-banner {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: var(--text-base); cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
}
.dash-banner:hover { filter: brightness(0.985); }
.dash-banner strong { font-weight: 700; }
.dash-banner .dash-banner-sub { color: var(--text-soft); }
.dash-banner.is-danger  { background: rgba(239, 68, 68, 0.07);  border-color: rgba(239, 68, 68, 0.20);  }
.dash-banner.is-danger  strong { color: var(--danger); }
.dash-banner.is-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.22); }
.dash-banner.is-warning strong { color: var(--warning); }
.dash-banner.is-info    { background: rgba(6, 182, 212, 0.08);  border-color: rgba(6, 182, 212, 0.22);  }
.dash-banner.is-info    strong { color: var(--info); }

/* Agenda — « Aujourd'hui » + « À suivre » côte à côte.
   align-items:start → chaque carte garde sa hauteur naturelle (la carte vide
   ne s'étire pas à la hauteur de la plus longue). */
.dash-agenda { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Worklists cliniques en tête (résultats à relire + demandes à traiter) :
   2 colonnes qui se réduisent à 1 si étroit, et une seule carte visible occupe
   toute la largeur (auto-fit ignore la carte masquée si l'autre est vide). */
.dash-worklists { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.dash-worklists:empty { display: none; }
.dash-count {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-mute);
  background: var(--bg-hover); padding: 2px 9px; border-radius: var(--radius-full);
}
.dash-empty {
  color: var(--text-mute); font-size: var(--text-base);
  padding: 22px 4px; text-align: center;
}
.dash-appt-list { display: flex; flex-direction: column; gap: 2px; }
.dash-appt {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  transition: background var(--transition);
}
.dash-appt:hover { background: var(--bg-hover); }
.dash-appt-time {
  font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600;
  min-width: 46px; color: var(--text-soft);
}
.dash-appt-main { flex: 1; min-width: 0; }
.dash-appt-name {
  font-weight: 600; font-size: var(--text-md, 14px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-appt-sub {
  font-size: var(--text-sm, 12px); color: var(--text-mute); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-appt-chev { color: var(--text-mute); font-size: var(--text-lg); font-weight: 300; }

/* Pastille date pour « À suivre » */
.dash-daychip {
  text-align: center; min-width: 48px;
  background: var(--bg-hover); border-radius: 10px; padding: 5px 4px;
}
.dash-daychip .dc-wd {
  font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute);
}
.dash-daychip .dc-d { font-size: var(--text-xl); font-weight: 700; line-height: 1.15; }
.dash-daychip.is-tomorrow { background: var(--primary-soft); }
.dash-daychip.is-tomorrow .dc-wd,
.dash-daychip.is-tomorrow .dc-d { color: var(--primary-text-on-soft); }

/* Réception — bandeau relégué en bas */
.dash-reception {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; cursor: pointer;
  transition: var(--transition);
}
.dash-reception:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.dash-reception.has-pending {
  border-color: rgba(37, 99, 235, 0.30);
  background: rgba(37, 99, 235, 0.04);
}
.dash-reception-ic {
  width: 38px; height: 38px; flex-shrink: 0; font-size: var(--text-xl);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover); border-radius: 10px;
}
.dash-reception-main { flex: 1; min-width: 0; }
.dash-reception-title { font-weight: 600; font-size: var(--text-md); }
.dash-reception-sub { font-size: var(--text-sm); color: var(--text-mute); margin-top: 1px; }

/* Tournée du jour — itinéraire optimal des visites à domicile */
.dash-route-note { font-size: var(--text-base, 13px); color: var(--text-soft); padding: 4px 0 2px; }
.dash-route-note.is-warn {
  background: var(--warn-bg); color: var(--warn-text);
  padding: 8px 11px; border-radius: var(--radius-sm); margin-top: 6px;
}
.dash-route-note code { font-size: var(--text-sm); }
.dash-route-actions { margin-top: 12px; display: flex; justify-content: flex-end; }

.route-list { display: flex; flex-direction: column; margin-top: 8px; }
.route-stop {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 8px 8px; border-radius: 10px;
  transition: background var(--transition);
}
.route-stop:hover { background: var(--bg-hover); }
.route-stop.is-missing { background: rgba(245, 158, 11, 0.06); align-items: center; }
.route-badge {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 700; color: #fff; background: var(--primary);
}
.route-badge.is-first { background: var(--accent); }
.route-badge.is-missing { background: var(--warning, #f59e0b); }
.route-stop-main { flex: 1; min-width: 0; }
.route-stop-name { font-weight: 600; font-size: var(--text-md, 14px); }
.route-stop-time { color: var(--text-mute); font-weight: 500; }
.route-addr {
  font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 1px;
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color var(--transition);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.route-addr:hover { text-decoration-color: currentColor; }
.route-addr.is-empty { color: var(--text-mute); cursor: default; text-decoration: none; font-style: italic; }
/* Lien « ✎ modifier » sous une adresse affichée */
.route-edit-link {
  background: none; border: none; padding: 2px 0; margin-top: 1px;
  font-size: var(--text-sm, 12px); color: var(--text-mute); cursor: pointer;
}
.route-edit-link:hover { color: var(--primary); text-decoration: underline; }
/* Connecteur trajet entre deux étapes (et départ/retour domicile) */
.route-leg {
  font-size: var(--text-sm, 12px); color: var(--text-mute);
  padding: 3px 0 3px 38px; line-height: 1.2;
}
.route-leg.is-home { color: var(--text-soft); font-weight: 500; padding-left: 8px; }
/* Éditeur d'adresse inline (pour les visites sans adresse) */
.route-edit { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.route-inp {
  flex: 1; min-width: 120px; padding: 5px 8px; font-size: var(--text-base, 13px);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text);
}
.route-inp:focus { outline: var(--focus-outline); outline-offset: -1px; border-color: var(--primary); }
.route-inp.route-inp-cp { flex: 0 0 70px; min-width: 70px; }
/* Autocomplétion d'adresse (type-ahead Photon) */
.route-typeahead { position: relative; flex: 1; min-width: 150px; display: flex; }
.route-typeahead .route-inp { flex: 1; min-width: 0; }
.route-suggest {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 60;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto;
}
.route-suggest-item { padding: 7px 10px; font-size: var(--text-base, 13px); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-suggest-item:hover, .route-suggest-item.active { background: var(--bg-hover); }

@media (max-width: 1100px) {
  .dash-agenda { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dash-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .dash-hero-stats { gap: 22px; }
  .dash-hero-stat { text-align: left; }
}

/* =====================================================================
   Tables
   ===================================================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md, 14px);
}
.data-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky; top: 0;
  z-index: 1;
}
.data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.data-table tbody tr { transition: background var(--transition); cursor: pointer; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr.empty { cursor: default; }
.data-table tbody tr.empty td { text-align: center; color: var(--text-mute); padding: 40px 14px; }

.table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   Forms
   ===================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field > label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-soft);
}
.form-field > label .required { color: var(--danger); }
.form-field input, .form-field select, .form-field textarea {
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: var(--transition);
  font-size: var(--text-md, 14px);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-field textarea { resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.55; }
.form-field .hint { font-size: var(--text-xs); color: var(--text-mute); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar .grow { flex: 1; }
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  flex: 1; max-width: 480px;
  transition: var(--transition);
}
.search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.search-bar svg { width: 16px; height: 16px; color: var(--text-mute); }
.search-bar input {
  border: none; outline: none; background: transparent; flex: 1;
  font-size: var(--text-md, 14px);
}

/* Pills / badges */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--bg-hover);
  color: var(--text-soft);
}
.pill.primary { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.pill.success { background: rgba(16, 185, 129, 0.12); color: var(--ok-text); }
.pill.warning { background: rgba(245, 158, 11, 0.12); color: var(--warn-text); }
.pill.danger { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.pill.info { background: rgba(6, 182, 212, 0.12); color: var(--info-text); }
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: white;
}

/* =====================================================================
   Modales
   ===================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  animation: modalIn 150ms ease-out;
}
.modal[hidden] { display: none; }
/* #modal-confirm doit toujours s'afficher AU-DESSUS d'un #modal-form déjà
   ouvert (panier d'ordonnances, formulaire en cours…) — jamais au même
   niveau, sinon l'ordre d'apparition dans le DOM déciderait au hasard. */
/* #modal-form-2 (panneaux ouverts DEPUIS un formulaire : info médicament,
   favoris…) se place ENTRE #modal-form et #modal-confirm : au-dessus du
   composeur qu'il ne doit plus détruire, mais sous une confirmation, qui
   reste toujours l'élément le plus haut. */
#modal-form-2 { z-index: calc(var(--z-modal) + 1); }
#modal-confirm { z-index: calc(var(--z-modal) + 2); }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-content {
  position: relative;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: var(--text-lg, 16px); font-weight: 600; }
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg);
}

.search-modal { padding: 0; max-width: 720px; }
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.search-input-wrap svg { color: var(--text-mute); }
.search-input-wrap input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: var(--text-lg);
}
.search-input-wrap kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px 7px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mute);
}
.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}
.search-results .group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 12px 6px;
}
.search-results .result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.search-results .result-item:hover,
.search-results .result-item.active {
  background: var(--bg-hover);
}
.result-item .label { font-weight: 500; font-size: var(--text-md, 14px); }
.result-item .sub { font-size: var(--text-sm); color: var(--text-mute); margin-top: 1px; }
.result-item mark { background: rgba(245, 158, 11, 0.25); color: inherit; padding: 0 2px; border-radius: 2px; }

/* ===== Cockpit V2 — option « Demander à l'IA » + réponse inline dans ⌘K ===== */
.search-results .result-item--ai {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 90%);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  margin-bottom: 6px;
}
.search-results .result-item--ai:hover,
.search-results .result-item--ai.active {
  background: linear-gradient(90deg, var(--primary-soft) 0%, var(--bg-hover) 95%);
}
.result-item--ai .label { color: var(--primary-text-on-soft); font-weight: 600; }
.cockpit-ai-spark { font-size: var(--text-lg, 16px); flex-shrink: 0; }
.cockpit-ai-kbd {
  margin-left: auto; font-size: var(--text-xs); color: var(--primary-text-on-soft);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px 7px; font-weight: 600; flex-shrink: 0;
}
.cockpit-ai { padding: 6px 6px 10px; }
.cockpit-ai-q {
  display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: var(--text-md);
  color: var(--text); padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.cockpit-ai-thinking { display: flex; gap: 9px; align-items: center; color: var(--text-mute); font-size: var(--text-base); padding: 4px 0; }
.cockpit-ai-steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cockpit-ai-step {
  font-family: var(--font-mono); font-size: var(--text-sm, 12px); color: var(--text-soft);
  background: var(--bg-hover); border-radius: var(--radius-sm); padding: 5px 9px;
}
.cockpit-ai-a { white-space: pre-wrap; line-height: 1.62; font-size: var(--text-md, 14px); color: var(--text); }
.cockpit-ai-err { color: var(--danger); font-size: var(--text-base); padding: 6px 0; }

.quick-modal { max-width: 520px; padding: 24px; }
.quick-modal h3 { font-size: var(--text-lg); margin-bottom: 18px; }
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  font-weight: 500;
  font-size: var(--text-md, 14px);
}
.quick-card:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
}
.quick-card svg { width: 24px; height: 24px; color: var(--primary); }
.form-modal { max-width: 720px; }

/* Modal taille intermédiaire (formulaires structurés type prescription) */
.modal-content.modal-md { max-width: 840px; }

/* =====================================================================
   FORMULAIRE PRESCRIPTION (refonte — sections groupées, switch propre)
   ===================================================================== */
.rx-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rx-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}
.rx-section.rx-section-prescription { overflow: visible; }
.rx-section-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.rx-section-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  flex-shrink: 0;
}
.rx-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}
.rx-section-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rx-row {
  display: grid;
  gap: 10px;
  align-items: end;
}
.rx-row-2 { grid-template-columns: 1fr 1fr; }
.rx-row-3 { grid-template-columns: 1.5fr 1fr 1fr; }
.rx-row-4 { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.rx-switches { align-items: center; }
@media (max-width: 700px) {
  .rx-row-2, .rx-row-3, .rx-row-4 { grid-template-columns: 1fr; }
}

/* ─── Boutons-toggle Statut (Chronique / Aigu / Une fois / Si besoin) ─── */
.rx-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rx-btn-toggle {
  padding: 7px 14px;
  font-size: var(--text-base);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
}
.rx-btn-toggle:hover { background: var(--bg-hover, var(--bg-elevated)); }
.rx-btn-toggle.active {
  background: var(--primary, #4f46e5);
  color: #fff;
  border-color: var(--primary, #4f46e5);
}

/* ─── Onglets Posologie (Simple / Texte libre / Modèle) ───────────────── */
.rx-tabs-h {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.rx-tab {
  padding: 8px 14px;
  font-size: var(--text-base, 13px);
  font-weight: 500;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.rx-tab:hover { color: var(--text); }
.rx-tab.active {
  color: var(--primary, #4f46e5);
  border-bottom-color: var(--primary, #4f46e5);
}
.rx-tab-pane { padding: 4px 0; }
.rx-tab-stub {
  padding: 16px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base, 13px);
  color: var(--text-mute);
  font-style: italic;
  text-align: center;
}

/* ─── Matrice posologie simple (Matin / Midi / Soir / Coucher) ────────── */
.rx-poso-simple {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rx-poso-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rx-poso-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rx-poso-slot-l {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-mute);
}
.rx-poso-slot input {
  width: 60px;
  text-align: center;
  padding: 6px 4px;
  font-size: var(--text-md);
  font-weight: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rx-poso-slot input:not(:placeholder-shown):not([value="0"]) {
  background: var(--primary-soft, #ede9fe);
  color: var(--primary, #4f46e5);
  border-color: var(--primary, #4f46e5);
}
.rx-poso-freq {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rx-poso-freq label {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-mute);
}
.rx-poso-freq select {
  flex: 1;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
}
@media (max-width: 700px) {
  .rx-poso-matrix { grid-template-columns: repeat(2, 1fr); }
}
.rx-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rx-field-wide { min-width: 0; }
.rx-field-full { grid-column: 1 / -1; }
.rx-field > label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.rx-req { color: var(--danger); margin-left: 2px; }
.rx-field input,
.rx-field textarea,
.rx-field select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-md, 14px);
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}
.rx-field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.rx-field input:focus,
.rx-field textarea:focus,
.rx-field select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* Suggestions médicament SAMv2 */
.rx-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 420px;
  overflow-y: auto;
  z-index: 6;
  display: none;
}
.rx-suggestion {
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--text-base);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.rx-suggestion:last-child { border-bottom: none; }
.rx-suggestion:hover, .rx-suggestion.active { background: var(--bg-hover); }
.rx-suggestion.active { box-shadow: inset 2px 0 0 var(--primary); }
/* Médicament plus autorisé à la prescription (autorisation révoquée/suspendue,
   commercialisation arrêtée). Décision du Dr Nanni (07/08/2026) : il reste
   VISIBLE — un renouvellement ancien doit retrouver son médicament — mais
   grisé et non sélectionnable, avec son motif affiché en clair.
   Le nom garde un contraste lisible : c'est une information à lire, pas un
   élément décoratif à effacer. */
.rx-suggestion.is-unavailable {
  cursor: not-allowed;
  background: var(--bg-input);
}
.rx-suggestion.is-unavailable .rx-suggestion-name,
.rx-suggestion.is-unavailable .rx-sug-sub,
.rx-suggestion.is-unavailable .rx-sug-price {
  color: var(--text-mute);
  text-decoration: line-through;
  text-decoration-color: var(--text-mute);
  text-decoration-thickness: 1px;
}
/* Le motif, lui, n'est jamais barré ni atténué : c'est la seule chose que le
   médecin doit pouvoir lire d'un coup d'œil sur cette ligne. */
.rx-suggestion.is-unavailable .rx-dlv-unavailable { text-decoration: none; }
.rx-dlv-unavailable {
  background: rgba(220,38,38,.10);
  color: var(--danger-text, #b91c1c);
  border: 1px solid rgba(220,38,38,.35);
}

/* Recherche premium : surlignage, sections ★/🕐, lignes riches, étoile favori */
.rx-hl { background: rgba(37,99,235,.16); color: inherit; border-radius: 3px; padding: 0 1px; }
.rx-sug-head {
  padding: 6px 12px 4px;
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.rx-suggestion { align-items: center; }
.rx-sug-main { flex: 1; min-width: 0; }
.rx-sug-sub {
  color: var(--text-mute);
  font-size: var(--text-xs);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rx-sug-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rx-sug-price { font-size: var(--text-sm, 12px); font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.rx-fav-star {
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--text-lg, 16px);
  line-height: 1;
  padding: 2px 4px;
  color: var(--text-mute);
  border-radius: 6px;
}
.rx-fav-star:hover { background: var(--bg-hover); color: var(--warning-hover, #d97706); }
.rx-fav-star.is-fav { color: var(--warning, #f59e0b); }

/* Toggle 『 Spécialité | Magistrale 』 dans le label du champ médicament */
.rx-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 10px;
  vertical-align: middle;
}
.rx-mode-toggle button {
  border: none;
  background: none;
  padding: 3px 12px;
  font-size: var(--text-sm, 12px);
  cursor: pointer;
  color: var(--text-soft);
  font-family: inherit;
}
.rx-mode-toggle button.active { background: var(--primary); color: #fff; font-weight: 600; }

/* Critère objectif de présentation SAMv2 (05.151). Compact dans le libellé :
   il ne réduit pas la largeur du champ et reste modifiable en un geste. */
.rx-field > label .rx-sam-sort {
  width: auto;
  min-width: 148px;
  margin-left: auto;
  padding: 4px 28px 4px 9px;
  border-radius: 999px;
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-soft);
  background-color: var(--bg-input);
}
.rx-field > label .rx-sam-sort:disabled { opacity: .48; cursor: not-allowed; }

/* Pastille source d'une formule magistrale embarquée (TMF / fiche officielle) */
.rx-mag-src {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 700;
  background: rgba(99,102,241,.12);
  color: #4f46e5;
  border: 1px solid rgba(99,102,241,.3);
}

/* Mini-actions des cartes panier (↑ ↓ ⧉) */
.rx-cart-mini {
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 3px 5px;
  color: var(--text-mute);
  border-radius: 6px;
  flex-shrink: 0;
}
.rx-cart-mini:hover { background: var(--bg-hover); color: var(--text); }

/* Infos SAMv2 (prix public, délivrance, CBIP) — suggestions + panier */
.rx-dlv-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.rx-dlv-free { background: rgba(22,163,74,.12); color: var(--success-deep); border: 1px solid rgba(22,163,74,.35); }
.rx-dlv-special { background: rgba(217,119,6,.12); color: var(--warn-text); border: 1px solid rgba(217,119,6,.35); }
.rx-dlv-rx { background: var(--bg-input); color: var(--text-soft); border: 1px solid var(--border); }
.rx-cart-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  font-size: var(--text-sm, 12px);
}
.rx-cart-info .rx-dlv-badge { margin-left: 0; }
.rx-cart-price { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rx-cart-noremb { color: var(--text-mute); font-size: var(--text-xs); }
.rx-cbip-link {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 1px 4px;
}
.rx-cbip-link:hover { text-decoration: underline; }
.rx-chap4-btn { cursor: pointer; }
.rx-chap4-panel {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px dashed rgba(217,119,6,.45);
  border-radius: 8px;
  background: rgba(217,119,6,.05);
  font-size: var(--text-sm);
}
.rx-chap4-panel input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text);
  font-size: var(--text-sm);
}
.rx-chap4-result { margin-top: 6px; font-size: var(--text-sm, 12px); }

/* Schéma de médication interactif (poste de consultation) */
.consult-medscheme {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px 6px;
  margin: 6px 0;
}
.cms-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--text-base, 13px);
  padding-bottom: 6px;
}
.cms-hint { font-size: var(--text-xs); color: var(--text-mute); }
.cms-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px 18px;
}
.cms-group {
  grid-column: 1 / -1;
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 0 2px;
}
.cms-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px 3px 8px;
  border-radius: 7px;
  box-shadow: inset 2px 0 0 var(--cms-tone, var(--border));
}
.cms-row:hover { background: var(--bg-hover); }
.cms-dot {
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--cms-tone, var(--border));
}
.cms-med { flex: 1; min-width: 0; }
.cms-act {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  font-size: var(--text-sm);
  opacity: .35;
}
.cms-row:hover .cms-act { opacity: 1; }
.cms-act.on { color: var(--success-strong); opacity: 1; }
.cms-act:hover { background: var(--bg-hover); }
.cms-del:hover { color: var(--danger); }
.cms-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-sub {
  font-size: var(--text-xs);
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-status { width: 78px; min-width: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); color: var(--text-soft); padding: 3px 4px; font-size: var(--text-2xs); }
.consult-medscheme .clinical-history-summary { border-top: 1px solid var(--border); margin-top: 8px; padding: 10px 12px 12px; }

/* Groupes Chronique/Aigu du schéma (colonne gauche du composeur) */
.rx-schema-group {
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 10px 3px;
}

/* Historique des prescriptions (colonne gauche du composeur, vue 📜) */
.rx-hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.rx-hist-row:hover { background: var(--bg-hover); }
.rx-hist-row:hover .rx-hist-add { opacity: 1; }
.rx-hist-date {
  width: 64px;
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.rx-hist-med { flex: 1; min-width: 0; }
.rx-hist-name {
  font-size: var(--text-base, 13px);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rx-hist-sub {
  font-size: var(--text-xs);
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rx-hist-add {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--primary-soft, #dbeafe);
  color: var(--primary);
  font-weight: 700;
  opacity: .45;
}
.rx-suggestion-name { font-weight: 500; color: var(--text); }
.rx-suggestion-meta { color: var(--text-mute); font-size: var(--text-xs); white-space: nowrap; align-self: center; }

/* Switch (toggle) Renouvelable */
.rx-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  padding: 8px 0;
  align-self: end;
}
.rx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.rx-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--border-strong, #cbd5e1);
  border-radius: 999px;
  transition: background .15s;
  flex-shrink: 0;
}
.rx-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform .15s;
}
.rx-switch input:checked ~ .rx-switch-track { background: var(--primary); }
.rx-switch input:checked ~ .rx-switch-track .rx-switch-thumb { transform: translateX(16px); }
.rx-switch-label {
  font-size: var(--text-base, 13px);
  font-weight: 600;
  color: var(--text);
}

/* ── Bannière d'alertes cliniques (allergie, fonction rénale, interactions) ── */
.rx-alert-banner {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  background: var(--bg-elevated);
}
.rx-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid;
}
.rx-alert-icon { font-size: var(--text-xl); line-height: 1.2; flex-shrink: 0; }
.rx-alert-text { flex: 1; min-width: 0; }
.rx-alert-title {
  font-size: var(--text-base, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.rx-alert-body { font-size: var(--text-base, 13px); line-height: 1.45; }
.rx-alert-danger {
  background: rgba(239, 68, 68, 0.09);
  border-color: rgba(239, 68, 68, 0.35);
  color: #991b1b;
}
.rx-alert-warning {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--warn-text);
}
.rx-alert-info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.35);
  color: #1e40af;
}

/* ── Hint historique (sous le champ médicament) ────────────────────────────── */
.rx-history-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: #4338ca;
}
.rx-history-icon { font-size: var(--text-md); }
.rx-history-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: var(--text-md);
  color: var(--text-mute);
  cursor: pointer;
  padding: 0 4px;
}
.rx-history-clear:hover { color: var(--danger); }

/* =====================================================================
   PRESCRIPTION — POLISH (2026-05-29)
   Remplace les styles inline par le design system : liste d'actions
   compacte (fini le wrap sur 4 lignes), panier + cartes médicament /
   magistrale harmonisés, recherche catalogue, aperçu « Rp/ ».
   ===================================================================== */

/* ── Liste : actions compactes sur une seule ligne ─────────────────────── */
.rx-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.rx-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.rx-act:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.rx-act.is-primary { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-soft); }
.rx-act.is-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.rx-act.is-danger:hover { background: rgba(239, 68, 68, 0.10); color: var(--danger); border-color: rgba(239, 68, 68, 0.45); }
.rx-act-label { width: auto; padding: 0 11px; gap: 5px; font-size: var(--text-sm); font-weight: 600; }

/* ── Modal création : colonne « Ajouter / À prescrire » ─────────────────── */
.rx-cart-col {
  width: 360px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding-left: var(--space-3);
  display: flex;
  flex-direction: column;
}
.rx-prescription-workspace {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(500px, 1.1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.rx-workspace-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--primary) 8%);
  box-shadow: 0 8px 24px -24px color-mix(in srgb, var(--primary) 45%, transparent);
}
.rx-schema-panel { display: flex; flex-direction: column; }
.rx-workspace-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: -2px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.rx-workspace-heading strong {
  color: var(--text);
  font-size: var(--text-md, 14px);
  letter-spacing: -.01em;
}
.rx-workspace-heading span {
  color: var(--text-mute);
  font-size: var(--text-sm, 12px);
  line-height: 1.4;
}
.rx-prescription-workspace .rx-cart-col {
  width: auto;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.modal-fullpage .rx-prescription-workspace .rx-cart-list {
  max-height: max(280px, calc(100vh - 430px));
}
@media (max-width: 1080px) {
  .rx-prescription-workspace { grid-template-columns: minmax(0, 1fr); }
  .modal-fullpage .rx-prescription-workspace .rx-cart-list { max-height: 420px; }
}
.rx-cart-subhead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin-bottom: var(--space-2);
}
.rx-cart-subhead.mt { margin-top: var(--space-4); }
.rx-cart-count {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--primary-text-on-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  text-transform: none;
  letter-spacing: 0;
}
.rx-cart-list {
  flex: 1;
  min-width: 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
  margin: 0 -2px;
}
.rx-cart-empty {
  color: var(--text-mute);
  font-size: var(--text-sm);
  padding: 22px 14px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  line-height: 1.5;
}
.rx-package-choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 7px;
  color: var(--text-mute);
  font-size: var(--text-xs);
  font-weight: 600;
}
.rx-package-choice select {
  width: 100%;
  min-height: 32px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}

/* ── Carte panier (médicament & magistrale) ─────────────────────────────── */
.rx-cart-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 10px;
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.rx-cart-card.is-magistral {
  border-color: var(--accent);
  background: linear-gradient(0deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0.05)), var(--bg-elevated);
  padding-left: 12px;
}
.rx-cart-card.is-magistral::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent);
}
.rx-cart-card-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.rx-cart-name { font-weight: 600; font-size: var(--text-base); color: var(--text); flex: 1; min-width: 0; line-height: 1.35; }
.rx-cart-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
}
.rx-cart-x {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-mute);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.rx-cart-x:hover { background: rgba(239, 68, 68, 0.10); color: var(--danger); }
.rx-cart-meta { font-size: var(--text-xs); color: var(--text-mute); margin-bottom: 6px; line-height: 1.4; }
.rx-cart-card input,
.rx-cart-card textarea,
.rx-cart-card select {
  width: 100%;
  padding: 7px 10px;
  font-size: var(--text-base, 13px);
  font-family: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: var(--transition);
}
.rx-cart-card textarea { resize: vertical; line-height: 1.45; }
.rx-cart-card input:focus,
.rx-cart-card textarea:focus,
.rx-cart-card select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.rx-cart-fields { display: flex; gap: 6px; margin-top: 6px; }
.rx-cart-fields > * { flex: 1; min-width: 0; }
.rx-cart-label {
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-mute);
  margin: 8px 0 3px;
}

/* ── Aperçu « Rp/ » (reflète exactement la preuve PPE imprimée) ─────────── */
.rx-rp-preview {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.rx-rp-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); margin-bottom: 4px; }
.rx-rp-head { font-family: Calibri, system-ui, sans-serif; font-size: var(--text-base, 13px); font-weight: 600; white-space: pre-wrap; color: var(--text); }
.rx-rp-poso { font-family: Calibri, system-ui, sans-serif; font-size: var(--text-sm); margin-top: 2px; white-space: pre-wrap; color: var(--text-soft); }

/* ── Recherche catalogue magistral (475 formules officielles) ───────────── */
.rx-mag-search {
  margin-top: 6px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}
.rx-mag-search > input {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--text-base, 13px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
  margin-bottom: 6px;
}
.rx-mag-search > input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.rx-mag-count { font-size: var(--text-2xs); color: var(--text-mute); margin: 2px 2px 6px; }
.rx-mag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  font-size: var(--text-base, 13px);
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.rx-mag-item:hover { background: var(--bg-hover); }
.rx-mag-item-remb { font-size: var(--text-xs); font-weight: 700; color: var(--success); white-space: nowrap; }

/* ── Colonne gauche : schéma de médication (cases à cocher → panier) ─────── */
.rx-schema-head {
  display: flex;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-mute);
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
.rx-schema-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.rx-schema-row:hover { background: var(--bg-hover); }

/* ── Statut d'auto-save des documents (lettre / rapport) ──────────────────── */
.doc-save-status {
  font-size: var(--text-xs);
  color: var(--text-mute);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 500;
}
.doc-save-status.saved {
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
.doc-save-status.error {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

/* ── Vue scindée Édition / Aperçu A4 (lettres) ─────────────────────────────── */
.letter-mode-btns {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px 0;
}
.letter-mode-btns .btn-chip.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-text-on-soft);
  font-weight: 600;
}
.letter-split {
  display: grid;
  gap: 14px;
  align-items: start;
}
.letter-split.mode-split { grid-template-columns: 1fr 1fr; }
.letter-split.mode-edit  { grid-template-columns: 1fr; }
.letter-split.mode-edit .letter-split-preview { display: none; }
.letter-split.mode-preview { grid-template-columns: 1fr; }
.letter-split.mode-preview .letter-split-edit { display: none; }
.letter-split.mode-preview .letter-split-preview { max-width: 800px; margin: 0 auto; }

.letter-split-edit textarea.letter-edit {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--text-base, 13px);
  line-height: 1.55;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  width: 100%;
}
.letter-split-edit textarea.letter-edit:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Page A4 simulée — ratio 1:1.414 (210×297mm) en pixels approx */
.letter-a4-page {
  background: white;
  color: #1f2937;
  padding: 40px 50px;
  min-height: 560px;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: hidden;
}
.letter-a4-line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.6em;
}
/* Petite touche : barre de "papier" en haut comme une ligne d'en-tête */
.letter-a4-page::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  border-top: 0;
  margin-bottom: 0;
}

/* Responsive : mobile / tablette → forcer mode édition */
@media (max-width: 1100px) {
  .letter-split.mode-split { grid-template-columns: 1fr; }
  .letter-split.mode-split .letter-split-preview { max-width: 700px; margin: 0 auto; }
}

/* ── Menu Reformuler (dropdown inline) ─────────────────────────────────────── */
.rx-reformulate {
  position: relative;
  display: inline-block;
}
.rx-reformulate summary {
  cursor: pointer;
  list-style: none;
}
.rx-reformulate summary::-webkit-details-marker { display: none; }
.rx-reformulate-items {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 1px;
}
.rx-reformulate-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text);
}
.rx-reformulate-item:hover {
  background: var(--bg-hover);
}
.rx-reformulate-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Barre Mes modèles (templates lettres) ───────────────────────────────── */
.rx-templates-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.rx-templates-label {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: #4338ca;
  letter-spacing: 0.03em;
  margin-right: 4px;
}
.rx-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 10px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: var(--bg-elevated);
  color: #4338ca;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}
.rx-template-chip:hover { background: rgba(99, 102, 241, 0.10); }
.rx-template-chip-del {
  color: var(--text-mute);
  margin-left: 2px;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.rx-template-chip-del:hover { color: var(--danger); }

/* =====================================================================
   RAPPELS & NOTES DU PATIENT (modale openReminderModal / openPatientNoteModal)
   ===================================================================== */
.rmd-form { display: flex; flex-direction: column; gap: 14px; }

.rmd-existing { display: flex; flex-direction: column; gap: 6px; }
.rmd-existing-h {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.rmd-existing-loading,
.rmd-empty {
  padding: 14px;
  text-align: center;
  font-size: var(--text-base, 13px);
  color: var(--text-mute);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.rmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}
.rmd-item.is-done { opacity: 0.55; }
.rmd-item.is-done .rmd-item-title { text-decoration: line-through; }
.rmd-item.is-overdue { border-left-color: var(--danger); background: rgba(239, 68, 68, 0.04); }
.rmd-item-note { border-left-color: #7c3aed; }
.rmd-item-body { flex: 1; min-width: 0; }
.rmd-item-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.rmd-item-desc {
  font-size: var(--text-sm);
  color: var(--text-soft);
  margin-top: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.rmd-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--text-mute);
  margin-top: 4px;
}
.rmd-overdue-pill {
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger-text, #b91c1c);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.rmd-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.rmd-item-actions .btn-ghost { padding: 4px 8px; font-size: var(--text-sm); }

/* Modal élargie pour panels bio / rapports */
.modal-content.modal-xl {
  max-width: 980px;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
}
/* PLEINE PAGE — réservé au panneau Biologie (demande Dr 02/07 : « ça doit prendre
   toute la page pour plus de lisibilité »). S'ajoute PAR-DESSUS modal-xl (qui
   fournit la mise en page flex du .modal-body) et n'en surcharge que les
   dimensions. Défini après modal-xl → l'emporte à spécificité égale. */
.modal-content.modal-xl.modal-full {
  max-width: calc(100vw - 48px);
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
}
/* Réduit la marge haute par défaut de .modal (80px) pour occuper tout l'écran. */
#modal-form:has(.modal-content.modal-full) { padding: 24px; }

/* PLEINE PAGE « simple » (demande Dr 24/07 : le modal Médicaments doit prendre
   toute la page). Contrairement à modal-xl.modal-full, on NE force PAS le
   .modal-body en flex/overflow-hidden : le formulaire de prescription garde son
   défilement vertical natif (.modal-body { flex:1; overflow-y:auto }). */
.modal-content.modal-fullpage {
  max-width: calc(100vw - 32px);
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  /* 27/07 — la hauteur était bien imposée, mais SANS chaîne flex : le
     .modal-body ne recevait donc aucune hauteur exploitable et l'atelier
     d'ordonnance ne pouvait pas s'étirer, laissant du vide en bas pendant que
     le panier défilait dans sa propre petite boîte de 340 px. */
  display: flex;
  flex-direction: column;
}
#modal-form:has(.modal-content.modal-fullpage) { padding: 16px; }
/* Le corps prend toute la hauteur restante ; min-height:0 est indispensable
   pour qu'un enfant en overflow puisse défiler au lieu de pousser le parent. */
.modal-content.modal-fullpage .modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Les colonnes de l'atelier s'étirent sur toute la hauteur (align-items:start
   les gardait collées en haut), et la liste du panier n'est plus plafonnée à
   une valeur magique : elle occupe la place réellement disponible. */
.modal-content.modal-fullpage .rx-prescription-workspace {
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.modal-content.modal-fullpage .rx-prescription-workspace > * { min-height: 0; }
.modal-content.modal-fullpage .rx-cart-list {
  max-height: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* En dessous de 1080 px l'atelier repasse en UNE colonne : le panier redevient
   un bloc parmi d'autres dans un défilement vertical commun, donc il garde son
   plafond (sinon il pousserait tout le reste hors de l'écran). On restitue ici
   la règle d'origine, que la règle ci-dessus masquerait sans cela. */
@media (max-width: 1080px) {
  .modal-content.modal-fullpage .rx-cart-list {
    max-height: 420px;
    flex: 0 1 auto;
  }
}
.modal-content.modal-xl .modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Layout split-pane (liste gauche + contenu droit) */
.bio-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* ── Panneau « Résultats » (page complète, sans aller-retour) ─────────── */
.res-wrap { outline: none; }
.res-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 78vh;
  min-height: 0;
  overflow: hidden;
}
.res-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-sunk, var(--bg));
}
.res-filters-bar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 10px 4px; }
.res-search {
  margin: 4px 10px 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: var(--text-sm);
}
.res-left .bio-list { flex: 1; overflow-y: auto; width: auto; border-right: none; }
.res-month {
  position: sticky; top: 0; z-index: 1;
  padding: 4px 12px 3px;
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-sunk, var(--bg));
  border-bottom: 1px solid var(--border);
}
.res-item { box-shadow: inset 3px 0 0 transparent; }
.res-item:hover { box-shadow: inset 3px 0 0 var(--res-color); }
.res-item.active { box-shadow: inset 3px 0 0 var(--res-color); }
.res-item-top { display: flex; align-items: center; gap: 6px; }
.res-item-date { font-weight: 650; font-size: var(--text-sm); color: var(--text); }
.res-item-abn { font-size: var(--text-xs); color: var(--danger-hover, #dc2626); font-weight: 700; margin-left: auto; }
.res-item-emitter {
  font-size: var(--text-xs); color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-right { display: flex; flex-direction: column; min-height: 0; }
.res-right .bio-content { flex: 1; }
.res-content-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: var(--text-base, 13px);
}
.res-head-kind { font-weight: 700; }
.res-head-emitter { color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.res-head-nav { font-size: var(--text-xs, 11px); color: var(--text-mute); }

/* =====================================================================
   PAGE PLEIN ÉCRAN « RÉSULTATS » (rfp = results full page)
   Historique complet, triable, master-détail. Ouverte depuis la
   consultation par-dessus tout — fermer = revenir à la consultation.
   ===================================================================== */
.rfp-overlay {
  position: fixed; inset: 0; z-index: 2600;
  background: var(--bg, #f5f6f8);
  display: flex; flex-direction: column;
  animation: rfp-in .18s ease-out;
}
@keyframes rfp-in { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }

.rfp-header {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 22px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border);
}
.rfp-back {
  border: 1px solid var(--border); background: var(--surface, #fff);
  border-radius: 9px; padding: 7px 13px; font-size: var(--text-base); font-weight: 650;
  cursor: pointer; color: var(--text); white-space: nowrap;
}
.rfp-back:hover { background: var(--bg-hover, var(--bg)); }
.rfp-title h1 { margin: 0; font-size: var(--text-xl, 18px); font-weight: 800; letter-spacing: -.01em; }
.rfp-sub { font-size: var(--text-base, 13px); color: var(--text-mute); margin-top: 1px; }
.rfp-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 10px; }
.rfp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface, #fff);
  font-size: var(--text-base, 13px); font-weight: 650; color: var(--text-soft, var(--text-mute));
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.rfp-pill:hover { border-color: var(--pill-color); color: var(--text); }
.rfp-pill.active {
  background: var(--pill-color); border-color: var(--pill-color); color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--pill-color) 38%, transparent);
}
.rfp-pill-ic { font-size: var(--text-base); line-height: 1; }
.rfp-pill-n {
  font-weight: 800; font-size: var(--text-sm, 12px); padding: 0 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--pill-color) 14%, transparent); color: var(--pill-color);
}
.rfp-pill.active .rfp-pill-n { background: rgba(255, 255, 255, .25); color: #fff; }
.rfp-close {
  border: none; background: transparent; font-size: var(--text-xl, 18px); cursor: pointer;
  color: var(--text-mute); width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
}
.rfp-close:hover { background: var(--bg-hover, var(--bg)); color: var(--text); }

.rfp-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 22px; background: var(--surface, #fff);
  border-bottom: 1px solid var(--border);
}
.rfp-search {
  flex: 1; min-width: 220px; max-width: 480px;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg, #f5f6f8); font-size: var(--text-md, 14px); color: var(--text);
}
.rfp-search:focus { outline: none; border-color: var(--primary); background: var(--surface, #fff); }
.rfp-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rfp-sort-label { font-size: var(--text-sm); color: var(--text-mute); font-weight: 650; margin-right: 2px; }
.rfp-sort-btn {
  border: 1px solid var(--border); background: var(--surface, #fff);
  border-radius: 8px; padding: 6px 11px; font-size: var(--text-base, 13px); font-weight: 650;
  cursor: pointer; color: var(--text-soft, var(--text-mute)); white-space: nowrap;
}
.rfp-sort-btn:hover { border-color: var(--primary); color: var(--text); }
.rfp-sort-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.rfp-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(300px, 392px) minmax(0, 1fr);
}
.rfp-list {
  overflow-y: auto; border-right: 1px solid var(--border);
  padding: 14px; background: var(--bg, #f5f6f8);
  display: flex; flex-direction: column; gap: 8px;
}
.rfp-month {
  position: sticky; top: -14px; z-index: 1;
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-mute); padding: 9px 4px 4px; margin-top: 2px;
  background: var(--bg, #f5f6f8);
}
.rfp-month:first-child { margin-top: 0; }
.rfp-card {
  display: flex; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: box-shadow .12s, transform .12s, border-color .12s;
  /* Liste = flex colonne scrollable → sans ceci, les fiches au contenu long
     sont écrasées (flex-shrink) et leur texte rogné. */
  flex-shrink: 0;
}
.rfp-card:hover {
  border-color: color-mix(in srgb, var(--card-color) 50%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07); transform: translateY(-1px);
}
.rfp-card.active {
  border-color: var(--card-color);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--card-color) 24%, transparent);
}
.rfp-card-bar { width: 4px; background: var(--card-color); flex-shrink: 0; }
.rfp-card-body { padding: 10px 13px; min-width: 0; flex: 1; }
.rfp-card-row1 { display: flex; align-items: center; gap: 8px; }
.rfp-card-ic { font-size: var(--text-lg, 16px); line-height: 1; }
.rfp-card-date { font-weight: 750; font-size: var(--text-base); color: var(--text); }
.rfp-card-kind {
  font-size: var(--text-xs, 11px); color: var(--text-mute); background: var(--bg, #f5f6f8);
  border-radius: 6px; padding: 1px 7px; font-weight: 650;
}
.rfp-card-abn {
  margin-left: auto; font-size: var(--text-xs, 11px); font-weight: 800; color: #fff;
  background: var(--danger-hover, #dc2626); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.rfp-card-emitter {
  font-size: var(--text-base, 13px); font-weight: 650; color: var(--text); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rfp-card-prev {
  font-size: var(--text-sm, 12px); color: var(--text-mute); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rfp-list-empty, .rfp-detail-empty {
  padding: 30px 22px; text-align: center; color: var(--text-mute); font-size: var(--text-base);
}

.rfp-detail { display: flex; flex-direction: column; min-height: 0; background: var(--surface, #fff); }
.rfp-detail-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 24px; border-bottom: 1px solid var(--border);
}
.rfp-detail-kind { font-weight: 800; font-size: var(--text-md); }
.rfp-detail-date { font-size: var(--text-md); color: var(--text); }
.rfp-detail-emitter {
  color: var(--text-mute); font-size: var(--text-base); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 38%;
}
.rfp-detail-nav { font-size: var(--text-xs, 11px); color: var(--text-mute); }
.rfp-detail-content { flex: 1; overflow-y: auto; padding: 22px 26px; }
/* Bouton « ← Liste » : retour à la liste en mode plein écran mobile. Caché desktop. */
.rfp-detail-back {
  display: none; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--text-base); font-weight: 700; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 6px 4px; margin-right: 2px;
}

/* Repli vertical sur fenêtre étroite (split master-détail trop serré). */
@media (max-width: 860px) {
  .rfp-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
  .rfp-list { border-right: none; border-bottom: 1px solid var(--border); }
  .rfp-stats { width: 100%; margin-left: 0; }
}

/* Téléphone : navigation à UN SEUL volet. Le split 42/58 % restait illisible sur
   un écran de téléphone → on affiche la LISTE en plein écran, puis au tap d'un
   résultat le DOCUMENT en plein écran (bouton « ← Liste » pour revenir). Le desktop
   n'est jamais touché (tout est sous @media ≤ 768px + la classe rfp-detail-open). */
@media (max-width: 768px) {
  .rfp-body { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .rfp-list { border-right: none; border-bottom: none; padding: 12px; }
  .rfp-detail { display: none; }
  .rfp-overlay.rfp-detail-open .rfp-list { display: none; }
  .rfp-overlay.rfp-detail-open .rfp-detail { display: flex; }
  /* En mode document, on masque la barre de recherche/tri (place à la lecture). */
  .rfp-overlay.rfp-detail-open .rfp-toolbar { display: none; }
  .rfp-detail-back { display: inline-flex; }
  .rfp-detail-nav { display: none; }
  .rfp-detail-head { padding: 10px 14px; gap: 8px; }
  .rfp-detail-emitter { max-width: 100%; }
  .rfp-detail-content { padding: 12px 14px; font-size: var(--text-lg, 16px); line-height: 1.6; }
  /* Le document (PDF/image) remplit l'écran pour une lecture confortable. */
  .rfp-detail-content iframe { height: calc(100dvh - 140px) !important; }
  .rfp-detail-content img { max-height: none !important; }
  /* En-tête + filtres compacts, plein largeur, scroll horizontal si nécessaire. */
  .rfp-header { flex-wrap: wrap; padding: 10px 12px; }
  .rfp-title h1 { font-size: var(--text-lg); }
  .rfp-stats { width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .rfp-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .rfp-sort { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .rfp-search { font-size: var(--text-lg); }
  .rfp-card-date { font-size: var(--text-md); }
  .rfp-card-emitter, .rfp-card-prev { font-size: var(--text-base); }
}

/* --- Espace patient (côté médecin) : gestion des résultats partagés --------- */
.pps-summary { display: flex; gap: 8px; align-items: center; margin-left: 10px; }
.pps-badge {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: 750; color: #fff; background: var(--primary, #2563eb);
}
.pps-badge-mute { background: var(--bg, #eef1f5); color: var(--text-mute); }
.pps-note {
  padding: 12px 22px; font-size: var(--text-base); color: var(--text-soft, var(--text-mute));
  background: var(--surface, #fff); border-bottom: 1px solid var(--border);
}
.pps-note b { color: var(--text); }
/* Bandeau d'avancement « mise au propre IA en cours ». */
.pps-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px; font-size: var(--text-base); font-weight: 600;
  color: var(--warn-text); background: var(--warn-bg); border-bottom: 1px solid #f59e0b44;
}
.pps-list {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 820px; margin: 0 auto;
}
.pps-card { align-items: center; }
.pps-card .rfp-card-body { padding: 11px 14px; }
.pps-card.is-hidden { opacity: .62; background: var(--bg, #f5f6f8); }
.pps-card.is-hidden:hover { opacity: 1; }
.pps-hidden-tag {
  margin-left: auto; font-size: var(--text-xs, 11px); font-weight: 750; color: var(--text-mute);
  background: var(--bg, #eef1f5); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
/* En attente de mise au propre par l'IA (pas encore visible). */
.pps-tag-wait { color: var(--warn-text); background: var(--warn-bg); border-color: #f59e0b55; }
/* Affichage forcé par le médecin avant structuration IA. */
.pps-tag-forced { color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent); border-color: color-mix(in srgb, var(--primary, #2563eb) 35%, var(--border)); }
.pps-toggle {
  flex-shrink: 0; margin: 0 12px; white-space: nowrap; cursor: pointer;
  padding: 7px 13px; border-radius: 9px; font-size: var(--text-base, 13px); font-weight: 700;
  border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-soft, var(--text-mute));
  transition: background .12s, color .12s, border-color .12s;
}
.pps-toggle:hover { border-color: var(--primary, #2563eb); color: var(--text); }
.pps-toggle.on {
  background: color-mix(in srgb, var(--ok, #16a34a) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok, #16a34a) 45%, var(--border));
  color: var(--ok, #16a34a);
}
.pps-toggle:disabled { opacity: .55; cursor: default; }

/* Split 2 colonnes : graphiques (gauche) | rapports liste+protocole (droite) */
.bio-2col {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  flex: 1;
  min-height: 0;
  height: 74vh;
  overflow: hidden;
}
.bio-graphs-col {
  overflow-y: auto;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg-sunk, var(--bg));
}
.bio-split {
  display: grid;
  grid-template-columns: 230px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bio-list {
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.bio-list-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.bio-list-item:hover { background: var(--bg-hover); }
.bio-list-item.active { background: var(--primary-soft); border-left: 3px solid var(--primary); }
.bio-content {
  overflow-y: auto;
  background: var(--bg-subtle);
}
/* Biologie (demande Dr 02/07) : DATES à gauche, rapport le plus récent au CENTRE
   (auto-sélectionné), évolution des analytes à DROITE. Flex → si les graphes sont
   masqués (aucune série), la colonne disparaît sans laisser de colonne vide. */
.bio-3col {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bio-3col > .bio-list { flex: 0 0 210px; }
.bio-3col > .bio-content { flex: 1 1 auto; min-width: 0; }
.bio-3col > .bio-graphs-col {
  flex: 0 0 340px;
  border-right: none;
  border-left: 1px solid var(--border);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   Toasts
   ===================================================================== */
.toasts {
  position: fixed;
  bottom: 20px; right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-md, 14px);
  pointer-events: auto;
  animation: toastIn 200ms ease-out;
  max-width: 380px;
}
.toast-message { min-width: 0; flex: 1; line-height: 1.4; }
.toast-close {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 20px;
  line-height: 18px;
  padding: 0 0 0 6px;
  cursor: pointer;
}
.toast-close:hover, .toast-close:focus-visible { color: var(--text); }
.toast-sticky { min-width: 280px; }
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.info { border-left: 3px solid var(--info); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* =====================================================================
   Workspace clinique (dossier patient + consultation)
   ===================================================================== */
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.meta-chip.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.25);
}
/* Contrairement aux chips warning/success ci-dessous, danger n'avait AUCUN
   override sombre — --danger (#EF4444, saturé) restait tel quel sur fond
   translucide, alors que --danger-text (#FCA5A5, adouci) existe déjà pour
   exactement ce cas (texte coloré sur fond teinté en sombre), utilisé par
   .ds-badge--danger. Repéré 08/07 (audit design system). */
[data-theme='dark'] .meta-chip.danger { color: var(--danger-text); background: rgba(239, 68, 68, 0.16); }
.meta-chip.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme='dark'] .meta-chip.warning { color: var(--amber-text, #fbbf24); }
.meta-chip.success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme='dark'] .meta-chip.success { color: #34d399; }

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.action-bar-primary { gap: var(--space-2); }
.action-bar-tools { gap: 6px; }
.action-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}

/* ----- Dossier patient ----- */
.patient-detail {
  display: grid;
  grid-template-columns: var(--clinical-aside-w) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.patient-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  max-height: calc(100vh - var(--topbar-h) - 48px);
  overflow-y: auto;
  padding-bottom: var(--space-4);
}
.patient-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* C1.1/C1.11 (12/07) : bandeau supérieur du dossier SUPPRIMÉ — .patient-main-chips
   sert désormais dans la carte d'actions de la barre latérale gauche (patients.js
   sideActionsCard). Les anciennes règles .patient-main-header/-title/-sub/-ava
   (bandeau disparu) ont été retirées ici et plus bas dans ce fichier. */
.patient-main-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.patient-header-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
/* Titre fonctionnel de la carte coordonnées (09/07) — même registre que les
   en-têtes des cartes sœurs de la colonne (.patient-side .card-h h2). */
.patient-card-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.patient-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.patient-name { font-size: var(--text-xl, 18px); font-weight: 700; letter-spacing: -0.02em; }
.patient-meta { font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 2px; }
.patient-meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: var(--text-base, 13px);
}
.patient-meta-list .row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: baseline;
}
.patient-meta-list .key { color: var(--text-mute); }

/* ─── Sélecteur d'emplacement de calcul IA (Mac ⟷ PC distant) ─────────────── */
.compute-switcher-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(2px);
}
.compute-switcher {
  width: 100%; max-width: 480px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  padding: 22px;
}
.compute-switcher .cs-loading { padding: 30px; text-align: center; color: var(--text-mute); }
.compute-switcher .cs-title { font-size: var(--text-xl, 18px); font-weight: 700; letter-spacing: -0.01em; }
.compute-switcher .cs-sub { font-size: var(--text-base, 13px); color: var(--text-soft); margin: 4px 0 16px; line-height: 1.5; }
.compute-switcher .cs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compute-switcher .cs-card {
  border: 2px solid var(--border);
  border-radius: 12px; padding: 12px; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
  background: var(--surface-2, #f8fafc);
}
.compute-switcher .cs-card:hover { transform: translateY(-1px); }
.compute-switcher .cs-card-sel {
  border-color: var(--primary, #2563eb);
  background: color-mix(in srgb, var(--primary, #2563eb) 8%, transparent);
}
.compute-switcher .cs-card-top { display: flex; align-items: flex-start; gap: 8px; }
.compute-switcher .cs-card-icon { font-size: var(--text-2xl); line-height: 1; }
.compute-switcher .cs-card-name { font-weight: 700; font-size: var(--text-md, 14px); }
.compute-switcher .cs-card-spec { font-size: var(--text-xs); color: var(--text-mute); margin-top: 2px; line-height: 1.4; }
.compute-switcher .cs-check { margin-left: auto; color: var(--primary, #2563eb); font-weight: 800; opacity: 0; transition: opacity var(--transition-fast); }
.compute-switcher .cs-card-sel .cs-check { opacity: 1; }
.compute-switcher .cs-card-status { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--text-sm, 12px); color: var(--text-soft); }
.compute-switcher .cs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.compute-switcher .cs-dot-ok { background: var(--success, #16a34a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 22%, transparent); }
.compute-switcher .cs-dot-err { background: var(--danger, #dc2626); }
.compute-switcher .cs-dot-wait { background: var(--text-mute, #94a3b8); }
.compute-switcher .cs-remote-cfg { margin-top: 16px; }
.compute-switcher .cs-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.compute-switcher .cs-input-row { display: flex; gap: 8px; margin-top: 6px; }
.compute-switcher .cs-input {
  flex: 1; padding: 8px 10px; font-size: var(--text-base);
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg, #fff); color: var(--text-primary);
}
.compute-switcher .cs-test-result { font-size: var(--text-sm); margin-top: 8px; min-height: 16px; line-height: 1.4; }
.compute-switcher .cs-rule {
  margin-top: 16px; padding: 12px; border-radius: 10px;
  background: var(--surface-2, #f1f5f9); font-size: var(--text-sm);
}
.compute-switcher .cs-rule-title { font-weight: 700; margin-bottom: 6px; font-size: var(--text-sm); }
.compute-switcher .cs-rule-line { color: var(--text-soft); margin-top: 3px; }
.compute-switcher .cs-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cs-progress-bar { height: 10px; border-radius: 6px; background: var(--surface-2, #eef1f5); overflow: hidden; }
.cs-progress-fill { height: 100%; background: var(--primary, #2563eb); transition: width 400ms ease; }
.cs-atelier-link { display: inline-block; margin-top: 10px; font-size: var(--text-base, 13px); font-weight: 600; color: var(--primary, #2563eb); text-decoration: none; }
.cs-atelier-link:hover { text-decoration: underline; }

/* ─── Atelier IA distant (tableau de bord) ────────────────────────────────── */
.atelier { max-width: 980px; }
.atelier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.atelier-title { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.atelier-sub { font-size: var(--text-base); color: var(--text-soft); margin-top: 4px; }
.atelier-pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-base, 13px); font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.atelier-pill.on { background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent); color: var(--success, #16a34a); }
.atelier-pill.off { background: var(--surface-2, #f1f5f9); color: var(--text-mute); }
.atelier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.atelier-dot.on { background: var(--success, #16a34a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success,#16a34a) 22%, transparent); }
.atelier-dot.off { background: var(--text-mute, #94a3b8); }
.atelier-dot.err { background: var(--danger, #dc2626); }
.atelier-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.atelier-switch { position: relative; width: 56px; height: 30px; border-radius: 999px; border: none; cursor: pointer; transition: background 160ms ease; flex-shrink: 0; }
.atelier-switch.off { background: var(--surface-3, #cbd5e1); }
.atelier-switch.on { background: var(--success, #16a34a); }
.atelier-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 160ms ease; }
.atelier-switch.on .atelier-knob { transform: translateX(26px); }
.atelier-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.atelier-node { padding: 14px 16px; }
.atelier-node-h { font-weight: 700; font-size: var(--text-md, 14px); margin-bottom: 8px; }
.atelier-node-line { font-size: var(--text-base); margin-top: 3px; }
.atelier-node-mut { font-size: var(--text-sm, 12px); color: var(--text-mute); margin-top: 6px; }
.atelier-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.atelier-kpi { background: var(--bg-elevated, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.atelier-kpi-val { font-size: var(--text-2xl, 22px); font-weight: 800; letter-spacing: -0.02em; }
.atelier-kpi-lbl { font-size: var(--text-xs); color: var(--text-mute); margin-top: 2px; }
.atelier-perf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.atelier-feed { display: flex; flex-direction: column; }
.atelier-feed-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.atelier-feed-row:last-child { border-bottom: none; }
.atelier-kind { display: inline-block; font-size: var(--text-xs, 11px); font-weight: 600; color: var(--text-soft); background: var(--surface-2, #f1f5f9); border-radius: 5px; padding: 1px 6px; margin-right: 7px; vertical-align: middle; }

/* ─── Centre IA & GPU ──────────────────────────────────────────────────────── */
.gpu-center { max-width: 1020px; }
.gpu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.gpu-h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.gpu-sub { font-size: var(--text-base); color: var(--text-soft); margin-top: 4px; }
.gpu-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.gpu-dot.on { background: var(--success, #16a34a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success,#16a34a) 22%, transparent); }
.gpu-dot.off { background: var(--text-mute, #94a3b8); }
.gpu-dot.err { background: var(--danger, #dc2626); }
.gpu-pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.gpu-pill.on { background: color-mix(in srgb, var(--success,#16a34a) 14%, transparent); color: var(--success, #16a34a); }
.gpu-pill.off { background: var(--surface-2, #f1f5f9); color: var(--text-mute); }
.gpu-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.gpu-node { background: var(--bg-elevated, #fff); border: 1px solid var(--border); border-left: 3px solid var(--text-mute, #94a3b8); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-sm); }
.gpu-node.on { border-left-color: var(--success, #16a34a); }
.gpu-node.off { opacity: 0.85; }
.gpu-node-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gpu-node-icon { font-size: var(--text-2xl, 22px); line-height: 1; }
.gpu-node-title { font-weight: 700; font-size: var(--text-lg, 16px); }
.gpu-node-spec { font-size: var(--text-sm, 12px); color: var(--text-mute); margin-top: 1px; }
.gpu-state { display: flex; align-items: center; gap: 9px; font-size: var(--text-base); font-weight: 700; padding: 9px 13px; border-radius: 9px; margin: 4px 0 12px; letter-spacing: 0.01em; }
.gpu-state-on { background: color-mix(in srgb, var(--success,#16a34a) 13%, transparent); color: var(--success, #16a34a); }
.gpu-state-busy { background: color-mix(in srgb, var(--primary,#2563eb) 13%, transparent); color: var(--primary, #2563eb); }
.gpu-state-off { background: color-mix(in srgb, var(--danger,#dc2626) 11%, transparent); color: var(--danger, #dc2626); }
.gpu-metric { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.gpu-metric-lbl { font-size: var(--text-sm); color: var(--text-soft); width: 78px; flex-shrink: 0; }
.gpu-gauge { position: relative; flex: 1; height: 18px; background: var(--surface-2, #eef1f5); border-radius: 9px; overflow: hidden; }
.gpu-gauge-fill { height: 100%; border-radius: 9px; transition: width 500ms ease; min-width: 2px; }
.gpu-gauge-lbl { position: absolute; right: 8px; top: 0; line-height: 18px; font-size: var(--text-xs); font-weight: 700; color: var(--text-primary); }
.gpu-line { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-base, 13px); margin: 6px 0; flex-wrap: wrap; }
.gpu-line-k { color: var(--text-mute); width: 110px; flex-shrink: 0; }
.gpu-chip { display: inline-block; font-size: var(--text-xs); font-weight: 600; background: color-mix(in srgb, var(--primary,#2563eb) 10%, transparent); color: var(--primary, #2563eb); border-radius: 6px; padding: 2px 8px; margin: 0 4px 4px 0; }
.gpu-mut { color: var(--text-mute); }
.gpu-actions-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.gpu-sel { flex: 1; min-width: 150px; padding: 6px 8px; font-size: var(--text-sm); border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff); color: var(--text-primary); }
.gpu-note { font-size: var(--text-sm); color: var(--text-soft); background: var(--surface-2, #f1f5f9); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
.gpu-cards-title { font-weight: 700; font-size: var(--text-base); margin: 4px 0 8px; }
.gpu-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.gpu-card { background: var(--bg-elevated, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-sm); }
.gpu-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--text-md, 14px); }
.gpu-card-foot { display: flex; gap: 16px; font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 8px; font-weight: 600; }
@media (max-width: 820px) { .gpu-cards { grid-template-columns: 1fr; } }
.gpu-live { padding: 14px 16px; margin-bottom: 14px; }
.gpu-live-title { font-weight: 700; font-size: var(--text-base); margin-bottom: 8px; }
.gpu-live-node { font-size: var(--text-md, 14px); padding: 7px 10px; border-radius: 8px; margin: 4px 0; background: var(--surface-2, #f1f5f9); }
.gpu-live-node.working { background: color-mix(in srgb, var(--primary,#2563eb) 9%, transparent); }
.gpu-spin { display: inline-block; animation: gpu-spin 1.4s linear infinite; }
@keyframes gpu-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.gpu-live-perf { font-size: var(--text-sm); color: var(--text-mute); margin-top: 8px; }
.gpu-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.gpu-seg-row { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.gpu-seg { padding: 7px 14px; font-size: var(--text-base, 13px); font-weight: 600; border: none; background: var(--bg-elevated, #fff); color: var(--text-soft); cursor: pointer; border-right: 1px solid var(--border); }
.gpu-seg:last-child { border-right: none; }
.gpu-seg:hover { background: var(--surface-2, #f1f5f9); }
.gpu-seg.on { background: var(--primary, #2563eb); color: #fff; }
.gpu-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.gpu-kpi { background: var(--bg-elevated, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.gpu-kpi-v { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.gpu-kpi-l { font-size: var(--text-xs, 11px); color: var(--text-mute); margin-top: 2px; }
.gpu-table th, .gpu-table td { font-size: var(--text-base, 13px); }
@media (max-width: 820px) { .gpu-nodes { grid-template-columns: 1fr; } .gpu-kpis { grid-template-columns: repeat(3, 1fr); } }

/* ─── IA médicale — hub consolidé (05/07) : même langage visuel que le Centre IA & GPU ── */
.ai-hub-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); max-width: 960px; }
.ai-hub-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.ai-hub-panel-title { display: flex; align-items: center; gap: 9px; font-size: var(--text-lg); font-weight: 700; }
.ai-hub-panel-icon { font-size: var(--text-2xl, 22px); line-height: 1; }
.ai-hub-panel-sub { font-size: var(--text-sm); color: var(--text-soft); margin: 4px 0 12px; }
.ai-hub-panel-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ai-hub-kebab-wrap { position: relative; }
.ai-hub-kebab { padding: 5px 9px; font-size: var(--text-lg, 16px); line-height: 1; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); color: var(--text-soft); cursor: pointer; }
.ai-hub-kebab:hover { background: var(--bg-hover); color: var(--text-primary); }
.ai-hub-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; display: none; flex-direction: column; gap: 2px; }
.ai-hub-menu.open { display: flex; }
.ai-hub-menu button { text-align: left; padding: 7px 10px; font-size: var(--text-base, 13px); font-weight: 500; background: transparent; border: none; border-radius: 7px; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.ai-hub-menu button:hover { background: var(--bg-hover); }

/* Vue d'ensemble : cartes de statut (réutilise le patron .gpu-node) */
.ai-hub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ai-hub-card { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--text-mute); border-radius: 14px; padding: 15px 17px; box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.ai-hub-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.ai-hub-card:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.ai-hub-card.status-ready { border-left-color: var(--success); }
.ai-hub-card.status-busy { border-left-color: var(--primary); }
.ai-hub-card.status-stale { border-left-color: var(--warn-text); }
.ai-hub-card.status-error { border-left-color: var(--danger); }
.ai-hub-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.ai-hub-card-icon { font-size: var(--text-xl, 18px); line-height: 1; }
.ai-hub-card-title { font-weight: 700; font-size: var(--text-md); }
.ai-hub-card-desc { font-size: var(--text-sm); color: var(--text-soft); margin: 2px 0 0; line-height: 1.4; }
.ai-hub-card-meta { font-size: var(--text-xs); color: var(--text-mute); margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 768px) { .ai-hub-cards { grid-template-columns: 1fr; } }

/* ─── Dossier complet — rendu PREMIUM du document déterministe (06/07) ────────
   Le markdown brut est restructuré (enhanceDossierDoc) en sections-cartes à
   accent coloré par domaine + sous-cartes (bilans/rapports) + valeurs anormales
   surlignées. Le document (markdown) reste la source ; ceci n'est que sa peau. */
.dossier-doc { font-size: var(--text-md, 14px); line-height: 1.6; color: var(--text-primary); }
.dossier-doc > h1 { font-size: var(--text-xl, 18px); font-weight: 800; letter-spacing: -0.01em; margin: 2px 0 16px; color: var(--text-primary); }
.dc-sec { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 14px; background: var(--bg-elevated); box-shadow: var(--shadow-sm); overflow: hidden; }
.dc-sec-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-weight: 700; font-size: var(--text-md); border-left: 3px solid var(--text-mute); }
.dc-sec-ic { font-size: var(--text-xl, 18px); line-height: 1; flex-shrink: 0; }
.dc-sec-ti { color: var(--text-primary); }
.dc-sec-body { padding: 10px 14px 6px; }
.dc-sec-body > p { margin: 4px 0 8px; color: var(--text-soft); font-size: var(--text-base, 13px); }
.dc-sec-body ul { list-style: none; margin: 4px 0 8px; padding: 0; }
.dc-sec-body li { padding: 5px 11px; font-size: var(--text-base); border-bottom: 1px solid var(--border); }
.dc-sec-body li:last-child { border-bottom: none; }
.dc-sec-body li.dc-abnormal { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger-text); border-radius: 6px; font-weight: 600; border-bottom: none; margin: 1px 0; }
.dc-block { border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; overflow: hidden; }
.dc-block:last-child { margin-bottom: 2px; }
.dc-block-head { font-weight: 700; font-size: var(--text-base, 13px); padding: 7px 12px; background: var(--bg-hover); color: var(--text-soft); }
.dc-block .dc-body { padding: 8px 12px; }
.dc-block .dc-body p { margin: 0 0 6px; font-size: var(--text-base, 13px); line-height: 1.55; white-space: pre-wrap; }
.dc-block .dc-body p:last-child { margin-bottom: 0; }
.dc-block ul { list-style: none; margin: 6px 0; padding: 0; }
.dc-block li { padding: 4px 12px; font-size: var(--text-base, 13px); border-bottom: 1px solid var(--border); }
.dc-block li:last-child { border-bottom: none; }
.dc-block li.dc-abnormal { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger-text); font-weight: 600; }
/* Accent coloré par domaine (bordure + fond de l'en-tête de section) */
.dc-sec.dc-red    .dc-sec-head { border-left-color: var(--danger);    background: color-mix(in srgb, var(--danger) 8%, transparent); }
.dc-sec.dc-blue   .dc-sec-head { border-left-color: var(--primary);   background: color-mix(in srgb, var(--primary) 8%, transparent); }
.dc-sec.dc-teal   .dc-sec-head { border-left-color: #0d9488;          background: color-mix(in srgb, #14b8a6 12%, transparent); }
.dc-sec.dc-purple .dc-sec-head { border-left-color: #7c3aed;          background: color-mix(in srgb, #8b5cf6 12%, transparent); }
.dc-sec.dc-amber  .dc-sec-head { border-left-color: var(--amber-text); background: color-mix(in srgb, var(--amber-border) 13%, transparent); }
.dc-sec.dc-green  .dc-sec-head { border-left-color: var(--success-strong);          background: color-mix(in srgb, #22c55e 11%, transparent); }
.dc-sec.dc-gray   .dc-sec-head { border-left-color: var(--text-mute); background: var(--bg-hover); }
@media (max-width: 768px) { .ai-hub-cards { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .atelier-kpis { grid-template-columns: repeat(2, 1fr); } .atelier-split { grid-template-columns: 1fr; } }
/* Téléphone : Centre IA & GPU ne doit plus déborder ni imposer de scroll horizontal. */
@media (max-width: 560px) {
  .gpu-center { max-width: 100%; }
  .gpu-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gpu-kpi-v { font-size: var(--text-xl); }
  .gpu-line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .gpu-line-k { width: auto; }
  .gpu-metric-lbl { width: 62px; }
  /* Le formulaire fournisseur cloud : les champs (largeurs fixes en inline)
     passent pleine largeur et s'empilent au lieu de déborder. */
  .gpu-prov-edit { max-width: none !important; width: 100%; }
  .gpu-live-node { flex-direction: column; align-items: flex-start !important; }
}
/* Carte d'infos cliquable → ouvre la modale d'édition (cf. patients.js). */
.patient-meta-list--editable {
  cursor: pointer;
  margin-left: calc(-1 * var(--space-2));
  margin-right: calc(-1 * var(--space-2));
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.patient-meta-list--editable:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.035));
}
.patient-meta-list--editable:focus-visible {
  outline: none;
  background: var(--surface-2, rgba(0, 0, 0, 0.035));
  box-shadow: 0 0 0 2px var(--primary, #1d6fb8);
}
.patient-meta-list__edit-hint {
  margin-top: 2px;
  font-size: var(--text-sm, 12px);
  color: var(--text-mute);
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
}
.patient-meta-list--editable:hover .patient-meta-list__edit-hint,
.patient-meta-list--editable:focus-visible .patient-meta-list__edit-hint {
  opacity: 1;
}
.patient-side .card { box-shadow: var(--shadow-sm); }
.patient-side .card-h h2 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
/* C1.7 (12/07) : sous-sections de la carte « eSanté » (Dossier/RSW/Échanges eHealth
   regroupés — 1 en-tête de carte au lieu de 3). */
.patient-side-sub + .patient-side-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.patient-side-sub-h {
  display: flex; align-items: center; gap: 6px; justify-content: space-between;
  font-size: var(--text-sm, 12px); font-weight: 600; color: var(--text-soft);
  margin-bottom: 6px;
}

/* Onglets groupés */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-padding-inline: 8px;
}
.tabs-grouped {
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
  overflow: visible;
  border-bottom: none;
}
.tabs-grouped-scroll {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
  overflow-x: auto;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-padding-inline: 16px;
  /* C1.10 (12/07) : 17 onglets possibles, scroll horizontal NON signalé jusqu'ici
     (le lecteur ne devine pas qu'il y a plus à droite). Fondu permanent au bord
     droit — indice visuel « ça continue », dégrade proprement si non supporté. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.tabs-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Séparateur discret entre groupes (Synthèse | Clinique | Résultats | Suivi) —
   le DOM ne porte pas de libellé de groupe, la ponctuation visuelle suffit. */
.tabs-group + .tabs-group::before {
  content: '';
  flex: none;
  align-self: center;
  width: 1px;
  height: 16px;
  border-radius: 1px;
  background: var(--border-strong);
  opacity: 0.6;
}
.tabs-group-items {
  display: flex;
  gap: 3px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: calc(var(--radius) + 2px);
}
.tab {
  padding: 8px 13px;
  font-size: var(--text-base, 13px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-soft);
  border: none;
  border-radius: calc(var(--radius-sm) + 2px);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Onglets du dossier patient en ICÔNES seules (19/07) : compact, l'emoji plus
   grand pour rester reconnaissable ; le nom reste en infobulle (title). */
.tab.tab-icon { padding: 7px 10px; display: inline-flex; align-items: center; }
.tab.tab-icon .tab-ico { font-size: 17px; line-height: 1; }
.tab:hover { color: var(--text); background: var(--bg-elevated); }
.tab.active {
  color: var(--primary);
  background: var(--bg-elevated);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Onglets CLÉS du dossier (Synthèse, Résultats) — toujours mis en avant (fond
   teinté), et pleins quand actifs. Demandé par Dr Nanni le 2026-06-20. */
.tab.tab-key { color: var(--primary-text-on-soft, var(--primary)); background: var(--primary-soft, #eff6ff); font-weight: 600; }
.tab.tab-key:hover { color: var(--primary-text-on-soft, var(--primary)); background: var(--primary-soft, #e4eefe); filter: brightness(0.97); }
.tab.tab-key.active { color: var(--text-on-primary, #fff); background: var(--primary); box-shadow: var(--shadow-sm); filter: none; }
.tab.tab-key:focus-visible,
.tab.active:focus-visible { box-shadow: var(--focus-ring); }
#tab-content {
  min-height: 200px;
}
.calendar-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}

.timeline-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  display: flex; align-items: center; justify-content: center;
}
.timeline-dot svg { width: 16px; height: 16px; }
.timeline-content { flex: 1; min-width: 0; }
.timeline-content .title { font-weight: 600; font-size: var(--text-md); }
.timeline-content .date { font-size: var(--text-sm); color: var(--text-mute); margin-top: 2px; }
.timeline-content .desc { font-size: var(--text-base); color: var(--text-soft); margin-top: 6px; }
/* Ligne de résumé clinique d'une consultation dans la liste « Activité récente ». */
.timeline-snip {
  font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.timeline-snip:empty { display: none; }
/* Résumé clinique (SOAP) dans le panneau « Aperçu ». */
.consult-summary { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.consult-summary .cs-label {
  font-size: var(--text-xs, 11px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-mute); margin-bottom: 1px;
}
.consult-summary .cs-text {
  font-size: var(--text-base); color: var(--text); line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Activité récente + aperçu côte à côte */
.activity-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}
.activity-split .timeline-item {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.activity-split .timeline-item:hover { background: var(--bg-soft, rgba(0,0,0,0.03)); }
.activity-split .timeline-item.selected {
  background: var(--primary-soft);
}
.activity-split .timeline-item.selected .timeline-content .title { color: var(--primary-text-on-soft); }
.activity-preview { position: sticky; top: 18px; }
.preview-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: var(--text-base);
}
.preview-kv-label { color: var(--text-mute); }
.preview-kv-value { font-weight: 600; text-align: right; }
@media (max-width: 1100px) {
  .activity-split { grid-template-columns: 1fr; }
  .activity-preview { position: static; }
}

/* Rapports de laboratoire */
.lab-report {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
/* Vue « Bilans » maître-détail (type Helena/Synlab) : liste datée à gauche, détail à droite. */
.lab-master-detail { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.lab-md-list { display: flex; flex-direction: column; gap: 4px; max-height: 72vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--bg-elevated, #fff); }
.lab-md-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.lab-md-item:hover { background: var(--surface-2, #f1f5f9); }
.lab-md-item.active { background: var(--primary-soft, #eff6ff); border-color: var(--primary, #2563eb); }
.lab-md-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lab-md-abn { font-size: var(--text-xs); font-weight: 700; color: var(--danger-text, #b91c1c); margin-left: auto; }
.lab-md-detail { min-width: 0; }
@media (max-width: 720px) { .lab-master-detail { grid-template-columns: 1fr; } .lab-md-list { max-height: none; } }
.lab-report-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-soft, rgba(0,0,0,0.025));
  border-bottom: 1px solid var(--border);
}
.lab-report-title { font-weight: 600; font-size: var(--text-lg, 16px); letter-spacing: -0.01em; }
.lab-report-meta { font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 3px; font-weight: 500; }
.lab-report-lab { font-size: var(--text-xs); color: var(--text-mute); white-space: nowrap; }
.lab-badge-validate {
  font-size: var(--text-sm, 12px); font-weight: 600; white-space: nowrap; flex-shrink: 0;
  color: var(--warn-text); background: var(--warn-bg); border: 1px solid #f59e0b55;
  border-radius: var(--radius-full); padding: 3px 10px;
}
.lab-table { margin: 0; }

/* Frise chronologique des résultats (cockpit) — groupée par jour */
.res-frise-event { transition: background-color var(--transition); }
.res-frise-event:hover { background: var(--bg-hover); }
.res-frise-event:focus-visible { outline: none; background: var(--bg-hover); box-shadow: var(--focus-ring); }
/* B3 (plan-1-affichage-resultats-perfection) : un résultat jamais marqué « Vu »
   se distingue au premier coup d'œil (même orange que la pastille filtre). */
.res-frise-event--unseen { background: rgba(249, 115, 22, 0.05); }

/* Résultats du dossier : cockpit maître-détail permanent. La liste reste
   dense pour parcourir l'historique ; le document occupe tout l'espace utile
   sans modale ni carte imbriquée. */
.results-toolbar {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}
.results-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.results-tab {
  appearance: none; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-soft); padding: 8px 11px;
  font: inherit; font-size: var(--text-base); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.results-tab:hover { color: var(--text); background: var(--bg-hover); }
.results-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.results-tools { display: flex; align-items: center; gap: 10px; }
.results-search {
  min-width: 0; flex: 1; height: 36px; padding: 0 11px; color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: var(--text-base);
}
.results-search:focus { outline: 0; border-color: var(--primary); box-shadow: var(--focus-ring); }
.results-unseen {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft);
  font-size: var(--text-sm); white-space: nowrap; cursor: pointer;
}
/* ── Lentille « Épisodes » (B9) : bloc dépliable au-dessus de la liste plate ── */
.results-episodes { margin-bottom: 12px; }
.results-episodes:empty { display: none; }
.results-episodes-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated); color: var(--text); font: inherit; cursor: pointer;
}
.results-episodes-toggle:hover { background: var(--bg-hover); }
.results-episodes-toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.results-episodes-chevron { width: 12px; color: var(--text-mute); font-size: var(--text-xs); }
.results-episodes-title { font-weight: 650; font-size: var(--text-base); }
.results-episodes-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, var(--bg-elevated));
  color: var(--primary); font-size: var(--text-xs); font-weight: 700;
}
.results-episodes-hint { color: var(--text-mute); font-size: var(--text-sm); }
.results-episodes-body {
  margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 58%, var(--bg-elevated));
}
.results-episode + .results-episode { border-top: 1px solid var(--border); }
.results-episode-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.results-episode-head:hover { background: var(--bg-hover); }
.results-episode-head:focus-visible { outline: 0; box-shadow: inset var(--focus-ring); }
.results-episode-head.open { background: color-mix(in srgb, var(--primary) 6%, var(--bg-elevated)); }
.results-episode-chevron { width: 12px; color: var(--text-mute); font-size: var(--text-xs); }
.results-episode-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 650; font-size: var(--text-base);
}
.results-episode-dates { color: var(--text-mute); font-size: var(--text-xs); white-space: nowrap; }
.results-episode-badge {
  padding: 1px 7px; border-radius: 999px; background: var(--bg-hover);
  color: var(--text-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.results-episode-items { border-top: 1px solid var(--border); }
.results-episodes-flat {
  width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--text-soft); font: inherit; font-size: var(--text-sm);
  text-align: center; cursor: pointer;
}
.results-episodes-flat:hover { color: var(--text); background: var(--bg-hover); }

.results-workspace {
  display: grid; grid-template-columns: clamp(240px, 30%, 320px) minmax(0, 1fr);
  min-height: 560px; height: min(74vh, 860px); overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
}
.results-list {
  min-width: 0; overflow-y: auto; border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 58%, var(--bg-elevated));
}
.results-list-item {
  position: relative; width: 100%; min-height: 58px; display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; border-radius: 0; text-align: left;
  color: var(--text); background: transparent; font: inherit; cursor: pointer;
}
.results-list-item:hover { background: var(--bg-hover); }
.results-list-item.active {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--bg-elevated));
}
.results-list-item:focus-visible { outline: 0; box-shadow: inset var(--focus-ring); }
.results-list-icon {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: var(--text-md); flex-shrink: 0;
}
.results-list-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.results-list-title, .results-list-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-list-title { font-size: var(--text-base); font-weight: 650; }
.results-list-sub { color: var(--text-mute); font-size: var(--text-sm); }
.results-list-date { align-self: start; padding-top: 2px; color: var(--text-mute); font-size: var(--text-xs); white-space: nowrap; }
.results-list-unread {
  position: absolute; top: 28px; right: 12px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primary);
}
.results-detail { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-elevated); }
.results-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; flex-shrink: 0; padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.results-detail-heading { min-width: 0; }
.results-detail-kicker { margin-bottom: 3px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.results-detail-heading h2 { margin: 0; color: var(--text); font-size: var(--text-lg); letter-spacing: 0; }
.results-detail-meta { margin-top: 4px; color: var(--text-mute); font-size: var(--text-sm); }
.results-detail-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.results-reader { min-height: 0; flex: 1; overflow: auto; padding: 16px; }
.results-reader > .lab-report { border: 0; border-radius: 0; }
.results-reader > .lab-report > .lab-report-h { padding-left: 0; padding-right: 0; background: transparent; }
.results-reader .lab-raw.collapsed { max-height: none; }
.results-media { display: block; width: 100%; height: 65vh; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.results-image { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; object-fit: contain; }

@media (max-width: 900px) {
  .results-workspace { grid-template-columns: minmax(220px, 38%) minmax(0, 1fr); }
  .results-detail-header { flex-direction: column; }
  .results-detail-actions { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Structure clinique DMI — M01 / listes 109a–109f
   Sobriété : une seule couleur d'accent, densité médicale, états jamais fondés
   sur la couleur seule. Toutes les valeurs restent des nœuds texte (pas HTML).
   ═══════════════════════════════════════════════════════════════════════════ */
.dmi-structure-page {
  --dmi-ink: color-mix(in srgb, var(--text) 92%, #0b1f3a);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 28px;
  color: var(--dmi-ink);
}
.dmi-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 116px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 17%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--primary) 12%, transparent) 0, transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-elevated) 94%, var(--primary) 6%), var(--bg-elevated));
  box-shadow: 0 14px 34px -30px color-mix(in srgb, var(--primary) 70%, transparent);
}
.dmi-hero::after {
  content: '';
  position: absolute;
  right: 24px;
  bottom: -44px;
  width: 148px;
  height: 148px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.dmi-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.dmi-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.dmi-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.dmi-hero h2 { margin: 0; color: var(--dmi-ink); font-size: clamp(19px, 2vw, 25px); letter-spacing: -.025em; }
.dmi-hero p { max-width: 680px; margin: 7px 0 0; color: var(--text-mute); font-size: 12.5px; line-height: 1.55; }
.dmi-hero-actions { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.dmi-hero-actions button { white-space: nowrap; }

.dmi-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dmi-counter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1px 9px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
}
.dmi-counter strong { grid-row: 1 / 3; color: var(--primary); font-size: 26px; line-height: 1; letter-spacing: -.04em; }
.dmi-counter > span { overflow: hidden; color: var(--text); font-size: 11.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.dmi-counter small { overflow: hidden; color: var(--text-mute); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.dmi-counter.is-warn { border-color: color-mix(in srgb, var(--warning) 34%, var(--border)); background: color-mix(in srgb, var(--warning-bg) 58%, var(--bg-elevated)); }
.dmi-counter.is-warn strong { color: var(--warning); }
.dmi-counter.is-good strong { color: var(--success); }

.dmi-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(132px, auto)) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-sidebar);
}
.dmi-toolbar input, .dmi-toolbar select, .dmi-reg-controls select {
  min-height: 34px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
}
.dmi-toolbar input:focus-visible, .dmi-toolbar select:focus-visible, .dmi-reg-controls select:focus-visible,
.dmi-structure-page button:focus-visible, .dmi-form input:focus-visible, .dmi-form select:focus-visible, .dmi-form textarea:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}
.dmi-result-count { padding: 0 5px; color: var(--text-mute); font-size: 10.5px; white-space: nowrap; }

.dmi-tree-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 10px; align-items: start; }
.dmi-tree-column { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-sidebar); }
.dmi-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--bg-sidebar));
}
.dmi-column-head > div { display: flex; align-items: center; min-width: 0; gap: 8px; }
.dmi-column-head h3 { overflow: hidden; margin: 0; font-size: 12.5px; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.dmi-column-head > span { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 999px; background: var(--bg-mute); color: var(--text-mute); font-size: 10px; font-weight: 750; }
.dmi-step { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 800; }
.dmi-card-list { display: flex; flex-direction: column; gap: 7px; max-height: 690px; overflow: auto; padding: 8px; scrollbar-width: thin; }
.dmi-tree-card, .dmi-contact {
  position: relative;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elevated);
  box-shadow: 0 5px 15px -16px rgba(15, 23, 42, .75);
}
.dmi-tree-card::before, .dmi-contact::before { content: ''; position: absolute; inset: 9px auto 9px 0; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 58%, transparent); }
.dmi-tree-card.is-legacy, .dmi-contact.is-unlinked { border-style: dashed; background: color-mix(in srgb, var(--warning-bg) 30%, var(--bg-elevated)); }
.dmi-tree-card.is-legacy::before, .dmi-contact.is-unlinked::before { background: var(--warning); }
.dmi-tree-title, .dmi-contact-head, .dmi-subcontact-head, .dmi-service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.dmi-tree-title > div, .dmi-contact-head > div { min-width: 0; }
.dmi-card-head-actions { display: flex; flex: 0 0 auto; align-items: flex-end; flex-direction: column; gap: 5px; }
.dmi-inline-actions { display: flex; align-items: center; gap: 3px; }
.dmi-inline-actions button, .dmi-subcontact-actions button { min-height: 26px; padding: 3px 7px; font-size: 9px; }
.dmi-danger-action { color: var(--danger-text); }
.dmi-danger-action:hover { background: var(--danger-bg); }
.dmi-tree-title h4, .dmi-contact-head h4 { overflow-wrap: anywhere; margin: 2px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.3; }
.dmi-tree-eyebrow { color: var(--text-mute); font-size: 9px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.dmi-status { flex: 0 0 auto; max-width: 150px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-mute); font-size: 8.5px; font-weight: 750; line-height: 1.25; text-align: center; }
.dmi-status.is-ok { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); background: var(--success-bg); color: var(--success-text); }
.dmi-status.is-done { background: var(--bg-mute); color: var(--text-soft); }
.dmi-status.is-error { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); background: var(--danger-bg); color: var(--danger-text); }
.dmi-status.is-legacy { border-color: color-mix(in srgb, var(--warning) 36%, var(--border)); background: var(--warning-bg); color: var(--warn-text); }
.dmi-value { margin: 7px 0; overflow-wrap: anywhere; color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.dmi-chip-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.dmi-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-mute); color: var(--text-mute); font-size: 8.5px; line-height: 1.4; }
.dmi-chip.is-relevant { border-color: color-mix(in srgb, var(--primary) 24%, var(--border)); background: var(--primary-soft); color: var(--primary); }
.dmi-provenance { display: block; overflow-wrap: anywhere; margin-top: 6px; color: var(--text-mute); font-size: 8.7px; line-height: 1.45; }
.dmi-provenance-key { font-weight: 750; }
.dmi-provenance.is-missing { color: var(--warning); }
.dmi-branch { margin-top: 9px; padding: 8px 8px 2px 10px; border-left: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); background: color-mix(in srgb, var(--primary-soft) 20%, transparent); }
.dmi-branch-label { margin-bottom: 5px; color: var(--text-mute); font-size: 8.5px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.dmi-branch-list { display: flex; flex-direction: column; gap: 5px; }
.dmi-branch-item { display: flex; gap: 7px; align-items: flex-start; min-width: 0; padding: 5px 0; }
.dmi-branch-item > div { min-width: 0; }
.dmi-branch-item strong { display: block; overflow-wrap: anywhere; color: var(--text); font-size: 10.5px; }
.dmi-branch-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 4px; border: 1px solid var(--primary); border-radius: 50%; background: var(--bg-elevated); }
.dmi-branch-meta { color: var(--text-mute); font-size: 9px; line-height: 1.4; }
.dmi-empty-branch, .dmi-column-empty { color: var(--text-mute); font-size: 10px; font-style: italic; }
.dmi-column-empty { padding: 28px; text-align: center; }
.dmi-contact-motif { overflow-wrap: anywhere; margin-top: 3px; color: var(--text-mute); font-size: 10px; }
.dmi-subcontacts { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.dmi-subcontact { padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sidebar); }
.dmi-subcontact-head { align-items: center; margin-bottom: 6px; }
.dmi-subcontact-head strong { color: var(--text); font-size: 10.5px; }
.dmi-subcontact-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.dmi-subcontact-actions button:disabled { opacity: .52; cursor: not-allowed; }
.dmi-services { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dmi-service { display: flex; gap: 7px; min-width: 0; padding: 6px; border-radius: 7px; background: var(--bg-elevated); }
.dmi-service-mark { flex: 0 0 auto; width: 2px; min-height: 24px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.dmi-service-body { min-width: 0; flex: 1; }
.dmi-service-head { align-items: center; }
.dmi-service-head strong { overflow-wrap: anywhere; font-size: 10px; }
.dmi-service-value { overflow-wrap: anywhere; margin-top: 2px; color: var(--text-soft); font-size: 9.5px; line-height: 1.4; }

.dmi-regulatory { padding: 15px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 14px; background: var(--bg-elevated); }
.dmi-reg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dmi-reg-head h3 { margin: 0; font-size: 14px; }
.dmi-reg-head p { margin: 4px 0 0; color: var(--text-mute); font-size: 10.5px; }
.dmi-revision { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-mute); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px; }
.dmi-reg-controls { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(260px, 1.2fr); gap: 7px; margin: 12px 0 8px; }
.dmi-reg-list { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; }
.dmi-reg-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.dmi-reg-row:last-child { border-bottom: 0; }
.dmi-reg-row strong { overflow-wrap: anywhere; font-size: 10.5px; }
.dmi-reg-id { color: var(--primary); font: 750 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.dmi-reg-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 9px; color: var(--text-mute); font-size: 11px; text-align: center; }
.dmi-reg-empty.is-error { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); color: var(--danger-text); }
.dmi-honesty { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sidebar); color: var(--text-mute); }
.dmi-honesty > span { display: grid; flex: 0 0 auto; width: 18px; height: 18px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; font: 800 10px Georgia, serif; }
.dmi-honesty p { margin: 0; font-size: 9.5px; line-height: 1.5; }
.dmi-honesty strong { color: var(--text-soft); }
.dmi-load-error { display: grid; justify-items: start; gap: 7px; padding: 24px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border)); border-radius: 14px; background: var(--danger-bg); }
.dmi-load-error p { margin: 0; color: var(--danger-text); font-size: 12px; }

.dmi-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dmi-form .form-grid { min-width: 0; }
.dmi-check { display: flex; align-items: flex-start; gap: 8px; color: var(--text-soft); font-size: 12px; line-height: 1.4; }
.dmi-check input { margin-top: 2px; accent-color: var(--primary); }
.dmi-form-section { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sidebar); }
.dmi-form-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.dmi-form-section-head h4 { margin: 0; font-size: 12.5px; }
.dmi-form-section-head p { margin: 3px 0 0; color: var(--text-mute); font-size: 10px; }
.dmi-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 220px; overflow: auto; padding: 2px; }
.dmi-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-soft);
  cursor: pointer;
}
.dmi-choice:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); background: color-mix(in srgb, var(--primary-soft) 55%, var(--bg-elevated)); }
.dmi-choice input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--primary); }
.dmi-choice span { min-width: 0; }
.dmi-choice strong, .dmi-choice small { display: block; overflow-wrap: anywhere; }
.dmi-choice strong { color: var(--text); font-size: 10.5px; line-height: 1.35; }
.dmi-choice small { margin-top: 2px; color: var(--text-mute); font-size: 9px; line-height: 1.35; }
.dmi-capability-note, .dmi-caution { padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-sidebar); color: var(--text-mute); font-size: 10.5px; line-height: 1.5; }
.dmi-capability-note strong, .dmi-caution strong { color: var(--text-soft); }
.dmi-caution { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: color-mix(in srgb, var(--warning-bg) 45%, var(--bg-elevated)); }
.dmi-caution p { margin: 4px 0 0; }
.dmi-service-editor { display: flex; flex-direction: column; gap: 6px; }
.dmi-service-edit-row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(150px, 1fr) minmax(180px, 1.2fr) 30px; gap: 6px; align-items: center; }
.dmi-service-edit-row input, .dmi-service-edit-row select { min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-input); color: var(--text); font: inherit; font-size: 11px; }

@media (max-width: 1120px) {
  .dmi-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmi-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, auto)); }
  .dmi-toolbar select:last-of-type, .dmi-result-count { display: none; }
  .dmi-tree-grid { grid-template-columns: 1fr; }
  .dmi-card-list { max-height: 560px; }
}
@media (max-width: 720px) {
  .dmi-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  .dmi-hero-actions { justify-content: flex-start; }
  .dmi-hero-actions button { flex: 1 1 auto; }
  .dmi-counters { grid-template-columns: 1fr 1fr; }
  .dmi-counter { grid-template-columns: auto 1fr; padding: 10px; }
  .dmi-counter strong { font-size: 21px; }
  .dmi-toolbar { grid-template-columns: 1fr; }
  .dmi-toolbar select, .dmi-toolbar select:last-of-type { display: block; }
  .dmi-reg-head { flex-direction: column; }
  .dmi-reg-controls { grid-template-columns: 1fr; }
  .dmi-choice-list { grid-template-columns: 1fr; }
  .dmi-tree-title { align-items: stretch; flex-direction: column; }
  .dmi-card-head-actions { align-items: flex-start; }
  .dmi-subcontact-head { align-items: flex-start; flex-direction: column; }
  .dmi-subcontact-actions { justify-content: flex-start; }
  .dmi-service-edit-row { grid-template-columns: 1fr 30px; }
  .dmi-service-edit-row select, .dmi-service-edit-row input { grid-column: 1; }
  .dmi-service-edit-row button { grid-column: 2; grid-row: 1 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .dmi-structure-page *, .dmi-structure-page *::before, .dmi-structure-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (max-width: 680px) {
  .results-tools { align-items: stretch; flex-direction: column; }
  .results-workspace { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .results-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--border); }
  .results-detail { min-height: 520px; }
}

/* Grille cumulative biologie — analytes × dates, anormaux colorés (cockpit) */
.lg-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); }
.lab-grid { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.lab-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-elevated); text-align: right; font-weight: 500; color: var(--text-mute); padding: 9px 10px; font-size: var(--text-sm, 12px); border-bottom: 1px solid var(--border); white-space: nowrap; }
.lab-grid th.lg-analyte { text-align: left; }
.lab-grid th.lg-trend { text-align: center; }
.lab-grid th.lg-last { color: var(--text); }
/* En-tête de date cliquable → ouvre le bilan complet du jour (Dr Nanni 20/06). */
.lab-grid th.lg-date-h:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.lab-grid td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.lab-grid tbody tr:last-child td { border-bottom: 0; }
.lab-grid td.lg-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.lab-grid td.lg-num.lg-last { color: var(--text); font-weight: 500; }
.lab-grid td.lg-analyte { text-align: left; }
.lg-ref { font-size: var(--text-xs); color: var(--text-mute); margin-top: 1px; }
.lab-grid td.lg-trend { text-align: center; width: 66px; }
.lab-grid th.lg-trend { width: 66px; }
.lg-row { cursor: pointer; }
.lg-row:hover td { background: var(--bg-hover); }
.lab-grid td.lg-high { color: var(--danger-text, #b91c1c); font-weight: 500; }
.lab-grid td.lg-low { color: #185fa5; font-weight: 500; }
.lab-grid td.lg-crit { color: var(--danger-text, #b91c1c); font-weight: 700; }
.lab-grid td.lg-sys { padding: 7px 10px 4px; font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; color: var(--text-mute); background: var(--bg); text-transform: none; }
/* Dark mode : les rouges/bleus d'anomalie codés en dur passent sous le seuil de
   contraste WCAG sur fond sombre → on les éclaircit (lecture des valeurs hors normes). */
[data-theme='dark'] .lab-grid td.lg-high,
[data-theme='dark'] .lab-grid td.lg-crit { color: #f87171; }
[data-theme='dark'] .lab-grid td.lg-low { color: #7fb1ec; }
.lab-table td, .lab-table th { font-size: var(--text-base); }
.lab-table tr.lab-ab-crit td:first-child,
.lab-table td.lab-ab-crit { color: var(--danger); font-weight: 600; }
.lab-table tr.lab-ab-warn td:first-child,
.lab-table td.lab-ab-warn { color: var(--amber-text, #92400e); font-weight: 600; }

.consult-vitals-banner input[type='number']::-webkit-inner-spin-button,
.consult-vitals-banner input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.consult-vitals-banner input[type='number'] { appearance: textfield; }

.patient-dossier-search {
  margin: 0 0 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.patient-dossier-search-bar { min-height: 32px; }
.patient-dossier-search-bar > input[type='search'] { min-height: 30px; }
.patient-dossier-search > div:last-child:not([style*='display: none']) { margin-top: 5px; }
.history-filter-search, .history-filter-type {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
}
.history-filter-search { flex: 1 1 230px; }

@media (max-width: 1180px) {
  .topbar-session-actions .cpill-hint { display: none; }
  .topbar-session-actions > button { max-width: 150px; }
}
.lab-flag {
  margin-left: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.85;
}
.lab-raw {
  margin: 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-base, 13px);
  line-height: 1.55;
  color: var(--text-soft);
  white-space: pre;
  overflow-x: auto;
}
.lab-raw.collapsed {
  max-height: 220px;
  overflow-y: auto;
}
.lab-empty {
  padding: 14px;
  font-size: var(--text-base, 13px);
  color: var(--text-mute);
  font-style: italic;
}

/* ── Carte « 🧪 Derniers résultats » de la synthèse patient ────────── */
.synth-labs-card .synth-lab-block {
  cursor: pointer;
  padding: 8px 2px 2px;
  border-radius: 8px;
  transition: background 0.12s;
}
.synth-labs-card .synth-lab-block:hover { background: var(--bg-2, rgba(0,0,0,0.025)); }
.synth-labs-card .synth-lab-block-divider {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-faint, #eef0f3);
}
.synth-lab-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base, 13px);
}
.synth-lab-date { font-weight: 600; color: var(--text); }
.synth-lab-lab { color: var(--text-mute); font-size: var(--text-sm, 12px); }
.synth-lab-new { background: var(--primary-soft, rgba(37,99,235,.12)); color: var(--primary, #2563eb); font-weight: 600; }
.synth-lab-title {
  font-size: var(--text-sm); color: var(--text-mute); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.synth-lab-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.synth-lab-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  font-size: var(--text-sm, 12px);
  line-height: 1.4;
  border: 1px solid transparent;
  max-width: 100%;
}
.synth-lab-chip-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 110px;
}
.synth-lab-chip-val { font-variant-numeric: tabular-nums; font-weight: 500; }
.synth-lab-chip-unit { color: inherit; opacity: 0.75; font-weight: 400; font-size: var(--text-xs); }
.synth-lab-chip-arrow { font-weight: 700; margin-left: 2px; }
.synth-lab-chip-crit {
  background: rgba(239,68,68,0.10);
  color: var(--danger, #ef4444);
  border-color: rgba(239,68,68,0.30);
}
.synth-lab-chip-high,
.synth-lab-chip-low,
.synth-lab-chip-abn {
  background: rgba(245,158,11,0.10);
  color: var(--warning, #b45309);
  border-color: rgba(245,158,11,0.30);
}
.synth-lab-chip-more {
  background: var(--bg-2, #f5f5f7);
  color: var(--text-mute);
  border-color: var(--border-faint);
  font-weight: 600;
}
.synth-lab-pending {
  margin-top: 6px;
  font-size: var(--text-sm, 12px);
  color: var(--text-mute);
  font-style: italic;
}

/* =====================================================================
   Consultation editor / SOAP
   ===================================================================== */
/* =====================================================================
   ÉDITEUR CONSULTATION — refonte 2026-05-24
   Layout 2 colonnes : main (SOAP + toolbar) | side (timeline verticale).
   ===================================================================== */
.consult-editor {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
}
.consult-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 26vw, 480px);
  gap: clamp(14px, 1.2vw, 20px);
  align-items: start;
}
/* ⇆ « Masquer l'historique patient » : ne masque QUE l'historique (en-tête +
   timelines) — les PARAMÈTRES VITAUX et le traitement chronique restent
   visibles en permanence (demande Dr : bannière latérale fixe, façon
   CareConnect). Avant, toute la colonne disparaissait → « je n'ai pas ma
   bannière vitaux » sur les postes où l'historique avait été replié. */
.consult-layout.side-hidden .consult-side-header,
.consult-layout.side-hidden #consult-timelines { display: none; }
.consult-layout.side-hidden .consult-side { background: transparent; border: none; box-shadow: none; overflow: visible; }

.consult-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.consult-side {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - var(--topbar-h, 64px) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  container-type: inline-size;
}
.consult-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.consult-side-header h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin: 0;
}
.consult-side-body {
  flex: 0 0 auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 10px;
}

/* ── Header patient compact (52px) ─────────────────────────────────────── */
.consult-patient-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.consult-patient-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.consult-patient-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.consult-patient-text { min-width: 0; line-height: 1.2; }
.consult-patient-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.consult-patient-name {
  font-size: var(--text-lg, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.consult-patient-meta {
  font-size: var(--text-sm, 12px);
  color: var(--text-mute);
  margin-top: 1px;
}
.consult-patient-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.consult-side-toggle { font-size: var(--text-md); padding: 4px 8px; }
.consult-status-pill {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--text-soft);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.consult-status-pill.finalized {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
}
.consult-status-pill.locked {
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  border-color: transparent;
}

/* ── SOAP compact (grid 2×2 + Traitement) ─────────────────────────────── */
.soap-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px 14px;
  box-shadow: var(--shadow-sm);
}
.soap-section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.soap-section-h h2 {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
.soap-autosave {
  font-size: var(--text-xs);
  color: var(--text-mute);
  font-weight: 500;
}

/* ─── Section « Médicaments prescrits » dans la consultation ────────────── */
.consult-rx-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px 14px;
  box-shadow: var(--shadow-sm);
  margin-top: 12px;
}
.consult-rx-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex-wrap : sous ~340 px, le titre + le groupe de boutons (« Prise de sang »,
     « Renouveler », « ℞ ») dépassent le cadre et sont coupés — le groupe partait
     jusqu'à 338 px dans une carte de 266 px (mesuré à 320 px). En autorisant le
     retour à la ligne, les boutons passent sous le titre au lieu d'être perdus. */
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.consult-rx-h h2 {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
/* Composeur de prescription EMBARQUÉ dans la consultation (v3.5 B2) : encadré
   discret sous le titre, toujours ouvert. Le panier (rx-cart-col) passe en
   pleine largeur (plus la colonne droite étroite d'une modale). */
.rx-composer-slot { margin: 4px 0 12px; }
.rx-inline-composer {
  border: 1px solid var(--border-accent, var(--border));
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-soft, var(--bg-elevated));
}
.rx-inline-composer .rx-cart-col { width: 100%; }
.rx-list-wrap { display: flex; flex-direction: column; gap: 8px; }
.rx-empty {
  font-size: var(--text-sm);
  color: var(--text-mute);
  padding: 12px 4px;
  font-style: italic;
}
/* Aperçu inline de l'ordonnance (v3.5 B4) : la preuve de prescription s'affiche
   directement sous la liste dès qu'un RID existe, sans quitter la consultation. */
.consult-rx-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.consult-rx-preview-h {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.consult-rx-preview-frame {
  width: 100%;
  height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.rx-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--bg-base, var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rx-card:hover {
  border-color: var(--primary-soft, var(--border));
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.rx-card-icon { font-size: var(--text-xl); line-height: 1; padding-top: 2px; }
.rx-card-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rx-card-title {
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
}
.rx-card-title strong { font-weight: 600; }
.rx-card-dosage { color: var(--text-soft); font-size: var(--text-sm); }
.rx-card-poso {
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: 1.4;
}
.rx-card-notes {
  font-size: var(--text-xs);
  color: var(--text-mute);
  font-style: italic;
  margin-top: 2px;
}
.rx-card-indication {
  font-size: var(--text-sm, 12px);
  color: var(--text-soft);
  margin-top: 2px;
}
.rx-card-info {
  font-size: var(--text-sm, 12px);
  color: var(--text-soft);
  margin-top: 2px;
  padding-left: 2px;
  border-left: 2px solid var(--primary-soft, #ede9fe);
  padding-left: 6px;
}
.rx-card-actions { display: flex; gap: 4px; align-items: center; }

.soap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.soap-grid .full { grid-column: 1 / -1; }
.soap-field { display: flex; flex-direction: column; gap: 5px; }
.soap-field .field-h {
  display: flex;
  align-items: center;
  gap: 6px;
}
.soap-field .field-h .letter {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xs);
}
.soap-field .field-h .field-name { font-weight: 600; font-size: var(--text-sm); color: var(--text-soft); }
.soap-field textarea {
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: var(--transition);
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
}
.soap-field.full textarea { min-height: 60px; }
.soap-field textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ── Barre de commande consultation (1 ligne : rec · motif · micro · acte) ──
   Remplace l'ancienne toolbar IA à 4 rangées (2026-06-11). Les chips IA vivent
   dans .soap-ai-row, attachées à la note qu'elles travaillent. */
.consult-command-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.consult-command-bar .consult-motif-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-md, 14px);
  font-weight: 500;
  outline: none;
  transition: var(--transition);
}
.consult-command-bar .consult-motif-input::placeholder { color: var(--text-mute); font-weight: 400; }
.consult-command-bar .consult-motif-input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.consult-type-seg { display: inline-flex; flex-shrink: 0; }
.soap-ai-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px 0 8px;
}
.soap-ai-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--border);
}
.btn-chip-primary {
  background: var(--primary) !important;
  color: var(--text-on-primary, #fff) !important;
  border-color: var(--primary) !important;
  font-weight: 700;
}
.btn-chip-primary:hover { filter: brightness(1.08); }
.btn-rec { flex-shrink: 0; white-space: nowrap; padding: var(--btn-pad-lg, 9px 16px); font-weight: 700; }
/* « 💊 Prescrire » — action de premier plan, toujours visible dans la barre */
.btn-rx-main { flex-shrink: 0; white-space: nowrap; font-weight: 700; }
.consult-live-indicator {
  font-size: var(--text-xs);
  color: var(--danger);
  font-weight: 700;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.ai-toolbar-spacer { flex: 1; }

/* Assistant IA — onglets internes (Chat/Consultation/Expert/Audit) */
.assistant-tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.assistant-tab {
  flex: 1;
  min-width: 140px;
  padding: 9px 14px;
  font-size: var(--text-md, 14px);
  font-weight: 600;
  background: transparent;
  color: var(--text-soft);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.assistant-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.assistant-tab.active {
  background: var(--primary);
  color: var(--text-on-primary, #fff);
}
.assistant-beta-badge {
  background: rgba(255,255,255,0.25);
  color: inherit;
  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.assistant-tab:not(.active) .assistant-beta-badge {
  background: var(--warning-hover, #d97706);
  color: white;
}
.assistant-subview { min-height: 400px; }
/* Conteneur par onglet du tab-hub : transparent pour la mise en page, il ne
   sert qu'à isoler les rendus async périmés (cf. lib/tab-hub.js). */
.tab-hub-mount { display: contents; }

/* ── Hub maître-détail — Paramètres (v3.5) : index gauche groupé par famille +
   volet droit à une seule rubrique, sur le modèle Réglages Apple/Linear. ── */
.settings-hub {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.settings-hub-nav {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - var(--topbar-h, 64px) - 32px);
  overflow-y: auto;
}
.settings-hub-search { padding: 2px 2px 8px; }
.settings-hub-search-input {
  width: 100%;
  padding: 7px 10px;
  font-size: var(--text-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.settings-hub-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.settings-hub-group { margin-bottom: 4px; }
.settings-hub-group-label {
  padding: 10px 10px 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.settings-hub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--text-md, 14px);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.settings-hub-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-hub-row.active {
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.settings-hub-row-icon { flex-shrink: 0; }
.settings-hub-row-label { flex: 1; min-width: 0; }
.settings-hub-detail { min-width: 0; }
.settings-hub-detail > .tab-hub-mount { display: block; }
.settings-overview {
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.55;
}
.settings-page .settings-section,
.security-page .settings-section,
.security-page .card {
  border-radius: var(--radius-md);
  box-shadow: none;
}
.settings-page .settings-section > :first-child,
.security-page .settings-section > :first-child {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
}
.security-advanced {
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.security-advanced > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 18px;
  cursor: pointer;
}
.security-advanced-body {
  padding: 14px;
  border-top: 1px solid var(--border);
}
.security-advanced-body > .card:last-child { margin-bottom: 0 !important; }
.security-page > .settings-category-head { margin-bottom: 18px; }
.security-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.security-posture-line {
  grid-column: 1 / -1;
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 7%, var(--bg-elevated));
}
.security-primary-card {
  min-width: 0;
  min-height: 166px;
  padding: 16px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.security-primary-card > * { max-width: 100%; }
.security-card-title {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.security-card-hint {
  min-height: 30px;
  margin-bottom: 9px;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.4;
}
.security-card-status {
  min-height: 28px;
  margin-bottom: 10px !important;
  color: var(--text-soft);
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.security-inline-editor { width: fit-content; max-width: 100%; }
.security-inline-editor > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}
.security-inline-editor > summary::-webkit-details-marker { display: none; }
.security-inline-editor-body {
  position: absolute;
  z-index: var(--z-dropdown);
  width: min(560px, calc(100vw - 80px));
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.security-inline-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.security-inline-fields input {
  min-width: 170px !important;
  min-height: 32px;
  padding: 5px 8px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
}
.security-restore-details { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); }
.security-restore-details > summary { cursor: pointer; color: var(--text-soft); font-size: 12px; font-weight: 600; }
.security-restore-details .security-inline-fields { margin-top: 8px; }
.security-pin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.security-pin-input {
  min-height: 32px;
  border-radius: 4px !important;
  font-family: var(--font-mono);
  font-size: 15px !important;
  text-align: center;
}
.security-options-card {
  grid-column: 1 / -1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.security-options-card > summary {
  min-height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 12px !important;
  cursor: pointer;
}
.security-page > #set-acces-a-distance,
.security-page > .security-advanced { border-radius: var(--radius-sm); box-shadow: none; }
.security-page .settings-category-head { margin-bottom: 12px; }
.security-page .security-posture-line {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
}
.security-page .security-posture-line > div { font-size: 12px !important; }
.security-page .security-remote-card { margin-bottom: 10px !important; border-radius: 4px !important; }
.security-page .security-remote-card > :first-child {
  min-height: 34px;
  padding: 8px 12px !important;
}
.security-page .security-remote-card > :first-child h2 { font-size: 13px !important; }
.security-page .security-remote-card > div:last-child > div {
  padding: 10px 12px !important;
}
.security-page .security-remote-card > div:last-child > div > div:first-child {
  display: none;
}
.security-page .security-remote-card [style*="border-radius: 10px"] {
  margin-bottom: 8px !important;
  padding: 9px 11px !important;
  border-radius: 4px !important;
}
.security-page .security-remote-card a { margin-bottom: 6px !important; font-size: 11px !important; }
.security-page .security-remote-card button,
.security-page .security-advanced button { min-height: 32px; padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; }
.security-page .security-advanced > summary { min-height: 38px; padding: 0 12px; font-size: 12px; }
@media (max-width: 980px) {
  .security-board { grid-template-columns: 1fr; }
  .security-board > * { grid-column: 1 !important; }
}
@media (max-width: 880px) {
  .settings-hub { grid-template-columns: 1fr; }
  .settings-hub-nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .settings-hub-group { display: flex; align-items: center; gap: 4px; margin: 0; }
  .settings-hub-group-label { padding: 6px 6px 6px 2px; }
}

/* Paramètres 4.4.4 — structure horizontale de la maquette validée. */
.settings-v4-shell {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  font-size: 12px;
}
.settings-v4-tabs {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 44px;
  padding: 5px;
  margin: -8px 0 16px;
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--bg-hover) 65%, transparent);
  overflow-x: auto;
}
.settings-v4-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-mute);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.settings-v4-tab:hover { color: var(--text); background: var(--bg-elevated); }
.settings-v4-tab.active { color: var(--primary); background: var(--bg-elevated); box-shadow: var(--shadow-xs); }
.settings-v4-tab.active::after {
  display: none;
}
.settings-v4-tab-icon { font-size: 14px; line-height: 1; }
.settings-v4-content,
.settings-v4-mount,
.settings-subtab-mount { min-width: 0; }
.settings-category-head { margin: 0 0 12px; }
.settings-category-head h2 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.settings-category-head p {
  margin: 0;
  color: var(--text-mute);
  font-size: 12.5px;
}
.settings-category-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.settings-category-page > .settings-category-head,
.settings-category-page > .settings-category-search,
.settings-category-page > .settings-banner,
.settings-category-page > .settings-save-bar,
.settings-category-page > #set-medecin,
.settings-category-page > #set-acces-a-distance,
.settings-category-page > #set-synchronisation,
.settings-category-page > #set-sauvegarde,
.settings-category-page > #set-restauration-sauvegarde-chiffree-hors-pc,
.settings-category-page > #set-importer-des-donnees-existantes,
.settings-category-page > .settings-disclosure {
  grid-column: 1 / -1;
}
.settings-category-page .settings-section,
.settings-category-page > .card {
  margin: 0 !important;
  border-radius: 4px;
  box-shadow: none;
}
.settings-category-page .settings-section > :first-child {
  min-height: 32px;
  padding: 8px 11px !important;
}
.settings-category-page .settings-section > :first-child h2 {
  font-size: 13.5px !important;
  line-height: 1.25;
}
.settings-category-page .settings-section > div:last-child > div,
.settings-category-page .settings-section > div:last-child > label {
  min-height: 30px;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
}
.settings-category-page .settings-section label,
.settings-category-page .settings-section .muted {
  font-size: 12px !important;
  line-height: 1.35;
}
.settings-category-page .settings-section input:not([type="checkbox"]):not([type="radio"]),
.settings-category-page .settings-section select,
.settings-category-page .settings-section textarea {
  min-height: 32px;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}
.settings-category-page .btn-primary,
.settings-category-page .btn-secondary,
.settings-category-page .btn-danger,
.settings-category-page .btn-ghost,
.security-page .btn-primary,
.security-page .btn-secondary,
.security-page .btn-danger,
.security-page .btn-ghost {
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12.5px;
}
.settings-category-search {
  width: min(480px, 100%);
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
}
.settings-category-page .settings-section [style*="grid-template-columns: 240px 1fr"] {
  grid-template-columns: minmax(105px, 34%) minmax(110px, 1fr) !important;
  gap: 8px;
}
.settings-category-page .settings-save-bar {
  margin-top: 0 !important;
  padding: 8px 0 !important;
}
.settings-doctor-composed { border: 0 !important; background: transparent !important; }
.settings-doctor-composed > :first-child { background: transparent !important; }
.settings-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.settings-profile-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
}
.settings-profile-card h3 {
  min-height: 31px;
  margin: 0;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
  font-size: 13px;
  font-weight: 650;
}
.settings-profile-card-body > div {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  min-height: 30px;
  padding: 4px 10px !important;
  border-bottom: 1px solid var(--border);
}
.settings-profile-card-body > div:last-child { border-bottom: 0 !important; }
.settings-profile-card-body label { font-size: 12px !important; }
.settings-profile-card-body input {
  min-width: 0;
  min-height: 28px;
  padding: 3px 7px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
}
.settings-data-page { display: block; }
.settings-data-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.settings-data-tile {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
}
.settings-data-tile-icon {
  position: absolute;
  top: 11px;
  right: 11px;
  color: var(--primary);
  font-size: 14px;
}
.settings-data-tile h3 {
  margin: 0 22px 8px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.settings-data-tile strong {
  display: block;
  margin-bottom: 3px;
  color: var(--success-text);
  font-size: 12px;
}
.settings-data-tile p {
  min-height: 28px;
  margin: 0 0 9px;
  color: var(--text-mute);
  font-size: 11px;
  line-height: 1.4;
}
.settings-data-tile .btn-primary,
.settings-data-tile .btn-secondary { min-height: 30px; padding: 4px 9px; border-radius: var(--radius-sm); font-size: 11.5px; }
.settings-data-tools {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
}
.settings-data-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 11px;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}
.settings-data-tools > summary small { color: var(--text-mute); font-size: 11px; font-weight: 400; }
.settings-data-tools-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.settings-data-tools-body > .settings-section { margin: 0 !important; }
.settings-connections-page { display: block; }
.settings-integrations-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
}
.settings-integration-row { border-bottom: 1px solid var(--border); }
.settings-integration-row:last-child { border-bottom: 0; }
.settings-integration-row > summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 140px 18px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}
.settings-integration-row > summary::-webkit-details-marker { display: none; }
.settings-integration-row > summary:hover { background: var(--bg-hover); }
.settings-integration-icon { color: var(--primary); font-size: 15px; }
.settings-integration-name { color: var(--text); font-size: 13px; font-weight: 620; }
.settings-integration-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success-text);
  font-size: 12px;
}
.settings-integration-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.settings-integration-status.is-neutral { color: var(--text-mute); }
.settings-general-optional { grid-column: 1 / -1; }
.settings-general-optional .settings-section { border: 0; }
.settings-general-optional .settings-section > :first-child { display: none; }
.settings-integration-chevron { color: var(--text-mute); font-size: 18px; transform: rotate(0); transition: transform .15s ease; }
.settings-integration-row[open] .settings-integration-chevron { transform: rotate(90deg); }
.settings-integration-body { padding: 10px; border-top: 1px solid var(--border); background: var(--bg); }
.settings-integration-body .settings-section > :first-child { display: none; }
.settings-integration-body .settings-section { border-radius: 3px; }
.settings-disclosure {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  overflow: hidden;
}
.settings-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 38px;
  padding: 0 11px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.settings-disclosure > summary small {
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 400;
}
.settings-disclosure-body {
  padding: 16px;
  border-top: 1px solid var(--border);
}
.settings-subtabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 3px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
}
.settings-subtab {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--text-sm);
  cursor: pointer;
}
.settings-subtab.active {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 980px) {
  .settings-category-page { grid-template-columns: 1fr; }
  .settings-category-page > * { grid-column: 1 !important; }
  .settings-profile-grid { grid-template-columns: 1fr; }
  .settings-data-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .settings-data-overview,
  .settings-data-tools-body { grid-template-columns: 1fr; }
  .settings-integration-row > summary { grid-template-columns: 26px minmax(0, 1fr) 18px; }
  .settings-integration-status { display: none; }
}

/* Barre latérale compacte : mêmes boutons, uniquement leurs pictogrammes. */
.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  margin-left: auto;
  color: var(--text-mute);
}
.sidebar-collapse-btn svg { width: 16px; height: 16px; }
body.sidebar-compact #app,
body.sidebar-folded #app { grid-template-columns: 72px minmax(0, 1fr); }
body.sidebar-compact .sidebar,
body.sidebar-folded .sidebar {
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
  overflow-x: hidden;
}
body.sidebar-compact .brand,
body.sidebar-folded .brand {
  position: relative;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
body.sidebar-compact .brand-text,
body.sidebar-folded .brand-text,
body.sidebar-compact .search-trigger span,
body.sidebar-folded .search-trigger span,
body.sidebar-compact .search-trigger kbd,
body.sidebar-folded .search-trigger kbd,
body.sidebar-compact .nav-section,
body.sidebar-folded .nav-section,
body.sidebar-compact .nav-item > span:not(.badge):not(.nav-badges),
body.sidebar-folded .nav-item > span:not(.badge):not(.nav-badges),
body.sidebar-compact .sidebar-pins,
body.sidebar-folded .sidebar-pins,
body.sidebar-compact .ai-status .ai-label,
body.sidebar-folded .ai-status .ai-label {
  display: none !important;
}
body.sidebar-compact .sidebar-collapse-btn,
body.sidebar-folded .sidebar-collapse-btn {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
}
body.sidebar-compact .sidebar-collapse-btn svg,
body.sidebar-folded .sidebar-collapse-btn svg { transform: rotate(180deg); }
body.sidebar-compact .search-trigger,
body.sidebar-folded .search-trigger,
body.sidebar-compact .nav-item,
body.sidebar-folded .nav-item,
body.sidebar-compact .ai-status,
body.sidebar-folded .ai-status {
  width: 40px;
  min-width: 40px;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
body.sidebar-compact .nav-item .badge,
body.sidebar-folded .nav-item .badge,
body.sidebar-compact .nav-item .nav-badges,
body.sidebar-folded .nav-item .nav-badges {
  position: absolute;
  top: -4px;
  right: -6px;
  margin: 0;
}
body.sidebar-compact .sidebar-footer,
body.sidebar-folded .sidebar-footer { align-items: center; }
body.sidebar-compact #cabinet-session-badge,
body.sidebar-folded #cabinet-session-badge {
  width: 40px !important;
  height: 34px !important;
  padding: 0 !important;
  margin-top: 2px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-top: 0 !important;
}
body.sidebar-compact #cabinet-session-badge > span:first-child > span:last-child,
body.sidebar-folded #cabinet-session-badge > span:first-child > span:last-child,
body.sidebar-compact #cabinet-session-badge > span:nth-child(2),
body.sidebar-folded #cabinet-session-badge > span:nth-child(2) { display: none !important; }
body.sidebar-compact .main .topbar,
body.sidebar-folded .main .topbar { padding-left: 20px; }
.sidebar-unfold-btn { display: none !important; }
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
  body.sidebar-compact #app,
  body.sidebar-folded #app { grid-template-columns: 1fr; }
}

/* Cerveau du cabinet — tableau d'état opérationnel, sans hero marketing. */
.gpu-ops-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--border);
}
.gpu-ops-head .gpu-h1 { margin: 3px 0 0; letter-spacing: 0; }
.gpu-ops-head .gpu-sub { max-width: 720px; line-height: 1.55; }
.gpu-ops-eyebrow {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gpu-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.gpu-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 13px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.gpu-summary-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--text-mute);
}
.gpu-summary-card.ok::before { background: var(--success); }
.gpu-summary-card.danger::before { background: var(--danger); }
.gpu-summary-label { color: var(--text-soft); font-size: var(--text-sm); }
.gpu-summary-value { color: var(--text); font-size: var(--text-md); text-align: right; }
.gpu-summary-detail {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--text-mute);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Vue d'ensemble du Cerveau (refonte 25/07) : une tuile par machine.
   Le libellé prime sur la donnée : le médecin lit « Vous l'utilisez » ou
   « Prêt », jamais un pourcentage brut. Liseré = état, comme les summary-cards. */
.gpu-machines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.gpu-machine {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px 13px 17px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.gpu-machine::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--text-mute);
}
.gpu-machine.on::before { background: var(--success); }
.gpu-machine.busy::before { background: var(--primary); }
.gpu-machine.warn::before { background: var(--warning); }
.gpu-machine.off::before { background: var(--text-mute); }
.gpu-machine-head { display: flex; gap: 10px; align-items: flex-start; }
.gpu-machine-icon { font-size: 20px; line-height: 1.2; }
.gpu-machine-role { color: var(--text-soft); font-size: var(--text-xs); line-height: 1.4; }
.gpu-machine-state { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.gpu-machine.busy .gpu-machine-state b { color: var(--primary); }
.gpu-machine.warn .gpu-machine-state b { color: var(--amber-text); }
.gpu-machine-detail { color: var(--text-mute); font-size: var(--text-xs); line-height: 1.45; }

/* ── Centrale de rédaction (25/07) : IA + humain sur le même écran.
   Le code couleur porte une règle de sûreté, pas une décoration :
   BLEU  = ce que le patient lira ;  GRIS = privé, jamais montré ;
   AMBRE = ce qui repart vers l'IA. Ne jamais unifier ces trois teintes. */
.gpu-redac-compar { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; }
.gpu-redac-compar-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: var(--text-xs); min-width: 170px;
}
.gpu-redac-list { display: flex; flex-direction: column; gap: 6px; }
.gpu-redac { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
.gpu-redac.open { border-color: var(--primary); }
.gpu-redac-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; cursor: pointer; font-size: 13px;
}
.gpu-redac-head:hover { background: var(--surface-2); }
.gpu-redac-note { color: var(--amber-text); font-size: 12px; letter-spacing: 1px; }
.gpu-redac-bloc { padding: 10px 12px; border-top: 1px solid var(--border); }
.gpu-redac-bloc.patient { border-left: 3px solid var(--primary); }
.gpu-redac-bloc.consigne { border-left: 3px solid var(--warning); }
.gpu-redac-bloc.prive { border-left: 3px solid var(--text-mute); background: var(--surface-2); }
.gpu-redac-lbl { font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.gpu-redac-ia {
  font-size: 12.5px; line-height: 1.6; color: var(--text-soft);
  white-space: pre-wrap; max-height: 220px; overflow-y: auto;
}
.gpu-redac-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.gpu-redac-perm { display: flex; align-items: center; gap: 7px; margin: 7px 0 0; font-size: 12px; cursor: pointer; }
.gpu-redac-prive-tag {
  font-weight: 600; font-size: 11px; color: var(--text-mute);
  background: var(--bg-elevated); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 999px; margin-left: 4px;
}
.gpu-redac-stars { display: inline-flex; gap: 2px; }
.gpu-star {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 19px; line-height: 1; color: var(--border-strong);
}
.gpu-star.on { color: var(--amber-text); }
.gpu-consignes { display: flex; flex-direction: column; gap: 4px; }
.gpu-consigne {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 6px 10px; background: var(--surface-2);
  border-left: 3px solid var(--success); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ── Atelier patient des réponses aux résultats (26/07) ────────────────
   Toute la largeur utile est exploitée. Les trois colonnes répondent à trois
   questions distinctes : quel patient, quel résultat, quelle réponse. */
.ai-studio-page { width: 100%; max-width: none; display: grid; gap: 14px; }
.ai-studio-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.ai-studio-header h1 { margin: 2px 0 4px; }
.ai-studio-header p { margin: 0; color: var(--text-mute); max-width: 850px; }
.ai-kicker {
  display: block; color: var(--primary); font-size: 10.5px; font-weight: 800;
  letter-spacing: .11em; margin-bottom: 3px;
}
.ai-model-summary { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ai-model-summary span {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px;
  padding: 5px 9px; color: var(--text-mute); font-size: 11px; white-space: nowrap;
}
.ai-studio-toolbar {
  display: grid; grid-template-columns: minmax(240px, 380px) auto 1fr;
  align-items: center; gap: 12px;
}
.ai-search { width: 100%; box-sizing: border-box; }
.ai-filter-tabs {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ai-filter-tabs button {
  border: 0; border-radius: 7px; background: transparent; color: var(--text-soft);
  padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ai-filter-tabs button.active { background: var(--bg-elevated); color: var(--primary); box-shadow: var(--shadow-sm); }
.ai-order-note { justify-self: end; color: var(--text-mute); font-size: 11.5px; }
.ai-result-studio {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(245px, 300px) minmax(0, 1fr);
  min-height: calc(100vh - 255px); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; background: var(--bg-elevated);
}
.ai-studio-pane { min-width: 0; background: var(--surface-2); border-right: 1px solid var(--border); }
.ai-pane-title {
  min-height: 58px; padding: 11px 12px; box-sizing: border-box; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ai-pane-title > div { display: grid; gap: 2px; }
.ai-pane-title span, .ai-pane-title small { color: var(--text-mute); font-size: 11px; }
.ai-patient-list, .ai-result-list { max-height: calc(100vh - 315px); overflow: auto; padding: 7px; }
.ai-patient-item, .ai-result-item {
  appearance: none; width: 100%; border: 1px solid transparent; background: transparent;
  color: var(--text); border-radius: 10px; padding: 9px; text-align: left; cursor: pointer;
}
.ai-patient-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ai-patient-item:hover, .ai-result-item:hover { background: var(--bg-elevated); }
.ai-patient-item.active, .ai-result-item.active {
  background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}
.ai-avatar {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  color: var(--primary); background: var(--bg-elevated); font-weight: 800; border: 1px solid var(--border);
}
.ai-patient-name { min-width: 0; display: grid; gap: 2px; }
.ai-patient-name b, .ai-patient-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-patient-name b { font-size: 12.5px; }
.ai-patient-name small { color: var(--text-mute); font-size: 10.5px; }
.ai-count {
  min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 999px; background: var(--amber-bg); color: var(--amber-text); font-size: 11px; font-weight: 800;
}
.ai-count.done { background: var(--ok-soft); color: var(--ok-text); }
.ai-result-item { display: grid; gap: 5px; margin-bottom: 4px; }
.ai-result-item > b { font-size: 12.5px; line-height: 1.35; }
.ai-result-item > span, .ai-result-item > small { color: var(--text-mute); font-size: 10.5px; line-height: 1.35; }
.ai-result-topline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ai-status, .ai-email-state, .ai-value-state {
  display: inline-flex; width: max-content; align-items: center; border-radius: 999px;
  padding: 2px 7px; font-size: 10px; font-weight: 800;
}
.ai-clinical-state {
  display: inline-flex; width: max-content; max-width: 100%; align-items: center;
  border: 1px solid transparent; border-radius: 999px; padding: 4px 9px;
  font-size: 10.5px; line-height: 1.25; font-weight: 800;
}
.ai-clinical-state.compact { padding: 2px 7px; font-size: 10px; }
.ai-clinical-state.danger { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.ai-clinical-state.warn { color: var(--amber-text); background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber-text) 22%, transparent); }
.ai-clinical-state.ok { color: var(--ok-text); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok-text) 20%, transparent); }
.ai-clinical-state.neutral { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); }
.ai-status.ok, .ai-email-state.ok, .ai-value-state.ok { color: var(--ok-text); background: var(--ok-soft); }
.ai-status.warn, .ai-email-state.warn, .ai-value-state.warn { color: var(--amber-text); background: var(--amber-bg); }
.ai-status.info, .ai-email-state.info, .ai-value-state.info { color: var(--primary); background: var(--primary-soft); }
.ai-status.danger, .ai-email-state.danger, .ai-value-state.danger { color: var(--danger); background: var(--danger-bg); }
.ai-value-state.neutral { color: var(--text-mute); background: var(--surface-2); border: 1px solid var(--border); }
.ai-status.mute { color: var(--text-mute); background: var(--bg-elevated); }
.ai-workbench { min-width: 0; max-height: calc(100vh - 255px); overflow: auto; padding: 15px; background: var(--bg); }
.ai-workbench-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px;
}
.ai-workbench-head h2 { margin: 0; font-size: 19px; }
.ai-workbench-head p { color: var(--text-mute); margin: 3px 0 0; font-size: 12px; }
.ai-head-states { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ai-source-card, .ai-compose-card, .ai-teach-card, .ai-private-analysis, .ai-private-review, .ai-patient-preview {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated);
}
.ai-source-card { padding: 13px; margin-bottom: 13px; }
.ai-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ai-section-head h2 { margin: 0; font-size: 17px; }
.ai-section-head p { margin: 3px 0 0; color: var(--text-mute); font-size: 11.5px; }
.ai-analytes { overflow: auto; max-height: 430px; border: 1px solid var(--border); border-radius: 9px; }
.ai-analytes .data-table { margin: 0; }
.ai-analytes .data-table th, .ai-analytes .data-table td { padding: 9px 8px; font-size: 12px; }
.ai-analytes tr.is-abnormal { background: var(--amber-bg); }
.ai-analytes tr.is-critical { background: var(--danger-bg); }
.ai-analytes tr.is-unknown { background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
.ai-analyte-value { font-weight: 750; }
.ai-auto-presentation {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
}
.ai-auto-presentation > span:last-child { color: var(--text-mute); font-size: 10.5px; }
.ai-source-details { margin-top: 9px; }
.ai-source-details summary, .ai-patient-preview summary, .ai-private-review summary, .ai-private-analysis summary {
  cursor: pointer; font-size: 12px; font-weight: 750;
}
.ai-source-raw {
  max-height: 430px; overflow: auto; white-space: pre-wrap; margin: 8px 0 0; padding: 12px;
  border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ai-source-raw.modal-raw { max-height: 72vh; }
.ai-source-image { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; }
.ai-writing-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(265px, .8fr); gap: 13px; align-items: start; }
.ai-editor-stack { display: grid; gap: 11px; }
.ai-compose-card, .ai-teach-card { padding: 13px; }
.ai-compose-card.doctor { border-left: 4px solid var(--primary); }
.ai-compose-card h3, .ai-teach-card h3 { margin: 0 0 3px; font-size: 15px; }
.ai-help { margin: 0 0 9px; color: var(--text-mute); font-size: 11.5px; line-height: 1.45; }
.ai-patient-text, .ai-doctor-text, .ai-teach-input { width: 100%; box-sizing: border-box; line-height: 1.55; resize: vertical; }
.ai-checkline { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; color: var(--text-soft); font-size: 11.5px; line-height: 1.4; }
.ai-checkline input { margin-top: 2px; flex: 0 0 auto; }
.ai-teach-thread { display: grid; gap: 7px; max-height: 270px; overflow: auto; margin: 8px 0 10px; }
.ai-teach-bubble { display: grid; gap: 3px; padding: 8px 9px; border-radius: 10px; font-size: 11.5px; line-height: 1.45; }
.ai-teach-bubble.doctor { margin-left: 18px; background: var(--primary-soft); border-bottom-right-radius: 3px; }
.ai-teach-bubble.ai { margin-right: 18px; background: var(--surface-2); border-bottom-left-radius: 3px; }
.ai-teach-bubble small { color: var(--text-mute); font-size: 9.5px; }
.ai-patient-preview { overflow: hidden; }
.ai-patient-preview > summary { padding: 10px 12px; background: var(--primary-soft); color: var(--primary); }
.ai-patient-preview-body { display: grid; gap: 7px; padding: 12px; }
.ai-preview-meta { color: var(--text-mute); font-size: 11px; }
.ai-patient-copy { margin: 0; white-space: pre-wrap; line-height: 1.55; font-size: 12.5px; }
.ai-doctor-message { padding: 10px 11px; border-left: 4px solid var(--primary); border-radius: 8px; background: var(--primary-soft); }
.ai-doctor-message.is-empty { opacity: .65; }
.ai-doctor-message b { display: block; margin-bottom: 5px; font-size: 12px; }
.pps-doctor-reply {
  margin-top: 8px; padding: 9px 10px; border-left: 4px solid var(--primary);
  border-radius: 8px; background: var(--primary-soft); color: var(--text);
}
.pps-doctor-reply b { display: block; margin-bottom: 4px; font-size: 11.5px; }
.pps-doctor-reply p { margin: 0; white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; }
.ai-publish-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border)); border-radius: 12px; background: var(--primary-soft);
}
.ai-publish-bar > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ai-publish-bar b { font-size: 12px; overflow-wrap: anywhere; }
.ai-publish-bar small { color: var(--text-mute); font-size: 10.5px; }
.ai-publish-actions, .ai-rating-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ai-send-button { white-space: nowrap; }
.ai-private-review, .ai-private-analysis { padding: 10px 12px; color: var(--text-soft); }
.ai-private-review-body { display: grid; gap: 8px; padding-top: 10px; }
.ai-private-analysis pre { white-space: pre-wrap; margin: 9px 0 0; font: 12px/1.55 inherit; }
.ai-editor-wait { display: flex; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ai-editor-wait p { margin: 4px 0 0; color: var(--text-mute); font-size: 12px; }
.ai-editor-wait.error, .ai-studio-error { color: var(--danger); background: var(--danger-bg); }
.ai-empty { padding: 24px; text-align: center; color: var(--text-mute); }

@media (max-width: 1360px) {
  .ai-result-studio { grid-template-columns: 180px 215px minmax(0, 1fr); }
  .ai-writing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
  .ai-studio-toolbar { grid-template-columns: 1fr auto; }
  .ai-order-note { display: none; }
  .ai-result-studio { grid-template-columns: 215px minmax(0, 1fr); }
  .ai-results-pane { border-right: 0; }
  .ai-workbench { grid-column: 1 / -1; max-height: none; border-top: 1px solid var(--border); }
  .ai-patient-list, .ai-result-list { max-height: 360px; }
}
@media (max-width: 700px) {
  .ai-studio-header { align-items: flex-start; flex-direction: column; }
  .ai-studio-toolbar { grid-template-columns: 1fr; }
  .ai-result-studio { display: block; }
  .ai-studio-pane { border-right: 0; border-bottom: 1px solid var(--border); }
  .ai-patient-list, .ai-result-list { max-height: 300px; }
  .ai-publish-bar { align-items: stretch; flex-direction: column; }
}

.gpu-work-catalog { display: grid; gap: 8px; }
.gpu-work-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg));
}
@media (max-width: 880px) {
  .gpu-ops-head { flex-direction: column; }
  .gpu-summary-grid { grid-template-columns: 1fr; }
}

/* Sélecteur de type d'acte (Visite / Consultation / Avis) — segmented control. */
.btn-type-acte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: var(--text-base);
  font-weight: 600;
  background: var(--bg-input);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-right: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.btn-type-acte:first-child { border-radius: 8px 0 0 8px; }
.btn-type-acte:last-child  { border-radius: 0 8px 8px 0; border-right: 1px solid var(--border); }
.btn-type-acte:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-type-acte.active {
  background: var(--primary);
  color: var(--text-on-primary, #fff);
  border-color: var(--primary);
}
.btn-type-acte.active + .btn-type-acte { border-left-color: var(--primary); }

/* Chips IA : boutons d'analyse compacts */
.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .06s;
  white-space: nowrap;
}
.btn-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text-on-soft); }
.btn-chip:active { transform: translateY(1px); }
.btn-chip-ghost { background: transparent; color: var(--text-soft); }
.btn-chip-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
/* ── Drawer Notes brutes / transcription ───────────────────────────────── */
.transcript-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.transcript-drawer-body textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--text-md, 14px);
  line-height: 1.6;
  color: var(--text);
}
.transcript-drawer-body textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.transcript-drawer-hint {
  font-size: var(--text-sm, 12px);
  color: var(--text-mute);
  margin-right: auto;
  align-self: center;
}

/* ── Timeline verticale (sidebar droite consultation) ─────────────────── */
.tlv-loading, .tlv-empty {
  padding: 16px;
  font-size: var(--text-sm);
  color: var(--text-mute);
  text-align: center;
}
.tlv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.tlv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--text-soft);
  transition: all var(--transition-fast);
  --chip-color: var(--primary);
}
.tlv-chip:hover { border-color: var(--chip-color); color: var(--text); }
.tlv-chip.active {
  background: color-mix(in srgb, var(--chip-color) 14%, transparent);
  border-color: var(--chip-color);
  color: var(--text);
}
.tlv-chip-icon { font-size: var(--text-base); line-height: 1; }
.tlv-chip-count { font-size: var(--text-xs, 11px); font-weight: 700; }

.tlv-list {
  position: relative;
  padding: 8px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Séparateur mois/année sur le rail de la timeline */
.tlv-sep {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: 8px 0 3px -2px;
  padding: 1px 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* Axe vertical décoré derrière les dots */
.tlv-list::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 19px;
  width: 1.5px;
  background: var(--border);
  border-radius: 2px;
  pointer-events: none;
}
.tlv-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 4px 7px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background .1s;
  --dot-color: var(--primary);
}
.tlv-item:hover { background: var(--bg-hover); }
.tlv-item-dot {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--dot-color);
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px var(--dot-color);
  z-index: 1;
}
.tlv-item-body { flex: 1; min-width: 0; line-height: 1.3; }
.tlv-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-mute);
  font-weight: 600;
}
.tlv-item-icon { font-size: var(--text-sm); }
.tlv-item-date { color: var(--text); font-weight: 700; }
.tlv-item-badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}
.tlv-item-summary {
  font-size: var(--text-sm);
  color: var(--text-soft);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Responsive : sidebar empilée sous le main en dessous de 1100px */
@media (max-width: 1100px) {
  .consult-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .consult-side {
    position: static;
    max-height: none;
  }
}

/* =====================================================================
   APERÇU TIMELINE (modale détail rapport / imagerie / biologie / consult)
   ===================================================================== */
.rpt-doc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px;
  max-height: 72vh;
  overflow-y: auto;
}
.rpt-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rpt-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl, 22px);
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
}
.rpt-header-icon.rpt-icon-bio { background: rgba(239, 68, 68, 0.14); color: var(--danger); }
.rpt-header-text { flex: 1; min-width: 0; }
.rpt-header-title {
  font-size: var(--text-xl, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
}
.rpt-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.rpt-header-meta span { display: inline-flex; align-items: center; gap: 4px; }
.rpt-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  flex-shrink: 0;
}
.rpt-badge-danger { background: rgba(239, 68, 68, 0.14); color: var(--danger-text); }
.rpt-badge-success { background: rgba(16, 185, 129, 0.14); color: var(--ok-text); }
.rpt-badge-warn { background: rgba(245, 158, 11, 0.14); color: var(--warn-text); }
.rpt-status-draft { background: rgba(245, 158, 11, 0.14); color: var(--warn-text); }
.rpt-status-final { background: rgba(16, 185, 129, 0.14); color: #047857; }
.rpt-status-sent { background: rgba(59, 130, 246, 0.14); color: #1e40af; }
.rpt-status-ehbox { background: rgba(99, 102, 241, 0.14); color: #4338ca; }

/* ── Sections (Motif, Technique, Conclusion…) ────────────────────────── */
.rpt-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
  --section-color: var(--primary);
}
.rpt-section-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rpt-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--section-color);
  flex-shrink: 0;
}
.rpt-section-kind-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--section-color) 11%, transparent);
  color: var(--section-color);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}
.rpt-section-title {
  font-size: var(--text-base, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--section-color);
}
.rpt-section-hint {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-mute);
}
.rpt-section-body {
  font-size: var(--text-md, 14px);
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.rpt-section-prewrap { font-family: inherit; }

/* Variantes colorées par type de section */
.rpt-section-conclusion {
  --section-color: #059669;
  background: linear-gradient(0deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.06)), var(--bg-elevated);
  border-color: rgba(16, 185, 129, 0.3);
}
.rpt-section-conclusion .rpt-section-body { font-weight: 500; }

/* Encadré Conclusion mis en avant, au-dessus du document complet. Fond neutre
   (27/07, Dr Nanni : le mint « pas joli » nuit au contraste) — seul le texte
   porte l'accent, via --success (même langage visuel que les valeurs de
   labo hors norme : gras + couleur, cf. .dc-abnormal dans ce même fichier). */
.rpt-conclusion-callout {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.rpt-conclusion-callout-title {
  font-size: var(--text-base, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success);
  margin-bottom: 6px;
}
.rpt-conclusion-callout-body {
  font-size: var(--text-md, 14px);
  line-height: 1.65;
  font-weight: 700;
  color: var(--success);
  white-space: pre-wrap;
  word-break: break-word;
}
.rpt-conclusion-callout-body + .rpt-conclusion-callout-body { margin-top: 8px; }

/* H2 — surlignage de la recherche locale du « Dossier complet IA » */
mark.fs-hit { background: rgba(245, 158, 11, 0.3); color: inherit; padding: 0 1px; border-radius: 2px; }
mark.fs-hit-active { background: rgba(245, 158, 11, 0.85); color: #1a1a1a; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5); }

/* H2 — lignes de résultat du moteur de recherche (cliquables → ouvrent la source) */
.fs-result-row {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 7px 12px; text-align: left; cursor: pointer;
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font: inherit;
}
.fs-result-row:last-child { border-bottom: none; }
.fs-result-row:hover, .fs-result-row:focus-visible { background: var(--bg-elevated, rgba(59, 130, 246, 0.08)); outline: none; }
.rpt-section-diagnostic {
  --section-color: #7c3aed;
  background: linear-gradient(0deg, rgba(139, 92, 246, 0.06), rgba(139, 92, 246, 0.06)), var(--bg-elevated);
  border-color: rgba(139, 92, 246, 0.3);
}
.rpt-section-context { --section-color: #0891b2; }
.rpt-section-technique { --section-color: #475569; }
.rpt-section-plan { --section-color: var(--warning-hover, #d97706); }
.rpt-section-comment { --section-color: #6366f1; }
.rpt-section-meta { --section-color: #94a3b8; }
.rpt-section-meta .rpt-section-title { letter-spacing: 0.03em; }
.rpt-section-meta .rpt-section-body { font-size: var(--text-sm); color: var(--text-soft); }

/* ── Grille de valeurs biologie anormales ────────────────────────────── */
.rpt-bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.rpt-bio-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: default;
  transition: border-color .12s, transform .06s, box-shadow .12s;
}
.rpt-bio-card.is-clickable { cursor: pointer; }
.rpt-bio-card.is-clickable:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.rpt-bio-card.is-clickable:active { transform: translateY(1px); }
.rpt-bio-card.is-abnormal { border-left: 3px solid var(--warning); }
.rpt-bio-card.is-critical { border-left: 3px solid var(--danger); background: rgba(239, 68, 68, 0.04); }
.rpt-bio-name {
  font-size: var(--text-base, 13px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.rpt-bio-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rpt-bio-num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.rpt-bio-card.is-critical .rpt-bio-num { color: var(--danger-text); }
.rpt-bio-unit { font-size: var(--text-xs); color: var(--text-mute); }
.rpt-bio-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.rpt-bio-status-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--warn-text);
}
.rpt-bio-card.is-critical .rpt-bio-status-pill { background: rgba(239, 68, 68, 0.14); color: var(--danger-text); }
.rpt-bio-trend {
  font-size: var(--text-xs);
  color: var(--primary);
  font-weight: 600;
}

/* ── Bloc replié pour le texte brut ──────────────────────────────────── */
.rpt-raw {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.rpt-raw summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: 600;
  user-select: none;
}
.rpt-raw[open] summary { margin-bottom: 8px; }
.rpt-raw pre {
  margin: 0;
  font-size: var(--text-sm, 12px);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-soft);
  max-height: 320px;
  overflow-y: auto;
}

/* ══ Vue Documents — onglets Entrants / Sortants ════════════════════════ */
.doc-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-faint, #e5e7eb);
  gap: 0;
  margin-bottom: 2px;
}
.doc-tab {
  padding: 9px 22px;
  font-size: var(--text-md, 14px);
  font-weight: 500;
  color: var(--text-mute, #6b7280);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  letter-spacing: 0.01em;
}
.doc-tab:hover { color: var(--text, #111827); }
.doc-tab.active {
  color: var(--primary, #2563eb);
  border-bottom-color: var(--primary, #2563eb);
  font-weight: 600;
}

/* ══ Vue Documents — liste premium (cartes colorées par catégorie) ════════ */
.res-wrap { display: flex; flex-direction: column; gap: 14px; }

/* Filtres : chips colorées (réutilise le look .tlv-chip de la timeline). */
.res-filters { display: flex; flex-wrap: wrap; gap: 7px; }

/* Bandeau récap (total · nouveaux [filtre cliquable] · lus). */
.res-summary {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--text-base, 13px); color: var(--text-mute); padding: 0 2px;
}
.res-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-base, 13px); border: none; background: transparent; cursor: default;
  padding: 0; color: var(--text-mute);
}
.res-count-new {
  cursor: pointer; font-weight: 700; color: var(--primary);
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  transition: background var(--transition-fast);
}
.res-count-new:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.res-count-new.active {
  color: #fff; background: var(--primary);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 60%, transparent);
}
.res-count-new.active .res-new-dot { background: #fff; box-shadow: none; }
.res-count-read { color: var(--text-soft); }
.res-new-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Groupe par mois. */
.res-group-h {
  position: sticky; top: 0; z-index: 2;
  font-size: var(--text-sm, 12px); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-mute);
  padding: 10px 2px 6px;
  background: linear-gradient(180deg, var(--bg) 60%, transparent);
  backdrop-filter: blur(2px);
}

.res-list { display: flex; flex-direction: column; gap: 7px; }

/* Carte résultat. */
.res-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .06s;
  --cat-color: var(--primary);
}
.res-card:hover {
  border-color: color-mix(in srgb, var(--cat-color) 55%, var(--border));
  box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--cat-color) 35%, transparent), var(--shadow-sm);
  transform: translateY(-1px);
}
.res-card:active { transform: translateY(0); }
/* Liseré couleur de catégorie. */
.res-card::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--cat-color);
  opacity: .85;
}
/* Non lu : fond légèrement teinté + liseré plein. */
.res-card.is-unread {
  background: linear-gradient(0deg, color-mix(in srgb, var(--cat-color) 5%, transparent), color-mix(in srgb, var(--cat-color) 5%, transparent)), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--cat-color) 30%, var(--border));
}

/* Bloc icône coloré. */
.res-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); flex-shrink: 0;
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
}

/* Colonne centrale. */
.res-main { min-width: 0; }
.res-title {
  font-size: var(--text-md); font-weight: 600; color: var(--text);
  line-height: 1.35; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.res-card.is-unread .res-title { font-weight: 700; }
.res-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 3px; font-size: var(--text-sm); color: var(--text-mute); min-width: 0;
}
.res-sub .res-party {
  font-weight: 600; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.res-sub .res-dot { color: var(--border-strong, #cbd5e1); }
.res-cat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--cat-color) 13%, transparent);
  color: var(--cat-color);
  flex-shrink: 0;
}
/* Tri d'urgence (CRITIQUE / À revoir) — couleurs inline (voir triageMeta JS),
   ce bloc ne fixe que la forme, pas la couleur. Rouge/ambre = sémantique
   uniquement (jamais de badge pour « normal »). */
.res-triage-chip {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 999px;
  font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  flex-shrink: 0;
}

/* Aperçu : conclusion / objet du compte-rendu (1 ligne, pour trier vite). */
.res-snippet {
  margin-top: 4px; font-size: var(--text-base, 13px); line-height: 1.4; color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}

/* Déjà lu : grisé / atténué (la nouveauté ressort, le reste s'efface). */
.res-card.is-read { background: var(--bg); }
.res-card.is-read .res-ico { background: var(--bg-hover); filter: grayscale(.5) opacity(.85); }
.res-card.is-read::before { opacity: .3; }
.res-card.is-read .res-title { color: var(--text-soft); font-weight: 500; }
.res-card.is-read .res-snippet { color: var(--text-mute); }
.res-card.is-read .res-cat-pill {
  background: var(--bg-hover); color: var(--text-mute);
}

/* Colonne droite : badge nouveau + date + supprimer. */
.res-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.res-new {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: var(--text-xs, 11px); font-weight: 800; letter-spacing: 0.02em;
  color: #fff; background: var(--cat-color);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--cat-color) 60%, transparent);
}
.res-date {
  font-size: var(--text-sm); color: var(--text-mute); white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 76px; text-align: right;
}
.res-del {
  opacity: 0; border: none; background: transparent; cursor: pointer;
  color: var(--text-mute); font-size: var(--text-xl); line-height: 1;
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.res-card:hover .res-del { opacity: 1; }
.res-del:hover { background: rgba(239,68,68,0.12); color: var(--danger); }

/* Détail modale : préambule sans titre rendu en lecture confortable. */
.rpt-section-prewrap { white-space: pre-wrap; word-break: break-word; }

/* ── Bibliothèque de documents (modale) ──────────────────────────────── */
.doclib { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 16px; min-height: 0; }
.doclib-search {
  width: 100%; padding: 10px 14px; font-size: var(--text-md);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.doclib-search:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; }
.doclib-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.doclib-chip {
  padding: 5px 12px; font-size: var(--text-sm); font-weight: 500;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-soft); cursor: pointer;
  transition: all var(--transition-fast);
}
.doclib-chip:hover { border-color: var(--primary); color: var(--primary); }
.doclib-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.doclib-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  overflow-y: auto; padding: 2px; flex: 1; min-height: 0; align-content: start;
}
.doclib-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .12s, box-shadow .12s, background .12s;
}
.doclib-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.doclib-card.stub { opacity: .62; }
.doclib-card.stub:hover { border-color: var(--border-strong); box-shadow: none; }
.doclib-card-icon { font-size: var(--text-2xl); line-height: 1; flex-shrink: 0; width: 28px; text-align: center; }
.doclib-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doclib-card-title { font-size: var(--text-md, 14px); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.doclib-card-desc { font-size: var(--text-sm, 12px); color: var(--text-mute); }
.doclib-badge {
  font-size: var(--text-2xs, 10px); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 6px; background: var(--bg); color: var(--text-mute); border: 1px solid var(--border);
}
.doclib-empty { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--text-mute); font-size: var(--text-base); }

/* ── Bloc questionnaire IRM (formulaire imagerie) ────────────────────── */
.imagerie-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.imagerie-mri { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.imagerie-mri-note { font-size: var(--text-sm, 12px); color: var(--warn-text, #92400E); }
.imagerie-mri-row { display: flex; flex-direction: column; gap: 4px; }
.imagerie-mri-row label { font-size: var(--text-sm); }
.clinical-request-form { gap: 12px; }
.clinical-request-intro { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--bg-soft); color: var(--text-soft); font-size: var(--text-sm); }
.clinical-request-intro strong { color: var(--text); font-size: var(--text-base); }
.clinical-request-section { min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.clinical-request-section legend { padding: 0 6px; color: var(--text); font-size: var(--text-sm); font-weight: 700; }
.clinical-request-section textarea { width: 100%; margin-top: 8px; }
.imagerie-relevant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.imagerie-relevant-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 8px; color: var(--text-soft); font-size: var(--text-sm); }
.imagerie-relevant-row .input { width: 100%; }
.imagerie-prior-types { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.imagerie-prior-types .imagerie-check { min-height: 26px; }
@media (max-width: 720px) {
  .imagerie-relevant-grid { grid-template-columns: 1fr; }
  .imagerie-relevant-row { grid-template-columns: minmax(0, 1fr) 120px; }
}
.imagerie-hint { font-size: var(--text-sm, 12px); color: var(--text-mute); background: var(--bg); padding: 8px 10px; border-radius: var(--radius); }

/* ── Sélecteur clinique (médicaments + diagnostics cochables) ─────────── */
.clinical-picker { display: flex; flex-direction: column; gap: 12px; }
.pick-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.pick-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.pick-hint { font-size: var(--text-xs, 11px); font-weight: 400; color: var(--text-mute); }
.pick-list { display: flex; flex-direction: column; gap: 4px; }
.pick-list.pick-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.pick-item { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-base, 13px); font-weight: 400; cursor: pointer; padding: 3px 4px; border-radius: 6px; }
.pick-item:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
.pick-item input { margin-top: 2px; flex-shrink: 0; }
.pick-empty { font-size: var(--text-sm); color: var(--text-mute); font-style: italic; }
@media (max-width: 720px) { .pick-list.pick-cols { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .doclib-list { grid-template-columns: 1fr; }
}

.consult-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Dr Nanni 12/07 : PLUS de bannière flottante. Footer en FLUX NORMAL — il ne
     chevauche plus le contenu (avant : sticky;bottom:0 + verre flou = « jeu de quilles »). */
  position: static;
}
.consult-footer-bar .footer-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.consult-footer-bar .footer-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base, 13px);
}
.consult-footer-bar .footer-field span {
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.consult-footer-bar .footer-field select,
.consult-footer-bar .footer-field input {
  padding: 4px 8px;
  font-size: var(--text-base, 13px);
}
.consult-footer-bar .footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.consult-footer-bar .footer-actions .btn-ghost,
.consult-footer-bar .footer-actions .btn-primary {
  padding: 6px 12px;
  font-size: var(--text-base, 13px);
}

/* =====================================================================
   Chat
   ===================================================================== */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; height: calc(100vh - var(--topbar-h) - 50px); }
.chat-threads { overflow-y: auto; }
.chat-thread {
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 4px;
  transition: var(--transition);
}
.chat-thread:hover { background: var(--bg-hover); }
.chat-thread.active { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.chat-thread .title { font-weight: 600; font-size: var(--text-md, 14px); }
.chat-thread .sub { font-size: var(--text-xs); color: var(--text-mute); margin-top: 2px; }

.chat-window { display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-md, 14px);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-bubble.user {
  background: var(--primary);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-bubble.assistant {
  background: var(--bg-hover);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.chat-input-bar textarea {
  flex: 1;
  resize: none;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
  font-size: var(--text-md, 14px);
  min-height: 42px;
  max-height: 200px;
}
.chat-input-bar textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* =====================================================================
   Calendar
   ===================================================================== */
.calendar-week {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}
.cal-head { padding: 10px; text-align: center; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.cal-head.today { color: var(--primary); }
.cal-head:last-child { border-right: none; }
.cal-time { padding: 6px 10px; text-align: right; font-size: var(--text-xs); color: var(--text-mute); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); height: 56px; }
.cal-cell { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); height: 56px; position: relative; cursor: pointer; transition: var(--transition); }
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell:last-child { border-right: none; }
.cal-event {
  position: absolute;
  left: 4px; right: 4px;
  padding: 4px 6px;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  border-radius: 6px;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid var(--primary);
  cursor: pointer;
  z-index: 2;
}
.cal-event-block {
  margin: 4px;
  padding: 4px 8px;
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

/* =====================================================================
   Stats charts
   ===================================================================== */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding-top: 14px;
}
.bar {
  flex: 1;
  background: linear-gradient(to top, var(--primary), var(--accent));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  transition: var(--transition);
  cursor: pointer;
}
.bar:hover { opacity: 0.85; transform: scaleY(1.02); transform-origin: bottom; }
.bar-tooltip {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--text);
  color: var(--bg);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.bar:hover .bar-tooltip { opacity: 1; }
.chart-x-axis {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.chart-x-axis span {
  flex: 1;
  font-size: var(--text-2xs, 10px);
  color: var(--text-mute);
  text-align: center;
}

/* =====================================================================
   Loaders
   ===================================================================== */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Placeholder de chargement animé (balayage). Utiliser <div class="skeleton">
   avec une hauteur/largeur fixées pour pré-tracer le contenu à venir. */
/* Bandeau « patient décédé » — volontairement sombre dans les DEUX thèmes
   (convention clinique : signal grave, jamais anodin) — donc PAS piloté par
   les tokens de fond habituels. En clair il tranche nettement sur les cartes
   blanches ; en sombre #1f2430 devenait presque indiscernable des cartes
   environnantes (--bg-elevated:#131826, très proche) — ajout d'une bordure
   pour le distinguer sans changer son caractère toujours-sombre.
   Avant : couleurs codées en dur inline (patients.js), ignorées ici. */
.deceased-banner { background: #1f2430; color: #e6e8ee; }
[data-theme='dark'] .deceased-banner { border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-active) 37%, var(--bg-hover) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 12px; margin: 7px 0; }
.skeleton-text.sk-lg { height: 16px; }
.skeleton-text.sk-w60 { width: 60%; } .skeleton-text.sk-w40 { width: 40%; } .skeleton-text.sk-w80 { width: 80%; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* Indicateur flottant « tâche en arrière-plan » (nettoyage du dossier).
   Coin inférieur droit, non bloquant — le dossier reste navigable. */
.record-clean-badge {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  pointer-events: none;
  animation: record-clean-in .22s ease-out;
}
.record-clean-review-list { display: grid; gap: 8px; max-height: 58vh; overflow: auto; }
.record-clean-review-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  background: var(--bg-elevated);
}
.record-clean-review-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.record-clean-review-item input { margin-top: 3px; }
@keyframes record-clean-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Kanban Board
   ===================================================================== */
.kanban-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  min-height: calc(100vh - 160px);
}
.kanban-col {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
}
.kanban-col.dropping {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.kanban-col-h {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kanban-col-title { font-weight: 600; font-size: var(--text-base); }
.kanban-col-count {
  font-size: var(--text-xs);
  color: var(--text-mute);
  background: var(--bg-elevated);
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 4px;
}
.kanban-col-body {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.kanban-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
.kanban-card-title { font-weight: 600; font-size: var(--text-base); margin-bottom: 4px; }
.kanban-card-body { font-size: var(--text-sm); color: var(--text-soft); line-height: 1.45; }

/* Mode "À faire" pleine largeur — une seule colonne, pas de scroll horizontal,
   messages affichés en entier (pas de truncation visuelle). */
.kanban-board.single-col {
  display: block;
  overflow-x: visible;
  grid-auto-columns: none;
}
.kanban-board.single-col .kanban-col {
  width: 100%;
  max-width: none;
  max-height: none;
}
.kanban-board.single-col .kanban-col-body {
  overflow-y: visible;
}
.kanban-board.single-col .kanban-card-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.kanban-card.done {
  opacity: 0.72;
  background: var(--bg-sidebar);
}
.kanban-card.done .kanban-card-title {
  text-decoration: line-through;
  color: var(--text-mute);
}
.kanban-card-actions button {
  white-space: nowrap;
}
.loading-block {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 60px;
  color: var(--text-mute);
  font-size: var(--text-base);
}

/* =====================================================================
   Markdown
   ===================================================================== */
.md { font-size: var(--text-md, 14px); line-height: 1.6; }
.md h1, .md h2, .md h3 { margin: 18px 0 8px; font-weight: 700; }
.md h1 { font-size: var(--text-xl); }
.md h2 { font-size: var(--text-lg); }
.md h3 { font-size: var(--text-md); }
.md p { margin: 8px 0; }
.md ul, .md ol { padding-left: 22px; margin: 8px 0; list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin: 3px 0; }
.md code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: 4px;
}
.md pre {
  background: var(--bg-hover);
  padding: 12px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--text-sm);
}
.md strong { font-weight: 700; }
.md em { font-style: italic; }

/* =====================================================================
   Rapports IA — lecture quotidienne, historique et envoi explicite
   ===================================================================== */
.ai-reports-page {
  max-width: 1480px;
  margin: 0 auto;
}

.ai-reports-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.ai-reports-header h2 { margin: 2px 0 5px; font-size: 26px; }
.ai-reports-header p { margin: 0; max-width: 780px; line-height: 1.5; }
.ai-reports-eyebrow {
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-report-privacy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--success, #16a34a) 30%, var(--border));
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--success, #16a34a) 7%, var(--bg-elevated));
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.ai-report-privacy strong { color: var(--success, #15803d); white-space: nowrap; }

.ai-report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.ai-report-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong, var(--border));
  border-radius: var(--radius-md, 10px);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
}
.ai-report-summary--good { border-left-color: var(--success, #16a34a); }
.ai-report-summary--warning { border-left-color: var(--warning, #d97706); }
.ai-report-summary--danger { border-left-color: var(--danger, #dc2626); }
.ai-report-summary-label {
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ai-report-summary strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.ai-report-summary small { overflow: hidden; color: var(--text-soft); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

.ai-report-settings { margin-bottom: 14px; padding: 16px 18px; }
.ai-report-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ai-report-section-head h3 { margin: 0 0 3px; font-size: 15px; }
.ai-report-section-head p { margin: 0; font-size: 12px; }
.ai-report-settings-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) minmax(110px, .45fr) minmax(210px, 1fr) minmax(210px, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.ai-report-field { display: grid; gap: 5px; color: var(--text-soft); font-size: 11.5px; font-weight: 650; }
.ai-report-field input { width: 100%; min-height: 38px; }
.ai-report-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
.ai-report-check:hover { background: var(--bg-hover); }
.ai-report-check input { width: 17px; height: 17px; flex: 0 0 auto; }
.ai-report-check span { display: grid; gap: 2px; }
.ai-report-check strong { font-size: 12.5px; }
.ai-report-check small { color: var(--text-mute); font-size: 10.5px; font-weight: 400; line-height: 1.3; }
.ai-report-email-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  font-size: 11.5px;
}
.ai-report-email-state--ready { color: var(--success, #15803d); }
.ai-report-email-state--warning { color: var(--warning, #b45309); }

.ai-reports-workspace {
  display: grid;
  grid-template-columns: minmax(245px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.ai-report-history,
.ai-report-reader { padding: 16px; }
.ai-report-history {
  position: sticky;
  top: calc(var(--topbar-h, 56px) + 14px);
  max-height: calc(100vh - var(--topbar-h, 56px) - 42px);
  overflow: hidden;
}
.ai-report-history-list {
  display: grid;
  gap: 6px;
  max-height: calc(100vh - var(--topbar-h, 56px) - 125px);
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ai-report-history-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.ai-report-history-item:hover { background: var(--bg-hover); }
.ai-report-history-item.active {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-elevated));
}
.ai-report-history-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ai-report-history-top strong { font-size: 12.5px; line-height: 1.35; }
.ai-report-history-item small { color: var(--text-mute); font-size: 10.5px; }

.ai-report-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-subtle, var(--bg));
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.ai-report-status--ready { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.ai-report-status--running { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ai-report-status--sent { border-color: #86efac; background: #f0fdf4; color: #166534; }
.ai-report-status--failed { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
[data-theme='dark'] .ai-report-status--ready { background: #172554; color: #bfdbfe; }
[data-theme='dark'] .ai-report-status--running { background: #451a03; color: #fde68a; }
[data-theme='dark'] .ai-report-status--sent { background: #052e16; color: #bbf7d0; }
[data-theme='dark'] .ai-report-status--failed { background: #450a0a; color: #fecaca; }

.ai-report-reader { min-width: 0; }
.ai-report-reader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.ai-report-reader-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ai-report-reader-title h3 { margin: 0; font-size: 17px; }
.ai-report-reader-meta { margin-top: 5px; color: var(--text-mute); font-size: 11.5px; }
.ai-report-reader-actions { display: flex; gap: 7px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.ai-report-reader-notice:empty { display: none; }
.ai-report-callout {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--primary) 5%, var(--bg-elevated));
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.45;
}
.ai-report-callout strong { color: var(--text); white-space: nowrap; }
.ai-report-callout--error { border-color: #fca5a5; background: color-mix(in srgb, #dc2626 6%, var(--bg-elevated)); color: var(--danger, #b91c1c); }
.ai-report-body {
  min-height: 420px;
  max-width: 980px;
  padding: 8px 7px 30px 2px;
  color: var(--text);
}
.ai-report-body h1 { margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 21px; }
.ai-report-body h2 { margin-top: 24px; color: var(--primary); font-size: 17px; }
.ai-report-body p,
.ai-report-body li { line-height: 1.65; }
.ai-report-loading,
.ai-report-empty { padding: 28px 10px; color: var(--text-mute); text-align: center; }
.ai-report-empty { display: grid; gap: 4px; }

@media (max-width: 1120px) {
  .ai-report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-report-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ai-reports-header,
  .ai-report-reader-head { align-items: stretch; flex-direction: column; }
  .ai-reports-header > button { width: 100%; }
  .ai-report-privacy { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ai-reports-workspace { grid-template-columns: 1fr; }
  .ai-report-history { position: static; max-height: none; }
  .ai-report-history-list {
    display: flex;
    max-height: none;
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ai-report-history-item { min-width: 230px; }
  .ai-report-reader-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .ai-report-summary-grid,
  .ai-report-settings-grid { grid-template-columns: 1fr; }
  .ai-report-summary small { white-space: normal; }
  .ai-report-email-help { align-items: flex-start; flex-direction: column; }
  .ai-report-reader-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .ai-report-reader-actions button { width: 100%; }
  .ai-report-callout { flex-direction: column; }
}

/* =====================================================================
   Empty state
   ===================================================================== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-mute);
}
.empty-state .icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover);
  border-radius: 50%;
  color: var(--text-mute);
}
.empty-state .icon svg { width: 28px; height: 28px; }
.empty-state h3 { font-size: var(--text-lg); color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: var(--text-base); max-width: 360px; margin: 0 auto 16px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  :root { --sidebar-w: 220px; --clinical-aside-w: 260px; }
  .patient-detail { grid-template-columns: var(--clinical-aside-w) 1fr; }
  .patient-side { position: static; max-height: none; }
}
/* SOAP : 2 colonnes tant que le main a au moins ~680px ; au-delà on stack. */
@media (max-width: 820px) {
  .soap-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Orchestrateur IA — Modal Ctrl+I
   ===================================================================== */
.orchestrator-modal {
  width: 680px;
  max-width: 96vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.orchestrator-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  gap: 12px;
}
.orchestrator-history {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
  max-height: 380px;
  padding: 4px 0;
}
.orchestrator-history:empty::before {
  content: 'Aucun échange encore — posez votre première question ci-dessous.';
  color: var(--text-mute);
  font-size: var(--text-base, 13px);
  font-style: italic;
  padding: 12px 0;
}
.orch-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--text-md, 14px);
  line-height: 1.6;
  max-width: 92%;
}
.orch-msg--user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.orch-msg--assistant {
  background: var(--bg);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  max-width: 98%;
}
.orch-msg--tool {
  background: var(--warn-bg);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--warn-text);
  font-size: var(--text-sm);
  align-self: flex-start;
  font-family: var(--font-mono, monospace);
}
[data-theme="dark"] .orch-msg--tool { background: #1c1500; border-color: #78350f; color: #FCD34D; }
.orch-msg--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--danger);
  align-self: flex-start;
}
.orchestrator-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.orchestrator-textarea {
  flex: 1;
  resize: none;
  font-size: var(--text-md, 14px);
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  line-height: 1.5;
  transition: border-color .15s;
}
.orchestrator-textarea:focus { outline: none; border-color: var(--primary); }
.orchestrator-input-row .btn-primary { white-space: nowrap; height: 42px; padding: 0 20px; }

/* =====================================================================
   Bandeau sticky « génération IA en cours »
   ===================================================================== */
.ai-top-banner {
  /* C2.1/C10.5 (12/07) : PLUS de bannière flottante — elle recouvrait le SOAP en
     restant épinglée en haut au scroll (position:sticky + pulse infini). Flux normal. */
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  margin: 0 0 var(--space-3);
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ai-top-banner[hidden] { display: none; }
[data-theme="dark"] .ai-top-banner {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(99, 102, 241, 0.22));
  border-color: rgba(96, 165, 250, 0.4);
}
.ai-top-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md, 14px);
  font-weight: 600;
  color: var(--primary-text-on-soft);
}
.ai-top-banner-row .spin {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  display: inline-block;
  animation: ai-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-top-banner-label { flex: 1; }

/* =====================================================================
   Scores cliniques — Modal 🧮
   ===================================================================== */
.scores-modal-body { min-height: 280px; max-height: 70vh; overflow-y: auto; padding: 4px 2px; }
.scores-loading { color: var(--text-mute); font-size: var(--text-base); padding: 24px; text-align: center; }
.scores-section { margin-bottom: 20px; }
.scores-section h4 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); margin: 0 0 8px; }
.scores-cat { margin-bottom: 14px; }
.scores-cat-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-mute); margin-bottom: 6px; }
.scores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.score-card {
  text-align: left;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.score-card:hover { border-color: var(--primary); background: var(--bg-hover); transform: translateY(-1px); }
.score-card-label { font-weight: 600; font-size: var(--text-md, 14px); color: var(--text); margin-bottom: 3px; }
.score-card-indication { font-size: var(--text-sm, 12px); color: var(--text-mute); line-height: 1.4; }
.score-card--suggested { border-color: #6EE7B7; background: #F0FDF4; }
.score-card--suggested .score-card-label { color: #065F46; }
[data-theme="dark"] .score-card--suggested { background: #052e16; border-color: #166534; }
[data-theme="dark"] .score-card--suggested .score-card-label { color: #86efac; }

.score-form-header { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score-form-header h3 { margin: 0; font-size: var(--text-lg); }
.score-form-indication { width: 100%; font-size: var(--text-sm); color: var(--text-mute); }
.score-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.score-form-grid .form-field { display: flex; flex-direction: column; }
.score-form-grid .form-field.full { grid-column: 1 / -1; }
.score-form-grid label { font-size: var(--text-sm, 12px); font-weight: 600; color: var(--text-soft); margin-bottom: 3px; }
.score-form-grid input[type="number"], .score-form-grid input[type="text"], .score-form-grid select {
  padding: 6px 8px; font-size: var(--text-base); border: 1.5px solid var(--border); border-radius: 6px; background: var(--bg-surface); color: var(--text);
}
.phq-list { display: flex; flex-direction: column; gap: 4px; }
.phq-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: var(--bg); border-radius: 4px; }
.phq-label { flex: 1; font-size: var(--text-base, 13px); }
.phq-row select { width: 56px; padding: 2px 4px; }
.score-actions { display: flex; justify-content: flex-end; padding-top: 8px; }

.score-result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 4px solid var(--text-mute);
}
.score-result--low { background: #F0FDF4; border-left-color: var(--success, #10b981); }
.score-result--mid { background: #FFFBEB; border-left-color: var(--warning, #f59e0b); }
.score-result--high { background: #FEF2F2; border-left-color: var(--danger, #ef4444); }
[data-theme="dark"] .score-result--low { background: #052e16; }
[data-theme="dark"] .score-result--mid { background: #1c1500; }
[data-theme="dark"] .score-result--high { background: #2c0a0a; }
.score-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.score-result-name { font-weight: 700; font-size: var(--text-lg, 16px); }
.score-result-value { font-weight: 700; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.score-result-category { font-size: var(--text-base); color: var(--text-soft); margin-bottom: 8px; }
.score-result-target { padding: 6px 8px; background: rgba(255,255,255,0.5); border-radius: 6px; font-size: var(--text-base); font-weight: 600; margin-bottom: 8px; }
[data-theme="dark"] .score-result-target { background: rgba(255,255,255,0.05); }
.score-result-reco { font-size: var(--text-base, 13px); line-height: 1.6; margin-bottom: 8px; white-space: pre-wrap; }
.score-result-source { font-size: var(--text-xs, 11px); color: var(--text-mute); font-style: italic; margin-bottom: 8px; }

/* =====================================================================
   Lecteur de carte eID belge
   ===================================================================== */
.eid-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; font-weight: 600;
  border-radius: 10px; transition: all 0.15s ease;
  font-family: inherit;
}
.eid-btn:disabled { opacity: 0.6; cursor: wait; }

/* Variante "hero" : bouton voyant pour les emplacements clés (toolbar
   liste patients, modal nouveau patient, header fiche patient). */
.eid-btn-hero {
  padding: 12px 20px;
  font-size: var(--text-md, 14px);
  background: linear-gradient(135deg, #0EA5E9 0%, var(--info) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35), 0 1px 2px rgba(0,0,0,0.06);
  letter-spacing: 0.2px;
}
.eid-btn-hero:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.45), 0 1px 2px rgba(0,0,0,0.08);
}
.eid-btn-hero:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35); }

/* Variante "inline" : sobre, pour une cellule de tableau ou un coin. */
.eid-btn-inline {
  padding: 8px 14px;
  font-size: var(--text-base);
  background: #ECFEFF;
  color: #0E7490;
  border: 1px solid #67E8F9;
}
.eid-btn-inline:hover:not(:disabled) { background: #CFFAFE; border-color: #22D3EE; }

[data-theme="dark"] .eid-btn-inline { background: rgba(6, 182, 212, 0.15); color: #67E8F9; border-color: rgba(103, 232, 249, 0.4); }
[data-theme="dark"] .eid-btn-inline:hover:not(:disabled) { background: rgba(6, 182, 212, 0.25); }

/* Spinner intégré au bouton */
.eid-btn .spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: white;
  border-radius: 50%; animation: eid-spin 0.7s linear infinite;
}
.eid-btn-inline .spin { border-color: rgba(14, 116, 144, 0.3); border-top-color: #0E7490; }
@keyframes eid-spin { to { transform: rotate(360deg); } }

/* Bandeau eID en haut de la modal nouveau patient */
.eid-banner {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 16px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(6, 182, 212, 0.05) 100%);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 12px;
}
[data-theme="dark"] .eid-banner {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
  border-color: rgba(14, 165, 233, 0.35);
}
.eid-banner-text { flex: 1; min-width: 0; }
.eid-banner-title { font-size: var(--text-md); font-weight: 700; color: #0E7490; margin-bottom: 4px; }
[data-theme="dark"] .eid-banner-title { color: #67E8F9; }
.eid-banner-sub { font-size: var(--text-base, 13px); color: var(--text-soft); line-height: 1.5; }

/* Bouton eID dans le header de la fiche patient — bloc dédié */
.eid-sync-wrap {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
/* Banderole d'outils en haut de la consultation (Prescrire, Vaccin, Prise de sang,
   Documents, ITT, Suivi). C2.2/C10.6 (12/07) : ICÔNES SEULES en permanence — le
   libellé complet reste accessible via title/aria-label (tooltip au survol) ; plus
   de toggle Déplier/Replier (devenu sans objet). */
.consult-tools-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 7px 10px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: var(--surface-soft, #f8fafc);
}
.consult-tools-label { font-size: var(--text-lg, 16px); line-height: 1; flex-shrink: 0; }
.consult-tools-row { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.consult-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--bg-elevated, #fff); cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.consult-tool:hover { background: var(--surface-2, #f1f5f9); border-color: var(--primary, #2563eb); }
.consult-tool-ico { font-size: var(--text-lg); line-height: 1; }
.consult-tool.consult-tool-primary { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }
.consult-tool.consult-tool-primary:hover { filter: brightness(0.95); }

/* ── En-tête d'acte unifié (refonte 09/07) : la barre de commande et la
   banderole d'outils deviennent les 2 NIVEAUX d'une seule carte, au lieu de 2
   blocs flottants empilés. Les classes internes gardent leur style d'origine ;
   on neutralise juste leurs bordures/ombres/marges propres et on les sépare
   d'un filet. Le motif devient le TITRE proéminent de l'acte. ────────────── */
.consult-act-header {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.consult-act-header .consult-command-bar,
.consult-act-header .consult-tools-banner {
  border: none; border-radius: 0; box-shadow: none; margin: 0; background: transparent;
}
/* Filet de séparation entre les deux niveaux. */
.consult-act-header .consult-tools-banner { border-top: 1px solid var(--border); }
/* Motif = TITRE de l'acte : grand, sans cadre, occupe l'espace disponible.
   Sélecteur à 3 classes → l'emporte sur .consult-command-bar .consult-motif-input. */
.consult-act-header .consult-command-bar .consult-motif-input {
  flex: 1 1 220px;
  background: transparent;
  border: 1px solid transparent;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  padding: var(--space-1) var(--space-2);
}
.consult-act-header .consult-command-bar .consult-motif-input::placeholder {
  font-weight: var(--fw-normal); color: var(--text-mute); letter-spacing: normal;
}
.consult-act-header .consult-command-bar .consult-motif-input:focus {
  background: var(--bg-hover);
  border-color: var(--border);
  box-shadow: none;
  border-radius: var(--radius-sm);
}

/* Barre d'actions UNIQUE de la carte identité (Modifier · eID · état · eHealth · Archiver). */
.patient-card-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.patient-card-actions .eid-status-badge { font-size: var(--text-xs); }

/* Photo preview de la carte eID (au-dessus du formulaire) */
.eid-photo-preview {
  grid-column: 1 / -1;
  display: flex; gap: 14px; align-items: center;
  padding: 12px; margin-bottom: 14px;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 10px;
}
.eid-photo-preview img {
  width: 80px; height: 96px; object-fit: cover;
  border-radius: 6px; border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.eid-photo-meta { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-base, 13px); color: var(--text-soft); }
.eid-photo-meta strong { font-size: var(--text-md); color: var(--text); }

/* Badge statut du lecteur (point coloré + label) */
.eid-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-size: var(--text-sm, 12px); font-weight: 500;
  background: var(--bg-soft); border-radius: 999px;
  color: var(--text-soft);
}
.eid-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-mute);
}
.eid-status-badge[data-state="ok"] .eid-status-dot { background: var(--success, #10b981); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); }
.eid-status-badge[data-state="NO_CARD"] .eid-status-dot { background: var(--warning, #f59e0b); }
.eid-status-badge[data-state="NO_READER"] .eid-status-dot,
.eid-status-badge[data-state="BEID_MIDDLEWARE_MISSING"] .eid-status-dot,
.eid-status-badge[data-state="PKCS11_MODULE_MISSING"] .eid-status-dot,
.eid-status-badge[data-state="MODULE_LOAD_ERROR"] .eid-status-dot { background: var(--danger-hover, #dc2626); }

/* Template picker (ORDO Mail) */
.tpl-pick-wrap { display: flex; flex-direction: column; gap: 8px; }
.tpl-pick-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.tpl-pick-card {
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
  display: flex; flex-direction: column; gap: 6px;
}
.tpl-pick-card:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}
.tpl-pick-card:active { transform: scale(0.995); }
.tpl-pick-card.is-suggested {
  border-color: #FB923C;
  background: #FFF7ED;
}
.tpl-pick-card.is-suggested:hover { background: #FFEDD5; }
.tpl-pick-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tpl-pick-name { font-weight: 600; font-size: var(--text-md); color: var(--text); }
.tpl-pick-subject {
  font-size: var(--text-sm); color: var(--text-mute);
}
.tpl-pick-body {
  font-size: var(--text-base, 13px);
  color: var(--text-soft);
  white-space: pre-wrap;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  max-height: 140px;
  overflow: hidden;
}

/* =====================================================================
   Mobile — accès smartphone via Tailscale.
   TOUT est isolé sous @media (max-width: 768px).
   Aucune modification du layout desktop, sauf cacher trois éléments
   mobile-only (qui n'existaient pas avant) à l'extérieur du media query.
   ===================================================================== */

.mobile-menu-btn,
.sidebar-close-btn,
.sidebar-backdrop {
  display: none;
}

@media (max-width: 768px) {
  /* --- Reset overflow body : on autorise le scroll natif --- */
  html, body {
    overflow: auto;
    height: auto;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
  }
  body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior-y: contain;
  }

  /* --- App : single column, plein écran --- */
  #app {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* --- Sidebar drawer hors-écran --- */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 84vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    box-shadow: 4px 0 24px rgba(0,0,0,0.20);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    -webkit-app-region: no-drag;
  }
  #app.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  #app.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Topbar buttons : hamburger visible, back desktop caché --- */
  .mobile-menu-btn { display: inline-flex; }
  .desktop-back-btn { display: none; }
  .sidebar-close-btn {
    display: inline-flex;
    margin-left: auto;
    width: 36px; height: 36px;
  }

  .brand { padding: 6px 6px 14px; }

  /* --- Nav items : touch targets 44px+ --- */
  .nav-item {
    padding: 12px 12px;
    font-size: var(--text-lg, 16px);
    min-height: 44px;
  }
  .nav-item svg { width: 22px; height: 22px; }
  .nav-section { font-size: var(--text-sm); padding-top: 14px; }

  .search-trigger { padding: 12px 14px; font-size: var(--text-lg, 16px); }
  .search-trigger kbd { display: none; }

  /* --- Main : full width --- */
  .main {
    width: 100%;
    overflow: visible;
  }

  /* --- Topbar : sticky, safe-area --- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    min-height: 54px;
    padding: 0 10px;
    padding-top: max(0px, env(safe-area-inset-top));
    -webkit-app-region: no-drag;
  }
  .page-title {
    font-size: var(--text-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55vw;
  }
  .topbar-left, .topbar-right { gap: 4px; }
  .topbar-right .btn-primary {
    padding: 0 12px;
    font-size: var(--text-base);
    white-space: nowrap;
    min-height: 38px;
  }

  /* --- View : padding réduit, marge bas safe-area --- */
  .view {
    padding: 14px 14px max(60px, env(safe-area-inset-bottom));
    overflow: visible;
  }

  /* --- Cards : padding réduit, radius réduit --- */
  .card { border-radius: 12px; padding: 14px; }

  /* --- Modales : full-screen --- */
  .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .modal-body { flex: 1; overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
  .modal-header {
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .modal-footer {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary,
  .modal-footer .btn-danger { flex: 1; min-width: 0; }

  /* --- Grilles : stack systématique --- */
  .form-grid,
  .form-grid-2,
  .form-grid-3,
  .form-row,
  .grid-2,
  .grid-3,
  .grid-cols-2,
  .grid-cols-3,
  .soap-grid,
  .patient-detail,
  .rcv-2col,
  .rcv-filters,
  .rsw-2col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Hub RSW empilé (mobile) : la liste ne prend plus toute la hauteur et le
     panneau de détail cesse d'être collant (il suit la liste). */
  .rsw-detail { position: static !important; max-height: none !important; }
  .rsw-list { max-height: 44vh; }
  /* En pile (mobile), le cockpit d'identité (nom, allergies, + Consultation)
     passe AVANT la carte des coordonnées administratives — la carte latérale
     ne contient plus l'identité hero (unification 09/07). */
  .patient-detail .patient-main { order: -1; }

  /* --- Boutons : taille touch 44px --- */
  .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    min-height: 44px;
    padding: 0 16px;
    font-size: var(--text-md);
  }
  .btn-sm {
    min-height: 36px;
    padding: 0 12px;
    font-size: var(--text-base);
  }
  .icon-btn { min-width: 40px; min-height: 40px; }

  /* --- Inputs : 16px évite le zoom automatique mobile --- */
  input, textarea, select {
    font-size: var(--text-lg, 16px) !important;
  }
  textarea { min-height: 80px; }

  /* --- Tables : scroll horizontal sécurisé --- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* --- Lecteur de résultat (modale dossier) : le document (PDF/image) remplit
         l'écran pour être LISIBLE sur téléphone (58vh laissait le PDF minuscule). --- */
  .res-reader-media {
    height: calc(100dvh - 210px) !important;
    max-height: none !important;
    min-height: 60vh;
  }
  /* Contenu texte des résultats : police lisible, hauteur libre. */
  .doc-clean { font-size: 15px !important; max-height: none !important; line-height: 1.6; }

  /* --- AI banner : compact --- */
  .ai-top-banner {
    margin: -8px -8px 10px;
    padding: 8px 10px;
    font-size: var(--text-base);
  }
  .ai-top-banner-row { font-size: var(--text-base, 13px); }

  /* --- Consultation : bouton REC plein largeur, gros, sticky bas --- */
  #btn-consult-toggle {
    width: 100%;
    min-height: 56px;
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 10px;
    border-radius: 14px;
  }
  #consult-live-indicator {
    font-size: var(--text-md, 14px);
    padding: 8px 12px;
    border-radius: 8px;
  }

  /* --- Lists / rows --- */
  .result-item,
  .list-row,
  .patient-row,
  .consult-row,
  .group-title {
    padding: 12px;
    min-height: 56px;
  }
  .group-title { min-height: 0; }

  /* --- Search results plein largeur --- */
  .search-results { padding: 8px; }
  .search-input-wrap {
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .search-input-wrap input { font-size: var(--text-lg); }

  /* --- Quick modal : 2 colonnes au lieu de 4 --- */
  .quick-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    padding: 14px;
  }
  .quick-card {
    min-height: 100px;
    padding: 16px;
  }
  .quick-card svg { width: 28px; height: 28px; }

  /* --- Toasts : en bas, marge safe-area --- */
  .toasts {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    left: 12px;
    right: 12px;
    top: auto;
  }
  .toast { font-size: var(--text-md); padding: 12px 16px; }

  /* --- Orchestrator IA modal mobile --- */
  .orchestrator-history { max-height: none; flex: 1; min-height: 200px; }
  .orchestrator-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .orchestrator-input-row .btn-primary { width: 100%; height: 48px; }
  .orch-msg { max-width: 100%; }

  /* --- Scrollbars cachées (gestes natifs) --- */
  ::-webkit-scrollbar { width: 0; height: 0; }

  /* --- Sidebar/topbar : annule webkit-app-region (Electron drag) --- */
  .sidebar, .topbar, .sidebar > * { -webkit-app-region: no-drag; }

  /* --- Empêche le sélection texte accidentelle sur les touch --- */
  .nav-item, .btn-primary, .btn-secondary, .btn-danger,
  .icon-btn, .quick-card, .result-item {
    -webkit-user-select: none;
    user-select: none;
  }

  /* --- Action footer sticky (pour les pages avec boutons en bas) --- */
  .action-footer-sticky {
    position: sticky;
    bottom: 0;
    background: var(--bg-elevated);
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    margin: 0 -14px -14px;
    border-top: 1px solid var(--border);
    z-index: 10;
  }
}

/* Très petit écran (Pixel 9 = 412px portrait, donc on est large, mais
   protection pour les anciens téléphones en portrait < 380px). */
@media (max-width: 380px) {
  .view { padding: 10px 10px max(50px, env(safe-area-inset-bottom)); }
  .nav-item { padding: 10px; font-size: var(--text-md); }
  .page-title { max-width: 48vw; font-size: var(--text-lg, 16px); }
  .topbar-right .btn-primary { padding: 0 10px; font-size: var(--text-base, 13px); }
  .quick-grid { grid-template-columns: 1fr !important; }
}

/* Landscape mobile (hauteur faible) — sidebar drawer plus étroit */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .sidebar { width: 60vw; max-width: 280px; }
  .topbar { min-height: 46px; }
  .modal-header { padding: 8px 14px; }
}

/* Mobile — empty-state plus aéré (conservé après retrait du CSS de la vue Demandes, S11r). */
@media (max-width: 768px) {
  .empty-state { padding: 40px 16px; }
}

/* ── Pills contexte (dossier / consultation) — épinglées dans le menu ───── */
#consult-bg-pill,
#patient-bg-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: var(--text-base, 13px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}
#consult-bg-pill {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
#consult-bg-pill:hover { filter: brightness(1.06); }
#patient-bg-pill {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}
#patient-bg-pill:hover { background: var(--bg-hover); }
#consult-bg-pill[hidden],
#patient-bg-pill[hidden] { display: none; }
.ppill-icon { font-size: var(--text-md); line-height: 1; flex-shrink: 0; }
.cpill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpill-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: #4ADE80;
  border-radius: 50%;
  animation: cpill-pulse 1.8s ease-in-out infinite;
}
.cpill-hint {
  font-size: var(--text-2xs);
  font-weight: 400;
  opacity: 0.75;
  margin-left: 2px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes cpill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ─── Chat consultation (assistant conversationnel) ─────────────────────── */
.chat-wrap {
  display: flex;
  flex-direction: column;
  height: 70vh;
  min-height: 480px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}
.chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--text-md, 14px);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-bubble.chat-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.chat-assistant {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  white-space: normal;
}
.chat-bubble.chat-streaming::after {
  content: '▋';
  animation: blink 1s steps(2, start) infinite;
  margin-left: 2px;
}
@keyframes blink {
  to { visibility: hidden; }
}
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--text-base);
  font-family: inherit;
  resize: vertical;
  min-height: 44px;
  max-height: 200px;
}

/* Liens analytes cliquables dans le rapport biologique brut */
.bio-analyte-link {
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  padding: 0 2px;
  transition: background 0.12s;
}
.bio-analyte-link:hover {
  background: var(--primary-soft);
  text-decoration: underline;
}

.chat-applied-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--success-soft, rgba(74, 222, 128, 0.15));
  color: var(--success, #16a34a);
  border: 1px solid var(--success, #16a34a);
  border-radius: 12px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.chat-mic-btn {
  min-width: 44px;
  font-size: var(--text-xl);
  line-height: 1;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
}
.chat-mic-btn:hover { background: var(--bg-elevated); }
.chat-mic-btn:disabled { opacity: 0.5; cursor: wait; }
.chat-mic-btn.recording {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
  animation: cpill-pulse 1.4s ease-in-out infinite;
}

/* ─── Revue clinique structurée (cartes colorées) ─────────────────────────── */
.rev-wrap { display: flex; flex-direction: column; gap: 12px; }
.rev-block { }
.rev-title { font-size: var(--text-base); font-weight: 700; margin: 2px 0 8px; color: var(--text-soft); }
.rev-title-row { display: flex; align-items: center; gap: 8px; }
.rev-title-row .rev-title { margin: 0; }
.rev-title-danger { color: var(--danger); }
.rev-title-dx { color: var(--primary); }
.rev-title-exam { color: var(--info); }
.rev-title-cr { color: var(--accent); }
.rev-synthese {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--primary-soft); color: var(--primary-text-on-soft);
  border-left: 4px solid var(--primary); font-size: var(--text-md, 14px); line-height: 1.55;
}
.rev-synthese-icon { font-size: var(--text-lg); line-height: 1.4; }
.rev-eval {
  padding: 10px 14px; border-radius: var(--radius); background: var(--bg-hover);
  border-left: 4px solid var(--primary); font-size: var(--text-md, 14px); line-height: 1.55; color: var(--text-soft);
}
.rev-corr {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; background: var(--bg-elevated); transition: opacity .2s;
}
.rev-corr-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rev-tag { font-size: var(--text-xs); font-weight: 800; letter-spacing: .03em; }
.rev-champ {
  font-size: var(--text-xs); font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-soft);
}
.rev-corr-line { font-size: var(--text-base, 13px); color: var(--text-soft); margin: 3px 0; }
.rev-corr-prop { color: var(--text); font-weight: 600; }
.rev-corr-why {
  font-size: var(--text-sm, 12px); color: var(--text-mute); font-style: italic;
  border-top: 1px dashed var(--border); padding-top: 5px; margin-top: 5px;
}
.rev-corr.crit-haute { border-color: var(--danger); background: rgba(239, 68, 68, .06); }
.rev-corr.crit-haute .rev-tag { color: var(--danger); }
.rev-corr.crit-moyenne { border-color: var(--warning); background: rgba(245, 158, 11, .06); }
.rev-corr.crit-moyenne .rev-tag { color: var(--warning); }
.rev-corr.crit-basse { border-color: #EAB308; background: rgba(234, 179, 8, .06); }
.rev-corr.crit-basse .rev-tag { color: #A16207; }
.rev-dx, .rev-exam {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 6px; background: var(--bg-elevated);
}
.rev-dx { border-left: 3px solid var(--primary); }
.rev-exam { border-left: 3px solid var(--info); }
.rev-dx-h, .rev-exam-h { display: flex; align-items: center; gap: 8px; }
.rev-dx-h strong, .rev-exam-h strong { font-size: var(--text-base); color: var(--text); }
.rev-badge {
  font-size: var(--text-xs); font-weight: 700; margin-left: auto;
  padding: 1px 9px; border-radius: var(--radius-full); white-space: nowrap;
}
.rev-badge.prob-haute, .rev-badge.urg-immediat { color: var(--danger); background: rgba(239, 68, 68, .12); }
.rev-badge.prob-moyenne, .rev-badge.urg-24h { color: var(--warning); background: rgba(245, 158, 11, .12); }
.rev-badge.prob-faible { color: #A16207; background: rgba(234, 179, 8, .15); }
.rev-badge.urg-programme { color: var(--primary); background: var(--primary-soft); }
.rev-dx-why, .rev-exam-ind { font-size: var(--text-sm); color: var(--text-soft); margin-top: 3px; }
.rev-dx-excl { font-size: var(--text-sm, 12px); color: var(--info); font-style: italic; margin-top: 3px; }
.rev-flags {
  margin: 0; padding: 10px 14px 10px 30px; background: rgba(239, 68, 68, .07);
  border-left: 4px solid var(--danger); border-radius: var(--radius-sm); list-style: disc;
}
.rev-flags li { color: var(--danger); font-size: var(--text-base); margin: 3px 0; }
.rev-cr {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 2px 14px 10px; background: rgba(20, 184, 166, .05);
}
.rev-cr-body { font-size: var(--text-base); }
.rev-allclear {
  padding: 14px; border-radius: var(--radius); background: rgba(16, 185, 129, .10);
  color: var(--success); border: 1px solid rgba(16, 185, 129, .35); font-weight: 600;
}
.rev-applied-flash { outline: 2px solid var(--success); outline-offset: 1px; transition: outline .2s; }

/* Boîte de réception : barre de défilement TOUJOURS visible (macOS masque les
   barres overlay → le médecin ne voyait pas qu'il pouvait faire défiler les
   anciens messages). On force une piste + un curseur bien visibles. */
.inbox-list-scroll { scrollbar-width: thin; scrollbar-color: var(--text-mute) var(--bg-2, #eef0f3); }
.inbox-list-scroll::-webkit-scrollbar { width: 12px; }
.inbox-list-scroll::-webkit-scrollbar-track { background: var(--bg-2, #eef0f3); border-radius: 8px; }
.inbox-list-scroll::-webkit-scrollbar-thumb {
  background: var(--text-mute, #94a3b8); border-radius: 8px;
  border: 3px solid var(--bg-2, #eef0f3); min-height: 40px;
}
.inbox-list-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-soft, #64748b); }

/* ── Mode Agenda : sidebar → onglets horizontaux ────────────────────────── */
#app.agenda-mode {
  grid-template-columns: 1fr;
}
#app.agenda-mode .sidebar {
  display: none;
}
#app.agenda-mode .mobile-menu-btn,
#app.agenda-mode .desktop-back-btn,
#app.agenda-mode .page-title {
  display: none;
}
#app.agenda-mode .topbar {
  padding: 0 8px 0 0;
}
#app.agenda-mode .topbar-left {
  padding: 0;
}
/* macOS : en mode agenda la sidebar est masquée, donc rien ne réserve
   l'espace des feux tricolores (close/réduire/agrandir). On décale les
   onglets pour qu'ils ne passent plus dessous. */
#app.is-mac.agenda-mode .topbar {
  padding-left: 78px;
}

/* Onglets de navigation (agenda-mode uniquement) */
.agenda-tabs {
  display: none;
  flex: 1;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.agenda-tabs::-webkit-scrollbar { display: none; }
#app.agenda-mode .agenda-tabs {
  display: flex;
}
.agenda-tabs .nav-item {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 12px 7px;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
  height: 100%;
  white-space: nowrap;
  background: none !important;
}
.agenda-tabs .nav-item svg {
  width: 17px;
  height: 17px;
}
.agenda-tabs .nav-item:hover {
  color: var(--text-soft);
  border-bottom-color: var(--border-strong);
}
.agenda-tabs .nav-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
  background: none !important;
}

/* ── Agenda : sidebar gauche (mini-cal, recherche, tâches, praticiens) ───── */
.cal-layout { display: flex; gap: 16px; align-items: flex-start; }
.cal-main { flex: 1; min-width: 0; }
.cal-sidebar {
  width: 232px; flex-shrink: 0;
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

/* Mini-calendrier */
.cal-mini { user-select: none; }
.cal-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-mini-title { font-size: var(--text-base); font-weight: 600; text-transform: capitalize; }
.cal-mini-nav {
  width: 24px; height: 24px; border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--text-mute); font-size: var(--text-lg, 16px); line-height: 1;
}
.cal-mini-nav:hover { background: var(--bg-hover); color: var(--text); }
.cal-mini-grid { display: grid; grid-template-columns: 22px repeat(7, 1fr); gap: 1px; }
.cal-mini-dow { text-align: center; font-size: var(--text-2xs); color: var(--text-mute); font-weight: 600; padding: 2px 0; }
.cal-mini-wk {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); color: var(--text-mute); cursor: pointer; border-radius: 4px;
}
.cal-mini-wk:hover { background: var(--bg-hover); }
.cal-mini-wk.inview { background: var(--primary-soft); color: var(--primary-text-on-soft); font-weight: 600; }
.cal-mini-day {
  display: flex; align-items: center; justify-content: center;
  height: 26px; font-size: var(--text-sm, 12px); cursor: pointer; border-radius: 50%;
  color: var(--text); transition: background var(--transition);
}
.cal-mini-day:hover { background: var(--bg-hover); }
.cal-mini-day.out { color: var(--text-mute); opacity: 0.5; }
.cal-mini-day.sel { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); font-weight: 600; }
.cal-mini-day.today { background: var(--primary); color: #fff; font-weight: 700; }

/* Blocs sidebar */
.cal-sb-block { display: flex; flex-direction: column; gap: 6px; }
.cal-sb-title { font-size: var(--text-sm); font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-sb-input {
  width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: var(--text-base);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text);
}
.cal-sb-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.cal-sb-results { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.cal-sb-result {
  text-align: left; background: transparent; border: none; cursor: pointer;
  padding: 6px 8px; font-size: var(--text-base, 13px); border-radius: 6px; color: var(--text);
}
.cal-sb-result:hover { background: var(--bg-hover); }
.cal-sb-empty { font-size: var(--text-sm); color: var(--text-mute); padding: 4px 2px; }

/* Tâches */
.cal-sb-tasklist { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.cal-sb-task { display: flex; align-items: center; gap: 7px; padding: 4px 2px; }
.cal-sb-task-txt { flex: 1; min-width: 0; font-size: var(--text-base, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-sb-task-del {
  border: none; background: transparent; color: var(--text-mute); cursor: pointer;
  font-size: var(--text-lg, 16px); line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0;
}
.cal-sb-task:hover .cal-sb-task-del { opacity: 1; }
.cal-sb-task-del:hover { color: var(--danger); }

/* Interactions 4.4.4 — poste de traitement télésecrétariat. */
.interactions-workbench {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 4px 4px 28px;
}
.interactions-queue-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 14px;
}
.interactions-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.interactions-stat:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); background: var(--bg-hover); }
.interactions-stat.active { border-color: var(--primary); background: var(--primary-soft); }
.interactions-stat-value {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--primary);
  font-size: 15px;
  font-weight: 750;
}
.interactions-stat.active .interactions-stat-value { background: var(--primary); color: #fff; }
.interactions-stat-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.interactions-stat-copy strong { overflow: hidden; color: var(--text); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.interactions-stat-copy small { overflow: hidden; color: var(--text-mute); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .interactions-queue-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Praticiens */
.cal-sb-prac { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); cursor: pointer; }

/* Sous 760px : sidebar empilée au-dessus de la grille */
@media (max-width: 768px) {
  .cal-layout { flex-direction: column; }
  .cal-sidebar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .cal-sidebar > * { flex: 1 1 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENDA — miroir AgendaPro (docteurnanni.be/medecin/calendar)
   Police Ubuntu scopée à l'agenda + design Material plat (cartes pleines).
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Ubuntu'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Ubuntu-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 600 700; font-style: normal; font-display: swap; src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'); }

.agp-root { display: flex; flex-direction: column; font-family: 'Ubuntu', var(--font-sans); color: var(--text); }

/* Toolbar */
.agp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.agp-nav { display: flex; gap: 2px; }
.agp-iconbtn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text-mute); font-size: var(--text-md); line-height: 1; }
.agp-iconbtn:hover { background: var(--bg-hover); color: var(--text-soft); }
.agp-btn { font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 12px; background: var(--bg-elevated); cursor: pointer; color: var(--text-soft); }
.agp-btn:hover { background: var(--bg-hover); }
.agp-period { font-size: var(--text-lg, 16px); font-weight: 700; margin: 0; text-transform: capitalize; color: var(--text); min-width: 150px; }
.agp-substats { font-size: var(--text-xs); color: var(--text-mute); font-weight: 500; white-space: nowrap; }
.agp-icongroup { display: flex; gap: 1px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.agp-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.agp-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; background: var(--bg-elevated); cursor: pointer; color: var(--text-soft); }
.agp-legend-chip.off { color: var(--border-strong); text-decoration: line-through; }
.agp-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.agp-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.agp-weekend { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--text-soft); cursor: pointer; }
.agp-viewseg { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.agp-viewseg button { border: none; background: var(--bg-elevated); font-size: var(--text-sm); font-weight: 600; padding: 6px 12px; cursor: pointer; color: var(--text-soft); }
.agp-viewseg button:hover { background: var(--bg-hover); }
.agp-viewseg button.active { background: var(--agp-blue); color: #fff; }

/* Bandeau déplacement (parking) */
.agp-parkbanner { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: rgba(2,136,209,.10); border-bottom: 1px solid rgba(2,136,209,.40); }
.agp-parkbanner-txt { font-size: var(--text-md); font-weight: 600; color: var(--agp-deep); }
.agp-parkbanner-hint { font-size: var(--text-sm); color: var(--text-mute); }

/* Corps : sidebar + grille */
.agp-body { display: flex; overflow: hidden; }
.agp-sidebar { width: 236px; flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border); overflow-y: auto; padding-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.agp-sb-primary { margin: 4px 10px 0; padding: 10px; background: var(--agp-blue); color: #fff; border: none; border-radius: 10px; font-weight: 600; font-size: var(--text-base); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.agp-sb-primary:hover { background: #0277bd; }
.agp-sb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 10px; }
.agp-sb-2col-btn { padding: 8px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; background: var(--bg-elevated); }
.agp-sb-2col-btn.blue { border: 1px solid rgba(2,136,209,.45); color: var(--agp-deep); }
.agp-sb-2col-btn.blue:hover { background: rgba(2,136,209,.12); }
.agp-sb-2col-btn.gray { border: 1px solid var(--border); color: var(--text-soft); }
.agp-sb-2col-btn.gray:hover { background: var(--bg-hover); }
.agp-sb-block { margin: 0 10px; position: relative; }
.agp-sb-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); font-size: var(--text-base); font-family: inherit; }
.agp-sb-results { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; }
.agp-sb-results:empty { display: none; }
.agp-sb-result { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; background: transparent; cursor: pointer; text-align: left; }
.agp-sb-result:hover { background: rgba(2,136,209,.10); }
.agp-sb-ava { width: 24px; height: 24px; border-radius: 50%; background: #e0e7ff; color: #3730a3; font-size: var(--text-2xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.agp-sb-result-name { font-size: var(--text-base); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-sb-empty { font-size: var(--text-sm); color: var(--text-mute); padding: 8px; }
.agp-filter-chip { margin: 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(2,136,209,.10); border: 1px solid rgba(2,136,209,.35); border-radius: 8px; padding: 6px 10px; font-size: var(--text-sm); color: var(--agp-deep); }
.agp-filter-chip button { border: none; background: none; color: var(--primary); cursor: pointer; font-size: var(--text-md); line-height: 1; }
.agp-park { margin: 6px 10px; border: 2px dashed var(--border); border-radius: 10px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.agp-park.active { border-color: var(--agp-blue); background: rgba(2,136,209,.08); }
.agp-park.over { border-color: #60a5fa; background: rgba(2,136,209,.10); }
.agp-park-hint { font-size: var(--text-xs); color: var(--text-mute); line-height: 1.3; }
.agp-park-title { font-size: var(--text-xs); font-weight: 700; color: var(--agp-deep); }
.agp-park-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.agp-park-cancel { font-size: var(--text-xs); font-weight: 600; color: var(--danger, #ef4444); background: none; border: none; cursor: pointer; margin-top: 2px; }

/* Grille */
.agp-scroll { flex: 1; height: 100%; overflow: auto; display: flex; background: var(--bg-elevated); }
.agp-col { display: flex; flex-direction: column; min-width: 128px; flex: 1; border-right: 1px solid var(--border); }
.agp-col:last-child { border-right: none; }
.agp-col.agp-gutter { flex: 0 0 48px; min-width: 48px; }
.agp-head { position: sticky; top: 0; z-index: 6; background: var(--bg-elevated); }
.agp-head.today { background: rgba(2,136,209,.08); }
.agp-dayhead-spacer { height: 56px; }
.agp-allday-lbl { height: 32px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: var(--text-2xs, 10px); color: var(--text-mute); text-align: right; line-height: 1.1; }
.agp-dayhead { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-bottom: 1px solid var(--border); }
.agp-dayhead-dow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--text-mute); }
.agp-dayhead-num { font-size: var(--text-xl, 18px); font-weight: 700; color: var(--text); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.agp-dayhead-num.today { width: 32px; height: 32px; border-radius: 50%; background: var(--agp-blue); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.agp-dayhead-count { font-size: var(--text-2xs, 10px); color: var(--text-mute); font-weight: 500; }
.agp-allday { height: 32px; border-bottom: 1px solid var(--border); }
.agp-grid { position: relative; flex-shrink: 0; }
.agp-grid.parking { cursor: copy; }
.agp-hourlbl { position: absolute; right: 8px; font-size: var(--text-sm); font-weight: 500; color: var(--text-mute); }
.agp-hourline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.agp-avail { position: absolute; left: 0; right: 0; border-left: 3px solid var(--agp-blue); pointer-events: none; }
.agp-banner { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.agp-banner-pill { margin-top: 8px; font-size: var(--text-2xs); font-weight: 700; background: rgba(255,255,255,.9); padding: 2px 8px; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.agp-indispo { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(220,38,38,.16) 0 9px, rgba(220,38,38,.07) 9px 18px); border-top: 1px solid rgba(220,38,38,.45); border-bottom: 1px solid rgba(220,38,38,.45); }
/* Indispo LOCALE (modifiable) : au-dessus des cartes pour être cliquable partout. */
.agp-indispo-edit { z-index: 8; cursor: pointer; }
.agp-indispo-edit:hover { background: repeating-linear-gradient(135deg, rgba(220,38,38,.30) 0 9px, rgba(220,38,38,.15) 9px 18px); box-shadow: inset 0 0 0 1px rgba(220,38,38,.55); }
.agp-indispo-lbl { font-size: var(--text-2xs); font-weight: 600; color: var(--danger-text, #b91c1c); background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.agp-indispo-del { position: absolute; top: 3px; right: 3px; border: none; background: rgba(255,255,255,.9); color: var(--danger-hover, #dc2626); cursor: pointer; opacity: 0; font-size: var(--text-lg, 16px); font-weight: 700; line-height: 1; border-radius: 6px; padding: 0 6px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.agp-indispo:hover .agp-indispo-del { opacity: 1; }
.agp-card { position: absolute; z-index: 9; left: 4px; right: 4px; border-radius: 5px; overflow: hidden; cursor: grab; padding: 3px 8px; display: flex; flex-direction: column; transition: filter var(--transition-fast); }
.agp-card:active { cursor: grabbing; }
.agp-card:hover { z-index: 12; filter: brightness(.94); }
.agp-card.dim { opacity: .3 !important; }
.agp-card.cancelled { pointer-events: none; }
.agp-card.cancelled .agp-card-name { text-decoration: line-through; }
.agp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.agp-card-time { font-size: var(--text-xs); font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.agp-card-icons { display: flex; gap: 2px; font-size: var(--text-2xs, 10px); opacity: .9; }
.agp-card-name { font-size: var(--text-base); font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-card-reason { font-size: var(--text-xs); opacity: 1; line-height: 1.15; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-card-sub { font-size: var(--text-2xs); opacity: .9; line-height: 1.15; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.agp-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.agp-nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid rgba(239,68,68,.85); z-index: 5; pointer-events: none; }
.agp-nowdot { position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger, #ef4444); box-shadow: 0 0 0 2px var(--bg-elevated); }
.agp-rangeband { position: absolute; left: 4px; right: 4px; background: rgba(2,136,209,.2); border: 1px solid var(--agp-blue); border-radius: 6px; pointer-events: none; z-index: 7; }
.agp-droppreview { position: absolute; left: 4px; right: 4px; border: 2px dashed var(--agp-blue); background: rgba(2,136,209,.18); border-radius: 5px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 7; font-size: var(--text-2xs); font-weight: 600; color: var(--agp-deep); }

/* Menus flottants + tooltip */
.agp-popmenu { position: fixed; z-index: 1000; background: var(--bg-elevated); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 5px; min-width: 180px; border: 1px solid var(--border); }
.agp-popmenu-head { font-size: var(--text-xs); color: var(--text-mute); padding: 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-popmenu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: transparent; cursor: pointer; font-size: var(--text-base); border-radius: 6px; color: var(--text); }
.agp-popmenu button:hover { background: var(--bg-hover); }
.agp-popmenu button.danger { color: var(--danger-hover, #dc2626); }
.agp-popmenu button.danger:hover { background: rgba(220,38,38,.12); }
.agp-tooltip { position: fixed; z-index: 1001; width: 250px; background: #0f172a; color: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.3); pointer-events: none; font-family: 'Ubuntu', var(--font-sans); }
.agp-tip-name { font-weight: 600; font-size: var(--text-md, 14px); margin: 0; }
.agp-tip-bd { font-size: var(--text-xs); color: #cbd5e1; margin: 2px 0 0; }
.agp-tip-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: #e2e8f0; }
.agp-tip-rows p { margin: 0; }
.agp-tip-rows span { color: #94a3b8; }
.agp-tip-cancel { margin-top: 8px; font-size: var(--text-xs); font-weight: 600; color: #fca5a5; }
.agp-kbd { padding: 2px 8px; border-radius: 6px; background: var(--bg-hover); border: 1px solid var(--border); font-size: var(--text-sm); font-family: var(--font-mono); }

/* Vue Liste */
.agp-listwrap { flex: 1; height: 100%; overflow-y: auto; background: var(--bg); }
.agp-list { max-width: 680px; margin: 0 auto; padding: 20px; }
.agp-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.agp-list-head h3 { font-size: var(--text-lg); font-weight: 700; text-transform: capitalize; margin: 0; color: var(--text); }
.agp-list-count { font-size: var(--text-sm); color: var(--text-mute); }
.agp-list-empty { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 40px; text-align: center; color: var(--text-mute); font-size: var(--text-md); }
.agp-list-add { margin-top: 12px; color: var(--agp-blue); background: none; border: none; cursor: pointer; font-size: var(--text-base); font-weight: 600; }
.agp-list-rows { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.agp-list-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; text-align: left; }
.agp-list-row:last-child { border-bottom: none; }
.agp-list-row:hover { background: var(--bg-hover); }
.agp-list-bar { width: 4px; align-self: stretch; border-radius: 999px; flex-shrink: 0; }
.agp-list-time { width: 96px; flex-shrink: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.agp-list-time-end { color: var(--text-mute); font-weight: 400; }
.agp-list-main { flex: 1; min-width: 0; }
.agp-list-name { display: block; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-list-name.cancelled { text-decoration: line-through; color: var(--text-mute); }
.agp-list-reason { display: block; font-size: var(--text-sm); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-list-phone { font-size: var(--text-sm); color: var(--text-mute); flex-shrink: 0; }

/* SlotFinder */
.agp-slotfinder { position: fixed; inset: 0; z-index: 900; background: var(--bg-overlay); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; font-family: 'Ubuntu', var(--font-sans); }
.agp-sf-panel { background: var(--bg-elevated); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 100%; max-width: 1000px; margin: 16px 0; display: flex; flex-direction: column; max-height: 92vh; }
.agp-sf-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid var(--border); }
.agp-sf-head h3 { font-size: var(--text-xl); font-weight: 700; margin: 0; }
.agp-sf-head p { font-size: var(--text-base); color: var(--text-mute); margin: 2px 0 0; }
.agp-sf-close { border: none; background: none; font-size: var(--text-xl); color: var(--text-mute); cursor: pointer; }
.agp-sf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.agp-sf-motifs { display: flex; gap: 6px; flex-wrap: wrap; }
.agp-sf-motif { padding: 6px 12px; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; color: var(--text-soft); }
.agp-sf-motif.active { background: var(--agp-blue); border-color: var(--agp-blue); color: #fff; }
.agp-sf-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.agp-sf-weeklbl { font-size: var(--text-base); font-weight: 600; color: var(--text-soft); min-width: 170px; text-align: center; text-transform: capitalize; }
.agp-sf-grid { padding: 16px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; overflow-y: auto; }
.agp-sf-loading { grid-column: 1 / -1; text-align: center; color: var(--text-mute); padding: 40px; font-size: var(--text-base); }
.agp-sf-day { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.agp-sf-day.today { border-color: var(--agp-blue); box-shadow: 0 0 0 1px rgba(2,136,209,.3); }
.agp-sf-dayhead { padding: 8px; text-align: center; background: var(--bg); border-bottom: 1px solid var(--border); }
.agp-sf-day.today .agp-sf-dayhead { background: rgba(2,136,209,.1); }
.agp-sf-dow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); font-weight: 600; }
.agp-sf-num { font-size: var(--text-xl); font-weight: 700; color: var(--text); }
.agp-sf-slots { padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.agp-sf-none { font-size: var(--text-xs); color: var(--border-strong); font-style: italic; text-align: center; padding: 16px 0; }
.agp-sf-none.hol { color: var(--danger, #ef4444); }
.agp-sf-slot { width: 100%; text-align: center; font-size: var(--text-sm); font-weight: 600; color: var(--agp-deep); background: rgba(2,136,209,.1); border: none; border-radius: 6px; padding: 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.agp-sf-slot:hover { background: var(--agp-blue); color: #fff; }

/* Police Ubuntu scopée à l'agenda (le reste de l'app garde Inter) */
#app.agenda-mode #view { font-family: 'Ubuntu', var(--font-sans); }

/* Thème sombre — seuls restes non tokenisables : pastilles posées sur les
   bandes de disponibilité colorées (fond blanc translucide en clair). */
[data-theme='dark'] .agp-banner-pill { background: rgba(19,24,38,.9); }
[data-theme='dark'] .agp-indispo-lbl { background: rgba(19,24,38,.72); color: var(--danger-text); }
[data-theme='dark'] .agp-indispo-del { background: rgba(19,24,38,.9); color: var(--danger-text); }

/* Mobile : sidebar repliée, grille pleine largeur */
@media (max-width: 768px) {
  .agp-sidebar { display: none; }
  .agp-toolbar-right { margin-left: auto; }
}

/* =====================================================================
   SYNTHÈSE CLINIQUE DU DOSSIER PATIENT (vue d'ensemble façon DMI)
   ===================================================================== */

/* Bandeau sécurité : allergies + alertes — toujours visible en tête */
.synth-safety {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius);
  margin-bottom: 14px; font-size: var(--text-base);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-soft);
}
.synth-safety.danger {
  border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.07);
  color: var(--text); font-weight: 500;
}
.synth-safety.warning {
  border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.07);
}
.synth-safety-label { font-weight: 700; }
.synth-safety.danger .synth-safety-label { color: var(--danger); }

/* Grille de cartes cliniques */
.synthese-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px; margin-bottom: 14px; align-items: start;
}
.synthese-card { padding: 14px 16px; }
.synthese-card .card-h { margin-bottom: 8px; }
.synthese-card .card-h h2 { font-size: var(--text-md); }

/* Bandeau d'ouverture « Depuis la dernière consultation » : pleine largeur,
   accent pour attirer l'œil en premier (le « quoi de neuf » du dossier). */
.synth-since-card {
  grid-column: 1 / -1;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface, #fff));
}
.synth-since-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.synth-since-empty {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-mute); font-size: var(--text-base); padding: 4px 0;
}
.synth-since-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--success-bg, #e6f4ea); color: var(--success, #1a7f37);
  font-weight: 700; font-size: var(--text-sm);
}

/* Encart « Conclusion d'abord » d'un compte-rendu (modale résultat) : le
   bottom-line clinique en tête, distinct du corps du rapport. */
.res-conclusion {
  margin: 0 0 14px; padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}
.res-conclusion-h {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primary); margin-bottom: 5px;
}
.res-conclusion-body {
  font-size: var(--text-md); line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 30vh; overflow-y: auto;
}

/* O3 — Encart « 🩺 Conclusion du laboratoire » : la conclusion RÉDIGÉE d'un
   bilan (électrophorèse, sérologie, microbiologie), extraite de façon
   DÉTERMINISTE des blocs #Rb non chiffrés, mise en avant SOUS le tableau
   d'analytes → « important en gras dans un cadre coloré » (directive UI v4).
   Tokens --info* (theme-aware, cf. .ds-banner--info de S12). */
.lab-conclusion {
  margin: 12px 0 2px; padding: 11px 14px 11px 15px;
  background: var(--info-bg);
  border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  border-left: 4px solid var(--info);
  border-radius: 8px;
}
.lab-conclusion-h {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm, 12px); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--info-text); margin-bottom: 6px;
}
.lab-conclusion-body {
  font-size: var(--text-md); line-height: 1.55; font-weight: 600; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 40vh; overflow-y: auto;
}
.lab-conclusion-seg { margin: 0; }
.lab-conclusion-seg + .lab-conclusion-seg { margin-top: 8px; }
.lab-conclusion-label { font-weight: 700; color: var(--info-text); }
.lab-conclusion details { margin-top: 8px; }
.lab-conclusion summary {
  cursor: pointer; font-size: var(--text-sm, 12px); font-weight: 500; color: var(--text-mute);
}
.lab-conclusion pre.src {
  margin: 6px 0 0; padding: 8px 10px; font-size: var(--text-sm, 12px);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  white-space: pre-wrap; word-break: break-word; color: var(--text-mute);
  max-height: 30vh; overflow-y: auto;
}

/* Ligne compacte de synthèse */
.synth-line {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}
.synth-line:last-child { border-bottom: none; }
.synth-line.clickable { cursor: pointer; }
.synth-line.clickable:hover .synth-line-main { color: var(--primary); }
.synth-line-icon { flex: 0 0 auto; font-size: var(--text-md); }
.synth-line-body { flex: 1 1 auto; min-width: 0; }
.synth-line-main { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.synth-line-sub { font-size: var(--text-sm, 12px); color: var(--text-mute); }
.synth-empty { color: var(--text-mute); font-size: var(--text-base, 13px); padding: 6px 0; }

/* Mini-fiche paramètres vitaux */
.synth-vitals-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 2px; }
.synth-vital {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; min-width: 64px; text-align: center;
}
.synth-vital-k { font-size: var(--text-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.03em; }
.synth-vital-v { font-size: var(--text-lg, 16px); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Bloc repliable (RSW / Recip-e) */
.synthese-fold { margin-bottom: 14px; padding: 0; }
.synthese-fold > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: var(--text-md, 14px);
  list-style: none; user-select: none;
}
.synthese-fold > summary::-webkit-details-marker { display: none; }
.synthese-fold > summary::before { content: '▸ '; color: var(--text-mute); }
.synthese-fold[open] > summary::before { content: '▾ '; }
.synthese-fold > .card { box-shadow: none; border: none; border-top: 1px solid var(--border); margin: 0 !important; }

/* Onglets Vaccination + Prévention */
.synth-addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.prev-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.prev-row:last-child { border-bottom: none; }
.prev-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prev-row-label { font-weight: 600; font-size: var(--text-md, 14px); }
.prev-row-interval { font-size: var(--text-sm, 12px); color: var(--text-mute); }
.prev-row-sub { font-size: var(--text-sm); color: var(--text-soft); margin-top: 3px; }
.prev-row-advice { font-size: var(--text-sm, 12px); color: var(--text-mute); margin-top: 2px; font-style: italic; }

/* Courbes de paramètres vitaux */
.vital-charts-grid {
  /* auto-FILL + borne haute : une carte seule ne s'étire plus sur toute la
     largeur de l'écran (le SVG scalait proportionnellement → graphe géant). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 460px));
  justify-content: start;
  gap: 14px; margin-bottom: 16px;
}
.vital-chart-card { padding: 12px 14px; }
.vital-chart-card .card-h h2 { font-size: var(--text-md, 14px); }
.vital-chart-last { font-size: var(--text-base); font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.vital-chart-legend { display: flex; gap: 14px; font-size: var(--text-sm, 12px); color: var(--text-mute); margin-bottom: 4px; }
.vital-chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.vital-chart-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ═══════════ Dossier « Consultations & ordonnances » : timeline unifiée ═════ */
/* (vue dossier.js — fil chronologique mêlant consultations et prescriptions)   */
.dsr-root { max-width: 1080px; margin: 0 auto; }
.dsr-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dsr-stat {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 18px; min-width: 118px;
}
.dsr-stat b { display: block; font-size: var(--text-2xl, 22px); font-weight: 700; color: var(--text); line-height: 1.2; }
.dsr-stat span { font-size: var(--text-sm, 12px); color: var(--text-mute); }
.dsr-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.dsr-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dsr-chip {
  padding: 6px 12px; border-radius: 999px; font-size: var(--text-base, 13px); font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-soft);
  cursor: pointer; white-space: nowrap;
}
.dsr-chip:hover { border-color: var(--primary); color: var(--primary); }
.dsr-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.dsr-month {
  position: sticky; top: 0; z-index: 4;
  padding: 10px 0 7px; margin-top: 6px;
  font-size: var(--text-sm, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mute); background: var(--bg);
}
.dsr-day { display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.dsr-day-date { text-align: right; padding: 16px 18px 0 0; }
.dsr-day-num { font-size: var(--text-lg); font-weight: 700; color: var(--text); line-height: 1.1; }
.dsr-day-sub { font-size: var(--text-xs); color: var(--text-mute); }
.dsr-day-cards {
  position: relative; border-left: 2px solid var(--border);
  padding: 10px 0 10px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.dsr-card {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dsr-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dsr-card::before {
  content: ''; position: absolute; left: -28px; top: 17px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--bg); box-sizing: content-box;
}
.dsr-card.consult::before { background: var(--primary); }
.dsr-card.rx::before { background: var(--accent); }
.dsr-card.rx:hover { border-color: var(--accent); }
.dsr-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsr-kind {
  font-size: var(--text-xs, 11px); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.dsr-kind-consult { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.dsr-kind-rx { background: rgba(20, 184, 166, 0.14); color: var(--accent); }
.dsr-name { font-size: var(--text-md, 14px); color: var(--text); }
.dsr-grow { flex: 1; }
.dsr-meta { font-size: var(--text-sm, 12px); color: var(--text-mute); white-space: nowrap; }
.dsr-motif { font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 5px; line-height: 1.45; }
.dsr-nested { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dsr-rx-chip {
  font-size: var(--text-sm, 12px); font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: rgba(20, 184, 166, 0.10); color: var(--accent);
  border: 1px dashed rgba(20, 184, 166, 0.45); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.dsr-more { padding: 16px 0 6px 106px; }
.dsr-search { background: transparent; border: none; outline: none; color: var(--text); width: 100%; font-size: var(--text-base); }
@media (max-width: 768px) {
  .dsr-day { grid-template-columns: 56px minmax(0, 1fr); }
  .dsr-day-date { padding-right: 10px; }
  .dsr-more { padding-left: 78px; }
}

/* =====================================================================
   DESIGN SYSTEM v2 — couche ADDITIVE (2026-06-21)
   ---------------------------------------------------------------------
   Règles de cette section :
   • UNIQUEMENT des NOUVEAUX noms de tokens / classes `.ds-*` → ne peut PAS
     modifier le rendu actuel (rien ne référence encore ces noms).
   • Ne redéfinit AUCUN token existant, ne retouche AUCUN sélecteur de
     l'agenda (.fc-*, .calendar*), ni aucune couleur déjà en place.
   • Sert de SOCLE pour migrer progressivement les ~568 font-size et ~525
     hex bruts vers une échelle stricte (voir docs/v2/03-refactoring.md).
   Objectif : une échelle typographique + d'espacement + d'élévation
   cohérente, digne d'un DMI premium, sans aucune régression.
   ===================================================================== */
:root {
  /* --- Échelle typographique stricte -------------------------------
     Rationalise 24 tailles arbitraires (9 → 28px, dont 9.5/10.5/11.5/
     12.5/13.5/14.5/15.5px) en 9 marches lisibles. Corps par défaut =
     --text-base (13px), aligné sur les boutons et les cellules. */
  --text-2xs:  10px;   /* méta minuscule : NISS, horodatage, étiquettes */
  --text-xs:   11px;   /* légendes, méta secondaire */
  --text-sm:   12px;   /* texte secondaire, cellules de tableau denses */
  --text-base: 13px;   /* CORPS par défaut */
  --text-md:   14px;   /* corps emphatique, libellés de champ, saisie */
  --text-lg:   16px;   /* sous-titres, titres de carte */
  --text-xl:   18px;   /* titres de section */
  --text-2xl:  22px;   /* titres de vue */
  --text-3xl:  28px;   /* titre d'accueil / hero */

  /* Graisses (variable Inter) */
  --fw-normal:   400;
  --fw-medium:   500;  /* graisse d'action par défaut (boutons, onglets) */
  --fw-semibold: 600;  /* sous-titres, valeurs mises en avant */
  --fw-bold:     700;  /* titres, étiquettes capitales */

  /* Interlignes */
  --lh-tight:   1.25;  /* titres */
  --lh-snug:    1.4;   /* sous-titres, libellés */
  --lh-normal:  1.5;   /* corps */
  --lh-relaxed: 1.6;   /* paragraphes longs (courriers, comptes-rendus) */

  /* Interlettrage */
  --tracking-tight: -0.01em;  /* grands titres */
  --tracking-wide:   0.05em;  /* étiquettes CAPITALES */

  /* --- Échelle d'espacement complétée (convention --space-N = N×4px) -
     Existant : 1..6 + 8. Ajout des marches manquantes pour couvrir
     l'échelle 4/8/12/16/24/32/48/64 demandée + 28/40 intermédiaires. */
  --space-0:   0;
  --space-px:  1px;
  --space-7:   28px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* --- Échelle d'élévation (z-index) sémantique --------------------
     Remplace à terme les z-index ad hoc (1/2/4/5/6/7/50/60/200/900). */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;
  --z-tooltip:  1100;

  /* --- Mouvement ---------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --transition-fast: 100ms var(--ease-standard);
  --transition-slow: 250ms var(--ease-standard);

  /* --- Tokens couleur d'appoint (suppriment des hex bruts) ---------- */
  --danger-hover:  #DC2626;   /* utilisé en dur par .btn-danger:hover */
  --success-hover: #059669;
  --warning-hover: #D97706;
}
[data-theme='dark'] {
  --danger-hover:  #F87171;
  --success-hover: #34D399;
  --warning-hover: #FBBF24;
}

/* ---------------------------------------------------------------------
   Primitives `.ds-*` — référence canonique (démontrées dans
   frontend/style-guide.html). Namespacées pour ne JAMAIS entrer en
   collision avec un sélecteur existant. Adoption progressive, opt-in.
   --------------------------------------------------------------------- */

/* Badge sémantique unifié — remplace les pilules ad hoc (.dsr-kind,
   pastilles inline…). Couleur = sens, jamais décoration. */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.ds-badge--neutral { background: var(--bg-active); color: var(--text-soft); }
.ds-badge--primary { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.ds-badge--success { background: var(--success-bg); color: var(--ok-text); }
.ds-badge--warning { background: var(--warning-bg); color: var(--warn-text); }
.ds-badge--danger  { background: #FEE2E2; color: var(--danger-text); }
.ds-badge--info    { background: var(--info-bg); color: var(--info-text); }
[data-theme='dark'] .ds-badge--danger { background: rgba(239,68,68,0.18); }
/* Ajoutés 09/07 (réception eHealthBox) : 2 familles supplémentaires pour
   couvrir les chips de type de document (labo=violet, rapport/imagerie=ciel),
   qui réinventaient leurs propres hex inline (color/bg) faute de variante
   dédiée. PDF/Document réutilisent déjà primary/neutral ci-dessus. */
.ds-badge--violet  { background: #F5F3FF; color: #6D28D9; }
[data-theme='dark'] .ds-badge--violet { background: rgba(124,58,237,0.2); color: #C4B5FD; }
.ds-badge--sky     { background: #E0F2FE; color: #0369A1; }
[data-theme='dark'] .ds-badge--sky { background: rgba(3,105,161,0.25); color: #7DD3FC; }
/* Ambre (« à classer », document non trié) — formalise l'usage inline
   style={color:var(--amber-text);background:var(--amber-bg)} croisé dans
   patients.js/reception. Tokens --amber-* déjà theme-aware. F1 (10/07). */
.ds-badge--amber   { background: var(--amber-bg); color: var(--amber-text); }

/* Pastille de gravité clinique (à relire / critique) — sémantique DMI. */
.ds-sev { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); font-weight: var(--fw-bold); }
.ds-sev-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.ds-sev--critical .ds-sev-dot { background: var(--danger); }
.ds-sev--review   .ds-sev-dot { background: var(--warning); }
.ds-sev--normal   .ds-sev-dot { background: var(--success); }

/* Bannière d'alerte clinique pleine largeur (DMG, allergies…) — remplace les
   bandeaux composés en style.cssText avec hex bruts (#fee2e2/#f59e0b/#7f1d1d…),
   invisibles/illisibles en thème sombre faute de variante. Mêmes familles de
   tokens que .ds-badge ci-dessus ; accent = border-left + icône (signal plus
   fort qu'un badge inline). S12 (10/07). */
.ds-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: var(--radius-sm);
  border-left: 4px solid transparent;
  font-size: var(--text-base);
}
.ds-banner-icon { font-size: var(--text-lg); flex-shrink: 0; }
.ds-banner-action {
  border: none; border-radius: 4px; padding: 3px 10px;
  font-size: var(--text-sm); font-weight: 600; color: #fff; cursor: pointer;
}
.ds-banner--danger  { background: #FEE2E2; border-left-color: var(--danger); color: var(--danger-text); }
.ds-banner--danger  .ds-banner-action { background: var(--danger); }
.ds-banner--warning { background: var(--warn-bg); border-left-color: var(--warning); color: var(--warn-text); }
.ds-banner--warning .ds-banner-action { background: var(--warning); }
.ds-banner--success { background: var(--ok-bg); border-left-color: var(--success); color: var(--ok-text); }
.ds-banner--success .ds-banner-action { background: var(--success); }
.ds-banner--info    { background: var(--info-bg); border-left-color: var(--info); color: var(--info-text); }
.ds-banner--info    .ds-banner-action { background: var(--info); }
[data-theme='dark'] .ds-banner--danger { background: rgba(239, 68, 68, 0.18); }

/* Touche clavier (raccourcis, ⌘K). */
.ds-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 1px var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: var(--radius-sm);
}

/* Anneau de focus clavier homogène (WCAG) — opt-in via .ds-focusable. */
.ds-focusable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Aide utilitaire de troncature lisible (1 et 2 lignes). */
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* En-tête de section (titre + action optionnelle à droite) — remplace les
   helpers `sectionTitle()` recréés inline dans plusieurs vues (bordure,
   majuscules, graisse, tracking codés en dur par appel). Un seul style,
   tokenisé, dark-aware par héritage des tokens. */
.ds-section {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.ds-section-title {
  display: flex; align-items: center; gap: var(--space-1);
  font-weight: var(--fw-bold); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
}
.ds-section-action {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--primary); cursor: pointer; white-space: nowrap;
}
.ds-section-action:hover { text-decoration: underline; }

/* Bloc statistique compact (libellé + valeur) — cockpit/synthèse/en-têtes. */
.ds-stat { display: flex; flex-direction: column; gap: 2px; }
.ds-stat-label {
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-mute);
  font-weight: var(--fw-semibold);
}
.ds-stat-value { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-tight); }
.ds-stat-value.ds-stat--sm { font-size: var(--text-md); }

/* Variante compacte de .empty-state — pour un panneau/carte/cellule de
   tableau (« Aucun résultat », « Aucune pièce jointe »…) plutôt qu'une
   page entière : avant, ces cas réinventaient un <div> muet inline sans
   cohérence visuelle d'un endroit à l'autre. */
.empty-state.ds-empty-state--compact { padding: var(--space-4) var(--space-2); }
.empty-state.ds-empty-state--compact .icon { width: 36px; height: 36px; margin-bottom: var(--space-2); }
.empty-state.ds-empty-state--compact .icon svg { width: 18px; height: 18px; }
.empty-state.ds-empty-state--compact h3 { font-size: var(--text-sm); margin-bottom: 2px; }
.empty-state.ds-empty-state--compact p { font-size: var(--text-xs); margin-bottom: var(--space-2); }

/* Carte de chargement (shimmer) — enveloppe au gabarit de `.card`, à
   remplir de `.skeleton`/`.skeleton-text` (déjà existants) pendant la
   récupération de données, pour ne plus improviser un texte « Chargement… ». */
.ds-skeleton-card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); }
.ds-skeleton-avatar.skeleton { width: 40px; height: 40px; border-radius: 50%; flex: none; }
/* ===== fin DESIGN SYSTEM v2 ===== */

/* =====================================================================
   DESIGN SYSTEM v4 — .ds-callout (bloc à cadre coloré) + hiérarchie de
   titres .ds-title-*. Couche STRICTEMENT ADDITIVE (F1, 10/07) :
   • que des NOUVEAUX noms .ds-* → ne modifie AUCUN rendu existant ;
   • ne redéfinit AUCUN token, ne retouche AUCUN sélecteur en place
     (surtout PAS l'agenda .fc-*/.calendar*/.agp*) ; entièrement réversible.

   ── GOUVERNANCE (règle projet, à respecter pour toute évolution) ──
   Toute NOUVELLE surface (bloc, encadré, bannière, titre, badge) se
   construit avec des TOKENS (couleurs sémantiques --info/--warn/--ok/
   --danger + --text-*/--space-*/--radius-*) et les primitives .ds-*.
   INTERDIT : hex bruts (#fff, #374151…) et font-size px codés en dur dans
   les styles inline — c'est ce qui produit les « îles blanches »
   illisibles en thème sombre. Un seul système, dark-aware par héritage.

   ── Famille « signal coloré » : deux densités COMPLÉMENTAIRES ──
   (mêmes familles de tokens, PAS deux systèmes concurrents)
     • .ds-banner (S12) = barre INLINE d'une ligne (icône + texte + action),
       alerte compacte pleine largeur (DMG, allergies…).
     • .ds-callout (v4) = BLOC titré (titre gras + corps) dans un cadre
       coloré, pour mettre en avant « ce qui compte » (essentiel labo/RSW,
       avertissements riches…). Superset visuel du banner : mêmes couleurs,
       plus de structure. Reprend le motif déjà validé de .rsw-essential (O13).
   Règle de choix : 1 ligne → .ds-banner ; bloc avec titre → .ds-callout.
   Ne créer AUCUN 3e système parallèle (plus de style.cssText à hex bruts).
   --------------------------------------------------------------------- */

.ds-callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-mute);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}
.ds-callout-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-1);
}
.ds-callout-title .ds-callout-icon { font-size: 1.1em; flex: none; line-height: 1; }
.ds-callout-body { margin: 0; }
.ds-callout-body + .ds-callout-body { margin-top: var(--space-2); }

/* Variantes sémantiques : fond teinté + liseré 4px accentué + texte lisible,
   toutes theme-aware. Bordure = fond (cadre discret) ; liseré gauche = accent
   saturé — même logique que .rsw-essential/.ds-banner. En sombre les tokens
   --*-bg/--*-text basculent déjà ; danger n'a pas de token de fond dédié
   (cf. .ds-badge--danger/.ds-banner--danger) → hex clair + override sombre. */
.ds-callout--info    { background: var(--info-bg);  border-color: var(--info-bg);  border-left-color: var(--info);    color: var(--info-text); }
.ds-callout--success { background: var(--ok-bg);    border-color: var(--ok-bg);    border-left-color: var(--success); color: var(--ok-text); }
.ds-callout--warning { background: var(--warn-bg);  border-color: var(--warn-bg);  border-left-color: var(--warning); color: var(--warn-text); }
.ds-callout--danger  { background: #FEE2E2;         border-color: #FEE2E2;         border-left-color: var(--danger);  color: var(--danger-text); }
[data-theme='dark'] .ds-callout--danger { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.16); }
/* Sur variantes colorées, le corps hérite de la couleur du callout et les
   libellés secondaires s'atténuent sans casser le contraste. */
.ds-callout[class*="ds-callout--"] .ds-callout-body { color: inherit; }

/* Hiérarchie de titres canonique — mappe les 3 niveaux les plus fréquents
   (titre de vue / de section / de carte) sur l'échelle --text-*. Remplace les
   font-size px + graisses recopiés à la main dans chaque en-tête de vue. */
.ds-title-1 { font-size: var(--text-2xl); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text); margin: 0; }
.ds-title-2 { font-size: var(--text-xl);  font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text); margin: 0; }
.ds-title-3 { font-size: var(--text-lg);  font-weight: var(--fw-semibold); line-height: var(--lh-snug);  color: var(--text); margin: 0; }
/* Sous-titre / légende de titre (texte atténué sous un .ds-title-*). */
.ds-title-sub { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--text-mute); line-height: var(--lh-snug); margin: 2px 0 0; }
/* ===== fin DESIGN SYSTEM v4 ===== */

/* ---------------------------------------------------------------------
   Chantier #1 — bloc administratif replié de l'en-tête dossier.
   (porte d'entrée clinique : l'administratif est relégué, jamais supprimé.)
   --------------------------------------------------------------------- */
/* TÂCHE A : bloc administratif VISIBLE par défaut (plus de <details> replié). */
.patient-admin { margin-top: var(--space-2); }
/* Carte « essentiel » toujours affichée : NISS copiable + adresse/contact/mutualité. */
.patient-admin-essential {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);
}
.patient-admin-essential .niss-chip { align-self: flex-start; }
.patient-admin .patient-meta-list { gap: 2px; }
.patient-meta-list--inline { margin-top: 0; }
/* Repli « Plus d'infos administratives » : disclosure discrète sous l'essentiel.
   Garde-fou explicite : le contenu reste CACHÉ tant que le <details> n'est pas ouvert
   (le display:flex de .patient-meta-list peut sinon fuiter hors du repli natif). */
.patient-admin-more { margin-top: var(--space-2); }
.patient-admin-more:not([open]) .patient-meta-list { display: none; }
.patient-admin-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-mute); padding: var(--space-1) 0;
}
.patient-admin-more > summary::-webkit-details-marker { display: none; }
.patient-admin-more > summary::before { content: '▸'; transition: transform var(--transition); display: inline-block; }
.patient-admin-more[open] > summary::before { transform: rotate(90deg); }
.patient-admin-more > summary:hover { color: var(--text-soft); }
.patient-admin-more .patient-meta-list {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3); margin-top: var(--space-1);
}
.patient-admin-actions { margin-top: var(--space-2); }
.niss-chip {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-soft);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-weight: 600;
  background: var(--bg-sunk, var(--bg)); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 3px var(--space-2); cursor: copy;
}
.niss-chip:hover { background: var(--primary-soft); color: var(--primary-text-on-soft); border-color: transparent; }

/* ─── Ligne du temps « Daktari » (TÂCHE B) — outil central premium ─────────────
   Frise zoomable en swimlanes par problème. Zoom cliquable + molette, aperçu RICHE
   au survol (détail + conclusion IA + sévérité). Tints rgba = lisibles clair ET sombre. */
.tl-root { display: flex; flex-direction: column; }
.tl-loading, .tl-empty { color: var(--text-mute); padding: 28px; text-align: center; font-size: var(--text-base); }

/* Barre d'outils */
.tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tl-toolbar-l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tl-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.tl-hint { color: var(--text-mute); font-size: var(--text-sm, 12px); }
.tl-toolbar-r { display: flex; align-items: center; gap: 8px; }
.tl-tool-btn { font-size: var(--text-sm); padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-soft); cursor: pointer; font-weight: 600; transition: background .12s, color .12s; }
.tl-tool-btn:hover { background: var(--bg-hover); color: var(--text); }
.tl-zoom-grp { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg); }
.tl-zoom-grp .tl-tool-btn { border: 0; border-radius: 0; font-size: var(--text-lg); font-weight: 700; padding: 3px 13px; line-height: 1; }
.tl-zoom-level { font-size: var(--text-xs); color: var(--text-mute); padding: 0 10px; min-width: 96px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; }

/* Cadre frise */
.tl-body { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.tl-gutter { flex: 0 0 154px; border-right: 1px solid var(--border); background: var(--bg-sunk, var(--bg)); }
.tl-gutter-axis { border-bottom: 1px solid var(--border); }
.tl-gutter-lane { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--lane-color, transparent); }
.tl-gutter-name { flex: 1; }
/* En-tête de section (Consultations · Examens complémentaires) dans la gouttière. */
.tl-gutter-section { display: flex; align-items: flex-end; padding: 0 12px 4px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); border-bottom: 1px solid var(--border); background: var(--bg-sunk, var(--bg)); }
.tl-section-band { position: absolute; left: 0; width: 100%; border-bottom: 1px solid var(--border); background: rgba(127,127,127,.05); }
.tl-gutter-ico { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; color: var(--lane-color, #64748b); }
.tl-gutter-ico svg { width: 12px; height: 12px; }
.tl-dot--imagerie { border-color: #7c3aed; background: rgba(124,58,237,.16); color: #7c3aed; }
.tl-card-cta { margin-top: 10px; font-size: var(--text-xs); color: var(--primary); font-weight: 600; }
.tl-gutter-lane.tl-row--alt { background: rgba(127,127,127,.035); }
.tl-gutter-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tl-gutter-name { font-weight: 600; font-size: var(--text-base, 13px); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-gutter-code { font-size: var(--text-xs); color: var(--text-mute); font-family: var(--font-mono); letter-spacing: .02em; }
.tl-gutter-lane--special .tl-gutter-name { color: var(--text-mute); font-style: italic; font-weight: 500; }
.tl-gutter-count { flex: 0 0 auto; font-size: var(--text-xs, 11px); font-weight: 700; color: var(--lane-color, var(--text-mute)); background: color-mix(in srgb, var(--lane-color, #888) 14%, transparent); border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; }

.tl-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; cursor: grab; }
.tl-scroll--grabbing { cursor: grabbing; user-select: none; }
.tl-canvas { position: relative; min-width: 100%; }

.tl-lane-bg { position: absolute; left: 0; width: 100%; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--lane-color, transparent) 4%, transparent); }
.tl-lane-bg.tl-row--alt { background: color-mix(in srgb, var(--lane-color, #777) 7%, transparent); }

/* Zone FUTURE (après « aujourd'hui ») : hachures discrètes = « prévu, pas encore fait ». */
.tl-future { position: absolute; bottom: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(135deg, rgba(127,127,127,.055) 0 7px, transparent 7px 15px); }

.tl-axis { position: absolute; inset: 0; pointer-events: none; }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(127,127,127,.14); }
.tl-grid--year { background: var(--border); }
.tl-tick { position: absolute; top: 8px; transform: translateX(5px); font-size: var(--text-xs); color: var(--text-mute); white-space: nowrap; }
.tl-tick--year { font-weight: 700; color: var(--text-soft); }
.tl-tick--month { font-size: var(--text-2xs, 10px); opacity: .75; }

.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 3; box-shadow: 0 0 0 1px rgba(59,130,246,.15); }
.tl-today-tag { position: absolute; top: 3px; left: 3px; background: var(--primary); color: #fff; font-size: var(--text-2xs); font-weight: 700; padding: 1px 7px; border-radius: 7px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

.tl-dot { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--text-base); line-height: 1; cursor: pointer; padding: 0; z-index: 2; border: 2px solid var(--border-strong); background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .1s ease, box-shadow .1s ease; }
.tl-dot:hover { transform: scale(1.25); z-index: 6; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.tl-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary); z-index: 6; }
.tl-dot--active { box-shadow: 0 0 0 3px var(--primary), 0 2px 8px rgba(0,0,0,.18); z-index: 5; }
.tl-dot--future { border-style: dashed; }

/* Icône vectorielle dans la pastille (hérite la couleur du type via currentColor). */
.tl-ico { display: flex; align-items: center; justify-content: center; }
.tl-ico svg { width: 15px; height: 15px; display: block; }

/* Couleur par type (anneau + fond léger + couleur d'icône lisible). */
.tl-dot--consultation { border-color: #3b82f6; background: rgba(59,130,246,.16); color: #2563eb; }
.tl-dot--prescription { border-color: #8b5cf6; background: rgba(139,92,246,.16); color: #7c3aed; }
.tl-dot--labo         { border-color: #0d9488; background: rgba(13,148,136,.16); color: #0d9488; }
.tl-dot--vaccin       { border-color: var(--success-strong); background: rgba(22,163,74,.16); color: var(--success-deep); }
.tl-dot--document,
.tl-dot--certificat,
.tl-dot--depistage    { border-color: #94a3b8; background: rgba(148,163,184,.22); color: #64748b; }
.tl-dot--rdv          { border-color: var(--warning, #f59e0b); background: rgba(245,158,11,.16); color: var(--warning-hover, #d97706); }

/* Sévérité (tri auto des résultats) : anneau coloré, pulse pour le critique. */
.tl-sev--important.tl-dot { box-shadow: 0 0 0 3px rgba(245,158,11,.30), 0 1px 3px rgba(0,0,0,.12); }
.tl-sev--critique.tl-dot { box-shadow: 0 0 0 3px rgba(239,68,68,.36), 0 1px 3px rgba(0,0,0,.12); animation: tl-pulse 2.2s ease-in-out infinite; }
@keyframes tl-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(239,68,68,.36), 0 1px 3px rgba(0,0,0,.12); } 50% { box-shadow: 0 0 0 7px rgba(239,68,68,.12), 0 1px 3px rgba(0,0,0,.12); } }
@media (prefers-reduced-motion: reduce) { .tl-sev--critique.tl-dot { animation: none; } }

/* Légende */
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0 2px; }
.tl-leg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-soft); background: none; border: 1px solid transparent; border-radius: 99px; padding: 3px 9px; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, opacity .12s; }
.tl-leg:hover { background: var(--bg-hover); border-color: var(--border); }
.tl-leg--off { opacity: .42; }
.tl-leg--off .tl-leg-dot { filter: grayscale(1); }
.tl-leg-dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; }
.tl-leg-dot svg { width: 9px; height: 9px; }

/* Carte partagée (aperçu survol + panneau détail) */
.tl-card-head { display: flex; align-items: center; gap: 10px; }
.tl-card-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border-strong); flex: 0 0 auto; }
.tl-card-ico .tl-ico svg { width: 17px; height: 17px; }
.tl-card-head-txt { min-width: 0; }
.tl-card-kind { font-size: var(--text-xs, 11px); color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-card-date { font-size: var(--text-base); font-weight: 600; color: var(--text); margin-top: 1px; }
.tl-card-title { margin-top: 9px; font-size: var(--text-md, 14px); font-weight: 600; line-height: 1.35; }
.tl-card-sub { color: var(--text-mute); font-size: var(--text-sm); margin-top: 2px; }
.tl-card-detail { margin-top: 8px; font-size: var(--text-base, 13px); line-height: 1.5; color: var(--text-soft); }
.tl-card-concl { margin-top: 10px; border-left: 3px solid var(--primary); background: rgba(59,130,246,.08); border-radius: 8px; padding: 8px 11px; }
.tl-card-concl-h { font-size: var(--text-xs, 11px); font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.tl-card-concl-b { font-size: var(--text-base, 13px); line-height: 1.5; color: var(--text-soft); }
.tl-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Badge sévérité */
.tl-sev { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; padding: 1px 7px; border-radius: 99px; letter-spacing: 0; text-transform: none; }
.tl-sev-dot { width: 6px; height: 6px; border-radius: 50%; }
.tl-sev.tl-sev--critique { background: rgba(239,68,68,.15); color: var(--danger, #ef4444); }
.tl-sev.tl-sev--critique .tl-sev-dot { background: var(--danger, #ef4444); }
.tl-sev.tl-sev--important { background: rgba(245,158,11,.18); color: var(--warning-hover, #d97706); }
.tl-sev.tl-sev--important .tl-sev-dot { background: var(--warning, #f59e0b); }

/* Aperçu au SURVOL (popover flottant) */
.tl-pop { position: fixed; z-index: 1000; width: 308px; max-width: 88vw; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.24); padding: 12px 14px; pointer-events: none; animation: tl-pop-in .12s ease; }
.tl-pop::after { content: ''; position: absolute; left: var(--tl-arrow, 50%); width: 12px; height: 12px; background: var(--bg); transform: translateX(-50%) rotate(45deg); }
.tl-pop:not(.tl-pop--below)::after { bottom: -6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tl-pop.tl-pop--below::after { top: -6px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
@keyframes tl-pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Calques superposés du canvas (fonds de lanes + pastilles). */
.tl-lanes { position: absolute; inset: 0; }
.tl-markers { position: absolute; inset: 0; z-index: 4; }

/* Bascule « Par type / Par problème ». */
.tl-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.tl-seg .tl-tool-btn { border: 0; border-radius: 0; }
.tl-seg .tl-tool-btn + .tl-tool-btn { border-left: 1px solid var(--border); }
.tl-tool-btn.tl-seg--on { background: var(--primary-soft, rgba(59,130,246,.12)); color: var(--primary); font-weight: 700; }
.tl-tool-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Pastille de COMPTAGE (agrégat d'une période dense) — clic = zoomer dedans. */
.tl-cluster { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; padding: 0; font-size: var(--text-xs); font-weight: 700; line-height: 1;
  border: 2px solid var(--lane-color, #94a3b8); color: var(--lane-color, #475569);
  background: color-mix(in srgb, var(--lane-color, #94a3b8) 16%, var(--bg)); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .1s ease, box-shadow .1s ease; }
.tl-cluster:hover { transform: scale(1.22); z-index: 6; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.tl-cluster.tl-sev--important { border-color: var(--warning, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,.30), 0 1px 3px rgba(0,0,0,.12); }
.tl-cluster.tl-sev--critique { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); box-shadow: 0 0 0 3px rgba(239,68,68,.36), 0 1px 3px rgba(0,0,0,.12); }

/* Résumé d'un groupe au survol. */
.tl-cluster-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.tl-cluster-row { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); min-width: 0; }
.tl-cluster-ico { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; }
.tl-cluster-ico svg { width: 10px; height: 10px; }
.tl-cluster-d { color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.tl-cluster-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.tl-cluster-more { margin-top: 7px; font-size: var(--text-xs); color: var(--text-mute); font-style: italic; }
/* Lignes RICHES du cluster (bio/rapports) : titre + extrait/anomalies. */
.tl-cluster-row--rich { align-items: flex-start; gap: 8px; }
.tl-cluster-row--rich .tl-cluster-ico { margin-top: 1px; }
.tl-cluster-main { min-width: 0; flex: 1 1 auto; }
.tl-cluster-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tl-cluster-line .tl-cluster-t { font-weight: 600; color: var(--text); }
.tl-cluster-snip { margin-top: 2px; font-size: var(--text-sm, 12px); line-height: 1.45; color: var(--text-soft); }
.tl-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Panneau détail (clic) */
.tl-detail { margin-top: 14px; }
.tl-detail-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg); box-shadow: 0 2px 12px rgba(0,0,0,.06); max-width: 680px; }
.tl-detail-actions { display: flex; gap: 8px; margin-top: 14px; }

/* V2.5 B2 — agenda */
/* Toast « warning » (garde anti double-réservation, non bloquante) — les
   variantes success/error/info existent déjà en tête de fichier. */
.toast.warning { border-left: 3px solid var(--warning, #d97706); }

/* ── Repli auto dans le dossier patient ─────────────────────────────────────
   Le menu reste présent sous forme de rail d'icônes : le praticien conserve
   chaque accès et peut le rouvrir depuis le chevron du logo. */
body.sidebar-folded .sidebar-backdrop { display: none; }
body.sidebar-folded #app { grid-template-columns: 72px minmax(0, 1fr); }
body.sidebar-folded .main .topbar { padding-left: 20px; }
.sidebar-unfold-btn {
  position: fixed; left: 86px; top: 10px; z-index: 60;
  display: none; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text);
  cursor: pointer; font-size: var(--text-lg); line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  -webkit-app-region: no-drag;
}
body.sidebar-folded .sidebar-unfold-btn { display: none; }
.sidebar-unfold-btn:hover { background: var(--bg-hover, var(--bg-2)); }

/* ── V2.5.7 — Ligne du temps VERTICALE (tl2-*) + Journal en cartes (jrn-*) ────
   Remplace la frise horizontale zoomable et le tableur SOAP (illisibles).
   Tokens uniquement → thème sombre couvert. --fam = couleur de la famille. */
.tl2-root { display: flex; flex-direction: column; gap: 12px; }
.tl2-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl2-toolbar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tl2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: var(--text-base, 13px); font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-soft);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.tl2-chip:hover { border-color: var(--fam, var(--primary)); }
.tl2-chip.active { border-color: var(--fam, var(--primary)); color: var(--text); box-shadow: inset 0 0 0 1px var(--fam, var(--primary)); }
.tl2-chip-n { font-size: var(--text-xs, 11px); font-weight: 700; color: var(--text-mute); background: var(--bg-2); border-radius: 999px; padding: 1px 6px; }
.tl2-search { min-width: 220px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input, var(--bg-elevated)); color: var(--text); font-size: var(--text-base); }
.tl2-count { font-size: var(--text-sm); color: var(--text-mute); white-space: nowrap; }

.tl2-future { border: 1px solid var(--border); border-left: 3px solid #0891b2; border-radius: 10px; background: var(--bg-elevated); padding: 10px 12px; }
.tl2-future-h { font-size: var(--text-sm); font-weight: 800; color: var(--text-soft); margin-bottom: 6px; }
.tl2-future-row { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 4px 6px; border-radius: 6px; font-size: var(--text-base); color: var(--text); }
.tl2-future-row:hover { background: var(--bg-hover, var(--bg-2)); }
.tl2-future-date { font-weight: 700; white-space: nowrap; }
.tl2-future-title { font-weight: 600; }
.tl2-future-sub { color: var(--text-mute); font-size: var(--text-sm); }
.tl2-future-more { font-size: var(--text-sm, 12px); color: var(--text-mute); padding: 4px 6px; }

.tl2-year {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--text-lg); font-weight: 800; color: var(--text);
  padding: 8px 2px 6px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.tl2-year-n { font-size: var(--text-xs); font-weight: 700; color: var(--text-mute); }
.tl2-rows { position: relative; padding: 8px 0 14px; }
.tl2-rows::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl2-row {
  position: relative; display: flex; gap: 12px; width: 100%; text-align: left;
  padding: 7px 10px 7px 0; border-radius: 10px; color: var(--text);
  align-items: flex-start;
}
.tl2-row:hover { background: var(--bg-hover, var(--bg-2)); }
.tl2-row:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.tl2-dot {
  position: relative; z-index: 1; flex: 0 0 32px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--bg-elevated);
  border: 2px solid var(--fam, var(--border)); color: var(--fam, var(--text-soft));
}
.tl2-dot svg { width: 16px; height: 16px; }
.tl2-main { flex: 1; min-width: 0; padding-top: 3px; }
.tl2-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl2-date { font-size: var(--text-sm, 12px); font-weight: 700; color: var(--text-mute); white-space: nowrap; min-width: 52px; }
.tl2-title { font-size: var(--text-md, 14px); font-weight: 650; color: var(--text); }
.tl2-sub { font-size: var(--text-sm, 12px); color: var(--text-mute); }
.tl2-detail { font-size: var(--text-base, 13px); color: var(--text-soft); margin-top: 2px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl2-concl { font-size: var(--text-base, 13px); color: var(--text); margin-top: 4px; padding: 6px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--success-strong) 8%, transparent); border-left: 3px solid var(--success-strong); line-height: 1.45; }

/* Journal des consultations en cartes */
.jrn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jrn-search { min-width: 200px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input, var(--bg-elevated)); color: var(--text); font-size: var(--text-base); }
.jrn-status-chips { display: flex; gap: 6px; }
.jrn-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 14px; }
.jrn-card {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated);
  padding: 10px 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.jrn-card:hover { border-color: var(--primary); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.jrn-card:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.jrn-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jrn-date { font-size: var(--text-base); font-weight: 750; color: var(--text); white-space: nowrap; }
.jrn-time { font-size: var(--text-xs); color: var(--text-mute); }
.jrn-motif { font-size: var(--text-base); font-weight: 600; color: var(--text); flex: 1; min-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrn-del { margin-left: auto; flex-shrink: 0; }
.jrn-body { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.jrn-soap { display: flex; gap: 7px; align-items: flex-start; }
.jrn-letter {
  flex: 0 0 16px; width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 4px; font-size: var(--text-2xs, 10px); font-weight: 800; color: #fff; margin-top: 2px;
}
.jrn-soap-txt { font-size: var(--text-base, 13px); color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jrn-soap-loading, .jrn-soap-empty { font-size: var(--text-sm); color: var(--text-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHANTIER NUIT J2a (02/07) — écran de consultation :
   1) vumètre micro dans la barre de commande (contrôles de dictée visibles)
   2) grille SOAP : lettres colorées par section (cohérentes avec le Journal),
      bandeau discret de génération live
   3) encadré « 💊 Traitement chronique » repliable (ouvert) en haut + ajout rapide
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Vumètre micro (barre de commande) ── */
.consult-vu {
  display: inline-block;
  width: 74px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}
.consult-vu-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--text-mute);
  transition: width 0.12s linear, background-color 0.2s;
}
.consult-vu-fill.vu-speech { background: var(--success-strong); }

/* ── 2. Grille SOAP : lettres colorées (S/O/E/P/T = Journal) + confort ── */
.soap-field .field-h .letter-subjective { background: var(--primary); color: #fff; }
.soap-field .field-h .letter-objective  { background: var(--soap-objective); color: #fff; }
.soap-field .field-h .letter-assessment { background: var(--soap-assessment); color: #fff; }
.soap-field .field-h .letter-plan       { background: var(--soap-plan); color: #fff; }
.soap-field .field-h .letter-treatment  { background: var(--soap-treatment); color: #fff; }
/* liseré assorti au focus : on voit immédiatement DANS QUELLE section on écrit */
.soap-field-subjective textarea:focus { border-color: var(--primary); }
.soap-field-objective  textarea:focus { border-color: var(--soap-objective); }
.soap-field-assessment textarea:focus { border-color: var(--soap-assessment); }
.soap-field-plan       textarea:focus { border-color: var(--soap-plan); }
.soap-field-treatment  textarea:focus { border-color: var(--soap-treatment); }
.soap-field textarea { overflow-y: auto; } /* auto-grow JS plafonné à 640px */

.soap-gen-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--primary-soft, #eff6ff);
  color: var(--primary, #2563eb);
  font-size: var(--text-sm);
  font-weight: 600;
  animation: pulse 1.6s infinite;
}
/* Pendant la génération IA : lueur douce PULSÉE sur les champs SOAP (le texte y
   arrive en streaming — ce n'est pas un skeleton mais un signal « l'IA écrit
   ici en ce moment »). Plus premium que la seule bordure pointillée. Respecte
   prefers-reduced-motion. Ajout 09/07 (refonte acte médical). */
.soap-generating .soap-grid textarea {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  animation: soap-field-pulse 1.6s ease-in-out infinite;
}
@keyframes soap-field-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .soap-generating .soap-grid textarea { animation: none; }
}

/* ── 3. Encadré « 💊 Traitement chronique » (colonne latérale, v3.5) ── */
.consult-medscheme-details {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--success-strong);
  border-radius: 10px;
  background: var(--bg-elevated);
  overflow: hidden;
}
/* Dans .consult-side (sticky, hauteur bornée, overflow:hidden) : une longue
   liste de chroniques ne doit pas écraser l'historique patient en dessous —
   scroll interne propre au-delà de 40vh, plutôt que de pousser la timeline
   hors du cadre visible. */
.consult-side > .consult-medscheme-details {
  flex-shrink: 0;
  margin: 10px 10px 0;
  display: flex;
  flex-direction: column;
}
.consult-side > .consult-medscheme-details[open] > .consult-medscheme {
  overflow: visible;
}
.consult-medscheme-summary {
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--text-base, 13px);
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-soft, var(--bg-card));
  list-style: none;
}
.consult-medscheme-summary::-webkit-details-marker { display: none; }
.consult-medscheme-summary::after {
  content: '▾';
  float: right;
  color: var(--text-mute);
  transition: transform 0.15s;
}
.consult-medscheme-details:not([open]) .consult-medscheme-summary::after { transform: rotate(-90deg); }
.consult-medscheme-details > .consult-medscheme { border-top: 1px solid var(--border); }
.cms-empty {
  padding: 10px 12px 4px;
  font-size: var(--text-sm);
  color: var(--text-mute);
  font-style: italic;
}

/* Ajout rapide d'un médicament chronique (recherche SAMv2 inline) */
.cms-add-wrap { position: relative; padding: 8px 12px 10px; }
.cms-add-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: var(--text-base, 13px);
  outline: none;
  transition: var(--transition);
}
.cms-add-input:focus { border-color: var(--success-strong); border-style: solid; box-shadow: var(--focus-ring); }
.cms-add-input::placeholder { color: var(--text-mute); }
.cms-add-menu {
  position: absolute;
  z-index: 30;
  left: 12px;
  right: 12px;
  top: 100%;
  margin-top: -6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}
.cms-add-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: var(--text-base, 13px);
}
.cms-add-row:hover { background: var(--bg-hover); }
.cms-add-name { font-weight: 600; color: var(--text); }
.cms-add-meta { font-size: var(--text-xs); color: var(--text-mute); }

/* =====================================================================
   V2.6 J3 — Tableau de bord « cockpit matin » + onglets dossier premium
   (chantier nuit 2026-07-02 ; règles NOUVELLES uniquement, les règles
   .tabs-grouped-scroll / .tabs-group-items / .tab existantes ont été
   raffinées en place plus haut)
   ===================================================================== */

/* ── Dashboard : rangée raccourcis (accès 1-clic) ─────────────────── */
.dash-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.dash-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 11px 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
}
.dash-quick-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.dash-quick-btn:active { transform: translateY(0); }
.dash-quick-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dash-quick-ic {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl, 18px);
  background: var(--bg-hover);
  border-radius: 10px;
}
.dash-quick-main { display: flex; flex-direction: column; min-width: 0; }
.dash-quick-label { font-size: var(--text-base); font-weight: 600; color: var(--text); }
.dash-quick-sub {
  font-size: var(--text-xs); color: var(--text-mute); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Dashboard : « Aujourd'hui » — prochain patient / RDV passés ──── */
.dash-appt.is-past { opacity: 0.55; }
.dash-appt.is-past:hover { opacity: 1; }
.dash-appt.is-next {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.dash-appt.is-next:hover { filter: brightness(0.98); }
.dash-appt.is-next .dash-appt-time { color: var(--primary-text-on-soft); }
.dash-next-chip {
  flex: none;
  font-size: var(--text-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-on-primary, #fff);
  background: var(--primary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* ── Onglets dossier : ombres de bord au défilement (masque scroll) ──
   Progressif : seulement si le moteur connaît les scroll-driven
   animations (@supports) ; sinon la barre défile simplement, sans fade. */
@property --tabfade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --tabfade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes tabs-edge-fade {
  from { --tabfade-l: 0px;  --tabfade-r: 28px; }
  to   { --tabfade-l: 28px; --tabfade-r: 0px; }
}
@supports (animation-timeline: scroll(self inline)) {
  .tabs-grouped-scroll {
    animation: tabs-edge-fade linear both;
    animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--tabfade-l),
      #000 calc(100% - var(--tabfade-r)), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, #000 var(--tabfade-l),
      #000 calc(100% - var(--tabfade-r)), transparent 100%);
  }
}

/* ── V2.5 J1 : Réception premium + lecture confortable des comptes-rendus ──
   rcv-* = cartes de courrier de la Réception ; rpt-toc/rpt-copy/rpt-reading =
   compléments des primitives report-view (sommaire, copie, largeur lecture). */
.rpt-reading {
  width: min(100%, 980px);
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px 30px;
}
.rpt-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.rpt-section--wide { grid-column: 1 / -1; }
.rpt-sections-grid .rpt-section {
  min-width: 0;
  height: 100%;
  padding: 14px 16px 15px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -22px rgba(15, 23, 42, .38);
}
.rpt-sections-grid .rpt-section-h {
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom-color: color-mix(in srgb, var(--section-color) 14%, var(--border));
}
.rpt-sections-grid .rpt-section-title {
  font-size: 11.5px;
  letter-spacing: .055em;
}
.rpt-sections-grid .rpt-section-body {
  font-size: 13.5px;
  line-height: 1.72;
}
.rpt-conclusion-callout {
  border-radius: 13px;
  padding: 15px 17px;
  box-shadow: 0 9px 28px -24px rgba(15, 23, 42, .45);
}
.rpt-conclusion-callout-title::before { content: '✓'; margin-right: 7px; }

/* En-tête clinique des pièces eHealthBox : l’imagerie et les rapports ne
   ressemblent plus à une grille administrative. Type, titre et provenance
   forment un seul bloc de lecture, comme dans un DMI moderne. */
.ehbox-clinical-header {
  width: min(calc(100% - 44px), 980px);
  margin: 18px auto 0;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid color-mix(in srgb, #7c3aed 18%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 7%, var(--bg-elevated)), var(--bg-elevated) 58%);
  box-shadow: 0 14px 32px -30px rgba(76, 29, 149, .8);
}
.ehbox-clinical-header--imagerie {
  border-color: color-mix(in srgb, #0284c7 20%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #0284c7 8%, var(--bg-elevated)), var(--bg-elevated) 58%);
}
.ehbox-clinical-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: color-mix(in srgb, #7c3aed 12%, var(--bg-elevated));
  font-size: 21px;
}
.ehbox-clinical-header--imagerie .ehbox-clinical-icon { background: color-mix(in srgb, #0284c7 12%, var(--bg-elevated)); }
.ehbox-clinical-heading { min-width: 0; flex: 1; }
.ehbox-clinical-eyebrow {
  margin-bottom: 3px;
  color: #6d28d9;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.ehbox-clinical-header--imagerie .ehbox-clinical-eyebrow { color: #0369a1; }
.ehbox-clinical-title {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -.012em;
}
.ehbox-clinical-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 9px;
}
.ehbox-clinical-facts > span { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.ehbox-clinical-facts small { color: var(--text-mute); font-size: 11px; }
.ehbox-clinical-facts strong { color: var(--text-soft); font-size: 11.5px; font-weight: 650; }
.ehbox-document-meta {
  margin: 14px 18px 4px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  background: var(--bg-2, #f5f5f7);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  font-size: 12px;
}
.ehbox-document-meta span { color: var(--text-mute); }
.ehbox-document-meta strong { color: var(--text); }
.rpt-prose-card {
  width: min(calc(100% - 44px), 900px);
  margin: 18px auto 30px;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  color: var(--text, #111827);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.82;
  letter-spacing: .006em;
  white-space: pre-wrap;
  word-break: break-word;
}
.rpt-prose-card--imagerie { border-left-color: #0284c7; }
.rpt-prose-card--rapport { border-left-color: #7c3aed; }
@media (max-width: 980px) {
  .rpt-sections-grid { grid-template-columns: minmax(0, 1fr); }
  .rpt-section--wide { grid-column: auto; }
  .rpt-reading { padding-inline: 14px; }
  .ehbox-clinical-header, .rpt-prose-card { width: calc(100% - 28px); }
}
.rpt-document-title {
  font-size: var(--text-lg, 16px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--text);
  padding: 2px 2px 4px;
}
.rpt-key-label {
  display: block;
  width: fit-content;
  margin-bottom: 3px;
  font-size: var(--text-xs, 11px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #047857;
}
.rpt-key-label-diagnostic { color: #7c3aed; }
.rpt-key-label-plan { color: var(--warning-hover, #b45309); }
.rpt-copy {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 7px;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.rpt-section:hover .rpt-copy { opacity: 1; }
.rpt-copy:hover { background: var(--bg-hover); color: var(--text); }
.rpt-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 5;
}
.rpt-toc-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-mute);
}
.rpt-toc-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.rpt-toc-chip:hover { border-color: var(--primary); color: var(--text); }

/* Cartes de courrier (liste Réception) : 2e ligne badges + aperçu */
.rcv-line2 {
  grid-column: 2 / -1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  margin-top: 1px;
}
.rcv-preview {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}
.rcv-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.rcv-chip-crit { background: rgba(239, 68, 68, 0.16); color: var(--danger, #ef4444); }
.rcv-chip-warn { background: rgba(245, 158, 11, 0.16); color: var(--warning-hover, #d97706); }
.rcv-chip-abn  { background: rgba(239, 68, 68, 0.10); color: var(--danger, #ef4444); }
.rcv-chip-spec { background: var(--bg-2, rgba(100, 116, 139, 0.14)); color: var(--text-soft); font-weight: 600; }
.rcv-chip-attach {
  background: rgba(245, 158, 11, 0.16);
  color: var(--warning-hover, #d97706);
  cursor: pointer;
  border: 1px dashed rgba(245, 158, 11, 0.55);
}
.rcv-chip-attach:hover { background: rgba(245, 158, 11, 0.28); }

/* ── Réponse du médecin depuis eHealthBox ──────────────────────────────────
   Bloc bleu volontairement distinct du second lecteur violet : le patient et
   le médecin doivent identifier immédiatement QUI parle. */
.eh-patient-response {
  margin: var(--space-4) 14px 10px;
  padding: var(--space-4);
  display: grid;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--bg-elevated)), var(--bg-elevated));
  box-shadow: var(--shadow-sm);
}
.eh-patient-response__head { display: flex; align-items: flex-start; gap: 11px; }
.eh-patient-response__icon {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--primary);
}
.eh-patient-response__eyebrow {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .07em;
}
.eh-patient-response h4 { margin: 2px 0 1px; font-size: var(--text-md); color: var(--text); }
.eh-patient-response__head p,
.eh-patient-response__privacy { margin: 0; color: var(--text-mute); font-size: var(--text-xs); line-height: 1.45; }
.eh-patient-response__text { width: 100%; min-height: 104px; resize: vertical; line-height: 1.55; }
.eh-patient-response__under,
.eh-patient-response__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.eh-patient-response__under { justify-content: space-between; }
.eh-patient-response__status { color: var(--text-mute); font-size: var(--text-sm); font-weight: 650; }
.eh-patient-response__status.is-sent { color: color-mix(in srgb, var(--primary) 68%, var(--text)); }
.eh-patient-response__count { color: var(--text-mute); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.eh-patient-response__learn {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--text-soft); font-size: var(--text-xs); line-height: 1.45;
}
.eh-patient-response__learn input { margin-top: 2px; }
.eh-patient-response__loading,
.eh-patient-response__error { color: var(--text-mute); font-size: var(--text-sm); }
.eh-patient-response__error { color: var(--danger); }

@media (max-width: 700px) {
  .eh-patient-response { margin-inline: 8px; padding: 13px; }
  .eh-patient-response__actions > button { flex: 1 1 170px; }
}

/* ── Second lecteur — carte IA de PREMIER PLAN dans l'aperçu Réception ────────
   Proposition IA TOUJOURS étiquetée « à valider » : hue violet dédié (distinct
   du bleu clinique et du rouge de tri, jamais alarmant), dérivé par color-mix
   pour rester lisible en clair ET en sombre. Zéro couleur en dur : `--sr-hue`
   local + tokens du design system uniquement. La carte est une AIDE, jamais un
   fait ni une alerte — d'où les tons calmes et l'eyebrow explicite. */
.sr-card {
  --sr-hue: #7c3aed;
  margin: var(--space-4) 14px 22px;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--sr-hue) 24%, var(--border));
  border-left: 3px solid color-mix(in srgb, var(--sr-hue) 62%, var(--border-strong));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sr-hue) 5%, var(--bg-elevated)), var(--bg-elevated) 62%);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
}
.sr-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.sr-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sr-hue) 14%, var(--bg-elevated));
  font-size: 18px;
}
.sr-headmain { flex: 1; min-width: 0; }
.sr-eyebrow {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sr-hue) 60%, var(--text-mute));
}
.sr-title {
  margin: 2px 0 0;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.sr-status {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.sr-status--wait      { background: var(--bg-2); color: var(--text-soft); }
.sr-status--ready     { background: color-mix(in srgb, var(--sr-hue) 16%, transparent); color: color-mix(in srgb, var(--sr-hue) 72%, var(--text)); }
.sr-status--validated { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 62%, var(--text)); }
.sr-status--shared    { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-text-on-soft); }
.sr-status--error     { background: color-mix(in srgb, var(--warning, #d97706) 16%, transparent); color: var(--warning-hover, #b45309); }
.sr-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: sr-pulse 1.6s ease-in-out infinite;
}
@keyframes sr-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sr-dot { animation: none; } }

.sr-wait {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-soft);
}
.sr-block { display: grid; gap: 6px; }
.sr-block-label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.sr-prose {
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.sr-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-ev-chip {
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--sr-hue) 22%, var(--border));
  background: color-mix(in srgb, var(--sr-hue) 6%, var(--bg-elevated));
  color: var(--text-soft);
  border-radius: var(--radius-full);
  padding: 3px 11px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.sr-ev-chip:hover { border-color: color-mix(in srgb, var(--sr-hue) 55%, var(--border)); color: var(--text); }
.sr-ev-chip.is-open { background: color-mix(in srgb, var(--sr-hue) 12%, var(--bg-elevated)); color: var(--text); }
.sr-ev-quotes { display: grid; gap: 6px; }
.sr-ev-quote {
  margin: 0;
  padding: 8px 12px;
  border-left: 2px solid color-mix(in srgb, var(--sr-hue) 45%, var(--border));
  background: var(--bg-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-soft);
  font-style: italic;
}
.sr-ev-quote cite { color: var(--text-mute); font-style: normal; font-weight: 600; }
.sr-warn {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent);
  color: var(--warning-hover, #b45309);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.sr-prov {
  font-size: var(--text-xs);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.sr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sr-shared-note { font-size: var(--text-sm); color: color-mix(in srgb, var(--primary) 55%, var(--text)); font-weight: 600; }

/* ── Hub RSW — vue 2 panneaux (liste ↔ contenu, type boîte eHealthBox, 09/07) ──
   Liste compacte à gauche, contenu déchiffré à droite dans un panneau COLLANT
   (align-items:start sur le grid autorise le sticky). Un seul scroll page. */
.rsw-2col { display: grid; grid-template-columns: minmax(320px, 40%) 1fr; gap: 12px; align-items: start; }
.rsw-list {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 6px; max-height: 72vh; overflow-y: auto;
  background: var(--bg-elevated);
}
.rsw-list-empty { padding: 16px; font-size: var(--text-sm); color: var(--text-mute); text-align: center; }
.rsw-row {
  padding: 8px 10px; border-radius: var(--radius-sm, 8px); cursor: pointer;
  border: 1px solid transparent; transition: background .12s ease, border-color .12s ease;
}
.rsw-row:hover { background: var(--bg-hover, rgba(0, 0, 0, 0.03)); }
.rsw-row.selected { background: var(--primary-soft, rgba(1, 189, 195, 0.12)); border-color: var(--primary, #01BDC3); }
.rsw-row:focus-visible { outline: var(--focus-outline); outline-offset: 1px; }
.rsw-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rsw-row-type { font-weight: 600; font-size: var(--text-base, 13px); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsw-row-date { font-size: var(--text-xs); color: var(--text-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rsw-row-sub { font-size: var(--text-sm, 12px); color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsw-row-src { color: var(--text-mute); }
.rsw-row-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.rsw-detail {
  position: sticky; top: 12px; align-self: start;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  background: var(--bg-elevated); max-height: calc(100vh - 150px);
}
.rsw-detail-head { border-bottom: 1px solid var(--border); }
.rsw-detail-head:empty { display: none; }
.rsw-detail-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 6px; flex-wrap: wrap; }
.rsw-detail-title { font-weight: 600; font-size: var(--text-md, 14px); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rsw-detail-rswid { font-size: var(--text-xs, 11px); color: var(--text-mute); font-family: ui-monospace, monospace; }
.rsw-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }

/* En-tête collant = zone MÉTADONNÉES sous le titre (hiérarchie titre > méta >
   statuts > contenu). Auteur/service/site + INAMI de la transaction telle que
   listée par le hub : ces champs existaient sur la ligne mais DISPARAISSAIENT
   une fois la transaction ouverte (audit 09/07). Bâtie depuis tx → immédiate. */
.rsw-detail-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 7px; padding: 0 12px 8px;
  font-size: var(--text-sm, 12px); color: var(--text-soft); line-height: 1.45;
}
.rsw-detail-meta > span { display: inline-flex; align-items: baseline; gap: 3px; }
.rsw-detail-meta .rsw-meta-sep { color: var(--text-mute); opacity: .55; }
.rsw-detail-meta .rsw-meta-strong { font-weight: 600; color: var(--text); }
.rsw-detail-meta .rsw-meta-nihii { font-family: ui-monospace, monospace; font-size: var(--text-xs, 11px); color: var(--text-mute); }
.rsw-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.rsw-detail-badges:empty { display: none; }

/* Groupe de codes BRUTS du hub (CD-TRANSACTION + LOCAL…) — libellé + pastilles
   monospace. Le Dr Nanni veut voir TOUS les codes du hub (audit 09/07), y compris
   le code technique canonique déjà traduit dans le titre. */
.rsw-code-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.rsw-code-group-label {
  font-size: var(--text-2xs, 10px); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-mute); margin-right: 2px;
}
.rsw-code-pill { font-family: ui-monospace, monospace; font-size: var(--text-2xs); }

/* Bloc « ESSENTIEL » du détail RSW (O13) : problèmes actifs + médicaments,
   remontés EN TÊTE dans un cadre coloré gras (tokens --info*, theme-aware
   comme .ds-banner--info de S12). L'accent gauche + le fond teinté signalent
   « ce qui compte cliniquement » avant les tags, pièces jointes et le tableau
   exhaustif. Aucune donnée en plus : c'est une mise en avant hiérarchique. */
.rsw-essential {
  border: 1px solid var(--info-bg);
  border-left: 4px solid var(--info);
  background: var(--info-bg);
  color: var(--info-text);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  margin: 0 0 12px;
}
.rsw-essential-title {
  font-weight: 800; font-size: var(--text-base, 13px); letter-spacing: .02em;
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.rsw-essential-group { margin-bottom: 8px; }
.rsw-essential-group:last-child { margin-bottom: 0; }
.rsw-essential-group-label {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; opacity: .8; margin-bottom: 3px;
}
.rsw-essential-item {
  font-size: var(--text-base); line-height: 1.5; padding: 2px 0;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.rsw-essential-item-label { font-weight: 600; }
.rsw-essential-item-meta { font-size: var(--text-sm, 12px); opacity: .8; }

/* État vide du panneau de détail (aucune transaction sélectionnée) — centré,
   discret (l'ancien markup .ds-empty-state ne matchait aucune règle CSS). */
.rsw-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 44px 22px; min-height: 180px;
  text-align: center; color: var(--text-mute); font-size: var(--text-base, 13px); line-height: 1.5;
}
.rsw-detail-empty-icon { font-size: var(--text-3xl, 28px); opacity: .45; line-height: 1; }

/* État d'erreur du panneau (échec hub / pas de lien thérapeutique) — carte
   lisible + « Réessayer », au lieu d'un <p> rouge nu. Dark-aware par tokens. */
.rsw-detail-error {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin: 4px 0; padding: 14px 16px;
  border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.35));
  border-radius: var(--radius, 10px);
  background: var(--danger-bg, rgba(239, 68, 68, 0.06));
  color: var(--text); font-size: var(--text-base); line-height: 1.5;
}
.rsw-detail-error-title { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rsw-detail-error-msg { color: var(--text-soft); font-size: var(--text-base, 13px); overflow-wrap: anywhere; }

/* Bloc de texte lisible (notes/rapports) — coupe les chaînes très longues
   (URL/jetons) au lieu de déborder le panneau. */
.rsw-text-block { overflow-wrap: anywhere; word-break: break-word; }

/* Apparition douce du détail à la sélection (fade + léger glissement).
   Respecte prefers-reduced-motion. */
@keyframes rswFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rsw-fade-in { animation: rswFadeIn .18s ease both; }
@media (prefers-reduced-motion: reduce) { .rsw-fade-in { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   V2.6 J2b — Bibliothèque de documents visuelle (tuiles) + demandes d'examens
   (raccourci motif) + file « résultats non vus » (✓ Vu, filtre, badge)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bibliothèque de documents : grille de tuiles ── */
.doclib-body { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.doclib-sect {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute); margin: 4px 2px 0;
}
.doclib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.doclib-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 12px 12px;
  background: var(--bg-card, var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer; text-align: left;
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.doclib-tile:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.doclib-tile:active { transform: translateY(0); }
.doclib-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.doclib-tile.stub { opacity: .6; }
.doclib-tile.stub:hover { border-color: var(--border-strong); box-shadow: none; transform: none; }
.doclib-tile-icon {
  font-size: var(--text-3xl, 28px); line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover);
  border-radius: 10px;
}
.doclib-tile-label { font-size: var(--text-base); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doclib-tile-desc { font-size: var(--text-xs); color: var(--text-mute); line-height: 1.35; }
.doclib-tile-count {
  position: absolute; top: 8px; right: 10px;
  font-size: var(--text-2xs); font-weight: 700; color: var(--text-mute);
  background: var(--bg-hover); border-radius: 999px; padding: 2px 7px;
}
.doclib-grid-freq .doclib-tile { border-color: rgba(245, 158, 11, 0.45); }
.doclib-grid-freq .doclib-tile:hover { border-color: var(--warning, #f59e0b); }

/* ── Demandes d'examens : ligne label + raccourci motif ── */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-label-row label { margin: 0; }
.motif-recall { flex: none; font-size: var(--text-xs); white-space: nowrap; }

/* ── Résultats plein écran : « ✓ Vu » + filtre non vus ── */
.rfp-seen {
  flex: none;
  font-size: var(--text-xs, 11px); font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.rfp-seen:hover { border-color: #22c55e; color: #22c55e; }
.rfp-seen.is-seen {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}
.rfp-card.is-seen .rfp-card-emitter,
.rfp-card.is-seen .rfp-card-prev { opacity: .68; }
.rfp-pill-unseen { margin-left: 4px; }

/* Badge compteur « non vus » sur le bouton 🗂 Résultats de la barre patient */
.res-unseen-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  margin-left: 6px; padding: 0 4px;
  font-size: var(--text-2xs); font-weight: 700; line-height: 1;
  color: #fff;
  background: #f97316;
  border-radius: 999px;
}

/* V2.6 L1 — bouton RSW armé (confirmation avant publication coffre-fort) */
.btn-warn { background: var(--warning-hover, #d97706) !important; border-color: var(--warning-hover, #d97706) !important; color: #fff !important; }

/* =====================================================================
   V3.0 — COUCHE DESIGN « épuré premium »
   Couche ADDITIVE en fin de cascade : elle raffine l'existant sans
   toucher aux vues ni à leur logique. Réversible en bloc.
   ⚠ INTERDIT d'y styler .agp-* (Agenda = couleurs et rendu intouchables).
   ===================================================================== */

/* ── Typographie : rendu net, chiffres alignés, titres resserrés ───────── */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .page-title, .brand-name { letter-spacing: -0.02em; }
.badge, .pill, .meta-chip, .kv, td, .rx-sug-price, .stat-value,
input[type='number'], input[type='date'], input[type='time'] {
  font-variant-numeric: tabular-nums;
}

/* ── Sidebar : hiérarchie douce, item actif en « pilule » nette ────────── */
.sidebar { border-right: 1px solid var(--border); }
.nav-section {
  font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-mute); opacity: 0.85;
}
.nav-item {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-item svg { opacity: 0.72; transition: opacity var(--transition); }
.nav-item:hover svg, .nav-item.active svg { opacity: 1; }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.brand-mark { border-radius: 9px; }
.search-trigger {
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.search-trigger:hover { background: var(--bg-hover); }
.search-trigger kbd {
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; font-size: var(--text-xs, 11px);
  background: var(--bg-elevated); color: var(--text-mute);
}

/* ── Topbar : titre affirmé, fond légèrement translucide ───────────────── */
.topbar {
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.page-title { font-weight: 700; }

/* ── Cartes : bord fin + ombre discrète, plus d'air ────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* ── Boutons : hauteur cohérente, press feedback, focus visible ────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-chip, .icon-btn, .consult-tool {
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform 80ms ease;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active,
.btn-chip:active, .consult-tool:active { transform: scale(0.97); }
.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-xs);
  border-radius: var(--radius-sm);
}
.btn-secondary { border-radius: var(--radius-sm); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.btn-ghost { border-radius: var(--radius-sm); }
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ── Champs de saisie : géométrie unifiée + focus doux ─────────────────── */
input:not([type='checkbox']):not([type='radio']), textarea, select {
  border-radius: var(--radius-sm);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ── Onglets de hub (Tableau de bord, Paramètres…) : segmented control ─── */
.assistant-tabs {
  gap: 4px; padding: 4px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: fit-content; max-width: 100%;
}
.assistant-tab {
  border: none; border-radius: var(--radius-sm);
  padding: 7px 14px; font-weight: 500; color: var(--text-soft);
  background: transparent;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.assistant-tab:hover { color: var(--text); }
.assistant-tab.active {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ── Modales : coins larges, ombre profonde, voile flouté ──────────────── */
.modal-backdrop, #modal-form {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal-content {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

/* ── Toasts ────────────────────────────────────────────────────────────── */
#toasts .toast, .toast {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* ── Chips & pastilles : géométrie pleine, lisibilité ──────────────────── */
.meta-chip, .pill, .btn-chip {
  border-radius: var(--radius-full);
  font-weight: 600;
}
.badge { font-weight: 700; }

/* ── Barres de défilement fines et discrètes ───────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-mute) 38%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-full);
}

/* ── Statut IA / Sync (pied de sidebar) : mini-panneau lisible ─────────── */
.sidebar-footer { gap: 6px; }
.ai-status {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 7px 10px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), background var(--transition);
}
.ai-status:hover { border-color: var(--border-strong); }
.ai-status .ai-label { font-weight: 500; }
.ai-status .ai-cloud-line {
  display: block; margin-top: 2px;
  font-size: var(--text-xs, 11px); color: var(--text-mute); font-weight: 500;
}

/* ── Mode sombre : la profondeur passe par les bords, pas les ombres ───── */
[data-theme='dark'] .card,
[data-theme='dark'] .modal-content { box-shadow: none; }
[data-theme='dark'] .assistant-tab.active { box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme='dark'] .topbar { background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* ── Respect des préférences d'animation ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .btn-ghost, .btn-chip, .icon-btn,
  .consult-tool, .nav-item, .assistant-tab { transition: none; }
}

/* =====================================================================
   V3.2 — Couche « waw » : accueil, dossier patient, consultation.
   Additive (cascade) : ne modifie AUCUNE règle existante, n'introduit
   aucun changement de comportement — uniquement l'allure. Tokens only →
   thème sombre automatiquement correct. Agenda (agp-*) : intouché.
   ===================================================================== */

/* ── Entrées de vue : micro-ascension douce (discrète, 240 ms) ─────────── */
@keyframes v32-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dash-hero, .patient-detail, .synthese-grid > .card, .doclib-body { animation: v32-rise 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* ── ACCUEIL — bandeau du jour signature ───────────────────────────────── */
.dash-hero {
  position: relative; overflow: hidden;
  border: none;
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  background:
    radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #0B1B4D) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--primary) 55%, transparent);
}
.dash-hero::after {
  /* trame lumineuse très légère (relief sans image externe) */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, transparent 38%);
}
.dash-hero-over { color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--text-xs); font-weight: 700; }
.dash-hero-day { color: #fff; font-size: var(--text-2xl, 22px); font-weight: 800; letter-spacing: -0.02em; }
.dash-hero-stats { gap: 10px; }
.dash-hero-stat {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-full);
  padding: 7px 14px; color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dash-hero-stat b { color: #fff; font-size: var(--text-lg, 16px); }

/* ── DOSSIER PATIENT — bande d'identité ───────────────────────────────── */
.patient-main-chips .meta-chip { box-shadow: var(--shadow-xs, 0 1px 2px rgba(15,23,42,0.05)); }
/* C1.1 (12/07) : carte « Actions » de la barre latérale gauche — chips cliniques
   (DMG/SUMEHR/allergies…) + les 4 actes du jour (Prescrire/ITT/Nettoyer/PDF), à la
   place de l'ancien bandeau supérieur (supprimé). */
.patient-side-actions { padding: var(--space-3) var(--space-4) var(--space-4); }
.patient-side-actions .patient-card-title { margin-bottom: 8px; }
.patient-side-actions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 0;
}
.patient-side-actions-grid .btn-secondary { justify-content: center; }
/* Prescrire = acte PRINCIPAL : bouton primaire pleine largeur en tête de grille. */
.patient-side-actions-grid .patient-act-primary { grid-column: 1 / -1; justify-content: center; }
/* Filet de séparation entre le STATUT clinique (allergie + chips) et les ACTES. */
.patient-side-divider { height: 1px; background: var(--border); margin: 11px 0; }
/* 22/07 — rangée d'actes DISCRÈTE (2 boutons seulement : avis confrère et
   analyse de rangement, les seuls sans autre point d'entrée). Remplace
   l'ancienne grille de 5 boutons qui masquait les services eHealth en tête. */
.patient-side-status-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.patient-side-status-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }

/* Résumé clinique latéral partagé dossier / consultation. Les traitements
   restent denses et modifiables sans transformer la colonne en second écran. */
.patient-clinical-card { padding: var(--space-3) var(--space-4) var(--space-4); }
.patient-clinical-card .patient-card-title { margin-bottom: 8px; }
.clinical-card-block + .clinical-card-block { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.clinical-card-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-soft); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.clinical-med-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.clinical-med-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px; align-items: center; gap: 6px; border-left: 3px solid var(--border-strong); background: var(--bg-input); border-radius: 5px; padding: 4px 5px 4px 8px; }
.clinical-med-row.status-chronic { border-left-color: var(--success); }
.clinical-med-row.status-acute { border-left-color: var(--warning); }
.clinical-med-main { appearance: none; border: 0; background: transparent; color: inherit; padding: 0; text-align: left; min-width: 0; cursor: pointer; display: flex; flex-direction: column; }
.clinical-med-name { font-size: var(--text-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinical-med-dose { font-size: var(--text-xs); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinical-med-status { width: 86px; min-width: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); color: var(--text-soft); padding: 3px 4px; font-size: var(--text-2xs); }
.clinical-med-add { position: relative; margin-top: 7px; }
.clinical-med-add-input { width: 100%; box-sizing: border-box; border: 1px dashed var(--border-strong); border-radius: 6px; background: transparent; color: var(--text); padding: 7px 9px; font-size: var(--text-xs); }
.clinical-med-add-input:focus { outline: none; border-style: solid; border-color: var(--primary); box-shadow: var(--focus-ring); }
.clinical-med-add-menu { position: absolute; z-index: var(--z-popover, 60); left: 0; right: 0; top: calc(100% + 3px); max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
.clinical-med-add-option { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 7px 9px; text-align: left; display: flex; flex-direction: column; cursor: pointer; }
.clinical-med-add-option:hover { background: var(--bg-hover); }
.clinical-med-add-option small { color: var(--text-mute); }
.clinical-history-group { margin-top: 8px; }
.clinical-history-label { color: var(--text-mute); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; }
.clinical-history-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.clinical-history-item { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); color: var(--text-soft); padding: 2px 7px; font-size: var(--text-xs); }
.clinical-history-more, .clinical-card-empty { color: var(--text-mute); font-size: var(--text-xs); margin-top: 6px; }
.clinical-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: min(620px, 80vw); }
.clinical-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clinical-field.full, .clinical-form-note.full { grid-column: 1 / -1; }
.clinical-field-label { color: var(--text-soft); font-size: var(--text-xs); font-weight: 650; }
.clinical-form-note { border-radius: 6px; background: var(--bg-input); color: var(--text-mute); padding: 8px 10px; font-size: var(--text-xs); }
@media (max-width: 640px) { .clinical-form-grid { grid-template-columns: 1fr; min-width: 0; } .clinical-field.full, .clinical-form-note.full { grid-column: auto; } }

/* Nav eSanté allégée (refonte 14/07) : liste plutôt que gros boutons pleins —
   fond transparent, aligné à gauche, remplissage au survol + chevron discret.
   Scopé à .patient-side-sub → n'affecte QUE la carte eSanté. */
.patient-side-sub .btn-secondary.btn-sm {
  background: transparent; border-color: transparent; color: var(--text-soft);
  font-weight: 500; padding: 8px 10px; position: relative;
}
.patient-side-sub .btn-secondary.btn-sm:hover {
  background: var(--bg-hover); border-color: transparent; color: var(--text);
}

/* Bandeau ALLERGIE — signal de sécurité n°1 : pleine largeur, en tête de l'état. */
.patient-allergy-banner {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  margin-bottom: 8px;
}
.patient-allergy-banner .pab-icon { font-size: var(--text-md); line-height: 1.2; color: var(--danger); flex: 0 0 auto; }
.patient-allergy-banner .pab-body { display: flex; flex-direction: column; min-width: 0; }
.patient-allergy-banner .pab-label {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-bold); color: var(--danger);
}
.patient-allergy-banner .pab-value { font-size: var(--text-sm); font-weight: 600; color: var(--text); line-height: 1.3; }
[data-theme='dark'] .patient-allergy-banner { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.36); }
[data-theme='dark'] .patient-allergy-banner .pab-icon,
[data-theme='dark'] .patient-allergy-banner .pab-label { color: var(--danger-text); }

/* Étiquettes d'organisation du patient — dans la carte identité, sous le nom. */
.patient-tags-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 2px; }
.patient-tag-pill, .patient-tag-add {
  font-size: var(--text-xs); font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-soft);
  cursor: pointer; transition: all var(--transition-fast);
}
.patient-tag-pill:hover { filter: brightness(0.96); }
.patient-tag-add { border-style: dashed; color: var(--text-mute); background: transparent; }
.patient-tag-add:hover { color: var(--primary); border-color: var(--primary); }
/* Photo du patient (carte eID) dans le panneau d'identité gauche. */
.patient-side-photo {
  width: 48px; height: 48px; flex: 0 0 auto; margin: 0;
  border-radius: 12px; object-fit: cover; font-size: var(--text-xl, 18px);
}
/* ✕ Fermer — intégré à la barre de recherche du dossier : zéro rangée vide
   supplémentaire, mais une cible rouge stable et immédiatement repérable. */
.patient-close-btn {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid color-mix(in srgb, var(--danger) 82%, #0000);
  background: var(--danger, #dc2626); color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--danger) 24%, transparent);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: filter .12s, transform .12s, box-shadow .12s;
}
.patient-close-btn:hover, .patient-close-btn:focus-visible {
  filter: brightness(.92); color: #fff; outline: 2px solid color-mix(in srgb, var(--danger) 28%, transparent);
  outline-offset: 2px; box-shadow: 0 3px 9px color-mix(in srgb, var(--danger) 32%, transparent);
}
.patient-close-btn:active { transform: scale(.96); }
/* Barre d'onglets du dossier : segment flottant, actif en pilule nette */
.tabs-grouped-scroll {
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-sm);
}
.tabs-grouped-scroll .tab { border-radius: 10px; transition: background var(--transition), color var(--transition), box-shadow var(--transition); }
.tabs-grouped-scroll .tab.active:not(.tab-key) { background: var(--bg-active); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tab.tab-key.active { box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--primary) 60%, transparent); }

/* ── CONSULTATION — l'acte médical, pas le formulaire ──────────────────── */
.soap-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.soap-section::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  opacity: 0.85;
}
.soap-grid textarea {
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.soap-grid textarea:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.consult-tools-banner {
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.consult-footer-bar {
  /* Fond SOLIDE (plus de verre flou/transparent) : le footer n'étant plus flottant,
     on ne veut pas voir le contenu par transparence derrière. */
  border-color: var(--border-strong);
}

/* Thème sombre : les lueurs remplacent les ombres portées */
[data-theme='dark'] .dash-hero { box-shadow: none; }
[data-theme='dark'] .tab.tab-key.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent); }

/* Animations coupées si l'utilisateur les refuse */
@media (prefers-reduced-motion: reduce) {
  .dash-hero, .patient-detail, .synthese-grid > .card, .doclib-body { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Éditeur de courrier WYSIWYG « façon Word » (rich-letter-editor.js)  — V4.7
   Modale DÉDIÉE (pas #modal-form) : z-index sous les sous-dialogues (email /
   eHealthBox = --z-modal) pour qu'ils s'affichent PAR-DESSUS l'éditeur.
   ═══════════════════════════════════════════════════════════════════════════ */
.rle-modal { position: fixed; inset: 0; z-index: calc(var(--z-modal, 100) - 5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rle-modal-backdrop { position: absolute; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(3px); }
.rle-modal-content { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1180px; height: 100%; max-height: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }

.rle-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-sidebar); }
.rle-title { font-size: 15px; font-weight: 600; color: var(--text); }
.rle-header-right { display: flex; align-items: center; gap: 10px; }
.rle-close { font-size: 16px; line-height: 1; }

/* Ruban */
.rle-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
.rle-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-soft); cursor: pointer; font-size: 14px; line-height: 1; transition: background var(--transition-fast), border-color var(--transition-fast); }
.rle-btn:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text); }
.rle-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text-on-soft); }
.rle-btn svg { display: block; }
.rle-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.rle-spacer { flex: 1 1 auto; }
.rle-select { height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-input); color: var(--text); font-size: 13px; padding: 0 6px; cursor: pointer; }
.rle-select.rle-font { min-width: 116px; }
.rle-select.rle-style { min-width: 96px; }
.rle-select.rle-size { width: 58px; }
.rle-select.rle-zoom { width: 72px; }
.rle-colorwrap { position: relative; gap: 2px; overflow: hidden; }
.rle-color { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; }

/* Barre d'assistance (dates/discipline de certificat) */
.rle-assist { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--primary-soft); font-size: 12.5px; color: var(--text); }
.rle-assist strong { font-size: 12.5px; }
.rle-assist label { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.rle-assist .input { height: 30px; }
.rle-assist-hint { font-size: 11px; color: var(--text-mute); }

/* Zone de défilement + page A4 */
.rle-canvas { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px; background: var(--bg-active); }
.rle-page { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 22mm 20mm; background: #ffffff; color: #1f2937; box-shadow: 0 6px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11.5pt; line-height: 1.6; transform-origin: top center; }
.rle-letterhead { margin-bottom: 6mm; }
.rle-signature { margin-top: 8mm; }
.rle-body { outline: none; min-height: 120mm; }
.rle-body:focus { outline: none; }
.rle-body p, .rle-body div { margin: 0 0 2px 0; }
.rle-body h1 { font-size: 17pt; color: #1E3A8A; margin: 6px 0 4px; }
.rle-body h2 { font-size: 14pt; color: #1E3A8A; margin: 6px 0 3px; }
.rle-body h3 { font-size: 12.5pt; color: #1E3A8A; margin: 5px 0 3px; }
.rle-body ul, .rle-body ol { margin: 2px 0 4px 1.6em; }
.rle-body li { margin: 1px 0; }
.rle-body table, .rle-body .rle-table { border-collapse: collapse; margin: 6px 0; max-width: 100%; }
.rle-body td, .rle-body th { border: 1px solid #999; padding: 4px 7px; vertical-align: top; min-width: 24px; }
.rle-body img { max-width: 100%; height: auto; }
.rle-body hr { border: none; border-top: 1px solid #bbb; margin: 8px 0; }
.rle-body a { color: #1d4ed8; }

/* Barre d'actions (Imprimer / PDF / DOCX / Envoyer / eHealthBox / RSW / …) */
.rle-footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-sidebar); }

/* Sélecteur de dimensions de tableau */
.rle-tablepick { position: fixed; z-index: calc(var(--z-modal, 100) + 2); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; }
.rle-tablepick-grid { display: grid; grid-template-columns: repeat(8, 18px); grid-auto-rows: 18px; gap: 2px; }
.rle-tablepick-cell { border: 1px solid var(--border-strong); border-radius: 2px; background: var(--bg-input); }
.rle-tablepick-cell.on { background: var(--primary-soft); border-color: var(--primary); }
.rle-tablepick-label { margin-top: 6px; font-size: 11.5px; color: var(--text-soft); text-align: center; }

@media (max-width: 900px) {
  .rle-modal { padding: 0; }
  .rle-modal-content { border-radius: 0; max-width: 100%; }
  .rle-canvas { padding: 12px; }
  .rle-page { width: 100%; min-height: auto; padding: 14mm 10mm; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Parcours clinique simplifié — 4.7
   La richesse métier reste disponible, mais en deux niveaux lisibles.
   ═══════════════════════════════════════════════════════════════════════════ */
.patient-primary-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  margin: 0 0 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-sidebar);
}
.patient-primary-tab {
  min-height: 42px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.patient-primary-icon { font-size: 17px; line-height: 1; }
.patient-primary-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-primary-tab:hover { background: var(--bg-hover); color: var(--text); }
.patient-primary-tab.active {
  background: var(--bg-elevated);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.patient-secondary-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 2px 2px 9px;
  margin-bottom: 7px;
  scrollbar-width: thin;
}
.patient-secondary-tab {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.patient-secondary-tab:hover { background: var(--bg-hover); color: var(--text); }
.patient-secondary-tab.active {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.patient-form-progressive { display: flex; flex-direction: column; gap: 10px; min-width: min(680px, 82vw); }
.patient-form-section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elevated);
}
.patient-form-section h3 { margin: 0 0 3px; font-size: 14px; }
.patient-form-section > p { margin: 0 0 12px; color: var(--text-mute); font-size: 11.5px; line-height: 1.45; }
.patient-form-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 13px; }
.patient-form-subgrid .form-field.full { grid-column: 1 / -1; }
.patient-form-optional { padding: 0; }
.patient-form-optional > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style-position: inside;
}
.patient-form-optional > summary span:first-child { flex: 1; }
.patient-form-optional > p, .patient-form-optional > .patient-form-subgrid { margin-left: 14px; margin-right: 14px; }
.patient-form-optional > .patient-form-subgrid { margin-bottom: 14px; }
/* RÉGRESSION 5.2.0 corrigée : overflow:hidden met le minimum implicite flex à 0 —
   dans la colonne gauche (flex column à hauteur contrainte), la carte s'écrasait
   à 2px sur les dossiers LONGS (« boutons Services eHealth disparus sur certains
   patients »). flex-shrink:0 interdit l'écrasement, le défilement du panneau
   reprend son rôle. */
.patient-esante-details { padding: 0 !important; overflow: hidden; flex-shrink: 0; }
.patient-esante-summary {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 700;
}
.patient-esante-details[open] .patient-esante-summary { border-bottom: 1px solid var(--border); color: var(--text); }
.patient-esante-body { padding: 8px 12px 12px; }

.consult-workflow-nav {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 9px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.consult-workflow-nav button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
}
.consult-workflow-nav button:hover, .consult-workflow-nav button.active { background: var(--primary-soft); color: var(--primary); }
.consult-context-toggle { margin-left: auto; white-space: nowrap; }
.soap-tools-details { position: relative; margin-left: auto; }
.soap-tools-details > summary { list-style: none; white-space: nowrap; }
.soap-tools-details > summary::-webkit-details-marker { display: none; }
.soap-tools-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: max-content;
  max-width: min(560px, 72vw);
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}
.soap-field .soap-field-acts { opacity: .28; transition: opacity var(--transition-fast); }
.soap-field:hover .soap-field-acts, .soap-field:focus-within .soap-field-acts { opacity: 1; }
.consult-state-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.consult-state-indicator.is-draft { background: var(--warning-light, #fef3c7); color: var(--amber-text, #92400e); }
.consult-state-indicator.is-final { background: var(--success-light, #dcfce7); color: var(--success, #15803d); }
.consult-delete-draft { color: var(--danger) !important; opacity: .78; }
.rx-patient-locked { background: var(--bg-subtle) !important; color: var(--text) !important; font-weight: 650; cursor: not-allowed; }
.rx-patient-dob { display: block; margin-top: 4px; font-size: 12px; color: var(--text-soft); }
.consult-rx-output { position: relative; }
.consult-rx-output > summary { list-style: none; cursor: pointer; }
.consult-rx-output > summary::-webkit-details-marker { display: none; }
.consult-rx-output-pop {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}
.consult-rx-output-pop button { justify-content: flex-start; width: 100%; }

.onboarding-optional { margin: 14px 0; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated); }
.onboarding-optional > summary { display: flex; align-items: center; gap: 8px; padding: 12px 13px; cursor: pointer; font-size: 13px; font-weight: 700; }
.onboarding-optional > summary > span:first-child { flex: 1; }
.onboarding-optional-body { padding: 2px 13px 13px; border-top: 1px solid var(--border); }
.interactions-type-filters { align-self: flex-start; }
.interactions-type-filters > summary {
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-mute);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
}
.interactions-type-filters[open] > summary { margin-bottom: 8px; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }

.ehealth-daily-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.ehealth-daily-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ehealth-progressive {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
}
.ehealth-progressive > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ehealth-progressive > summary::-webkit-details-marker { display: none; }
.ehealth-progressive > summary::after {
  content: '›';
  margin-left: auto;
  color: var(--text-mute);
  font-size: 20px;
  line-height: 1;
  transition: transform .15s ease;
}
.ehealth-progressive[open] > summary::after { transform: rotate(90deg); }
.ehealth-progressive-title { color: var(--text); font-size: 13px; font-weight: 700; }
.ehealth-progressive-description { color: var(--text-mute); font-size: 11.5px; }
.ehealth-progressive-content { padding: 0 12px 12px; }
.ehealth-progressive-content > .card:last-child { margin-bottom: 0 !important; }

/* C8.7 — composeur confrère (eHealthBox) : bloc 2 « Pourquoi ? ».
   Motif / message / email de copie occupent toute la largeur du bloc
   (sans cette règle, les champs restent à leur largeur navigateur par défaut). */
.confrere-step2 input[type='text'],
.confrere-step2 input[type='email'],
.confrere-step2 textarea {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .patient-primary-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-primary-tab { justify-content: flex-start; }
  .patient-form-progressive { min-width: 0; }
  .patient-form-subgrid { grid-template-columns: 1fr; }
  .patient-form-subgrid .form-field.full { grid-column: auto; }
  .consult-workflow-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soap-tools-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; max-width: none; }
  /* La barre de recherche du dossier ne tient pas sous ~400 px : le champ porte
     un min-width: 180px EN LIGNE (buildDocSearch, patients.js) que seul
     !important peut assouplir. Sans ça, les 5 éléments (champ + compteur + ↑ ↓ ✕)
     totalisent 360 px dans 339 px et le bouton de fermeture ✕ sort du cadre —
     coupé, donc inatteignable (mesuré à 375 px). Le champ garde flex: 1 et
     reprend toute la place disponible dès que l'écran s'élargit. */
  .patient-dossier-search-bar { flex-wrap: wrap; }
  .patient-dossier-search-bar > input[type='search'] { min-width: 120px !important; }
  .ehealth-daily-actions { align-items: stretch; flex-direction: column; }
  .ehealth-progressive > summary { align-items: flex-start; flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── UI dossier patient (polish v5.2) ──
   Polish de haut niveau du dossier patient (bandeau d'identité, colonne
   gauche, onglets, synthèse, personnes de contact). AUCUNE nouvelle
   fonctionnalité : uniquement hiérarchie, rythme, alignements, états
   hover/focus et cohérence des badges — tokens existants, clair ET sombre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Bandeau d'identité (carte « Identité & coordonnées ») ─────────────
   Mise en page sortie du JS : nom fort, méta discrète en chiffres tabulaires,
   photo eID cadrée par un filet (l'avatar dégradé garde son propre fond). */
.patient-card-identity {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 0 10px; margin: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.patient-ident-name {
  font-size: var(--text-lg); font-weight: var(--fw-bold, 700);
  letter-spacing: -0.01em; line-height: 1.2; color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}
.patient-ident-meta {
  margin-top: 2px; font-size: var(--text-sm); color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
/* Filet autour de la photo eID uniquement (img) — pas sur l'avatar initiales,
   dont le dégradé se suffit. border (pas box-shadow inset : invisible sur img). */
img.patient-side-photo { border: 1px solid var(--border); }

/* ── 2. Colonne gauche : rythme vertical régulier ─────────────────────────
   Même padding, même radius et même famille d'en-têtes (casse, taille,
   espacement) pour TOUTES les cartes : Identité, eSanté, État clinique,
   Résumé clinique, Repères, Avis en attente. */
.patient-side > .card,
.patient-side .patient-header-card { border-radius: var(--radius-lg); }
.patient-header-card { padding: var(--space-3) var(--space-4) var(--space-4); }
.patient-side .patient-card-title { margin-bottom: var(--space-2); }
/* En-tête de la carte eSanté aligné sur .patient-card-title (avant : 12.5px
   sentence-case, seul intertitre discordant de la colonne) + chevron d'état. */
.patient-esante-summary {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-bold, 700);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
  padding: 12px 16px; list-style: none; user-select: none;
}
.patient-esante-summary::-webkit-details-marker { display: none; }
.patient-esante-summary::after {
  content: '›'; margin-left: auto; color: var(--text-mute);
  font-size: 15px; line-height: 1; font-weight: 400;
  transition: transform var(--transition);
}
.patient-esante-details[open] .patient-esante-summary::after { transform: rotate(90deg); }
.patient-esante-summary:hover { color: var(--text); }
.patient-esante-body { padding: 8px 14px 14px; }
/* Sous-titres de la carte eSanté : même registre capitale que le reste. */
.patient-side-sub-h {
  font-size: var(--text-2xs); font-weight: var(--fw-bold, 700);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-mute);
}

/* ── 3. Chips d'état : une seule famille, cibles ≥ 28px ───────────────────
   Les chips cliquables (DMG, SUMEHR, alertes, NISS, étiquettes) atteignent la
   taille cliquable minimale sans changer leur densité visuelle. */
.patient-main-chips { gap: 6px; }
.patient-main-chips .meta-chip { min-height: 28px; }
.niss-chip { min-height: 28px; display: inline-flex; align-items: center; }
.niss-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.patient-tag-pill, .patient-tag-add {
  min-height: 26px; display: inline-flex; align-items: center;
}
.patient-tag-pill:focus-visible, .patient-tag-add:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ── 4. Onglets du dossier : actif plus net, focus visible ────────────────
   Transitions discrètes (background/couleur), anneau intérieur teinté primaire
   sur l'espace actif, alignement optique des sous-onglets. */
.patient-primary-tab, .patient-secondary-tab {
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.patient-primary-tab:focus-visible, .patient-secondary-tab:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}
.patient-primary-tab.active {
  box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
}
.patient-secondary-tabs { align-items: center; }
.patient-secondary-tab { min-height: 28px; }

/* ── 5. Personnes de contact (§4) : intégrées comme le reste ──────────────
   Intertitre de la même famille que « Plus d'infos » (chevron, casse), lignes
   alignées rôle → nom → lien → téléphone, filet pointillé discret. */
.patient-contacts-block { margin-top: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.patient-contacts-block > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  font-size: var(--text-xs); font-weight: var(--fw-bold, 700);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
}
.patient-contacts-block > summary::-webkit-details-marker { display: none; }
.patient-contacts-block > summary::before {
  content: '▸'; color: var(--text-mute);
  transition: transform var(--transition); display: inline-block;
}
.patient-contacts-block[open] > summary::before { transform: rotate(90deg); }
.patient-contacts-block > summary:hover { color: var(--text); }
.patient-contact-row {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm, 12px); padding: 3px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.patient-contact-row:last-of-type { border-bottom: none; }
.patient-contact-role {
  flex: 0 0 auto; font-size: var(--text-2xs); color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* ── 6. Synthèse : cartes homogènes, lignes cliquables affirmées ──────────
   Même radius que la colonne gauche, en-têtes alignés, survol des lignes
   cliquables par fond (plus seulement la couleur du texte). */
.synthese-card { border-radius: var(--radius-lg); }
.synthese-card .card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.synth-line { transition: background var(--transition); }
.synth-line.clickable:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.synth-line.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.synth-line-sub { font-variant-numeric: tabular-nums; }

/* ── Accessibilité mouvement : aucun déplacement animé si réduit ────────── */
@media (prefers-reduced-motion: reduce) {
  .patient-primary-tab, .patient-secondary-tab, .synth-line,
  .patient-esante-summary::after,
  .patient-contacts-block > summary::before { transition: none; }
}

/* =====================================================================
   ── UI consultation (polish v5.2) ──
   Passe de finition de l'ÉDITEUR DE CONSULTATION (demande Dr : « exception-
   nellement bon et beau »). Uniquement de la hiérarchie, du rythme et des
   états — AUCUN changement de fonction ni de structure DOM. Tokens du design
   system partout ; les nuances SOAP manquantes sont ajoutées ci-dessous.
   ===================================================================== */

/* Nuances des pastilles S/O/A/P/T — dérivées des couleurs sémantiques
   existantes (primary/success/warning/accent), lisibles dans les 2 thèmes. */
:root {
  --soap-s-bg: var(--primary-soft);
  --soap-s-fg: var(--primary-text-on-soft);
  --soap-o-bg: color-mix(in srgb, var(--success) 16%, transparent);
  --soap-o-fg: #047857;
  --soap-a-bg: color-mix(in srgb, var(--warning) 18%, transparent);
  --soap-a-fg: #92400E;
  --soap-p-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --soap-p-fg: #0F766E;
  --soap-t-bg: var(--bg-active);
  --soap-t-fg: var(--text-soft);
}
[data-theme='dark'] {
  --soap-o-fg: #6EE7B7;
  --soap-a-fg: #FBBF24;
  --soap-p-fg: #5EEAD4;
}

/* ── 1. Barre de commande : une ligne respirée, groupes séparés ─────────── */
.consult-command-bar { gap: 8px 10px; }
/* Le groupe type d'acte + lieu se détache du motif par un fin filet vertical
   (au lieu de flotter au milieu de la ligne). */
.consult-act-header .consult-command-bar .consult-type-seg {
  position: relative;
  margin-left: 12px;
}
.consult-act-header .consult-command-bar .consult-type-seg::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}
/* Select Lieu : même famille visuelle que le segmented control voisin
   (remplace les styles inline « posés là »). */
.consult-location-sel {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-input);
  color: var(--text-soft);
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.consult-location-sel:hover { border-color: var(--border-strong); color: var(--text); }
.consult-location-sel:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }

/* ── 2. Note SOAP : en-têtes unifiés, textareas confortables ────────────── */
.soap-grid { gap: 12px 12px; }
.soap-field { gap: 6px; }
.soap-field .field-h { min-height: 30px; gap: 8px; }
.soap-field .field-h .letter {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.soap-field .field-h .letter-subjective { background: var(--soap-s-bg); color: var(--soap-s-fg); }
.soap-field .field-h .letter-objective  { background: var(--soap-o-bg); color: var(--soap-o-fg); }
.soap-field .field-h .letter-assessment { background: var(--soap-a-bg); color: var(--soap-a-fg); }
.soap-field .field-h .letter-plan       { background: var(--soap-p-bg); color: var(--soap-p-fg); }
.soap-field .field-h .letter-treatment  { background: var(--soap-t-bg); color: var(--soap-t-fg); }
.soap-field textarea {
  padding: 10px 12px;
  line-height: 1.55;
  border-radius: var(--radius);
}
.soap-field textarea::placeholder { color: var(--text-mute); }
/* La paire 🎙/✍️ (+ 〜 Constantes) : rangée discrète à droite de l'en-tête —
   présente mais en retrait tant qu'on ne la vise pas. Cible ≥ 28px conservée. */
.soap-field-acts .btn-ghost.btn-sm {
  min-height: 28px;
  padding: 2px 8px;
  opacity: 0.6;
  transition: opacity var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
}
.soap-field-acts .btn-ghost.btn-sm:hover,
.soap-field-acts .btn-ghost.btn-sm:focus-visible,
.soap-field-acts .btn-ghost.btn-sm:disabled,
.soap-field-acts .btn-ghost.btn-sm.recording { opacity: 1; }
.soap-field-acts .btn-ghost.btn-sm.recording { color: var(--danger); }

/* ── 3. Colonne latérale : panneau vitaux raffiné, titres unifiés ───────── */
/* Même grammaire de carte que « 💊 Traitement chronique » juste en dessous
   (bord gauche teinté, en-tête identique) — les deux panneaux respirent pareil. */
.consult-vitals-details {
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: 10px;
  background: var(--bg-elevated);
  overflow: hidden;
  margin: 0 0 10px;
}
.consult-side > .consult-vitals-details {
  flex-shrink: 0;
  margin: 10px 10px 0;
}
.consult-vitals-summary {
  padding: 9px 12px;
  font-size: var(--text-base, 13px);
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-soft, var(--bg-card));
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}
.consult-vitals-summary::-webkit-details-marker { display: none; }
.consult-vitals-summary::after {
  content: '▾';
  float: right;
  color: var(--text-mute);
  transition: transform .15s;
}
.consult-vitals-details:not([open]) .consult-vitals-summary {
  border-bottom-color: transparent;
}
.consult-vitals-details:not([open]) .consult-vitals-summary::after { transform: rotate(-90deg); }
.consult-vitals-banner {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.consult-vitals-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  min-height: 36px;
}
/* Zébrage discret — remplace le filet sous chaque ligne. */
.consult-vitals-row:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, transparent); }
.consult-vitals-lbl {
  font-size: var(--text-sm, 12px);
  color: var(--text-soft);
  font-weight: 600;
}
.consult-vitals-banner input[type='number'] { font-variant-numeric: tabular-nums; }
.consult-vitals-banner input[type='number']:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.consult-vitals-imc {
  font-size: var(--text-base, 13px);
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 7px; /* aligné sur les valeurs saisies (bord interne des champs) */
}

/* Sur un grand écran, la colonne droite devient réellement utile : les
   constantes passent sur deux colonnes et libèrent la médication sous elles. */
@container (min-width: 410px) {
  .consult-vitals-banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .consult-vitals-footer { grid-column: 1 / -1; }
  .consult-vitals-row { padding-inline: 10px; }
}

/* Les noms et posologies restent lisibles dans le rail clinique : aucune
   ellipse silencieuse sur une information médicamenteuse. */
.consult-side .cms-body { grid-template-columns: minmax(0, 1fr); }
.consult-side .cms-name,
.consult-side .cms-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.consult-side .cms-row { align-items: start; padding-block: 6px; }

/* ── 4. Médicaments prescrits : cartes lisibles, actions alignées ───────── */
.rx-card { padding: 10px 12px 11px; }
.rx-card-title strong { font-weight: 650; font-size: var(--text-md, 14px); letter-spacing: -0.01em; }
/* Badges (chronique · CNK · RID…) : UNE rangée dédiée sous le nom. */
.rx-card-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 1px;
}
/* Actions empilées à droite, alignées verticalement et homogènes. */
.rx-card-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 96px;
}
.rx-card-actions .btn-ghost,
.rx-card-actions .btn-primary {
  justify-content: center;
  min-height: 28px;
  padding: 3px 10px;
  font-size: var(--text-sm, 12px);
  white-space: nowrap;
}

/* ── 5. Bandeaux conditionnels : une seule grammaire visuelle ───────────── */
/* Allergies (ds-banner--warning), problèmes actifs, « depuis la dernière
   fois » et red flags partagent désormais radius 10px + padding 8/12 (posés
   côté JS pour les bandeaux inline) — ici on aligne le ds-banner allergies. */
.consult-allergies-banner.ds-banner { border-radius: 10px; }

/* ── 6. Micro-détails : focus visible, survols, mouvement réduit ────────── */
.consult-tool:focus-visible,
.btn-type-acte:focus-visible,
.consult-medscheme-summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 1px;
}
.consult-tool:active { transform: translateY(0.5px); }
@media (prefers-reduced-motion: reduce) {
  .consult-live-indicator { animation: none; }
  .consult-tool:active { transform: none; }
}


/* ── Provenance d'une valeur de laboratoire (27/07/2026) ─────────────────────
   Le badge « Source » figurait sur chaque ligne : sur un bilan de trente
   analytes, trente étiquettes grises pour une information qu'on ouvre une fois
   par mois. Il ne se montre plus qu'au survol de sa ligne — ou au focus clavier,
   pour rester atteignable sans souris.

   « À vérifier » (valeur physiologiquement impossible) est un AVERTISSEMENT :
   il reste visible en permanence. Ne pas le ranger avec les autres. */
.lab-prov { opacity: 0; transition: opacity .12s ease; }
tr:hover .lab-prov,
.lab-prov:focus-visible { opacity: 1; }
.lab-prov--alerte { opacity: 1; }
/* Sans survol possible (tactile), tout reste visible : cacher une information
   qu'on ne peut pas révéler serait la supprimer. */
@media (hover: none) { .lab-prov { opacity: 1; } }


/* ══════════════════════════════════════════════════════════════════════════
   COMPTES RENDUS NARRATIFS — même niveau de soin que le bilan de biologie
   (27/07/2026)

   Dr Nanni : « y a bcp trop de blanc, pas assez de couleur, pas de conclusion
   bien visible encadrée » — puis « je veux le même genre d'amélioration de
   design pour les résultats compte rendu en tout genre ».

   Le tableau de biologie était soigné ; les courriers, rapports de spécialiste,
   imageries et sorties d'hospitalisation recevaient le texte source brut. Ils
   partagent maintenant le même vocabulaire visuel : un accent de couleur PAR
   TYPE, une conclusion qu'on ne peut pas manquer, et un rythme de lecture.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le texte n'est plus du `pre-wrap` : ce sont de vrais paragraphes, donc
   l'espacement est une décision, plus un accident du fichier d'origine. */
.rpt-prose-card { white-space: normal; }
.rpt-p { margin: 0 0 1.05em; }
.rpt-p:last-child { margin-bottom: 0; }
/* Blocs de lignes courtes (adresse, coordonnées, liste) : les sauts sont
   volontaires, l'interligne est resserré pour qu'ils forment un ensemble. */
.rpt-p--lignes { line-height: 1.55; }

/* Accent par type de document. Le liseré gauche existait ; la teinte de fond et
   le titre suivent désormais, pour qu'on reconnaisse un type au premier regard
   sans lire l'étiquette. */
.rpt-prose-card {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 4%, var(--bg-elevated)) 0,
      var(--bg-elevated) 120px);
}
.rpt-prose-card--imagerie { background: linear-gradient(180deg, color-mix(in srgb, #0284c7 5%, var(--bg-elevated)) 0, var(--bg-elevated) 120px); }
.rpt-prose-card--rapport  { background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 5%, var(--bg-elevated)) 0, var(--bg-elevated) 120px); }
.rpt-prose-card--sortie   { border-left-color: #b45309; background: linear-gradient(180deg, color-mix(in srgb, #b45309 5%, var(--bg-elevated)) 0, var(--bg-elevated) 120px); }
.rpt-prose-card--courrier { border-left-color: #0f766e; background: linear-gradient(180deg, color-mix(in srgb, #0f766e 5%, var(--bg-elevated)) 0, var(--bg-elevated) 120px); }

/* LA CONCLUSION. C'est la ligne que le médecin cherche en premier : elle doit
   s'imposer avant le corps du texte, pas se fondre dedans. Plus large, plus
   contrastée, et titrée. Le corps garde son défilement propre : une conclusion
   fleuve ne doit pas repousser le compte rendu hors de l'écran. */
.res-conclusion {
  width: min(calc(100% - 44px), 900px);
  margin: 18px auto 0;
  padding: 15px 18px 16px;
  border-width: 1px 1px 1px 5px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--primary) 9%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  border-left-color: var(--primary);
}
.res-conclusion-h {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-sm); letter-spacing: .05em; margin-bottom: 7px;
}
.res-conclusion-body { font-size: 14.5px; line-height: 1.68; }

/* Impression : ni dégradé ni ombre — de l'encre, pas de décor. */
@media print {
  .rpt-prose-card, .res-conclusion { background: none; box-shadow: none; }
}


/* La carte de prose imbriquée dans une section Medidoc : elle est DÉJÀ dans un
   cadre (la section porte son titre et sa bordure). On lui retire donc son propre
   cadre et sa largeur maximale, pour éviter la carte-dans-la-carte. */
.rpt-prose-card--medidoc {
  width: auto; margin: 0; border: 0; border-radius: 0;
  box-shadow: none; background: none;
  padding: 18px 22px 22px;
}


/* ── ANTIBIOGRAMME (27/07/2026) ──────────────────────────────────────────────
   La table que le médecin lit pour choisir un traitement. Elle s'affichait en
   une phrase continue, séparateurs `\F|` compris. Le code couleur porte
   l'information principale : ce qui marche, ce qui ne marche pas. */
.abg { margin: 4px 0 2px; padding: 14px 16px 12px; }
.abg-h {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px;
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-soft);
}
.abg-germe { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--text-mute); font-weight: 600; }
.abg-grille { display: grid; grid-template-columns: 1fr auto auto; gap: 1px; background: var(--border-faint); border: 1px solid var(--border-faint); border-radius: 8px; overflow: hidden; }
.abg-ligne { display: contents; }
.abg-ligne > span { padding: 6px 11px; background: var(--bg-elevated); font-size: 13px; display: flex; align-items: center; }
.abg-atb { font-weight: 600; }
.abg-cmi { color: var(--text-mute); font-variant-numeric: tabular-nums; justify-content: flex-end; white-space: nowrap; }
.abg-cat { justify-content: center; font-weight: 800; min-width: 30px; }
/* Sensible / intermédiaire / résistant. Le fond teinte la LIGNE entière : on
   balaie la colonne de droite, et la ligne entière confirme. */
.abg-ligne--S > span { background: color-mix(in srgb, #15803d 8%, var(--bg-elevated)); }
.abg-ligne--I > span { background: color-mix(in srgb, #b45309 10%, var(--bg-elevated)); }
.abg-ligne--R > span { background: color-mix(in srgb, #b91c1c 9%, var(--bg-elevated)); }
.abg-cat--S { color: #15803d; }
.abg-cat--I { color: #b45309; }
.abg-cat--R { color: #b91c1c; }
.abg-legende { margin-top: 8px; font-size: var(--text-xs); color: var(--text-mute); }
@media print { .abg-ligne > span { background: none; } }


/* ══════════════════════════════════════════════════════════════════════════
   eHEALTHBOX — LECTURE CLINIQUE GRAND FORMAT (27/07/2026)

   Sur un écran 1280 px, l'ancien minimum de 430 px réservé à la liste ne
   laissait qu'environ 510 px au résultat. La colonne Antériorité était rognée,
   et la barre d'actions se repliait sur plusieurs lignes. Le document est la
   tâche principale : il reçoit maintenant les deux tiers de l'espace et peut
   être agrandi à toute la largeur sans quitter la sélection courante.
   ══════════════════════════════════════════════════════════════════════════ */
.rcv-2col.rcv-workspace {
  grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
}
.rcv-list-pane,
.rcv-detail-pane,
.rcv-detail-body { min-width: 0; }
.rcv-detail-head { padding: 9px 14px 8px; }
.rcv-detail-toggle {
  margin-left: auto;
  min-height: 30px;
  padding: 3px 10px;
  white-space: nowrap;
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--bg-elevated));
}
.rcv-detail-actions {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.rcv-detail-actions > * { flex: 0 0 auto; }
.rcv-workspace.rcv-detail-expanded {
  grid-template-columns: minmax(0, 1fr);
}
.rcv-workspace.rcv-detail-expanded > .rcv-list-pane { display: none; }

/* Les cinq colonnes d'un bilan ne doivent jamais être écrasées ni coupées.
   Le défilement horizontal reste confiné au tableau ; en mode « Agrandir »,
   les 720 px tiennent naturellement sur la plupart des écrans. */
.lab-results-card { max-width: 100%; }
.lab-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.lab-table-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.lab-results-table {
  display: table;
  min-width: 720px;
  overflow: visible;
}
.lab-results-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.lab-results-table th:first-child,
.lab-results-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
.lab-results-table thead th:first-child { z-index: 3; background: var(--bg-2); }

@media (min-width: 769px) and (max-width: 1100px) {
  .rcv-2col.rcv-workspace { grid-template-columns: minmax(280px, 32%) minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .rcv-2col.rcv-workspace { grid-template-columns: 1fr !important; }
  .rcv-detail-toggle { display: none; }
  .rcv-workspace.rcv-detail-expanded > .rcv-list-pane { display: block; }
  .rcv-detail-actions { flex-wrap: wrap; overflow-x: visible; }
  .lab-results-table { min-width: 680px; }
}

@media print {
  .rcv-list-pane, .rcv-detail-actions, .rcv-detail-toggle { display: none !important; }
  .rcv-2col.rcv-workspace { display: block !important; height: auto !important; }
  .lab-table-scroll { overflow: visible; }
  .lab-results-table { min-width: 0; }
}

/* ── Travaux de fond ────────────────────────────────────────────────────────
   Ajouté le 31/07/2026 : la vue avait été écrite avec ces classes mais AUCUNE
   règle n'existait — l'écran s'affichait en texte brut, sans marges ni cartes
   (retour Dr Nanni : « très moche »). Rien d'inventé côté fond : mêmes variables
   de thème que le reste de l'application, clair et sombre compris. */
.tf-resume {
  font-size: 14px; line-height: 1.5; color: var(--text);
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
}
.tf-resume--panne {
  background: var(--warn-soft, #fff7ed); border-color: var(--warn-border, #fdba74);
}
.tf-liste { display: flex; flex-direction: column; gap: 10px; }
.tf-ligne {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
}
/* La pastille dit l'état d'un coup d'œil ; l'emoji reste le contenu, on ne
   fait que lui donner une taille et un alignement stables. */
.tf-pastille { font-size: 15px; line-height: 1.35; flex-shrink: 0; }
.tf-corps { min-width: 0; flex: 1; }
.tf-titre { font-weight: 650; font-size: 14px; color: var(--text); }
.tf-explication { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }
/* L'état chiffré (« à jour — 14 traité(s) ces 24 h ») : discret, jamais alarmant. */
.tf-corps > div:last-child { font-size: 12px; color: var(--text-mute); margin-top: 5px; }
.tf-note {
  font-size: 12.5px; color: var(--text-mute); margin-top: 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--border);
}
.tf-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.tf-pied {
  font-size: 12.5px; color: var(--text-mute); margin-top: 16px;
  padding-top: 12px; border-top: 1px dashed var(--border);
}
@media (max-width: 640px) {
  .tf-ligne { padding: 11px 12px; }
  .tf-actions { flex-direction: column; align-items: stretch; }
}