/* Backoffice Mixed Fight Arena — CSS minimal, aucune dépendance externe
   (pas de CDN : le service doit s'afficher correctement même sans accès
   internet sortant depuis le navigateur du client, et pour rester cohérent
   avec l'approche "dépendances minimales" du reste du projet).

   Palette et typographies reprises de la charte graphique officielle
   Mediatree (Brand Book fourni par Philippe le 01/09/2026, documenté dans
   le projet sous claude/cahier-des-charges-plateforme-ingest.md §7) :
   - Palette principale : Midnight Blue #252267, Palatinate Blue #4031de,
     Lavender Indigo #a451de, Zinnwaldite #ebc0ac.
   - Typographies : Space Grotesk (titres/labels), Public Sans (texte
     courant), Space Mono (données — durées, identifiants, timecodes).
   - Coins arrondis systématiques, dégradés froids bleu→violet en usage
     primaire (chrome, boutons, logo).

   Les polices de marque ne sont PAS auto-hébergées ici : cet environnement
   n'a pas d'accès sortant vers fonts.google.com pour récupérer les
   fichiers woff2 (convention "pas de CDN" du projet = pas de <link> vers
   Google Fonts non plus). Dépose les fichiers .woff2 (Space Grotesk,
   Public Sans, Space Mono — Brand Book ou fonts.google.com) dans
   public/fonts/ et décommente les @font-face ci-dessous pour un rendu
   fidèle ; d'ici là, la pile de secours (système) s'affiche à la place
   sans casser la mise en page. */

/*
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
*/

:root {
  /* Fond : variantes très sombres de Midnight Blue plutôt qu'un noir neutre. */
  --bg: #0c0b1e;
  --panel: #15142f;
  --panel-raised: #1b1a3d;
  --border: #2d2b5c;
  --text: #ece9f7;
  --muted: #918dbd;

  /* Accent principal : dégradé froid Palatinate Blue -> Lavender Indigo. */
  --accent: #4031de;
  --accent-hover: #a451de;
  --accent-gradient: linear-gradient(135deg, #4031de 0%, #a451de 100%);

  /* Accent secondaire chaud (badges "IA" dans la charte) : Zinnwaldite. */
  --accent-warm: #ebc0ac;

  --success: #3fb97f;
  --warning: #e0a53f;
  --danger: #e2679a;

  --radius: 14px;
  --radius-sm: 10px;

  --font-display: "Space Grotesk", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.topbar .brand { display: flex; align-items: baseline; gap: 10px; }

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  /* Wordmark "mediatree" : minuscules, dégradé froid — voir Brand Book §7.
     Fallback couleur pleine pour les navigateurs sans background-clip:text. */
  color: var(--accent-hover);
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .brand-word { -webkit-text-fill-color: transparent; color: transparent; }
}

.brand-sep { color: var(--border); }

.brand-app {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

.topbar nav a { margin-right: 16px; color: var(--muted); font-family: var(--font-body); }
.topbar nav a.active, .topbar nav a:hover { color: var(--text); }

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 24px;
}

.auth-container {
  max-width: 380px;
  margin: 10vh auto;
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.auth-container h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-top: 0;
}

label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; font-family: var(--font-body); }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: #0a0918;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}

button, .btn {
  display: inline-block;
  padding: 10px 16px;
  background: var(--accent-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.12); }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-secondary:hover { filter: none; background: var(--panel-raised); }

.error-banner {
  background: rgba(226, 103, 154, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
}

.qr-box { text-align: center; margin: 16px 0; }
.qr-box img { background: white; padding: 8px; border-radius: var(--radius-sm); }
.secret-fallback { font-family: var(--font-mono); font-size: 13px; color: var(--muted); word-break: break-all; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
th {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Données "techniques" (durées, identifiants, timecodes, dates) en Space Mono. */
td.mono, .mono { font-family: var(--font-mono); }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
}
.badge-queued { background: rgba(145, 141, 189, 0.18); color: var(--muted); }
.badge-processing { background: rgba(224, 165, 63, 0.15); color: var(--warning); }
.badge-waiting_storage { background: rgba(224, 165, 63, 0.15); color: var(--warning); }
.badge-done { background: rgba(63, 185, 127, 0.15); color: var(--success); }
.badge-error { background: rgba(226, 103, 154, 0.15); color: var(--danger); }
/* Badge "IA" : ton pêche/Zinnwaldite, distinct de l'accent principal — voir Brand Book §7. */
.badge-ai { background: rgba(235, 192, 172, 0.16); color: var(--accent-warm); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.muted { color: var(--muted); font-size: 13px; }

.inline-form { display: inline; }

.callout {
  background: rgba(63, 185, 127, 0.1);
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}