:root {
  /* Charte officielle LafyaLink du 3 septembre (décision du 2026-10-12, docs/specs/00_LISEZ-MOI.md) : palette
     claire, une seule pour tous les écrans (instance, SH, page /lafya), jamais de thème par établissement ni par
     pays, pas de mode sombre. docs/reference ne sert qu'à la structure. Décision D9 : --secondaire, --accent,
     --succes et --attention ne servent jamais de texte courant (contraste insuffisant sur blanc) : fond,
     bordure ou grand texte seulement. */
  color-scheme: light;
  --principal: #0e5e6f;
  --secondaire: #159895;
  --accent: #57c5b6;
  --fond: #f5f8fa;
  --barre: #0e5e6f;
  --carte: #ffffff;
  --texte: #1f2937;
  --texte-2: #64748b;
  --texte-3: #64748b;
  --sur-principal: #ffffff;
  --bordure: #e2e8f0;
  --bordure-forte: color-mix(in srgb, var(--principal) 35%, white);
  --succes: #16a34a;
  --attention: #f59e0b;
  --critique: #dc2626;
  --info: #2563eb;
  --inactif: #94a3b8;
  /* Fonds de pastille dérivés des couleurs de statut (texte --texte : contraste > 12). */
  --succes-fond: color-mix(in srgb, var(--succes) 15%, white);
  --attention-fond: color-mix(in srgb, var(--attention) 18%, white);
  --critique-fond: color-mix(in srgb, var(--critique) 12%, white);
  --info-fond: color-mix(in srgb, var(--info) 12%, white);
  --accent-fond: color-mix(in srgb, var(--accent) 15%, white);
  --rayon: 10px;
  --hauteur-bandeau: 32px;
  --police-titre: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding-top: var(--hauteur-bandeau);
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bandeau-demo {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hauteur-bandeau);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--attention);
  color: var(--texte);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 13px;
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--principal);
  color: var(--carte);
}
.marque { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.marque svg { flex: none; }
/* Grand texte gras : 3,5 sur --principal, au-dessus du seuil de 3 pour les grands textes. */
.marque span { color: var(--accent); }
.session { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.flux { color: var(--inactif); font-size: 12px; }
.flux.actif { color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 22px; margin: 0 0 16px; color: var(--principal); }
h2 { font-size: 17px; margin: 0 0 8px; color: var(--principal); }
a { color: var(--principal); }

.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px;
}
.etroite { max-width: 420px; margin: 40px auto; }

form { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--texte-2); }
input {
  font: inherit;
  padding: 9px 11px;
  /* Contour de champ : 4,8 sur blanc (seuil de 3 pour les composants). */
  border: 1px solid var(--texte-2);
  border-radius: 6px;
  color: var(--texte);
  background: var(--carte);
}
input:focus-visible, button:focus-visible, a:focus-visible, .ligne-etab:focus-visible {
  outline: 3px solid var(--secondaire);
  outline-offset: 1px;
}
button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 14px;
  border: 1px solid var(--principal);
  border-radius: 6px;
  background: var(--principal);
  color: var(--carte);
}
button:hover { background: var(--texte); border-color: var(--texte); }
button:disabled { opacity: 0.55; cursor: wait; }
.bouton-discret { background: transparent; border-color: var(--accent); padding: 5px 10px; font-weight: 500; }
.bouton-secondaire { background: var(--carte); color: var(--principal); }
.bouton-secondaire:hover { background: var(--accent-fond); color: var(--principal); }
.petit { padding: 3px 8px; font-size: 12px; font-weight: 500; }

.erreur { color: var(--critique); min-height: 1.2em; margin: 0; font-size: 14px; }
.aide { color: var(--texte-2); font-size: 14px; }
.secret { display: block; word-break: break-all; padding: 8px; background: var(--fond); border-radius: 6px; margin-top: 6px; }
#qr { display: block; margin: 8px auto 12px; border: 1px solid var(--bordure); border-radius: 6px; }
.codes { columns: 2; font-family: ui-monospace, monospace; font-size: 15px; padding-left: 24px; }

