/* ============================================================================
   BATEAU MEDICAL — Systeme d'information « Bloc medical naval »
   Marine profond · croix de vie teal · fonds clairs · angles nets
   Polices systeme (sans-serif) + mono pour les identifiants.
   100 % hors ligne : aucune ressource externe, aucun degrade.
   ============================================================================ */

:root {
  /* Marine / navy */
  --marine:     #0C2236;   /* barre de navigation */
  --navy:       #102A43;   /* en-tetes, titres */
  --navy-2:     #1B3A5C;   /* nuance secondaire */
  --navy-clair: #E8EEF4;

  /* Teal medical */
  --teal:       #0F766E;
  --teal-fonce: #0B5A54;
  --teal-clair: #E3F0EE;

  /* Neutres */
  --fond:       #F4F6F8;
  --blanc:      #FFFFFF;
  --bordure:    #D8E0E8;
  --bordure-2:  #C7D2DD;
  --texte:      #1C2B39;
  --texte-sec:  #5B6B7B;
  --survol:     #EEF3F6;

  /* Priorites de tri */
  --P1: #B91C1C;
  --P2: #D97706;
  --P3: #CA8A04;
  --P4: #5F7A63;

  --ombre:    0 1px 3px rgba(16, 42, 67, .08);
  --ombre-dd: 0 4px 14px rgba(16, 42, 67, .16);
  --rayon:    4px;

  /* Alias de compatibilite (anciens noms conserves pour les styles inline) */
  --nuit:       var(--navy);
  --vert:       var(--teal);
  --vert-cl:    var(--teal-clair);
  --laiton:     var(--P2);
  --laiton-cl:  var(--P2);
  --p1: var(--P1);
  --p2: var(--P2);
  --p3: var(--P3);
  --p4: var(--P4);
  --rouge: var(--P1);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background-color: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  color: var(--navy);
  font-weight: 700;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--teal); text-decoration: underline; }

code, .mono, .id-cell, .id-patient {
  font-family: Consolas, Menlo, "Courier New", monospace;
}

.text-muted { color: var(--texte-sec) !important; }

/* ==========================================================================
   BARRE DE NAVIGATION
   ========================================================================== */
