@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&display=swap');

[x-cloak] { display: none !important; }

:root {
  --font: 'Archivo', -apple-system, "Segoe UI", Roboto, sans-serif;

  --couleur-fond: #f4f6fa;
  --couleur-carte: #ffffff;
  --couleur-surface-secondaire: #fafbfd;
  --couleur-fond-fil: #fbfcfe;

  --couleur-texte: #111a2e;
  --couleur-texte-secondaire: #3d4759;
  --couleur-texte-att: #5b6577;
  --couleur-texte-discret: #6b7484;
  --couleur-texte-tres-discret: #8d97a8;

  --couleur-accent: #1466d8;
  --couleur-accent-hover: #1055b4;
  --couleur-accent-fonce: #0d4390;
  --couleur-accent-clair: #e6effb;
  --couleur-accent-selection: #eef4fd;

  --couleur-bord: #111a2e;
  --couleur-bord-moyen: #c5ccd8;
  --couleur-bord-clair: #dde2ea;
  --couleur-bord-tres-clair: #eef1f6;

  --couleur-badge: #eef1f6;
  --couleur-erreur: #8c1d0c;
  --couleur-erreur-clair: #fde2de;

  /* Deux familles d'alerte a cote de l'erreur, pour les etats d'urgence et
     de delai. Elles suivent la meme convention : la teinte pleine sert de
     fond de badge et de liseré, la variante claire de fond de ligne. Les
     valeurs reprennent celles des classes `echeance-*`, deja en place, pour
     qu'un orange soit le meme orange partout. */
  --couleur-attention: #b26a00;
  --couleur-attention-clair: #fdf0d5;
  --couleur-succes: #1a7f4b;
  --couleur-succes-clair: #e6f4ec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #0d1220;
    --couleur-carte: #151b2c;
    --couleur-surface-secondaire: #10152388;
    --couleur-fond-fil: #10152388;

    --couleur-texte: #f0f2f7;
    --couleur-texte-secondaire: #cbd2e0;
    --couleur-texte-att: #9aa3b8;
    --couleur-texte-discret: #8890a3;
    --couleur-texte-tres-discret: #6b7488;

    --couleur-accent: #4f93e4;
    --couleur-accent-hover: #6ba5ea;
    --couleur-accent-fonce: #cfe0f8;
    --couleur-accent-clair: #1c2c47;
    --couleur-accent-selection: #182338;

    --couleur-bord: #f0f2f7;
    --couleur-bord-moyen: #333d54;
    --couleur-bord-clair: #262f45;
    --couleur-bord-tres-clair: #1d2438;

    --couleur-badge: #1d2438;
    --couleur-erreur: #f5a3a3;
    --couleur-erreur-clair: #3a1a1a;

    /* Comme pour l'erreur, les roles s'inversent en sombre : la teinte
       « pleine » devient claire et sert de fond a un texte fonce. */
    --couleur-attention: #e39a2a;
    --couleur-attention-clair: #33280f;
    --couleur-succes: #4ecb85;
    --couleur-succes-clair: #14291d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--font);
}

h1, h2, h3, button, .titre-heading {
  font-family: var(--font);
}

/* ------------------------------------------------------------------ */
/* Champs et boutons */
/* ------------------------------------------------------------------ */

input, textarea, select {
  border: 1px solid var(--couleur-bord-moyen);
  border-radius: 0;
  padding: 11px 13px;
  font-size: 15px;
  font-family: var(--font);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
}

textarea { min-height: 4rem; resize: vertical; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

/* `--sur-accent` est la couleur du TEXTE pose sur un aplat d accent.
   Elle ne peut pas etre blanche dans les deux themes : en sombre
   `--couleur-accent` s eclaircit a #4f93e4, et le blanc y tombe a
   3,17:1. Defaut anterieur au 8 septembre 2026, mesure au banc des
   espaces, et qui touchait deja tous les boutons pleins de BIOX en
   theme sombre. Meme parti que les badges de retard : c est le texte
   qui fonce, pas le fond qui s eclaircit. */
button {
  border: none;
  border-radius: 0;
  padding: 11px 18px;
  background: var(--couleur-accent);
  color: var(--sur-accent, #fff);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

button:hover { background: var(--couleur-accent-hover); }
button:disabled { opacity: 0.6; cursor: default; }
/* Action secondaire : elle agit vraiment, mais elle ne doit pas
   disputer l'oeil au geste principal de la carte. Un contour plutot
   qu'un aplat, sur la meme couleur. */
button.bouton-secondaire {
  background: transparent; color: var(--couleur-accent);
  box-shadow: inset 0 0 0 1px var(--couleur-accent);
}
button.bouton-secondaire:hover { background: var(--couleur-accent-clair); }

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

button.lien {
  background: transparent;
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bord-moyen);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
}
button.lien:hover { background: var(--couleur-accent-clair); }

button.lien.danger { color: var(--couleur-erreur); }
button.lien.danger:hover { background: var(--couleur-erreur-clair); }

/* ------------------------------------------------------------------ */
/* Ecran de connexion */
/* ------------------------------------------------------------------ */

.connexion-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.connexion-presentation {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 2px solid var(--couleur-bord);
  background: var(--couleur-carte);
}


.connexion-logo {
  width: 280px;
  height: auto;
  display: block;
}


.connexion-surtitre {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--couleur-accent);
  margin: 0 0 20px;
}

.connexion-titre {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 20px;
  max-width: 14ch;
}

.connexion-baseline {
  font-size: 16px;
  line-height: 1.5;
  max-width: 44ch;
  color: var(--couleur-texte-secondaire);
  margin: 0;
}

.connexion-mentions {
  display: flex;
  gap: 32px;
  font-size: 13px;
  color: var(--couleur-texte-att);
}

.connexion-formulaire {
  padding: 56px;
  display: flex;
  align-items: center;
}

.connexion-formulaire form {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.connexion-formulaire h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.filet { height: 2px; background: var(--couleur-bord); border: none; margin: 0; }

.connexion-formulaire label {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
}

/* ------------------------------------------------------------------ */
/* En-tete applicatif */
/* ------------------------------------------------------------------ */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 28px;
  background: var(--couleur-carte);
  border-bottom: 2px solid var(--couleur-bord);
  flex-wrap: wrap;
}




.entete nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.entete nav button {
  background: var(--couleur-badge);
  color: var(--couleur-texte);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 15px;
  position: relative;
}

.entete nav button.actif {
  background: var(--couleur-accent);
  color: #fff;
}

.pastille {
  display: inline-block;
  margin-left: 7px;
  background: var(--couleur-accent);
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
}

.entete nav button.actif .pastille {
  background: #fff;
  color: var(--couleur-accent);
}

.identite {
  display: flex;
  align-items: center;
  gap: 14px;
}

.identite-nom { font-size: 14px; font-weight: 600; text-align: right; }
.identite-role {
  font-size: 12px;
  color: var(--couleur-texte-att);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* Bandeau de statistiques */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Bandeau d informations urgentes, facon fil d actualite televise      */
/* ------------------------------------------------------------------ */
/* Remplace les quatre tuiles de compteurs du 8 septembre 2026. Elles   */
/* repetaient un chiffre que chaque bloc du tableau de bord affiche     */
/* deja dans son propre `bloc-compte`, deux lignes plus bas.            */
/*                                                                     */
/* Le parti de couleur suit celui pose le 7 septembre : une LIGNE prend */
/* un fond pale et un liseré, un BADGE prend un fond plein a texte      */
/* inverse. Le bandeau est une ligne, son etiquette de gauche est un    */
/* badge. Un aplat rouge sur toute la largeur de l ecran, tenu toute la */
/* journee, epuiserait l oeil et ferait perdre au rouge sa valeur       */
/* d alerte partout ailleurs dans l interface.                          */

/* ALLEGEE ET DECOLLEE le 8 septembre 2026, Imad la trouvant trop
   envahissante et trop collee aux taches.

   Elle n avait AUCUNE marge basse : mesuree a 0 px d ecart avec la
   premiere carte du tableau de bord, elle formait un bandeau soude au
   contenu, et c est ce qui la faisait paraitre plus grosse qu elle
   n etait. Les 14 px du bas font davantage pour l alleger que la
   reduction de hauteur elle-meme.

   Le filet de gauche passe de 4 a 3 px : il porte la couleur du niveau
   et doit rester lisible, mais 4 px sur une bande de 29 px pesaient. */
.bandeau-flash {
  display: flex;
  align-items: stretch;
  gap: 0;

  /* CENTREE ET BORNEE, demande d Imad du 8 septembre 2026. Elle prenait
     toute la largeur disponible, ce qui la faisait lire comme une barre
     de l interface plutot que comme un message pose sur la page.

     `width` garde la gouttiere de 28 px de chaque cote sur un ecran
     etroit, `max-width` l arrete a 820 px sur un grand : sans les deux,
     ou elle collerait aux bords sur telephone, ou elle s etirerait sur
     toute la largeur d un ecran de bureau. */
  margin: 18px auto 14px;
  width: calc(100% - 56px);
  max-width: 820px;

  border: 1px solid var(--couleur-bord);
  border-left: 3px solid var(--couleur-accent);
  border-radius: var(--rayon);
  background: var(--couleur-accent-clair);
  overflow: hidden;
}

.bandeau-flash.niveau-alerte {
  border-left-color: var(--couleur-attention);
  background: var(--couleur-attention-clair);
}

.bandeau-flash.niveau-urgent {
  border-left-color: var(--couleur-erreur);
  background: var(--couleur-erreur-clair);
}

/* L etiquette ne defile pas : elle nomme la nature du bandeau et doit
   rester lisible a tout instant, y compris au milieu d un tour. */
.flash-etiquette {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  /* 10 px reste sous les 18 px a partir desquels le seuil de contraste
     s abaisse : les ratios mesures pour cette etiquette restent ceux qu il
     faut atteindre, et les couleurs ne changent pas. */
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--couleur-accent);
}

/* CONTRASTE DE L ETIQUETTE, mesure et non suppose.
   Le blanc sur `--couleur-attention` (#b26a00) ne donne que 4,24:1 en
   theme clair, sous le seuil de 4,5:1 exige pour un texte de 11 px : le
   fond de l etiquette « Alerte » est donc assombri a #8a5200, qui monte
   a 6,39:1. Le defaut etait la avant ce bandeau, il touche le token
   general, mais l etiquette est en petites capitales et n a aucune marge.

   En theme sombre, les trois teintes pleines s eclaircissent et le blanc
   tombe a 1,97:1 sur l urgent, 2,35:1 sur l alerte, 3,17:1 sur l info.
   C est exactement le defaut corrige le 3 septembre 2026 sur les badges
   de retard, au chiffre pres. Le texte fonce, lui, remonte les trois
   au-dessus de 5:1. */
.bandeau-flash.niveau-alerte .flash-etiquette { background: #8a5200; }
.bandeau-flash.niveau-urgent .flash-etiquette { background: var(--couleur-erreur); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flash-etiquette { color: #0d1830; }
  :root:not([data-theme="light"]) .bandeau-flash.niveau-alerte .flash-etiquette {
    background: var(--couleur-attention);
    color: var(--couleur-attention-clair);
  }
  :root:not([data-theme="light"]) .bandeau-flash.niveau-urgent .flash-etiquette {
    color: var(--couleur-erreur-clair);
  }
}

.flash-pictogramme { font-size: 12px; line-height: 1; }

/* La fenetre borne le defilement ; la piste, elle, est plus large que
   l ecran et se deplace derriere. */
.flash-fenetre {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;

  /* Fondu aux deux bords. Sans lui, le texte apparait et disparait net
     contre l etiquette, ce qui donne l impression qu il est coupe plutot
     qu il defile. Le masque est independant de la couleur du fond, donc
     il tient dans les deux themes et sur les trois niveaux. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.flash-piste {
  display: flex;
  width: max-content;
  animation: flash-defile var(--duree, 30s) linear infinite;
}

/* La piste porte DEUX copies identiques de la suite de messages, et
   l animation la translate d exactement la moitie de sa largeur. A
   l instant ou elle se reinitialise, la seconde copie occupe la place
   qu occupait la premiere : la boucle est invisible, sans le saut
   qu aurait produit un retour a zero depuis la droite de l ecran. */
@keyframes flash-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.flash-piste.fige { animation-play-state: paused; }

.flash-suite {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 0;
}

.flash-message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 22px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--couleur-texte);
}

/* Le point separe deux messages sans faire croire a une ponctuation du
   message lui-meme. */
.flash-message::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  margin-left: 26px;
}

.flash-puce {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--couleur-accent);
}
.flash-message.est-alerte .flash-puce { background: var(--couleur-attention); }
.flash-message.est-urgent .flash-puce { background: var(--couleur-erreur); }
.flash-message.est-urgent { font-weight: 600; }

/* Bouton de pause. Il n est pas un confort : le critere 2.2.2 du RGAA
   impose un moyen d arreter tout mouvement automatique de plus de cinq
   secondes, et le survol seul ne repond pas au critere, un clavier
   n ayant pas de survol. Il est donc focalisable et porte un intitule. */
.flash-pause {
  flex: none;
  border: none;
  border-left: 1px solid var(--couleur-bord);
  background: transparent;
  color: var(--couleur-texte-att);
  padding: 0 13px;
  font-size: 13px;
  cursor: pointer;
}
.flash-pause:hover { color: var(--couleur-texte); background: rgba(127, 127, 127, .1); }
.flash-pause:focus-visible { outline: 2px solid var(--couleur-accent); outline-offset: -2px; }

/* Le survol suspend aussi le defilement : c est le geste naturel quand
   un message accroche l oeil, et il evite d avoir a viser le bouton. */
.bandeau-flash:hover .flash-piste { animation-play-state: paused; }

/* Mouvement reduit : plus aucune animation, et la lecture redevient
   manuelle. La seconde copie est masquee, elle n aurait fait que
   doubler le texte sous les yeux. */
@media (prefers-reduced-motion: reduce) {
  .flash-piste {
    animation: none;
    width: 100%;
    overflow-x: auto;
  }
  .flash-suite[aria-hidden="true"] { display: none; }
  .flash-message { white-space: normal; }
  .flash-pause { display: none; }
}


.stat-valeur {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Grilles de cartes (la gouttiere fait office de filet) */
/* ------------------------------------------------------------------ */

.dashboard {
  display: grid;
  gap: 2px;
  background: var(--couleur-bord-moyen);
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard.dashboard-collegues,
.dashboard.dashboard-admin,
.dashboard.dashboard-parametres {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Grille du tableau de bord. Le nombre de colonnes vient de la
   disposition choisie par chacun (`colonnesDashboard`) et passe par une
   variable, plus par un style en ligne : un style en ligne ne se laisse
   pas surcharger par une media query, et les trois colonnes restaient
   cote a cote sur telephone, 880 px de contenu pour un ecran de 390
   (audit du 10 septembre 2026, U1). */
.dashboard.dashboard-grille { grid-template-columns: var(--colonnes-dashboard, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .dashboard.dashboard-grille { grid-template-columns: minmax(0, 1fr); }
}

.carte {
  background: var(--couleur-carte);
  padding: 26px 28px 34px;
}

.carte h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
}

.carte h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 30px 0 12px;
  color: var(--couleur-texte);
}

.carte-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}




.vide { color: var(--couleur-texte-att); font-size: 0.9rem; }

/* ------------------------------------------------------------------ */
/* Listes */
/* ------------------------------------------------------------------ */

.liste-taches, .liste-tickets, .liste-journal, .liste-admin, .liste-compacte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.liste-taches li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
}

.liste-taches li label {
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}

.case {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  border: 2px solid var(--couleur-texte-tres-discret);
  background: var(--couleur-carte);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0 0;
  border: 2px solid var(--couleur-texte-tres-discret);
  background: var(--couleur-carte);
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]:checked {
  border-color: var(--couleur-accent);
  background: var(--couleur-accent);
}

input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.liste-taches li.faite span.libelle { text-decoration: line-through; color: var(--couleur-texte-att); }
.liste-taches li span.libelle { display: block; font-size: 15px; font-weight: 600; }

.liste-tickets li {
  padding: 15px 0;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
}

.liste-tickets li:last-child { border-bottom: none; }

