:root{
  --bg:#090d14; --bg2:#101720; --bg3:#162131; --bg4:#0c121b;
  --tx:#edf2f7; --tx2:#a7b0bf; --tx3:#748094;
  --bd:#263244; --bd2:#334257;
  --cyan:#22d3ee; --violet:#8b5cf6; --vert:#22c55e; --orange:#f59e0b; --rouge:#ef4444;
  --shadow:0 20px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 360px at 82% -10%, rgba(56,189,248,.14), transparent 64%),
    radial-gradient(720px 320px at 8% 2%, rgba(139,92,246,.16), transparent 62%),
    linear-gradient(180deg,#090d14 0%,#0b1018 48%,#080b11 100%);
  color:var(--tx);font-family:Segoe UI,Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15.5px;line-height:1.6;
}
a{color:#7dd3fc;text-decoration:none} a:hover{text-decoration:underline}

/* topbar */
.topbar{border-bottom:1px solid var(--bd2);background:rgba(16,23,32,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.topbar-inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none}
.logo:hover{text-decoration:none}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0891b2,#7c3aed);font-weight:900;color:#fff}
.logo-texte{font-size:15px;letter-spacing:.02em}
.logo-texte b{color:#a5f3fc}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{padding:7px 12px;border-radius:9px;color:var(--tx2);font-size:13.5px}
.nav a:hover{background:rgba(56,189,248,.08);color:var(--tx);text-decoration:none}
.nav a.actif{background:rgba(56,189,248,.14);color:#a5f3fc;font-weight:700}
.compte{margin-left:auto;display:flex;align-items:center;gap:10px}
.nom{color:var(--tx);font-weight:700;font-size:13.5px}
.role{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.role-admin{color:#ddd6fe;border:1px solid rgba(139,92,246,.55);background:rgba(139,92,246,.17)}
.role-lecteur{color:#a5f3fc;border:1px solid rgba(34,211,238,.45);background:rgba(34,211,238,.10)}

/* contenu */
.contenu{flex:1;max-width:1120px;width:100%;margin:0 auto;padding:34px 24px 60px}
.entete-page{margin-bottom:26px}
.entete-page h1{font-size:30px;letter-spacing:-.03em}
.sous-titre{color:var(--tx2);margin-top:4px}
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0}
.carte{background:rgba(16,23,32,.72);border:1px solid var(--bd2);border-radius:16px;padding:18px}
.carte b{display:block;margin-bottom:6px}
.carte p{color:var(--tx2);font-size:14px;margin-bottom:12px}
.carte.kpi{display:flex;flex-direction:column;gap:4px}
.kpi-valeur{font-size:30px;font-weight:900;letter-spacing:-.03em}
.kpi-libelle{color:var(--tx2);font-size:14px}
.kpi-note{color:var(--tx3);font-size:12px}

/* boutons */
.bouton{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent}
.bouton-primaire{background:linear-gradient(135deg,#0891b2,#7c3aed);color:#fff}
.bouton-primaire:hover{filter:brightness(1.1);text-decoration:none}
.bouton-fantome{border-color:var(--bd2);color:var(--tx);background:rgba(22,33,49,.72)}
.bouton-fantome:hover{background:rgba(56,189,248,.08);text-decoration:none}

/* login */
.carte-login{max-width:420px;margin:60px auto;background:rgba(16,23,32,.78);border:1px solid var(--bd2);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.carte-login h1{font-size:24px;margin-bottom:4px}
.alerte{border-radius:10px;padding:10px 14px;margin:14px 0;font-size:14px}
.alerte.erreur{border:1px solid rgba(239,68,68,.45);background:rgba(239,68,68,.08);color:#fca5a5}
.formulaire{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.formulaire label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tx2);font-weight:600}
.formulaire input{padding:10px 13px;border-radius:10px;border:1px solid var(--bd2);background:rgba(10,14,20,.7);color:var(--tx);font-size:14.5px}
.formulaire input:focus{outline:none;border-color:var(--cyan)}

.pied{margin-top:auto;border-top:1px solid var(--bd2);padding:18px 24px;color:var(--tx3);font-size:13px;text-align:center}

/* -------- P2 : boucle de validation -------- */
.badge{display:inline-flex;align-items:center;border-radius:999px;font-size:11px;font-weight:800;padding:3px 10px;letter-spacing:.05em}
.badge.pc{color:#ddd6fe;border:1px solid rgba(139,92,246,.55);background:rgba(139,92,246,.17)}
.badge.rp{color:#fde68a;border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.12)}
.verdict{display:inline-flex;align-items:center;border-radius:999px;font-size:11.5px;font-weight:800;padding:3px 10px;text-transform:uppercase;letter-spacing:.05em}
.verdict.valide{color:#86efac;border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.12)}
.verdict.rejete{color:#fca5a5;border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.12)}
.verdict.a_valider{color:#a5f3fc;border:1px solid rgba(34,211,238,.5);background:rgba(34,211,238,.12)}
.carte.decision{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.decision-entete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.decision-date{color:var(--tx3);font-size:13px;margin-left:auto}
.lien-artefact{font-size:13px}
.decision-texte{font-size:15.5px;color:var(--tx)}
.decision-conditions{color:var(--tx2);font-size:13.5px;border-left:2px solid var(--bd2);padding-left:10px}
.decision-decideur{color:var(--tx3);font-size:13px}
.decision-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.form-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.form-inline input[type=text]{padding:8px 11px;border-radius:9px;border:1px solid var(--bd2);background:rgba(10,14,20,.7);color:var(--tx);font-size:13.5px;min-width:220px}
.form-inline select{padding:8px 11px;border-radius:9px;border:1px solid var(--bd2);background:rgba(10,14,20,.7);color:var(--tx);font-size:13.5px}
.filtres{margin:14px 0}
.bouton-valider{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.5);color:#86efac}
.bouton-valider:hover{background:rgba(34,197,94,.28);text-decoration:none}
.bouton-rejeter{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5);color:#fca5a5}
.bouton-rejeter:hover{background:rgba(239,68,68,.26);text-decoration:none}
.alerte.ok{border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.08);color:#86efac;border-radius:10px;padding:10px 14px;margin:12px 0;font-size:14px}
.kpi-lien{font-size:12.5px;color:#67e8f9}
.table-wrap{overflow-x:auto;border:1px solid var(--bd2);border-radius:14px;margin:16px 0;background:rgba(10,14,20,.35)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:820px;font-size:13.5px}
.table-wrap th{background:rgba(22,33,49,.92);color:#f8fafc;text-align:left;padding:10px 13px;border-bottom:1px solid var(--bd2);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.table-wrap td{padding:10px 13px;border-bottom:1px solid var(--bd);vertical-align:top;color:var(--tx)}
.table-wrap tr:nth-child(even) td{background:rgba(255,255,255,.018)}
.table-wrap tr:last-child td{border-bottom:none}
.groupe-titre{font-size:15px;margin:0 0 10px;color:#f8fafc}
.compteur{color:var(--tx3);font-weight:600;font-size:12.5px}
.note-vide{color:var(--tx3);font-style:italic;font-size:13.5px}
.liste-fichiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.liste-fichiers a{color:#7dd3fc;font-size:13.5px;word-break:break-all}
.liste-fichiers a:hover{text-decoration:underline}
.ext{display:inline-flex;align-items:center;border-radius:6px;font-size:10px;font-weight:800;padding:2px 7px;margin-right:8px;letter-spacing:.06em}
.ext.html{color:#86efac;border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.1)}
.ext.md{color:#fca5a5;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.08)}
.badge.canal{color:#fde68a;border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.12)}
.article-md{max-width:860px;background:rgba(10,14,20,.5);border:1px solid var(--bd2);border-radius:14px;padding:26px 30px;margin:14px 0 26px;line-height:1.65;font-size:15px}
.article-md h1,.article-md h2,.article-md h3{color:#f8fafc;margin:1.2em 0 .5em;line-height:1.3}
.article-md h1{font-size:1.5em;border-bottom:1px solid var(--bd2);padding-bottom:.35em}
.article-md h2{font-size:1.25em}
.article-md table{border-collapse:collapse;margin:12px 0;width:100%;font-size:13.5px}
.article-md th,.article-md td{border:1px solid var(--bd2);padding:7px 11px;text-align:left}
.article-md th{background:rgba(22,33,49,.9)}
.article-md code{background:rgba(139,92,246,.14);border-radius:5px;padding:1.5px 6px;font-size:13px;color:#c4b5fd}
.article-md pre{background:rgba(0,0,0,.45);border:1px solid var(--bd2);border-radius:10px;padding:13px 16px;overflow-x:auto}
.article-md pre code{background:none;padding:0}
.article-md blockquote{border-left:3px solid var(--cyan);margin:12px 0;padding:2px 16px;color:var(--tx2)}
.article-md a{color:#7dd3fc}
.article-md hr{border:none;border-top:1px solid var(--bd2);margin:18px 0}

@media(max-width:760px){
  .topbar-inner{gap:12px;padding:12px 16px}
  .compte{margin-left:0;width:100%;justify-content:space-between}
  .contenu{padding:24px 16px 50px}
}