/* Charte Espace RH (kit ACO EspaceRH 2023) : marine #003366, framboise #cc3366,
   police Designosaur (titres). */
@font-face {
  font-family: "Designosaur";
  src: url("/static/fonts/Designosaur.ttf") format("truetype");
  font-display: swap;
}

:root {
  --marine: #003366;
  --marine-clair: #0d4a80;
  --framboise: #cc3366;
  --framboise-claire: #ec6f9c;
  --accent: #cc3366;
  --accent-fonce: #a82a55;
  --fond: #f4f6fa;
  --carte: #ffffff;
  --texte: #22304a;
  --texte-doux: #64748b;
  --bordure: #e2e8f0;
  --succes: #15803d;
  --erreur: #b91c1c;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.disposition { display: flex; min-height: 100vh; }

/* ---------- Menu latéral ---------- */
.menu {
  width: 230px; flex-shrink: 0;
  background: var(--marine); color: #cbd5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.logo {
  padding: 20px; color: #fff; font-size: 1.3rem;
  font-family: "Designosaur", -apple-system, sans-serif;
  display: flex; align-items: center; gap: 12px;
}
.logo img { width: 42px; height: 42px; background: #fff; border-radius: 10px; padding: 3px; flex-shrink: 0; }
.logo span { color: var(--framboise-claire); }
.logo small { display: block; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 600; color: #94a3b8; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.menu nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.menu nav a {
  display: block; padding: 9px 20px; color: #cbd5e1; font-size: 0.92rem;
  border-left: 3px solid transparent;
}
.menu nav a:hover { background: var(--marine-clair); color: #fff; text-decoration: none; }
.menu nav a.actif { background: var(--marine-clair); color: #fff; border-left-color: var(--framboise-claire); }
.menu nav .separateur { margin: 10px 20px 4px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7f95b3; }
.menu-pied { padding: 14px 20px; border-top: 1px solid #1a4d80; font-size: 0.85rem; }
.menu-pied small { color: #94a3b8; }
.menu-pied a { display: inline-block; margin-top: 6px; color: var(--framboise-claire); }

/* ---------- Contenu ---------- */
main { flex: 1; padding: 28px 34px 60px; max-width: 1200px; }

.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.entete-page h1 { font-size: 1.45rem; font-family: "Designosaur", -apple-system, sans-serif; color: var(--marine); font-weight: 400; }
.entete-page .sous-titre { color: var(--texte-doux); font-size: 0.92rem; margin-top: 2px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

h2 { font-size: 1.05rem; margin: 26px 0 10px; }
.entete-groupe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.entete-groupe h2 a { color: var(--marine); }

/* ---------- Cartes & statistiques ---------- */
.carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; padding: 14px 18px; }
.stat .valeur { font-size: 1.7rem; font-weight: 700; color: var(--marine); }
.stat .intitule { font-size: 0.82rem; color: var(--texte-doux); }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; }
.tableau th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-doux); padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--bordure); }
.tableau td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.tableau tr:last-child td { border-bottom: none; }
.tableau .vide { color: var(--texte-doux); text-align: center; padding: 24px; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.badge-ouverte, .badge-brouillon, .badge-non_cree { background: #fef3c7; color: #92400e; }
.badge-deposee, .badge-en_cours, .badge-envoye { background: #dbeafe; color: #1d4ed8; }
.badge-validee, .badge-repondue { background: #e0e7ff; color: #4338ca; }
.badge-traitee, .badge-signe, .badge-actif, .badge-envoyee { background: #dcfce7; color: #166534; }
.badge-cloturee, .badge-fermee, .badge-archive, .badge-sorti, .badge-inactif { background: #e2e8f0; color: #475569; }
.badge-suspendu, .badge-erreur { background: #fee2e2; color: #b91c1c; }
.badge-simulee { background: #f3e8ff; color: #7e22ce; }

/* ---------- Boutons ---------- */
.bouton, button.bouton {
  display: inline-block; padding: 8px 16px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.bouton:hover { background: var(--accent-fonce); text-decoration: none; }
.bouton-secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bordure); }
.bouton-secondaire:hover { background: #f8fafc; }
.bouton-danger { background: #fff; color: var(--erreur); border: 1px solid #fecaca; }
.bouton-danger:hover { background: #fef2f2; }
.bouton-petit { padding: 4px 10px; font-size: 0.8rem; }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.formulaire .pleine-largeur { grid-column: 1 / -1; }
.formulaire label, .champ label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--texte-doux); margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="month"], input[type="file"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bordure); border-radius: 8px;
  font-family: inherit; font-size: 0.92rem; background: #fff; color: var(--texte);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #f0b9cd; border-color: var(--accent); }
.formulaire-ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.formulaire-ligne > div { flex: 1; min-width: 130px; }

/* ---------- Messages flash ---------- */
.flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.92rem; }
.flash-succes { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash-erreur { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* ---------- Connexion ---------- */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--marine); }
.boite-connexion { background: #fff; border-radius: 14px; padding: 38px 36px; width: 380px; max-width: 92vw; }
.logo-complet { text-align: center; padding-bottom: 18px; }
.logo-complet img { width: 190px; max-width: 100%; }
.logo-complet small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--texte-doux); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.boite-connexion label { margin-top: 12px; }
.boite-connexion .bouton { width: 100%; margin-top: 18px; padding: 10px; }

/* ---------- Fils de discussion (questions) ---------- */
.message-fil { border: 1px solid var(--bordure); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.message-fil.equipe { border-left: 4px solid var(--accent); }
.message-fil .auteur { font-size: 0.82rem; color: var(--texte-doux); margin-bottom: 6px; }
.message-fil p { white-space: pre-wrap; }

.liste-simple { list-style: none; }
.liste-simple li { padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.liste-simple li:last-child { border-bottom: none; }
.texte-doux { color: var(--texte-doux); font-size: 0.88rem; }
.encadre-info { background: #e9f0f7; border: 1px solid #c6d8ea; border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px; }

@media (max-width: 900px) {
  .disposition { flex-direction: column; }
  .menu { width: 100%; height: auto; position: static; }
  main { padding: 18px; }
  .formulaire { grid-template-columns: 1fr; }
}

/* ---------- Base documentaire & simulateur ---------- */
.cycle-procedure { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; padding: 6px 18px; margin-bottom: 18px; }
.etape-procedure { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.etape-procedure:last-child { border-bottom: none; }
.etape-numero { width: 26px; height: 26px; border-radius: 50%; background: var(--marine); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; }
.etape-titre { font-weight: 700; margin-bottom: 3px; }
.grille-fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.carte-vigilance { border-left: 4px solid var(--framboise); }