/* ═══════════════════════════════════════════════════════════════════════════
   LISA LAB — L'onglet des courriels reçus

   Chargée après main.css, responsive.css et finitions.css, dont elle ne
   reprend RIEN. Les variables de couleur, de rayon et d'ombre restent celles
   de main.css : rien n'est redéclaré ici, pour qu'un changement de teinte
   continue de n'avoir qu'un seul endroit.

   ── Pourquoi un fichier à part, et pourquoi pas dans main.css ─────────────
   main.css est encodé en Windows-1252 et porte un mojibake ancien dans ses
   séparateurs de commentaires : toute réécriture globale l'abîmerait un peu
   plus. Celui-ci est en UTF-8 propre, et il ne contient que ce qui manquait à
   cet écran.

   ── Ce que cette feuille répare, et qui n'était pas qu'une question de goût ─
   L'écran peignait sa liste avec `class="data-table"`. CETTE CLASSE N'EXISTE
   DANS AUCUNE FEUILLE DU PROJET. Le tableau sortait donc sans filets, sans
   fond d'en-tête, sans survol de ligne et sans aucun des réglages que les
   autres écrans reçoivent de `.table` — il était nu. C'est l'essentiel de ce
   que le propriétaire a appelé « austère », et la réparation consiste à
   reprendre les classes de la maison : `.table`, `.table--dense`,
   `.table-wrapper`, `.badge-verdict`, `.encart`, `.btn`. Ce qui suit ne fait
   que ce que ces classes ne savent pas faire.

   Les chiffres restent alignés (`.table td` porte `tabular-nums` depuis
   finitions.css), le focus clavier reste visible, le mouvement réduit reste
   respecté, et la feuille d'impression continue de s'appliquer : aucune règle
   d'ici ne les défait.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── L'en-tête de l'onglet ─────────────────────────────────────────────────
   Trois encadrés se superposaient au-dessus de la liste : qui venait voir son
   courrier lisait d'abord trois murs. Il reste une phrase en clair et des
   plis ; d'où un en-tête qui tient en deux lignes au repos.              */
.cr-entete { margin: 0 0 12px; }

.cr-entete-ligne {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-2);
}

/* ── Le pli ────────────────────────────────────────────────────────────────
   Un `summary` qui se lit comme une ligne de texte, pas comme un bouton :
   ces plis portent des explications, et un bouton appellerait le clic.

   Le chevron natif est conservé (`list-style` par défaut) : c'est la seule
   marque que le navigateur donne gratuitement, elle tourne à l'ouverture, et
   elle survit au mode contrasté comme à l'impression.                     */
.cr-pli {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-2);
}

.cr-pli > summary {
  cursor: pointer;
  padding: 5px 0;
  color: var(--color-text-2);
  /* Le libellé d'un pli ne se met pas en gras : il doit peser MOINS que la
     liste qu'il surmonte, sans quoi on a seulement remplacé un mur par un
     titre de mur. */
  font-weight: 400;
}

.cr-pli > summary:hover { color: var(--color-text); }

.cr-pli-corps {
  padding: 2px 0 8px 14px;
  border-left: 2px solid var(--color-border);
  margin-left: 2px;
}

.cr-pli-corps p { margin: 0 0 7px; }
.cr-pli-corps p:last-child { margin-bottom: 0; }

/* Trois nuances de pli, et elles ne sont PAS décoratives : elles disent de
   quelle nature est ce qu'on replie. L'état courant du service, une règle qui
   explique une absence, un rappel de ce que le CRM n'a pas fait. */
.cr-pli--etat > summary   { color: var(--color-text); }
.cr-pli--marque > summary { color: var(--color-warning); }
.cr-pli--rappel {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* ── La phrase des suggestions ─────────────────────────────────────────────
   Composée par le serveur, pas par la page. Elle est au-dessus du tableau
   parce qu'elle explique une colonne du tableau, et discrète parce qu'elle se
   lit une fois.                                                           */
.cr-suggestions-dit {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-3);
}

/* ══ La liste ════════════════════════════════════════════════════════════ */

/* `table-layout: fixed` et des largeurs nommées : sans cela, un objet de
   courriel de deux cents caractères écrase les six autres colonnes, et la
   liste change de forme à chaque relève. La densité d'information est ce
   qu'on vient chercher ici — elle ne doit pas dépendre du contenu reçu. */
.cr-table { table-layout: fixed; width: 100%; }

.cr-table th { vertical-align: bottom; }
.cr-table td { vertical-align: top; }

/* ── Ce que l'objet a pris aux autres, et à qui ───────────────────────────
   « Tu dois aussi élargir le champ objet. » L'objet et son résumé sont ce
   qu'on vient lire ici ; ils tenaient sur 854 pixels de colonnes fixes, et
   il leur en reste 90 de plus, pris à DEUX voisines et à aucune autre :
     · les ACTIONS passent de 250 à 190. Elles n'y perdent rien de lisible :
       trois pastilles au plus y sont peintes, elles s'enroulent déjà
       (`.cr-chips` est en `flex-wrap`), et le reste vit sous un dépli ;
     · « Rattaché à » passe de 160 à 130. Elle ne porte qu'un nom de fiche,
       qui se coupe proprement (`word-break: break-word`), ou un « — ».
   La date, l'expéditeur et l'état ne sont PAS touchés : la date est en
   `nowrap` et se tronquerait, l'expéditeur porte deux adresses complètes, et
   l'état porte désormais la mention « hors activité labo » du lot 76.    */
