:root {
  --fond: #f4f3ef; --carte: #fff; --texte: #1c1d20; --doux: #686a70; --trait: #e0ded8;
  --travaille: #2f6fde; --attente: #c9730a; --autorisation: #c8352b; --fini: #8b8d93;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14161a; --carte: #1e2126; --texte: #eceded; --doux: #9a9da4; --trait: #30343b;
    --travaille: #6d9df0; --attente: #eba23e; --autorisation: #f0705f; --fini: #777a80;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: max(16px, env(safe-area-inset-top)) 16px 32px;
  background: var(--fond); color: var(--texte);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
header, main { max-width: 640px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
h1 { margin: 0; font-size: 26px; }
#resume { margin: 2px 0 0; color: var(--doux); font-size: 14px; }
button { font: inherit; }
.discret { background: none; border: 0; color: var(--doux); padding: 8px 0 8px 12px; }

.carte {
  display: block; margin-bottom: 10px; padding: 14px; border-radius: 12px;
  background: var(--carte);
  border-left: 4px solid var(--couleur, var(--fini));
}
.lien { display: block; color: inherit; text-decoration: none; }
.retirer {
  display: block; width: 100%; margin-top: 12px; padding: 14px; border-radius: 10px;
  background: #c8352b; color: #fff; font-size: 17px; font-weight: 700;
}
.travaille { --couleur: var(--travaille); }
.attend_reponse { --couleur: var(--attente); }
.attend_autorisation { --couleur: var(--autorisation); }
.silence, .terminee, .termine { --couleur: var(--fini); }
.terminee { opacity: .7; }

.tete { display: flex; align-items: center; gap: 8px; }
.projet { flex: 1; min-width: 0; overflow-wrap: anywhere; }
time { flex: none; color: var(--doux); font-size: 13px; }
.pastille { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--couleur, var(--fini)); }
.travaille > .tete .pastille, .agent.travaille .pastille { animation: battement 1.6s ease-in-out infinite; }
@keyframes battement { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pastille { animation: none !important; } }

.etat { margin: 6px 0 0; color: var(--couleur, var(--fini)); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dossier, .taches { margin: 4px 0 0; color: var(--doux); font-size: 13px; }
.message { margin: 8px 0 0; font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.agents { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--trait); }
.agent { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 3px 0; font-size: 14px; }
.detail { color: var(--doux); font-size: 13px; }
.vide { color: var(--doux); text-align: center; padding: 48px 0; }

.connexion { display: grid; place-items: center; min-height: 100dvh; }
.connexion form { width: min(340px, 100%); display: grid; gap: 10px; }
.connexion input, .connexion button { padding: 12px; border-radius: 10px; border: 1px solid var(--trait); font-size: 16px; }
.connexion input { background: var(--carte); color: var(--texte); }
.connexion button { background: var(--travaille); color: #fff; border: 0; font-weight: 600; }
.erreur { margin: 0; min-height: 1.4em; color: var(--autorisation); font-size: 14px; }