:root {
  --bleu: #1f4e79;
  --bleu-clair: #e8f0f8;
  --texte: #1d2733;
  --gris: #5f6b78;
  --bordure: #d5dce4;
  --fond: #f4f6f9;
  --blanc: #ffffff;
  --vert: #1e7b34;
  --vert-fond: #e4f4e8;
  --orange: #a85a00;
  --orange-fond: #fff1dc;
  --rouge: #b3261e;
  --rouge-fond: #fde8e6;
  --rayon: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--fond);
}

a { color: var(--bleu); }

code { background: var(--bleu-clair); padding: 0 4px; border-radius: 4px; font-size: 0.92em; word-break: break-all; }

h1 { font-size: 1.45rem; margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.7rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  padding: 0.6rem 1rem;
  background: var(--bleu);
  color: var(--blanc);
}

.marque { color: var(--blanc); font-weight: 700; text-decoration: none; font-size: 1.05rem; }

.menu { display: flex; flex-wrap: wrap; gap: 0.2rem 0.3rem; align-items: center; }

.menu a, .menu .lien {
  color: var(--blanc);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  font-size: 0.95rem;
}

.menu a[aria-current="page"], .menu a:hover, .menu .lien:hover { background: rgba(255, 255, 255, 0.18); }

.lien { background: none; border: none; cursor: pointer; font: inherit; }

.en-ligne { display: inline; margin: 0; }

.contenu { max-width: 1200px; margin: 0 auto; padding: 1rem; }

.pied { text-align: center; color: var(--gris); font-size: 0.82rem; padding: 1.5rem 1rem; }

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1rem;
}

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.grille > .carte { margin-bottom: 0; }
.grille + .carte, .grille + section { margin-top: 1rem; }

.titre-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }

