/* ═══════════════════════════════════════════════════════════════════════════
   CRM CIBIO — Feuille de style principale
   Design plat, professionnel, médical
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────── */
/* L'accent est le turquoise du logo CIBIO. L'aplat des boutons est plus
   sombre que le logo : du blanc sur le turquoise d'origine tomberait sous le
   seuil de contraste lisible. */
:root {
  --color-bg:         #e4e9ef;   /* le fond de page se détache enfin du blanc des cartes ; était #f4f6f8, quasi blanc sur blanc */
  --color-surface:    #ffffff;
  --color-border:     #bcc7d4;   /* filets visibles ; était #dfe4ea, invisible sur blanc */
  /* La limite des contrôles de saisie, et elle seule : la norme exige 3:1
     pour la bordure qui rend un champ identifiable. 3,27 sur blanc, 3,02
     sur le gris. Le filet de séparation, lui, reste à --color-border. */
  --color-border-champ: #7c90a9;
  --color-text:       #16202b;
  --color-text-2:     #4d5b6a;
  --color-text-3:     #617385;   /* AA : 4,88 sur blanc, 4,51 sur le gris ; était #8494a5, 3,11 */
  /* La même encre neutre, descendue d'un cran pour les textes posés sur un
     APLAT de teinte, plus sombre que le blanc : --color-text-3 n'y tient pas
     (4,18 sur #e8eef4, 4,42 sur #f1f4f7, 4,46 sur #f1f5f9). Teinte et
     saturation identiques à --color-text-3, seule la clarté descend de
     0,451 à 0,428. AA : 4,56 sur #e8eef4, 4,82 sur #f1f4f7, 4,86 sur
     #f1f5f9, 5,09 sur #f8fafc, 4,96 sur #f5f7f8, 5,32 sur blanc. */
  --color-text-3-aplat: #5c6d7e;

  --color-primary:    #0c7e75;   /* AA : 4,93 sur blanc, 4,55 sur le gris, 4,57 sur l'onglet actif ; était #0f9c91, 3,40 */
  --color-primary-h:  #0a6b63;   /* AA : 6,37 sur blanc, 5,88 sur le gris ; plus sombre que le minimum, pour rester distinct du repos ; était #0b8077, 4,81 */
  --color-primary-fd: #e8faf8;   /* fond très clair : onglet actif, survols */
  --color-accent:     #2de0ce;   /* éclat, réservé aux fonds sombres */
  --color-success:    #148058;   /* AA : 4,93 sur blanc, 4,55 sur le gris ; était #15855c, 4,27 sur le gris */
  --color-warning:    #a46004;   /* AA : 4,94 sur blanc, 4,56 sur le gris ; était #b76b05, 3,79 sur le gris */
  --color-danger:     #d72d2d;   /* AA : 4,88 sur blanc, 4,51 sur le gris ; était #d93a3a, 4,20 sur le gris */
  --color-info:       #0c7e75;   /* AA : 4,93 sur blanc, 4,55 sur le gris ; était #0f9c91, 3,40 */

  /* Ardoise du bandeau et de la page de connexion */
  --ardoise-900:      #0b1724;
  --ardoise-800:      #102033;
  --ardoise-700:      #16293f;
  --ardoise-600:      #1d3550;

  /* Statuts */
  /* Chaque statut qui a un équivalent dans la palette la DÉSIGNE, au lieu
     d'en recopier la valeur : --statut-odm valait l'ancien --color-primary,
     --statut-lecture l'ancien --color-warning, --statut-rapport l'ancien
     --color-success, --statut-nc l'ancien --color-danger. Une copie de
     couleur est une divergence programmée. --statut-valise n'a pas
     d'équivalent et tient déjà 5,39 sur son aplat : il ne bouge pas. */
  --statut-demande:   var(--color-text-3-aplat);   /* AA : 4,86 sur #f1f5f9 ; était #64748b, 4,34 */
  --statut-odm:       var(--color-primary);        /* AA : 4,74 sur #ecfeff ; était #0f9c91, 3,26 */
  --statut-valise:    #6c4bd0;                     /* AA : 5,39 sur #f5f3ff ; inchangé */
  --statut-lecture:   var(--color-warning);        /* AA : 4,76 sur #fffbeb ; était #b76b05, 3,96 */
  --statut-rapport:   var(--color-success);        /* AA : 4,71 sur #f0fdf4 ; était #15855c, 4,42 */
  --statut-nc:        var(--color-danger);         /* AA : 4,55 sur #fef5f5 ; était #d93a3a, 4,16 */

  --radius:    6px;
  --radius-lg: 10px;
  --shadow:    0 1px 3px rgba(0,0,0,.1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body { background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.5; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Bandeau ────────────────────────────────────────────────────────────── */
.bandeau {
  position: sticky; top: 0; z-index: 110;
  display: flex; align-items: center; gap: 18px;
  height: 46px; padding: 0 16px;
  background: linear-gradient(100deg, var(--ardoise-900) 0%, var(--ardoise-700) 60%, var(--ardoise-600) 100%);
  color: #cdd9e4;
}

.bandeau-marque { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.bandeau-logo { align-self: center; height: 24px; width: auto; }
.bandeau-titre {
  font-size: 16px; font-weight: 800; letter-spacing: .5px; color: var(--color-accent);
}
.bandeau-titre-suffixe { font-weight: 300; letter-spacing: 1px; }
.bandeau-sous-titre {
  font-size: 10.5px; color: #7d92a6; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.bandeau-outils { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.bandeau-maj {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #93a6b8; white-space: nowrap;
}

.btn-bandeau {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 13px; border: 0; border-radius: 5px;
  background: var(--color-primary); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-bandeau:hover:not(:disabled) { background: var(--color-primary-h); }
.btn-bandeau:disabled { opacity: .6; cursor: progress; }
/* Le chevron tourne pendant le chargement : le seul retour visible sur une
   requête qui ne change rien à l'écran. */
.btn-bandeau.tourne span[aria-hidden] { display: inline-block; animation: tourne-bandeau .8s linear infinite; }
@keyframes tourne-bandeau { to { transform: rotate(360deg); } }

.btn-cloche {
  position: relative; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: #93a6b8; font-size: 14px;
}
.btn-cloche:hover { background: rgba(255,255,255,.08); color: #cdd9e4; }
.pastille-cloche {
  position: absolute; top: 1px; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-danger); color: #fff;
  font-size: 9.5px; font-weight: 700; border-radius: 8px;
}

/* ── Compte ─────────────────────────────────────────────────────────────── */
.bandeau-compte { position: relative; }
.compte-bouton {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 8px 3px 3px; border: 0; border-radius: 16px;
  background: rgba(255,255,255,.06); cursor: pointer;
  font-family: inherit; color: #cdd9e4;
}
.compte-bouton:hover { background: rgba(255,255,255,.12); }
.compte-pastille {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
}
.compte-mail { font-size: 11.5px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.compte-menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 120;
  min-width: 235px; padding: 6px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(11,23,36,.18);
}
.compte-menu-entete {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 10px; margin-bottom: 5px;
  border-bottom: 1px solid var(--color-border);
}
.compte-menu-entete strong { font-size: 13px; }
.compte-menu-entete span { font-size: 11.5px; color: var(--color-text-3); }
.compte-menu button {
  display: block; width: 100%; padding: 7px 10px; text-align: left;
  background: none; border: 0; border-radius: var(--radius);
  font-family: inherit; font-size: 12.5px; color: var(--color-text-2); cursor: pointer;
}
.compte-menu button:hover { background: var(--color-primary-fd); color: var(--color-primary-h); }

.bandeau-editeur { font-size: 10px; color: #5f7589; white-space: nowrap; }
.bandeau-editeur strong { color: #8ba0b3; font-weight: 600; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.barre-nav {
  position: sticky; top: 46px; z-index: 100;
  display: flex; gap: 2px; padding: 6px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.nav-tab {
  padding: 6px 14px; border-radius: var(--radius); font-size: 13px;
  color: var(--color-text-2); transition: background .15s, color .15s;
}
.nav-tab:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.nav-tab.active { background: var(--color-primary-fd); color: var(--color-primary-h); font-weight: 500; }
.nav-tab--admin { margin-left: auto; }

@media (max-width: 1100px) {
  .bandeau-sous-titre, .bandeau-editeur { display: none; }
}
@media (max-width: 820px) {
  .bandeau-maj { display: none; }
  .compte-mail { display: none; }
}

/* ── Main ──────────────────────────────────────────────────────────────── */
.main { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Alertes ────────────────────────────────────────────────────────────── */
.alertes-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-bottom: 16px;
  background: #fef5f5; border: 1px solid #fecaca;
  border-radius: var(--radius); color: var(--color-danger);
  font-size: 13px; font-weight: 500;
}
.alertes-icon { font-size: 16px; }

/* ── Stats strip ────────────────────────────────────────────────────────── */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card--danger .stat-value { color: var(--color-danger); }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 12px; color: var(--color-text-3); }

/* ── Filtres ────────────────────────────────────────────────────────────── */
.filters-bar {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}
.input-search {
  flex: 1; min-width: 200px; max-width: 360px;
  padding: 7px 12px; border: 1px solid var(--color-border-champ);
  border-radius: var(--radius); font-size: 13px;
  background: var(--color-surface); color: var(--color-text);
}
.input-search:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }

/* ── Tableau ────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.table th {
  background: var(--color-bg); text-align: left;
  padding: 10px 14px; font-size: 12px; font-weight: 600;
  color: var(--color-text-3); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--color-border);
}
.table td {
  padding: 11px 14px; border-bottom: 1px solid var(--color-border);
  font-size: 13px; vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #f8fafc; }
.table-empty { text-align: center; color: var(--color-text-3); padding: 40px !important; }

/* ── Badges statut ──────────────────────────────────────────────────────── */
.badge-statut {
  display: inline-block; padding: 3px 8px;
  border-radius: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: .3px; white-space: nowrap;
}
.badge-statut--demande   { background: #f1f5f9; color: var(--statut-demande); }
.badge-statut--odm       { background: #ecfeff; color: var(--statut-odm); }
.badge-statut--valise    { background: #f5f3ff; color: var(--statut-valise); }
.badge-statut--lecture   { background: #fffbeb; color: var(--statut-lecture); }
.badge-statut--rapport   { background: #f0fdf4; color: var(--statut-rapport); }
.badge-statut--nc        { background: #fef5f5; color: var(--statut-nc); }

/* ── Étapes (barre de progression) ─────────────────────────────────────── */
.steps-bar {
  display: flex; gap: 4px; align-items: center;
}
.step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-border);
}
.step-dot.done    { background: var(--color-success); }
.step-dot.current { background: var(--color-primary); }
.step-dot.late    { background: var(--color-danger); }

/* ── Deadline ───────────────────────────────────────────────────────────── */
.deadline-ok      { color: var(--color-text-3); }
.deadline-warning { color: var(--color-warning); font-weight: 600; }
.deadline-danger  { color: var(--color-danger); font-weight: 700; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary  { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-h); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-ghost    { background: transparent; color: var(--color-text-2); }
.btn-ghost:hover { background: var(--color-bg); }
.btn-danger   { background: var(--color-danger); color: #fff; }
.btn-sm       { padding: 4px 10px; font-size: 12px; }
.btn-lg       { padding: 10px 20px; font-size: 15px; }
.btn-icon     { padding: 6px; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.input, .select {
  width: 100%; padding: 7px 12px;
  border: 1px solid var(--color-border-champ);
  border-radius: var(--radius); font-size: 13px;
  background: var(--color-surface); color: var(--color-text);
  transition: border-color .15s;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--color-primary);
}
textarea.input { resize: vertical; min-height: 80px; }

/* ── Formulaires ────────────────────────────────────────────────────────── */
.form-page { max-width: 860px; }
.form-title { font-size: 20px; font-weight: 600; margin-bottom: 24px; }
.form-grid { display: flex; flex-direction: column; gap: 20px; }

.form-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px;
}
.form-section legend {
  font-size: 13px; font-weight: 600; color: var(--color-primary);
  padding: 0 8px; letter-spacing: .3px;
}
.form-row { display: flex; gap: 16px; margin-top: 14px; }
.form-row > * { flex: 1; }
.form-label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
/* Valeur imposée par le serveur, montrée à l'opérateur sans lui laisser croire
   qu'il peut la changer : même gabarit qu'un champ, mais inerte. */
.champ-fige {
  padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg); color: var(--color-text-2);
  font-size: 13px; font-weight: 400; line-height: 1.3;
}
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ── Faisceau ligne ─────────────────────────────────────────────────────── */
.faisceau-row {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px; margin-top: 10px;
  background: var(--color-bg); border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.faisceau-row .form-label { margin-top: 0; }
.faisceau-row .input { min-width: 0; }

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.page-header h2 { font-size: 18px; font-weight: 600; }

/* ── Cards grille ───────────────────────────────────────────────────────── */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.client-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px;
}
.client-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.client-card-num { font-size: 12px; color: var(--color-text-3); font-weight: 600; }
.client-card-nom { font-size: 14px; font-weight: 600; margin-top: 4px; }
.client-card-ville { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
.client-card-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; }

/* ── Modales ────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-panel {
  position: relative; z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  width: 520px; max-width: 95vw; max-height: 90vh;
  display: flex; flex-direction: column;
}
.modal-panel--large { width: 900px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--color-border);
}
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--color-text-3); padding: 2px 6px; border-radius: 4px; }
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }

/* ── Détail essai (modale) ──────────────────────────────────────────────── */
.essai-timeline {
  display: flex; gap: 0; margin: 16px 0;
  overflow-x: auto;
}
.timeline-step {
  flex: 1; min-width: 130px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-right: none; background: var(--color-surface);
  font-size: 12px; position: relative;
}
.timeline-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.timeline-step:last-child  { border-right: 1px solid var(--color-border); border-radius: 0 var(--radius) var(--radius) 0; }
.timeline-step.done    { background: #f0fdf4; }
.timeline-step.current { background: var(--color-primary-fd); border-color: var(--color-primary); }
.timeline-step.late    { background: #fef5f5; border-color: var(--color-danger); }
.timeline-step-num     { font-size: 11px; font-weight: 700; color: var(--color-text-3); }
.timeline-step-label   { font-weight: 600; margin-top: 2px; }
.timeline-step-date    { font-size: 11px; color: var(--color-text-3); margin-top: 4px; }

.resultats-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
.resultats-table th, .resultats-table td { padding: 7px 10px; border: 1px solid var(--color-border); text-align: left; }
.resultats-table th { background: var(--color-bg); font-weight: 600; }
.result-conforme  { color: var(--color-success); font-weight: 600; }
.result-attention { color: var(--color-warning); font-weight: 600; }
.result-nc        { color: var(--color-danger); font-weight: 700; }

/* ── Fiche dossier : consultation des étapes ────────────────────────────── */
.essai-consultation { display: flex; gap: 8px; flex-wrap: wrap; }

.essai-synthese {
  font-size: 12px; color: var(--color-text-2);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 8px 12px; margin: 8px 0;
  line-height: 1.6;
}
.essai-manquant { color: var(--color-danger); font-weight: 600; }
.essai-vide {
  font-size: 13px; color: var(--color-text-3);
  padding: 14px; text-align: center;
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  margin: 16px 0;
}
/* Lecture écartée du calcul : la valeur reste visible, jamais supprimée */
.lecture-ecartee { text-decoration: line-through; color: var(--color-text-3); }

/* ── Import ─────────────────────────────────────────────────────────────── */
.import-result { margin-top: 14px; padding: 12px; border-radius: var(--radius); }
.import-result.success { background: #f0fdf4; border: 1px solid #bbf7d0; }
.import-result.error   { background: #fef5f5; border: 1px solid #fecaca; }
.import-result.info    { background: var(--color-primary-fd); border: 1px solid #b9e8e3; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3a — Assistant d'import et de réattribution des lectures TLD
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-panel--xl { width: 1320px; }

/* ── Fil d'étapes ───────────────────────────────────────────────────────── */
.wizard-steps {
  display: flex; gap: 0;
  padding: 0 20px; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.wizard-step {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px 10px;
  font-size: 13px; color: var(--color-text-3);
  border-bottom: 2px solid transparent;
}
.wizard-step.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.wizard-step.done   { color: var(--color-success); }
.wizard-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-2);
  font-size: 11px; font-weight: 700;
}
.wizard-step.active .wizard-step-num { background: var(--color-primary); color: #fff; }
.wizard-step.done   .wizard-step-num { background: var(--color-success); color: #fff; }

/* ── Synthèse compacte ──────────────────────────────────────────────────── */
.stats-strip--compact { grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 16px; }
.stats-strip--compact .stat-card { padding: 10px 12px; }
.stats-strip--compact .stat-value { font-size: 20px; }
.stats-strip--compact .stat-label { font-size: 11px; }

/* ── Bloc repliable ────────────────────────────────────────────────────── */
.bloc-repliable {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius); margin-bottom: 14px;
}
.bloc-repliable > summary {
  padding: 10px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--color-text-2);
}
.bloc-repliable > summary:hover { background: var(--color-bg); }
.bloc-repliable[open] > summary { border-bottom: 1px solid var(--color-border); }

/* ── Contrôles de session ───────────────────────────────────────────────── */
.controles-liste { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.controle-ligne { display: flex; gap: 12px; align-items: flex-start; }
.controle-libelle { font-size: 13px; font-weight: 600; }
/* Ce que la famille de dosimètres corrige. Souligné en couleur d'accent :
   c'est la ligne qui distingue deux bruits de fond d'apparence identique. */
.controle-role {
  font-size: 12px; color: var(--color-primary); margin: 1px 0 2px;
}
.controle-valeur  { font-size: 12px; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.controle-message { font-size: 12px; color: var(--color-text-3); }

.badge-verdict {
  flex-shrink: 0; min-width: 62px; text-align: center;
  padding: 3px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.badge-verdict--ok     { background: #f0fdf4; color: var(--color-success); }
.badge-verdict--alerte { background: #fef5f5; color: var(--color-danger); }
/* Une famille absente n'est pas une anomalie : un étalonnage lu séparément
   manque légitimement du fichier client. Le rouge ferait crier au défaut. */
.badge-verdict--absent { background: var(--color-bg); color: var(--color-text-3); }

/* ── Encarts de synthèse ────────────────────────────────────────────────── */
.encart {
  padding: 12px 14px; border-radius: var(--radius);
  margin-bottom: 14px; font-size: 13px;
  border: 1px solid var(--color-border); background: var(--color-surface);
}
.encart--succes    { background: #f0fdf4; border-color: #bbf7d0; }
.encart--attention { background: #fffbeb; border-color: #fde68a; }
.encart--danger    { background: #fef5f5; border-color: #fecaca; }
.liste-bilan { margin: 6px 0 0 18px; color: var(--color-text-2); }
.liste-bilan li { margin-top: 3px; }

.puces-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-code {
  display: inline-block; padding: 3px 9px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 20px; font-size: 12px;
  font-family: 'Courier New', monospace;
}

/* ── Filtres compacts ──────────────────────────────────────────────────── */
.filters-bar--compact { margin-bottom: 10px; }
.filters-bar--compact .select { width: auto; min-width: 180px; }
.inline-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; user-select: none;
}

/* ── Tableau dense des séries ──────────────────────────────────────────── */
.table-wrapper--scroll { max-height: 46vh; overflow: auto; }
.table--dense th { padding: 8px 10px; position: sticky; top: 0; z-index: 2; }
.table--dense td { padding: 6px 10px; font-size: 12px; }
.cellule-num { font-variant-numeric: tabular-nums; text-align: right; }

.input-sm, .select-sm { padding: 4px 8px; font-size: 12px; }
/* Code modifié par l'opérateur : l'écart avec le fichier lecteur doit sauter aux yeux */
.input--modifie {
  border-color: var(--color-warning); background: #fffbeb;
  font-weight: 600;
}
.select--vide { border-color: var(--color-danger); background: #fef5f5; }

.ligne-anomalie  > td { background: #fffdf5; }
.ligne-orpheline > td { background: #fef6f6; }
.ligne-exclue    > td { opacity: .45; text-decoration: line-through; }
.ligne-exclue    > td:first-child { opacity: 1; text-decoration: none; }

.mention-origine {
  font-size: 10px; color: var(--color-warning);
  margin-top: 2px; font-family: 'Courier New', monospace;
}
.mention-suggestion { font-size: 10px; color: var(--color-warning); margin-top: 2px; }

.valeur-alerte { color: var(--color-danger); font-weight: 700; }
.valeur-ok     { color: var(--color-text-2); }

.liste-anomalies { margin: 0; padding-left: 15px; font-size: 11px; color: var(--color-text-2); }
.liste-anomalies li { margin-bottom: 1px; }
.pastille-ok { font-size: 11px; color: var(--color-success); }

/* ── Détail d'une série : exclusion des lectures une à une ──────────────── */
.btn-deplier {
  width: 20px; height: 20px; padding: 0; margin-right: 4px;
  border: 1px solid var(--color-border); border-radius: 4px;
  background: var(--color-surface); cursor: pointer;
  /* Le chevron est un caractère : à 10 px il était illisible, et l'opérateur
     ne voyait pas qu'une série pouvait se déplier. */
  font-size: 13px; line-height: 1; color: var(--color-text-2);
}
.btn-deplier:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-deplier--ouvert { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── Administration ─────────────────────────────────────────────────────── */
.ligne-inactive td { opacity: .55; }
.ligne-refus td { background: #fdf3f3; }
.col-fonction { text-align: center; width: 128px; }
.cellule-actions { text-align: right; white-space: nowrap; }

/* Un mot de passe temporaire n'est affiché qu'une fois : il doit se relire
   et se recopier sans erreur possible. */
.mdp-temporaire {
  display: inline-block; padding: 8px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 17px; font-weight: 600; letter-spacing: 2px; user-select: all;
}

.ligne-attente {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 3px 0;
}
.ligne-attente + .ligne-attente { border-top: 1px solid #fecaca; margin-top: 4px; padding-top: 7px; }

.form-aide--refus { color: var(--color-danger); }

.ligne-detail > td { padding: 0 0 0 40px; background: var(--color-bg); }
.table-lectures { margin: 6px 0; background: var(--color-surface); }
.table-lectures td { padding: 5px 8px; border-top: 1px solid var(--color-border); }
.ligne-lecture--exclue td { opacity: .5; text-decoration: line-through; }
/* Le barré se propage aux descendants en flux et ne se lève pas par
   « text-decoration: none ». Seul un inline-block l'arrête — et c'est bien le
   motif que l'opérateur doit pouvoir lire sur une lecture écartée. */
.ligne-lecture--exclue .motif-exclusion {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
  opacity: 1; text-decoration: none;
}
.ligne-lecture--exclue .motif-exclusion .input { flex: 1 1 200px; }
/* Une lecture partie vers un autre dosimetre n'appartient plus a cette serie :
   elle reste affichee la ou le lecteur l'avait rangee, en retrait, pour que
   l'operateur retrouve ce qu'il a deplace. Le selecteur de destination, lui,
   garde sa pleine opacite. */
.ligne-lecture--deplacee td { opacity: .55; font-style: italic; }
.ligne-lecture--deplacee .select { opacity: 1; font-style: normal; }
.ligne-lecture-synthese td {
  background: var(--color-bg); font-size: 12px; border-top: 2px solid var(--color-border);
}
.motif-exclusion { display: flex; gap: 6px; text-decoration: none; }
.motif-exclusion .select-sm { max-width: 230px; }
.mention-ecarte { color: var(--color-text-3); font-weight: 400; }
.pastille-alerte {
  display: inline-block; padding: 1px 6px; margin-right: 4px;
  border-radius: 8px; font-size: 10px; font-weight: 600;
  background: #fef5f5; color: var(--color-danger);
}

/* ── Révision des lectures et étalonnage de l'essai ──────────────────────── */
/* .form-aide était jusqu'ici définie dans collecte.css seulement, alors que
   l'écran d'import s'en sert déjà. */
.form-aide { font-size: 12px; color: var(--color-text-3); margin-top: 6px; }

.sous-titre {
  margin: 20px 0 6px; font-size: 13px; font-weight: 600;
  color: var(--color-text-2); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--color-border); padding-bottom: 4px;
}

.revision-barre {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 12px 0 8px; font-size: 12px;
}

/* ── Conflit d'attribution : deux séries visant le même faisceau ─────────── */
.ligne-conflit > td { background: #fef5f5; }
.select--conflit { border-color: var(--color-danger); background: #fef5f5; }
.mention-conflit {
  font-size: 10px; font-weight: 600; color: var(--color-danger); margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3b — Définition des énergies de l'ordre de mission
   ═══════════════════════════════════════════════════════════════════════════ */

.bloc-tests-protocole { margin-top: 14px; }
.bloc-tests-protocole:first-child { margin-top: 8px; }
.bloc-tests-titre { font-size: 13px; font-weight: 600; margin-bottom: 8px; }

.grille-tests {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px;
}
/* Une carte par test : cocher ou décocher décide de la préparation du dosimètre */
.carte-test {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
  align-items: center;
  padding: 7px 10px; cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color .15s, opacity .15s;
}
.carte-test:hover { border-color: var(--color-primary); }
.carte-test--exclu { opacity: .45; background: var(--color-bg); }
.carte-test input { grid-row: span 2; }
.carte-test-code { font-size: 13px; font-weight: 700; }
.carte-test-intitule {
  grid-column: 2; font-size: 10px; color: var(--color-text-3);
  line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Barre d'actions collante ──────────────────────────────────────────── */
.form-actions--sticky {
  position: sticky; bottom: 0;
  margin-top: 16px; padding: 12px 0 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), var(--color-surface) 40%);
}

/* ── Utilitaires ────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-secondary { color: var(--color-text-2); }
.text-muted     { color: var(--color-text-3); }
.loading-text   { text-align: center; color: var(--color-text-3); padding: 40px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; font-size: 11px; font-weight: 700;
}
.badge-danger  { background: var(--color-danger); color: #fff; }
.badge-success { background: #f0fdf4; color: var(--color-success); }
.badge-warning { background: #fffbeb; color: var(--color-warning); }
code { font-family: 'Courier New', monospace; font-size: 12px; background: var(--color-bg); padding: 1px 5px; border-radius: 3px; }

/* Fiches clients : interlocuteurs, sites et appareils */
.client-card-corps { margin-top: 10px; font-size: 12px; line-height: 1.6; }

.encart-site {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px; margin-bottom: 12px;
}
.encart-site-entete {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; margin-bottom: 10px;
}

/* Un formulaire qui s'ouvre au sein d'une liste. Le fond le distingue de ce
   qui l'entoure, sans quoi on ne voit plus quelle ligne on modifie. */
.encart-formulaire {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px; margin: 12px 0;
}

.table-compact th, .table-compact td { padding: 6px 8px; font-size: 12px; }

.checkbox-ligne {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 13px;
}

.details-discret { margin-top: 14px; font-size: 12px; }
.details-discret summary { cursor: pointer; color: var(--color-text-3); }
.liste-simple { margin: 8px 0 0 18px; line-height: 1.8; }

/* Les deux réponses à l'ordre de mission. Le client peut être sur un
   téléphone : les boutons passent alors l'un sous l'autre, pleine largeur,
   pour qu'aucun ne se touche par erreur. */
.odm-choix { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.odm-choix .btn { flex: 1 1 220px; }

/* Le logo en tete de la page que le client ouvre depuis son courriel. Les
   attributs width et height de la balise portent les dimensions reelles du
   fichier, pour que la page ne sursaute pas pendant le chargement ; la
   hauteur ci-dessous les ramene a l'echelle de l'en-tete. */
.header-logo-img { height: 38px; width: auto; display: block; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .form-row { flex-direction: column; }
  .header-nav { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Facteurs correctifs — pendant de l'onglet protégé de LAB.do.Exploitation
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-panel--small { width: 440px; }
.page-header-actions { display: flex; gap: 8px; }

/* Bandeau d'état du verrou : rouge tant que c'est en lecture seule, ambre
   pendant la session d'édition pour que l'opérateur n'oublie pas qu'il écrit
   dans un paramètre métrologique. */
.verrou-bandeau {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: var(--radius);
  background: #f8fafc; border: 1px solid var(--color-border);
  color: var(--color-text-2); font-size: 13px;
}
.verrou-icone {
  flex: none; padding: 2px 8px; border-radius: 4px;
  background: var(--color-text-3); color: #fff;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.verrou-bandeau--ouvert { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.verrou-bandeau--ouvert .verrou-icone { background: var(--color-warning); }

.facteurs-groupe {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden;
}
.facteurs-groupe-titre {
  padding: 10px 16px; background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px; font-weight: 600;
}
.facteurs-groupe-formule {
  display: block; margin-top: 2px;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px; font-weight: 400; color: var(--color-text-3);
}
.facteurs-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px 18px; padding: 14px 16px;
}
.facteur-champ { display: flex; flex-direction: column; gap: 3px; }
.facteur-libelle { font-size: 12px; color: var(--color-text-2); }
.facteur-cellule { color: var(--color-text-3); font-size: 11px; }

/* Les coefficients se comparent chiffre à chiffre : chasse fixe obligatoire */
.facteur-valeur {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 13px; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 4px;
  background: #f8fafc; color: var(--color-text);
}
.facteur-valeur:disabled { cursor: not-allowed; }
.facteur-valeur:not(:disabled) {
  background: var(--color-surface); border-color: var(--color-border);
}
.facteur-valeur--modifie { border-color: var(--color-warning); background: #fffbeb; }

.facteurs-publication {
  background: var(--color-surface); border: 1px solid #fde68a;
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px;
}

.journal-entree {
  border-left: 3px solid var(--color-border);
  padding: 4px 0 12px 14px; margin-bottom: 12px;
}
.journal-entree-tete { font-size: 13px; font-weight: 600; }
.journal-entree-meta { font-size: 12px; color: var(--color-text-3); margin-bottom: 6px; }
.journal-diff {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px; background: #f8fafc; border-radius: 4px; padding: 8px 10px;
}
.journal-diff-avant { color: var(--color-danger); }
.journal-diff-apres { color: var(--color-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   Dossier de pièces de l'essai — onze intercalaires, dépôt par glisser-déposer
   ═══════════════════════════════════════════════════════════════════════════ */

.dossier-grille {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.dossier-inter {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; min-height: 104px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.dossier-inter:hover,
.dossier-inter:focus-visible { border-color: var(--color-primary); outline: none; }

/* Pendant le survol d'un fichier : la cible du dépôt doit être sans équivoque. */
.dossier-inter--survol {
  border-color: var(--color-primary); border-style: solid;
  background: var(--color-primary-fd);
}

/* Lecture seule : la carte reste consultable, mais n'invite pas au dépôt. */
.dossier-inter--fige { cursor: default; border-style: solid; }
.dossier-inter--fige:hover { border-color: var(--color-border); }

.dossier-inter-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.dossier-inter-titre { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.dossier-inter-compte {
  flex: none; min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: var(--color-bg); color: var(--color-text-3);
  font-size: 11px; text-align: center;
}

.dossier-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dossier-piece {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px;
}
.dossier-piece a {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dossier-piece-taille { flex: none; color: var(--color-text-3); font-size: 11px; }

.dossier-vide,
.dossier-consigne { margin: 0; font-size: 11.5px; color: var(--color-text-3); }
.dossier-consigne { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Essais archivés — consultation des dossiers antérieurs à LISA
   ═══════════════════════════════════════════════════════════════════════════ */

/* Une ligne signalée se repère sans se confondre avec une non-conformité :
   l'anomalie porte sur l'indexation, pas sur le résultat de l'essai. */
.archive-ligne--signalee { background: #fffbeb; }

.archive-alerte {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--color-danger);
}

.archive-pastilles { display: flex; flex-wrap: wrap; gap: 3px; max-width: 290px; }
.archive-pastille {
  padding: 1px 6px; border-radius: 10px; font-size: 10.5px; white-space: nowrap;
}
.archive-pastille--oui { background: #f0fdf4; color: var(--color-success); }
.archive-pastille--non { background: var(--color-bg); color: var(--color-text-3); }

.archive-infos {
  display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.archive-bloc { display: flex; flex-direction: column; gap: 2px; }
.archive-bloc-titre { font-size: 12px; color: var(--color-text-3); }
.archive-bloc .text-muted { font-size: 12px; }
.archive-chemin { font-size: 11.5px; overflow-wrap: anywhere; }

.archive-sous-titre {
  margin: 20px 0 8px; font-size: 13px; color: var(--color-text-3);
  text-transform: uppercase; letter-spacing: .5px;
}

.archive-groupes {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.archive-groupe {
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.archive-groupe-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 6px; font-size: 12.5px; font-weight: 600;
}
.archive-piece-alerte {
  margin: 2px 0 4px; font-size: 11px; color: var(--color-danger); list-style: none;
}
.archive-note {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--color-text-3);
}

/* ── Bloc pliable d'un formulaire ────────────────────────────────────────── */
/* Replie une partie facultative d'une fiche — l'entité de facturation d'un
   client, renseignée dans un cas sur dix. Dépliée d'office, elle ferait
   chercher l'essentiel plus bas. */
.pliable {
  margin: 8px 0 12px; padding: 8px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.pliable > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--color-text-2);
}
.pliable[open] > summary { margin-bottom: 8px; }

/* L'état de la signature électronique, sous la ligne de son contrat. En
   seconde ligne plutôt qu'en colonne : ce qu'il y a à dire varie beaucoup
   — rien, deux destinataires, un lien, un avertissement de simulation — et
   une colonne de largeur fixe aurait tronqué l'essentiel. Le fond la
   rattache visuellement à la ligne qu'elle commente, sans trait de
   séparation qui l'en aurait détachée. */
.ligne-signature > td {
  background: var(--color-bg); font-size: 12.5px;
  border-top: 0; padding-top: 2px; padding-bottom: 10px;
  line-height: 1.7;
}
.ligne-signature .btn { margin-top: 4px; }

/* ══ Prospection et communications ═════════════════════════════════════════
   Ne sont définies ici que les classes sans équivalent existant : les
   tableaux, les cartes de chiffres et les encarts de message réemploient
   celles des autres écrans. */

/* Case à cocher alignée avec son libellé, dans les barres de filtres et les
   formulaires. Sans le display:inline-flex, le libellé retombe sous la case
   dès que la fenêtre se resserre. */
.case-a-cocher {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .92rem; color: var(--color-text-2);
  white-space: nowrap; cursor: pointer;
}
.case-a-cocher input { margin: 0; cursor: pointer; }

/* La règle de calcul, sous un chiffre du tableau de bord. Un taux de
   réussite sans sa règle se lit de travers — celui-ci exclut les affaires
   en cours — et la note est donc petite, mais jamais absente. */
.stat-note {
  display: block; margin-top: 3px;
  font-size: .72rem; line-height: 1.3; color: var(--color-text-3);
}

/* Bandeau d'information, distinct du bandeau d'alerte : un nouveau client
   est une bonne nouvelle, et lui donner le rouge des dossiers en retard
   ferait fuir l'œil au lieu de l'attirer. */
.alertes-bar--info {
  background: var(--color-primary-fd);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.nouveau-client {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 5px 0; flex-wrap: wrap;
}
.nouveau-client + .nouveau-client { border-top: 1px solid var(--color-border); }

/* Le code d'appairage se dicte au téléphone : chiffres espacés et non
   proportionnels, pour qu'un 1 ne se confonde pas avec un 7 et qu'on ne
   perde pas sa place en lisant. */
.code-appairage {
  font-family: "Courier New", Consolas, monospace;
  font-size: 1.25em; letter-spacing: .22em;
  padding: 1px 8px; border-radius: var(--radius);
  background: var(--color-primary-fd); color: var(--color-primary-h);
  border: 1px solid var(--color-primary);
}

/* ══ Planning des essais ═══════════════════════════════════════════════════
   Une frise par dossier. Aucune de ces règles ne rend quoi que ce soit
   déplaçable à la souris : le planning montre l'état des dossiers, il ne
   les fait pas avancer.

   La distinction entre une barre relevée et une barre prévue est ce qui
   compte le plus ici, et elle ne repose pas sur la couleur. Prendre une
   prévision pour une date enregistrée fausserait la lecture d'un dossier
   qui relève de l'ISO/CEI 17025. */

.frise-cadre {
  padding: 10px 14px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  /* Les barres sont bornées à l'intervalle par le script : le débordement ne
     vient jamais d'elles, mais de la largeur minimale que les écrans étroits
     imposent à la frise — voir responsive.css. */
  overflow-x: auto;
}

/* La frise ne porte rien d'autre que sa largeur : c'est elle qui reçoit une
   largeur minimale sur écran étroit, pour que le cadre défile au lieu de
   comprimer les barres jusqu'à les confondre. */
.frise { min-width: 100%; }

.frise-entete,
.frise-ligne { display: flex; align-items: stretch; gap: 10px; }

.frise-entete {
  padding-bottom: 4px; margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-3);
}
.frise-entete .frise-piste { min-height: 18px; }

/* Colonne de largeur fixe. La référence, le client et l'état doivent
   s'aligner d'une ligne à l'autre, sinon la frise se lit en escalier. */
.frise-libelle {
  flex: 0 0 220px; width: 220px; min-width: 0;
  padding: 7px 0;
  font-size: .78rem; line-height: 1.35;
  color: var(--color-text);
  overflow: hidden;
}

/* La piste prend tout le reste. Son « position: relative » est ce qui donne
   un sens aux « left » et « width » en pourcentage que le script pose sur
   les barres : sans lui, elles se placeraient par rapport à la page. */
.frise-piste {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  min-height: 34px;
  border-left: 1px solid var(--color-border);
}

.frise-mois {
  position: absolute; top: 0; bottom: 0;
  padding-left: 4px;
  border-left: 1px dashed var(--color-border);
  white-space: nowrap;
}

/* La ligne entière ouvre la fiche du dossier : c'est le seul geste que le
   planning autorise, et il mène là où les dates se posent réellement. */
.frise-ligne {
  border-top: 1px solid var(--color-border);
  cursor: pointer;
}
.frise-ligne:hover { background: var(--color-primary-fd); }

/* ── Les barres ──────────────────────────────────────────────────────────── */

.frise-barre {
  position: absolute; top: 10px;
  height: 12px; min-width: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-text-3);
}

/* Les six phases reprennent les couleurs de statut du tableau de bord : le
   planning doit parler la même langue que lui, faute de quoi le même dossier
   changerait de teinte en changeant d'écran. */
.frise-barre--preparation  { background: var(--statut-odm); }
.frise-barre--acheminement { background: var(--statut-valise); }
/* Le séjour sur site est la même valise, mais chez le client : la teinte de
   la valise éclaircie, cerclée de la teinte pleine pour qu'elle reste
   reconnaissable là où color-mix n'est pas rendu. */
.frise-barre--sejour {
  background: var(--statut-valise);
  background: color-mix(in srgb, var(--statut-valise) 42%, var(--color-surface));
  border-color: var(--statut-valise);
}
.frise-barre--retour       { background: var(--statut-valise); }
.frise-barre--lecture      { background: var(--statut-lecture); }
.frise-barre--rapport      { background: var(--statut-rapport); }

/* Une barre prévue n'est pas une barre relevée, et trois signaux le disent à
   la fois : l'opacité, la hachure et le pointillé du contour. Trois plutôt
   qu'un, parce que la couleur seule ne survit ni à une impression en noir et
   blanc ni à un regard qui ne sépare pas les teintes, et qu'une projection
   lue comme une date enregistrée serait une faute d'enregistrement.
   Cette règle vient après celles des phases à dessein : elle ne pose que
   l'image de fond, que le raccourci « background » des phases effacerait si
   elle les précédait. */
.frise-barre.projetee {
  opacity: .5;
  border-style: dashed;
  border-color: var(--color-text-2);
  background-image: repeating-linear-gradient(45deg,
    var(--color-surface) 0, var(--color-surface) 3px,
    transparent 3px, transparent 7px);
}

/* ── La fenêtre de lecture ───────────────────────────────────────────────── */

/* Posée sous les barres, basse et en retrait : c'est une contrainte qui pèse
   sur l'essai, pas une phase qu'on exécute. Lui donner l'allure d'une phase
   ferait croire qu'il y a là quelque chose à faire. */
.frise-fenetre {
  position: absolute; bottom: 0;
  height: 5px; min-width: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-text-3);
  opacity: .55;
}
/* Fenêtre assise sur une irradiation seulement prévue : hachurée et
   pointillée comme les barres, pour la même raison. */
.frise-fenetre.projetee {
  opacity: .35;
  border-style: dashed;
  border-color: var(--color-text-3);
  background-image: repeating-linear-gradient(45deg,
    var(--color-surface) 0, var(--color-surface) 2px,
    transparent 2px, transparent 5px);
}

/* ── Les repères verticaux ───────────────────────────────────────────────── */

/* La date à laquelle le rapport est dû. Court et franc : c'est le seul délai
   que le laboratoire ait promis au client. */
.frise-echeance {
  position: absolute; top: 5px;
  width: 3px; height: 17px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--color-danger);
}

/* Le jour même, sur toute la hauteur de la ligne. Fin : il sert à situer, pas
   à alerter. */
.frise-aujourdhui {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: var(--color-primary);
  opacity: .65;
  pointer-events: none;
}

/* ── Navigation de période ───────────────────────────────────────────────────
   Deux flèches encadrant le libellé de la période, posées au-dessus de la
   frise. Elles changent ce que le serveur renvoie : ce ne sont pas des
   boutons de défilement, et c'est pourquoi elles sont espacées du cadre
   plutôt que collées à ses bords. Le libellé central est lui-même un bouton,
   qui ramène au mois en cours — le geste qu'on fait le plus souvent après
   s'être éloigné. */
.planning-navigation {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.planning-fleche {
  /* Un carré, pour que les deux flèches aient la même surface quelle que
     soit la longueur du libellé entre elles. */
  flex: none;
  width: 2.25rem; min-width: 2.25rem;
  font-size: 1.25rem; line-height: 1;
  padding: 0; height: 2.25rem;
}

.planning-periode {
  flex: 1 1 auto;
  font-weight: 600;
  /* La première lettre du mois arrive en minuscule de `toLocaleDateString`,
     et « octobre 2026 » en tête d'un bandeau se lit mieux capitalisé. */
  text-transform: capitalize;
}

/* L'avis qui dit que la frise a été recadrée par une recherche. Distinct de
   la légende : celle-ci explique la frise en général, celui-là explique
   pourquoi ce qu'on voit n'est pas la période demandée. */
.avis-planning {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 9px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: .82rem; color: var(--color-text-2);
}

/* ── Légende et réglages ─────────────────────────────────────────────────── */

/* La légende porte le sens des couleurs, mais aussi les délais
   d'organisation et les bornes métrologiques, écrits en clair. Sans elle, la
   frise serait un dessin dont personne ne saurait d'où viennent les dates. */
.planning-legende {
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: .82rem; color: var(--color-text-2);
}

.legende-cle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 16px 4px 0;
  white-space: nowrap;
}

/* ── Pilotage ────────────────────────────────────────────────────────────────
   Trois tableaux sous un même onglet, et des graphiques dessinés en SVG dans
   public/js/pilotage.js. Aucune bibliothèque de tracé n'est chargée : le
   serveur du laboratoire n'a pas d'accès à internet, et une feuille de style
   venue d'ailleurs manquerait sans rien dire.

   Les couleurs ne sont pas choisies ici : elles reprennent les variables déjà
   posées plus haut. Le prélèvement est au vert du succès parce que c'est
   l'objectif, l'affacturage au rouge parce que c'est ce dont on sort, et le
   secteur public au violet des valises parce qu'il n'est ni l'un ni l'autre —
   il est hors du jeu.                                                       */

/* ── Les sous-onglets ─────────────────────────────────────────────────────── */

/* Distincts de la barre de navigation : celle-ci change d'écran, ceux-ci
   changent de question à l'intérieur du même. D'où le soulignement plutôt
   qu'un fond plein, qui les aurait fait passer pour des onglets de premier
   rang. */
.sous-onglets {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--color-border);
}

.sous-onglet {
  padding: 8px 16px;
  border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--color-text-2);
  margin-bottom: -1px;
}
.sous-onglet:hover { color: var(--color-text); background: var(--color-bg); }
.sous-onglet:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: -2px;
}
.sous-onglet.actif {
  color: var(--color-primary); font-weight: 600;
  border-bottom-color: var(--color-primary);
  background: var(--color-primary-fd);
}

.vue-pilotage { display: block; }

/* ── La barre de période ──────────────────────────────────────────────────── */

.pilotage-periode-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
}

.pilotage-champ {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--color-text-2);
}
.pilotage-champ--large { flex: 1 1 220px; }
.pilotage-champ .input, .pilotage-champ .select { min-width: 150px; }

.pilotage-reglage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
}
.pilotage-reglage .form-aide { margin-top: 0; flex: 1 1 320px; }

.pilotage-titre-vue {
  font-size: 15px; font-weight: 600;
  margin: 0 0 12px;
}

/* ── Les blocs ────────────────────────────────────────────────────────────── */

.pilotage-bloc {
  margin-bottom: 16px; padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pilotage-bloc-tete {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}

.pilotage-bloc-titre {
  font-size: 13.5px; font-weight: 600; margin: 0 0 10px;
}
.pilotage-bloc-tete .pilotage-bloc-titre { margin-bottom: 0; flex: 1 1 260px; }

/* Les réserves sont au-dessus du graphique, jamais en note de bas de page :
   un chiffre d'affaires estimé dont la réserve demande de faire défiler
   l'écran se lit comme un chiffre d'affaires facturé. */
.pilotage-reserves { margin-bottom: 16px; }
.pilotage-reserves .liste-bilan { margin-top: 6px; }

.stats-strip--serree {
  flex: 1 1 420px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-bottom: 0;
}

/* ── Le chiffre qu'on vient voir ──────────────────────────────────────────── */

.pilotage-vedette-rangee {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}

.pilotage-vedette {
  flex: 1 1 260px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

/* Le même indicateur calculé sur tout le monde. Volontairement effacé : il
   n'est là que pour montrer l'écart que fait le secteur public, et lui donner
   la même force que le taux de référence inviterait à le citer à sa place. */
.pilotage-vedette--second {
  border-left-color: var(--color-text-3);
  background: var(--color-bg);
}
.pilotage-vedette--second .pilotage-vedette-valeur { color: var(--color-text-3); }

.pilotage-vedette-valeur {
  font-size: 46px; font-weight: 700; line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.pilotage-vedette-libelle {
  margin-top: 6px; font-size: 13px; font-weight: 600;
}
.pilotage-vedette-note {
  margin-top: 6px; font-size: 11.5px; line-height: 1.5;
  color: var(--color-text-2);
}

/* ── Les graphiques ───────────────────────────────────────────────────────── */

/* Le SVG porte son viewBox et s'étire à la largeur disponible. Sur écran
   étroit il défile plutôt que de se tasser : deux mois comprimés à trois
   pixels ne se distinguent plus l'un de l'autre. */
.pilotage-graphe { overflow-x: auto; }

.graphe {
  display: block;
  width: 100%; min-width: 620px; height: auto;
}

.pilotage-graphe-vide {
  padding: 30px; text-align: center;
}

.graphe-grille { stroke: var(--color-border); stroke-width: 1; }
.graphe-axe    { stroke: var(--color-text-3); stroke-width: 1; }

.graphe-graduation {
  fill: var(--color-text-3); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.graphe-nom-axe {
  fill: var(--color-text-2); font-size: 11px; font-weight: 600;
}

.graphe-barre { fill: var(--color-primary); }
/* La part venue des clients acquis cette année, posée au pied de la barre :
   c'est le rendement de la conquête, et on le lit depuis le sol. */
.graphe-barre--nouveaux     { fill: var(--statut-valise); }
.graphe-barre--clients      { fill: var(--color-primary); }
.graphe-barre--prospects    { fill: var(--color-warning); }
.graphe-barre--acategoriser { fill: var(--color-text-3); }

.graphe-courbe {
  fill: none; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.graphe-courbe--ca     { stroke: var(--color-warning); }
.graphe-courbe--essais { stroke: var(--color-text); stroke-dasharray: 5 3; }
.graphe-courbe--part   { stroke: var(--ardoise-700); }
.graphe-courbe--taux   { stroke: var(--color-success); stroke-width: 2.5; }

.graphe-point { stroke: var(--color-surface); stroke-width: 1; }
.graphe-point--ca     { fill: var(--color-warning); }
.graphe-point--essais { fill: var(--color-text); }
.graphe-point--part   { fill: var(--ardoise-700); }
.graphe-point--taux   { fill: var(--color-success); }

/* Les aires sont translucides : empilées, elles doivent laisser voir la
   courbe du taux qui les traverse. */
.graphe-aire { opacity: .82; }
.graphe-aire--factor          { fill: var(--color-danger); }
.graphe-aire--virement_chorus { fill: var(--statut-valise); }
.graphe-aire--virement        { fill: var(--color-warning); }
.graphe-aire--prelevement     { fill: var(--color-success); }

/* Une bande invisible par mois, posée en dernier : elle porte l'infobulle du
   mois entier, là où viser une aire de deux pixels serait impossible. */
.graphe-survol { fill: transparent; }

.pilotage-legende {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11.5px; color: var(--color-text-2);
}
.pilotage-legende-cle {
  display: inline-flex; align-items: center; gap: 6px;
}

.pilotage-pastille-couleur {
  display: inline-block; flex: none;
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--color-text-3);
  vertical-align: -1px;
}
.graphe-pastille--faisceaux    { background: var(--color-primary); }
.graphe-pastille--nouveaux     { background: var(--statut-valise); }
.graphe-pastille--essais       { background: var(--color-text); }
.graphe-pastille--ca           { background: var(--color-warning); }
.graphe-pastille--clients      { background: var(--color-primary); }
.graphe-pastille--prospects    { background: var(--color-warning); }
.graphe-pastille--acategoriser { background: var(--color-text-3); }
.graphe-pastille--part         { background: var(--ardoise-700); }
.graphe-pastille--taux         { background: var(--color-success); }
.graphe-pastille--factor          { background: var(--color-danger); }
.graphe-pastille--virement_chorus { background: var(--statut-valise); }
.graphe-pastille--virement        { background: var(--color-warning); }
.graphe-pastille--prelevement     { background: var(--color-success); }

/* ── La barre de répartition ──────────────────────────────────────────────── */

/* Les quatre modes dans l'ordre où on veut les lire : de celui qu'on quitte à
   celui qu'on vise. L'ordre est posé par le service, pas par cette feuille —
   ici on ne fait que ne pas le bousculer. */
.pilotage-repartition {
  display: flex; width: 100%; height: 30px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}

.pilotage-part {
  display: flex; align-items: center; justify-content: center;
  min-width: 2px;
  font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap;
}
.pilotage-part--factor          { background: var(--color-danger); }
.pilotage-part--virement_chorus { background: var(--statut-valise); }
.pilotage-part--virement        { background: var(--color-warning); }
.pilotage-part--prelevement     { background: var(--color-success); }
/* Les fiches sans mode ne comptent dans aucune colonne : hachurées, pour
   qu'on ne les prenne pas pour un cinquième mode. */
.pilotage-part--sans {
  background: repeating-linear-gradient(45deg,
    var(--color-border) 0, var(--color-border) 4px,
    var(--color-bg) 4px, var(--color-bg) 8px);
}

/* ── Les pastilles de secteur et d'étape ──────────────────────────────────── */

.pastille-secteur {
  display: inline-block; padding: 2px 8px;
  border: 1px solid transparent; border-radius: 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pastille-secteur--public  { background: #f5f3ff; color: var(--statut-valise); }
.pastille-secteur--prive   { background: var(--color-primary-fd); color: var(--color-primary-h); }
.pastille-secteur--inconnu { background: var(--color-bg); color: var(--color-text-3); }
/* Un secteur seulement supposé d'après le nom. Le pointillé le dit sans
   couleur : c'est lui qui décide si la fiche entre au dénominateur du taux,
   et un taux calculé sur des suppositions doit se savoir. */
.pastille-secteur--suppose {
  border-style: dashed; border-color: var(--color-warning);
}

.pastille-etape {
  display: inline-block; padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
}
.pastille-etape--faire   { background: var(--color-primary-fd); color: var(--color-primary-h); }
.pastille-etape--attente { background: #fffbeb; color: var(--color-warning); }
.pastille-etape--fait    { background: #f0fdf4; color: var(--color-success); }
.pastille-etape--hors    { background: var(--color-bg); color: var(--color-text-3); }
.pastille-etape--alerte  { background: #fef5f5; color: var(--color-danger); }
.pastille-etape--neuf    { background: #f5f3ff; color: var(--statut-valise); }

.pilotage-iban {
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}

/* ── La pose d'un mode ────────────────────────────────────────────────────── */

/* Dépliée sous la ligne concernée plutôt que dans une fenêtre : on garde
   sous les yeux la fiche qu'on corrige, son secteur et son étape. */
.pilotage-edition { background: var(--color-bg); }
/* Le fond d'une cellule l'emporte sur celui de sa ligne : sans cette
   seconde règle, le formulaire garderait le blanc du tableau et ne se
   rattacherait visuellement à aucune fiche. */
.pilotage-edition > td { background: var(--color-bg); border-top: 0; }

.pilotage-edition-corps {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
}

.pilotage-select-secteur { max-width: 110px; margin-right: 6px; }

/* ── Pilotage : les fiches qui se démentent ───────────────────────────────── */

/* La contradiction ne se distingue pas par sa seule couleur. Le libellé la
   nomme et le trait plein la tient à l'impression en noir, de sorte qu'une
   feuille posée sur un bureau dise encore laquelle des lignes est fausse. */
.pastille-etape--contradiction {
  background: #fef5f5; color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

/* Portée par l'indicateur lui-même, et non renvoyée en bas de page : un taux
   lu sans sa réserve est repris comme s'il était sûr, et c'est ainsi qu'un
   chiffre faux entre dans une réunion. */
.pilotage-vedette--douteuse { border-left-color: var(--color-danger); }

.pilotage-vedette-alerte {
  margin-top: 8px; padding: 6px 9px;
  border-left: 3px solid var(--color-danger);
  background: #fef5f5;
  font-size: 11.5px; line-height: 1.5;
  color: var(--color-danger);
}

.pilotage-contradictions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Remise au client — formulaire de collecte, bandeau des corrections,
   documents remis.

   Ajouté en FIN de fichier, sans rien réécrire au-dessus : `main.css` porte
   des caractères accentués abîmés qu'une réécriture intégrale détruirait.

   Ce fichier est le fragment ajouté, conservé à part pour qu'on puisse
   relire ce qui a été ajouté sans relire les quatre mille lignes de
   `main.css`. Il n'est chargé par aucune page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le bloc où le client valide l'envoi à CIBIO. Encadré et détaché du reste :
   c'est un acte, pas un champ de plus. */
.collecte-validation {
  margin: 0 0 16px;
  padding: 16px;
  border: 2px solid #29cdb8;
  border-radius: 8px;
  background: #f7fdfc;
}
.collecte-validation-case {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #dfe6e9;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
.collecte-validation-case input { margin-top: 2px; flex: 0 0 auto; }

/* Le retour de l'envoi. Jamais une alerte du navigateur : elle disparaît au
   clic et ne laisse rien à relire. */
.collecte-envoi-retour {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.55;
}
.collecte-envoi-retour--ok {
  background: #e8f9f5; border-left: 4px solid #0f8b80; color: #134e4a;
}
.collecte-envoi-retour--refus {
  background: #fdecec; border-left: 4px solid #c0392b; color: #7b241c;
}

/* Bandeau des collectes reçues et corrigées, calqué sur #nouveaux-clients-bar. */
#collectes-recues-bar {
  display: none;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #eef8ff;
  border-left: 4px solid #1b7fb8;
  font-size: 13px;
  line-height: 1.55;
}
#collectes-recues-bar.visible { display: block; }
#collectes-recues-bar .collecte-recue-ligne {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid #d5e8f5;
}
#collectes-recues-bar .collecte-recue-ligne:first-of-type { border-top: 0; }
#collectes-recues-bar .collecte-recue-changements {
  color: #4a5c66; font-size: 12px;
}

/* La liste des documents remis, dans l'espace client comme au laboratoire. */
.documents { list-style: none; margin: 8px 0 0; padding: 0; }
.documents li { padding: 6px 0; border-top: 1px solid #eef2f3; }
.documents li:first-child { border-top: 0; }

/* Les tentatives de remise d'un rapport : ce qui est parti, ce qui a échoué. */
.remises { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.remises li { padding: 7px 0; border-top: 1px solid #eef2f3; }
.remises li:first-child { border-top: 0; }
.remises .remise-echec { color: #7b241c; }
.remises .remise-ok { color: #134e4a; }

/* ═══════════════════════════════════════════════════════════════════════════
   Suivi de la valise — et l'asymétrie délibérée entre l'aller et le retour

   Les deux trajets ne portent pas le même risque : une valise perdue à
   l'aller se refait, une valise perdue au retour emporte les dosimètres
   irradiés et l'essai avec. L'écran le montre au lieu de le dire — liseré
   neutre à l'aller, liseré coloré au retour, fond d'alerte réservé au retour.
   Égaliser les deux cartes « pour la symétrie » reviendrait à effacer le
   seul endroit où cette différence se voit.                                 */

.expedition-trajets { display: grid; gap: 12px; margin: 10px 0 4px; }

.expedition-trajet {
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* L'aller reste sobre : son incident se rattrape en regarnissant une valise. */
.expedition-trajet--aller  { border-left-color: var(--color-border); }
/* Le retour est toujours signalé, même quand tout va bien : c'est lui qui
   porte la mesure, et on doit le trouver sans le chercher. */
.expedition-trajet--retour { border-left-color: var(--color-primary); }
/* Réservé au retour. Voir `aRisque()` dans public/js/expedition.js. */
.expedition-trajet--souffrance {
  border-left-color: var(--color-danger);
  border-color: #fecaca; background: #fef5f5;
}

.expedition-trajet-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.expedition-trajet-titre { font-size: 13px; font-weight: 600; }
.expedition-trajet-tenu {
  font-size: 11.5px; color: var(--color-text-3);
  margin: 2px 0 8px; line-height: 1.45;
}
.expedition-vide { font-size: 12.5px; color: var(--color-text-3); margin: 6px 0; }

.expedition-faits {
  display: grid; grid-template-columns: auto 1fr;
  gap: 3px 12px; margin: 0; font-size: 12.5px;
}
.expedition-faits dt { color: var(--color-text-3); white-space: nowrap; }
.expedition-faits dd { margin: 0; }

.expedition-evenements {
  list-style: none; margin: 8px 0 0; padding: 8px 0 0;
  border-top: 1px solid var(--color-border);
  font-size: 11.5px; display: grid; gap: 3px;
}
.expedition-evenement { display: flex; gap: 10px; align-items: baseline; }
.expedition-evenement-date {
  flex: none; color: var(--color-text-3); font-variant-numeric: tabular-nums;
}

.expedition-gestes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.expedition-saisie { margin-top: 8px; }
.expedition-saisie-ligne { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.expedition-saisie-ligne .input { max-width: 280px; }

/* La proposition de date est écartée des cartes et ne porte aucun bouton :
   le geste qui pose la date vit en bas de la fiche, et il doit rester loin. */
.expedition-proposition { margin-top: 14px; }

@media (max-width: 720px) {
  .expedition-faits { grid-template-columns: 1fr; gap: 0 0; }
  .expedition-faits dt { margin-top: 6px; }
}

/* ── Réception du courrier, dans la section Messagerie ─────────────────── */
/*
   Un filet entre les réglages d'ENVOI et ceux de RÉCEPTION. Ce sont deux
   serveurs différents, deux ports différents et surtout deux mots de passe
   différents : les empiler sans rupture visuelle est l'erreur de saisie la
   plus facile à provoquer dans cet écran. */
.separateur-reglages {
  border: 0;
  border-top: 1px solid var(--color-border, #e3e7ea);
  margin: 28px 0 18px;
}

/* ─── Lot 63 — Qui voit quoi, dit à l'écran (ACQ.pro.GestSI § 5.3.1) ─────── */
/*
   L'ajout se fait en fin de fichier, et rien n'est réécrit au-dessus : ce
   fichier porte des caractères abîmés d'un ancien enregistrement, qu'une
   réécriture intégrale remplacerait sans que rien ne le signale. */

/* L'encart d'accès, en tête du contenu d'un répertoire. Il dit l'état avant
   de proposer le bouton : on ne réserve pas une branche sans avoir lu ce
   qu'elle est aujourd'hui. */
.doc-acces {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  border: 1px solid var(--color-border, #d8e0e8); border-left: 4px solid #94a3b8;
  border-radius: 6px; background: #f8fafc;
  padding: 10px 14px; margin-bottom: 12px;
}
.doc-acces-etat { font-size: 13px; color: #334155; flex: 1 1 320px; }
.doc-acces-etat code {
  background: #e2e8f0; border-radius: 3px; padding: 0 4px; font-size: 12px;
}
.doc-acces-action { flex: 0 0 auto; }

/* Hérité n'est pas posé ici, et la couleur seule ne suffirait pas à le dire :
   l'étiquette porte le mot. Qui lit « réservé » sur un répertoire qui ne
   porte rien croirait pouvoir rouvrir la branche en décochant ici. */
.doc-marque-reserve.doc-marque-reserve--heritee {
  background: #fff7ed; color: #9a3412; border-color: #fdba74;
  font-style: italic;
}

/* Des cases à cocher, et non une liste à choix multiple : on doit voir d'un
   coup d'œil ce qui est coché, sans défiler ni tenir une touche enfoncée. */
.doc-cases {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--color-border, #d8e0e8); border-radius: 6px;
  padding: 8px 10px; margin: 8px 0 10px; background: #fff;
}
.doc-case {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.doc-case:hover { background: #f1f5f9; }
.doc-case input { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }

/* ── La barre de recherche de la GED (lot 67) ──────────────────────────────
   Ajout en fin de fichier : main.css porte des caractères abîmés d'un ancien
   enregistrement, et se réécrire en entier les perdrait. */
.doc-recherche {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  background: #f8fafc; border: 1px solid var(--color-border, #e3e7ea);
  border-radius: 8px;
}
.doc-recherche label { font-size: 13px; font-weight: 600; color: #334155; }
.doc-recherche input[type="search"] {
  flex: 1 1 320px; min-width: 200px;
  padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--color-border-champ, #7c90a9); border-radius: 6px;
}
/* La règle de recherche prend toute la largeur sous les champs : à côté
   d'eux, elle serait lue comme une étiquette et non comme une explication. */
.doc-recherche-regle {
  flex: 1 1 100%; margin: 2px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--color-text-3-aplat);
}
.doc-recherche-regle code {
  background: #e8eef4; border-radius: 3px; padding: 1px 4px; font-size: 11px;
}
.doc-recherche-bilan { margin: 0 0 12px; font-size: 13px; }
/* Le chemin complet, en petit et sans retour à la ligne forcé : c'est lui
   qui distingue deux révisions du même document rangées à deux endroits. */
.doc-resultat-chemin { font-size: 12px; color: #475569; word-break: break-word; }
/* ── Le périmètre de la recherche : les racines à cocher (lot 70) ─────────
   Ajout en fin de fichier, comme le bloc du lot 67. */
.doc-racines { flex: 1 1 100%; margin: 4px 0 0; }
.doc-racines-tete {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;
}
/* Des colonnes plutôt qu une ligne qui déborde : quatorze racines mises
   bout à bout passent sous le pli et personne ne les coche. */
.doc-racines-liste {
  display: grid; gap: 2px 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.doc-racine {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 5px; border-radius: 4px; cursor: pointer;
  font-size: 12px; color: #334155;
}
.doc-racine:hover { background: #eef2f7; }
.doc-racine input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
.doc-racine span:first-of-type { flex: 1 1 auto; word-break: break-word; }
.doc-racine-compte { color: var(--color-text-3-aplat); font-variant-numeric: tabular-nums; }
/* Les dépôts de périmés se repèrent sans lire : décochés au départ, et
   écrits autrement une fois cochés. */
.doc-racine--perime span:first-of-type { color: #b45309; font-style: italic; }
.doc-racines-note, .doc-racines-alerte {
  margin: 7px 0 0; font-size: 12px; line-height: 1.5;
}
.doc-racines-note { color: #64748b; }
.doc-racines-alerte {
  color: #92400e; background: #fffbeb; border-left: 3px solid #f59e0b;
  padding: 7px 10px; border-radius: 0 4px 4px 0;
}

/* ── Accès à l'espace client, dans la fiche client ─────────────────────────
   Ajouté en fin de fichier : rien n'est réécrit au-dessus. */
.case-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; font-size: 13px; cursor: pointer;
}
.case-ligne input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }

/* Le jeton d'invitation ne s'affiche qu'une fois, et ne peut pas être relu :
   l'encart se distingue de l'ordinaire pour qu'on ne ferme pas la fiche
   sans l'avoir transmis. */
.encart-invitation { border-left: 3px solid var(--color-success); }
.invitation-jeton {
  display: block; margin: 8px 0; padding: 9px 11px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 4px; font-size: 12px; line-height: 1.5;
  word-break: break-all; user-select: all;
  font-variant-numeric: tabular-nums;
}

/* Boutons d'option de la boîte de Lisa : vers un écran du CRM.
   Un bouton qui conduit à un écran où l'on peut MODIFIER ne doit pas
   ressembler à un bouton qui répond à une question — c'est la seule
   différence que l'œil doit saisir avant de cliquer. La garde, elle, n'est
   pas là : elle est dans le code, qui n'offre aucun chemin d'action au
   modèle (voir public/js/lisa.js, fonction ouvrirEcran). */
.lisa-option[data-ouvre="ecran"]::after {
  content: ' \2197';
  opacity: .65;
}
.lisa-option[data-ecrit="oui"] {
  border-left: 3px solid var(--color-warning, #b8860b);
}