.navbar-med {
  background-color: var(--marine);
  min-height: 56px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(12, 34, 54, .25);
}
.navbar-med .container-fluid { padding: 0 1rem; }
.navbar-med .navbar-brand {
  color: #fff;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem .45rem 0;
  margin-right: 1.2rem;
}
.navbar-med .navbar-brand:hover { color: #fff; }
.brand-texte {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}
.brand-texte small {
  display: block;
  text-transform: none;
  font-weight: 400;
  font-size: .68rem;
  color: #B7C6D4;
  letter-spacing: .02em;
}
.navbar-med .nav-link {
  color: rgba(255, 255, 255, .88);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .95rem .85rem;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.navbar-med .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
}
.navbar-med .nav-link.active,
.navbar-med .nav-link.item-actif {
  color: #fff;
  border-bottom-color: var(--teal);
  background-color: rgba(255, 255, 255, .04);
}
.navbar-med .nav-link .ico { width: 16px; height: 16px; flex: none; }
.navbar-toggler { color: #fff; padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(15, 118, 110, .6); }

/* Menus deroulants — fond blanc, ombre douce, barre teal au survol */
.navbar-med .dropdown-menu {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-dd);
  padding: .35rem;
  margin-top: 0;
  min-width: 230px;
}
.navbar-med .dropdown-item {
  border-radius: 2px;
  font-size: .88rem;
  padding: .5rem .7rem;
  color: var(--texte);
  border-left: 3px solid transparent;
}
.navbar-med .dropdown-item:hover,
.navbar-med .dropdown-item:focus {
  background-color: var(--survol);
  color: var(--navy);
  border-left-color: var(--teal);
}
.navbar-med .dropdown-item.active,
.navbar-med .dropdown-item.item-actif {
  background-color: var(--teal-clair);
  color: var(--teal-fonce);
  font-weight: 700;
  border-left-color: var(--teal);
}
.navbar-med .dropdown-header {
  color: var(--texte-sec);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .4rem .7rem .25rem;
}
.navbar-med .dropdown-divider { margin: .3rem 0; border-color: var(--bordure); }

/* Bloc utilisateur */
.nav-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  padding-left: .8rem;
  margin-left: .4rem;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.nav-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-user-info { line-height: 1.15; }
.nav-user-info .nu-nom {
  display: block;
  font-size: .82rem;
  font-weight: 700;
}
.nav-user-info .nu-role {
  display: block;
  font-size: .68rem;
  color: #B7C6D4;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nav-logout, .nav-mdp {
  color: rgba(255, 255, 255, .85);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .45rem;
  border-radius: var(--rayon);
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-mdp svg { width: 16px; height: 16px; flex: none; }
.nav-logout:hover, .nav-mdp:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-mdp.item-actif { color: #fff; background: rgba(15, 118, 110, .55); }

/* Menu mobile (offcanvas) */
.offcanvas { background: var(--marine); color: #fff; }
.offcanvas-title {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  font-weight: 700;
}
.offcanvas .dropdown-menu { position: static !important; box-shadow: none; }
.offcanvas .nav-link { border-bottom: none; }

.nav-spacer { height: 56px; }
.contenu-principal { padding: 1.1rem 0 2rem; min-height: calc(100vh - 56px); }

/* Pied de page */
.pied-page {
  color: var(--texte-sec);
  font-size: .76rem;
  letter-spacing: .02em;
  border-top: 1px solid var(--bordure);
  margin-top: 1.5rem !important;
  padding-top: .9rem !important;
}

/* ==========================================================================
   EMBLEME (ecu + croix de vie + ancre)
   ========================================================================== */
.embleme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: none;
}
.embleme svg { width: 100%; height: 100%; display: block; }
.embleme-16 { width: 16px; height: 16px; }
.embleme-22 { width: 24px; height: 24px; }
.embleme-38 { width: 38px; height: 38px; }
.embleme-48 { width: 48px; height: 48px; }
.embleme-64 { width: 64px; height: 64px; }

/* ==========================================================================
   TITRES DE PAGE & BANDEAUX
   ========================================================================== */
.titre-page {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--navy);
}
.titre-page .titre, .titre-page h1 {
  font-size: 1.25rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.titre-page .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.bandeau-campagne {
  background: var(--navy);
  color: #fff;
  border-radius: var(--rayon);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--ombre);
}
.bandeau-campagne .bc-titre {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bandeau-campagne .bc-sous { font-size: .82rem; color: #B7C6D4; }
.bandeau-campagne .bc-droite {
  margin-left: auto;
  text-align: right;
  font-size: .82rem;
  color: #D6E0EA;
}
.bandeau-campagne .bc-droite .date {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
}
.bandeau-campagne select {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .3) !important;
}
.bandeau-campagne select option { color: var(--texte); }

.bandeau-patient {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--teal);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .9rem;
}
.bp-id, .bp-mat {
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  font-size: .95rem;
}
.bp-id { color: var(--texte-sec); }
.bp-id::before {
  content: "N° dossier ";
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texte-sec);
}
.bp-mat {
  color: var(--teal-fonce);
  background: var(--teal-clair);
  border: 1px solid #BFDCD8;
  padding: .12rem .5rem;
  border-radius: 3px;
}
.bp-mat::before {
  content: "Matricule ";
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--teal-fonce);
}
.bp-nom { font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.bp-info { color: var(--texte-sec); font-size: .83rem; }
.bp-droite { margin-left: auto; display: flex; gap: .35rem; align-items: center; }

/* ==========================================================================
   CARTES & SECTIONS
   ========================================================================== */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.carte-titre {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--bordure);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: #FBFCFD;
}
.carte-titre.avis-verrou {
  background: #FFF7E6;
  color: #92600A;
  border-bottom-color: #EBCB8B;
}
/* Pastille numerotee des sections de formulaire */
.num-pastille {
  background: var(--teal);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Consolas, Menlo, monospace;
  font-size: .72rem;
  font-weight: 700;
  flex: none;
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.form-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .25rem;
}
.form-text { color: var(--texte-sec); font-size: .76rem; }
.obligatoire { color: var(--P1); font-weight: 800; }

.form-control, .form-select {
  border: 1px solid var(--bordure-2);
  border-radius: 3px;
  font-size: .9rem;
  color: var(--texte);
  background: var(--blanc);
  padding: .42rem .6rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}
.form-control[readonly] { background: var(--fond); }
.form-control.text-uppercase { letter-spacing: .02em; }

/* Champ matricule mis en evidence */
.champ-matricule {
  background: var(--teal-clair);
  border: 1px solid #BFDCD8;
  border-radius: var(--rayon);
  padding: .65rem .75rem;
}
.champ-matricule .form-control {
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--teal-fonce);
  text-transform: uppercase;
}