.cr-col-case { width: 30px; }
.cr-date     { width: 120px; white-space: nowrap; color: var(--color-text-3); }
.cr-de       { width: 190px; }
.cr-rattache { width: 130px; }
.cr-etat     { width: 104px; }
.cr-actions  { width: 190px; }

/* La ligne ne porte plus de `cursor: pointer` sur toute sa surface : elle
   n'est plus cliquable en entier. Voir `.cr-ouvre`. */
.cr-ligne:hover > td { background: var(--color-bg); }

/* ── La zone qui OUVRE le courriel ────────────────────────────────────────
   Marquée, et marquée par autre chose qu'une couleur : le curseur, et le
   soulignement de l'objet au survol. L'anneau de focus clavier lui vient de
   finitions.css, par `[tabindex]:not([tabindex="-1"]):focus-visible`.    */
.cr-ouvre { cursor: pointer; }
.cr-ouvre:hover .cr-objet { text-decoration: underline; }

/* ── De, et par où c'est entré ────────────────────────────────────────────
   L'adresse est du texte d'expéditeur : chasse fixe, comme le corps du
   message. La chasse fixe n'est pas un style ici, c'est un registre — elle
   dit « ceci a été écrit par quelqu'un d'autre ».                        */
.cr-adresse {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11.5px;
  word-break: break-all;
}

.cr-entree {
  font-size: 11px;
  color: var(--color-text-3);
  margin-top: 2px;
  word-break: break-all;
}

/* « fournisseur ». Sous l'adresse, et de la même encre discrète que
   « hors activité labo » : ces deux mentions ont la même nature — elles
   expliquent la ligne, elles ne réclament rien. Celle-ci n'est PAS en
   italique, et c'est la différence qui compte dans cet écran : l'italique y
   marque partout ce que le laboratoire n'a pas établi, et la qualité de
   fournisseur, elle, est établie — elle est lue dans les réglages du
   laboratoire, pas devinée sur le message.                              */
.cr-fournisseur {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text-3);
  font-size: 10.5px;
  line-height: 1.5;
}

/* ── L'objet, et ce que le résumé en dit ──────────────────────────────────  */
.cr-sujet { min-width: 0; }

.cr-objet {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  /* Deux lignes au plus. Un objet-fleuve ne doit pas faire une ligne de
     tableau de six centimètres de haut : la liste sert à balayer. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* L'étiquette de finalité : ce que la lecture croit reconnaître. Italique,
   parce que l'italique est dans tout cet écran la marque de ce que le
   laboratoire n'a PAS établi. Elle est tenue partout, y compris ici. */
.cr-etiquette {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  background: var(--color-primary-fd);
  color: var(--color-primary-h);
  font-style: italic;
  font-size: 11px;
  font-weight: 500;
}

/* Le résumé de la lecture, SUR LA LIGNE. C'est la demande du propriétaire :
   l'interprétation du courriel se lit sans déplier et sans ouvrir. */
.cr-apercu {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-text-2);
}

/* « Résumé — », en tête, qui dit d'où vient la phrase qui suit. Droit, et
   non italique : la mention est un fait, c'est son contenu qui est une
   hypothèse. */
.cr-apercu-source {
  color: var(--color-primary-h);
  font-size: 10.5px;
  font-style: normal;
  margin-right: 3px;
}

.cr-apercu-texte { font-style: italic; }

/* Pièces et marques : des faits annexes, et la marque n'est PAS en rouge.
   Le rouge est réservé à ce qui est en panne ; un courriel porteur d'une
   marque n'est pas une panne, c'est un courriel à lire calmement. */
.cr-marges { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }

.cr-marge, .cr-marque {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  border: 1px solid var(--color-border);
  color: var(--color-text-3);
}

.cr-marque {
  border-color: #fde68a;
  background: #fffbeb;
  color: var(--color-warning);
}

/* ── Rattaché à, et traitement ────────────────────────────────────────────  */
.cr-lien {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-text);
  word-break: break-word;
}

/* « — » pour « rien », « ? » pour « je n'ai pas pu savoir ». Les deux ne se
   confondent pas, et c'est la seule raison pour laquelle ils ont deux
   classes. */
.cr-rien    { color: var(--color-text-3); }
.cr-inconnu { color: var(--color-warning); font-weight: 700; }

.cr-etat-detail {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--color-text-3);
}

