@import url(/polices/polices.css);
@import url(/polices/maquettes.css);

/* Salle de crise : un centre de commandement. Fond profond, écrans lumineux,
   le bleu et le rouge du gyrophare en lumière, l'ambre pour ce qui demande
   l'attention. Rajdhani pour les titres et les chiffres, Barlow pour lire. */
:root {
  --fond: #070d18;
  --ecran: rgba(18, 34, 58, .72);
  --ecran-plein: #0f1c30;
  --encre: #dbe8ff;
  --doux: #7f93b3;
  --trait: rgba(98, 150, 230, .22);
  --bleu: #4aa3ff;
  --rouge: #ff3d5a;
  --vert: #39e7a0;
  --ambre: #ffc04a;
  /* L'échelle d'activité, la même partout. */
  --actif: #39e7a0;
  --absent: #ffc04a;
  --afk: #ff8a3d;
  --parti: #4b5d78;
  --rayon: 6px;
  --titre: "Rajdhani", "Barlow Condensed", sans-serif;
  --corps: "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--encre);
  font: 400 15.5px/1.5 var(--corps); font-variant-numeric: tabular-nums;
  background: radial-gradient(1200px 600px at 12% -10%, rgba(74, 163, 255, .16), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(255, 61, 90, .12), transparent 60%),
              var(--fond) fixed;
}
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.1; }
h1 { font-size: 2.6rem; letter-spacing: .05em; margin: 0 0 .3rem; text-shadow: 0 0 24px rgba(74, 163, 255, .4); }
h2 { font-size: 1.45rem; letter-spacing: .04em; margin: 0 0 .8rem; }
h3 { font-size: 1.05rem; letter-spacing: .1em; color: var(--bleu); margin: 1.2rem 0 .6rem; }
p { margin: 0 0 .6rem; }
strong { font-weight: 600; }

/* -- barre ---------------------------------------------------------------- */
.barre {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.6rem; padding: .55rem 20px; background: rgba(7, 13, 24, .78);
  border-bottom: 1px solid var(--trait); backdrop-filter: blur(8px);
}
.marque { display: flex; align-items: center; gap: .7rem; color: var(--encre); }
.marque:hover { text-decoration: none; }
.insigne {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 2px solid var(--bleu); color: var(--bleu); font: 700 .8rem var(--titre); letter-spacing: .04em;
  box-shadow: 0 0 18px rgba(74, 163, 255, .5), inset 0 0 10px rgba(74, 163, 255, .3);
}
.titre { font: 700 1.15rem/1.05 var(--titre); letter-spacing: .05em; }
.titre small { display: block; font: 500 .8rem var(--titre); color: var(--doux); letter-spacing: .08em; }
nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
nav a {
  padding: .4rem .85rem; color: var(--doux); font: 700 1rem var(--titre); letter-spacing: .06em;
  border: 1px solid transparent; border-radius: 4px;
}
nav a:hover { color: var(--encre); text-decoration: none; }
nav a.actif { color: var(--encre); border-color: var(--trait); background: rgba(74, 163, 255, .1); }
.qui { color: var(--doux); font: 500 .95rem var(--titre); letter-spacing: .04em; }
.qui a { margin-left: .7rem; }

main { max-width: 1180px; margin: 0 auto; padding: 1.8rem 20px 3rem; }
.pied { max-width: 1180px; margin: 0 auto; padding: 0 20px 2rem; color: var(--doux); font-size: .8rem; }

/* -- écrans --------------------------------------------------------------- */
.carte {
  background: var(--ecran); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; backdrop-filter: blur(6px);
}
.entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .9rem; margin-bottom: 1.4rem; }
.entete p { color: var(--doux); margin: 0; max-width: 40rem; }
.discret { color: var(--doux); }
.centre { text-align: center; }
.petit { font-size: .86rem; }

.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.tuile { border: 1px solid var(--trait); background: var(--ecran); border-radius: var(--rayon); padding: .7rem 1rem; }
.tuile .valeur { font: 700 1.9rem/1.1 var(--titre); color: var(--bleu); text-shadow: 0 0 14px rgba(74, 163, 255, .45); }
.tuile .libelle { color: var(--doux); font: 500 .9rem var(--titre); letter-spacing: .04em; }