/* Cases a cocher et boutons radio — teal */
.form-check-input {
  accent-color: var(--teal);
  border-color: var(--bordure-2);
  width: 1.05em;
  height: 1.05em;
}
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); border-color: var(--teal); }
.form-check-label { font-size: .88rem; }

.case-groupe {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .75rem .9rem;
  background: #FBFCFD;
}
.groupe-titre {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--navy);
  border-left: 3px solid var(--teal);
  padding-left: .5rem;
  margin-bottom: .55rem;
}

.choix-satisfaction .form-check {
  flex: 1;
  margin: 0;
}
.choix-satisfaction .btn-reponse {
  border: 1px solid var(--bordure-2);
  border-radius: var(--rayon);
  padding: .55rem 1rem;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  display: block;
  background: var(--blanc);
  color: var(--texte);
  transition: background-color .12s, border-color .12s;
}
.choix-satisfaction .form-check-input { position: absolute; opacity: 0; }
.choix-satisfaction .form-check-input:checked + .btn-reponse {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.choix-satisfaction .form-check-input:focus-visible + .btn-reponse {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .2);
}

.cadre-decision {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .8rem 1rem;
  background: #FBFCFD;
}
.section-verrouillee { opacity: .75; }
.section-verrouillee .form-control,
.section-verrouillee .form-select,
.section-verrouillee .form-check-input,
.section-verrouillee button { pointer-events: none; }

.feuillet-footer {
  border-top: 1px solid var(--bordure);
  background: #FBFCFD;
}

.mention-manuscrite {
  font-size: .78rem;
  color: var(--texte-sec);
  font-style: italic;
}