.titre-vue { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.titre-vue h1 { margin: 0; }
#recherche { min-width: 280px; }

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.indicateur { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 14px; }
.indicateur .valeur { font-size: 24px; font-weight: 700; color: var(--principal); }
.indicateur .libelle { font-size: 13px; color: var(--texte-2); }

table { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
th { background: var(--principal); color: var(--carte); font-weight: 600; font-size: 13px; }
.ligne-etab { cursor: pointer; }
.ligne-etab:hover { background: var(--accent-fond); }
.ligne-etab.le-mien td:first-child { box-shadow: inset 4px 0 0 var(--secondaire); }
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.sous-titre { display: block; font-size: 13px; color: var(--texte-2); }

.barre { position: relative; height: 8px; width: 120px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.barre > span { position: absolute; inset: 0 auto 0 0; background: var(--succes); }
.barre.alerte > span { background: var(--attention); }
.barre.critique > span { background: var(--critique); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
/* Statuts : fond clair et bordure de la couleur du statut, texte --texte (D9). */
.badge.normal { background: var(--succes-fond); color: var(--texte); border-color: var(--succes); }
.badge.alerte { background: var(--attention-fond); color: var(--texte); border-color: var(--attention); }
.badge.critique { background: var(--critique-fond); color: var(--texte); border-color: var(--critique); }
.badge.sans_lit { background: var(--fond); color: var(--texte); border-color: var(--inactif); }
.etiquette { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--accent-fond); color: var(--principal); margin-left: 6px; vertical-align: middle; }

.unites { display: grid; gap: 16px; }
.unite-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.compteurs { color: var(--texte-2); font-size: 14px; }
.chambres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.chambre { border: 1px solid var(--bordure); border-radius: 6px; padding: 8px; }
.chambre-titre { font-size: 12px; color: var(--texte-2); margin-bottom: 6px; }
.lit { border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; border: 1px solid var(--bordure); }
.lit:last-child { margin-bottom: 0; }
.lit-ligne { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.lit-code { font-weight: 700; }
.lit-ref { font-family: ui-monospace, monospace; font-size: 12px; }
.lit-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lit.libre { background: var(--succes-fond); border-color: var(--succes); }
.lit.occupe { background: var(--principal); color: var(--carte); border-color: var(--principal); }
.lit.nettoyage { background: var(--attention-fond); border-color: var(--attention); }
/* Texte --texte : --texte-2 tomberait sous 4,5 sur les rayures. */
.lit.hors_service { background: repeating-linear-gradient(45deg, var(--fond), var(--fond) 6px, var(--bordure) 6px, var(--bordure) 12px); color: var(--texte); border-color: var(--inactif); }

.suggestions { margin-top: 10px; padding: 10px 12px; background: var(--accent-fond); border-radius: 6px; font-size: 14px; }
.suggestions ul { margin: 6px 0 0; padding-left: 18px; }
.avertissement { font-weight: 600; color: var(--principal); }

.notifications { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: 360px; }
.toast { background: var(--principal); color: var(--carte); padding: 12px 14px; border-radius: var(--rayon); box-shadow: 0 6px 20px rgba(14, 94, 111, 0.25); border-left: 5px solid var(--accent); }
.toast.critique { border-left-color: var(--critique); }
.toast.alerte { border-left-color: var(--attention); }

@media (max-width: 720px) {
  .entete { flex-wrap: wrap; padding: 10px 16px; }
  th:nth-child(3), td:nth-child(3) { display: none; }
  .barre { width: 70px; }
  #recherche { min-width: 0; width: 100%; }
}

.outils { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.choix-langue select {
  font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--accent); background: transparent; color: var(--carte);
}
.choix-langue option { color: var(--texte); }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.accueil { text-align: center; }
.logo-accueil svg { width: 96px; height: 96px; }
.titre-accueil { font-size: 30px; }
.liste-pays { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.liste-pays button { width: 100%; text-align: left; display: flex; justify-content: space-between; }
.liste-pays .code-pays { font-family: ui-monospace, monospace; font-weight: 500; }
.pays-courant { margin: 0 0 4px; font-weight: 600; color: var(--principal); }
.liens { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.transition-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; text-align: left; margin: 16px auto; max-width: 320px; }
.transition-details dt { color: var(--texte-2); }
.transition-details dd { margin: 0; font-weight: 600; }

.bandeau-licence {
  padding: 10px 16px; text-align: center; font-weight: 600; font-size: 14px;
  background: var(--attention-fond); border-bottom: 2px solid var(--attention); color: var(--texte);
}

/* --- Phase 5 : onglets, transferts (liste et kanban, style Odoo), indicateurs, historique --------- */
.onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--bordure); margin-bottom: 16px; flex-wrap: wrap; }
.onglet { background: transparent; color: var(--principal); border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -2px; }
.onglet:hover { background: var(--accent-fond); color: var(--principal); }
.onglet[aria-current="page"] { border-bottom-color: var(--secondaire); }
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
select { font: inherit; padding: 8px 10px; border: 1px solid var(--texte-2); border-radius: 6px; background: var(--carte); color: var(--texte); }
.bascule { display: inline-flex; }
.bascule button { border-radius: 0; }
.bascule button:first-child { border-radius: 6px 0 0 6px; }
.bascule button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.bascule button.actif { background: var(--principal); color: var(--carte); }
.defilement { overflow-x: auto; }
.formulaire-transfert { margin-bottom: 16px; max-width: 640px; }
.carte-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.negatif { border-color: var(--critique); }

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-colonne { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 8px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; }
.kanban-colonne.cible { outline: 2px dashed var(--secondaire); outline-offset: -2px; }
.kanban-colonne.survol { background: var(--accent-fond); }
.kanban-titre { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--principal); padding: 2px 4px 6px; border-bottom: 3px solid var(--inactif); }
.colonne-demandee .kanban-titre, .colonne-libre .kanban-titre { border-bottom-color: var(--info); }
.colonne-acceptee .kanban-titre { border-bottom-color: var(--secondaire); }
.colonne-en_route .kanban-titre, .colonne-nettoyage .kanban-titre { border-bottom-color: var(--attention); }
.colonne-arrivee .kanban-titre, .colonne-occupe .kanban-titre { border-bottom-color: var(--succes); }
.colonne-refusee .kanban-titre { border-bottom-color: var(--critique); }
.kanban-compte { background: var(--carte); border: 1px solid var(--bordure); border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--texte); }
.kanban-cartes { display: grid; gap: 8px; }
.kanban-vide { color: var(--texte-2); font-size: 13px; margin: 4px; }
.kanban-carte.deplacable { cursor: grab; }
.kanban-carte .lit { margin: 0; }
.transfert { background: var(--carte); border: 1px solid var(--bordure); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.transfert:hover, .transfert:focus-visible { border-color: var(--secondaire); outline: none; }
.transfert-ligne { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.transfert-trajet { font-weight: 600; margin: 4px 0 2px; }
.sous-titre-lit { font-size: 12px; }
.badge.urgence-vital { background: var(--critique-fond); color: var(--texte); border-color: var(--critique); }
.badge.urgence-urgent { background: var(--attention-fond); color: var(--texte); border-color: var(--attention); }
.badge.urgence-standard { background: var(--fond); color: var(--texte); border-color: var(--inactif); }
.badge.statut-demandee, .badge.statut-acceptee, .badge.statut-en_route { background: var(--accent-fond); color: var(--texte); border-color: var(--secondaire); }
.badge.statut-arrivee { background: var(--succes-fond); color: var(--texte); border-color: var(--succes); }
.badge.statut-refusee, .badge.statut-annulee { background: var(--fond); color: var(--texte); border-color: var(--inactif); }
.detail-transfert { margin-bottom: 16px; }
.fermer { color: var(--principal); font-size: 20px; line-height: 1; }
.chronologie { margin: 8px 0; padding-left: 22px; }
.chronologie li { margin-bottom: 6px; }
.boite { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px; max-width: 360px; }
.boite::backdrop { background: rgba(31, 41, 55, 0.4); }

.serie { position: relative; display: flex; align-items: flex-end; gap: 1px; height: 160px; padding: 4px 0; border-bottom: 1px solid var(--bordure); }
.serie.compacte { height: 48px; }
.serie .point { flex: 1 1 0; min-width: 1px; background: var(--succes); border-radius: 1px 1px 0 0; }
.serie .point.alerte { background: var(--attention); }
.serie .point.critique { background: var(--critique); }
.serie .seuil { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--inactif); pointer-events: none; }
.serie .seuil.critique { border-top-color: var(--critique); }
.legende { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--texte-2); margin-top: 6px; }
.historique-unites { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#vue-etablissement .carte + .titre-vue, #vue-etablissement p.aide + .carte { margin-top: 16px; }
#indicateurs h2 { margin-top: 20px; }
.carte-pipeline { background: var(--carte); border: 1px solid var(--bordure); border-radius: 6px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.carte-pipeline:hover, .carte-pipeline:focus-visible { border-color: var(--secondaire); outline: none; }
.jalons-carte { display: flex; gap: 6px; font-size: 13px; }
.jalons-carte .ok { color: var(--succes); }
.jalons-carte .ko { color: var(--texte-2); }
.colonne-LIVE .kanban-titre { border-bottom-color: var(--succes); }
.colonne-SUSPENDED .kanban-titre { border-bottom-color: var(--critique); }
.colonne-READY_FOR_GO_LIVE .kanban-titre { border-bottom-color: var(--attention); }
.sous-onglets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.sous-onglets [aria-current="page"] { background: var(--principal); color: var(--carte); }
.colonne-disponible .kanban-titre { border-bottom-color: var(--succes); }
.colonne-quarantaine .kanban-titre { border-bottom-color: var(--attention); }
.colonne-bloque .kanban-titre, .colonne-perime .kanban-titre { border-bottom-color: var(--critique); }
.sous-titre.attention { color: var(--texte); font-weight: 600; }
.champ-dialogue { display: grid; gap: 4px; margin-bottom: 10px; }
.pave-signature { border: 1px dashed var(--texte-2); border-radius: 6px; background: var(--carte); touch-action: none; max-width: 100%; }
.colonne-preparee .kanban-titre, .colonne-validee .kanban-titre { border-bottom-color: var(--secondaire); }
.colonne-livree .kanban-titre { border-bottom-color: var(--succes); }
.communication { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .communication { grid-template-columns: 1fr; } }
.liste-conversations { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.conversation { padding: 8px 10px; border: 1px solid var(--bordure); border-radius: 6px; cursor: pointer; }
.conversation.active, .conversation:hover { border-color: var(--secondaire); background: var(--accent-fond); }
.messages { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; }
.message { max-width: 80%; padding: 8px 10px; border-radius: 8px; background: var(--fond); border: 1px solid var(--bordure); }
.message.de-moi { justify-self: end; background: var(--accent-fond); }
.message.retire .contenu-message { font-style: italic; color: var(--texte-2); }
.contenu-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.saisie { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.saisie-message { font: inherit; padding: 8px; border: 1px solid var(--texte-2); border-radius: 6px; resize: vertical; }
.reunions-fil { margin: 8px 0; padding-left: 18px; }
.totaux { font-weight: 600; }
.colonne-emise .kanban-titre { border-bottom-color: var(--info); }
.colonne-partiellement_payee .kanban-titre { border-bottom-color: var(--attention); }
.colonne-payee .kanban-titre { border-bottom-color: var(--succes); }
.colonne-annulee .kanban-titre { border-bottom-color: var(--inactif); }
.pos-entete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pos-corps { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: 16px; align-items: start; }
@media (max-width: 720px) { .pos-corps { grid-template-columns: 1fr; } }
.pos-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pos-article { display: grid; gap: 4px; text-align: left; min-height: 72px; background: var(--carte); color: var(--texte); border: 1px solid var(--bordure); }
.pos-article:hover { background: var(--accent-fond); color: var(--texte); border-color: var(--secondaire); }

/* Page publique de vérification : pas de bandeau de démonstration au-dessus. */
body.sans-bandeau { padding-top: 0; }
.verification-qr { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
.verification-qr img { border: 1px solid var(--bordure); border-radius: 6px; background: #fff; }
.lien-verification { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
.liste-cartes { list-style: none; padding: 0; display: grid; gap: 8px; }
.colonne-en_cours .kanban-titre { border-bottom-color: var(--info); }
.colonne-termine .kanban-titre { border-bottom-color: var(--succes); }
.colonne-refuse .kanban-titre { border-bottom-color: var(--critique); }
.colonne-annule .kanban-titre { border-bottom-color: var(--inactif); }
.case-en-ligne { display: inline-flex; align-items: center; gap: 6px; flex-direction: row; }

/* --- Charte officielle (claire) : barre latérale foncée à la manière d'un ERP, cartes de chiffres, tableaux
   de statuts. Les couleurs de statut marquent (bordure, pastille, point), le texte reste --texte. ------------- */
body { font-family: var(--police); font-size: 14px; background: var(--fond); color: var(--texte); }
.bandeau-demo { background: var(--critique); color: #fff; font-size: 11.5px; }
h1, h2, .titre-accueil, .marque div { font-family: var(--police-titre); font-weight: 700; color: var(--principal); }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
a { color: var(--principal); }
.entete { background: var(--carte); color: var(--texte); border-bottom: 1px solid var(--bordure); padding: 10px 20px; }
.marque { font-size: 18px; }
.marque span { color: var(--secondaire); }
.choix-langue select { color: var(--texte); border-color: var(--bordure); background: var(--carte); }
.carte { background: var(--carte); border-color: var(--bordure); border-radius: var(--rayon); box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04); }
input, select, textarea, .saisie-message { background: var(--carte); color: var(--texte); border: 1px solid var(--texte-2); border-radius: 8px; }
label { color: var(--texte-2); font-size: 12.5px; font-weight: 600; }
button { background: var(--principal); border-color: var(--principal); color: var(--sur-principal); border-radius: 8px; font-weight: 600; }
button:hover { background: var(--secondaire); border-color: var(--secondaire); color: #fff; }
.bouton-secondaire { background: var(--carte); color: var(--principal); border-color: var(--bordure-forte); }
.bouton-secondaire:hover { background: var(--accent-fond); color: var(--principal); border-color: var(--principal); }
.bouton-discret { background: transparent; color: var(--texte-2); border-color: var(--bordure); }
.bouton-discret:hover { color: var(--principal); background: var(--accent-fond); border-color: var(--bordure-forte); }
.negatif { color: var(--critique); border-color: color-mix(in srgb, var(--critique) 40%, white); background: var(--carte); }
.negatif:hover { background: var(--critique-fond); color: var(--critique); border-color: var(--critique); }
.erreur { color: var(--critique); }
table { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); }
th { background: var(--fond); color: var(--texte-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--bordure); }
td { border-bottom-color: var(--bordure); }
.ligne-etab:hover { background: var(--accent-fond); }
.badge { border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 10px; border: 1px solid transparent; color: var(--texte); }
.badge.normal, .badge.statut-arrivee, .badge.etape-termine { background: var(--succes-fond); border-color: color-mix(in srgb, var(--succes) 45%, white); }
.badge.alerte, .badge.urgence-urgent, .badge.etape-a_faire { background: var(--attention-fond); border-color: color-mix(in srgb, var(--attention) 55%, white); }
.badge.critique, .badge.urgence-vital { background: var(--critique-fond); border-color: color-mix(in srgb, var(--critique) 45%, white); }
.badge.sans_lit, .badge.urgence-standard, .badge.statut-refusee, .badge.statut-annulee { background: var(--fond); border-color: var(--inactif); color: var(--texte-2); }
.badge.statut-demandee, .badge.statut-acceptee, .badge.statut-en_route, .badge.etape-en_cours { background: var(--info-fond); border-color: color-mix(in srgb, var(--info) 40%, white); }
.etiquette { background: var(--accent-fond); color: var(--principal); }
.etiquette.critique { background: var(--critique-fond); color: var(--critique); }
.indicateur, .stat-carte { background: var(--carte); border: 1px solid var(--bordure); border-left: 4px solid var(--secondaire); border-radius: var(--rayon); padding: 14px 16px; }
.indicateur .valeur, .stat-valeur { font-family: var(--police-titre); font-size: clamp(17px, 1.6vw, 24px); overflow-wrap: anywhere; font-weight: 700; color: var(--principal); }
.indicateur .libelle, .stat-libelle { font-size: 11px; overflow-wrap: anywhere; color: var(--texte-2); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; }
.stat-carte.alerte { border-left-color: var(--attention); }
.stat-carte.alerte .stat-valeur { color: var(--texte); }
.stat-carte.critique { border-left-color: var(--critique); }
.stat-carte.critique .stat-valeur { color: var(--critique); }
.kanban-colonne { background: var(--fond); border-color: var(--bordure); border-radius: var(--rayon); }
.kanban-titre { color: var(--texte); }
.kanban-compte { background: var(--carte); color: var(--texte-2); border-color: var(--bordure); }
.colonne-a_faire .kanban-titre { border-bottom-color: var(--attention); }
.colonne-en_cours .kanban-titre { border-bottom-color: var(--info); }
.colonne-termine .kanban-titre { border-bottom-color: var(--succes); }
.transfert, .carte-pipeline, .pos-article, .conversation, .message, .chambre, .lit { background: var(--carte); border-color: var(--bordure); color: var(--texte); }
.transfert:hover, .transfert:focus-visible { border-color: var(--bordure-forte); }
.lit.occupe { background: var(--accent-fond); color: var(--texte); border-color: var(--bordure-forte); }
.lit.libre { background: var(--succes-fond); }
.lit.nettoyage { background: var(--attention-fond); }
.message.de-moi, .conversation.active { background: var(--accent-fond); }
.toast { background: var(--carte); color: var(--texte); border: 1px solid var(--bordure); border-left: 5px solid var(--secondaire); box-shadow: 0 8px 24px rgba(31, 41, 55, 0.12); }
.bandeau-licence { background: var(--attention-fond); color: var(--texte); border-bottom-color: var(--attention); }
.sous-onglets [aria-current="page"], .bascule button.actif { background: var(--principal); color: var(--sur-principal); }
.boite { background: var(--carte); color: var(--texte); border-color: var(--bordure); }
.boite::backdrop { background: rgba(31, 41, 55, 0.45); }
.verification-qr img { background: #fff; }
.flux.actif, .flux { font-size: 12px; }
.flux { color: var(--texte-2); }
.flux.actif { color: var(--succes); }
.page-sous-titre { margin: 3px 0 0; font-size: 12.5px; color: var(--texte-2); }

/* Barre latérale (menus par rôle, regroupés par section) : foncée (--barre) sur grand écran ; en largeur
   réduite, barre horizontale claire. */
.onglets { border: 0; gap: 2px; }
.onglet { color: var(--texte-2); background: transparent; border: 0; border-radius: 0; font-weight: 500; text-align: left; }
.onglet:hover { background: var(--accent-fond); color: var(--principal); }
.onglet[aria-current="page"] { background: var(--accent-fond); color: var(--principal); font-weight: 600; }
.nav-section { display: none; }
.hop-badge { display: none; }
@media (min-width: 900px) {
  main:has(> .onglets:not([hidden])) { max-width: none; padding: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
  main:has(> .onglets:not([hidden])) > section { grid-column: 2; padding: 28px 36px 64px; max-width: 1280px; }
  .onglets { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: var(--hauteur-bandeau); min-height: calc(100vh - var(--hauteur-bandeau)); flex-direction: column; flex-wrap: nowrap;
    background: var(--barre); border-right: 1px solid var(--bordure); padding: 16px 0; margin: 0; }
  .onglet { padding: 10px 20px; border-left: 3px solid transparent; margin: 0; color: rgba(255, 255, 255, 0.82); }
  .onglet:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .onglet[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: #fff; border-left-color: var(--accent); border-bottom: 0; }
  .onglet:focus-visible { outline-color: var(--accent); }
  .nav-section { display: block; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 20px 4px; }
  .nav-section[hidden] { display: none; }
  .hop-badge { display: grid; gap: 2px; margin: 0 14px 10px; padding: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; }
  .hop-badge[hidden] { display: none; }
  .hop-nom { font-size: 12px; font-weight: 700; color: #fff; }
  .hop-lieu { font-size: 11px; color: rgba(255, 255, 255, 0.75); }
}
@media (max-width: 899px) {
  .onglets { flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--bordure); background: var(--carte); }
  .onglet { white-space: nowrap; border-bottom: 3px solid transparent; }
  .onglet[aria-current="page"] { border-bottom-color: var(--secondaire); }
}

/* Tableau de bord de l'hôpital. */
.blocs-tableau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-bottom: 24px; }
.bloc-tableau { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px; display: grid; gap: 12px; align-content: start; }
.bloc-entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloc-entete h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bloc-tableau .stat-carte { background: var(--carte); padding: 12px; }
.bloc-tableau table { border: 0; }
.liste-simple { margin: 0; padding-left: 18px; color: var(--texte-2); }