/* -- commandes ------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--bleu); border-radius: 4px;
  background: rgba(74, 163, 255, .14); color: var(--encre); padding: .5rem 1.05rem;
  font: 700 1rem var(--titre); letter-spacing: .06em; cursor: pointer;
  box-shadow: 0 0 14px -4px rgba(74, 163, 255, .6);
}
.bouton:hover { background: rgba(74, 163, 255, .26); text-decoration: none; }
.bouton.discord { border-color: #6e79f5; background: rgba(88, 101, 242, .3); font-size: 1.15rem; padding: .75rem 1.4rem; box-shadow: 0 0 22px -4px rgba(88, 101, 242, .8); }
.bouton.second { border-color: var(--trait); background: transparent; box-shadow: none; }
.bouton.danger { border-color: var(--rouge); color: var(--rouge); background: rgba(255, 61, 90, .08); box-shadow: 0 0 12px -4px rgba(255, 61, 90, .6); }
.bouton:disabled { opacity: .45; cursor: default; }
form.ligne-form { display: grid; gap: .8rem; grid-template-columns: 1.3fr 1.3fr .7fr 1.6fr auto; align-items: end; }
label { display: grid; gap: .3rem; font: 600 .9rem var(--titre); letter-spacing: .05em; color: var(--doux); }
input, select {
  font: 400 1rem var(--corps); color: var(--encre); background: rgba(7, 13, 24, .7);
  border: 1px solid var(--trait); border-radius: 4px; padding: .5rem .65rem; width: 100%; min-height: 42px;
}
input:focus, select:focus { outline: 1px solid var(--bleu); box-shadow: 0 0 12px -2px rgba(74, 163, 255, .6); }
.recherche { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.recherche input { flex: 1; font-size: 1.05rem; }

/* -- marques -------------------------------------------------------------- */
.badge { display: inline-block; padding: .02rem .45rem; border: 1px solid currentColor; border-radius: 3px; font: 700 .82rem var(--titre); letter-spacing: .05em; vertical-align: .2em; }
.badge.ligne { color: var(--vert); text-shadow: 0 0 8px rgba(57, 231, 160, .5); }
.badge.hors { color: var(--doux); }
.badge.recent { color: var(--ambre); }
.badge.suspect { color: var(--rouge); box-shadow: 0 0 10px -2px rgba(255, 61, 90, .6); }
.badge.ffc { color: var(--bleu); }
.point { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, var(--parti)); }

/* -- tableaux ------------------------------------------------------------- */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; color: var(--bleu); font: 700 .88rem var(--titre); letter-spacing: .08em; padding: .45rem .55rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau th[data-tri] { cursor: pointer; }
.tableau th[data-tri]:hover { color: var(--encre); }
.tableau td { padding: .5rem .55rem; border-bottom: 1px solid rgba(98, 150, 230, .12); vertical-align: middle; }
.tableau tr.cliquable { cursor: pointer; }
.tableau tbody tr:hover td { background: rgba(74, 163, 255, .07); }
.tableau .nombre { text-align: right; white-space: nowrap; }
.tableau tr.nous td { background: rgba(74, 163, 255, .1); }
.tableau tr.nous td:first-child { box-shadow: inset 3px 0 0 var(--bleu); }
.hausse { color: var(--vert); }
.baisse { color: var(--rouge); }

/* -- surveillance --------------------------------------------------------- */
.suspect-carte { border-color: rgba(255, 61, 90, .45); box-shadow: 0 0 40px -14px rgba(255, 61, 90, .5); }
.candidat-ecarte td { color: var(--doux); }
.candidat-ecarte td:first-child a { color: var(--doux); text-decoration: line-through; }
.journal { list-style: none; margin: 0; padding: 0; }
.journal li { padding: .55rem 0; border-bottom: 1px solid rgba(98, 150, 230, .12); white-space: pre-line; }
.journal li:last-child { border-bottom: 0; }
.journal time { color: var(--ambre); font: 700 1rem var(--titre); margin-right: .55rem; }
.parcours { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 1px solid var(--trait); }
.parcours li { padding: .3rem 0 .3rem .7rem; position: relative; }
.parcours li::before { content: ""; position: absolute; left: -1.33rem; top: .8rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 8px var(--bleu); }
.chrono { display: block; max-width: none; }
.chrono .nom { fill: var(--encre); font: 600 12px var(--corps); }
.chrono .heure { fill: var(--doux); font: 500 10px var(--titre); }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font: 500 .92rem var(--titre); letter-spacing: .03em; color: var(--doux); margin-top: .5rem; }
.legende span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; background: var(--c); box-shadow: 0 0 6px var(--c); }

