:root {
  --bleu: #4472C4;
  --bleu-fonce: #2F5597;
  --fond: #F5F7FB;
  --carte: #FFFFFF;
  --texte: #1F2937;
  --doux: #6B7280;
  --ligne: #E5E7EB;
  --vert: #15803D;
  --orange: #C2410C;
  --rouge: #B91C1C;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--texte); background: var(--fond); }
a { color: var(--bleu-fonce); }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 17px; margin: 0 0 12px; }

/* Barre du haut */
.barre { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--bleu); color: #fff; flex-wrap: wrap; }
.barre a { color: #fff; text-decoration: none; }
.logo { font-weight: 700; font-size: 17px; }
.logo span { font-weight: 400; opacity: .85; }
.barre nav { display: flex; gap: 18px; align-items: center; flex: 1; }
.bouton-nouveau { background: #fff; color: var(--bleu-fonce) !important; padding: 5px 12px; border-radius: 6px; font-weight: 600; }
.moi { font-size: 13px; opacity: .95; }

/* Compteurs */
.compteurs { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 20px; background: #E8EEF9; border-bottom: 1px solid #C9D6EE; }
.compteur { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 6px 4px 10px; font-size: 13px; }
.compteur.marche { border-color: var(--vert); box-shadow: 0 0 0 1px var(--vert) inset; }
.compteur.pause { opacity: .75; }
.compteur strong { font-variant-numeric: tabular-nums; min-width: 58px; }
.compteur form { display: flex; gap: 4px; margin: 0; }
.compteur button { border: 1px solid #C9D6EE; background: #fff; color: var(--bleu-fonce); border-radius: 6px; cursor: pointer; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.compteur button[value=compteur_arreter] { color: var(--rouge); border-color: #F1C4C4; }
.compteur a { white-space: nowrap; }
@media (max-width: 700px) {
  table { display: block; overflow-x: auto; }
  .titre-court { max-width: 110px; }
  .compteur { flex-wrap: wrap; max-width: 100%; }
  .compteurs { padding: 8px 12px; }
}
.titre-court { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); }

/* Cartes et grilles */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.grille { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.grille > div { min-width: 0; }
@media (max-width: 860px) { .grille { grid-template-columns: 1fr; } }

/* Formulaires */
label { display: block; font-size: 13px; color: var(--doux); margin: 10px 0 3px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid #CBD2DC; border-radius: 6px; font: inherit; background: #fff;
}
textarea { min-height: 80px; resize: vertical; }
.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
button, .bouton { display: inline-block; background: var(--bleu); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.secondaire, .bouton.secondaire { background: #fff; color: var(--bleu-fonce); border: 1px solid #C9D6EE; }
button.danger { background: #fff; color: var(--rouge); border: 1px solid #F1C4C4; }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.aide { font-size: 12px; color: var(--doux); }

/* Filtres et tableaux */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filtres > div { min-width: 160px; }
.filtres label { margin-top: 0; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); background: #FAFBFD; }
tr:hover td { background: #FAFCFF; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td:first-child, td.date { white-space: nowrap; }
.vide { color: var(--doux); padding: 20px; text-align: center; }

/* Pastilles */
.pastille { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-nouveau { background: #E0EAFB; color: var(--bleu-fonce); }
.st-en_cours { background: #DCFCE7; color: var(--vert); }
.st-attente_client, .st-attente_viridem { background: #FEF3C7; color: #92400E; }
.st-resolu, .st-ferme { background: #F3F4F6; color: var(--doux); }
.pr-1 { background: #FEE2E2; color: var(--rouge); }
.pr-2 { background: #FFEDD5; color: var(--orange); }
.pr-3 { background: #F3F4F6; color: var(--texte); }
.pr-4 { background: #F3F4F6; color: var(--doux); }

/* Messages */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: #DCFCE7; color: #14532D; }
.flash.erreur { background: #FEE2E2; color: #7F1D1D; }
.fil { border-left: 3px solid var(--ligne); padding: 6px 0 6px 12px; margin-bottom: 12px; }
.fil.recu { border-color: var(--bleu); }
.fil.envoye { border-color: var(--vert); }
.fil.note { border-color: #F59E0B; background: #FFFBEB; }
.fil .meta { font-size: 12px; color: var(--doux); }
.fil .corps { white-space: pre-wrap; }
dl.infos { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
dl.infos dt { color: var(--doux); }
dl.infos dd { margin: 0; }

/* Connexion */
.connexion { max-width: 380px; margin: 10vh auto; }
.connexion h1 { color: var(--bleu-fonce); }