.ticket-entete {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ticket-entete strong { font-size: 15px; font-weight: 600; line-height: 1.3; }

.liste-tickets p { margin: 6px 0 10px; font-size: 13px; line-height: 1.5; color: var(--couleur-texte-att); }

.liste-tickets .ticket-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pieces-jointes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.piece-jointe { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Label et non bouton, pour declencher l'input file cache qu'il enveloppe. */
.piece-jointe-ajout {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bord-moyen);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.piece-jointe-ajout:hover { background: var(--couleur-accent-clair); }

.liste-admin li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
}

.liste-admin li:last-child { border-bottom: none; }




.meta { color: var(--couleur-texte-att); font-size: 0.8rem; }

/* ------------------------------------------------------------------ */
/* Badges */
/* ------------------------------------------------------------------ */

.badge {
  background: var(--couleur-badge);
  border-radius: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Urgence, priorite et delai : fond plein et texte inverse, sur le modele
   de `.badge-retard` (« EN RETARD DE 2 JOURS »). Ces badges etaient
   auparavant pales, du fond clair avec un texte colore, et ils se
   confondaient avec le reste de la ligne. Style demande par Imad le
   7 septembre 2026, en montrant precisement le bloc de retard.

   `.badge-pas_urgent` reste pale a dessein : si tout crie, plus rien ne
   ressort, et c'est l'urgence qu'on cherche a voir. */
.badge-urgent,
.badge-etat-rouge { background: var(--couleur-erreur); color: #fff; }
.badge-modere,
.badge-etat-orange { background: var(--couleur-attention); color: #fff; }
.badge-etat-verte { background: var(--couleur-succes); color: #fff; }
.badge-pas_urgent { background: var(--couleur-accent-clair); color: var(--couleur-accent-fonce); }

@media (prefers-color-scheme: dark) {
  /* En sombre les teintes pleines s'eclaircissent : le texte doit donc
     foncer, sinon c'est du blanc sur du rose. Meme correction que celle
     deja faite pour `.badge-retard`. */
  :root:not([data-theme="light"]) .badge-urgent,
  :root:not([data-theme="light"]) .badge-etat-rouge { color: var(--couleur-erreur-clair); }
  :root:not([data-theme="light"]) .badge-modere,
  :root:not([data-theme="light"]) .badge-etat-orange { color: var(--couleur-attention-clair); }
  :root:not([data-theme="light"]) .badge-etat-verte { color: var(--couleur-succes-clair); }
}

/* Le fond de la ligne, dans le meme esprit que `.bloc-retard` : liseré
   plein a gauche et fond pale. Seuls le rouge et l'orange le portent, le
   vert n'ayant rien a signaler. */
.ligne-etat { border-left: 3px solid transparent; padding-left: 11px; border-radius: 8px; }
.ligne-etat-rouge {
  border-left-color: var(--couleur-erreur);
  background: var(--couleur-erreur-clair);
}
.ligne-etat-orange {
  border-left-color: var(--couleur-attention);
  background: var(--couleur-attention-clair);
}
/* Une tache cochee n'alerte plus : son fond s'eteint. */
.ligne-etat.faite {
  background: transparent;
  border-left-color: var(--couleur-bord-clair);
}

.badge-role {
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-fonce);
}

.badge-retard { background: var(--couleur-erreur); color: #fff; }

/* Annuler la derniere action. Toujours present dans la barre du haut, a
   gauche du selecteur : un bouton de recours qui n'apparait qu'au moment
   ou il sert ne se trouve pas, on le cherche. Il se grise quand la pile
   est vide, comme dans un traitement de texte. */
.bouton-annuler {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--couleur-texte-secondaire);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-moyen);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.bouton-annuler:hover:not(:disabled) {
  color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}
.bouton-annuler:disabled {
  opacity: .45;
  cursor: default;
}
.bouton-annuler span[aria-hidden] { font-size: 15px; line-height: 1; }

@media (max-width: 760px) {
  /* Sur telephone la barre est etroite : la fleche seule suffit, le mot
     « Annuler » ferait deborder la ligne. */
  .bouton-annuler span:not([aria-hidden]) { display: none; }
}

/* --- Zones de depot des taches personnelles ---
   Une zone ne s'annonce que pendant un glissement : hors geste, un cadre
   en pointilles permanent sur deux blocs du tableau de bord serait du
   bruit. Elle se signale d'abord discretement des qu'un glissement
   commence, puis franchement quand le doigt la survole. */
.zone-depot { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .zone-depot { transition: box-shadow .12s ease, background-color .12s ease; }
}
.zone-depot-active {
  box-shadow: inset 0 0 0 2px var(--couleur-bord-moyen);
}
.zone-depot-visee {
  box-shadow: inset 0 0 0 2px var(--couleur-accent);
  background: var(--couleur-accent-selection);
}
/* La consigne ne sert qu'a la premiere prise en main : elle s'effacerait
   d'elle-meme si le bloc n'etait pas vide, mais on la garde discrete
   plutot que conditionnelle, pour que le geste reste decouvrable. */
.zone-depot-consigne { font-size: 12px; }

/* Un titre de projet qui n'est pas un bouton : dans les zones de depot,
   les groupes ne se replient pas. Reprend l'apparence de `.bloc-titre`
   sans son comportement de bouton. */
.bloc-titre-statique {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 0;
  background: transparent; border: none;
  font-weight: 600; font-size: 13px;
  color: var(--couleur-texte-secondaire);
  cursor: default;
}

/* Le style de `.tache-saisissable` est defini avec `.ligne-reordonnable`,
   plus haut : les deux gestes doivent se ressembler a l'oeil. */
/* Le site d'une ligne, affiche seulement en perimetre cumule (« Mes sites
   du jour »). Volontairement discret : il situe la tache, il ne la
   qualifie pas, contrairement a la priorite ou au retard qui doivent
   sauter aux yeux. */
.badge-site {
  background: transparent;
  color: var(--couleur-texte-discret);
  box-shadow: inset 0 0 0 1px var(--couleur-bord-moyen);
  font-weight: 500;
}
.badge-pause { background: #fdf0d5; color: #7a4a00; }

@media (prefers-color-scheme: dark) {
  .badge-pause { background: #3a2c10; color: #f5cf8f; }
}

/* Ticket ouvert depuis plus longtemps que le seuil de sa priorite. */
.liste-tickets li.ticket-retard {
  border-left: 3px solid var(--couleur-erreur);
  padding-left: 11px;
}

/* ------------------------------------------------------------------ */
/* Notes de passation */
/* ------------------------------------------------------------------ */

.note-passation {
  border-left: 3px solid var(--couleur-accent);
  padding: 2px 0 2px 14px;
  margin-bottom: 14px;
}

.note-passation p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }

.note-passation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 12px;
  color: var(--couleur-texte-att);
}

/* ------------------------------------------------------------------ */
/* Jours actifs (boutons bascule) */
/* ------------------------------------------------------------------ */

.jours-actifs { margin-top: 4px; }

.jours-actifs-label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------ */
/* Journal (onglet complet) */
/* ------------------------------------------------------------------ */

.journal-page { padding: 30px 32px 48px; max-width: 1180px; margin: 0 auto; }

.journal-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.journal-entete h2 { font-size: 22px; font-weight: 700; margin: 0; }

.journal-filtres { display: flex; gap: 2px; margin: 18px 0 22px; flex-wrap: wrap; }

.journal-filtres button {
  border: 1px solid var(--couleur-bord-moyen);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font-size: 13px;
  padding: 8px 14px;
}

.journal-filtres button.actif { background: var(--couleur-accent); color: #fff; border-color: var(--couleur-accent); }

.journal-export {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 22px;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-clair);
}
.journal-export label { font-size: 12px; }
.journal-export input, .journal-export select { padding: 8px 10px; font-size: 13px; }
.journal-export .erreur { flex-basis: 100%; margin: 0; }

.journal-bloc { background: var(--couleur-carte); border: 1px solid var(--couleur-bord-clair); }

.journal-groupe-titre {
  padding: 12px 22px;
  background: var(--couleur-fond);
  border-bottom: 1px solid var(--couleur-bord-clair);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
}

.journal-ligne {
  display: grid;
  grid-template-columns: 70px 190px 1fr 130px;
  gap: 16px;
  align-items: baseline;
  padding: 13px 22px;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
  font-size: 14px;
}

.journal-ligne .heure { color: var(--couleur-texte-tres-discret); font-variant-numeric: tabular-nums; font-size: 13px; }
.journal-ligne .nom { font-weight: 600; }
.journal-ligne .action { color: var(--couleur-texte-secondaire); }

/* ------------------------------------------------------------------ */
/* Messagerie */
/* ------------------------------------------------------------------ */

.messagerie-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2px;
  background: var(--couleur-bord-moyen);
  min-height: 560px;
  max-width: 1400px;
  margin: 0 auto;
}

.conversations-panneau { background: var(--couleur-carte); padding: 22px 0 30px; }

.conversations-entete {
  padding: 0 22px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conversations-entete h2 { font-size: 18px; font-weight: 700; margin: 0; }

.conversation-item {
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
  border-left: 3px solid transparent;
  cursor: pointer;
  padding: 14px 20px;
  background: transparent;
  color: var(--couleur-texte);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conversation-item.actif { background: var(--couleur-accent-selection); border-left-color: var(--couleur-accent); }
.conversation-item:hover { background: var(--couleur-accent-clair); }

.conversation-ligne1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.conversation-nom { font-size: 14.5px; font-weight: 600; }
.conversation-heure { font-size: 11.5px; color: var(--couleur-texte-tres-discret); }
.conversation-apercu {
  font-size: 12.5px;
  color: var(--couleur-texte-discret);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.conversation-nonlu {
  align-self: flex-start;
  margin-top: 2px;
  background: var(--couleur-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
}

.fil-panneau { background: var(--couleur-carte); display: flex; flex-direction: column; }

.fil-entete {
  padding: 18px 28px;
  border-bottom: 2px solid var(--couleur-bord);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fil-entete .nom { font-size: 17px; font-weight: 700; }


.fil-corps {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--couleur-fond-fil);
  overflow-y: auto;
}

.bulle-groupe { display: flex; flex-direction: column; gap: 5px; max-width: 62%; }
.bulle-groupe.emis { align-self: flex-end; align-items: flex-end; }
.bulle-groupe.recu { align-self: flex-start; align-items: flex-start; }

.bulle {
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--couleur-bord-clair);
  background: var(--couleur-carte);
}

.bulle-groupe.emis .bulle { background: var(--couleur-accent-selection); border-color: var(--couleur-accent-clair); }

.bulle-meta { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--couleur-texte-tres-discret); }
.bulle-meta .accuse-lu { color: var(--couleur-accent-fonce); font-weight: 600; }
.bulle-meta .accuse-attente { color: #7a4a00; font-weight: 600; }

.composeur {
  border-top: 1px solid var(--couleur-bord-clair);
  padding: 18px 28px 22px;
  background: var(--couleur-carte);
}

.composeur textarea { width: 100%; min-height: 76px; margin-bottom: 12px; }

.composeur-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.accuse-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--couleur-texte-secondaire);
}

/* ------------------------------------------------------------------ */
/* Interrupteurs (parametres) */
/* ------------------------------------------------------------------ */

.pref-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
}

.pref-ligne:last-child { border-bottom: none; }

.pref-titre { display: block; font-size: 15px; font-weight: 600; }
.pref-description { display: block; font-size: 12.5px; color: var(--couleur-texte-att); margin-top: 3px; }

.interrupteur {
  flex: none;
  width: 52px;
  height: 26px;
  border: 2px solid var(--couleur-texte-tres-discret);
  background: var(--couleur-carte);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.interrupteur.actif { border-color: var(--couleur-accent); background: var(--couleur-accent); justify-content: flex-end; }

.interrupteur .pouce {
  width: 18px;
  height: 18px;
  margin: 0 2px;
  background: var(--couleur-texte-tres-discret);
  display: block;
}

.interrupteur.actif .pouce { background: #fff; }

/* ------------------------------------------------------------------ */
/* Divers */
/* ------------------------------------------------------------------ */

.erreur { color: var(--couleur-erreur); font-size: 0.85rem; }
.confirmation { color: var(--couleur-accent); font-size: 0.85rem; }
.avertissement { color: var(--couleur-erreur); font-size: 0.8rem; margin: 0.2rem 0; }

/* Lien d'invitation expire ou deja utilise : doit se voir avant le formulaire. */
.bandeau-avertissement {
  background: #fff6e5;
  border-left: 3px solid #c77700;
  color: #7a4a00;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 12px 14px;
  margin: 16px 0 4px;
}

.pied-page {
  border-top: 2px solid var(--couleur-bord);
  background: var(--couleur-carte);
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--couleur-texte-att);
}

@media (max-width: 1100px) {
  .connexion-grid { grid-template-columns: 1fr; }
  .connexion-presentation { border-right: none; border-bottom: 2px solid var(--couleur-bord); }
  .dashboard.dashboard-admin, .messagerie-grid { grid-template-columns: 1fr; }
}

/* === THEME BLEU BIOX (v2) === */
/* Calque de thème : reprend la palette et le langage de formes de la maquette v2.
   Placé en fin de feuille pour surcharger les règles historiques sans les modifier. */
:root {
  --acc: #1466d8;
  --acc-strong: #1055b4;
  --sur-accent: #fff;
  --acc-soft: #eaf2fd;
  --acc-bord: #cddcf3;
  --nav-fond: #0b1a37;
  --nav-fond-2: #0f2d6b;
  /* Assombri le 8 septembre 2026. A #2f8fff, le libelle blanc de
     l onglet actif ne donnait que 3,23:1, sous le seuil de 4,5:1 exige
     pour un texte de 14 px. Defaut anterieur, releve par le banc des
     espaces, et qui aurait fait du bleu le seul des cinq espaces non
     conforme. #1a6fd4 remonte a 4,66:1 pour un ecart de teinte a peine
     perceptible. */
  --nav-clair: #1a6fd4;
  --nav-texte: #c8d5ea;
  /* Rouge d alerte du rail. Mesure sur les trois fonds possibles :
     6,39:1 sur #0b1a37, 6,81:1 sur #0f2d6b, 6,58:1 sur #0a1122. */
  --nav-alerte: #ff9a8f;
  --rayon: 14px;
  --rayon-sm: 10px;

  --couleur-fond: #f4f6fa;
  --couleur-accent: var(--acc);
  --couleur-accent-hover: var(--acc-strong);
  --couleur-accent-clair: var(--acc-soft);
  --couleur-accent-selection: var(--acc-soft);
  --couleur-bord: #e9edf5;
  --couleur-bord-moyen: #dbe2ee;
  --couleur-bord-clair: #eef1f7;
  --couleur-bord-tres-clair: #f2f5fa;
  --couleur-texte: #101b33;
  --couleur-texte-secondaire: #3f4c66;
  --couleur-texte-att: #5c6b88;
  --couleur-texte-discret: #6b7a95;
  --couleur-texte-tres-discret: #8b99b3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --acc: #4f93e4;
    /* 5,44:1 sur #4f93e4, contre 3,17:1 pour du blanc. */
    --sur-accent: #0b1a37;
    --acc-strong: #6ba5ea;
    --acc-soft: #16233a;
    --acc-bord: #22334f;
    --nav-fond: #0a1122;
    --nav-texte: #a9b7cf;
    --nav-alerte: #ff9a8f;
    --couleur-bord: #26304a;
    --couleur-bord-moyen: #2e3950;
    --couleur-bord-clair: #212a41;
    --couleur-bord-tres-clair: #1c2436;

    /* Sans ces six lignes, le :root clair de ce calque gagne en theme
       sombre, puisqu il vient apres le bloc sombre du haut de feuille.
       Le fond des cartes restait sombre et le texte le redevenait :
       #101b33 sur #151b2c, soit une application qui parait vide.
       Valeurs reprises telles quelles du bloc sombre historique, qui
       etait l intention d origine. */
    --couleur-fond: #0d1220;
    --couleur-texte: #f0f2f7;
    --couleur-texte-secondaire: #cbd2e0;
    --couleur-texte-att: #9aa3b8;
    --couleur-texte-discret: #8890a3;
    --couleur-texte-tres-discret: #6b7488;
  }
}

/* --- Filets : plus discrets, plus de trait noir 2px --- */
.filet { height: 1px; background: var(--couleur-bord); }

/* --- Cartes et surfaces arrondies --- */
.carte,
.journal-bloc,
.conversations-panneau,
.fil-panneau,
.connexion-formulaire form {
  border-radius: var(--rayon);
  border: 1px solid var(--couleur-bord);
  box-shadow: 0 1px 2px rgba(16, 27, 51, .04), 0 8px 24px -18px rgba(16, 27, 51, .28);
}
.dashboard { gap: 20px; }

/* --- Barre de navigation : rail bleu foncé de la v2 --- */
.entete {
  background: linear-gradient(180deg, var(--nav-fond) 0%, var(--nav-fond-2) 100%);
  border-bottom: none;
  color: #fff;
}
.entete .entete-sous-marque,
.entete .identite-role { color: var(--nav-texte); }
.entete .identite-nom { color: #fff; }
.entete nav { gap: 6px; }
.entete nav button {
  color: var(--nav-texte);
  background: transparent;
  border-radius: var(--rayon-sm);
  transition: background .18s ease, color .18s ease;
}
.entete nav button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.entete nav button.actif { background: var(--nav-clair); color: #fff; }
.entete .lien { color: var(--nav-texte); }
.entete .lien:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.entete nav button.actif .pastille { background: #fff; color: var(--acc-strong); }
.pastille { border-radius: 999px; }

/* --- Contrôles --- */
button {
  border-radius: var(--rayon-sm);
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
button.lien { border-radius: var(--rayon-sm); }
input, select, textarea {
  border-radius: var(--rayon-sm);
  border: 1px solid var(--couleur-bord-moyen);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
input[type="checkbox"] { border-radius: 6px; }
.badge { border-radius: 999px; }
.interrupteur { border-radius: 999px; }
.interrupteur .pouce { border-radius: 999px; }

/* --- Messagerie --- */
.bulle { border-radius: var(--rayon); }
.bulle-groupe.emis .bulle { background: var(--acc); color: #fff; }
.bulle-groupe.recu .bulle { background: var(--acc-soft); border: 1px solid var(--acc-bord); }
.conversation-item { border-radius: var(--rayon-sm); }
.conversation-item.actif { background: var(--acc-soft); }

/* --- Notes et blocs teintés --- */
.note-passation {
  border-radius: var(--rayon-sm);
  border: 1px solid var(--acc-bord);
  background: var(--acc-soft);
}
.pied-page { border-top: 1px solid var(--couleur-bord); }

/* === STRUCTURE v2 : rail latéral + barre horloge === */
.coque { display: grid; grid-template-columns: 254px 1fr; min-height: 100vh; }

.rail {
  background: linear-gradient(180deg, var(--nav-fond) 0%, var(--nav-fond-2) 100%);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 18px 22px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
}
.rail-marque { display: flex; flex-direction: column; gap: 10px; padding: 0 8px; }
.rail-logo { width: 132px; height: auto; display: block; }
.rail-sous-marque {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nav-texte);
}
.rail-nav { display: flex; flex-direction: column; gap: 4px; }
.rail-nav button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--nav-texte);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  border-radius: var(--rayon-sm);
  transition: background .18s ease, color .18s ease;
}
.rail-nav button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.rail-nav button.actif { background: var(--nav-clair); color: #fff; }
/* Le chiffre de la pastille est FONCE et non `--acc-strong` : ce token
   s eclaircit en theme sombre (#6ba5ea) et tombe alors a 2,56:1 sur le
   fond blanc de la pastille. Defaut anterieur au 8 septembre 2026, releve
   par le banc du rail. #0b1a37 tient a 15,8:1 dans les deux themes. */
.rail-nav button.actif .pastille { background: #fff; color: #0b1a37; }


/* --- Carte d administration du bandeau --- */

/* Plus de `margin-bottom` depuis le 8 septembre 2026 : la carte vit
   maintenant DANS `.admin-grid`, a cote de « Nouvelle fiche », et c'est
   le `gap` de la grille qui espace. La marge s'ajoutait au gap et
   doublait l'ecart des que la grille repassait sur une colonne. */
.carte-flash { margin-bottom: 0; }

.carte-flash textarea { resize: vertical; min-height: 58px; }

/* Le segment « Urgent / Alerte / Info » vit dans une demi-colonne de
   `.grille-2`. Le `min-width: 118px` general des segments est dimensionne
   pour des libelles longs (« Tâche récurrente ») : a trois boutons il
   demande 370 px et fait passer « Info » a la ligne. Ces trois libelles
   sont courts et n en ont aucun besoin. */
.carte-flash .choix-segmente button { min-width: 0; }

/* Aligne le segment sur le champ de la colonne voisine : `margin-top`
   general de 16 px, pose pour suivre un paragraphe, decale le segment
   par rapport au select de droite quand un intitule le precede deja. */
.carte-flash .grille-2 .choix-segmente { margin-top: 6px; }

.compteur-flash { text-align: right; margin-top: 4px; }
.compteur-flash.proche { color: var(--couleur-attention); font-weight: 600; }

.carte-flash .barre-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.flash-en-cours .liste-compacte { margin-top: 8px; }

.flash-ligne {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  margin-bottom: 7px;
  border-radius: var(--rayon-sm);
  border-left: 3px solid var(--couleur-accent);
  background: var(--couleur-accent-clair);
  font-size: 14px;
}
.flash-ligne.est-alerte {
  border-left-color: var(--couleur-attention);
  background: var(--couleur-attention-clair);
}
.flash-ligne.est-urgent {
  border-left-color: var(--couleur-erreur);
  background: var(--couleur-erreur-clair);
}

.flash-ligne-corps { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.flash-ligne .flash-puce { margin-top: 6px; }
/* La puce suit le niveau, comme dans le bandeau : bleue a cote d un
   liseré rouge, elle laissait croire a deux informations distinctes. */
.flash-ligne.est-alerte .flash-puce { background: var(--couleur-attention); }
.flash-ligne.est-urgent .flash-puce { background: var(--couleur-erreur); }
.flash-ligne button { flex: none; }

/* Sur un ecran etroit le bandeau garde son etiquette et son bouton, mais
   la fenetre de defilement se reduit : c est elle qui doit ceder, le
   reste etant de taille fixe. */
@media (max-width: 700px) {
  /* La gouttiere passe de 28 a 16 px, et la marge basse EST CONSERVEE :
     l ancienne valeur `14px 16px 0` remettait le bas a zero et recollait
     la banderole aux taches, ce qu on venait justement de corriger. Elle
     decentrait aussi la banderole, la `width: calc(100% - 56px)` du bloc
     general se combinant a une marge laterale de 16 px : mesure a 16 px a
     gauche pour 40 a droite. */
  .bandeau-flash {
    margin: 14px auto 12px;
    width: calc(100% - 32px);
  }
  .flash-etiquette { padding: 8px 10px; font-size: 10px; letter-spacing: .1em; }
  .flash-message { padding: 8px 18px; font-size: 13px; }
  .flash-message::after { margin-left: 18px; }
}


/* --- Qui valide ce site aujourd hui (8 septembre 2026) --- */
/* Affiche dans les quatre espaces non-biologistes, pour qu un technicien
   ou une secretaire sache a qui s adresser sans ouvrir le planning.
   Chez les biologistes, « A valider aujourd hui » dit deja la meme chose
   de leur point de vue. */

.rail-valideurs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.rail-valideur {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  margin-top: 7px;
  border-radius: var(--rayon-sm);
  border-left: 3px solid var(--nav-clair);
  background: rgba(255, 255, 255, .07);
}

/* La distance se marque par un liseré pointillé et non par une couleur :
   sur cinq rails de teintes differentes, une couleur d etat entrerait en
   concurrence avec la teinte de l espace. Le mot « a distance » reste de
   toute facon ecrit, la marque n est qu un renfort. */
.rail-valideur.distant {
  border-left-style: dashed;
  background: rgba(255, 255, 255, .04);
}

.rail-valideur-nom {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* CONTRASTE, mesure et non suppose. `--nav-texte` convient sur le rail
   nu, mais la carte du valideur pose un voile blanc translucide par
   dessus : le fond s eclaircit, et ce texte de 10 px en capitales tombe
   a 3,95:1 sur trois des cinq espaces. #eef2f8 tient 4,60:1 au pire des
   cinq, voile compris. */
.rail-valideur-mode {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #eef2f8;
}

.rail-valideur-tel {
  font-size: 12px;
  color: #eef2f8;
  text-decoration: none;
  margin-top: 2px;
}
.rail-valideur-tel:hover { color: #fff; text-decoration: underline; }

/* --- Pastilles du rail : plusieurs compteurs, et le ton du plus grave --- */
/* Demande d Imad du 8 septembre 2026 : un message non lu ne doit pas se
   signaler du meme bleu que le reste de l interface, ou il se confond
   avec l onglet actif. Le libelle passe au rouge, precede d un point,
   et le compte suit en pastille rouge. Les trois marques disent la meme
   chose de trois facons, ce qui est voulu : la couleur seule ne suffit
   pas quand on ne la distingue pas. */

.rail-nav button .libelle-onglet { transition: color .12s ease; }

/* CONTRASTE : le rail est un aplat bleu tres sombre (#0b1a37 a #0f2d6b),
   et `--couleur-erreur` y tombe a 1,43:1, c est-a-dire illisible. Le rail
   a donc son propre rouge, clair, mesure a 6,4:1 au minimum sur les trois
   fonds qu il peut prendre, thème sombre compris. Meme piege que les
   badges de retard corriges le 3 septembre 2026. */
.rail-nav button.a-du-neuf .libelle-onglet {
  color: var(--nav-alerte);
  font-weight: 600;
}

/* Le rail actif a deja un fond plein : le rouge y serait illisible, et
   de toute facon on est sur l onglet, donc on a vu. */
.rail-nav button.actif.a-du-neuf .libelle-onglet {
  color: inherit;
  font-weight: inherit;
}

.point-neuf {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 0;
  border-radius: 50%;
  background: var(--nav-alerte);
}
.rail-nav button.actif .point-neuf { background: #fff; }

.pastilles-onglet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 7px;
}

.pastille.ton-erreur { background: var(--couleur-erreur); color: #fff; }
.pastille.ton-attention { background: var(--couleur-attention); color: #fff; }

/* Dans le rail, une pastille rouge FONCEE ne se detache pas d un fond
   deja tres sombre (2,0:1). Elle y est donc claire, avec un texte fonce,
   ce qui la fait ressortir a 8,4:1 tout en gardant le rouge comme
   signal. */
.rail-nav .pastille.ton-erreur { background: var(--nav-alerte); color: #3d0a02; }
.rail-nav .pastille.ton-accent { background: var(--nav-clair); color: #fff; }
.rail-nav button.actif .pastille.ton-erreur,
.rail-nav button.actif .pastille.ton-accent,
.rail-nav button.actif .pastille.ton-attention {
  background: #fff;
  color: #0b1a37;
}

/* La pastille du rail ne pousse plus le libelle : elle se range a
   droite, les compteurs restent alignes d un onglet a l autre. */
.rail-nav button .pastille { margin-left: 0; }

.rail-pied {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.rail-pied .identite-nom { color: #fff; text-align: left; }
.rail-pied .identite-role { color: var(--nav-texte); text-align: left; }
.rail-pied .lien { align-self: flex-start; margin-top: 8px; color: var(--nav-texte); padding: 6px 10px; }
.rail-pied .lien:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.zone { display: flex; flex-direction: column; min-width: 0; }
.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  background: var(--couleur-fond);
  border-bottom: 1px solid var(--couleur-bord);
  position: sticky;
  top: 0;
  z-index: 5;
}
.barre-titre { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.selecteur-site { padding: 8px 11px; font-size: 14px; font-weight: 600; }
.horloge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--couleur-texte);
}
.horloge-bloc {
  /* Variable de theme et non plus #fff : en sombre, les chiffres clairs
     s'ecrivaient sur ce blanc code en dur, 1,12:1 (audit, U3). */
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord);
  border-radius: var(--rayon-sm);
  padding: 5px 9px;
  font-size: 18px;
  font-weight: 700;
}
.horloge-sep { font-size: 16px; font-weight: 700; color: var(--couleur-texte-tres-discret); animation: horlogeClignote 1s steps(1, end) infinite; }
.horloge-sec { font-size: 12px; font-weight: 700; color: var(--acc); margin-left: 2px; }
@keyframes horlogeClignote { 50% { opacity: .25; } }

.zone .dashboard, .zone .journal-page, .zone .messagerie-grid { animation: vueEntre .22s ease-out; }
@keyframes vueEntre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.zone .pied-page { margin-top: auto; }

@media (max-width: 900px) {
  .coque { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; }
  .rail-nav button { width: auto; }
}

/* --- Planning hebdomadaire --- */
.planning-page { padding: 22px 28px 40px; }

.planning-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.planning-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* La grille peut etre large : elle defile sur elle-meme, jamais la page. */
.planning-tableau-cadre { overflow-x: auto; }
/* `table-layout: fixed` : sans lui, la largeur d'une colonne est dictee par
   l'option la plus longue des menus qu'elle contient. Les jours ou quelqu'un
   ne travaille pas ajoutent « - ne travaille pas ce jour-la » aux options, ce
   qui elargissait ces colonnes ; le lundi, ou tout le monde travaille, restait
   deux fois plus etroit. Les colonnes se partagent desormais la largeur a
   parts egales, quel que soit leur contenu. */
.planning-tableau {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
}
/* La colonne des sites garde une largeur propre, le reste se partage. */
.planning-tableau .colonne-site { width: 152px; }
.planning-tableau th, .planning-tableau td {
  border: 1px solid var(--couleur-bord); padding: 7px 9px;
  font-size: 13px; text-align: left; vertical-align: middle;
}
.planning-tableau thead th {
  background: var(--couleur-fond); font-weight: 700; white-space: nowrap;
}
.planning-tableau .colonne-site {
  background: var(--couleur-fond); font-weight: 600; white-space: nowrap;
  position: sticky; left: 0; z-index: 1;
}
/* Aujourd'hui se marque par un encadrement, pas par un fond : le fond est
   deja porte par l'astreinte, les cases vides et les cases manuelles, et
   deux fonds concurrents s'annulaient. */
.planning-tableau .jour-actuel {
  border-left: 2px solid var(--couleur-accent);
  border-right: 2px solid var(--couleur-accent);
}
.planning-tableau thead th.jour-actuel {
  border-top: 2px solid var(--couleur-accent);
  background: var(--acc-soft); color: var(--couleur-accent);
}
.planning-tableau .case-vide { background: #ffe9e9; }
.planning-tableau .case-manuelle { background: #e3edfb; }
.planning-tableau .case-astreinte { background: #fff3c4; }
.ligne-astreinte th.colonne-site { background: #fff3c4; }

.case-admin { display: flex; align-items: center; gap: 4px; }
.case-select { width: 100%; min-width: 0; border: none; background: transparent;
               padding: 3px; font-size: 13px; }
.case-select:focus { outline: 2px solid var(--couleur-accent); }

/* Bloc d'astreinte : une case n'est plus une liste deroulante mais un
   nom, et deux clics echangent deux astreintes. Le bouton doit donc
   remplir toute la case, sans quoi on vise a cote. */
.planning-tableau .case-bloc { padding: 0; }
.case-nom {
  width: 100%; border: none; background: transparent; cursor: pointer;
  padding: 6px 4px; font: inherit; color: inherit; text-align: center;
}
.case-nom:disabled { cursor: default; }
/* La case en attente de sa partenaire. Le contraste doit etre net : une
   selection discrete se perd sur un tableau de 55 cases. */
.planning-tableau .case-choisie { background: var(--couleur-accent); }
.planning-tableau .case-choisie .case-nom { color: #fff; font-weight: 600; }
/* Une case tournante n'appartient a personne dans le modele, son
   titulaire change a chaque bloc. En italique et en retrait, pour
   qu'elle ne se lise pas comme un nom manquant. */
.planning-tableau .case-tournante { background: var(--acc-soft); }
.planning-tableau .case-tournante .case-nom {
  font-style: italic; color: var(--couleur-accent);
}
.bouton-contact {
  border: none; background: transparent; cursor: pointer; padding: 0 3px;
  font-size: 14px; color: var(--couleur-accent); line-height: 1;
}
/* Referent a distance dans le planning public : le nom est bien celui
   du responsable, mais personne n'est sur le site. En italique et
   atténué, pour que la distinction se voie d'un coup d'oeil sans
   allonger une case de tableau deja etroite. */
.nom-distant {
  font-style: italic;
  color: var(--couleur-texte-att);
}

.nom-cliquable {
  border: none; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: inherit; text-align: left;
}

.voile-contact {
  position: fixed; inset: 0; background: rgba(17, 26, 46, .45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.fiche-contact {
  background: var(--couleur-carte); padding: 20px; max-width: 380px; width: 100%;
  box-shadow: 0 12px 40px rgba(17, 26, 46, .3);
}

.planning-reglages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; margin-top: 26px;
}
.form-absence { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.form-absence select, .form-absence input { flex: 1; min-width: 120px; }

/* --- Planning public : bascule tableau / fiches selon la largeur ---
   Le tableau est illisible sur telephone (10 sites en colonnes), on lui
   substitue une liste de jours. Les deux rendus coexistent dans le HTML,
   un seul est affiche a la fois. Ne concerne que la page publique. */

.planning-mobile { display: none; }

@media (max-width: 760px) {
  .planning-bureau { display: none; }
  .planning-mobile { display: block; }

  .planning-page { padding: 16px 14px 32px; }
  .planning-barre { gap: 10px; }
  .planning-nav { gap: 10px; font-size: 14px; }
  .choix-segmente { width: 100%; }
  .choix-segmente button { flex: 1; }
}

.jour-carte {
  border: 1px solid var(--couleur-bord-moyen);
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--couleur-carte);
}
.jour-carte-actuel { border-color: var(--couleur-accent); border-width: 2px; }

.jour-carte-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 700; text-transform: capitalize;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--couleur-bord);
}
.etiquette-aujourdhui {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--couleur-accent); background: var(--acc-soft); padding: 3px 7px;
}

.jour-astreinte {
  display: flex; align-items: center; gap: 8px;
  background: #fff3c4; padding: 7px 9px; margin-bottom: 8px;
}

.jour-ligne {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--couleur-bord-tres-clair);
}
.jour-ligne:last-child { border-bottom: none; }
.jour-ligne-site { flex: 0 0 38%; font-weight: 600; font-size: 13.5px; }
/* `flex: 1; min-width: 0` : le `wrap` ne peut agir que si le conteneur a
   une largeur a respecter. Sans ces deux proprietes, deux noms longs
   cote a cote sur un site a deux postes poussent la fiche au lieu de
   passer a la ligne. */
.jour-ligne-noms {
  display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px;
  flex: 1; min-width: 0;
}

/* Cible tactile confortable pour appeler d'un doigt. */
@media (max-width: 760px) {
  .jour-ligne-noms .nom-cliquable, .jour-astreinte .nom-cliquable {
    padding: 4px 0; min-height: 30px;
  }
  .fiche-contact { max-width: 100%; }
}

/* Vue mensuelle : beaucoup de colonnes, donc tout se resserre. Elle reste en
   disposition automatique, contrairement aux autres tableaux de planning :
   avec une trentaine de colonnes, un partage a parts egales les reduirait
   toutes a la plus large necessaire et tronquerait les noms sans raison.
   Elle ne contient aucun menu deroulant, elle n'a donc pas le defaut que
   `table-layout: fixed` corrige ailleurs. */
.planning-mois { min-width: 1100px; table-layout: auto; }
.planning-mois .colonne-site { width: auto; }
.planning-mois th, .planning-mois td {
  padding: 4px 5px; font-size: 11px; max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Une couleur par personne, une couleur par site ---
   Onze lignes, six colonnes, onze patronymes qui se ressemblent a la
   lecture rapide : la couleur fait le reperage que le nom seul ne fait
   pas. Deux traitements bien distincts pour deux informations
   distinctes, un fond pastel pour la personne et une bande laterale
   pour le site, afin que les deux teintes ne se confondent jamais.

   Deux valeurs arrivent de planning-public.js en style en ligne : la
   teinte en degres (`--teinte`) et le ton (`--ton`, a 0 ou 1). Six
   teintes en deux tons valent mieux que douze teintes : douze teintes
   ne sont qu'a 30 degres l'une de l'autre et deux bleus a 30 degres se
   confondent dans un tableau. Le ton ajoute donc un second axe, plus
   pale ou plus soutenu, pour que deux couleurs proches de teinte
   restent separees par l'intensite. Tout le calcul est ici, ce qui
   garde la palette au meme endroit.

   Ces deux classes sont nouvelles et ne sont posees que par la page
   publique : l'application reutilise la meme feuille de style, et
   aucune de ses regles n'est touchee. */

.nom-bio {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  background: hsl(var(--teinte, 220) calc(70% - var(--ton, 0) * 18%)
                                     calc(91% - var(--ton, 0) * 15%));
  color: hsl(var(--teinte, 220) 70% calc(26% - var(--ton, 0) * 4%));
}
/* Le referent a distance garde sa couleur mais pas son fond : le fond
   plein veut dire « sur place », et c'est justement la distinction que
   la vue publique doit rendre lisible. L'italique reste, il vient de
   `.nom-distant`. */
.nom-bio.nom-distant {
  background: transparent;
  font-weight: 400;
  color: hsl(var(--teinte, 220) 55% calc(34% - var(--ton, 0) * 6%));
  box-shadow: inset 0 0 0 1px hsl(var(--teinte, 220) 45%
                                  calc(72% - var(--ton, 0) * 14%));
}

/* La colonne des sites est collante et se superpose au tableau quand il
   defile : son fond doit rester opaque, d'ou une couleur pleine et non
   une transparence. */
.planning-tableau .colonne-site.site-colore {
  border-left: 5px solid hsl(var(--teinte, 220) 58% 48%);
  background: hsl(var(--teinte, 220) 62% 95%);
}
.jour-ligne-site.site-colore {
  border-left: 5px solid hsl(var(--teinte, 220) 58% 48%);
  padding-left: 8px;
}

/* Le fond jaune de l'astreinte et un fond de badge pale sont deux tons
   voisins : un filet de la couleur de la personne detache le badge de
   la case. Aucune astreinte n'est jamais a distance, donc ce
   `box-shadow` n'entre pas en concurrence avec celui de `.nom-distant`. */
.planning-tableau .case-astreinte .nom-bio,
.jour-astreinte .nom-bio {
  box-shadow: inset 0 0 0 1px hsl(var(--teinte, 220) 45%
                                  calc(70% - var(--ton, 0) * 14%));
}

/* Vue mensuelle : les cases sont a 11px, le badge s'y fait tout petit
   sans quoi chaque colonne s'elargit d'une trentaine de pixels. En
   bloc, il porte lui-meme la troncature par points de suspension que le
   `td` assurait avant lui, et deux postes s'empilent au lieu de se
   suivre sur une ligne trop etroite pour eux. */
.planning-mois .nom-bio {
  display: block;
  padding: 1px 4px;
  font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .nom-bio {
    background: hsl(var(--teinte, 220) calc(40% + var(--ton, 0) * 16%)
                                       calc(21% + var(--ton, 0) * 13%));
    color: hsl(var(--teinte, 220) 72% calc(85% - var(--ton, 0) * 3%));
  }
  .nom-bio.nom-distant {
    background: transparent;
    color: hsl(var(--teinte, 220) 55% calc(76% + var(--ton, 0) * 6%));
    box-shadow: inset 0 0 0 1px hsl(var(--teinte, 220) 40%
                                    calc(40% + var(--ton, 0) * 12%));
  }
  .planning-tableau .colonne-site.site-colore {
    border-left-color: hsl(var(--teinte, 220) 52% 52%);
    background: hsl(var(--teinte, 220) 34% 17%);
  }
  .jour-ligne-site.site-colore {
    border-left-color: hsl(var(--teinte, 220) 52% 52%);
  }
}

.puce-jour {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 5px 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--couleur-bord-moyen); background: var(--couleur-carte);
  color: var(--couleur-texte-att);
}
.puce-jour.actif {
  background: var(--couleur-accent); border-color: var(--couleur-accent); color: #fff; font-weight: 600;
}
/* Jour non travaille : la case reste visible plutot que masquee, sinon
   on croit a un bug d'affichage quand une colonne manque a une personne
   et pas aux autres. Elle est simplement inerte. */
.puce-jour.inerte {
  opacity: .32; cursor: not-allowed; text-decoration: line-through;
}

/* Combien de biologistes acceptent chaque jour. Indicatif et discret :
   ce n'est pas une alerte, c'est un chiffre qu'on lit en passant. */
.couverture-astreinte { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.couverture-jour {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--couleur-badge); color: var(--couleur-texte-att);
}
.couverture-jour b { font-size: 13px; }
/* Sous deux volontaires, les 5 creneaux du cycle ne peuvent pas etre
   pourvus. On le signale sans dramatiser : c'est reparable en un clic. */
.couverture-jour.maigre { background: rgba(220, 80, 60, .14); color: #c0392b; }

/* Hors roulement : la ligne reste lisible mais visiblement inactive. On
   ne la masque pas, sinon on croirait la personne disparue de l'equipe. */
.liste-admin li.hors-roulement .puce-jour { opacity: .35; }

/* Verrouille : la puce garde sa couleur, donc l'etat reste parfaitement
   lisible. Seul le curseur dit qu'on ne peut pas la changer ici. */
.puce-jour.verrouille { cursor: default; }
.liste-admin li.hors-roulement > span:first-child { opacity: .6; }


.bloc-priorite { padding: 12px 0; border-bottom: 1px solid var(--couleur-bord); }
.bloc-priorite:last-child { border-bottom: none; }
.bloc-priorite-titre { font-weight: 600; margin-bottom: 6px; }
.liste-priorite { margin: 0 0 8px; padding-left: 20px; }
.liste-priorite li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }

/* --- Fiche de depannage d'un compte --- */
.fiche-depannage {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--couleur-bord-moyen);
  background: var(--couleur-fond);
}
.fiche-depannage label { display: block; }
.ligne-inactive { opacity: .55; }

/* --- Preparation en lot des acces --- */

.bloc-preparation { margin-top: 18px; }
.bloc-preparation h3 { margin-bottom: 4px; }

.fiche-acces {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--couleur-bord-moyen);
  background: var(--couleur-fond);
}

/* Le seul avertissement de l'application qui compte vraiment : passe ce
   panneau, les mots de passe ne sont plus recuperables nulle part. */
.avertissement-acces {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--couleur-erreur);
  background: var(--couleur-carte);
  color: var(--couleur-erreur);
  font-size: 0.85rem;
  font-weight: 600;
}

.table-acces { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table-acces th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
  padding: 4px 6px;
}
.table-acces td { padding: 6px; border-top: 1px solid var(--couleur-bord-clair); }
/* Un mot de passe se lit caractere par caractere, souvent a voix haute. */
.table-acces code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: .06em;
  user-select: all;
}

/* A l'impression, seule la fiche part sur le papier. On masque par
   visibility et non par display : retirer les ancetres de la mise en page
   ferait s'effondrer la grille et deplacerait la fiche hors de la feuille. */
@media print {
  body * { visibility: hidden; }
  .fiche-acces, .fiche-acces * { visibility: visible; }
  .fiche-acces {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    border: 0;
    background: #fff;
    padding: 0;
  }
  .sans-impression, .carte-entete .lien { display: none !important; }
  /* Une ligne etalee sur 21 cm se lit mal et se decoupe mal : la fiche
     est destinee a etre coupee en bandes, une par personne. */
  .fiche-acces { max-width: 15cm; }
  .table-acces td { padding: 11px 6px; }
  .table-acces tr { page-break-inside: avoid; }
  .table-acces td { border-top: 1px solid #ccc; }
}

/* --- Reorganisation par appui long puis glissement --- */

/* `manipulation` conserve le defilement au doigt : seul l'appui long
   declenche un glissement, et le defilement est alors bloque en JS. */
/* `.tache-saisissable` partage exactement ce style : ce sont les lignes que
   l'on tire vers les zones de depot du tableau de bord. Elles ne se
   reordonnent pas, mais le geste est le meme, donc son apparence doit
   l'etre aussi. Elles avaient d'abord leur propre regle, sans `grabbing`
   ni `user-select`, et la main restait ouverte pendant le glissement. */
.ligne-reordonnable,
.tache-saisissable {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.ligne-reordonnable.en-glissement,
.tache-saisissable.en-glissement {
  cursor: grabbing;
  background: var(--couleur-accent-clair);
  box-shadow: 0 6px 18px rgba(17, 26, 46, .16);
  position: relative;
  z-index: 2;
}

/* --- Menu deroulant a cases a cocher (ex: sites d'acces) --- */
.menu-deroulant { position: relative; flex: 1; min-width: 180px; }

.menu-deroulant-bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bord-moyen);
  border-radius: var(--rayon-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
}
.menu-deroulant-bouton:hover { border-color: var(--acc); }
.menu-deroulant-bouton .fleche { color: var(--couleur-texte-tres-discret); transition: transform .15s ease; flex: none; }
.menu-deroulant-bouton.ouvert .fleche { transform: rotate(180deg); }

.menu-deroulant-panneau {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-moyen);
  border-radius: var(--rayon-sm);
  box-shadow: 0 8px 24px rgba(17, 26, 46, .12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.menu-deroulant-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--rayon-sm);
  font-size: 13px;
  cursor: pointer;
}
.menu-deroulant-option:hover { background: var(--couleur-bord-tres-clair); }

/* --- Administration : sous-onglets et formulaire unique de fiche --- */
/* Tache recurrente, tache ponctuelle et ticket partagent un seul
   formulaire. Le type se choisit en tete, et seuls ses champs propres
   apparaissent, groupes dans un bloc teinte pour qu'on voie d'un coup
   d'oeil ce qui depend du choix. */

.admin-page {
  padding: 26px 32px 48px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  animation: vueEntre .22s ease-out;
}

.sous-onglets {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--couleur-bord);
}
.sous-onglets button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--couleur-texte-att);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
}
.sous-onglets button:hover { background: var(--acc-soft); color: var(--couleur-texte); }
.sous-onglets button.actif { color: var(--acc); border-bottom-color: var(--acc); background: transparent; }
.sous-onglets .pastille { background: var(--acc); color: #fff; }

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: start;
}

/* Ecran de saisie : la colonne LARGE est a gauche, contrairement aux
   autres grilles de l'administration.

   C'est « Nouvelle fiche » qui l'occupe depuis que les deux cartes ont
   ete inversees, le 8 septembre 2026. Le formulaire porte quatre types
   de fiche et des rangees a deux colonnes ; le bandeau defilant tient en
   un message et deux reglages. Garder le rapport d'origine aurait serre
   le grand formulaire dans la petite colonne. */
.admin-grid.saisie {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.choix-segmente {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 4px;
  background: var(--couleur-bord-tres-clair);
  border-radius: var(--rayon-sm);
}
.choix-segmente button {
  flex: 1;
  min-width: 118px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--couleur-texte-att);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 12px;
}
.choix-segmente button:hover { background: var(--couleur-carte); color: var(--couleur-texte); }
.choix-segmente button.actif {
  background: var(--couleur-carte);
  color: var(--acc);
  border-color: var(--acc-bord);
  box-shadow: 0 1px 2px rgba(16, 27, 51, .06);
}
.choix-segmente.compact { margin-top: 8px; background: var(--couleur-carte); padding: 0; gap: 6px; }
.choix-segmente.compact button {
  min-width: 92px;
  font-size: 13px;
  padding: 7px 10px;
  border-color: var(--couleur-bord-moyen);
}

.aide-type { margin: 10px 2px 0; line-height: 1.5; }

.form-fiche { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bloc-conditionnel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-bord);
  border-radius: var(--rayon-sm);
}
.bloc-conditionnel .jours-actifs-label { margin-bottom: 0; }
.bloc-conditionnel .meta { margin: 0; }

.champ-etroit { max-width: 260px; }

.liste-destinataires {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-moyen);
  border-radius: var(--rayon-sm);
  padding: 8px;
}
.option-ligne {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 5px 6px;
  border-radius: var(--rayon-sm);
  cursor: pointer;
}
.option-ligne:hover { background: var(--couleur-bord-tres-clair); }

/* Les 31 dates du mois tiennent sur une grille de semaines, pas sur une
   colonne de 31 lignes qu'il faudrait faire defiler. */
.menu-deroulant-panneau.grille-jours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  min-width: 268px;
  max-height: 260px;
}
.grille-jours .menu-deroulant-option {
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  padding: 5px 2px;
  font-size: 12px;
}

.form-invitation { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.form-invitation button { grid-column: 1 / -1; justify-self: start; }

/* Une ligne de fiche porte titre, categorie, rythme, taux et deux boutons :
   en colonne, elle deborde si elle reste sur une seule ligne. `min-width: 0`
   autorise en plus le titre a se replier au lieu de pousser le reste. */
.admin-page .liste-admin li { flex-wrap: wrap; row-gap: 8px; }
.admin-page .liste-admin li > span[style*="flex:1"] { min-width: 140px; }

@media (max-width: 1100px) {
  /* `.admin-grid.saisie` doit etre repete ici : il compte deux classes la
     ou `.admin-grid` n'en compte qu'une, il est donc PLUS SPECIFIQUE et
     gagnait meme a l'interieur de cette media query. La grille de saisie
     restait a deux colonnes sur telephone, larges de 342 px chacune.
     Une media query ne rend pas prioritaire ce qu'elle contient. */
  .admin-grid,
  .admin-grid.saisie { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .admin-page { padding: 20px 16px 40px; }
  .grille-2, .form-invitation { grid-template-columns: 1fr; }
  .choix-segmente button { min-width: 0; }
}

/* --- Modification du texte d'une fiche deja creee --- */
/* La ligne d'affichage et le formulaire d'edition occupent tour a tour
   la meme place dans le <li>. Sans ces regles, la ligne perdrait sa
   disposition en flex des qu'on l'enveloppe pour la faire alterner. */

.ligne-fiche {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* --- Fiche recurrente, sur deux niveaux --- */
/* Le titre a besoin de toute la largeur, les caracteristiques n'ont
   besoin que d'etre lisibles. Les mettre sur la meme rangee obligeait le
   titre a ceder, et chaque fiche se repartissait differemment de sa
   voisine. Separes, le titre respire et les details s'alignent. */

.fiche-recurrente {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.fiche-entete {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.fiche-titre {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

/* Les actions ne retrecissent jamais : un bouton coupe en deux lignes
   est plus penible a lire qu'un titre un peu plus court. */
.fiche-actions {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: none;
  white-space: nowrap;
}

.fiche-details {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fiche-details .meta { white-space: nowrap; }
.fiche-separateur { color: var(--couleur-bord); font-size: 12px; }

.ligne-fiche-edition {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 0;
}

.ligne-fiche-edition input[type="text"],
.ligne-fiche-edition textarea {
  width: 100%;
}

.ligne-fiche-edition-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Selecteur compact pose au milieu d'une ligne de liste --- */
/* Les <select> de l'application sont pleine largeur dans un <label>.
   Dans une ligne d'administration, il faut qu'il reste a sa taille. */

select.champ-inline {
  width: auto;
  min-width: 150px;
  padding: 6px 10px;
  font-size: 12.5px;
}

/* --- Signature des ecrans hors application --- */
/* Ecrans de connexion et page publique du planning : ils n'ont pas le
   pied de page complet de l'application, mais doivent porter la meme
   signature. Discret, centre, sans jamais recouvrir le contenu. */

.signature-hors-app {
  text-align: center;
  padding: 20px 16px 24px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--couleur-texte-att);
}

/* --- Pieces jointes en attente d'envoi, dans le composeur --- */
/* Le fichier est deja televerse, mais pas encore rattache a un message :
   il faut donc pouvoir le retirer avant l'envoi. */

.pieces-en-attente {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.piece-en-attente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--couleur-bord-clair);
  border-radius: var(--rayon-sm);
  background: var(--couleur-fond);
  font-size: 12.5px;
  max-width: 100%;
}

.piece-en-attente > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Echeance depassee sur une tache personnelle --- */


/* --- Deux niveaux de responsabilite dans une case de planning --- */
/* Le niveau "a distance" doit se lire comme secondaire sans disparaitre :
   plus petit, plus pale, mais toujours cliquable. */

.case-deux-niveaux {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.niveau-distant {
  font-size: 11.5px;
  opacity: .78;
}

.niveau-distant:hover { opacity: 1; }

/* --- Demandes de changement de planning --- */

.carte-demande {
  border-left: 3px solid var(--couleur-accent);
}

.demande-ligne {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--couleur-bord-tres-clair);
}

.demande-ligne:last-child { border-bottom: none; }

.demande-ligne > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.demande-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Echeance des taches personnelles, coloree par tiers --- */
/* Le temps entre la creation et la date limite est coupe en trois :
   vert, puis orange, puis rouge. Depassee, l'echeance est barree d'un
   fond plein pour se distinguer du simple "dernier tiers". */

.puce-echeance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.puce-echeance::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.echeance-verte { color: #1a7f4b; }
.echeance-orange { color: #b26a00; }
.echeance-rouge { color: var(--couleur-erreur); }

.echeance-depassee {
  color: #fff;
  background: var(--couleur-erreur);
  padding: 1px 8px;
  border-radius: 999px;
}

@media (prefers-color-scheme: dark) {
  .echeance-verte { color: #4ecb85; }
  .echeance-orange { color: #e39a2a; }
}

/* --- Pomodoro dans la barre laterale --- */
/* Posé juste au-dessus de l'identité, donc toujours visible sans
   quitter l'écran en cours. Les couleurs suivent celles du rail. */










/* --- Projets personnels --- */


.pastille-projet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.pastille-projet[data-couleur="bleu"]   { background: #1466d8; }
.pastille-projet[data-couleur="vert"]   { background: #1a7f4b; }
.pastille-projet[data-couleur="orange"] { background: #d98200; }
.pastille-projet[data-couleur="rouge"]  { background: #c0392b; }
.pastille-projet[data-couleur="violet"] { background: #7048b6; }
.pastille-projet[data-couleur="gris"]   { background: #6b7688; }

/* --- Onglets du rail deplacables par appui long --- */
/* `touch-action: none` est indispensable : sans lui, le navigateur
   interprete le glissement comme un defilement de page et le
   deplacement ne part jamais sur ecran tactile. */

.rail-nav button.onglet-deplacable {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.rail-nav button.en-glissement {
  outline: 2px dashed rgba(255, 255, 255, .55);
  outline-offset: -3px;
  opacity: .85;
}

/* --- Code couleur du planning : présence, distance, manque --- */
/* Le fond dit d'un coup d'oeil si le site est tenu physiquement, tenu
   seulement a distance, ou pas tenu du tout. La bordure gauche double
   le fond, pour rester lisible en cas de daltonisme. */

.planning-tableau td.case-presence {
  background: rgba(26, 127, 75, .10);
  border-left: 3px solid #1a7f4b;
}

.planning-tableau td.case-distance-seule {
  background: rgba(217, 130, 0, .12);
  border-left: 3px solid #d98200;
}

.planning-tableau td.case-facultative {
  background: transparent;
  border-left: 3px solid var(--couleur-bord-clair);
}

/* Le manque prime sur tout le reste : il doit sauter aux yeux. */
.planning-tableau td.case-vide {
  border-left: 3px solid var(--couleur-erreur);
}

.legende-planning {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 12px 0 2px;
  font-size: 12.5px;
  color: var(--couleur-texte-att);
}

.pastille-legende {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  margin-right: -10px;
}

.pastille-legende.presence   { background: rgba(26, 127, 75, .25); border-left: 3px solid #1a7f4b; }
.pastille-legende.distance   { background: rgba(217, 130, 0, .28); border-left: 3px solid #d98200; }
.pastille-legende.manque     { background: transparent; border-left: 3px solid var(--couleur-erreur); }
.pastille-legende.facultative{ background: transparent; border-left: 3px solid var(--couleur-bord-clair); }
.pastille-legende.manuelle   { background: rgba(20, 102, 216, .18); border-left: 3px solid var(--couleur-accent); }

@media (prefers-color-scheme: dark) {
  .planning-tableau td.case-presence { background: rgba(78, 203, 133, .13); border-left-color: #4ecb85; }
  .planning-tableau td.case-distance-seule { background: rgba(227, 154, 42, .15); border-left-color: #e39a2a; }
}

/* ===================================================================
   Alerte en pop-up
   ===================================================================
   Les erreurs s'affichaient en haut de page. Sur un tableau de planning
   large, on choisissait un nom en bas d'ecran, le nom revenait a vide,
   et l'explication restait invisible 30 lignes plus haut. */

.alerte-popup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(440px, calc(100vw - 48px));
  padding: 14px 16px;
  border-radius: var(--rayon);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord);
  border-left: 4px solid var(--couleur-erreur);
  box-shadow: 0 12px 32px rgba(10, 20, 40, .22);
  font-size: 13.5px;
  line-height: 1.5;
  animation: alerte-entree .22s ease-out;
}

.alerte-popup.succes { border-left-color: #1a7f4b; }

.alerte-icone {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--couleur-erreur);
}

.alerte-popup.succes .alerte-icone { background: #1a7f4b; }

.alerte-texte { flex: 1; min-width: 0; }

.alerte-fermer {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--couleur-texte-att);
  font-size: 13px;
  padding: 0 2px;
}

.alerte-fermer:hover { color: var(--couleur-texte); }

@keyframes alerte-entree {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===================================================================
   Sous-onglets (planning)
   =================================================================== */

.sous-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 28px 14px;
}

.sous-onglets button {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--couleur-bord-clair);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sous-onglets button:hover { border-color: var(--couleur-accent); }

.sous-onglets button.actif {
  background: var(--couleur-accent);
  border-color: var(--couleur-accent);
  color: #fff;
  font-weight: 600;
}

/* ===================================================================
   Consigne d'une tache, derriere le petit i
   =================================================================== */

/* La bulle s'accroche a la LIGNE de la tache, pas au petit i.
   Accrochee au i, elle partait vers la droite sur 320 px et sortait de
   la colonne des que le titre etait long : sur l'accueil, la carte porte
   un `overflow-y: auto`, qui force aussi `overflow-x` a rogner, et la
   consigne etait coupee net au bord de la carte (signale le 10 septembre
   2026). Le porte-consigne n'est donc plus positionne : la bulle se cale
   sur la ligne (`li`, en position relative plus bas) et prend sa largeur,
   ce qui la garde dans la colonne quelle que soit la place du i. */
.porte-consigne { position: static; display: inline-block; }

.bulle-info {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--couleur-accent);
  background: transparent;
  color: var(--couleur-accent);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.bulle-info:hover {
  background: var(--couleur-accent);
  color: #fff;
  transform: scale(1.15);
}

.consigne {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 4px);
  z-index: 40;
  padding: 10px 12px;
  border-radius: var(--rayon-sm);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord);
  box-shadow: 0 8px 22px rgba(10, 20, 40, .18);
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: var(--couleur-texte);
  white-space: normal;
  animation: alerte-entree .16s ease-out;
}

/* ===================================================================
   Options indisponibles dans les listes du planning
   ===================================================================
   Une personne qui ne travaille pas ce jour-la ne doit plus etre
   choisissable : la base refusait deja l'ecriture, mais le nom revenait
   a vide sans explication visible. */

.case-select option:disabled,
select option:disabled {
  color: var(--couleur-texte-att);
  font-style: italic;
}

/* ===================================================================
   Animations de survol
   ===================================================================
   Un retour visuel sur la ligne survolee, pour suivre l'oeil sur les
   longues listes et les tableaux larges. */

.liste-taches li,
.liste-tickets li,
.liste-admin li,
.liste-compacte li {
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  border-radius: var(--rayon-sm);
}

.liste-taches li:hover,
.liste-tickets li:hover,
.liste-admin li:hover {
  background: var(--couleur-accent-clair);
  transform: translateX(3px);
}

/* Une ligne deja cochee ne se met pas en avant : il n'y a plus rien a
   y faire. */
.liste-taches li.faite:hover { transform: none; }

/* Le planning se survole par ligne entiere : sur un tableau de dix
   sites sur six jours, c'est ce qui evite de se tromper de ligne. */
.planning-tableau tbody tr {
  transition: background .15s ease;
}

.planning-tableau tbody tr:hover {
  background: var(--couleur-accent-clair);
}

.planning-tableau tbody td {
  transition: background .15s ease, box-shadow .15s ease;
}

.planning-tableau tbody td:hover {
  box-shadow: inset 0 0 0 2px var(--couleur-accent);
}

.note-passation {
  transition: transform .15s ease, box-shadow .15s ease;
}

.note-passation:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 20, 40, .10);
}

/* Respecte le reglage systeme de ceux qui desactivent les animations. */
@media (prefers-reduced-motion: reduce) {
  .liste-taches li,
  .liste-tickets li,
  .liste-admin li,
  .planning-tableau tbody tr,
  .planning-tableau tbody td,
  .note-passation,
  .bulle-info,
  .alerte-popup,
  .consigne {
    transition: none;
    animation: none;
  }
  .liste-taches li:hover,
  .liste-tickets li:hover,
  .liste-admin li:hover,
  .note-passation:hover { transform: none; }
}

/* --- Empilement de la consigne ouverte --------------------------------
   La bulle passait SOUS le petit i de la tache suivante. Deux causes
   cumulees : les lignes de liste ne sont pas positionnees, donc elles
   s'empilent dans l'ordre du DOM et la suivante gagne ; et le
   `transform` du survol cree un contexte d'empilement qui enferme la
   bulle dans sa propre ligne.

   Correction : la ligne qui porte une consigne ouverte est remontee
   au-dessus de toutes les autres, et le fond de la bulle est declare
   opaque explicitement plutot que de dependre d'une variable. */

.liste-taches li,
.liste-tickets li,
.liste-admin li {
  position: relative;
  z-index: 1;
}

.porte-consigne.consigne-active { z-index: 300; }

.liste-taches li:has(.consigne-active),
.liste-tickets li:has(.consigne-active),
.liste-admin li:has(.consigne-active) {
  z-index: 300;
}

/* Exactement le meme piege pour les menus deroulants a cases a cocher :
   le panneau est en z-index 20, mais la regle ci-dessus fait de chaque
   ligne un contexte d'empilement a z-index 1, donc ce 20 ne vaut qu'a
   l'interieur de sa propre ligne. Le panneau passait ainsi sous le
   contenu des lignes suivantes, d'ou les textes superposes dans les
   habilitations. On remonte la ligne porteuse, comme pour les consignes,
   en restant sous le voile des fenetres modales. */
.liste-taches li:has(.menu-deroulant-bouton.ouvert),
.liste-tickets li:has(.menu-deroulant-bouton.ouvert),
.liste-admin li:has(.menu-deroulant-bouton.ouvert) {
  z-index: 30;
}

/* Une ligne qui affiche sa consigne ne se decale pas au survol : le
   transform enfermerait la bulle dans un contexte d'empilement local et
   le probleme reviendrait. */
.liste-taches li:has(.consigne-active):hover,
.liste-tickets li:has(.consigne-active):hover,
.liste-admin li:has(.consigne-active):hover {
  transform: none;
}

.consigne {
  background-color: #ffffff;
  z-index: 300;
}

@media (prefers-color-scheme: dark) {
  .consigne { background-color: #151b2c; }
}

/* --- Zone reservee au super administrateur --- */
/* Encadree et teintee : ce qu'on y fait n'est pas rattrapable par une
   reactivation, contrairement au reste de la fiche de depannage. */
.bloc-super-admin {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--couleur-erreur);
  border-radius: var(--rayon-sm);
  background: color-mix(in srgb, var(--couleur-erreur) 6%, transparent);
}
.bloc-super-admin .meta { margin-top: 0; }

/* --- Onglet Equipe : une fiche condensee par personne --- */
/* Fusion des anciennes cartes Comptes et Habilitations en une seule liste ;
   ce resserrement compense les deux lignes desormais empilees par fiche. */
.liste-equipe li { padding: 10px 0; gap: 6px; }
.liste-equipe .champ-inline { font-size: 12.5px; padding: 6px 8px; }

/* --- Equipe : recherche, liste compacte, fiche au clic ---------------
   Ajoute le 10 septembre 2026. Une ligne par personne, et les reglages
   ne s'ouvrent que pour celle qu'on a choisie : la liste depliee de tous
   les comptes etait devenue impossible a parcourir. */

.equipe-outils { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.equipe-recherche { width: 100%; padding: 9px 12px; font-size: 13.5px; }
.equipe-filtres { margin-top: 0; }
.equipe-filtres button { flex: none; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.equipe-filtre-compte {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--couleur-texte-tres-discret);
  font-variant-numeric: tabular-nums;
}

.admin-page .liste-equipe li { flex-direction: column; align-items: stretch; padding: 0; gap: 0; row-gap: 0; }

/* Un vrai bouton, pour le clavier et les lecteurs d'ecran, mais sans
   l'habillage des boutons d'action. `:hover` est repete parce que la
   regle generale `button:hover` est plus specifique qu'une classe seule. */
.equipe-ligne,
.equipe-ligne:hover {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.equipe-nom { font-weight: 600; }
.equipe-chevron {
  flex: none;
  font-size: 11px;
  color: var(--couleur-texte-tres-discret);
  transition: transform .15s ease;
}
.equipe-chevron.ouvert { transform: rotate(90deg); }

.liste-equipe li.fiche-ouverte { background: var(--couleur-accent-clair); }
/* Pas de decalage au survol sur la fiche ouverte : le transform
   enfermerait ses menus deroulants dans la ligne, cf. plus bas. */
.liste-equipe li.fiche-ouverte:hover { transform: none; }

.equipe-fiche {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 8px 12px;
  padding: 12px 14px;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-clair);
  border-radius: var(--rayon-sm);
}
.equipe-fiche-ligne {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.equipe-fiche-libelle { font-size: 12px; font-weight: 600; color: var(--couleur-texte-att); }
.equipe-fiche-valeur { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .equipe-fiche-ligne { grid-template-columns: 1fr; gap: 4px; }
}



/* ------------------------------------------------------------------ */
/* Recherche dans la barre d'en-tete                                   */
/* ------------------------------------------------------------------ */
/* La recherche n'est plus un onglet : on cherche depuis n'importe quelle
   page, et les resultats s'ouvrent sur le tableau de bord. */

.barre-recherche {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
}
.barre-recherche input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 13.5px;
}
.barre-recherche button { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

.panneau-recherche {
  max-width: 1400px;
  margin: 0 auto 2px;
  width: 100%;
  padding: 16px 28px 20px;
  background: var(--couleur-carte);
  border-bottom: 1px solid var(--couleur-bord-clair);
}

/* En dessous de 900px la barre d'en-tete devient trop chargee : la
   recherche passe a la ligne plutot que d'ecraser le titre. */
@media (max-width: 900px) {
  .barre { flex-wrap: wrap; }
  .barre-recherche { order: 3; flex-basis: 100%; max-width: none; margin: 4px 0 0; }
}


/* ------------------------------------------------------------------ */
/* Assistant : lanceur et fenetre de discussion, facon Messenger       */
/* ------------------------------------------------------------------ */
/* Fenetre ancree en bas a droite plutot que modale centree : on garde
   le tableau de bord sous les yeux pendant qu'on interroge l'assistant.
   `inset: auto X Y auto` partout, pour neutraliser tout left/top herite. */

.chatbot-lanceur {
  position: fixed;
  inset: auto 24px 24px auto;
  z-index: 900;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--couleur-carte);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(17, 26, 46, .26);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}
.chatbot-lanceur:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgba(17, 26, 46, .32); }
.chatbot-lanceur:active { transform: scale(.95); }
.chatbot-lanceur::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent);
  animation: chatbotHalo 2.8s ease-out infinite;
}
@keyframes chatbotHalo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 50%, transparent); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Pastille d'avatar, declinee en trois tailles : lanceur, en-tete,
   et vignette devant chaque reponse comme dans une messagerie. */
.chatbot-avatar-cercle {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--couleur-bord-tres-clair);
}
.chatbot-avatar-cercle.mini { width: 26px; height: 26px; align-self: flex-end; }
.chatbot-avatar-cercle.grand { width: 62px; height: 62px; margin-bottom: 10px; }
.chatbot-avatar { width: 100%; height: 100%; object-fit: contain; display: block; }
.chatbot-repli { font-size: 24px; line-height: 1; }

.chatbot-fenetre {
  position: fixed;
  inset: auto 24px 96px auto;
  z-index: 900;
  width: min(384px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-clair);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(17, 26, 46, .26);
  overflow: hidden;
  transform-origin: bottom right;
  animation: chatbotOuverture .22s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes chatbotOuverture {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* En-tete bleu pleine largeur, comme la barre de conversation Messenger. */
.chatbot-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--acc);
  color: #fff;
}
.chatbot-identite { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.chatbot-nom { font-weight: 700; font-size: 14px; }
.chatbot-etat { font-size: 11px; opacity: .82; }
.chatbot-action {
  border: none; background: transparent; cursor: pointer;
  color: #fff; font-size: 15px; padding: 4px 6px; border-radius: 50%;
  line-height: 1; opacity: .9;
}
.chatbot-action:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

.fil-assistant {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  padding: 14px 12px;
  flex: 1;
  min-height: 170px;
  background: var(--couleur-fond);
}

/* Une rangee = avatar + bulle. L'avatar n'apparait que cote assistant. */
.rangee-bulle { display: flex; align-items: flex-end; gap: 7px; margin-top: 7px; }
.rangee-bulle.de-moi { justify-content: flex-end; }

.bulle-assistant {
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 76%;
  white-space: pre-wrap;
  animation: chatbotBulle .18s ease-out;
}
@keyframes chatbotBulle {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
/* Coin rentrant du cote de l'interlocuteur : la signature Messenger. */
.de-moi .bulle-assistant {
  background: var(--acc);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.de-assistant .bulle-assistant {
  background: var(--couleur-bord-tres-clair);
  color: var(--couleur-texte);
  border-bottom-left-radius: 5px;
}

.chatbot-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px 4px;
}
.chatbot-accueil-titre { margin: 0; font-weight: 700; font-size: 15px; }
.chatbot-exemple {
  border: 1px solid var(--couleur-bord-moyen);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  width: 100%;
}
.chatbot-exemple:hover { border-color: var(--acc); color: var(--acc); }

/* Trois points qui rebondissent, dans une bulle comme un vrai message. */
.chatbot-attente { display: flex; gap: 4px; align-items: center; padding: 11px 13px; }
.chatbot-attente span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--couleur-texte-tres-discret);
  animation: chatbotPoint 1.2s ease-in-out infinite;
}
.chatbot-attente span:nth-child(2) { animation-delay: .16s; }
.chatbot-attente span:nth-child(3) { animation-delay: .32s; }
@keyframes chatbotPoint {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Encadre et teinte : on ne valide pas une ecriture par inadvertance. */
.action-proposee {
  margin: 10px 12px 0;
  padding: 11px 13px;
  border: 1px solid var(--acc);
  border-radius: 12px;
  background: var(--acc-soft);
}

/* Champ en gelule et bouton rond, comme la barre de saisie Messenger. */
.chatbot-saisie {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px 4px;
  background: var(--couleur-carte);
}
.chatbot-saisie input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  padding: 9px 15px;
  background: var(--couleur-fond);
  font-size: 13.5px;
}
.chatbot-envoi {
  flex: none;
  width: 36px; height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chatbot-envoi:disabled { opacity: .4; cursor: default; }

.chatbot-mention {
  margin: 0;
  padding: 4px 14px 10px;
  font-size: 10.5px;
  color: var(--couleur-texte-tres-discret);
  background: var(--couleur-carte);
}

/* Sur telephone la fenetre occupe l'ecran, comme l'application Messenger. */
@media (max-width: 560px) {
  .chatbot-lanceur { inset: auto 14px 14px auto; width: 54px; height: 54px; }
  .chatbot-fenetre {
    inset: auto 8px 8px 8px;
    width: auto;
    max-height: calc(100vh - 16px);
  }
}

/* Respecte le reglage systeme de ceux qui desactivent les animations. */
@media (prefers-reduced-motion: reduce) {
  .chatbot-lanceur, .chatbot-lanceur::after, .chatbot-fenetre,
  .bulle-assistant, .chatbot-attente span {
    animation: none;
    transition: none;
  }
}

/* Jauge d'import documentaire : un import de cent pages dure plusieurs
   minutes, il faut voir que ca avance. */
.jauge-import {
  height: 6px;
  border-radius: 999px;
  background: var(--couleur-bord-tres-clair);
  overflow: hidden;
}
.jauge-import span {
  display: block;
  height: 100%;
  background: var(--acc);
  transition: width .3s ease;
}

/* ------------------------------------------------------------------ */
/* Mon planning : la semaine vue depuis sa propre place                */
/* ------------------------------------------------------------------ */
/* En cartes empilees plutot qu'en tableau : on ne lit ici qu'une seule
   ligne, la sienne. Un tableau obligerait a chercher son nom parmi dix
   sites, ce que la vue « Semaine » fait deja tres bien. */

.mon-planning {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 900px;
  margin: 0 auto;
  padding: 4px 28px 28px;
  width: 100%;
}

.mon-planning-jour {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 16px;
  background: var(--couleur-carte);
  border-left: 3px solid transparent;
}
.mon-planning-jour.jour-actuel {
  border-left-color: var(--acc);
  background: var(--acc-soft);
}

.mon-planning-date {
  flex: 0 0 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  text-transform: capitalize;
}

.mon-planning-contenu {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mon-planning-ligne { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* Largeur fixe pour que les intitules s'alignent d'un jour a l'autre. */
.mon-planning-etiquette {
  flex: 0 0 110px;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
}
.mon-planning-sites { font-size: 14px; font-weight: 600; }

@media (max-width: 700px) {
  .mon-planning-jour { flex-direction: column; gap: 8px; }
  .mon-planning-date { flex-basis: auto; }
  .mon-planning-etiquette { flex-basis: 90px; }
}

/* ------------------------------------------------------------------ */
/* Rail : les sites dont on a la charge aujourd'hui                    */
/* ------------------------------------------------------------------ */
/* Bloc le plus voyant de l'interface, et c'est voulu : sur un rail bleu
   nuit, un jaune sature en texte sombre ressort a la peripherie du regard
   sans qu'on ait a le chercher. Pas d'animation : un element clignotant
   en permanence dans un logiciel qu'on garde ouvert toute la journee
   fatigue et finit par etre ignore, ce qui detruirait l'effet recherche. */

.rail-sites-jour {
  margin: 14px 0 0;
  padding: 11px 12px;
  border-radius: var(--rayon-sm);
  background: #ffe600;
  color: #1a1f2e;
  box-shadow: 0 0 0 2px rgba(255, 230, 0, .28), 0 6px 16px rgba(0, 0, 0, .22);
}

.rail-sites-titre {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 7px;
  opacity: .78;
}

.rail-sites-liste { display: flex; flex-wrap: wrap; gap: 5px; }

.rail-site {
  background: #1a1f2e;
  color: #ffe600;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Couvert a distance : meme bloc, marque en creux plutot qu'en plein,
   pour qu'on distingue d'un coup d'oeil ou l'on est physiquement. */
.rail-site.distant {
  background: transparent;
  color: #1a1f2e;
  border: 1.5px solid rgba(26, 31, 46, .55);
}

/* Astreinte telephonique : meme grammaire que le bloc jaune, une teinte
   plus froide. Le jaune dit ce que j'ai a valider, ce turquoise dit qui
   tient le telephone ; deux jaunes cote a cote se neutraliseraient. En
   creux tant que c'est quelqu'un d'autre, en plein des que c'est nous. */

.rail-astreinte {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--rayon-sm);
  background: transparent;
  color: #7fe3d0;
  border: 1.5px solid rgba(127, 227, 208, .42);
}

.rail-astreinte-titre {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: .72;
}

.rail-astreinte-nom { font-size: 12.5px; font-weight: 700; }
.rail-astreinte-tel { font-size: 11.5px; margin-top: 3px; opacity: .75; }

/* C'est nous : plein, comme le bloc jaune. Ce n'est plus une information
   sur l'equipe, c'est une charge de la journee. */
.rail-astreinte.moi {
  background: #7fe3d0;
  color: #10241f;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(127, 227, 208, .26), 0 6px 16px rgba(0, 0, 0, .22);
}

/* Le jaune reste identique en theme sombre : c'est un signal, pas une
   couleur d'habillage, il ne doit pas s'adoucir avec le reste. */

/* ------------------------------------------------------------------ */
/* Blocs repliables du tableau de bord                                 */
/* ------------------------------------------------------------------ */
/* Meme poids visuel qu'un `.carte h3` suivi de son filet, mais
   cliquable, avec le compteur d'elements a droite. */

.bloc-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 30px 0 0;
  padding: 0 0 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--couleur-bord);
  color: var(--couleur-texte);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.bloc-titre:hover { color: var(--couleur-accent); }
.bloc-titre:hover .bloc-chevron { color: var(--couleur-accent); }

.bloc-libelle { flex: 1; }

.bloc-chevron {
  flex: none;
  font-size: 12px;
  line-height: 1;
  color: var(--couleur-texte-tres-discret);
  transition: transform .15s ease;
}

.bloc-chevron.ouvert { transform: rotate(90deg); }

.bloc-compte {
  flex: none;
  min-width: 24px;
  padding: 3px 8px;
  background: var(--couleur-bord-clair);
  color: var(--couleur-texte-att);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bloc-corps { padding-top: 12px; }

/* ------------------------------------------------------------------ */
/* Tableau de bord tenu dans la hauteur de l'ecran                     */
/* ------------------------------------------------------------------ */
/* La page elle-meme ne defile plus : chaque colonne defile pour son propre
   compte. Aucune hauteur n'est ecrite en dur, la zone est figee a la
   hauteur de l'ecran et la grille prend ce qui reste sous la barre et le
   bandeau : rien a retoucher si l'un des deux change de hauteur. Desactive
   sous la recherche, dont les resultats s'affichent au-dessus de la
   grille, et sur petit ecran ou la mise en page passe en colonne unique. */

.zone-figee {
  height: 100vh;
  overflow: hidden;
}

.zone-figee .vue-dashboard {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.zone-figee .vue-dashboard .bandeau-flash { flex: none; }

.zone-figee .vue-dashboard .dashboard {
  flex: 1;
  min-height: 0;
}

.dashboard-accueil > .carte {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  .zone-figee {
    height: auto;
    overflow: visible;
  }
  .dashboard-accueil > .carte {
    overflow-y: visible;
  }
}

/* ------------------------------------------------------------------ */
/* Rail : le pied reste toujours atteignable                           */
/* ------------------------------------------------------------------ */
/* Le rail est fige a la hauteur de l'ecran. Des que son contenu
   depassait (8 onglets, Pomodoro, sites du jour, astreinte), le nom et le
   bouton Deconnexion sortaient par le bas sans aucun moyen d'y acceder.
   La marque et le pied restent en place, seul le milieu defile. */

.rail-corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;

  /* Barre de defilement masquee : elle coupait le rail en deux dans la
     largeur. Le defilement lui-meme reste actif, a la molette comme au
     doigt, et les espacements ci-dessous sont assez serres pour que le
     rail tienne d'une piece sur un ecran normal. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail-corps::-webkit-scrollbar { width: 0; height: 0; }

/* Chaque bloc portait sa propre marge, qui s'ajoutait au `gap` du
   conteneur : 52px entre le Pomodoro et le bloc jaune, 36px avant
   l'astreinte. Une seule source d'espacement, le `gap`. Le retrait
   lateral du Pomodoro est conserve, il est voulu. */
.rail-corps > .rail-sites-jour { margin: 0; }
.rail-corps > .rail-astreinte { margin: 0; }

.rail-pied { flex: none; }

/* ------------------------------------------------------------------ */
/* Telephone : en-tete compact (audit du 10 septembre 2026, U2)         */
/* ------------------------------------------------------------------ */
/* A 390 px de large, le rail replie en bloc vertical mesurait 540 px, et
   le tableau de bord commencait sous la ligne de flottaison. Les onglets
   passent sur une seule ligne qui defile, la marque se reduit, et les
   blocs d'information se resserrent SANS disparaitre : ce qu'on doit
   valider aujourd'hui reste le premier repere de la journee. */
@media (max-width: 900px) {
  /* Colonne bornee a l'ecran : en `1fr`, elle grandissait jusqu'a la
     largeur de la ligne d'onglets (742 px), et tout debordait avec elle.
     La ligne d'onglets defile desormais a l'interieur. */
  .coque { grid-template-columns: minmax(0, 1fr); }
  .rail, .zone { min-width: 0; }
  .rail { gap: 10px; padding: 12px 14px 10px; }
  .rail-marque { flex-direction: row; align-items: center; gap: 10px; padding: 0; }
  .rail-logo { width: 88px; }
  .rail-sous-marque { display: none; }
  .rail-corps { display: flex; flex-direction: column; gap: 8px; }
  .rail-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-nav button { flex: none; width: auto; padding: 9px 12px; white-space: nowrap; }
  .rail-valideurs { margin-top: 0; padding-top: 8px; }
  .rail-sites-jour, .rail-astreinte { margin: 0; padding: 7px 10px; }
  .rail-pied { flex-direction: row; align-items: center; gap: 10px; padding: 8px 2px 0; }
  .identite-role { display: none; }
  /* L'assistant et le minuteur restent a portee, mais cedent de la place
     au travail sur un ecran de telephone. */
  .chatbot-lanceur { width: 48px; height: 48px; inset: auto 16px 16px auto; }
  .pomodoro-flottant { width: 48px; height: 48px; inset: auto 16px 72px auto; }
}

/* Connexion sur telephone : le formulaire d'abord. Le grand logo et le
   texte de presentation repoussaient le bouton « Se connecter » sous la
   ligne de flottaison. */
@media (max-width: 700px) {
  .connexion-formulaire { order: -1; padding: 20px 16px; }
  .connexion-presentation { padding: 18px 16px; gap: 10px; border-bottom: none; }
  .connexion-logo { width: 140px; }
  .connexion-baseline, .connexion-mentions { display: none; }
}

/* Texte des lignes colorees (urgence, delai) : le gris secondaire tombait
   a 4,37:1 sur le fond rose d'un ticket urgent (audit, U3). */
li.ligne-etat p,
li.ligne-etat .meta { color: var(--couleur-texte-secondaire); }

/* Cibles tactiles du planning : menus et combines de 20 px de haut,
   trop petits pour un doigt (audit, U4). */
.case-select { min-height: 28px; }
.bouton-contact { min-width: 24px; min-height: 24px; }


/* ------------------------------------------------------------------ */
/* Sous-navigation de « Gestion des taches »                           */
/* ------------------------------------------------------------------ */

.sous-nav {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 28px 0;
  box-sizing: border-box;
}

.sous-nav .choix-segmente { margin-top: 0; }

/* Barre de navigation ajustee a son contenu, et non etiree sur toute la
   largeur disponible. Sert aux deux barres de sections : « Gestion des
   taches » et « Parametres > Planning ».

   Elle remplace un `max-width: 460px` calibre pour trois boutons : la
   quatrieme section, ajoutee le 8 septembre 2026, passait a la ligne et
   laissait « Collegues » seul en dessous. Un chiffre plus grand aurait
   tenu jusqu'a la cinquieme, `max-content` tient tout court.

   `max-width: 100%` garde le repli : sur un ecran etroit, la barre
   retombe sur plusieurs lignes plutot que de deborder.

   Le `nowrap` n'est pas decoratif : sans lui « Fiches existantes » se
   coupait en deux DANS son bouton, et c'est aussi lui qui donne a
   `max-content` la bonne largeur a mesurer. */
.choix-segmente.ajustee {
  width: max-content;
  max-width: 100%;
}
.choix-segmente.ajustee button { white-space: nowrap; }

@media (max-width: 900px) {
  .rail-corps {
    overflow-y: visible;
    min-height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Pomodoro flottant, en tomate                                        */
/* ------------------------------------------------------------------ */
/* Pose juste au-dessus du lanceur de Jean-Claude, meme gabarit de 60px
   et meme retrait de 24px, pour que les deux se lisent comme une pile.
   z-index sous la fenetre de discussion, qui s ancre au meme endroit. */

.pomodoro-flottant {
  position: fixed;
  inset: auto 24px 96px auto;
  z-index: 890;
  width: 60px;
  height: 60px;
}

.tomate {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform .15s ease;
}

.tomate:hover { transform: scale(1.08); }
.tomate:active { transform: scale(.95); }

/* Anneau d avancement : rempli au prorata du temps ecoule. */
.tomate::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--tomate-anneau, #ffc247) calc(var(--avancement, 0) * 1turn),
    rgba(255, 255, 255, .22) 0
  );
  -webkit-mask: radial-gradient(circle, transparent 0 27px, #000 28px);
          mask: radial-gradient(circle, transparent 0 27px, #000 28px);
}

.tomate-corps {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .5) 0 6%, transparent 32%),
    radial-gradient(circle at 50% 52%, #f4553f 0%, #dc2f20 56%, #a81a10 100%);
  box-shadow: 0 6px 18px rgba(17, 26, 46, .34);
}

/* Couronne de feuilles, en haut de la tomate. */
.tomate-tige {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 24px;
  height: 13px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4eb257 0%, #2f8038 100%);
  clip-path: polygon(50% 100%, 0% 34%, 21% 48%, 29% 0%, 50% 40%, 71% 0%, 79% 48%, 100% 34%);
}

.tomate-temps {
  position: relative;
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Periode de recuperation : la tomate verdit, on voit d un coup d oeil
   qu on n est plus en train de travailler. */
.tomate-repos { --tomate-anneau: #7fe3d0; }
.tomate-repos .tomate-corps {
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .45) 0 6%, transparent 32%),
    radial-gradient(circle at 50% 52%, #3fae8f 0%, #21876f 56%, #14604f 100%);
}

/* En marche, un battement lent : visible sans etre agitant. */
.tomate-marche .tomate-corps { animation: tomateBat 2.6s ease-in-out infinite; }
@keyframes tomateBat {
  0%, 100% { box-shadow: 0 6px 18px rgba(17, 26, 46, .34); }
  50%      { box-shadow: 0 6px 22px rgba(220, 47, 32, .55); }
}

.tomate-pastille {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 10px;
  border: 2px solid var(--couleur-fond);
  background: var(--acc);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* Remise a zero : discrete, elle ne se montre qu au survol pour ne pas
   encombrer une pastille de 60px, et reste atteignable au clavier. */
/* Deux pastilles au meme gabarit, revelees au survol de la tomate :
   remise a zero a gauche, essai de la sonnerie a droite. Invisibles au
   repos, pour ne pas encombrer un minuteur qu'on ne regarde que par
   intermittence. */
.tomate-remise, .tomate-essai {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--couleur-bord-clair);
  background: var(--couleur-carte);
  color: var(--couleur-texte-att);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}

.tomate-essai { left: auto; right: -6px; }

.pomodoro-flottant:hover .tomate-remise,
.pomodoro-flottant:hover .tomate-essai,
.tomate-remise:focus-visible,
.tomate-essai:focus-visible { opacity: 1; }

@media (max-width: 900px) {
  .pomodoro-flottant { inset: auto 20px 92px auto; }
}

/* ------------------------------------------------------------------ */
/* Blocs du tableau de bord, deplacables entre les colonnes            */
/* ------------------------------------------------------------------ */
/* Chaque colonne est une carte qui deroule les blocs qu on lui a
   donnes. La poignee est le titre du bloc, et lui seul : le reste de la
   carte doit rester cliquable, et les listes de taches gardent leur
   propre glissement, a l interieur du bloc. */

.bloc-dashboard + .bloc-dashboard { margin-top: 26px; }

/* Un bloc pose en tete de colonne ne doit pas garder la marge haute que
   son titre porte quand il suit un autre bloc. */
.bloc-dashboard:first-child > div > .bloc-titre:first-child { margin-top: 0; }

.poignee-bloc {
  cursor: grab;
  /* Le geste appartient au glissement : sans ca, le navigateur mobile
     defile la page des le premier millimetre. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.poignee-bloc:active { cursor: grabbing; }

.bloc-souleve {
  opacity: .55;
  outline: 2px dashed var(--couleur-accent);
  outline-offset: 6px;
  border-radius: var(--rayon-sm);
}

.colonne-cible {
  background: color-mix(in srgb, var(--couleur-accent) 6%, var(--couleur-carte));
  transition: background .12s ease;
}

/* « Mes tâches » gardait son aspect discret parce que sa colonne entiere
   portait la classe secondaire. Le bloc pouvant desormais atterrir dans
   n importe quelle colonne, l aspect voyage avec lui. */
.bloc-secondaire h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* texte-att et non plus texte-tres-discret : 2,87:1 en clair et
     3,65:1 en sombre pour un titre de 11 px, sous le seuil de 4,5:1
     (audit, U3). Le bloc reste secondaire par sa taille et ses capitales. */
  color: var(--couleur-texte-att);
}

.bloc-secondaire .filet { background: var(--couleur-bord-clair); }

/* ------------------------------------------------------------------ */
/* Mes projets en cours                                                */
/* ------------------------------------------------------------------ */
/* Un bloc repliable par projet, plus un dernier pour les taches libres.
   L entete reutilise `.bloc-titre`, le meme composant que les blocs du
   tableau de bord : meme geste, meme aspect, rien de nouveau a apprendre. */

.projet-bloc + .projet-bloc { margin-top: 6px; }

.projet-bloc .bloc-titre { margin-top: 18px; }
.projet-bloc:first-of-type .bloc-titre { margin-top: 8px; }

/* --- Projets dans la colonne du tableau de bord --- */
/* Meme vocabulaire visuel que l onglet, mais resserre : la colonne est
   etroite et partage la hauteur avec les autres blocs. */

.projet-bloc-compact + .projet-bloc-compact { margin-top: 2px; }
.projet-bloc-compact .bloc-titre { margin-top: 10px; }
.projet-bloc-compact:first-of-type .bloc-titre { margin-top: 4px; }
.projet-bloc-compact .liste-taches { margin-left: 6px; }
/* Les projets sont nommes en phrases entieres. Sur une seule ligne, le nom
   se coupait a « et de … » et ne voulait plus rien dire ; sans limite, un
   en-tete occupait cinq lignes de la colonne. Deux lignes est le compromis. */
.projet-bloc-compact .bloc-titre { align-items: flex-start; }
.projet-bloc-compact .bloc-libelle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  line-height: 1.25;
}
/* Le compteur et le chevron restent cales sur la premiere ligne du nom. */
.projet-bloc-compact .bloc-compte,
.projet-bloc-compact .bloc-chevron { margin-top: 1px; }


.projet-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.projet-ajout {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  background: var(--couleur-surface-secondaire);
  border-radius: var(--rayon-sm);
}

.projet-ajout input[type="text"] { flex: 1; min-width: 170px; }
.projet-ajout input[type="date"] { flex: none; }

/* Ligne de tache dans un bloc projet                                  */
/* Le titre passe avant les commandes. Le menu de projet impose 150px et
   les boutons ne rentrent pas : sur une carte etroite, tout ce petit
   monde restait sur la ligne et c'est le libelle qui se pliait en
   quatre. Les commandes descendent maintenant d'un cran, alignees sous
   le titre. */
.projet-bloc .liste-taches li {
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 6px;
}

.projet-bloc .liste-taches li > label { flex: 1 1 100%; min-width: 0; }

/* Le libelle et ses metas se suivent au lieu de s'empiler : une echeance
   n'a pas besoin de sa propre ligne. */
.projet-bloc .liste-taches li > label > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  min-width: 0;
}

.projet-bloc .tache-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  /* Aligne sous le titre, apres la case a cocher et son ecart. */
  margin-left: 32px;
}

/* Le menu peut retrecir ici : il n'ecrase plus rien puisqu'il a sa
   propre ligne, mais il ne doit pas manger toute la largeur. */
.projet-bloc .tache-actions select.champ-inline {
  min-width: 0;
  max-width: 200px;
  padding: 4px 8px;
}

.projet-bloc .tache-actions .piece-jointe-ajout { padding: 4px 9px; }


/* ================================================================== */
/* Tableau de bord : affichage dense                                  */
/*                                                                    */
/* Direction retenue le 2 septembre 2026 sur maquette. Tout est       */
/* portee par .vue-dashboard : les memes classes (.carte,             */
/* .liste-taches, .stat-valeur) servent ailleurs, et l onglet         */
/* Mes taches doit garder son confort de lecture.                     */
/* ================================================================== */

.vue-dashboard .carte { padding: 16px 18px 20px; }

/* Titre de colonne en capitales : le filet qui le suit porte deja la
   separation, le corps de 18px faisait double emploi. */
.vue-dashboard .carte h2 {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.vue-dashboard .liste-taches li {
  gap: 10px;
  padding: 7px 0;
}
.vue-dashboard .liste-taches .libelle { font-size: 13px; line-height: 1.35; }
.vue-dashboard .liste-taches .meta { font-size: 11px; }

/* Une tache faite garde sa place mais quitte le premier plan. */
.vue-dashboard .liste-taches li.faite { background: var(--couleur-surface-secondaire); }

/* Le contenu de la ligne passe en rangee : sans cela l echeance tombait
   sous le titre et coutait une ligne par tache, ce que la densite doit
   justement eviter. Le titre plie, la date reste calee a droite. */
.vue-dashboard .projet-bloc-compact .liste-taches label > span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.vue-dashboard .projet-bloc-compact .liste-taches .libelle { flex: 1; min-width: 0; }

/* L echeance rejoint le bord droit et cesse d etre un pave de texte. */
.vue-dashboard .projet-bloc-compact .liste-taches .puce-echeance {
  margin-left: auto;
  flex: none;
  font-weight: 400;
}
.vue-dashboard .liste-taches .puce-echeance::before { display: none; }

/* Une echeance lointaine n est pas une alerte : elle s affichait en vert
   vif, aussi visible qu un retard. Seules les vraies urgences gardent
   leur couleur. */
.vue-dashboard .liste-taches .puce-echeance.echeance-verte { color: var(--couleur-texte-tres-discret); }

/* En-tete de projet en bandeau teinte : c est ce qui structure la
   colonne d un coup d oeil, sans lire les titres. */
.vue-dashboard .projet-bloc-compact .bloc-titre {
  margin-top: 14px;
  padding: 7px 10px;
  border-bottom: none;
  border-left: 3px solid var(--couleur-bord-moyen);
  background: var(--couleur-badge);
  font-size: 12px;
}
.vue-dashboard .projet-bloc-compact:first-of-type .bloc-titre { margin-top: 6px; }
.vue-dashboard .projet-bloc-compact .bloc-libelle { font-weight: 700; }
.vue-dashboard .projet-bloc-compact .liste-taches { margin-left: 0; }

/* La pastille devient inutile une fois le bandeau teinte : le filet
   gauche porte la meme information, en plus lisible. */
.vue-dashboard .projet-bloc-compact .pastille-projet { display: none; }

.vue-dashboard .bloc-titre[data-couleur="bleu"]   { background: #eef4fd; border-left-color: #1466d8; }
.vue-dashboard .bloc-titre[data-couleur="vert"]   { background: #eaf5ee; border-left-color: #1a7f4b; }
.vue-dashboard .bloc-titre[data-couleur="orange"] { background: #fdf4e6; border-left-color: #d98200; }
.vue-dashboard .bloc-titre[data-couleur="rouge"]  { background: #fdeeec; border-left-color: #c0392b; }
.vue-dashboard .bloc-titre[data-couleur="violet"] { background: #f2eefa; border-left-color: #7048b6; }
.vue-dashboard .bloc-titre[data-couleur="gris"]   { background: #eef1f6; border-left-color: #6b7688; }

@media (prefers-color-scheme: dark) {
  .vue-dashboard .bloc-titre[data-couleur="bleu"]   { background: #16233a; border-left-color: #4f93e4; }
  .vue-dashboard .bloc-titre[data-couleur="vert"]   { background: #142a1f; border-left-color: #3fa46c; }
  .vue-dashboard .bloc-titre[data-couleur="orange"] { background: #2b2113; border-left-color: #e09a33; }
  .vue-dashboard .bloc-titre[data-couleur="rouge"]  { background: #2d1a18; border-left-color: #d9614f; }
  .vue-dashboard .bloc-titre[data-couleur="violet"] { background: #221c33; border-left-color: #9375cf; }
  .vue-dashboard .bloc-titre[data-couleur="gris"]   { background: #1d2438; border-left-color: #8890a3; }
}

/* ================================================================== */
/* Gouttiere des elements flottants                                   */
/*                                                                    */
/* Le pomodoro et le lanceur de Jean-Claude sont en position fixed a  */
/* 24px du bord droit, sur 60px de large : ils occupent les 84        */
/* derniers pixels de la fenetre, quelle que soit sa largeur. Rien ne */
/* les en empechait, si bien qu ils recouvraient la colonne de droite */
/* des que la fenetre etait etroite : a 1366px un libelle de tache    */
/* etait coupe en plein milieu, et dans Parametres > Equipe le bouton */
/* Desactiver disparaissait sous l avatar.                            */
/*                                                                    */
/* La bande est donc reservee sur le contenu. Les deconstruire ou les */
/* deplacer n aurait fait que porter le probleme ailleurs : tant qu   */
/* un element flotte au-dessus du contenu, il faut lui laisser sa     */
/* place. La barre du haut la reprend, les flottants vivant en bas.   */
/* ================================================================== */

:root { --gouttiere-flottants: 84px; }

.zone { padding-right: var(--gouttiere-flottants); }
.zone > .barre { margin-right: calc(-1 * var(--gouttiere-flottants)); }

/* Sous 900px la mise en page passe en colonne unique et chaque pixel
   de largeur compte : la gouttiere se reduit au retrait du bord, le
   contenu pouvant defiler sous les flottants sans rien perdre de
   lisible sur une seule colonne. */
@media (max-width: 900px) {
  :root { --gouttiere-flottants: 0px; }
}

/* ================================================================== */
/* Fiches recurrentes : affichage condense                            */
/*                                                                    */
/* Meme direction que le tableau de bord. Dix-sept fiches occupaient   */
/* 1526px, soit trois ecrans de defilement pour une liste qu on        */
/* parcourt du regard.                                                */
/*                                                                    */
/* Les deux niveaux poses le 20 aout sont conserves : les ramener sur  */
/* une rangee ferait revenir le defaut d origine, ou le titre etait le */
/* seul element a pouvoir ceder et s ecrasait a trois mots par ligne.  */
/* On resserre les espacements, on ne change pas la structure.         */
/* ================================================================== */

.liste-admin li:has(.fiche-recurrente) { padding: 6px 0; }

.fiche-recurrente { gap: 3px; }
.fiche-entete { gap: 12px; }
.fiche-titre { font-weight: 600; font-size: 13.5px; }

/* Les actions restent lisibles mais cessent de dicter la hauteur de la
   ligne : leur remplissage vertical faisait a lui seul 12 des 90px. */
.fiche-actions { gap: 8px; }
.fiche-actions button.lien {
  font-size: 11.5px;
  padding: 3px 9px;
}

.fiche-details { gap: 7px; }
.fiche-details .meta { font-size: 11.5px; }
.fiche-details .badge { font-size: 10px; padding: 2px 6px; }

/* En-tete d un bloc de priorites : le nom du site et son bouton de tri. */
.bloc-priorite-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Tâches en retard                                                     */
/* ------------------------------------------------------------------ */
/* Une occurrence non cochée le jour dit ne disparaît plus : elle reste
   ici jusqu'à ce qu'on la coche. Le bloc se place au-dessus des tâches
   du jour, et il est absent tant qu'il n'y a aucun retard.

   Aucune couleur en dur : uniquement --couleur-erreur et
   --couleur-erreur-clair, toutes deux redéfinies dans le bloc sombre du
   haut de feuille. C'est ce qui évite de reproduire la panne de thème
   sombre du 2 septembre, où des variables n'existaient que dans le
   :root clair. */

.bloc-retard {
  border-left: 3px solid var(--couleur-erreur);
  background: var(--couleur-erreur-clair);
  border-radius: 8px;
  padding: 10px 14px 2px;
  margin-bottom: 16px;
}

.titre-retard {
  margin: 0 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--couleur-erreur);
}

/* Matin et après-midi dans « Travail du site » (0109). Même gabarit que
   le titre des retards, dans la couleur du texte courant. */
.partie-moment + .partie-moment {
  margin-top: 14px;
}

/* Partie vers laquelle on fait glisser une tâche venue de l'autre : le
   relâchement changera le moment de sa fiche. */
.partie-moment.zone-moment-active {
  outline: 2px dashed var(--couleur-accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.titre-moment {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
}

/* Horaires d'ouverture sous le nom du site, planning en ligne (0110).
   Petits et sur plusieurs lignes : la colonne des sites est étroite. */
.horaires-site {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.85;
  white-space: normal;
}

/* La dernière ligne du bloc n'a pas besoin de son filet : le bord du
   bloc fait déjà la séparation. */
.liste-retard li:last-child {
  border-bottom: none;
}

/* Badge de retard en thème sombre.
   .badge-retard est posé plus haut en blanc sur var(--couleur-erreur).
   C'est juste en clair, où cette variable vaut #8c1d0c, mais en sombre elle
   devient #f5a3a3 : du blanc sur du rose clair, mesuré à 1,97:1, illisible.
   Le défaut est antérieur à ce bloc et touche aussi les badges de retard des
   tickets. Le texte passe donc au brun sombre, qui remonte le contraste
   au-dessus de 7:1. */
@media (prefers-color-scheme: dark) {
  .badge-retard { color: var(--couleur-erreur-clair); }
}

/* ==== ESPACES DE TRAVAIL : palettes par metier ==== */
/* Genere par outils-dev/generer-css-espaces.py, ne pas retoucher a la
   main : relancer le script, qui reverifie tous les contrastes.

   Chaque espace ne redefinit que des VARIABLES de couleur. Aucune regle
   de mise en page n est dupliquee, ce qui est tout l interet : les cinq
   espaces partagent le meme dessin, le meme HTML et le meme code, et ne
   different que par leur teinte. Un correctif d interface profite donc
   aux cinq sans etre repete.

   L espace des biologistes garde EXACTEMENT la palette historique de
   BIOX : il n est pas redefini ici, il est l etat par defaut, et rien ne
   bouge pour les onze biologistes du 6 octobre.

   Contrastes : toutes les valeurs ont ete calculees pour tenir 4,5:1 au
   minimum, sur les deux bornes du degrade du rail et dans les deux
   themes. Separation perceptuelle entre espaces : dE76 >= 31 sur les
   rails, >= 45 sur les accents.

   L alerte du rail de l espace Techniciens est ORANGE et non rouge :
   sur un rail rouge, un rouge d alerte ne signale plus rien. */


/* --- Biologistes : palette historique, laissee telle quelle --- */
/* (aucune redefinition : c est l etat par defaut de la feuille) */

/* --- Secrétaires --- */
:root[data-espace="secretaire"] {
  --couleur-accent: #178451;
  --couleur-accent-hover: #147145;
  --couleur-accent-fonce: #0f5735;
  --couleur-accent-clair: #e4fbf0;
  --couleur-accent-selection: #eefcf5;

  --acc: #178451;
  --acc-strong: #147145;
  --acc-soft: #ebfcf4;
  --acc-bord: #d3eee1;

  --nav-fond: #113b28;
  --nav-fond-2: #176d45;
  --nav-clair: #0f854e;
  --nav-texte: #cee1d8;
  --nav-alerte: #ffd3cc;
  --sur-accent: #fff;
}

@media (prefers-color-scheme: dark) {
  :root[data-espace="secretaire"]:not([data-theme="light"]) {
    --couleur-accent: #22c378;
    --couleur-accent-hover: #73e8b1;
    --couleur-accent-fonce: #c6f1dd;
    --couleur-accent-clair: #1c4532;
    --couleur-accent-selection: #183527;
    --acc: #22c378;
    --acc-strong: #73e8b1;
    --acc-soft: #1c4532;
    --acc-bord: #2b5a44;
    --nav-fond: #133223;
    --nav-fond-2: #195539;
    --nav-texte: #a5c3b5;
    --sur-accent: #154730;
  }
}

/* --- Techniciens --- */
:root[data-espace="technicien"] {
  --couleur-accent: #bd3728;
  --couleur-accent-hover: #b33426;
  --couleur-accent-fonce: #8d291e;
  --couleur-accent-clair: #fbe7e4;
  --couleur-accent-selection: #fcefee;

  --acc: #bd3728;
  --acc-strong: #b33426;
  --acc-soft: #fcedeb;
  --acc-bord: #eed5d3;

  --nav-fond: #280e0b;
  --nav-fond-2: #581a13;
  --nav-clair: #df2d19;
  --nav-texte: #c6a39f;
  --nav-alerte: #ff9233;
  --sur-accent: #fff;
}

@media (prefers-color-scheme: dark) {
  :root[data-espace="technicien"]:not([data-theme="light"]) {
    --couleur-accent: #de5242;
    --couleur-accent-hover: #e87e73;
    --couleur-accent-fonce: #f1cac6;
    --couleur-accent-clair: #45201c;
    --couleur-accent-selection: #351b18;
    --acc: #de5242;
    --acc-strong: #e87e73;
    --acc-soft: #45201c;
    --acc-bord: #5a302b;
    --nav-fond: #160a08;
    --nav-fond-2: #371410;
    --nav-texte: #ad8985;
    --sur-accent: #280e0b;
  }
}

/* --- Administratif --- */
:root[data-espace="administratif"] {
  --couleur-accent: #966e08;
  --couleur-accent-hover: #7e5c07;
  --couleur-accent-fonce: #614705;
  --couleur-accent-clair: #fbf5e4;
  --couleur-accent-selection: #fcf8ee;

  --acc: #966e08;
  --acc-strong: #7e5c07;
  --acc-soft: #fcf7eb;
  --acc-bord: #eee6d3;

  --nav-fond: #473915;
  --nav-fond-2: #7a5f1a;
  --nav-clair: #936e10;
  --nav-texte: #e6e1d6;
  --nav-alerte: #ffd9d4;
  --sur-accent: #fff;
}

@media (prefers-color-scheme: dark) {
  :root[data-espace="administratif"]:not([data-theme="light"]) {
    --couleur-accent: #c39622;
    --couleur-accent-hover: #e8c773;
    --couleur-accent-fonce: #f1e5c6;
    --couleur-accent-clair: #45391c;
    --couleur-accent-selection: #352d18;
    --acc: #c39622;
    --acc-strong: #e8c773;
    --acc-soft: #45391c;
    --acc-bord: #5a4c2b;
    --nav-fond: #433719;
    --nav-fond-2: #67521e;
    --nav-texte: #d1cbba;
    --sur-accent: #3d3112;
  }
}

/* --- Qualité --- */
:root[data-espace="qualite"] {
  --couleur-accent: #8e34b2;
  --couleur-accent-hover: #8e34b2;
  --couleur-accent-fonce: #732a90;
  --couleur-accent-clair: #f5e4fb;
  --couleur-accent-selection: #f8eefc;

  --acc: #8e34b2;
  --acc-strong: #8e34b2;
  --acc-soft: #f7ebfc;
  --acc-bord: #e6d3ee;

  --nav-fond: #451957;
  --nav-fond-2: #6c1d8b;
  --nav-clair: #b430e8;
  --nav-texte: #c4accd;
  --nav-alerte: #ff998a;
  --sur-accent: #fff;
}

@media (prefers-color-scheme: dark) {
  :root[data-espace="qualite"]:not([data-theme="light"]) {
    --couleur-accent: #b954e1;
    --couleur-accent-hover: #c773e8;
    --couleur-accent-fonce: #e4c6f1;
    --couleur-accent-clair: #391c45;
    --couleur-accent-selection: #2d1835;
    --acc: #b954e1;
    --acc-strong: #c773e8;
    --acc-soft: #391c45;
    --acc-bord: #4c2b5a;
    --nav-fond: #492259;
    --nav-fond-2: #58206f;
    --nav-texte: #b69fbf;
    --sur-accent: #240d2d;
  }
}

/* --- Le nom de l espace, sous la marque du rail --- */
/* Sans lui, deux espaces ne different que par leur teinte, ce qui ne
   suffit pas : on doit pouvoir LIRE ou l on se trouve, et pas seulement
   le deviner a la couleur. */
.rail-espace {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nav-texte);
}
.rail-espace::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--nav-clair);
  flex: none;
}

/* Selecteur d espace, reserve aux administrateurs. */
.choix-espace {
  width: 100%;
  margin-top: 10px;
  padding: 7px 9px;
  font-size: 13px;
  border-radius: var(--rayon-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.choix-espace option { color: #111; background: #fff; }


/* ==== fin des espaces de travail ==== */

/* ==== PAILLASSES de l espace Techniciens ==== */
/* Genere par outils-dev/generer-css-paillasses.py.

   L espace Techniciens se subdivise en huit paillasses. Elles ne
   recoivent PAS chacune une couleur d espace : a cinq espaces la mesure
   etait deja tendue, a treize elle serait intenable. Le repere premier
   est donc le NOM, ecrit dans le rail sous le nom de l espace, et la
   pastille n est qu un repere second.

   Les pastilles prennent des teintes reparties sur toute la roue et non
   des nuances de rouge : huit rouges consecutifs se mesurent a moins de
   10 d ecart, la ou 25 est le seuil du « tout juste distinct ». Elles
   existent en deux versions, l une pour le rail sombre, l autre pour les
   listes sur fond blanc, chacune verifiee sur son fond. */

.rail-paillasse {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nav-texte);
}

.pastille-paillasse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.pastille-paillasse[data-paillasse="biochimie"] { background: #73b1de; }
.pastille-paillasse[data-paillasse="hematologie"] { background: #de737c; }
.pastille-paillasse[data-paillasse="coag_groupes"] { background: #ba73de; }
.pastille-paillasse[data-paillasse="cobas"] { background: #dea873; }
.pastille-paillasse[data-paillasse="autoimmunite"] { background: #73de9f; }
.pastille-paillasse[data-paillasse="electrophorese"] { background: #ded573; }
.pastille-paillasse[data-paillasse="petite_sero"] { background: #de73ba; }
.pastille-paillasse[data-paillasse="bacteriologie"] { background: #73ded5; }

/* Sur fond clair, les memes teintes sont soutenues : la version du rail
   est calibree pour un aplat sombre et passerait inapercue sur du blanc. */
.note-passation .pastille-paillasse[data-paillasse="biochimie"],
.liste-taches .pastille-paillasse[data-paillasse="biochimie"],
.carte .pastille-paillasse[data-paillasse="biochimie"] { background: #2172ab; }
.note-passation .pastille-paillasse[data-paillasse="hematologie"],
.liste-taches .pastille-paillasse[data-paillasse="hematologie"],
.carte .pastille-paillasse[data-paillasse="hematologie"] { background: #ab212c; }
.note-passation .pastille-paillasse[data-paillasse="coag_groupes"],
.liste-taches .pastille-paillasse[data-paillasse="coag_groupes"],
.carte .pastille-paillasse[data-paillasse="coag_groupes"] { background: #7d21ab; }
.note-passation .pastille-paillasse[data-paillasse="cobas"],
.liste-taches .pastille-paillasse[data-paillasse="cobas"],
.carte .pastille-paillasse[data-paillasse="cobas"] { background: #ab6621; }
.note-passation .pastille-paillasse[data-paillasse="autoimmunite"],
.liste-taches .pastille-paillasse[data-paillasse="autoimmunite"],
.carte .pastille-paillasse[data-paillasse="autoimmunite"] { background: #21ab5a; }
.note-passation .pastille-paillasse[data-paillasse="electrophorese"],
.liste-taches .pastille-paillasse[data-paillasse="electrophorese"],
.carte .pastille-paillasse[data-paillasse="electrophorese"] { background: #aba021; }
.note-passation .pastille-paillasse[data-paillasse="petite_sero"],
.liste-taches .pastille-paillasse[data-paillasse="petite_sero"],
.carte .pastille-paillasse[data-paillasse="petite_sero"] { background: #ab217d; }
.note-passation .pastille-paillasse[data-paillasse="bacteriologie"],
.liste-taches .pastille-paillasse[data-paillasse="bacteriologie"],
.carte .pastille-paillasse[data-paillasse="bacteriologie"] { background: #21aba0; }

/* Selecteur de paillasse, dans le rail. Meme geste que le selecteur de
   site qui existe deja : on change sans se deconnecter, parce qu un
   technicien tourne dans la journee. */
.choix-paillasse {
  width: 100%;
  margin-top: 9px;
  padding: 7px 9px;
  font-size: 13px;
  border-radius: var(--rayon-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.choix-paillasse option { color: #111; background: #fff; }

/* Marque de referent. C est un ROLE porte par la personne et non un
   espace : il n a donc pas de couleur propre, il s ecrit. Le mot
   « referent » designe deja, dans le planning, le biologiste qui couvre
   un site a distance : le libelle porte toujours son secteur pour que
   les deux sens ne se confondent pas. */
.badge-referent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--nav-texte);
  margin-top: 8px;
}
.badge-referent::before { content: "\2605"; font-size: 11px; letter-spacing: 0; }

/* Dans une liste sur fond clair, le meme badge s inverse. */
.carte .badge-referent {
  border-color: var(--couleur-bord);
  color: var(--couleur-texte-att);
}

/* ==== fin des paillasses ==== */

/* De quelle paillasse une releve rend compte. La mention est necessaire
   des qu'on lit plus d'une paillasse : un referent qui suit la
   Bacteriologie et la Petite serologie recevrait sinon deux fils de
   notes melanges sans pouvoir les distinguer.

   Le fond blanc de la note impose la version soutenue des teintes, celle
   des listes : la version du rail est calibree pour un aplat sombre. */
.note-passation .note-paillasse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
}

/* --- Menu au clic droit (15 septembre 2026) ---------------------- */
/* Demande d'Imad : liberer la place prise par les boutons repetes sur
   chaque ligne. Reprend l'apparence de `.menu-deroulant-panneau`, mais
   en `fixed` : il est place au pointeur, hors de tout parent, ce qui
   evite qu'un `overflow` de carte ne le rogne. C'est exactement ce qui
   avait coupe la bulle de consigne le 10 septembre. */
.menu-contextuel {
  position: fixed;
  /* 1500 et non 200, corrige le 16 septembre 2026. A 200 le menu passait
     SOUS le lanceur du chatbot (900), sous le voile de la fiche contact
     (1000) et sous les bulles de consigne (300). Un element transparent
     ou hors champ posé par-dessus laisse le menu parfaitement VISIBLE et
     avale pourtant tous les clics : le bouton s'affiche, prend le focus,
     et ne reçoit jamais rien. C'est exactement le symptôme constaté.
     Reste sous l'alerte (2000), qui doit pouvoir se lire par-dessus. */
  z-index: 1500;
  min-width: 246px;
  max-width: 330px;
  background: var(--couleur-carte);
  /* Bordure franche et ombre portee marquee : le menu doit se detacher
     nettement de la liste sur laquelle il s'ouvre. Demande d'Imad du
     15 septembre 2026, « un menu plus imposant avec un meilleur
     contraste ». */
  border: 2px solid var(--couleur-accent);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(10, 20, 40, .30), 0 2px 8px rgba(10, 20, 40, .16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Enveloppe de chaque entree : `x-for` d'Alpine exige un element
   racine unique, mais cette enveloppe ne doit pas s'interposer dans la
   colonne flex du panneau. `display: contents` la fait disparaitre de la
   mise en page tout en gardant ses enfants. */
.menu-contextuel-item { display: contents; }

.menu-contextuel-titre {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--couleur-accent-fonce);
  background: var(--couleur-accent-clair);
  padding: 8px 10px;
  border-radius: 7px;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coupure entre les gestes du jour et ceux qui touchent la fiche. */
.menu-contextuel-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
  padding: 10px 10px 4px;
  margin: 4px 0 0;
  border-top: 1px solid var(--couleur-bord-moyen);
}

.menu-contextuel button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--couleur-texte);
  text-align: left;
  cursor: pointer;
}

.menu-contextuel-icone {
  width: 20px;
  flex: none;
  text-align: center;
  font-size: 14px;
  color: var(--couleur-texte-discret);
}

/* Survol et focus traites pareil : au clavier on doit voir aussi bien
   qu'a la souris ou l'on se trouve. */
.menu-contextuel button:hover,
.menu-contextuel button:focus-visible {
  background: var(--couleur-accent);
  color: #fff;
  outline: none;
}
.menu-contextuel button:hover .menu-contextuel-icone,
.menu-contextuel button:focus-visible .menu-contextuel-icone { color: #fff; }

.menu-contextuel button.danger { color: var(--couleur-erreur); }
.menu-contextuel button.danger:hover,
.menu-contextuel button.danger:focus-visible { background: var(--couleur-erreur); color: #fff; }
.menu-contextuel button.danger:hover .menu-contextuel-icone,
.menu-contextuel button.danger:focus-visible .menu-contextuel-icone { color: #fff; }

.menu-contextuel button[disabled] { opacity: .45; cursor: default; }

/* La mention « clic droit » qui remplace les boutons retires. En tout
   petit, choix d'Imad du 15 septembre : elle doit se voir sans peser.
   Une classe plutot qu'un style en dur, pour l'ajuster d'un seul
   endroit si elle se revele trop discrete le 6 octobre. */
.indice-clic-droit {
  font-size: 10.5px;
  color: var(--couleur-texte-discret);
  opacity: .65;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Signale discretement qu'une ligne repond au clic droit, sans ajouter
   d'element : un clic droit ne se voit pas, et onze personnes decouvrent
   l'outil le 6 octobre. */
.ligne-menu { cursor: context-menu; }

/* Ligne de tache atteignable au clavier (15 septembre 2026). Le bouton
   « Planifier » retire, la touche Tab doit pouvoir atteindre la ligne,
   sinon on perd l'acces clavier gagne le 10 septembre (audit, U5).
   Entree et la touche Menu ouvrent alors le menu. */
.liste-taches li[tabindex]:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: -2px;
  border-radius: var(--rayon-sm);
}

/* ------------------------------------------------------------------ */
/* Appels au secteur (0116)                                            */
/* ------------------------------------------------------------------ */
/* Un appel est une demande urgente adressee a un secteur. Il partage la
   table des releves mais jamais leur apparence : deux portes, deux
   couleurs. Ces regles sont en fin de fichier a dessein, `.note-passation`
   etant redefinie trois fois plus haut. */

.appel-secteur {
  border-left: 4px solid var(--couleur-erreur);
  border-radius: var(--rayon-sm, 6px);
  background: var(--couleur-erreur-clair);
  padding: 10px 12px 8px;
  margin-bottom: 14px;
}

/* PAS DE CLIGNOTEMENT. Au-dela de trois par seconde, c est un risque
   documente pour les personnes photosensibles et le RGAA l interdit ;
   dans un laboratoire accredite, ce defaut ne vaut pas la peine. Et ce
   qui bouge pendant huit heures devient ce qu on ne voit plus.
   Donc : six pulsations lentes, environ dix secondes, puis un fond plein
   contraste qui ne bouge plus. L attention est captee a l arrivee,
   l ecran reste vivable ensuite. */
@keyframes pulsation-appel {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 29, 12, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(140, 29, 12, .28); }
}

@media (prefers-reduced-motion: no-preference) {
  .appel-secteur.est-neuf {
    animation: pulsation-appel 1.7s ease-in-out 6;
  }
}

.appel-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--couleur-erreur);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* La reference du dossier, en chiffres alignes et detachee du texte : on
   la recopie dans Clarilab, elle doit se lire sans hesitation. */
.appel-dossier {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-moyen);
  border-radius: 4px;
  padding: 1px 7px;
}

.appel-secteur p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; font-weight: 500; }

/* Vu par le secteur : le demandeur est rassure, le volume baisse. Le
   liseré reste, la couleur de fond s en va. */
.appel-secteur.est-vu {
  background: var(--couleur-surface-secondaire);
  border-left-color: var(--couleur-attention);
}
.appel-secteur.est-vu .appel-etiquette { background: var(--couleur-attention); }

/* Contenu efface par la purge des douze heures. */
.appel-secteur.est-purge {
  background: transparent;
  border-left-color: var(--couleur-bord-moyen);
}
.appel-secteur.est-purge p { font-style: italic; color: var(--couleur-texte-discret); font-weight: 400; }

/* Mention sous le champ de texte libre, decision d Imad du 15 septembre. */
.avertissement-appel {
  font-size: 12px;
  font-weight: 600;
  color: var(--couleur-erreur);
  margin: 8px 0 0;
}

/* ------------------------------------------------------------------ */
/* Le rail signale ce qui est arrive (15 septembre 2026)               */
/* ------------------------------------------------------------------ */
/* Demande d Imad : « je veux que l aspect sur le rail change au niveau
   messagerie et que ca clignote ». Jusqu ici un onglet qui avait du neuf
   ne changeait que la COULEUR DE SON TEXTE, plus un point de 7 px. Sur un
   rail sombre et dense, cela ne se voit pas depuis l autre bout de la
   paillasse.

   CE N EST PAS UN CLIGNOTEMENT, pour les memes raisons que les appels :
   au-dela de trois par seconde c est un risque pour les personnes
   photosensibles, et le RGAA l interdit. C est une pulsation lente.

   DIFFERENCE AVEC L APPEL, ET ELLE EST VOULUE : la pulsation d un appel
   s arrete au bout de dix secondes, celle du rail NE S ARRETE PAS. Un
   appel est perissable, il meurt en douze heures ; un message non lu
   attend qu on agisse, et rien ne le fera disparaitre tant que personne
   ne l ouvre. Elle cesse donc au seul geste qui compte : ouvrir. */

.rail-nav button.a-du-neuf {
  /* Repli d abord, pour les navigateurs sans `color-mix` : une teinte
     plate tenue a la main. La declaration suivante la remplace partout
     ou `color-mix` existe, et est simplement ignoree ailleurs. */
  background: rgba(255, 154, 143, .22);
  background: color-mix(in srgb, var(--nav-alerte) 22%, transparent);
  box-shadow: inset 3px 0 0 var(--nav-alerte);
}

/* L onglet actif garde son fond plein : on y est, donc on a vu. */
.rail-nav button.actif.a-du-neuf {
  background: inherit;
  box-shadow: none;
}

@keyframes pulsation-rail {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.45); }
}

@media (prefers-reduced-motion: no-preference) {
  .rail-nav button.a-du-neuf:not(.actif) .point-neuf {
    animation: pulsation-rail 2.4s ease-in-out infinite;
  }
}

/* Le point grossit aussi au repos : qui a desactive les animations doit
   voir la meme information, en fixe. */
.rail-nav button.a-du-neuf .point-neuf {
  width: 9px;
  height: 9px;
  margin-right: 2px;
}

/* ------------------------------------------------------------------ */
/* Journal de la paillasse (0118)                                      */
/* ------------------------------------------------------------------ */
/* Une main courante, pas une file d attente. Le traitement visuel le dit :
   ni pastille d etat, ni case a cocher, ni couleur d urgence. Ce qui se lit
   est le fil de l affaire, entree puis suites. */

.journal-entree {
  border-left: 3px solid var(--couleur-bord-moyen);
  padding: 2px 0 2px 14px;
  margin-bottom: 16px;
}

.journal-entree p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }

/* « A signaler » ne crie pas : c est une main courante, et le niveau
   n appelle pas une action immediate, seulement le regard du biologiste.
   Un liseré et une etiquette suffisent, sans fond ni animation. */
.journal-entree.est-a-signaler {
  border-left-color: var(--couleur-attention);
}

.journal-marque {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--couleur-attention);
  border: 1px solid var(--couleur-attention);
  border-radius: 999px;
  padding: 0 7px;
  margin-bottom: 5px;
}

/* La suite est en retrait sous son entree, et rattachee par un filet : on
   doit voir d un coup d oeil que c est la suite de l affaire du dessus et
   non un evenement de plus. */
.journal-suite {
  margin: 8px 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--couleur-bord-tres-clair);
}

.journal-suite p {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--couleur-texte-secondaire);
}

/* Le bouton « Traiter » d un appel (16 septembre 2026). Exception assumee
   a la regle du 15 qui a retire les boutons de toutes les listes : un
   appel est urgent, et on ne decouvre pas un clic droit quand on est
   presse. La mention « clic droit » reste a cote, en tout petit, pour
   ceux qui connaissent le geste. */
.appel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
}

.appel-actions button {
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Bloc-notes personnel (0122)                                         */
/* ------------------------------------------------------------------ */
/* Le seul ecran de BIOX qui n'appartient qu'a une personne. Le traitement
   visuel le dit a sa maniere : pas de liseré d'urgence, pas d'etiquette
   d'etat, pas de nom d'auteur. Il n'y a rien a trier ni personne a
   attendre, seulement des choses a retrouver. */

.bloc-notes-page { max-width: 780px; }

/* La saisie est en haut et toujours ouverte. Elle est encadree pour se
   distinguer de la liste en dessous, sans quoi la premiere note et le
   champ se confondraient. */
.bloc-note-saisie {
  background: var(--couleur-surface-secondaire);
  border: 1px solid var(--couleur-bord-clair);
  border-radius: var(--rayon-sm);
  padding: 14px;
  margin: 20px 0 26px;
}

.bloc-note-saisie textarea {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 10px;
}

.bloc-note-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bloc-note-recherche {
  display: block;
  font-size: 12px;
  margin-bottom: 18px;
}

.bloc-note-recherche input { padding: 8px 10px; font-size: 13px; width: 100%; }

/* Une note est une carte a part entiere, et non une ligne de liste : on la
   lit pour elle-meme, jamais en la comparant a ses voisines. */
.bloc-note {
  position: relative;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bord-tres-clair);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.bloc-note:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

/* `pre-wrap` : on colle souvent trois lignes dictees au telephone dans une
   note, et les retours a la ligne font toute sa lisibilite. `break-word`
   parce qu'un code d'automate ou une URL collee n'a pas d'espace ou se
   couper, et deborderait la carte. */
.bloc-note-texte {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* L'epinglee se signale par un liseré et la punaise, pas par un fond de
   couleur : elles sont en tete de liste, leur position dit deja l'essentiel,
   et un aplat sur chacune ferait un ecran bariole des qu'il y en a quatre. */
.bloc-note.est-epinglee {
  border-left: 3px solid var(--couleur-accent);
  padding-left: 12px;
}

.bloc-note-punaise {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  opacity: .75;
}

.bloc-note.est-epinglee .bloc-note-texte { padding-right: 26px; }

/* Celle qu'on est en train de modifier reste reperable pendant qu'on tape
   en haut de l'ecran, sans quoi on ne sait plus laquelle on corrige. */
.bloc-note.en-edition {
  border-color: var(--couleur-accent);
  background: var(--couleur-accent-selection);
}

/* L etat de l enregistrement automatique (16 septembre 2026). Discret par
   construction : il apparait sous le champ, la ou les yeux sont deja, et
   il ne doit jamais tirer le regard plus que le texte qu on est en train
   d ecrire. C est une confirmation, pas une alerte. */
.bloc-note-etat {
  margin: 0;
  flex: 1;
  font-size: 12px;
  color: var(--couleur-texte-discret);
  transition: color .2s ease;
}

/* Seul l etat « enregistre » prend une couleur, et c est le vert du succes
   deja employe partout ailleurs. Les deux autres restent gris : annoncer
   en couleur qu il ne s est encore rien passe ferait clignoter la ligne a
   chaque frappe. */
.bloc-note-etat.etat-enregistre { color: var(--couleur-succes); font-weight: 600; }

.bloc-note-rappel { margin: -14px 0 18px; }