/* -- statistiques --------------------------------------------------------- */
.activite { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: rgba(75, 93, 120, .35); min-width: 150px; }
.activite span { display: block; height: 100%; }
.activite .actif { background: var(--actif); box-shadow: 0 0 8px rgba(57, 231, 160, .6); }
.activite .absent { background: var(--absent); }
.activite .afk { background: var(--afk); }
.activite .parti { background: var(--parti); }
.stats-fed td { padding-top: .6rem; padding-bottom: .6rem; }
.stats-fed .tag { font: 700 1.15rem var(--titre); letter-spacing: .04em; }
.reel { font: 700 1.15rem var(--titre); color: var(--bleu); }
.rang-reel { color: var(--doux); font: 500 .85rem var(--titre); }
.rang-reel.monte { color: var(--vert); }
.rang-reel.descend { color: var(--rouge); }
.part-afk { font-weight: 600; }

/* -- messages ------------------------------------------------------------- */
.message { padding: .65rem .9rem; border-radius: 4px; margin-bottom: 1rem; border-left: 3px solid; }
.message.erreur { background: rgba(255, 61, 90, .1); border-color: var(--rouge); color: #ffc2cb; }
.message.info { background: rgba(74, 163, 255, .1); border-color: var(--bleu); color: #cfe4ff; }
.connexion { max-width: 470px; margin: 5rem auto; text-align: center; padding: 2.2rem 1.8rem; }
.connexion .insigne { width: 76px; height: 76px; font-size: 1.3rem; margin-bottom: 1.1rem; }
.connexion p { color: var(--doux); margin-bottom: 1.5rem; }
.copier { cursor: pointer; border-bottom: 1px dotted var(--doux); }
img.rapport { max-width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--trait); }

/* -- page Soupçons (dossiers) ---------------------------------------------- */
.m-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.m-intro h1 { margin: 0; }
.m-intro p { color: var(--doux); margin: 0; max-width: 34rem; }
.m-chiffres { display: flex; gap: .8rem; margin: 0; flex-wrap: wrap; }
.m-chiffres div { border: 1px solid var(--trait); background: var(--ecran); border-radius: var(--rayon); padding: .6rem 1rem; min-width: 8.5rem; }
.m-chiffres dt { color: var(--doux); font: 500 .9rem var(--titre); letter-spacing: .05em; }
.m-chiffres dd { margin: 0; font: 700 1.8rem var(--titre); color: var(--bleu); text-shadow: 0 0 14px rgba(74, 163, 255, .5); }
.m-chiffres small { font-size: .9rem; color: var(--doux); margin-left: .25rem; text-shadow: none; }
.m-suspect { position: relative; border: 1px solid rgba(255, 61, 90, .45); background: var(--ecran); border-radius: 8px; padding: 1.6rem; margin-bottom: 1.6rem; box-shadow: 0 0 40px -10px rgba(255, 61, 90, .45), inset 0 0 60px -30px rgba(255, 61, 90, .35); backdrop-filter: blur(6px); }
.m-identite { display: flex; gap: 1.2rem; align-items: center; }
.m-avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--rouge); color: var(--rouge); font: 700 1.7rem var(--titre); flex: none; box-shadow: 0 0 22px rgba(255, 61, 90, .6), inset 0 0 14px rgba(255, 61, 90, .35); animation: pouls 2.4s ease-in-out infinite; }
@keyframes pouls { 50% { box-shadow: 0 0 34px rgba(255, 61, 90, .85), inset 0 0 18px rgba(255, 61, 90, .5); } }
.m-dossier-no { margin: 0; color: var(--rouge); font: 600 .9rem var(--titre); letter-spacing: .12em; }
.m-identite h2 { margin: 0; font-size: 2.3rem; }
.m-identite h2 a { color: inherit; }
.m-meta { margin: 0 0 .35rem; color: var(--doux); }
.m-fed { color: var(--bleu); font: 700 .95rem var(--titre); border: 1px solid var(--trait); padding: 0 .4rem; border-radius: 3px; margin-right: .3rem; }
.m-etat { margin: 0; font: 700 1rem var(--titre); letter-spacing: .05em; }
.m-etat::before { content: "\25CF  "; }
.m-en-ligne { color: var(--vert); text-shadow: 0 0 10px rgba(57, 231, 160, .6); }
.m-hors-ligne { color: var(--doux); }
.m-actions { margin-left: auto; align-self: flex-start; }
.m-motif { margin: 1.2rem 0 0; padding: .7rem 1rem; border-left: 3px solid var(--rouge); background: rgba(255, 61, 90, .08); }
.m-verdict { margin: 1.3rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: linear-gradient(90deg, rgba(74, 163, 255, .14), transparent); }
.m-verdict-titre { margin: 0; color: var(--doux); font: 600 1rem var(--titre); letter-spacing: .08em; }
.m-verdict-nom { margin: .1rem 0; font: 700 2.1rem var(--titre); color: var(--ambre); text-shadow: 0 0 18px rgba(255, 192, 74, .45); }
.m-verdict-preuve { margin: 0; max-width: 46rem; }
.m-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.m-colonnes h3, .m-frise h3, .m-journal h3 { margin-top: 0; }
.m-candidats ol { list-style: none; margin: 0; padding: 0; }
.m-candidats li { display: flex; align-items: center; gap: .8rem; padding: .5rem .2rem; border-bottom: 1px solid rgba(98, 150, 230, .14); }
.m-c-nom { font: 700 1.08rem var(--titre); letter-spacing: .02em; flex: 1; }
.m-c-chiffres { color: var(--doux); font-size: .9rem; }
.m-candidats li.m-ecarte .m-c-nom { color: var(--doux); text-decoration: line-through; }
.m-puce { font: 700 .85rem var(--titre); letter-spacing: .04em; padding: .02rem .5rem; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; }
.m-puce.m-fort { color: var(--rouge); box-shadow: 0 0 10px rgba(255, 61, 90, .4); }
.m-puce.m-moyen { color: var(--ambre); }
.m-puce.m-faible, .m-puce.m-ecarte { color: var(--doux); }
.m-bascules ul, .m-journal ul { list-style: none; margin: 0; padding: 0; }
.m-bascules li, .m-journal li { padding: .5rem 0; border-bottom: 1px solid rgba(98, 150, 230, .14); }
.m-bascules time, .m-journal time { color: var(--ambre); font: 700 1rem var(--titre); margin-right: .5rem; }
.m-bascules small { display: block; color: var(--doux); }
.m-journal li { display: flex; gap: .3rem; }
.m-journal small { color: var(--doux); }
.m-frise, .m-journal { margin-top: 1.5rem; }
.m-frise-grille { display: grid; grid-template-columns: 9.5rem 1fr; gap: .5rem .8rem; align-items: center; }
.m-frise-nom { font: 700 1rem var(--titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-frise-nom.m-cible { color: var(--rouge); }
.m-frise-piste { position: relative; height: 16px; background: repeating-linear-gradient(90deg, rgba(98, 150, 230, .12) 0 1px, transparent 1px 5%); border: 1px solid var(--trait); border-radius: 2px; overflow: hidden; }
.m-frise-piste span { position: absolute; top: 2px; bottom: 2px; }
.m-bande-cible { background: var(--rouge); box-shadow: 0 0 8px var(--rouge); }
.m-bande { background: var(--bleu); box-shadow: 0 0 8px var(--bleu); }
.m-frise-heures { position: relative; height: 1.3rem; color: var(--doux); font: 500 .9rem var(--titre); }
.m-frise-heures span { position: absolute; transform: translateX(-50%); }
.m-frise-heures span:first-child { transform: none; }
.m-frise-heures span:last-child { transform: translateX(-100%); }
.m-vide { color: var(--doux); }

@media (max-width: 760px) {
  .barre { gap: .35rem .8rem; padding: .5rem 14px; }
  .titre small { display: none; }
  nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  nav a { white-space: nowrap; padding: .35rem .65rem; }
  .qui { margin-left: auto; font-size: .85rem; }
  main { padding: 1.2rem 14px 3rem; }
  h1 { font-size: 2.1rem; }
  .grille { grid-template-columns: 1fr 1fr; }
  form.ligne-form { grid-template-columns: 1fr 1fr; }
  form.ligne-form .bouton { grid-column: 1 / -1; justify-content: center; }
  .tableau .masque-mobile { display: none; }
  .m-suspect { padding: 1.1rem; }
  .m-identite { flex-wrap: wrap; }
  .m-actions { margin-left: 0; }
  .m-colonnes { grid-template-columns: 1fr; }
  .m-frise-grille { grid-template-columns: 6rem 1fr; }
}
@media (prefers-reduced-motion: reduce) { .m-avatar { animation: none; } }