.imc-normal { color: var(--teal) !important; }
.imc-alerte { color: var(--P1) !important; }

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn { border-radius: 3px; font-weight: 600; font-size: .88rem; }
.btn-med {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
}
.btn-med:hover, .btn-med:focus {
  background: var(--teal-fonce);
  border-color: var(--teal-fonce);
  color: #fff;
}
.btn-navy, .btn-nuit, .btn-urgence {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
}
.btn-navy:hover, .btn-navy:focus,
.btn-nuit:hover, .btn-nuit:focus,
.btn-urgence:hover, .btn-urgence:focus {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: #fff;
}
.btn-outline-secondary {
  color: var(--texte-sec);
  border: 1px solid var(--bordure-2);
  background: var(--blanc);
}
.btn-outline-secondary:hover {
  background: var(--survol);
  color: var(--navy);
  border-color: var(--navy-2);
}
.btn-outline-primary {
  color: var(--teal-fonce);
  border: 1px solid var(--teal);
  background: var(--blanc);
}
.btn-outline-primary:hover { background: var(--teal-clair); color: var(--teal-fonce); border-color: var(--teal); }
.btn-outline-dark {
  color: var(--navy);
  border: 1px solid var(--navy);
  background: var(--blanc);
}
.btn-outline-dark:hover { background: var(--navy); color: #fff; }
.btn-outline-danger {
  color: var(--P1);
  border: 1px solid var(--P1);
  background: var(--blanc);
}
.btn-outline-danger:hover { background: var(--P1); color: #fff; border-color: var(--P1); }
.btn-lg { font-size: .98rem; }

/* ==========================================================================
   BADGES & PASTILLES
   ========================================================================== */
.pastille {
  display: inline-block;
  border-radius: 3px;
  padding: .14rem .5rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.45;
  white-space: nowrap;
}
.pastille-p1 { background: var(--P1); color: #fff; font-family: Consolas, Menlo, monospace; }
.pastille-p2 { background: var(--P2); color: #fff; font-family: Consolas, Menlo, monospace; }
.pastille-p3 { background: var(--P3); color: #fff; font-family: Consolas, Menlo, monospace; }
.pastille-p4 { background: var(--P4); color: #fff; font-family: Consolas, Menlo, monospace; }
.pastille-urgence {
  background: var(--P1);
  color: #fff;
  text-transform: uppercase;
}
.pastille-derogation {
  background: #FFF7E6;
  color: #92600A;
  border: 1px solid #EBCB8B;
  text-transform: uppercase;
}

/* Badges d'etape du workflow (contour + fond teinte) */
.badge-etape {
  display: inline-block;
  border-radius: 3px;
  padding: .14rem .55rem;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid;
}
.badge-etape-teal { background: var(--teal-clair); color: var(--teal-fonce); border-color: #BFDCD8; }
.badge-etape-gris { background: #EEF1F4; color: var(--texte-sec); border-color: var(--bordure-2); }
.badge-etape-amber { background: #FFF7E6; color: #92600A; border-color: #EBCB8B; }

/* ==========================================================================
   TABLEAUX
   ========================================================================== */
.table { color: var(--texte); margin-bottom: 0; vertical-align: middle; }
.table thead th {
  background: var(--navy);
  color: #fff;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  font-weight: 600;
  border-color: var(--navy-2);
  padding: .6rem .7rem;
  white-space: nowrap;
}
.table tbody td { padding: .55rem .7rem; border-color: var(--bordure); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #F8FAFB; }
.table-hover > tbody > tr:hover > * { background: var(--survol); }
.table-bordered { border-color: var(--bordure-2); }
.table-bordered th, .table-bordered td { border-color: var(--bordure-2); }

.ligne-p1 td:first-child, .ligne-p1 th:first-child { box-shadow: inset 3px 0 0 var(--P1); }
.ligne-p2 td:first-child, .ligne-p2 th:first-child { box-shadow: inset 3px 0 0 var(--P2); }
.ligne-p3 td:first-child, .ligne-p3 th:first-child { box-shadow: inset 3px 0 0 var(--P3); }
.ligne-p4 td:first-child, .ligne-p4 th:first-child { box-shadow: inset 3px 0 0 var(--P4); }

.id-cell { color: var(--teal-fonce); font-weight: 700; font-size: .88rem; }
a.id-cell:hover { color: var(--teal); }
.id-patient {
  background: var(--navy-clair);
  color: var(--navy);
  border: 1px solid var(--bordure-2);
  border-radius: 3px;
  padding: .15rem .55rem;
  font-weight: 700;
  font-size: .82rem;
}
.cellule-mat {
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* Mini-bordereau (tableau indicateur) */
.mini-bordereau { width: 100%; border-collapse: collapse; }
.mini-bordereau td {
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--bordure);
  font-size: .88rem;
}
.mini-bordereau tr:last-child td { border-bottom: none; }
.mini-bordereau td:last-child {
  text-align: right;
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  width: 70px;
}

/* Barres de statistiques */
.barre-piste {
  background: #E8EDF1;
  border-radius: 2px;
  height: 14px;
  overflow: hidden;
}
.barre-stat {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
}
.barre-cell { min-width: 120px; }

/* ==========================================================================
   TABLEAU DE BORD
   ========================================================================== */
.ruban-actions, .ruban-filtres {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
.ruban-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.kpi-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem;
}
.kpi-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.kpi-icone {
  width: 42px;
  height: 42px;
  border-radius: var(--rayon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kpi-icone.ic-navy { background: var(--navy); }
.kpi-icone.ic-teal { background: var(--teal); }
.kpi-icone.ic-p1 { background: var(--P1); }
.kpi-icone.ic-p2 { background: var(--P2); }
.kpi-icone svg { width: 22px; height: 22px; }
.kpi-valeur {
  font-family: Consolas, Menlo, monospace;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.kpi-libelle {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texte-sec);
  font-weight: 600;
}

/* Echelle P1-P4 en bandeau horizontal */
.echelle-tri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding: .9rem 1rem 1rem;
}
.echelon {
  border-radius: var(--rayon);
  padding: .65rem .7rem;
  color: #fff;
}
.echelon .code { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.echelon .val {
  font-family: Consolas, Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}
.e-p1 { background: var(--P1); }
.e-p2 { background: var(--P2); }
.e-p3 { background: var(--P3); }
.e-p4 { background: var(--P4); }

/* ==========================================================================
   FRISE DU WORKFLOW (5 etapes)
   ========================================================================== */
.frise-wf {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.frise-wf .etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: none;
  width: 110px;
}
.frise-wf .rond {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E2E8EE;
  color: var(--texte-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid #E2E8EE;
}
.frise-wf .etape.faite .rond { background: var(--teal); border-color: var(--teal); color: #fff; }
.frise-wf .etape.courante .rond {
  background: var(--blanc);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: 0 0 0 4px rgba(16, 42, 67, .12);
}
.frise-wf .rond svg { width: 17px; height: 17px; }
.frise-wf .lib {
  font-size: .72rem;
  font-weight: 600;
  color: var(--texte-sec);
  text-align: center;
  line-height: 1.25;
}
.frise-wf .etape.faite .lib, .frise-wf .etape.courante .lib { color: var(--navy); }
.frise-wf .trait {
  flex: 1 1 auto;
  height: 3px;
  background: #E2E8EE;
  margin-top: 16px;
  min-width: 18px;
}
.frise-wf .trait.fait { background: var(--teal); }

/* ==========================================================================
   ALERTES
   ========================================================================== */
.flash-zone { margin-bottom: .8rem; }
.alert {
  border-radius: var(--rayon);
  border: 1px solid;
  font-size: .88rem;
}
.alert-danger { background: #FCEBEA; border-color: #E9B7B2; color: #7A1C14; }
.alert-warning { background: #FFF7E6; border-color: #EBCB8B; color: #7A5208; }
.alert-success { background: var(--teal-clair); border-color: #BFDCD8; color: var(--teal-fonce); }
.alert-info { background: var(--navy-clair); border-color: #B9CADB; color: var(--navy); }
.alert-secondary { background: #EEF1F4; border-color: var(--bordure-2); color: var(--texte-sec); }

/* ==========================================================================
   PAGE DE CONNEXION (fond marine)
   ========================================================================== */
.page-nuit {
  min-height: 100vh;
  background-color: var(--marine);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 64 64'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.05'%3E%3Cpath d='M28.5 12 H35.5 V28.5 H52 V35.5 H35.5 V52 H28.5 V35.5 H12 V28.5 H28.5 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.carte-connexion {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  padding: 1.8rem 1.9rem 1.2rem;
}
.connexion-titre {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  margin: .6rem 0 .15rem;
}
.mention-dgsic {
  margin-top: 1.1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--bordure);
  text-align: center;
  font-size: .72rem;
  color: var(--texte-sec);
  letter-spacing: .02em;
  line-height: 1.5;
}

.cachet-erreur {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: var(--rayon);
  background: var(--P1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
}

/* ==========================================================================
   IMPRESSION (ecran : documents)
   ========================================================================== */
.page-imprime {
  background: #fff;
  color: #000;
  font-size: 10.5pt;
}
.entete-impression {
  text-align: center;
  border-bottom: 2px solid #000;
  padding-bottom: .4rem;
  margin-bottom: .8rem;
}
.entete-impression h1 {
  font-size: 12pt;
  margin: .15rem 0 .1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.entete-impression .sous { font-size: 9.5pt; }
.entete-impression .fiche-type {
  display: inline-block;
  border: 1.5px solid #000;
  padding: .1rem .8rem;
  font-weight: 700;
  font-size: 10pt;
  margin: .25rem 0;
  text-transform: uppercase;
}

.pied-impression {
  margin-top: 1rem;
  padding-top: .35rem;
  border-top: 1px solid #000;
  font-size: 8.5pt;
  text-align: center;
  color: #000;
}

.impression-table { width: 100%; border-collapse: collapse; margin: .2rem 0; }
.impression-table th, .impression-table td {
  border: 1px solid #000;
  padding: 3px 6px;
  vertical-align: top;
}
.impression-table th {
  background: #eee;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 8.5pt;
  letter-spacing: .03em;
  text-align: left;
}
.case-imprime {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.4px solid #000;
  margin-right: 4px;
  vertical-align: -1px;
  color: #000;
  line-height: 1;
}
.case-imprime svg { width: 9px; height: 9px; }

.section-imprime { page-break-inside: avoid; }

/* ==========================================================================
   REGLES D'IMPRESSION (A4)
   ========================================================================== */
@page {
  size: A4;
  margin: 11mm 13mm;
  @bottom-center {
    content: "Page " counter(page) " / " counter(pages);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 8pt;
    color: #333;
  }
}

@media print {
  /* Pages application : ne garder que le contenu */
  .no-print, .navbar-med, .nav-spacer, .pied-page, .flash-zone,
  .boutons-impression, .btn { display: none !important; }

  body { background: #fff !important; color: #000; }
  .contenu-principal { padding: 0 !important; margin: 0 !important; }
  .container-fluid { max-width: 100% !important; padding: 0 !important; }

  .carte, .bandeau-patient, .bandeau-campagne,
  .ruban-actions, .ruban-filtres {
    box-shadow: none !important;
    border-color: #9aa7b3 !important;
    page-break-inside: avoid;
  }
  .bandeau-campagne, .carte-titre { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pastille, .echelon, .kpi-icone, .frise-wf .etape.faite .rond {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .table, .impression-table { width: 100%; }
  .table tr, .impression-table tr, .row { page-break-inside: avoid; }
  .saut-page { page-break-before: always; }
  a { color: #000; text-decoration: none; }

  /* Documents d'impression dedies */
  .page-imprime { font-size: 10.5pt; }
  .page-imprime .container-fluid { padding: 0 !important; }
}