/* « hors activité labo ». GRISE, et c'est tout le propos.
   Ni rouge ni orange : le rouge dit « en panne » et l'orange dit « attention,
   regardez-moi ». Ce message-ci ne demande rien et n'alerte de rien — il dit
   que le laboratoire a décidé que le sujet n'était pas le sien. Une mention
   qui s'efface du regard est exactement ce qu'on veut : elle explique la
   ligne sans la réclamer.
   Elle n'est pas un `.badge-verdict` : un verdict porte sur le traitement, et
   celle-ci porte sur le SUJET. Les deux peuvent se lire sur la même ligne —
   un message hors activité peut être marqué traité — et deux pastilles du
   même dessin s'y liraient comme une contradiction. */
.cr-hors-activite {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text-3);
  font-size: 10.5px;
  line-height: 1.5;
  font-style: italic;
}

/* ══ La zone d'ACTION ════════════════════════════════════════════════════ */

/* Elle n'ouvre jamais le courriel : son `click` est arrêté en JavaScript.
   Ici, on dit seulement qu'elle n'a pas le curseur de la zone de lecture —
   une main sur une cellule qui n'ouvre rien serait un mensonge. */
.cr-actions { cursor: default; }

.cr-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* La pastille. Dérivée de `.btn` par la taille, pas par la couleur : trois
   pastilles par ligne sur quarante lignes font cent vingt boutons, et cent
   vingt boutons colorés font un écran illisible. */
.cr-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: 11px;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
}

.cr-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-h);
}

/* Ce que la lecture met en avant. La distinction ne tient PAS à la seule
   teinte : la pastille suggérée est pleine, les autres sont creuses — un
   écart de remplissage se voit d'un œil daltonien et en niveaux de gris. */
.cr-chip--suggeree {
  background: var(--color-primary-fd);
  border-color: var(--color-primary);
  color: var(--color-primary-h);
  font-weight: 500;
}

/* La corbeille se détache des neuf autres : ce n'est pas la même nature de
   geste, et elle obéit à un autre droit. */
.cr-chip--corbeille {
  border-color: #fecaca;
  color: var(--color-danger);
}

/* « Rétablir dans l'activité du laboratoire ». Visible, parce qu'elle répare.
   Elle ne paraît que sur les lignes effectivement classées — jamais sur les
   quarante — donc la raison qui garde les pastilles creuses ne s'applique
   pas ici : il n'y en a qu'une, et on doit la trouver sans la chercher. */
.cr-chip--retablir {
  border-color: var(--color-primary);
  color: var(--color-primary-h);
}

/* ── Le dépli des actions non suggérées ───────────────────────────────────
   C'est le RESTE qui se replie, jamais les suggestions : l'inverse aurait
   enfermé l'opérateur dans la proposition du modèle.                     */
.cr-depli { display: inline-block; }

.cr-depli > summary {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--color-text-3);
  cursor: pointer;
  list-style: none;
}

.cr-depli > summary::-webkit-details-marker { display: none; }
.cr-depli > summary:hover { color: var(--color-text); border-style: solid; }

.cr-menu {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* ── Le volet : une ligne de table à part ─────────────────────────────────
   Le formulaire d'une action s'ouvre SOUS la ligne, sur toute la largeur, et
   non dans la cellule d'action. C'est ce qui permet aux colonnes de ne pas
   bouger d'un pixel quand on agit — la densité et l'alignement étaient une
   demande explicite.                                                      */
.cr-volet.hidden { display: none; }

.cr-volet > td {
  padding: 12px 14px !important;
  background: var(--color-bg);
  border-top: 2px solid var(--color-primary);
}

.cr-volet-titre { font-size: 13px; font-weight: 600; margin-bottom: 4px; }

.cr-volet-quoi {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-2);
  max-width: 70ch;
}

.cr-formulaire {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  max-width: 620px;
}

.cr-formulaire .encart { margin: 0 0 10px; font-size: 12px; }
.cr-formulaire-dit { margin-top: 8px; font-size: 12px; }

.cr-fermer { margin-top: 10px; }

/* Un refus se lit : il n'est ni rouge vif ni silencieux. Le rouge de la
   palette est réservé à ce qui est en panne, et un refus de route EST une
   réponse du serveur, pas une panne — d'où l'ambre. */
.cr-refus { color: var(--color-warning); line-height: 1.5; }

.cr-action-corbeille {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ── Écrans étroits ───────────────────────────────────────────────────────
   La liste ne devient pas une pile de cartes : c'est une liste de travail, et
   une carte par courriel ferait défiler dix écrans pour trente messages. On
   rend simplement les colonnes fluides et on laisse le tableau défiler
   horizontalement dans son `.table-wrapper`, comme les autres tableaux
   denses du projet.                                                       */
@media (max-width: 1100px) {
  .cr-table { table-layout: auto; min-width: 920px; }
}

/* ── Impression ───────────────────────────────────────────────────────────
   Les pastilles d'action ne s'impriment pas : on n'agit pas sur du papier.
   Le résumé de la lecture, lui, s'imprime — c'est l'information.         */
@media print {
  .cr-actions, .cr-depli, .cr-col-case, .cr-volet { display: none !important; }
  .cr-pli[open] > summary { font-weight: 600; }
  .cr-table { table-layout: auto; min-width: 0; }
  .cr-objet { -webkit-line-clamp: none; display: block; overflow: visible; }
}