.alerte { padding: 0.7rem 1rem; border-radius: var(--rayon); margin: 0 0 1rem; }
.alerte.succes { background: var(--vert-fond); border: 1px solid #b9dfc3; }
.alerte.erreur { background: var(--rouge-fond); border: 1px solid #f2b8b5; color: #7a1a14; }

.bouton {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--bleu);
  border-radius: 6px;
  background: var(--blanc);
  color: var(--bleu);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.bouton:hover { background: var(--bleu-clair); }
.bouton.principal { background: var(--bleu); color: var(--blanc); }
.bouton.principal:hover { background: #173b5c; }
.bouton.discret { border-color: var(--bordure); color: var(--texte); }
.bouton.petit { padding: 0.25rem 0.55rem; font-size: 0.85rem; }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.formulaire { display: flex; flex-direction: column; gap: 0.35rem; }
.formulaire label { font-weight: 600; font-size: 0.92rem; margin-top: 0.4rem; }
.formulaire label.case, .cases label { font-weight: 400; }
.formulaire .boutons, .boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.formulaire > .bouton { align-self: flex-start; margin-top: 0.6rem; }

input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="email"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font: inherit;
  background: var(--blanc);
  color: var(--texte);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, .bouton:focus-visible { outline: 2px solid #5b9bd5; outline-offset: 1px; }

.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.2rem 1rem; }
.deux-colonnes > div { display: flex; flex-direction: column; gap: 0.35rem; }
.cases { display: flex; flex-direction: row; gap: 1rem; align-items: center; }

.en-ligne-large { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.en-ligne-large input[type="text"], .en-ligne-large select { width: auto; flex: 1 1 200px; }
.en-ligne-large label { margin-top: 0; }

.filtres { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
.filtres .champ { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 150px; }
.filtres .champ.large { flex: 2 1 240px; }
.filtres .champ.cases { flex-direction: row; flex: 0 1 auto; }
.filtres .champ.boutons { flex-direction: row; flex: 0 1 auto; margin-top: 0; }
.filtres label { font-size: 0.85rem; font-weight: 600; }
.filtres .cases label { font-weight: 400; font-size: 0.92rem; }

.resume { margin: 0 0 0.6rem; }
.aide { color: var(--gris); font-size: 0.86rem; }
.aide.bloquant { color: var(--rouge); }
.vide { color: var(--gris); font-style: italic; }

.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: 0.93rem; }
.tableau th, .tableau td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.tableau th { background: var(--bleu-clair); font-size: 0.85rem; white-space: nowrap; }
.tableau tr.inactif td { color: var(--gris); }
.sous-ligne { display: none; color: var(--gris); font-size: 0.82rem; }

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eceff3;
  color: var(--texte);
  white-space: nowrap;
  vertical-align: middle;
}
.statut-ouvert { background: #dbe9f8; color: #134272; }
.statut-en-cours { background: #fff1dc; color: #7a4100; }
.statut-clos { background: #e4e7eb; color: #3f4a55; }
.prio-urgente { background: var(--rouge-fond); color: var(--rouge); }
.prio-haute { background: var(--orange-fond); color: var(--orange); }
.prio-normale { background: #e4ecf4; color: #24496d; }
.prio-basse { background: #eef0f2; color: #4b5560; }
.a-rattacher { background: #fff3c4; color: #6b5300; }
.historique { background: #ece6f6; color: #4d3576; }
.badges { margin: -0.4rem 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }

.delai { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.delai-vert { background: var(--vert-fond); color: var(--vert); }
.delai-orange { background: var(--orange-fond); color: var(--orange); }
.delai-rouge { background: var(--rouge-fond); color: var(--rouge); }
.delai-gris { background: #eceff3; color: var(--gris); }
.delai-carte.delai-fond-vert { border-left: 6px solid var(--vert); }
.delai-carte.delai-fond-orange { border-left: 6px solid var(--orange); }
.delai-carte.delai-fond-rouge { border-left: 6px solid var(--rouge); }
.delai-carte.delai-fond-gris { border-left: 6px solid var(--bordure); }
.delai-grand .delai { font-size: 1.05rem; padding: 0.3rem 0.7rem; }

.infos { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.infos dt { color: var(--gris); font-size: 0.9rem; }
.infos dd { margin: 0; }

.texte { white-space: pre-wrap; overflow-wrap: anywhere; }

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.indicateur {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem;
  border-radius: var(--rayon);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-top: 5px solid var(--bleu);
  text-decoration: none;
  color: var(--texte);
}
.indicateur .valeur { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.indicateur .libelle { color: var(--gris); font-size: 0.9rem; }
.indicateur.en-cours { border-top-color: var(--orange); }
.indicateur.clos { border-top-color: var(--vert); }
.indicateur.retard { border-top-color: var(--rouge); }

.repartition { width: 100%; border-collapse: collapse; }
.repartition th { text-align: left; width: 6.5rem; padding: 0.3rem 0; }
.repartition .barre { padding: 0.3rem 0.6rem; }
.repartition progress { width: 100%; height: 0.9rem; accent-color: var(--bleu); }
.repartition .nombre { width: 3rem; text-align: right; font-weight: 600; }

.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { padding: 0.5rem 0; border-bottom: 1px solid var(--bordure); }
.liste-simple li:last-child { border-bottom: none; }
.quand { color: var(--gris); font-size: 0.82rem; margin-right: 0.4rem; }
.extrait { color: var(--texte); font-size: 0.92rem; overflow-wrap: anywhere; }

.fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.bulle { max-width: 85%; padding: 0.55rem 0.75rem; border-radius: 12px; border: 1px solid var(--bordure); }
.bulle.recue { align-self: flex-start; background: var(--blanc); border-top-left-radius: 3px; }
.bulle.envoyee { align-self: flex-end; background: #dcf3e2; border-color: #bfe3c9; border-top-right-radius: 3px; }
.bulle.accuse { background: #eef6f0; }
.bulle .tete { font-size: 0.8rem; color: var(--gris); margin-bottom: 0.2rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.bulle img { max-width: 100%; max-height: 320px; border-radius: 6px; display: block; margin-top: 0.3rem; }
.bulle audio { width: 100%; max-width: 360px; margin-top: 0.3rem; }
.bulle video { width: 100%; max-width: 420px; max-height: 360px; border-radius: 6px; display: block; margin-top: 0.3rem; background: #000; }
.transcription { font-size: 0.82rem; color: var(--gris); margin-top: 0.2rem; }
.texte-lu { font-size: 0.86rem; margin-top: 0.3rem; }
.texte-lu summary { cursor: pointer; color: var(--bleu); }
.actions-fiche { margin: 0.8rem 0 0.2rem; }
.media-refuse, .erreur-envoi { display: block; font-size: 0.86rem; color: var(--rouge); margin-top: 0.3rem; }
.etat-envoi { font-weight: 600; color: var(--texte); }
.reponse { margin-top: 1rem; border-top: 1px solid var(--bordure); padding-top: 0.6rem; }

.notes { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.notes li { background: #fffbea; border: 1px solid #f0e3a8; border-radius: 6px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; }
.notes .tete { font-size: 0.8rem; color: var(--gris); }

.clore summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.clore[open] summary { margin-bottom: 0.6rem; }

.messagerie { list-style: none; margin: 0; padding: 0; }
.messagerie li { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: 0.5rem; padding: 0.4rem 0.8rem 0.5rem; }
.messagerie li > a:first-child { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; text-decoration: none; color: var(--texte); padding: 0.2rem 0; }
.messagerie .qui { font-weight: 700; }
.messagerie .numero { color: var(--gris); font-size: 0.88rem; }
.messagerie .quand { text-align: right; }
.messagerie .extrait, .messagerie .badges { grid-column: 1 / -1; margin: 0; }
.messagerie .badges { font-size: 0.82rem; color: var(--gris); }

.liste-reglages { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.liste-reglages li { padding: 0.35rem 0; border-bottom: 1px solid var(--bordure); }

.connexion { max-width: 420px; margin: 2rem auto; }
.code-provisoire { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; user-select: all; }

@media (max-width: 720px) {
  .contenu { padding: 0.6rem; }
  h1 { font-size: 1.25rem; }
  .col-secondaire { display: none; }
  .sous-ligne { display: block; }
  .bulle { max-width: 100%; }
  .infos { grid-template-columns: 1fr; gap: 0.1rem; }
  .infos dd { margin-bottom: 0.4rem; }
  .menu a, .menu .lien { padding: 0.35rem 0.45rem; font-size: 0.9rem; }
  .indicateur .valeur { font-size: 1.6rem; }
}